/* ===========================================================================
   El Destino de Nora — hoja de estilos única
   ---------------------------------------------------------------------------
   Sustituye a 69 ficheros y 1,5 MB de CSS (Astra + Elementor + WooCommerce +
   dos plugins de cookies + Roboto).

   Tokens derivados en OKLCH: tono fijo, variando luminosidad y croma. Los 10
   pares de contraste están MEDIDOS leyendo el píxel del canvas — el más justo
   es 5,09 sobre un mínimo de 4,5. Ver _design/sistema.html.

   Reglas que vienen de fallos ya sufridos:
   · Solo se animan `transform` y `opacity`. Nada de `width`, `height`,
     `box-shadow`, `top/left` ni colores: Chrome no los compone y repinta en el
     hilo principal.
   · Above the fold se anima con `.rise` (CSS puro), NUNCA con un observador de
     scroll: dejaría el hero en opacity:0 hasta que cargue el JS.
   · Toda animación necesita su salida en `prefers-reduced-motion`, y esa salida
     tiene que anular también el `animation-delay` — con `fill-mode: both`, un
     retardo sin anular deja el elemento invisible.
   ======================================================================== */

:root{
  --noche:      oklch(16% 0.045 305);
  --noche-2:    oklch(21% 0.055 305);
  --noche-3:    oklch(27% 0.060 305);
  --velo:       oklch(97% 0.008 305);
  --velo-2:     oklch(93% 0.012 305);

  --oro:        oklch(78% 0.105  85);
  --oro-claro:  oklch(88% 0.075  85);
  --oro-hondo:  oklch(52% 0.090  85);
  --oro-tinta:  oklch(18% 0.040  85);

  --rosa:       oklch(80% 0.090 350);
  --rosa-hondo: oklch(55% 0.120 350);

  --tinta:      oklch(96% 0.008 305);
  --tinta-2:    oklch(80% 0.015 305);
  --tinta-osc:  oklch(24% 0.020 305);
  --tinta-osc2: oklch(42% 0.020 305);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ancho: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --radio: 12px;
}

/* --- fuentes autoalojadas -------------------------------------------------
   Su web carga CINCO familias desde tres orígenes. Aquí dos, servidas por
   nosotros: sin terceros y sin capa de consentimiento por una tipografía. */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("/assets/fuentes/fraunces.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("/assets/fuentes/inter.woff2") format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--noche); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--oro-claro); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--oro)}

.env{width:100%; max-width:var(--ancho); margin:0 auto; padding-inline:var(--gutter)}

/* salto al contenido: obligatorio para teclado y lectores de pantalla */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--oro); color:var(--oro-tinta); padding:12px 20px;
  border-radius:0 0 8px 0; font-weight:600;
}
.saltar:focus{left:0}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px; border-radius:3px}

/* ---------- cabecera ---------- */
.cab{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--noche) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--noche-3);
}
.cab-in{display:flex; align-items:center; gap:24px; min-height:68px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.logo-txt{display:flex; flex-direction:column; line-height:1.05}
.logo-txt b{
  font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-2);
}
.logo-txt i{font-family:var(--serif); font-style:normal; font-size:1.35rem; color:var(--tinta)}

.menu{display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.menu a{
  color:var(--tinta-2); text-decoration:none; font-size:.92rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tinta); border-bottom-color:var(--oro)}
.cab-cta{margin-left:auto; flex:0 0 auto}

.hamb{
  display:none; margin-left:auto; background:none; border:1px solid var(--noche-3);
  border-radius:8px; padding:9px 10px; cursor:pointer;
}
.hamb span{display:block; width:20px; height:2px; background:var(--tinta); margin:4px 0}
.menu-movil{border-top:1px solid var(--noche-3); background:var(--noche-2)}
.menu-movil ul{list-style:none; margin:0; padding:8px var(--gutter) 16px}
.menu-movil a{display:block; padding:12px 0; color:var(--tinta); text-decoration:none; font-size:1.02rem}
.menu-movil li+li a{border-top:1px solid var(--noche-3)}

/* La media query de la cabecera esta al FINAL del fichero, no aqui: `.btn` se
   declara mas abajo con la misma especificidad (0,1,0) y, por ir despues,
   ganaba a `.cab-cta{display:none}`. El boton seguia visible en movil aunque la
   hamburguesa tambien apareciera. */

