/* ============================================================
   Áreas de dedicación — Dra. Carmen Álvarez
   Requiere base.css.
   ============================================================ */

/* ---------- cabecera de área ---------- */
.hero-a{
  position:relative; overflow:hidden;
  padding:clamp(3.5rem,8vw,6.5rem) var(--pad) clamp(3rem,6vw,5rem);
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  border-bottom:1px solid var(--hairline);
}
.hero-a::before{
  content:""; position:absolute; width:52vmax; height:52vmax; border-radius:50%;
  right:-20vmax; top:-24vmax; pointer-events:none;
  background:radial-gradient(circle,rgba(245,222,218,.55),rgba(245,222,218,0) 62%);
}
.hero-a-in{ position:relative; max-width:var(--maxw); margin:0 auto; }
.crumb{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.8rem;
}
.crumb a{ text-decoration:none; transition:color .3s; }
.crumb a:hover{ color:var(--rose-deep); }
.crumb span{ color:var(--rose-deep); }
.hero-a h1{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(2.2rem,1.4rem + 3.6vw,4.2rem); line-height:1.08; letter-spacing:-.008em;
  max-width:17em;
}
.hero-a h1 em{ font-style:italic; color:var(--rose-deep); }
.hero-a .lead{
  margin-top:1.6rem; max-width:56ch; color:var(--ink-soft);
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
}
.hero-a .num{
  position:absolute; right:0; top:-.4rem;
  font-family:var(--serif); font-style:italic; font-size:clamp(3rem,8vw,6rem);
  color:rgba(198,127,118,.16); line-height:1; pointer-events:none;
}
@media (max-width:760px){ .hero-a .num{ display:none; } }

