/* Tanis Lovee — estilo del sitio. Tokens: spec/02 §2 · Escala: §3 · Espaciado y radios: spec/08 §3 y §7. 🚨 --lila, --salvia, --durazno y --madera NUNCA son color de texto. */

/* Fuentes servidas desde el propio sitio (antes, Google Fonts bloqueaba el render ~850 ms). Variables: un archivo cubre todos los pesos. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(/publico/fuentes/cormorant-garamond.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(/publico/fuentes/cormorant-garamond-italica.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(/publico/fuentes/karla.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme: light;

  /* Base — el 90% de la página */
  --crema:#F7F1E8;
  --crema-honda:#EFE4D6;
  --tinta:#2A2622;
  --tinta-suave:#6B6157;

  /* Marca — el lila de su puerta */
  --lila:#C3A8DC;
  --lila-hondo:#6A4B8F;

  /* El mural */
  --selva:#2E4A3A;
  --hoja:#476A4D;
  --salvia:#93AD7E;
  --durazno:#E9B896;
  --ambar-hondo:#985229;

  /* Apoyo */
  --madera:#C08E5C;

  /* Tipografía */
  --display:'Cormorant Garamond', Georgia, serif;
  --texto:'Karla', system-ui, -apple-system, sans-serif;

  /* Espaciado */
  --e1:10px; --e2:20px; --e3:30px; --e4:50px; --e5:70px; --e6:100px; --e7:120px;

  /* Radios: el radio comunica qué tan tocable es algo */
  --r-tarjeta:30px; --r-pildora:999px; --r-campo:6px;

  --ancho:1120px;
}

/* --- Reset mínimo  */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0 }

ul,ol{ padding:0; list-style:none }

img,svg{ display:block; max-width:100% }

button,input,select,textarea{ font:inherit; color:inherit }

/* --- Base  */

body{
  background:var(--crema);
  color:var(--tinta);
  font:400 1.125rem/1.7 var(--texto);   /* 18px por el público, no por gusto */
  overflow-x:hidden;
}
@media (min-width:1024px){ body{ font-size:1.1875rem } }   /* 19px */

h1{ font:500 clamp(2.5rem,7vw,4.75rem)/1.03 var(--display); letter-spacing:.02em }
h2{ font:500 clamp(2rem,4.5vw,3rem)/1.15 var(--display) }
h3{ font:600 clamp(1.375rem,2.2vw,1.75rem)/1.3 var(--display) }

/* Cormorant solo ≥28px y peso ≥500: debajo se adelgaza y el público mayor la pierde */
h1,h2{ text-wrap:balance }

p{ max-width:62ch }

a{ color:var(--lila-hondo); text-underline-offset:.2em }

a:hover{ color:var(--tinta) }

strong,b{ font-weight:700 }

:focus-visible{ outline:3px solid var(--lila-hondo); outline-offset:3px; border-radius:2px }

.salta{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinta); color:var(--crema); padding:var(--e2) var(--e3);
}
.salta:focus{ left:var(--e2); top:var(--e2) }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* --- Layout  */

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--e2) }
@media (min-width:720px){ .contenedor{ padding-inline:var(--e4) } }

.seccion{ padding-block:var(--e5) }
@media (min-width:1024px){ .seccion{ padding-block:var(--e6) } }

.seccion--ancha{ padding-block:var(--e6) }
@media (min-width:1024px){ .seccion--ancha{ padding-block:var(--e7) } }

/* La de más carga se gana el aire */
@media (min-width:1024px){ .seccion--ceremonias{ padding-block:150px } }

/* Fondos de sección */
.fondo-crema-honda{ background:var(--crema-honda) }
.fondo-selva{ background:var(--selva); color:var(--crema) }
.fondo-tinta{ background:var(--tinta); color:var(--crema) }
.fondo-lila{ background:var(--lila) }

.fondo-selva a,.fondo-tinta a{ color:var(--crema) }

.pila{ display:flex; flex-direction:column; gap:var(--e3) }
.pila--ancha{ gap:var(--e4) }
@media (min-width:1024px){ .pila--ancha{ gap:var(--e5) } }

.fila{ display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center }

.rejilla{ display:grid; gap:var(--e3) }
.rejilla--2{ grid-template-columns:1fr }
.rejilla--3{ grid-template-columns:1fr }
.rejilla--4{ grid-template-columns:repeat(2,1fr) }
@media (min-width:720px){
  .rejilla--2{ grid-template-columns:repeat(2,1fr) }
  .rejilla--3{ grid-template-columns:repeat(3,1fr) }
  .rejilla--4{ grid-template-columns:repeat(4,1fr) }
}