/* ---------- hero de la portada ----------
   Su web tenia hero a sangre completa y al migrar tal cual se quedaba sin el:
   la promesa principal caia a parrafo suelto, sin imagen ni CTA sobre el
   pliegue. Ver el comentario de HeroHome en _gen.ps1. */
.hero{position:relative; isolation:isolate; min-height:clamp(440px,72vh,620px);
      display:flex; align-items:center; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          object-position:center 42%; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--noche) 62%, transparent) 0%,
    color-mix(in oklab, var(--noche) 44%, transparent) 45%,
    var(--noche) 100%)}
.hero-in{padding-block:64px}
.hero h1{max-width:17ch; margin:.15em 0 .55em; text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* ⚠️ El ojal del hero va en BLANCO, no en oro, y es la unica excepcion del
   sitio. Medido sobre los pixeles reales de la foto ya compuesta con el
   degradado: en oro claro da 3.53 y es texto pequeno, que exige 4.5 — suspende.
   En blanco da 5.09. El oro se queda en el resto del sitio, donde sobre fondo
   solido mide 9.71. */
.hero .ojal{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
            color:var(--tinta); margin:0; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-btns{display:flex; gap:14px; flex-wrap:wrap; margin:0}
/* El hero se anima con CSS puro (.rise), NUNCA con un observador de scroll:
   eso lo dejaria en opacity:0 hasta que cargue el JS. */
.r1{animation-delay:.09s}
.r2{animation-delay:.18s}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.15; margin:0 0 .4em}
h1{font-size:clamp(2rem,5.2vw,3.1rem); letter-spacing:-.015em; margin-top:.2em}
h2{font-size:clamp(1.5rem,3.4vw,2.05rem); margin-top:1.9em; color:var(--oro-claro)}
h3{font-size:1.28rem; margin-top:1.5em}
h4{font-size:1.08rem; margin-top:1.3em; font-family:var(--sans); font-weight:600}
p{margin:0 0 1.05em; color:var(--tinta-2); max-width:68ch}
strong{color:var(--tinta); font-weight:600}

.lista{margin:0 0 1.3em; padding-left:1.1em; max-width:68ch}
.lista li{color:var(--tinta-2); margin-bottom:.5em}
.lista li::marker{color:var(--oro)}
/* Firma de un testimonio. Sus 61 <cite> se estaban perdiendo: 43 de ellos,
   incluidos los 9 de cada pagina de ciudad — que son las que reciben anuncios y
   donde la prueba social mas hace falta. */
.firma{margin:-.5em 0 1.6em; color:var(--oro); font-size:.9rem}
.firma cite{font-style:normal; font-weight:600; letter-spacing:.01em}
.firma cite::before{content:"\2014\00a0"; color:var(--tinta-2); font-weight:400}

blockquote{
  margin:1.6em 0; padding:2px 0 2px 22px; border-left:3px solid var(--oro);
  font-family:var(--serif); font-size:1.15rem; color:var(--tinta);
}

/* ⚠️ padding-BLOCK, no la abreviatura `padding`. Con `padding:44px 0 72px` se
   reinicia tambien el horizontal y anula el `padding-inline` de `.env` — misma
   especificidad y declarado despues, asi que gana. En movil el texto quedaba
   pegado a los dos bordes. Medido con getComputedStyle: paddingLeft = 0px. */
.pagina{padding-block:44px 72px}

/* ---------- imagenes ----------
   width/height vienen del atributo del origen, no estimados: una dimension
   inventada desplaza el layout igual que ninguna, solo que en otra direccion.
   El aspect-ratio los usa para reservar el hueco antes de que cargue. */
.fig{margin:2.2rem 0; max-width:820px}
.fig img{
  width:100%; height:auto; border-radius:var(--radio);
  background:var(--noche-2);
}
.fig figcaption{font-size:.85rem; color:var(--tinta-2); margin-top:10px}

/* ---------- botones ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:14px 28px; border-radius:9px; text-decoration:none; border:1px solid transparent;
  transition:transform .18s ease, opacity .18s ease; will-change:transform;
}
.btn:hover{transform:translate3d(0,-2px,0)}
.btn-1{background:var(--oro); color:var(--oro-tinta)}
.btn-1:hover{color:var(--oro-tinta); opacity:.92}
.btn-2{background:transparent; color:var(--oro); border-color:var(--oro)}
.btn-2:hover{color:var(--oro-claro); border-color:var(--oro-claro)}

/* ---------- FAQ: <details> nativo, sin JavaScript ---------- */
.faq{margin-top:3rem}
.faq details{
  background:var(--noche-2); border:1px solid var(--noche-3);
  border-radius:var(--radio); padding:16px 20px; margin-bottom:10px;
}
.faq summary{
  cursor:pointer; font-weight:600; color:var(--tinta); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--oro); font-weight:400; font-size:1.3rem; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 2px}
