/* ============================================================
   MEDICI TAROT — estilos de las paginas de servicio
   Complementa styles.css, no lo reemplaza. Reutiliza los tokens
   y las clases del sistema principal (.sec, .wrap, .btn, .faq...).
   ============================================================ */

/* ---------- Hero de pagina interior ---------- */
.page-hero{
  position:relative;
  background:
    radial-gradient(900px 480px at 20% -10%, rgba(102,255,255,.09), transparent 62%),
    radial-gradient(700px 420px at 90% 110%, rgba(184,144,76,.13), transparent 60%),
    var(--indigo);
  color:var(--crema);
  padding:clamp(120px,15vw,168px) 0 clamp(64px,8vw,96px);
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--linea-oro),transparent);
}
.page-hero .wrap{position:relative; z-index:1;}

.page-hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.page-hero h1{
  font-family:var(--f-editorial); font-weight:500;
  font-size:clamp(34px,5.4vw,58px); line-height:1.13;
  letter-spacing:-.01em; margin:18px 0 22px;
}
.page-hero h1 .accent{color:var(--dorado-claro); font-style:italic;}
.page-hero .lead{
  font-family:var(--f-editorial); font-size:clamp(18px,2.1vw,22px);
  line-height:1.6; color:rgba(245,240,228,.8); max-width:52ch;
  margin-bottom:34px;
}
.page-hero-actions{display:flex; flex-wrap:wrap; gap:14px;}

.page-hero-art{position:relative;}
.page-hero-art .marco{
  position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--linea-oro);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
}
.page-hero-art img{display:block; width:100%; height:auto;}

/* ---------- Migas ---------- */
.migas{
  font-family:var(--f-ui); font-size:12.5px; letter-spacing:.06em;
  color:rgba(245,240,228,.5);
}
.migas a{color:rgba(245,240,228,.72); text-decoration:none; border-bottom:1px solid transparent;}
.migas a:hover{color:var(--dorado-claro); border-bottom-color:var(--linea-oro);}
.migas span{margin:0 8px; opacity:.5;}

/* ---------- Bloque de prosa (contenido de fondo, GEO) ---------- */
.prosa{max-width:70ch; margin:0 auto;}
.prosa h2{
  font-family:var(--f-editorial); font-weight:500;
  font-size:clamp(26px,3.4vw,36px); line-height:1.22;
  margin:clamp(44px,5vw,64px) 0 20px;
}
.prosa h2:first-child{margin-top:0;}
.prosa h3{
  font-family:var(--f-title); font-weight:600;
  font-size:clamp(17px,2vw,20px); letter-spacing:.02em;
  margin:34px 0 12px;
}
.prosa p{
  font-size:clamp(16px,1.7vw,17.5px); line-height:1.78;
  margin-bottom:20px; color:var(--tinta);
}
.prosa ul{margin:0 0 24px; padding-left:0; list-style:none;}
.prosa ul li{
  position:relative; padding-left:30px; margin-bottom:13px;
  font-size:clamp(16px,1.7vw,17.5px); line-height:1.7;
}
.prosa ul li::before{
  content:"✦"; position:absolute; left:4px; top:1px;
  color:var(--dorado); font-size:13px;
}
.prosa strong{color:var(--indigo); font-weight:600;}
.prosa .destacado{
  border-left:2px solid var(--dorado);
  padding:4px 0 4px 24px; margin:32px 0;
  font-family:var(--f-editorial); font-style:italic;
  font-size:clamp(18px,2.1vw,21px); line-height:1.6;
  color:var(--indigo-noche);
}

/* ---------- Tarjetas de "para quien es" ---------- */
.para-quien{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px; margin-top:38px;
}
.para-quien .item{
  background:#fff; border:1px solid rgba(184,144,76,.2);
  border-radius:5px; padding:28px 26px;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition), box-shadow var(--transition);
}
.para-quien .item:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover);}
.para-quien .item h3{
  font-family:var(--f-title); font-size:16px; font-weight:600;
  letter-spacing:.02em; margin-bottom:10px; color:var(--indigo);
}
.para-quien .item p{font-size:15.5px; line-height:1.65; color:rgba(28,24,38,.78); margin:0;}

/* ---------- Aviso de estado (curso proximamente) ---------- */
.aviso-estado{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(184,144,76,.14);
  border:1px solid var(--linea-oro);
  color:var(--dorado-claro);
  font-family:var(--f-ui); font-size:12.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border-radius:100px;
}
.aviso-estado .punto{
  width:7px; height:7px; border-radius:50%;
  background:var(--dorado-claro); flex:none;
}

/* ---------- Enlaces a los otros servicios ---------- */
.otros-servicios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.otros-servicios a{
  display:block; text-decoration:none;
  background:var(--crema-soft); border:1px solid rgba(184,144,76,.22);
  border-radius:5px; padding:26px 24px;
  transition:transform var(--transition), border-color var(--transition);
}
.otros-servicios a:hover{transform:translateY(-4px); border-color:var(--dorado);}
.otros-servicios .et{
  font-family:var(--f-ui); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado); display:block; margin-bottom:9px;
}
.otros-servicios .ti{
  font-family:var(--f-editorial); font-size:21px; line-height:1.3;
  color:var(--indigo); display:block; margin-bottom:8px;
}
.otros-servicios .de{font-size:14.5px; line-height:1.6; color:rgba(28,24,38,.7);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;}
  .page-hero-art{max-width:340px; margin:8px auto 0;}
}
@media (max-width:600px){
  .page-hero{padding-top:104px;}
  .page-hero-actions .btn{width:100%; text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .para-quien .item,
  .otros-servicios a{transition:none;}
  .para-quien .item:hover,
  .otros-servicios a:hover{transform:none;}
}