/* Efecto de cristal líquido adaptado de liquid-glass-react (MIT, Copyright 2025 MAX ROVENSKY). Ver assets/liquid-glass/LICENSE-liquid-glass-react.txt */
/* Fuentes en WOFF2 con subconjunto latino (se generan con optimizar-assets.py desde identidad/assets/fonts, licencias OFL). */
@font-face { font-family: 'Abril Fatface'; src: url('../fonts/AbrilFatface-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Italiana'; src: url('../fonts/Italiana-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Variable.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Variable.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

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

:root {
  /* Colores de cuerpo sobre claro, del Manual de marca (página clara) */
  --tinta: #4A4336;
  --tinta-fuerte: #0C0A08;
  --crema-papel: #EAE5CB;
  --vino-claro: #7A3A3F;          /* extremo claro del degradado vino del botón sobre crema */
  --area-tactil: 44px;            /* mínimo de objetivo táctil (WCAG 2.5.8) */
  --alto-cabecera: 58px;
  --encuadre-persona: 42% 0%;    /* encuadre de la foto de Natalia dentro de su banda */          /* margen superior (14) + alto real medido de la cabecera en cristal (58) */
  --cristal-borde: rgba(234, 229, 203, 0.18);
  --cristal-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --cristal-sombra: 0 34px 70px -34px rgba(0, 0, 0, 0.75);
  --radio: 24px;
  --ancho: 1040px;
}

html { background: var(--ds-negro); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ds-crema);
  font-family: var(--ds-font-cuerpo);
  font-size: var(--ds-text-body);
  line-height: 1.6;
  background:
    radial-gradient(70rem 40rem at 88% -8%, rgba(187, 154, 83, 0.2), transparent 60%),
    radial-gradient(60rem 36rem at -10% 110%, rgba(91, 42, 46, 0.55), transparent 62%),
    radial-gradient(40rem 24rem at 50% 45%, rgba(234, 174, 182, 0.1), transparent 70%),
    var(--ds-negro);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* — Fondo atmosférico (oscuro): texturas de marca + reflejos de luz en movimiento — */
.atmosfera { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; filter: saturate(1.35) brightness(1.08); }
.atmosfera .capa { position: absolute; background-size: cover; background-position: center; filter: blur(28px) saturate(0.8); }
.atmosfera .rosa-vino {
  width: 70vw; height: 70vw; max-width: 980px; max-height: 980px;
  right: -22vw; top: -18vw;
  background-image: url('../assets/fondos/fondo-abstracto-rosa-vino.webp');
  opacity: 0.32; border-radius: 50%;
}
.atmosfera .crema-oro {
  width: 60vw; height: 60vw; max-width: 860px; max-height: 860px;
  left: -20vw; bottom: -20vw;
  background-image: url('../assets/fondos/fondo-abstracto-crema-oro.webp');
  opacity: 0.2; border-radius: 50%;
}
.atmosfera .forma {
  width: 900px; height: 900px; max-width: 110vw;
  left: 45%; top: 10%;
  background: url('../assets/forma-liquida.svg') center / contain no-repeat;
  opacity: 0.6;
}
.atmosfera .reflejo {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(60px);
  will-change: transform;
  animation: deriva 16s ease-in-out infinite alternate;
}
.atmosfera .reflejo.oro {
  width: 55vw; height: 55vw; max-width: 760px; max-height: 760px;
  left: -8vw; top: 6vh;
  background: radial-gradient(circle, rgba(228, 192, 120, 0.85), rgba(187, 154, 83, 0) 65%);
}
.atmosfera .reflejo.rosa {
  width: 48vw; height: 48vw; max-width: 680px; max-height: 680px;
  right: -6vw; top: 30vh;
  background: radial-gradient(circle, rgba(240, 178, 190, 0.8), rgba(234, 174, 182, 0) 65%);
  animation-duration: 20s; animation-delay: -8s;
}
.atmosfera .reflejo.crema {
  width: 36vw; height: 36vw; max-width: 520px; max-height: 520px;
  left: 35vw; bottom: -6vh;
  background: radial-gradient(circle, rgba(234, 229, 203, 0.32), rgba(234, 229, 203, 0) 65%);
  animation-duration: 14s; animation-delay: -4s;
}
.atmosfera .reflejo.vino {
  width: 60vw; height: 60vw; max-width: 860px; max-height: 860px;
  left: -18vw; bottom: -22vh;
  background: radial-gradient(circle, rgba(91, 42, 46, 0.85), rgba(91, 42, 46, 0) 66%);
  animation-duration: 18s; animation-delay: -12s;
}
.atmosfera::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--ds-negro) 100%);
}
@keyframes deriva {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vw, -4vh, 0) scale(1.12); }
  100% { transform: translate3d(-4vw, 5vh, 0) scale(0.95); }
}

/* — Banda clara (cuerpo de la página): crema cálido, reflejos rosa y crema que se mueven — */
.banda-clara {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--crema-papel);
  color: var(--tinta);
  margin-top: 48px;
  padding: 24px 0 40px;
}
.banda-clara::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(40rem 26rem at 18% 12%, rgba(234, 174, 182, 0.6), transparent 70%),
    radial-gradient(36rem 24rem at 92% 70%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(44rem 30rem at 60% 110%, rgba(234, 174, 182, 0.5), transparent 70%);
  filter: blur(30px);
  animation: deriva-banda 16s ease-in-out infinite alternate;
}
/* Halo que gira lento: un anillo de luz rosa y vino sobre la banda clara */
.banda-clara::after {
  content: "";
  position: absolute;
  width: 130%;
  aspect-ratio: 1;
  left: -15%;
  top: -35%;
  z-index: -2;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(240, 178, 190, 0.55), rgba(91, 42, 46, 0.12), rgba(255, 255, 255, 0.7), rgba(240, 178, 190, 0.55));
  filter: blur(70px);
  mix-blend-mode: multiply;
  animation: halo 40s linear infinite;
}
@keyframes halo {
  to { transform: rotate(360deg); }
}
@keyframes deriva-banda {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4vw, -3vh, 0) scale(1.08); }
}

/* — Cristal líquido: capa .liquid-warp refracta y desenfoca lo que hay detrás — */
.liquid { position: relative; isolation: isolate; }
.liquid-warp {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
}
.glass-svg .liquid-warp { filter: url(#liquid-glass); }
.liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Cristal oscuro (portada, contacto) */
.cristal {
  background: rgba(234, 229, 203, 0.08);
  border: 1px solid var(--cristal-borde);
  border-radius: var(--radio);
  box-shadow: var(--cristal-brillo), var(--cristal-sombra);
}
/* Cristal claro (banda crema) */
.cristal-claro {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 34px 60px -36px rgba(91, 42, 46, 0.5);
}

/* — Aviso de vista previa — */
.aviso-vista {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-hueso);
  text-align: center;
  padding: 10px 16px;
  background: rgba(12, 10, 8, 0.6);
  border-bottom: 1px solid var(--cristal-borde);
}

/* — Encabezado en cristal, pegado arriba — */
header.sitio {
  position: sticky;
  top: 12px;
  z-index: 10;
  max-width: var(--ancho);
  margin: 14px auto 0;
  padding: 6px 14px 6px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-radius: 999px;
  background: rgba(29, 26, 21, 0.4);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-brillo), var(--cristal-sombra);
}
header.sitio img { height: 44px; width: auto; display: block; }
header.sitio nav { display: flex; gap: 6px; flex-wrap: wrap; }
header.sitio nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-tactil);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-hueso);
  text-decoration: none;
  padding: 0 14px;
  border-radius: 999px;
  transition: background .25s, color .25s;
}
header.sitio nav a:hover, header.sitio nav a:focus-visible { color: var(--ds-crema); background: rgba(234, 229, 203, 0.1); }

