/* Útero Madre · hoja de estilos del sitio
   Los tokens son los del sistema de identidad. No inventar valores acá. */

:root{
  --lienzo:#f5f3f8; --velo:#e9e3f1; --linea:#cdc3dd; --borde:#8373a6;
  --tinta:#2f116b; --tinta-suave:#4a3080; --hondura:#1a0c33;
  --luz:#f9d9b2; --ambar:#e7be99; --lavanda:#b3c5de; --lavanda-honda:#a5b6ce;
  --rosa-velo:#dac8c2; --savia:#c1d5b4; --savia-honda:#acc59b; --sobre-campo:#2f116b;

  --e1:6px; --e2:12px; --e3:18px; --e4:24px; --e5:36px; --e6:48px; --e7:72px; --e8:108px;
  --radio:0; --circulo:9999px;
  --ancho:1280px; --gutter:clamp(20px, 5vw, 88px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--lienzo); color:var(--tinta);
      font-family:"Jost",Futura,"Century Gothic",sans-serif; font-weight:400;
      font-size:17px; line-height:29px; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--tinta-suave); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter) }
.k{ font-size:12px; line-height:16px; letter-spacing:.2em; text-transform:uppercase;
    font-weight:500; color:var(--tinta-suave); margin:0 }
h1,h2,h3{ font-weight:300; letter-spacing:-.015em; margin:0; text-wrap:balance }
h1{ font-size:clamp(38px,5.4vw,72px); line-height:1.05 }
h2{ font-size:clamp(30px,3.6vw,46px); line-height:1.14 }
h3{ font-size:clamp(21px,2vw,27px); line-height:1.24; font-weight:400 }
p{ margin:0 }
.voz{ font-family:"Newsreader",Georgia,serif; font-weight:300; font-size:clamp(18px,1.6vw,22px); line-height:1.6 }
.voz.it{ font-style:italic }
.num{ font-variant-numeric:tabular-nums }

.boton{ display:inline-block; background:var(--hondura); color:var(--luz);
        padding:17px 32px; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
        font-weight:500; border-radius:var(--radio); transition:background .2s }
.boton:hover{ background:var(--tinta) }
.boton.claro{ background:var(--luz); color:var(--hondura) }
.boton.claro:hover{ background:var(--ambar) }

/* ---------- fondos del sistema ---------- */
.f-alba{background:radial-gradient(115% 85% at 80% 6%,var(--luz) 0%,rgba(249,217,178,0) 58%),radial-gradient(105% 80% at 10% 94%,var(--lavanda) 0%,rgba(179,197,222,0) 62%),radial-gradient(85% 65% at 96% 92%,var(--rosa-velo) 0%,rgba(218,200,194,0) 60%),var(--lienzo)}
.f-cenit{background:radial-gradient(130% 100% at 50% 0%,var(--luz) 0%,rgba(249,217,178,0) 55%),radial-gradient(130% 100% at 50% 100%,var(--lavanda) 0%,rgba(179,197,222,0) 58%),var(--lienzo)}
.f-marea{background:radial-gradient(75% 130% at 0% 50%,var(--lavanda) 0%,rgba(179,197,222,0) 70%),radial-gradient(75% 130% at 100% 50%,var(--luz) 0%,rgba(249,217,178,0) 70%),radial-gradient(45% 80% at 50% 55%,var(--rosa-velo) 0%,rgba(218,200,194,0) 75%),var(--lienzo)}
.f-noche{background:radial-gradient(92% 72% at 76% 12%,rgba(249,217,178,.50) 0%,rgba(249,217,178,0) 62%),radial-gradient(96% 76% at 14% 96%,rgba(143,163,196,.46) 0%,rgba(143,163,196,0) 64%),var(--hondura)}

/* ---------- cabecera ---------- */
.cabecera{ position:sticky; top:0; z-index:40; backdrop-filter:blur(8px);
           background:color-mix(in srgb, var(--lienzo) 82%, transparent);
           border-bottom:1px solid var(--linea) }
.cabecera .fila{ display:flex; align-items:center; justify-content:space-between;
                 gap:var(--e4); padding-block:18px }