.centrado{ text-align:center }
.centrado p{ margin-inline:auto }

/* --- Piezas de interfaz  */

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e1);
  min-height:48px; padding:var(--e2) var(--e4);
  background:var(--lila-hondo); color:var(--crema);
  border:0; border-radius:var(--r-pildora);
  font:700 1.0625rem/1.2 var(--texto); text-decoration:none;
  cursor:pointer;
}
.boton:hover{ background:var(--tinta); color:var(--crema) }
.fondo-selva .boton,.fondo-tinta .boton{ background:var(--crema); color:var(--tinta) }
.fondo-selva .boton:hover,.fondo-tinta .boton:hover{ background:var(--durazno); color:var(--tinta) }

.boton--tenue{ background:transparent; color:var(--lila-hondo); border:2px solid var(--lila-hondo) }
.boton--tenue:hover{ background:var(--lila-hondo); color:var(--crema) }

.tarjeta{
  background:var(--crema);
  border-radius:var(--r-tarjeta);
  padding:var(--e3);
}

.filete{
  border:0; border-top:1px solid var(--madera); opacity:.5;
}

.etiqueta{
  display:inline-block;
  font:700 .8125rem/1.4 var(--texto); letter-spacing:.14em; text-transform:uppercase;
  color:var(--lila-hondo);
}

/* Pendiente visible: nunca se rellena con un dato inventado (spec/06, compuerta 7) */
.pendiente{
  display:inline-block; padding:2px var(--e1);
  border:1px dashed var(--ambar-hondo); border-radius:var(--r-campo);
  font:400 .875rem/1.5 var(--texto); color:var(--ambar-hondo);
}

/* --- Cabecera y pie  */

.cabecera{ padding-block:var(--e2) }
.cabecera__marca{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--tinta) }
.cabecera__nombre{
  display:block;
  font:400 1.375rem/1.1 var(--display); letter-spacing:.2em; text-transform:uppercase;
}
.cabecera__espiritual{
  display:block; margin-top:2px;
  font:400 .6875rem/1.4 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.cabecera__menu{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center }
/* 🚨 En móvil los 6 enlaces + el botón empujaban el <h1> a 750px de 844: lo primero que se veía era un menú, no la marca. <details> nativo: funciona sin JS. */
.menu-plegable>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:500;color:var(--tinta)}
.menu-plegable__lista{display:flex;flex-direction:column;padding-block:var(--e1)}
.cabecera__enlaces{display:none}
/* El menú completo solo cabe en una línea desde ~1100 px (marca 274 + menú ~650 en 1020 útiles); abajo, el desplegable. */
@media (min-width:1100px){.menu-plegable{display:none}.cabecera__enlaces{display:flex;gap:0 4px}.cabecera__enlaces a{font-size:1rem}.cabecera__menu .boton{min-height:44px;padding:var(--e1) var(--e3);font-size:1rem}}
/* 🚨 `:not(.boton)` NO es decorativo: sin él esta regla le gana a `.boton` por especificidad y el botón «Escríbeme» queda en tinta sobre lila (2.15). Lo encontró Lighthouse. */
.cabecera__menu a:not(.boton){
  display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--e1);
  color:var(--tinta); text-decoration:none;
}
.cabecera__menu a:hover{ color:var(--lila-hondo); text-decoration:underline }

.pie{ font-size:1rem }
.pie a{ display:inline-flex; align-items:center; min-height:44px; color:var(--crema) }
.pie__nombre{ font:400 1.125rem/1.2 var(--display); letter-spacing:.2em; text-transform:uppercase }
.pie__linea{ color:var(--crema); opacity:.85 }

/* --- Movimiento  */
/* El estado inicial lo pone el JS, nunca el CSS (spec/08 §4). */

.revela{ transition:transform .7s ease-out, opacity .7s ease-out }
.revela.visible{ transform:none; opacity:1 }
.revela--sube{ transform:translateY(12px); opacity:.001 }
.revela--aparece{ opacity:.001 }

/* El momento firma: el hero se abre desde el centro, una sola vez */
.abre{ transition:clip-path 900ms ease-out }
.abre-cerrado{ clip-path:inset(0 50% 0 50%) }
.abre-abierto{ clip-path:inset(0) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .revela--sube,.revela--aparece{ transform:none; opacity:1 }
  .abre-cerrado{ clip-path:none }
  html{ scroll-behavior:auto }
}

/* --- La landing --- */

/* --- 2 · Hero  */