/* — Foco de teclado visible: contorno de 2 px con desplazamiento, oro sobre oscuro y vino sobre crema — */
:focus-visible { outline: 2px solid var(--ds-oro-hover); outline-offset: 3px; }
.banda-clara :focus-visible { outline-color: var(--ds-vino); }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline-offset: 1px; }

/* — Enlace para saltar al contenido: invisible hasta que recibe el foco — */
.saltar {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--ds-crema);
  color: var(--ds-negro);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
}
.saltar:focus-visible { top: 12px; }
main[tabindex="-1"]:focus:not(:focus-visible) { outline: none; } /* destino del enlace de salto: sin aro al recibir el foco por programa */

/* — Botón del menú (solo en pantallas angostas, y solo si el script lo activó) — */
.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--area-tactil);
  min-height: var(--area-tactil);
  padding: 0 16px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-crema);
  background: rgba(234, 229, 203, 0.08);
  border: 1px solid var(--cristal-borde);
  border-radius: 999px;
  cursor: pointer;
}

/* — Portada (oscura) — */
.portada {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 80px 24px 64px;
  display: grid;
  gap: 28px;
}
/* Portada de Inicio: titular a la izquierda y, a la derecha, un motivo de marca (anillos de oro y reflejo rosa-vino) que
   deja el hero resuelto sin foto. Es decorativo: cuando haya imagen retocada de Natalia ocupa este lugar. */
h1 {
  font-family: var(--ds-font-titulares);
  font-weight: 400;
  font-size: clamp(var(--ds-text-h1), 5.6vw, var(--ds-text-display));
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--ds-crema);
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.lead {
  font-size: var(--ds-text-h3);
  color: var(--ds-crema);
  max-width: 44ch;
  margin: 0;
}
.tira {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  letter-spacing: 0.04em;
  color: var(--ds-oro-hover);
  margin: 0;
  padding: 10px 18px;
  max-width: max-content;
  border-radius: 999px;
  background: rgba(187, 154, 83, 0.12);
  border: 1px solid rgba(187, 154, 83, 0.4);
  box-shadow: var(--cristal-brillo);
}
.micro {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-hueso);
  margin: -8px 0 0;
}
/* En la banda clara el hueso no se lee (1.44:1): el texto menor va en tinta */
.banda-clara .micro { color: var(--tinta); }
.acciones { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* — Botón principal: oro sobre oscuro — */
a.boton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--ds-oro-hover) 0%, var(--ds-oro) 100%);
  color: var(--ds-negro);
  font-family: var(--ds-font-ui);
  font-weight: 600;
  font-size: var(--ds-text-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 40px -18px rgba(187, 154, 83, 0.7);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
a.boton:hover, a.boton:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 46px -18px rgba(187,154,83,.85); }
a.boton::after { content: "→"; }
/* Brillo que recorre el botón */
a.boton { position: relative; overflow: hidden; }
a.boton::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
/* Destello en movimiento sobre el cristal */
.liquid::after { background-size: 230% 230%; animation: sheen 11s ease-in-out infinite alternate; }
@keyframes sheen {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
/* En la banda clara el oro no va sobre crema: botón en vino */
.banda-clara a.boton {
  background: linear-gradient(180deg, var(--vino-claro) 0%, var(--ds-vino) 100%);
  color: var(--crema-papel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 40px -18px rgba(91, 42, 46, 0.7);
}
a.enlace-tenue {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-tactil);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  color: var(--ds-hueso);
  text-decoration: none;
  position: relative;
}
/* El subrayado va en un pseudo-elemento: así el área clicable de 44 px no estira la línea. */
a.enlace-tenue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.85em);
  height: 1px;
  background: var(--cristal-borde);
}
a.enlace-tenue:hover, a.enlace-tenue:focus-visible { color: var(--ds-oro-hover); }
a.enlace-tenue:hover::after, a.enlace-tenue:focus-visible::after { background: var(--ds-oro); }
/* En la banda clara el enlace va en vino (el hueso no se lee sobre crema) */
.banda-clara a.enlace-tenue, a.enlace-vino { color: var(--ds-vino); }
.banda-clara a.enlace-tenue::after, a.enlace-vino::after { background: var(--ds-vino); }
/* Enlace dentro de una frase: sigue en línea, pero con área clicable ampliada (invisible) a 44 px */
a.enlace-tenue.en-linea { display: inline; min-height: 0; }
a.enlace-tenue.en-linea::before { content: ""; position: absolute; inset: -14px -6px; }
a.enlace-tenue.en-linea::after { bottom: -2px; }

/* — Secciones (banda clara) — */
.banda-clara section.bloque { color: var(--tinta); }
section.bloque {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 56px 24px;
}
section.bloque > .etiqueta { margin: 0; }
section.bloque > .etiqueta::before { width: 28px; }
/* Dónde y Costo llevan la imagen a la izquierda, así que el texto se alinea a la
   derecha: el bloque se pega al borde derecho y la línea del epígrafe pasa a ir
   delante del texto. */
/* — Páginas de servicio ————————————————————————————————————————————
   Lista de tres puntos numerada en vino (legible sobre crema) y cierre con la
   misma llamada a la acción que el hero. Cada página tiene su variante: el
   documento respira más estrecho, el proceso más ancho. */
/* El velo del hero es lo �nico que separa el texto de la foto. Con la alineaci�n
   propia de cada p�gina tiene que venir del lado donde est� el texto: si no, el
   titular cae sobre una zona clara de la imagen y pierde contraste. */
/* El hero pinta imagen y velo en un ::before posicionado. Sin esto, ese ::before
   queda POR ENCIMA del texto: la máscara lo desvanecía a la izquierda y ahí se
   leía, pero al mover el texto al centro o a la derecha quedaba tapado y borroso.
   La portada tiene que ir una capa arriba, siempre. */
.cabecera-inicio .portada, .cabecera-servicio .portada { position: relative; z-index: 1; }
/* Lema de posicionamiento en la portada: una sola l�nea, en oro, que dice a qu� se dedica DS antes de pedir nada. */
.portada .lema { margin: 14px 0 22px; max-width: 46ch; font-family: var(--ds-font-body); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--ds-oro-hover); }
/* Motion graphics: la pieza va centrada, con su pie de foto al lado del marco que
   la contiene. Cuadrado para que quepa igual en la banda clara y en una columna. */
.motion { display: grid; place-items: center; padding: 32px 24px; }
.motion.motion-en-banda { background: transparent; }
/* Piezas 16:9 (2 nov 2026): la de arriba es una banda a todo el ancho que continúa la portada oscura; la del cierre
   es una lámina con borde dentro de la banda clara. En móvil se recortan en cuadrado sobre la mitad derecha, que es
   la zona gráfica de las tres piezas: el texto de la izquierda ya está en la página. */