.marca{ display:flex; align-items:center; gap:12px }
.marca img{ width:34px }
/* El símbolo de la marca cambia de tinta según el fondo que tenga detrás.
   Regla del sistema: sobre tinta u hondura va en luz; violeta sobre violeta no se lee. */
.marca .m-luz{ display:none }
body[data-hero="hondura"] .cabecera:not(.pegada) .m-tinta,
body[data-hero="sangre-noche"] .cabecera:not(.pegada) .m-tinta{ display:none }
body[data-hero="hondura"] .cabecera:not(.pegada) .m-luz,
body[data-hero="sangre-noche"] .cabecera:not(.pegada) .m-luz{ display:block }
.marca span{ font-size:15px; letter-spacing:.3em }
.menu{ display:flex; gap:var(--e5); font-size:15px }
.menu a:hover{ color:var(--tinta-suave) }
.menu-btn{ display:none; background:none; border:0; font:inherit; color:inherit; padding:8px; cursor:pointer }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden }
.hero .flor{ position:absolute; width:min(1000px,88vw); top:-28%; right:-18%;
             opacity:.26; pointer-events:none }
.hero .caja{ position:relative; display:grid; grid-template-columns:1.25fr .9fr;
             gap:var(--e7); align-items:end; padding-block:clamp(56px,8vw,104px) }
.hero h1{ max-width:14ch }
.hero .lado{ padding-bottom:6px }
.hero .lado .boton{ margin-top:var(--e5) }
.hero .retrato{ display:none }
.hero .fondo-hero{ display:none }
.hero .fondo-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero .capa-hero{ display:none; position:absolute; inset:0 }
.hero .flor-luz{ display:none }

/* variante B · partido, con foto */
body[data-hero="partido"] .hero .caja{ grid-template-columns:1.05fr 1fr; grid-template-rows:auto auto;
  align-items:start; column-gap:var(--e7); row-gap:var(--e5); padding-block:clamp(48px,6vw,84px) }
body[data-hero="partido"] .hero .titular{ grid-column:1; grid-row:1 }
body[data-hero="partido"] .hero .lado{ grid-column:1; grid-row:2; margin-top:0 }
body[data-hero="partido"] .hero .retrato{ grid-column:2; grid-row:1 / span 2; align-self:stretch }
body[data-hero="partido"] .hero .retrato{ display:block; position:relative; min-height:420px;
  overflow:hidden; border-radius:var(--radio) }
body[data-hero="partido"] .hero .retrato img{ width:100%; height:100%; object-fit:cover }
body[data-hero="partido"] .hero .flor{ opacity:.18 }

/* variantes D y E · la foto a sangre en todo el hero */
body[data-hero="sangre-claro"] .hero,
body[data-hero="sangre-noche"] .hero{ min-height:min(76vh,720px); display:flex; align-items:flex-end }
body[data-hero="sangre-claro"] .hero .fondo-hero,
body[data-hero="sangre-noche"] .hero .fondo-hero{ display:block; position:absolute; inset:0 }
body[data-hero="sangre-claro"] .hero .capa-hero,
body[data-hero="sangre-noche"] .hero .capa-hero{ display:block }
/* todo el texto en una columna, dentro de la franja protegida;
   la mitad derecha queda como imagen limpia */
body[data-hero="sangre-claro"] .hero .caja,
body[data-hero="sangre-noche"] .hero .caja{ width:100%; grid-template-columns:minmax(0,600px);
  gap:var(--e5); align-items:start; padding-block:clamp(64px,8vw,110px) }
body[data-hero="sangre-claro"] .hero .lado,
body[data-hero="sangre-noche"] .hero .lado{ padding-bottom:0 }
body[data-hero="sangre-claro"] .hero .lado .boton,
body[data-hero="sangre-noche"] .hero .lado .boton{ margin-top:var(--e4) }
body[data-hero="sangre-claro"] .hero h1,
body[data-hero="sangre-noche"] .hero h1{ max-width:13ch }
body[data-hero="sangre-claro"] .hero .flor,
body[data-hero="sangre-noche"] .hero .flor{ display:none }