/* ---------- tira de datos ---------- */
.facts{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad); margin-top:clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline); border-radius:10px; overflow:hidden;
}
.fact{ background:var(--cream); padding:1.4rem 1.5rem; }
.fact dt{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400; margin-bottom:.5rem;
}
.fact dd{ font-size:.95rem; color:#2c4653; line-height:1.55; }
.facts-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.facts-wrap .facts{ padding:0; }

/* ---------- cuerpo ---------- */
.area{ max-width:820px; margin:0 auto; padding:clamp(3.5rem,7vw,5.5rem) var(--pad) 0; }
.area section{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.area h2{
  font-family:var(--serif); font-weight:400; color:var(--petrol); line-height:1.2;
  font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem); margin-bottom:1.2rem;
}
.area h2 em{ font-style:italic; color:var(--rose-deep); }
.area h3{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.55rem); margin:2rem 0 .7rem;
}
.area p{ margin-bottom:1.15rem; color:#2c4653; }
.area strong{ font-weight:500; color:var(--petrol); }
.area ul{ margin:0 0 1.2rem 1.15rem; }
.area li{ margin-bottom:.6rem; color:#2c4653; }
.area li::marker{ color:var(--rose-deep); }
.area a.inline{
  color:var(--rose-deep); text-decoration:none;
  border-bottom:1px solid var(--hairline-rose); transition:border-color .3s;
}
.area a.inline:hover{ border-color:var(--rose-deep); }
.sec-tag{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400; margin-bottom:.9rem;
  display:flex; align-items:center; gap:.9rem;
}
.sec-tag::before{ content:""; height:1px; width:30px; background:var(--hairline-rose); }

/* ---------- caja de aviso ---------- */
.note{
  background:var(--cream-2); border-left:2px solid var(--rose);
  padding:1.4rem 1.6rem; margin:1.8rem 0; border-radius:0 10px 10px 0;
}
.note p:last-child{ margin-bottom:0; }
.note.warn{ background:#FBF2EF; border-left-color:var(--coral); }

/* ---------- explorador interactivo ---------- */
.explore{
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
  background:var(--cream); margin:2rem 0;
}
.explore-head{
  padding:1.3rem 1.5rem; background:var(--cream-2); border-bottom:1px solid var(--hairline);
}
.explore-head strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem;
  color:var(--petrol); margin-bottom:.2rem;
}
.explore-head span{ font-size:.88rem; color:var(--ink-soft); }
.explore-opts{
  display:flex; flex-wrap:wrap; gap:.55rem; padding:1.3rem 1.5rem;
  border-bottom:1px solid var(--hairline);
}
.opt{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400; cursor:pointer; padding:.6rem 1.15rem; border-radius:99px;
  border:1px solid var(--hairline); background:none; color:var(--ink-soft);
  transition:border-color .3s,color .3s,background .3s;
}
.opt:hover{ border-color:var(--rose-deep); color:var(--rose-deep); }
.opt[aria-selected="true"]{ background:var(--petrol); border-color:var(--petrol); color:var(--cream); }
.explore-out{ padding:1.5rem; min-height:150px; }
.explore-out h4{
  font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--petrol);
  margin-bottom:.5rem;
}
.explore-out .kicker{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:.6rem;
}
.explore-out p{ font-size:.96rem; margin-bottom:.9rem; }
.explore-out p:last-child{ margin-bottom:0; }
.explore-out .next{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--hairline);
  font-size:.9rem; color:var(--ink-soft);
}
.explore-out .next b{
  display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400; margin-bottom:.35rem;
}
.fadein{ animation:fadein .5s var(--ease-soft); }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---------- pasos ---------- */
.steps{ counter-reset:s; margin:2rem 0; }
.step{
  position:relative; padding:0 0 1.8rem 3.2rem; counter-increment:s;
  border-left:1px solid var(--hairline); margin-left:.7rem;
}
.step:last-child{ border-left-color:transparent; padding-bottom:0; }
.step::before{
  content:counter(s); position:absolute; left:-.85rem; top:-.15rem;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--cream); border:1px solid var(--hairline-rose);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.9rem; color:var(--rose-deep);
}
.step h4{
  font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--petrol);
  margin-bottom:.35rem;
}
.step p{ font-size:.96rem; margin-bottom:0; }
.step .dur{
  display:inline-block; margin-left:.6rem; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- preguntas frecuentes ---------- */
.faq{ border-top:1px solid var(--hairline); margin-top:1.5rem; }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.12rem,1rem + .5vw,1.35rem);
  color:var(--petrol); line-height:1.35; transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--rose-deep); }
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:1.7rem;
  width:11px; height:11px; border-right:1px solid var(--rose-deep);
  border-bottom:1px solid var(--rose-deep); transform:rotate(45deg);
  transition:transform .35s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(225deg); top:1.9rem; }
.faq .ans{ padding:0 0 1.4rem; }
.faq .ans p{ font-size:.98rem; margin-bottom:.9rem; }
.faq .ans p:last-child{ margin-bottom:0; }
.faq .ans ul{ margin-bottom:.9rem; }

/* ---------- cuándo consultar ---------- */
.when{
  background:var(--petrol); color:var(--cream);
  border-radius:16px; padding:clamp(1.8rem,4vw,2.8rem); margin:2.5rem 0;
}
.when h3{ color:var(--cream); margin-top:0; font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); }
.when ul{ margin:1.2rem 0 0 1.15rem; }
.when li{ color:rgba(253,249,246,.78); margin-bottom:.65rem; }
.when li::marker{ color:var(--blush-2); }
.when .sec-tag{ color:var(--blush-2); }
.when .sec-tag::before{ background:rgba(239,206,200,.4); }

/* ---------- llamada final ---------- */
.cta{
  max-width:820px; margin:0 auto; padding:0 var(--pad) clamp(4rem,8vw,6rem);
  text-align:center;
}
.cta-in{
  border-top:1px solid var(--hairline); padding-top:clamp(2.5rem,5vw,3.5rem);
}
.cta h2{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem); line-height:1.18; margin-bottom:1rem;
}
.cta h2 em{ font-style:italic; color:var(--rose-deep); }
.cta p{ color:var(--ink-soft); max-width:46ch; margin:0 auto 2rem; }
.btn{
  display:inline-flex; align-items:center; gap:.8rem; position:relative; overflow:hidden;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:400; text-decoration:none;
  padding:1.15rem 2.6rem; border-radius:99px;
  background:var(--petrol); color:var(--cream);
  transition:background .4s;
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--rose-deep);
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }

/* ---------- áreas relacionadas ---------- */
.related{ background:var(--cream-2); border-top:1px solid var(--hairline); }
.related-in{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,6vw,4.5rem) var(--pad); }
.related h2{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(1.5rem,1.3rem + 1vw,2rem); margin-bottom:2rem;
}
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.rel-card{
  display:block; text-decoration:none; background:var(--cream);
  border:1px solid var(--hairline); border-radius:12px; padding:1.5rem 1.6rem;
  transition:border-color .35s, transform .35s var(--ease-out);
}
.rel-card:hover{ border-color:var(--rose-deep); transform:translateY(-3px); }
.rel-card .k{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:.5rem;
}
.rel-card h3{
  font-family:var(--serif); font-weight:400; font-size:1.28rem; color:var(--petrol);
  line-height:1.3; margin-bottom:.4rem;
}
.rel-card p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }

/* ---------- aviso sanitario ---------- */
.disclaimer{
  max-width:820px; margin:0 auto; padding:0 var(--pad) clamp(3rem,6vw,4rem);
}
.disclaimer p{
  border-top:1px solid var(--hairline); padding-top:1.5rem;
  font-size:.84rem; font-style:italic; color:var(--ink-soft); line-height:1.65;
}

/* ============================================================
   HUB de áreas
   ============================================================ */
.hub-hero{
  padding:clamp(4rem,9vw,7rem) var(--pad) clamp(2.5rem,5vw,4rem);
  max-width:var(--maxw); margin:0 auto;
}
.hub-hero .over{
  font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400; margin-bottom:1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.hub-hero .over::before{ content:""; height:1px; width:40px; background:var(--hairline-rose); }
.hub-hero h1{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(2.4rem,1.5rem + 4vw,4.6rem); line-height:1.06; letter-spacing:-.008em;
}
.hub-hero h1 em{ font-style:italic; color:var(--rose-deep); }
.hub-hero p{ margin-top:1.6rem; max-width:58ch; color:var(--ink-soft); font-size:clamp(1rem,.96rem + .3vw,1.18rem); }

.hub-grid{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(4rem,8vw,7rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.4rem;
}
.hub-card{
  display:flex; flex-direction:column; text-decoration:none; position:relative;
  background:var(--cream); border:1px solid var(--hairline); border-radius:16px;
  padding:clamp(1.8rem,3vw,2.4rem); overflow:hidden;
  transition:border-color .4s, transform .4s var(--ease-out), box-shadow .4s;
}
.hub-card:hover{
  border-color:var(--rose-deep); transform:translateY(-4px);
  box-shadow:0 22px 50px -28px rgba(14,46,59,.32);
}
.hub-card .n{
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:var(--rose-deep); margin-bottom:1.3rem;
}
.hub-card svg{
  width:42px; height:42px; margin-bottom:1.2rem;
  stroke:var(--rose-deep); fill:none; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.hub-card h2{
  font-family:var(--serif); font-weight:400; color:var(--petrol);
  font-size:clamp(1.4rem,1.2rem + .9vw,1.8rem); line-height:1.22; margin-bottom:.7rem;
  transition:color .35s;
}
.hub-card:hover h2{ color:var(--rose-deep); }
.hub-card p{ font-size:.94rem; color:var(--ink-soft); line-height:1.6; flex:1; }
.hub-card .go{
  margin-top:1.4rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose-deep); display:flex; align-items:center; gap:.6rem;
}
.hub-card .go::after{
  content:""; width:16px; height:1px; background:var(--rose-deep);
  transition:width .35s var(--ease-out);
}
.hub-card:hover .go::after{ width:30px; }