.motion { padding: 0; }
figure.motion-pieza { margin: 0; width: 100%; max-width: 1600px; }
figure.motion-pieza video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: var(--ds-negro); }
.motion.motion-en-banda { padding: 24px 24px 8px; }
.motion-en-banda figure.motion-pieza { max-width: var(--ancho); }
.motion-en-banda figure.motion-pieza video { border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(12, 10, 8, .55); }
@media (max-width: 700px) {
  figure.motion-pieza video { aspect-ratio: 1 / 1; object-position: 90% 50%; }
}
@media (prefers-reduced-motion: reduce) { figure.motion-pieza video { display: none; } }
ol.servicio-puntos { counter-reset: punto; list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
ol.servicio-puntos li { counter-increment: punto; display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px; align-items: baseline; max-width: 58ch; font-size: 1.0625rem; line-height: 1.55; }
ol.servicio-puntos li::before { content: counter(punto, decimal-leading-zero); font-family: var(--ds-font-eyebrow); font-size: var(--ds-text-caption); letter-spacing: .18em; color: var(--ds-vino); }
.servicio-aval, .aval { display: block; margin: 6px 0 18px; font-family: var(--ds-font-eyebrow); font-size: var(--ds-text-caption); letter-spacing: .08em; color: var(--ds-oro-hover); }
.servicio-nota { margin: -6px 0 20px; max-width: 58ch; font-size: .95em; color: var(--ds-vino); }
.servicio-cierre .acciones { margin-top: 10px; }
.servicio-documento .bloque > div { max-width: 44rem; }
.servicio-discreto .bloque > div { max-width: 40rem; }
.servicio-proceso .bloque > div { max-width: 54rem; }
#donde, #cuanto-cuesta { text-align: right; }
#donde > .etiqueta, #cuanto-cuesta > .etiqueta { justify-content: flex-end; }
/* Alineado a la derecha, la l�nea del ep�grafe va despu�s del texto para no dejar un hueco a la izquierda. */
#donde > .etiqueta::before, #cuanto-cuesta > .etiqueta::before { order: 1; }
#donde h2, #cuanto-cuesta h2 { margin-left: auto; }
#donde p, #cuanto-cuesta p { margin-left: auto; }
.etiqueta {
  font-family: var(--ds-font-eyebrow);
  font-size: var(--ds-text-eyebrow);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-oro);
  display: flex;
  align-items: center;
  gap: 14px;
}
.etiqueta::before { content: ""; width: 40px; height: 1px; background: currentColor; }
section.bloque h2 {
  font-family: var(--ds-font-caps);
  font-weight: 400;
  font-size: var(--ds-text-h2);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-oro);
  margin: 0 0 18px;
  line-height: 1.1;
}
section.bloque p { margin: 0 0 18px; max-width: 62ch; }

/* Tipos en la banda clara: vino para títulos y acentos, tinta para el cuerpo */
.banda-clara .etiqueta, .banda-clara section.bloque h2 { color: var(--ds-vino); }
.banda-clara section.bloque h2 { color: var(--ds-vino); }
.banda-clara .etiqueta::before { background: var(--ds-vino); }
.banda-clara .dato-grande { color: var(--tinta-fuerte); }

/* — Quién está detrás — */
.persona-lead { margin: 0 0 22px; max-width: 22ch; font-family: var(--ds-font-cuerpo); font-weight: 600; font-size: var(--ds-text-h2); line-height: 1.18; color: var(--tinta-fuerte); }
.persona-lead span { display: block; margin-top: 10px; color: var(--ds-vino); }
.persona-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.persona-lineas li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 16px; align-items: start; }
.persona-lineas .ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ds-vino); background: color-mix(in srgb, var(--ds-vino) 10%, transparent); }
.persona-lineas p { margin: 0; padding-top: 0.45rem; max-width: 40ch; font-size: var(--ds-text-body); color: var(--tinta-fuerte); }

/* — Servicios — */
/* Cada servicio es una tarjeta con una imagen que lo ilustra, un degradado oscuro abajo para leer el texto y el enlace en toda la tarjeta.
   Abril Fatface solo para h1 y títulos de sección: los títulos de tarjeta van en Cormorant 600. */
ol.servicios { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); gap: 14px; }
ol.servicios li {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 15rem; padding: 22px 24px;
  border-radius: var(--radio);
  color: var(--crema-papel);
  background: var(--ds-negro);
  box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--ds-negro) 65%, transparent);
}
ol.servicios li:first-child { grid-row: span 2; }
ol.servicios li::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--escena) var(--encuadre) / cover no-repeat; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
ol.servicios li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--ds-negro) 66%, transparent) 0%, transparent 34%), linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--ds-negro) 66%, transparent) 46%, color-mix(in srgb, var(--ds-negro) 93%, transparent) 100%); }
ol.servicios li:hover::before, ol.servicios li:focus-within::before { transform: scale(1.06); }
ol.servicios li.s-reclutamiento { --escena: url('../assets/escenas/revision.webp'); --encuadre: 50% 38%; }
ol.servicios li.s-capacitacion { --escena: url('../assets/escenas/taller.webp'); --encuadre: 55% 45%; }
ol.servicios li.s-estudios { --escena: url('../assets/escenas/hogar.webp'); --encuadre: 55% 32%; }
ol.servicios li.s-certificados { --escena: url('../assets/escenas/consulta.webp'); --encuadre: 55% 30%; }
ol.servicios li.s-team { --escena: url('../assets/escenas/equipo.webp'); --encuadre: 50% 45%; }
ol.servicios .num { text-shadow: 0 1px 12px color-mix(in srgb, var(--ds-negro) 85%, transparent); position: absolute; top: 18px; left: 24px; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.14em; color: var(--ds-oro-hover); }
ol.servicios .flecha { position: absolute; top: 12px; right: 16px; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--crema-papel) 45%, transparent); font-family: var(--ds-font-ui); font-size: var(--ds-text-small); color: var(--crema-papel); transition: background-color .25s, color .25s, transform .25s; }
ol.servicios li:hover .flecha, ol.servicios li:focus-within .flecha { background: var(--ds-oro-hover); border-color: var(--ds-oro-hover); color: var(--ds-negro); transform: translateX(3px); }
/* El enlace cubre toda la tarjeta, así que se puede pulsar en cualquier parte. */
ol.servicios a.nombre {
  font-family: var(--ds-font-cuerpo);
  font-weight: 600;
  font-size: var(--ds-text-h3);
  line-height: 1.15;
  color: var(--crema-papel);
  text-decoration: none;
  padding-block: 8px;
  margin-block: -8px;
}
ol.servicios a.nombre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
ol.servicios a.nombre:focus-visible { outline: none; }
ol.servicios li:has(a.nombre:focus-visible) { outline: 2px solid var(--ds-oro-hover); outline-offset: 3px; }
ol.servicios .detalle { margin: 0; max-width: 44ch; font-size: var(--ds-text-body); line-height: 1.4; color: var(--crema-papel); opacity: .92; }
.servicios-nota { margin: 6px 0 0; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.06em; color: var(--tinta); }
@media (max-width: 900px) {
  ol.servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.servicios li:first-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px) {
  ol.servicios { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  ol.servicios li { min-height: 13rem; }
}

/* — Dónde — */
/* Línea destacada de una sección: Cormorant 600, no la display (ver nota en ol.servicios a.nombre). */
.dato-grande {
  font-family: var(--ds-font-cuerpo);
  font-weight: 600;
  font-size: var(--ds-text-h3);
  line-height: 1.3;
  margin: 0;
}

/* — Pagos — */
.pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.pagos > div { padding: 24px 26px; }
.pagos .porc { font-family: var(--ds-font-titulares); font-size: var(--ds-text-h1); color: var(--ds-vino); line-height: 1; margin: 0 0 10px; }
.pagos .txt { margin: 0; color: var(--tinta); font-size: var(--ds-text-small); font-family: var(--ds-font-ui); }

/* — Formulario — */
.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  padding: 26px;
  margin: 8px 0 24px;
  max-width: 720px;
}
.formulario label {
  display: grid;
  gap: 6px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: 0.04em;
  color: var(--tinta);
}
.formulario label:has(textarea), .formulario .pendiente { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  color: var(--tinta-fuerte);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(91, 42, 46, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 2px rgba(91, 42, 46, 0.1);
}
.formulario textarea { min-height: 96px; resize: vertical; }
.formulario input:disabled, .formulario select:disabled, .formulario textarea:disabled { opacity: 0.7; }

/* — Casilla — */
.casilla {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  color: var(--tinta);
  margin: 8px 0 0;
  max-width: 62ch;
  border-radius: 20px;
}
/* Toda la fila es el objetivo táctil (la etiqueta envuelve la casilla); la casilla se agranda a 24 px */
.casilla { min-height: var(--area-tactil); cursor: pointer; }
.casilla input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ds-vino); }
.casilla input:disabled { cursor: not-allowed; }