/* D · velo de luz: la foto queda clara y el texto va en el violeta de siempre */
body[data-hero="sangre-claro"] .hero .ff-oscuro{ display:none }
body[data-hero="sangre-claro"] .hero .capa-hero{
  background:
    linear-gradient(90deg, rgba(245,243,248,.80) 0%, rgba(245,243,248,.62) 42%, rgba(245,243,248,.14) 74%, rgba(245,243,248,0) 100%),
    linear-gradient(200deg, rgba(249,217,178,.80) 0%, rgba(218,200,194,.58) 46%, rgba(179,197,222,.84) 100%) }

/* E · noche: la foto se hunde y el texto va en luz */
body[data-hero="sangre-noche"] .hero .ff-claro{ display:none }
body[data-hero="sangre-noche"] .hero .capa-hero{
  background:
    linear-gradient(90deg, rgba(26,12,51,.86) 0%, rgba(26,12,51,.68) 44%, rgba(26,12,51,.20) 78%, rgba(26,12,51,0) 100%),
    linear-gradient(0deg, rgba(26,12,51,.90) 0%, rgba(26,12,51,.50) 62%, rgba(26,12,51,.32) 100%) }
body[data-hero="sangre-noche"] .hero{ color:var(--luz) }
body[data-hero="sangre-noche"] .hero .k{ color:var(--luz); opacity:.78 }
body[data-hero="sangre-noche"] .hero .boton{ background:var(--luz); color:var(--hondura) }
body[data-hero="sangre-noche"] .hero .boton:hover{ background:var(--ambar) }
body[data-hero="sangre-noche"] .hero .flor-luz{ display:block; opacity:.22 }
body[data-hero="sangre-noche"] .cabecera{ background:color-mix(in srgb, var(--hondura) 78%, transparent);
  border-bottom-color:rgba(249,217,178,.22); color:var(--luz) }
body[data-hero="sangre-noche"] .cabecera.pegada{ background:color-mix(in srgb, var(--lienzo) 86%, transparent);
  border-bottom-color:var(--linea); color:var(--tinta) }

/* variante C · hondura, hero oscuro */
body[data-hero="hondura"] .hero{ color:var(--luz) }
body[data-hero="hondura"] .hero .k{ color:var(--luz); opacity:.78 }
body[data-hero="hondura"] .hero .flor{ opacity:.3 }
body[data-hero="hondura"] .cabecera{ background:color-mix(in srgb, var(--hondura) 86%, transparent);
  border-bottom-color:rgba(249,217,178,.22); color:var(--luz) }
body[data-hero="hondura"] .cabecera.pegada{ background:color-mix(in srgb, var(--lienzo) 86%, transparent);
  border-bottom-color:var(--linea); color:var(--tinta) }

/* ---------- orden de la página ----------
   Por defecto: hero · servicios · quién · cita · doula · pie.
   Con data-orden="cita-arriba" la cita sube al segundo lugar, así los dos
   bloques oscuros quedan repartidos en vez de juntos abajo. */
main{ display:flex; flex-direction:column }
.hero{ order:1 } #servicios{ order:3 } .quien{ order:5 } .cita{ order:7 } #doula{ order:9 }
/* Las páginas internas no entran en este reparto: sin esto, una sección sin
   order (0) se iría arriba del hero, que tiene order:1. */
body.interna main{ display:block }
body[data-orden="cita-arriba"] .cita{ order:2 }
body[data-orden="cita-arriba"] #servicios{ order:3 }
body[data-orden="cita-arriba"] .quien{ order:5 }
body[data-orden="cita-arriba"] #doula{ order:7 }

/* ---------- secciones ---------- */
section{ padding-block:clamp(56px,7vw,var(--e8)) }
.tit{ display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e6) }

.areas{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px }
.area{ padding:var(--e5) var(--e4) var(--e6); display:flex; flex-direction:column; gap:var(--e2);
       min-height:300px; color:var(--sobre-campo); text-decoration:none }