.faq details .lista{margin-top:12px}

/* ---------- indice del blog ----------
   Generado, no migrado: el suyo listaba las 11 entradas SIN enlazar a ninguna
   porque los <a> del bucle de Elementor se perdian al extraer. */
.posts{list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:22px;
       grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post{margin:0}
.post-a{display:flex; flex-direction:column; height:100%; text-decoration:none;
        background:var(--noche-2); border:1px solid var(--noche-3);
        border-radius:var(--radio); overflow:hidden;
        transition:transform .2s ease, border-color .2s ease}
.post-a:hover{transform:translate3d(0,-3px,0); border-color:var(--oro-hondo)}
.post-a img{width:100%; aspect-ratio:3/2; object-fit:cover}
.post-txt{padding:18px 20px 22px}
.post-txt time{font-size:.74rem; letter-spacing:.09em; color:var(--oro); text-transform:uppercase}
.post-txt h2{font-size:1.14rem; margin:.4em 0 .45em; color:var(--tinta); line-height:1.28}
.post-txt p{font-size:.9rem; margin:0; color:var(--tinta-2)}
@media (prefers-reduced-motion: reduce){ .post-a:hover{transform:none} }

/* ---------- formulario ----------
   Su web no tiene NINGUNO en 33 paginas: el unico <form> del sitio es el de
   acceso de WooCommerce. Todo colgaba de que el visitante abriera WhatsApp. */
.entradilla{font-size:1.12rem; color:var(--tinta); max-width:60ch}
.contacto-cols{display:grid; gap:44px; grid-template-columns:1fr 1.35fr; margin-top:2.4rem; align-items:start}
@media (max-width:820px){ .contacto-cols{grid-template-columns:1fr; gap:32px} }

.form{
  background:var(--noche-2); border:1px solid var(--noche-3);
  border-radius:16px; padding:26px; max-width:none;
}
.campo{margin-bottom:18px}
.fila2{display:grid; gap:18px; grid-template-columns:1fr 1fr}
@media (max-width:560px){ .fila2{grid-template-columns:1fr} }
.campo label{display:block; font-size:.88rem; font-weight:600; color:var(--tinta); margin-bottom:7px}
.req{color:var(--rosa)}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form select,.form textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--tinta);
  background:var(--noche); border:1px solid var(--noche-3);
  border-radius:9px; padding:12px 14px;
}
.form textarea{resize:vertical; min-height:110px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  border-color:var(--oro); outline:2px solid var(--oro); outline-offset:1px;
}
.form ::placeholder{color:var(--tinta-2); opacity:.7}
.consent label{display:flex; gap:11px; align-items:flex-start; font-weight:400;
               font-size:.88rem; color:var(--tinta-2); line-height:1.5}
.consent input{margin-top:3px; width:17px; height:17px; accent-color:var(--oro); flex:0 0 auto}
.form-nota{font-size:.83rem; color:var(--tinta-2); margin:14px 0 0}
/* Trampa anti-spam: fuera de pantalla, pero NO con display:none — algunos bots
   detectan eso. Y aria-hidden para que ningun lector de pantalla la anuncie. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- cierre ---------- */
.cierre{
  margin-top:3.4rem; padding:36px; border-radius:16px;
  background:linear-gradient(160deg, var(--noche-2), var(--noche-3));
  border:1px solid var(--noche-3);
}
.cierre h2{margin-top:0}
.cierre-btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.2em}

/* ---------- botón flotante de WhatsApp ---------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--oro); color:var(--oro-tinta);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.fab:hover{transform:translate3d(0,-3px,0); color:var(--oro-tinta)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--noche-3); margin-top:5rem; background:var(--noche-2)}
.pie-in{display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); padding-block:48px}
.pie-h{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em;
       text-transform:uppercase; color:var(--oro); margin:0 0 14px}
/* Objetivo tactil. Medido a 375 px REALES con el panel del navegador -- no con
   Chrome headless, que clampa el ancho a ~500 px y por eso nunca lo vio: los 15
   enlaces del pie median 18 px de alto, y WCAG 2.2 AA (2.5.8) exige 24 minimo.
   El padding sube el area pulsable a 34 px y el margen entre lineas baja en la
   misma cantidad, asi que el pie ocupa lo mismo que antes. */