/* — Pendientes — */
.pendiente {
  display: inline-block;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: 0.04em;
  color: var(--ds-vino);
  background: rgba(91, 42, 46, 0.08);
  border: 1px dashed var(--ds-vino);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 4px;
}
/* En la portada oscura el pendiente va en oro */
.portada .pendiente, .contacto .pendiente, footer.sitio .pendiente {
  color: var(--ds-oro-hover);
  background: rgba(187, 154, 83, 0.1);
  border-color: var(--ds-oro);
}

/* — Contacto (cierre oscuro) — */
.contacto { position: relative; }
/* El fondo del contacto y el pie ocupan todo el ancho; el contenido sigue alineado con el resto de las secciones. */
section.bloque.contacto { max-width: none; padding-inline: max(24px, calc((100% - var(--ancho)) / 2 + 24px)); }
footer.sitio { max-width: none; padding-inline: max(24px, calc((100% - var(--ancho)) / 2 + 24px)); }
.contacto-lista p { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.contacto-lista { padding: 0; }

/* — Pie — */
footer.sitio {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 36px 24px 56px;
  border-top: 1px solid var(--cristal-borde);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-caption);
  letter-spacing: 0.06em;
  color: var(--ds-hueso);
}

/* — Móvil — */
@media (max-width: 760px) {
  section.bloque { grid-template-columns: 1fr; gap: 16px; padding: 32px 20px; }
  .portada { padding: 56px 20px 48px; }
  .pagos { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  header.sitio { border-radius: 24px; top: 8px; }
  header.sitio img { height: 36px; }
  header.sitio nav { gap: 2px; }
  header.sitio nav a { padding: 0 12px; }
  /* Menú compacto: botón + panel (solo si el script lo activó; sin script se ven todos los enlaces) */
  header.sitio.con-menu .menu-boton { display: inline-flex; }
  header.sitio.con-menu nav { display: none; width: 100%; flex-direction: column; flex-wrap: nowrap; padding-bottom: 6px; }
  header.sitio.con-menu[data-abierto="true"] nav { display: flex; }
  .portada.con-motivo { grid-template-columns: 1fr; }
  .portada.con-motivo > .motivo { display: none; }
  .atmosfera .forma { left: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .atmosfera .reflejo, .banda-clara::before, .banda-clara::after, a.boton::before, .liquid::after { animation: none; }
}

ol.servicios li { transition: filter .35s ease, opacity .35s ease; }
ol.servicios:hover li:not(:hover) { filter: blur(1.5px); opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    ol.servicios li, ol.servicios:hover li:not(:hover) { transition: none; filter: none; opacity: 1; }
    ol.servicios li::before, ol.servicios .flecha { transition: none; }
}
/* Escenas como fondo: la imagen va detrás del texto con un velo de la paleta para sostener el contraste. */
/* La imagen del hero llega hasta el borde superior: la sección se sube el alto de la
   cabecera y ese mismo alto se devuelve como relleno, así el texto no se mueve y el
   fondo (::before) empieza en y=0, por detrás del cristal. `flow-root` evita que el
   margen negativo se propague al contenedor principal y arrastre el resto de la página.
   OJO: no escribir la etiqueta main entre ángulos en un comentario —generar.mjs la usa
   como marcador para extraer el contenido y rompería la página entera. */
main { display: flow-root; }
.cabecera-inicio, .cabecera-servicio { margin-top: calc(-1 * var(--alto-cabecera)); padding-top: var(--alto-cabecera); }
.cabecera-inicio, .cabecera-servicio { position: relative; isolation: isolate; overflow: hidden; }
.fondo-escena { background-color: #0C0A08; background-repeat: no-repeat; background-size: cover; }
/* Escenas propias de cada página de servicio: distintas de las de las tarjetas de Inicio para que ninguna imagen se repita. */
/* El encuadre de estas cinco va con la composición de las portadas de servicio, más abajo. */
.fondo-h-reclutamiento { --escena: url('../assets/escenas/hero-reclutamiento.webp'); }
.fondo-h-capacitacion { --escena: url('../assets/escenas/hero-capacitacion.webp'); }
.fondo-h-estudios { --escena: url('../assets/escenas/hero-estudios.webp'); }
.fondo-h-equipos { --escena: url('../assets/escenas/hero-equipos.webp'); }
.fondo-examen { --escena: url('../assets/escenas/examen.webp'); }
/* Imagen y encuadre de cada escena: el escritorio las usa de fondo con velo; en móvil van como franja superior. */
.fondo-entrevista { --escena: url('../assets/escenas/entrevista.webp'); --encuadre: 100% 50%; }
.fondo-revision { --escena: url('../assets/escenas/revision.webp'); --encuadre: 70% 30%; }
.fondo-taller { --escena: url('../assets/escenas/taller.webp'); --encuadre: 60% 40%; }
.fondo-hogar { --escena: url('../assets/escenas/hogar.webp'); --encuadre: 60% 35%; }
.fondo-consulta { --escena: url('../assets/escenas/consulta.webp'); --encuadre: 55% 30%; }
.fondo-equipo { --escena: url('../assets/escenas/equipo.webp'); --encuadre: 50% 50%; }
.fondo-escena-clara { background-color: #EAE5CB; background-image: linear-gradient(90deg, rgba(234,229,203,.98) 0%, rgba(234,229,203,.95) 50%, rgba(234,229,203,.9) 100%); background-position: center; background-repeat: no-repeat; background-size: cover; }
/* Cabeceras: la escena ocupa la parte derecha y se funde con el fondo oscuro; el texto queda en la columna izquierda y no pasa sobre las
   personas. Los titulares de cabecera son un poco más chicos para que nunca invadan la imagen. */
.cabecera-inicio.fondo-escena, .cabecera-servicio.fondo-escena { background-image: none; }
.cabecera-inicio::before, .cabecera-servicio::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-negro) 74%, transparent) 0%, color-mix(in srgb, var(--ds-negro) 34%, transparent) 46%, transparent 100%), var(--escena) var(--encuadre) / cover no-repeat;
  filter: brightness(.94) saturate(.96);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.52) 36%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.94) 58%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.52) 36%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.94) 58%, #000 68%);
}
.cabecera-inicio > .portada, .cabecera-servicio > .portada { text-shadow: 0 2px 24px color-mix(in srgb, var(--ds-negro) 72%, transparent); }
.cabecera-servicio.escena-vertical::before { width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.86) 34%, #000 44%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.86) 34%, #000 44%); }
.cabecera-inicio > .portada > .acciones, .cabecera-servicio > .portada > .acciones { max-width: min(35rem, 100%); }
.cabecera-inicio > .portada > *, .cabecera-servicio > .portada > * { max-width: min(27rem, 100%); }
.cabecera-inicio h1, .cabecera-servicio h1 { font-size: clamp(var(--ds-text-h1), 4vw, 4rem); }
/* Portadas de servicio: una sola composición para las cinco. El texto vive en la columna izquierda con el mismo eje,
   escala y alto; la escena ocupa solo los dos tercios derechos y se funde hacia el texto. Cada escena trae su
   --encuadre para que las personas queden en la parte opaca, nunca debajo del titular. */