.area:hover .mas{ border-bottom-color:transparent }
.area .k{ color:inherit; opacity:.75 }
.area p{ font-size:15px; line-height:24px }
.area .mas{ margin-top:auto; padding-top:var(--e3); font-size:11px; letter-spacing:.2em;
            text-transform:uppercase; font-weight:500; color:inherit; text-decoration:none;
            border-bottom:1px solid currentColor; align-self:flex-start; padding-bottom:3px }
.area .mas:hover{ border-bottom-color:transparent }
.area:nth-child(1){ background:var(--velo); color:var(--tinta) }
.area:nth-child(2){ background:var(--luz) }
.area:nth-child(3){ background:var(--lavanda) }
.area:nth-child(4){ background:var(--savia) }

/* ---------- listas de la página de servicio ---------- */
.motivos{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea) }
.motivos li{ position:relative; padding:var(--e3) 0 var(--e3) var(--e4);
             border-bottom:1px solid var(--linea); font-size:15px; line-height:24px }
.motivos li::before{ content:""; position:absolute; left:0; top:26px; width:9px; height:9px;
                     border:1px solid var(--borde); border-radius:50% }

.motivos.columnas{ columns:2; column-gap:var(--e7) }
.motivos.columnas li{ break-inside:avoid }

/* ---------- páginas internas ---------- */
body.interna .hero{ min-height:min(58vh,520px) }
body.interna .hero .caja{ grid-template-columns:minmax(0,640px) }
.banda-foto{ margin:0; position:relative; height:clamp(240px,34vw,460px); overflow:hidden }
.banda-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.quien-corto{ background:var(--velo) }
.enlace{ border-bottom:1px solid var(--borde); padding-bottom:2px }
.enlace:hover{ border-bottom-color:transparent }

.otros-serv{ border-top:1px solid var(--linea) }
.otros{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:var(--e5) }
.otro{ display:flex; flex-direction:column; gap:var(--e2); padding:var(--e5) var(--e4) var(--e6);
       color:var(--sobre-campo); text-decoration:none; min-height:190px }
.otro .cap{ margin-top:auto; font-size:13px; line-height:20px; color:inherit; opacity:.75 }
.otro .k{ color:inherit; opacity:.75 }
/* El campo de cada servicio lo acompaña también acá: así se reconoce desde la home. */
.otro.t-velo{ background:var(--velo); color:var(--tinta) }
.otro.t-luz{ background:var(--luz) }
.otro.t-lavanda{ background:var(--lavanda) }
.otro.t-savia{ background:var(--savia) }
.otro:hover{ filter:brightness(.96) }

.momentos.breves li{ grid-template-columns:38px 1fr; padding:var(--e3) 0 }
.momentos.breves h3{ font-size:19px; line-height:26px }

.quien{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch }
.quien .foto{ position:relative; min-height:520px; overflow:hidden }
.quien .foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.quien .txt{ background:var(--velo); padding:clamp(40px,5vw,var(--e8));
             display:flex; flex-direction:column; gap:var(--e4); justify-content:center }
.quien .txt p{ font-size:16px; line-height:27px; max-width:46ch }

.cita{ position:relative; overflow:hidden; text-align:center;
       padding-block:clamp(72px,9vw,140px) }
.cita .flor{ position:absolute; width:min(1400px,150vw); top:-42%; left:-14%;
             opacity:.24; pointer-events:none }
.cita blockquote{ position:relative; margin:0 auto; max-width:20ch; color:var(--luz);
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(24px,3.2vw,40px); line-height:1.5 }
.cita figcaption{ position:relative; margin-top:var(--e5); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--luz); opacity:.7 }

.doula{ display:grid; grid-template-columns:1fr 480px; gap:var(--e7); align-items:start }
/* La columna de la marca mide 448 px y los cuatro momentos 797: sin acompañar el scroll
   dejaría media pantalla vacía al final de la sección. 71 px es la cabecera. */
.doula > div:first-child{ position:sticky; top:calc(71px + var(--e6)); align-self:start }
.doula p{ margin-top:var(--e4); max-width:46ch; font-size:16px; line-height:27px }
.doula .boton{ margin-top:var(--e5) }
.lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--borde) }
.lista li{ display:flex; justify-content:space-between; gap:var(--e4); padding:16px 0;
           border-bottom:1px solid var(--borde); font-size:16px; line-height:24px }