.pie-lista{list-style:none; margin:0; padding:0}
.pie-lista li{margin-bottom:1px}
.pie-lista a{color:var(--tinta-2); text-decoration:none; font-size:.93rem;
             display:inline-block; padding:8px 0; line-height:1.25}
.pie-lista a:hover{color:var(--tinta)}
.pie-txt{font-size:.9rem; margin-top:14px}
.pie-redes{display:flex; gap:4px; margin-top:10px; flex-wrap:wrap}
.pie-redes a{color:var(--tinta-2); font-size:.86rem; text-decoration:none;
             display:inline-block; padding:9px 10px 9px 0}
.pie-redes a:hover{color:var(--oro)}
.pie-fin{border-top:1px solid var(--noche-3); padding-block:20px}
.pie-fin p{margin:0; font-size:.83rem; color:var(--tinta-2)}

/* ---------- animación de entrada ----------
   `.rise` es CSS puro y no depende de ningún JavaScript. */
.rise{animation:rise .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes rise{from{opacity:0; transform:translate3d(0,14px,0)} to{opacity:1; transform:none}}

/* ===========================================================================
   MEDIA QUERIES AL FINAL — a proposito.
   Van aqui para que ganen a cualquier regla de la misma especificidad que se
   declare antes. Ya paso una vez: `.cab-cta{display:none}` dentro de la seccion
   de cabecera perdia contra `.btn{display:inline-block}`, declarado mas abajo.
   ======================================================================== */
@media (max-width:900px){
  .menu,.cab-cta{display:none}
  .hamb{display:block}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;      /* <-- sin esto, fill-mode:both deja el hero invisible */
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .btn:hover,.fab:hover{transform:none}
}

/* ---------- entradas relacionadas ----------
   Su web tenia este widget y al migrar se perdia. Son los enlaces internos que
   conectan las 11 entradas entre si: sin ellos, cada una es un callejon. */
.relacionadas{margin-top:4rem; padding-top:2.4rem; border-top:1px solid var(--noche-3)}
.relacionadas h2{margin-top:0}
.relacionadas .posts{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ---------- testimonios ----------
   Transcritos de conversaciones reales de WhatsApp. Las capturas NO se publican:
   llevan telefono, foto de perfil y hora de ultima conexion, y nada de eso hace
   falta. Dos clientas dieron permiso explicito por escrito con una condicion —
   "borra foto y numero" — y la condicion se cumple al pie de la letra. */
.testimonios{margin-top:4rem; padding-top:2.6rem; border-top:1px solid var(--noche-3)}
.testimonios h2{margin-top:0}
.testi-intro{font-size:.92rem; color:var(--tinta-2); max-width:58ch}
.testi-grid{display:grid; gap:20px; margin-top:2rem;
            grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.testi{
  margin:0; background:var(--noche-2); border:1px solid var(--noche-3);
  border-radius:var(--radio); padding:24px 26px 20px; position:relative;
}
/* La comilla es decorativa: aria-hidden por CSS no existe, asi que va en ::before
   con content vacio para lectores de pantalla. */
.testi::before{
  content:"\201C"; position:absolute; top:2px; left:18px;
  font-family:var(--serif); font-size:3.4rem; line-height:1; color:var(--oro);
  opacity:.28; pointer-events:none;
}
.testi blockquote{
  margin:0; padding:0; border:0; font-family:var(--sans); font-style:normal;
  font-size:.98rem; line-height:1.6; color:var(--tinta-2);
}
.testi figcaption{margin-top:16px; padding-top:14px; border-top:1px solid var(--noche-3)}
.testi cite{font-style:normal; font-weight:600; font-size:.88rem; color:var(--oro)}

/* CTA que Elementor dejaba como parrafo suelto. 41 bloques en 12 paginas: en la
   portada se leia "QUIERO EMPEZAR" cuatro veces como texto perdido. No se
   borraron —eran sus llamadas a la accion, todas a WhatsApp— sino que se les
   devolvio su forma de boton. */
.cta-inline{margin:2rem 0; text-align:center}
.cta-inline .btn{display:inline-block}