.cabecera-servicio > .portada { min-height: min(84vh, 46rem); align-content: center; justify-items: start; text-align: left; }
.cabecera-servicio::before, .cabecera-servicio.escena-vertical::before {
  left: auto; width: 64%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-negro) 50%, transparent) 0%, transparent 42%), linear-gradient(0deg, color-mix(in srgb, var(--ds-negro) 42%, transparent) 0%, transparent 28%), var(--escena) var(--encuadre) / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 51%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 51%, #000 58%);
}
.fondo-h-reclutamiento { --encuadre: 72% 40%; --encuadre-movil: 62% 35%; }
.fondo-h-capacitacion { --encuadre: 88% 40%; --encuadre-movil: 74% 35%; }
.fondo-h-estudios { --encuadre: 82% 35%; --encuadre-movil: 70% 30%; }
.fondo-h-equipos { --encuadre: 76% 40%; --encuadre-movil: 62% 40%; }
.fondo-examen { --encuadre: 50% 16%; --encuadre-movil: 50% 14%; }
.fondo-entrevista { --encuadre-movil: 78% 40%; }
/* Agenda y Contacto: escenas propias, generadas con IA y rotuladas como ilustrativas (no son el equipo real). */
.fondo-h-agenda { --escena: url('../assets/escenas/hero-agenda.webp'); --encuadre: 100% 40%; --encuadre-movil: 100% 40%; }
.fondo-h-contacto { --escena: url('../assets/escenas/hero-contacto.webp'); --encuadre: 100% 45%; --encuadre-movil: 100% 40%; }
.pagina-interior > .portada { min-height: min(74vh, 40rem); }
.escena-pie { position: absolute; right: max(16px, 2vw); bottom: 14px; z-index: 1; margin: 0; font-family: var(--ds-font-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ds-crema) 70%, transparent); }
/* Contacto: misma gramática que las portadas. Canales en cristal a la izquierda; la escena ocupa el lado derecho
   por encima de la atmósfera dorada y se funde hacia el texto. */