.lista .val{ font-variant-numeric:tabular-nums; white-space:nowrap }
.nota{ margin-top:var(--e4); font-size:13px; line-height:21px; color:var(--tinta-suave) }

/* los cuatro momentos del acompañamiento de doula */
.momentos{ list-style:none; margin:0; padding:0; border-top:1px solid var(--borde);
  counter-reset:m }
.momentos li{ padding:var(--e4) 0; border-bottom:1px solid var(--borde);
  display:grid; grid-template-columns:44px 1fr; gap:var(--e1) var(--e3); align-items:baseline }
.momentos .k{ grid-column:1; grid-row:1 / span 2 }
.momentos h3{ grid-column:2; font-size:21px; line-height:27px }
.momentos p{ grid-column:2; font-size:15px; line-height:24px; color:var(--tinta) }

.marca-servicio{ display:flex; align-items:center; gap:var(--e3) }
.marca-servicio img{ width:52px; flex:none }
.marca-servicio h2{ font-size:clamp(26px,3vw,38px) }
.doula .voz{ color:var(--tinta-suave); font-style:italic }
.srv{ font-weight:500 }

/* ---------- pie ---------- */
.pie{ background:var(--hondura); color:var(--luz); padding-block:var(--e8) }
.pie .fila{ display:grid; grid-template-columns:1fr auto auto; gap:var(--e7); align-items:start }
.pie .marca span{ color:var(--luz) }
.pie h3{ color:var(--luz) }
.pie a:hover{ color:var(--ambar) }
.pie .dato{ font-size:16px; line-height:30px }
.pie .legal{ margin-top:var(--e7); padding-top:var(--e4); border-top:1px solid rgba(249,217,178,.25);
             font-size:13px; opacity:.7; display:flex; justify-content:space-between; gap:var(--e4); flex-wrap:wrap }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .areas{ grid-template-columns:repeat(2,1fr) }
  .doula{ grid-template-columns:1fr; gap:var(--e6) }
  .motivos.columnas{ columns:1 }
  .otros{ grid-template-columns:1fr }
  .doula > div:first-child{ position:static }
  .pie .fila{ grid-template-columns:1fr 1fr; gap:var(--e6) }
}
@media (max-width:760px){
  body{ font-size:16px; line-height:27px }
  .menu{ display:none }
  .menu-btn{ display:block }
  /* El panel del menú es siempre claro, así que su texto es siempre tinta:
     si heredara el color de una cabecera oscura, quedaría invisible. */
  .menu.abierto{ display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--lienzo); color:var(--tinta);
    border-bottom:1px solid var(--linea) }
  .menu.abierto a{ padding:16px var(--gutter); border-top:1px solid var(--linea); color:var(--tinta) }
  .menu-btn{ border:1px solid currentColor; padding:7px 14px; font-size:12px;
             letter-spacing:.14em; text-transform:uppercase }
  /* En pantalla chica el encuadre se corre para que el motivo de la foto entre */
  body[data-hero="sangre-claro"] .hero .fondo-hero img,
  body[data-hero="sangre-noche"] .hero .fondo-hero img{ object-position:72% center }
  body[data-hero="sangre-claro"] .hero,
  body[data-hero="sangre-noche"] .hero{ min-height:0 }
  body[data-hero="sangre-claro"] .hero .caja,
  body[data-hero="sangre-noche"] .hero .caja{ padding-block:clamp(48px,14vw,80px) }
  .hero .caja{ grid-template-columns:1fr; gap:var(--e5); align-items:start }
  body[data-hero="partido"] .hero .caja{ grid-template-columns:1fr }
  .hero h1{ max-width:none }
  .areas{ grid-template-columns:1fr }
  .area{ min-height:0 }
  .quien{ grid-template-columns:1fr }
  .quien .foto{ min-height:360px }
  .pie .fila{ grid-template-columns:1fr }
}