.hero{ padding-block:var(--e5) var(--e6) }
.hero__rejilla{ display:grid; gap:var(--e4); align-items:center }
@media (min-width:1024px){
  .hero__rejilla{ grid-template-columns:1fr 1fr; gap:var(--e6) }
}

.hero__nombre{ font-size:clamp(2.75rem,9vw,5rem) }
.hero__espiritual{
  margin-top:calc(var(--e1) * -1);
  font:400 .75rem/1.4 var(--texto); letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.hero__gancho{ font:500 clamp(1.75rem,3vw,2.25rem)/1.25 var(--display); max-width:34ch }
.hero__gancho-fuerte{ font-weight:700; font-size:1.25rem; color:var(--lila-hondo) }

/* El arco de medio punto y su eco (spec/08 §1). Solo dos veces en el sitio. */
.hero-foto{ position:relative; max-width:34rem; margin-inline:auto }
.hero-foto::before{
  content:""; position:absolute; inset:0;
  transform:translate(28px,-18px);
  background:var(--lila);
  border-radius:999px 999px 0 0;
  filter:drop-shadow(0 6px 48px rgb(42 38 34 / .10));
}
.hero-foto__imagen{
  position:relative; width:100%; height:auto;
  border-radius:999px 999px 0 0;
}
@media (max-width:720px){ .hero-foto::before{ transform:translate(14px,-10px) } }

/* --- 4 · Avisos  */

.avisos{
  background:linear-gradient(253deg, var(--crema) 0%, var(--durazno) 140%);
  padding-block:var(--e3);
}
.avisos__tira{
  display:flex; gap:var(--e3);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block:var(--e1);
}
.aviso{ flex:0 0 min(100%, 30rem); scroll-snap-align:start }
.aviso__titulo{ font:700 1.25rem/1.3 var(--texto) }/* 🚨 Medido contra el píxel: --tinta-suave daba 4.07 aquí y NO pasa AA. Va --tinta, que da ~10. */
.aviso__linea{ font-size:.9375rem; color:var(--tinta) }
.avisos .boton{ margin-top:var(--e2) }

/* Las flechas de la franja: el avance es del dedo o de aquí, nunca solo. */
.avisos__flechas{ display:flex; gap:var(--e2); justify-content:flex-end; margin-top:var(--e2) }
.avisos__flechas button{
  display:grid; place-items:center;
  width:44px; height:44px;
  background:transparent; color:var(--tinta);
  border:1px solid var(--tinta); border-radius:var(--r-pildora);
  cursor:pointer; font-size:1.125rem; line-height:1;
}
.avisos__flechas button:hover{ background:var(--crema-honda) }

.boton--chico{ min-height:44px; padding:var(--e1) var(--e3); font-size:1rem }

/* --- 5 · Ceremonias  */

.ornamento{ width:100%; max-width:22rem; margin-inline:auto; height:auto }

/* Los rituales de la landing viven en recorrido.css (spec/10). */

.pasos{ counter-reset:paso; display:grid; gap:var(--e2) }
.pasos li{ display:grid; grid-template-columns:auto 1fr; gap:var(--e2); align-items:start }
.pasos li::before{
  counter-increment:paso; content:counter(paso);
  display:grid; place-items:center;
  width:2rem; height:2rem; border-radius:var(--r-pildora);
  border:1px solid var(--salvia); font-size:1rem;
}

/* En fondo oscuro, etiquetas y pendientes van en crema. ⛔ Nada de --lila como texto: spec/02 §2 lo marca «jamás texto». */
.fondo-selva .pendiente,.fondo-tinta .pendiente{ color:var(--crema); border-color:var(--crema) }
.fondo-selva .etiqueta,.fondo-tinta .etiqueta{ color:var(--crema) }

/* --- Listas de datos (días, precios, series)  */

.datos{ display:grid; gap:var(--e3) }
@media (min-width:720px){ .datos--precios{ grid-template-columns:repeat(3,1fr) } }
.dato dt{ font-weight:700 }
.dato dd{ color:var(--tinta-suave) }
.fondo-crema-honda .dato dd{ color:var(--tinta) }
.datos--precios .dato dd strong{ color:var(--tinta) }
.fondo-selva .dato dd{ color:var(--crema) }

.lista{ display:grid; gap:var(--e1) }
.lista li{ padding-left:var(--e3); position:relative }
.lista li::before{ content:"·"; position:absolute; left:var(--e1); font-weight:700; color:var(--lila-hondo) }

.foto-ancha{ width:100%; height:auto; border-radius:var(--r-tarjeta) }

/* --- 8 · Galería de obra  */

.galeria{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e2) }
@media (min-width:720px){ .galeria{ grid-template-columns:repeat(4,1fr); gap:var(--e3) } }
/* Las piezas son circulares: se muestran completas, sin recorte ni filtro */
.galeria__pieza{ width:100%; height:auto; border-radius:var(--r-tarjeta) }