section.bloque.contacto { min-height: min(86vh, 48rem); align-content: center; }
.contacto::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ds-negro) 45%, transparent) 0%, transparent 30%), var(--escena) var(--encuadre) / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 51%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 51%, #000 58%);
}
.contacto-lista { max-width: min(33rem, 100%); }
.contacto-canales { list-style: none; margin: 6px 0 22px; padding: 0; display: grid; gap: 10px; }
.contacto-canales li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 18px; }
.contacto-canales .ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ds-oro); background: rgba(187, 154, 83, 0.12); }
.contacto-canales li > div { min-width: 0; overflow-wrap: anywhere; }
.contacto-canales .canal { margin: 0 0 2px; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-oro-hover); }
.contacto-canales li p:not(.canal) { margin: 0; }
.contacto-aviso { font-size: var(--ds-text-small); }
@media (max-width: 900px) {
  .contacto { --alto-escena-movil: clamp(17rem, 76vw, 24rem); }
  .contacto::after {
    inset: 0 0 auto 0; width: auto; height: var(--alto-escena-movil);
    background: linear-gradient(0deg, color-mix(in srgb, var(--ds-negro) 38%, transparent) 0%, transparent 36%), var(--escena) var(--encuadre-movil, var(--encuadre)) / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.11) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.11) 90%, transparent 100%);
  }
  section.bloque.contacto { min-height: 0; align-content: start; padding-top: calc(var(--alto-escena-movil) - 4.5rem); }
  /* En vertical, pegada al borde derecho: así no cruza ninguna cara en la banda de la escena. */
  .escena-pie { top: calc(var(--alto-cabecera) + 26px); bottom: auto; right: 4px; writing-mode: vertical-rl; transform: rotate(180deg); }
  .contacto .escena-pie { top: 18px; }
}
@media (max-width: 900px) {
  /* Pantallas angostas: la escena es una banda alta arriba y se disuelve en el fondo con un degradado largo y
     escalonado (sin línea de corte). El titular arranca en la cola del degradado, siempre alineado a la izquierda. */
  .cabecera-inicio::before, .cabecera-servicio::before, .cabecera-servicio.escena-vertical::before {
    inset: 0 0 auto 0; left: 0; width: auto; height: var(--alto-escena-movil);
    background: linear-gradient(0deg, color-mix(in srgb, var(--ds-negro) 38%, transparent) 0%, transparent 36%), var(--escena) var(--encuadre-movil, var(--encuadre)) / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.11) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.11) 90%, transparent 100%);
  }
  .cabecera-inicio, .cabecera-servicio { --alto-escena-movil: clamp(19rem, 84vw, 27rem); }
  .cabecera-inicio > .portada, .cabecera-servicio > .portada { padding-top: calc(var(--alto-escena-movil) - 5.5rem); min-height: 0; align-content: start; }
  .cabecera-inicio > .portada > *, .cabecera-servicio > .portada > * { max-width: none; }
  .cabecera-inicio h1, .cabecera-servicio h1 { font-size: clamp(var(--ds-text-h1), 8.4vw, 3.25rem); }
}
/* Atmósfera viva: luz que se desplaza lento sobre la cabecera, fondo del contacto con paralaje suave y versión vertical para el móvil. Solo transform y opacidad. */
.cabecera-inicio::after { content: ""; position: absolute; inset: -20% -15%; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(234,229,203,.09) 50%, transparent 62%); animation: deriva-luz 16s ease-in-out infinite alternate; will-change: transform; }
.cabecera-inicio > .portada { position: relative; z-index: 1; }
@keyframes deriva-luz { from { transform: translate3d(-22%, 0, 0); } to { transform: translate3d(22%, 0, 0); } }
.contacto { position: relative; isolation: isolate; overflow: hidden; }
.contacto::before { content: ""; position: absolute; inset: -10% 0; z-index: -1; background: linear-gradient(180deg, rgba(12,10,8,.78) 0%, rgba(12,10,8,.92) 100%), url('../assets/atmosfera/fondo-oscuro-16x9.webp') center / cover no-repeat, #0C0A08; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
@media (max-width: 700px) {
  .fondo-escena-clara { background-image: linear-gradient(180deg, rgba(234,229,203,.97) 0%, rgba(234,229,203,.94) 100%), url('../assets/atmosfera/fondo-claro-9x16.webp'); background-position: center, center; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera-inicio::after { animation: none; display: none; }
  .contacto::before { transform: none; }
}
/* Composición: secciones cortas en dos columnas, con la escena a la derecha. */
/* Velo de la banda clara más ligero: la escena se lee como textura sin quitar contraste al texto. */
/* Contacto: el fondo cubre la sección completa; el paralaje se acota para que nunca deje espacio vacío. */
.contacto::before { inset: -22% 0; }
.cabecera-inicio + .banda-clara { margin-top: 0; }
/* Las p�ginas de servicio y las interiores arrancan con .cabecera-servicio: sin este margen cero queda una franja oscura de 48 px entre la portada y la banda. */
.cabecera-servicio + .banda-clara { margin-top: 0; }
.fondo-escena-clara { background-color: #EAE5CB; background-image: linear-gradient(90deg, rgba(234,229,203,.9) 0%, rgba(234,229,203,.94) 60%, rgba(234,229,203,.97) 100%), url('../assets/atmosfera/fondo-claro-16x9.webp'); background-position: center, 85% 20%, center; background-size: cover; background-repeat: no-repeat; }
.fondo-escena-clara { background-image: linear-gradient(90deg, rgba(234,229,203,.94) 0%, rgba(234,229,203,.96) 60%, rgba(234,229,203,.98) 100%), url('../assets/atmosfera/fondo-claro-16x9.webp'); background-position: center, 85% 20%, center; }
/* Imagen dentro del espacio vacío de cada sección: absoluta, no suma altura. El borde es diagonal y se revela con un fundido. */
section.bloque.con-imagen { position: relative; overflow: hidden; }
section.bloque.con-imagen > *:not(.marca-imagen):not(.marca-mapa) { position: relative; z-index: 1; max-width: 46%; }
figure.marca-imagen { position: absolute; top: 14px; right: 0; bottom: 14px; width: 52%; margin: 0; z-index: 0; clip-path: polygon(56% 0, 100% 0, 100% 100%, 40% 100%); transition: clip-path 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.4s ease; }
figure.marca-imagen img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .94; filter: saturate(.82) sepia(.06); -webkit-mask-image: linear-gradient(107deg, transparent 18%, rgba(0,0,0,.14) 25%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.78) 46%, #000 60%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.75) 13%, #000 22%, #000 78%, rgba(0,0,0,.75) 87%, rgba(0,0,0,.35) 94%, transparent 100%), linear-gradient(90deg, #000 0%, #000 70%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.36) 90%, transparent 100%); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(107deg, transparent 18%, rgba(0,0,0,.14) 25%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.78) 46%, #000 60%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.75) 13%, #000 22%, #000 78%, rgba(0,0,0,.75) 87%, rgba(0,0,0,.35) 94%, transparent 100%), linear-gradient(90deg, #000 0%, #000 70%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.36) 90%, transparent 100%); mask-composite: intersect; }
figure.marca-imagen figcaption { position: absolute; right: 12px; bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5B2A2E; background: rgba(234,229,203,.88); padding: 3px 8px; }
html.js-motion figure.marca-imagen:not(.visible) { clip-path: polygon(40% 0, 100% 0, 100% 100%, 20% 100%); opacity: .35; }
html.js-motion figure.marca-imagen.visible { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
@media (max-width: 900px) {
  /* Pantallas angostas: la imagen es una franja a ancho completo arriba de la sección, con degradado hacia el fondo. */
  section.bloque.con-imagen > *:not(.marca-imagen):not(.marca-mapa) { max-width: none; }
  section.bloque.con-imagen figure.marca-imagen,
  html.js-motion section.bloque.con-imagen figure.marca-imagen:not(.visible),
  html.js-motion section.bloque.con-imagen figure.marca-imagen.visible {
    position: relative; inset: auto; width: auto; height: clamp(9.5rem, 44vw, 20rem); margin: -32px -20px 2px; clip-path: none; transform: none;
  }
  html.js-motion section.bloque.con-imagen figure.marca-imagen:not(.visible) { opacity: .4; }
  figure.marca-imagen img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { figure.marca-imagen { transition: none; } html.js-motion figure.marca-imagen:not(.visible) { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
/* Encuadre por imagen: el sujeto queda en el centro visible de cada lámina. */
#donde figure.marca-imagen img { object-position: 62% 30%; }
#garantia figure.marca-imagen img { object-position: 50% 62%; }
#cuanto-cuesta figure.marca-imagen img { object-position: 66% 52%; }
@media (min-width: 901px) {
  /* La foto es el fondo de la sección y va más allá de su caja: se sale las
     canaletas laterales hasta el ancho de la ventana, para que no quede ninguna
     franja de crema alrededor. La sección deja de recortar para que el fondo pueda
     extenderse; el fundido de la izquierda mantiene el texto legible sobre crema. */
  #persona { overflow: visible; }
  #persona figure.marca-imagen {
    top: 0; bottom: 0;
    /* -24px compensa el ancho de la barra de desplazamiento: 100vw la incluye y deja una franja a la izquierda. */
    left: calc(50% - 50vw - 24px); right: calc(50% - 50vw - 24px);
    width: auto;
  }
  /* Sin corte diagonal: se funde hacia la izquierda y los bordes de arriba y abajo quedan casi limpios. */
  #persona figure.marca-imagen,
  html.js-motion #persona figure.marca-imagen:not(.visible),
  html.js-motion #persona figure.marca-imagen.visible { clip-path: none; transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2,.7,.2,1); }
  html.js-motion #persona figure.marca-imagen:not(.visible) { opacity: .3; transform: translateX(22px); }
  html.js-motion #persona figure.marca-imagen.visible { opacity: 1; transform: none; }
  #persona figure.marca-imagen img {
    object-position: var(--encuadre-persona, 62% 34%);
    /* Con el fondo a todo el ancho de la ventana la foto encaja justo a lo ancho,
       así que object-position no puede desplazarla. El encuadre se logra
       escalando y moviendo: scale la agranda y translateX la corre a la derecha,
       recortando por la izquierda. */

    mix-blend-mode: normal; opacity: 1; filter: saturate(.92);
    /* Arriba, opaco desde el primer píxel: el degradado anterior apagaba el 4 %
       superior y se leía como una franja de crema. Abajo se funde para cerrar la banda. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 16%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.9) 62%, #000 74%, #000 100%), linear-gradient(180deg, #000 0%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 16%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.9) 62%, #000 74%, #000 100%), linear-gradient(180deg, #000 0%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (max-width: 900px) {
  #persona figure.marca-imagen img {
    object-position: var(--encuadre-persona, 62% 34%);
    mix-blend-mode: normal; opacity: 1; filter: saturate(.92);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 8%, rgba(0,0,0,.62) 18%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 8%, rgba(0,0,0,.62) 18%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js-motion #persona figure.marca-imagen:not(.visible) { opacity: 1; transform: none; }
}

/* — Agendador (calendario, horarios y datos) —
   Interfaz tipo Calendly: panel de información a la izquierda, calendario del mes al centro y horarios del día a la derecha.
   Tres pasos que cambia data-paso: fecha, datos y listo. Tipografía: Cormorant 600 en títulos y Montserrat en la interfaz. */
.agenda {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  max-width: 62rem;
  margin: 8px 0 24px;
  overflow: hidden;
}
.agenda button { font-family: var(--ds-font-ui); cursor: pointer; }
.agenda :focus-visible { outline: 2px solid var(--ds-vino); outline-offset: 2px; }
.agenda-info {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 26px;
  border-right: 1px solid color-mix(in srgb, var(--ds-vino) 18%, transparent);
}
.agenda-anfitrion { margin: 0; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); }
.agenda-titulo { margin: 0; font-family: var(--ds-font-cuerpo); font-weight: 600; font-size: var(--ds-text-h3); line-height: 1.15; color: var(--tinta-fuerte); }
.agenda-meta { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); color: var(--tinta); }
.agenda-meta li { display: flex; align-items: flex-start; gap: 10px; }
.agenda-meta svg { flex: none; margin-top: 2px; color: var(--ds-vino); }
.agenda-texto { margin: 0; max-width: none; color: var(--tinta); }
.agenda-resumen { margin: 0; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); font-weight: 600; color: var(--ds-vino); }
.agenda-resumen:empty { display: none; }
.agenda-volver {
  display: none;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: var(--area-tactil);
  padding: 0 14px 0 8px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--ds-vino) 35%, transparent);
  border-radius: 999px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  color: var(--ds-vino);
}
.agenda-volver:hover { background: color-mix(in srgb, var(--ds-vino) 8%, transparent); }
.agenda[data-paso="datos"] .agenda-volver { display: inline-flex; }

.agenda-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; padding: 28px 26px; align-content: start; }
.agenda[data-paso="fecha"] .agenda-cuerpo { grid-template-columns: minmax(0, 24rem); justify-content: center; }
.agenda[data-hay-dia="true"][data-paso="fecha"] .agenda-cuerpo { grid-template-columns: minmax(0, 24rem) minmax(11rem, 13.5rem); }
.agenda h3 { margin: 0 0 14px; font-family: var(--ds-font-cuerpo); font-weight: 600; font-size: var(--ds-text-h3); line-height: 1.15; color: var(--tinta-fuerte); }
.agenda-fecha, .agenda-horas, .agenda-datos, .agenda-listo { min-width: 0; }
.agenda[data-paso="datos"] .agenda-fecha, .agenda[data-paso="datos"] .agenda-horas,
.agenda[data-paso="listo"] .agenda-fecha, .agenda[data-paso="listo"] .agenda-horas, .agenda[data-paso="listo"] .agenda-info .agenda-resumen { display: none; }
.agenda[data-paso="fecha"] .agenda-datos, .agenda[data-paso="fecha"] .agenda-listo,
.agenda[data-paso="datos"] .agenda-listo, .agenda[data-paso="listo"] .agenda-datos { display: none; }
.agenda[data-hay-dia="false"] .agenda-horas { display: none; }

.agenda-cal-cabeza { display: grid; grid-template-columns: var(--area-tactil) 1fr var(--area-tactil); align-items: center; margin-bottom: 6px; }
.agenda-mes { margin: 0; text-align: center; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-fuerte); }
.agenda-mes-atras, .agenda-mes-sig {
  display: grid; place-items: center;
  width: var(--area-tactil); height: var(--area-tactil);
  background: none; border: 0; border-radius: 50%;
  color: var(--ds-vino);
}
.agenda-mes-atras:hover:not(:disabled), .agenda-mes-sig:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-vino) 10%, transparent); }
.agenda-mes-atras:disabled { color: color-mix(in srgb, var(--tinta) 40%, transparent); cursor: default; }
.agenda-semana, .agenda-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agenda-semana span { text-align: center; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.08em; color: var(--tinta); padding: 6px 0; }
.dia {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  font-weight: 600;
  color: var(--ds-vino);
  background: color-mix(in srgb, var(--ds-vino) 9%, transparent);
  transition: background-color .2s, color .2s;
}
.dia:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-vino) 20%, transparent); }
.dia:disabled { background: transparent; font-weight: 400; color: color-mix(in srgb, var(--tinta) 55%, transparent); cursor: default; }
.dia.hoy::after { content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dia.elegido, .dia.elegido:hover { background: var(--ds-vino); color: var(--crema-papel); }
.agenda-zona { margin: 14px 0 0; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.04em; color: var(--tinta); }

.agenda-horas-titulo { margin: 0 0 12px; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); font-weight: 600; line-height: 1.35; color: var(--tinta-fuerte); }
.agenda-estado { margin: 0 0 8px; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); color: var(--tinta); }
.agenda-estado:empty { display: none; }
.agenda-lista { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; max-height: 22.5rem; overflow-y: auto; }
.agenda-lista li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.agenda-lista li.elegida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hora, .confirmar {
  min-height: var(--area-tactil);
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hora { background: transparent; border: 1px solid color-mix(in srgb, var(--ds-vino) 55%, transparent); color: var(--ds-vino); text-align: center; }
.hora:hover { background: color-mix(in srgb, var(--ds-vino) 10%, transparent); border-color: var(--ds-vino); }
.agenda-lista li.elegida .hora { background: var(--tinta-fuerte); border-color: var(--tinta-fuerte); color: var(--crema-papel); }
.confirmar { background: var(--ds-vino); border: 1px solid var(--ds-vino); color: var(--crema-papel); }
.confirmar:hover { background: var(--vino-claro); border-color: var(--vino-claro); }

.agenda-datos { max-width: none; margin: 0; padding: 0; }
.agenda-datos h3 { grid-column: 1 / -1; margin-bottom: 4px; }
.agenda-error { grid-column: 1 / -1; margin: 0; max-width: none; min-height: 1.4em; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); color: var(--ds-vino); }
.agenda-enviar {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: var(--area-tactil);
  padding: 0 28px;
  background: var(--ds-vino);
  border: 0;
  border-radius: 999px;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-papel);
}
.agenda-enviar:hover:not(:disabled) { background: var(--vino-claro); }
.agenda-enviar:disabled { opacity: .6; cursor: default; }
.agenda .agenda-consiento { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); color: var(--tinta); }
.agenda-consiento input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 2px; accent-color: var(--ds-vino); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.agenda-listo-resumen { margin: 0 0 8px; max-width: none; font-family: var(--ds-font-ui); font-size: var(--ds-text-body); font-weight: 600; color: var(--ds-vino); }
.agenda-listo-texto { margin: 0 0 8px; }
.agenda-listo-texto:empty { display: none; }
.agenda-listo-demo[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .agenda[data-hay-dia="true"] .agenda-horas { animation: agenda-entra .28s ease-out; }
}
@keyframes agenda-entra { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* Pantallas angostas: una sola columna; el panel de información pasa arriba y los horarios debajo del calendario. */
@media (max-width: 820px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .agenda-info { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ds-vino) 18%, transparent); padding: 22px 20px 18px; gap: 8px; }
  .agenda-cuerpo, .agenda[data-hay-dia="true"][data-paso="fecha"] .agenda-cuerpo { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 20px 0; }
  .agenda-lista { max-height: none; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .agenda-lista li.elegida { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .agenda-datos { grid-template-columns: minmax(0, 1fr); }
  .agenda-cuerpo, .agenda[data-hay-dia="true"][data-paso="fecha"] .agenda-cuerpo { padding: 22px 14px; }
  .agenda-semana, .agenda-grid { gap: 2px; }
  .dia { aspect-ratio: auto; min-height: var(--area-tactil); }
}
/* — Mapa de «Dónde atendemos» —
   Mapa de México de puntos en vino sobre la banda crema: un barrido de luz lo recorre despacio, un arco con puntos viaja de Oaxaca
   (presencial) a Monterrey (en línea) y los dos marcadores laten. Solo transform y opacidad; se detiene con prefers-reduced-motion. */
figure.marca-mapa { position: absolute; top: 14px; right: 1%; bottom: 14px; width: 54%; margin: 0; z-index: 0; display: grid; align-content: center; justify-items: center; gap: 8px; transition: opacity 1.2s ease; }
html.js-motion figure.marca-mapa:not(.visible) { opacity: .25; }
.mapa { position: relative; width: 100%; max-width: 30rem; }
.mapa svg { display: block; width: 100%; height: auto; overflow: hidden; }
.mapa-silueta { fill: color-mix(in srgb, var(--ds-vino) 7%, transparent); stroke: color-mix(in srgb, var(--ds-vino) 30%, transparent); stroke-width: 1.2; stroke-linejoin: round; }
.mapa-puntos { fill: none; stroke: var(--ds-vino); stroke-width: 4.4; stroke-linecap: round; opacity: .36; }
.mapa-puntos-luz { opacity: 1; stroke-width: 5; }
.mapa-barrido { animation: mapa-barrido 8s ease-in-out infinite; }
.mapa-arco { fill: none; stroke: var(--ds-vino); stroke-width: 2; stroke-linecap: round; opacity: .4; }
.mapa-arco-viaja { stroke-width: 3.2; stroke-dasharray: 2 11; opacity: 1; animation: mapa-viaja 2.8s linear infinite; }
.mapa-marca-oaxaca { fill: var(--ds-vino); stroke: var(--crema-papel); stroke-width: 3; }
.mapa-marca-monterrey { fill: var(--crema-papel); stroke: var(--ds-vino); stroke-width: 3.2; }
.mapa-onda { fill: none; stroke: var(--ds-vino); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mapa-onda 3.4s ease-out infinite; }
.mapa-onda-b { animation-delay: 1.5s; }
.mapa-etiqueta { position: absolute; transform: translate(16px, -50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-family: var(--ds-font-ui); font-size: var(--ds-text-small); letter-spacing: 0.04em; color: var(--tinta-fuerte); background: color-mix(in srgb, var(--crema-papel) 92%, transparent); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ds-vino) 55%, transparent); }
.mapa-etiqueta-monterrey { transform: translate(calc(-100% - 16px), -50%); }
.mapa-etiqueta b { display: block; margin-bottom: 1px; font-weight: 600; font-size: var(--ds-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-vino); }
.mapa-leyenda { margin: 0; font-family: var(--ds-font-ui); font-size: var(--ds-text-caption); letter-spacing: 0.06em; color: var(--tinta); }
@keyframes mapa-barrido { from { transform: translateX(0); } to { transform: translateX(140%); } }
@keyframes mapa-viaja { to { stroke-dashoffset: -56; } }
@keyframes mapa-onda { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }
@media (max-width: 900px) {
  figure.marca-mapa, html.js-motion figure.marca-mapa:not(.visible) { position: relative; inset: auto; width: auto; margin: 4px 0 6px; }
  /* Las etiquetas pasan al lado izquierdo del marcador para que no se salgan de la pantalla. */
  .mapa-etiqueta { transform: translate(calc(-100% - 14px), -50%); }
  html.js-motion figure.marca-mapa:not(.visible) { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-barrido, .mapa-arco-viaja, .mapa-onda { animation: none; }
  .mapa-onda { display: none; }
  .mapa-puntos-luz { display: none; }
  figure.marca-mapa { transition: none; }
  html.js-motion figure.marca-mapa:not(.visible) { opacity: 1; }
}
/* — Composición alternada (escritorio) —
   «Dónde» y «Cuánto cuesta» llevan la imagen a la izquierda y el texto a la derecha; «La persona» y «Garantía» al revés. Así la página no se
   inclina hacia un solo lado. En pantallas angostas todas las imágenes son franjas arriba y no cambia nada. */
@media (min-width: 901px) {
  section.bloque.con-imagen.invertida > *:not(.marca-imagen):not(.marca-mapa) { margin-left: auto; }
  section.bloque.con-imagen.invertida figure.marca-imagen { right: auto; left: 0; clip-path: polygon(44% 0, 0 0, 0 100%, 60% 100%); }
  html.js-motion section.bloque.con-imagen.invertida figure.marca-imagen:not(.visible) { clip-path: polygon(60% 0, 0 0, 0 100%, 80% 100%); }
  html.js-motion section.bloque.con-imagen.invertida figure.marca-imagen.visible { clip-path: polygon(78% 0, 0 0, 0 100%, 100% 100%); }
  section.bloque.con-imagen.invertida figure.marca-imagen img { -webkit-mask-image: linear-gradient(253deg, transparent 18%, rgba(0,0,0,.14) 25%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.78) 46%, #000 60%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.75) 13%, #000 22%, #000 78%, rgba(0,0,0,.75) 87%, rgba(0,0,0,.35) 94%, transparent 100%), linear-gradient(270deg, #000 0%, #000 70%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.36) 90%, transparent 100%); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(253deg, transparent 18%, rgba(0,0,0,.14) 25%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.78) 46%, #000 60%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.75) 13%, #000 22%, #000 78%, rgba(0,0,0,.75) 87%, rgba(0,0,0,.35) 94%, transparent 100%), linear-gradient(270deg, #000 0%, #000 70%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.36) 90%, transparent 100%); mask-composite: intersect; }
  section.bloque.con-imagen.invertida figure.marca-imagen figcaption { right: auto; left: 12px; }
  section.bloque.con-imagen.invertida figure.marca-mapa { right: auto; left: 1%; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html.js-motion section.bloque.con-imagen.invertida figure.marca-imagen:not(.visible) { clip-path: polygon(78% 0, 0 0, 0 100%, 100% 100%); }
}
.agenda { margin-inline: auto; }
@media (min-width: 901px) { section.bloque#donde { min-height: 25rem; align-content: center; } }
/* — Menú compacto en cristal líquido —
   La pastilla ya no cruza todo el ancho (esa era la franja oscura): se ajusta a su contenido, es más baja y deja ver la portada alrededor.
   El cristal desenfoca y satura lo que hay detrás, con un brillo de borde arriba y un velo oscuro muy ligero para que los enlaces se lean sobre
   zonas claras de la imagen. */
header.sitio {
  width: fit-content;
  max-width: min(var(--ancho), calc(100% - 24px));
  padding: 4px 8px 4px 16px;
  gap: 14px;
  flex-wrap: nowrap;
  justify-content: center;
  background: linear-gradient(135deg, rgba(234, 229, 203, 0.18) 0%, rgba(12, 10, 8, 0.3) 46%, rgba(12, 10, 8, 0.22) 100%);
  border: 1px solid rgba(234, 229, 203, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 14px 32px -16px rgba(0, 0, 0, 0.6);
}
header.sitio .liquid-warp { backdrop-filter: blur(28px) saturate(200%) brightness(1.03); -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.03); }
header.sitio img { height: 30px; }
header.sitio nav { gap: 2px; flex-wrap: nowrap; }
header.sitio nav a { min-height: 34px; padding: 0 11px; color: var(--ds-crema); text-shadow: 0 1px 12px rgba(12, 10, 8, 0.65); }
header.sitio nav a:hover, header.sitio nav a:focus-visible { background: rgba(234, 229, 203, 0.16); }
@media (max-width: 760px) {
  header.sitio { width: auto; margin-inline: 12px; justify-content: space-between; border-radius: 999px; }
  header.sitio img { height: 28px; }
  header.sitio .menu-boton { min-height: 34px; }
  /* El menú desplegable no empuja la página: se abre como un panel de cristal bajo la pastilla. */
  header.sitio.con-menu nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    padding: 8px;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(234, 229, 203, 0.16), rgba(12, 10, 8, 0.4));
    border: 1px solid rgba(234, 229, 203, 0.28);
    border-radius: 22px;
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 36px -18px rgba(0, 0, 0, 0.6);
  }
  header.sitio.con-menu[data-abierto="true"] nav { display: flex; }
  header.sitio nav a { min-height: 40px; }
}
/* La foto de «La persona» sale de la caja de la sección: la etiqueta se mete hacia dentro para que no la corte el borde de la ventana. */
@media (min-width: 901px) { #persona figure.marca-imagen figcaption { right: 48px; } }

/* Agenda por WhatsApp (versión oficial): reemplaza al agendador de la vista previa. */
.agenda-whatsapp { max-width: 34rem; margin: 8px 0 24px; padding: 28px 26px; display: grid; gap: 12px; }
.agenda-whatsapp p { margin: 0; max-width: none; }
.agenda-whatsapp-titulo { font-family: var(--ds-font-cuerpo); font-weight: 600; font-size: var(--ds-text-h3); line-height: 1.15; color: var(--tinta-fuerte); }