/* --- 9 · Talleres: el borde orgánico (spec/08 §2)  */

.tarjeta-organica{
  background:var(--lila);
  border-radius:91% 61% 68% 84% / 73% 62% 89% 79%;
  padding:var(--e5) var(--e4);
}
@media (max-width:720px){
  .tarjeta-organica{ border-radius:var(--r-tarjeta); padding:var(--e3) }
}

/* --- 10 · El centro y yo  */

.centro__retrato{ position:relative; max-width:26rem; margin-inline:auto }
.centro__retrato::before{
  content:""; position:absolute; inset:0;
  transform:translate(-20px,-14px);
  background:var(--lila-hondo);
  border-radius:999px 999px 0 0;
  opacity:.55;
}
.centro__retrato-imagen{
  position:relative; width:100%; height:auto;
  border-radius:999px 999px 0 0;
}

.hitos{ display:grid; gap:var(--e3); text-align:center }
@media (min-width:720px){ .hitos{ grid-template-columns:repeat(4,1fr) } }
.hitos__dato{ display:block; font:500 clamp(1.75rem,2.5vw,2.25rem)/1.15 var(--display); color:var(--crema) }

.fotos-centro__foto{ width:100%; height:auto; border-radius:var(--r-tarjeta) }

/* --- 11 · Lo que viene  */

.entrada-tarjeta{
  background:var(--crema); padding:var(--e3);
  border-radius:91% 61% 68% 84% / 73% 62% 89% 79%;
  border:1px solid var(--crema-honda);
}
@media (max-width:720px){ .entrada-tarjeta{ border-radius:var(--r-tarjeta) } }
.entrada-tarjeta__fecha{ font-size:.9375rem; color:var(--tinta-suave) }
.entrada-tarjeta__foto{
  width:100%; height:auto; border-radius:var(--r-campo); margin-bottom:var(--e2);
}
.entrada-tarjeta__titulo{ font:700 1.25rem/1.3 var(--texto); margin-block:var(--e1) }
.entrada-tarjeta__titulo a{ display:inline-block; padding-block:var(--e1) }

/* Los enlaces sueltos y los de la dirección: también son áreas tocables */
.enlace-suelto,.contacto__datos a{ display:inline-flex; align-items:center; min-height:44px }

/* --- Páginas de la agenda, la entrada, el aviso y el 404  */

.titulo-pagina{ font:500 clamp(2rem,5vw,3.25rem)/1.15 var(--display) }
.entrada__fecha{ font-size:.9375rem; color:var(--tinta-suave) }

/* El cuerpo que escribió Tania, ya convertido a HTML por app/texto.py */
.prosa{ display:grid; gap:var(--e3) }
.prosa h3{ margin-top:var(--e2) }
.prosa ul{ display:grid; gap:var(--e1); padding-left:var(--e3); list-style:disc }
.prosa p{ max-width:62ch }

/* --- 12 · Contacto  */

.contacto__rejilla{ display:grid; gap:var(--e4) }
@media (min-width:1024px){ .contacto__rejilla{ grid-template-columns:1.2fr .8fr; gap:var(--e5) } }

.campo{ display:grid; gap:var(--e1) }
.campo label{ font-weight:700 }
.campo input,.campo select,.campo textarea{
  width:100%; min-height:48px; padding:var(--e2);
  background:var(--crema); color:var(--tinta);
  border:1px solid var(--tinta-suave); border-radius:var(--r-campo);
}
.campo textarea{ min-height:8rem; resize:vertical }
.campo__ayuda{ font-size:.9375rem; color:var(--tinta-suave); font-weight:400 }
/* El marcador del navegador se queda en 4.45 sobre crema: por debajo de AA */
.campo ::placeholder{ color:var(--tinta-suave); opacity:1 }
.campo--casilla{ grid-template-columns:auto 1fr; align-items:start; gap:var(--e2) }
.campo--casilla{ min-height:44px }
/* 28px y no 24: es el control que BLOQUEA el envío y se toca con el pulgar. El <label> va asociado por `for`, así que toda la frase también activa. */
.campo--casilla input{ width:1.75rem; height:1.75rem; min-height:0; margin-top:.25rem }
.campo--casilla label{ font-weight:400 }
.contacto__datos address{ font-style:normal }
.contacto__formulario .boton{ justify-self:start }