/*
 * Sitio stdiomx.com · Portada v2 «sin saturar» · Vidrio (2-nov-2026).
 *
 * Transcripción de `docs/pipeline/sitio-web/02-maqueta.md` (S1) más `04-portada-v2.md` (héroe que se
 * retira, escena «Un día», Anya por pasos, «Quien no es dueño, no paga», preguntas sin cebra, pie).
 * Solo la portada la usa; /clientes/, los puentes y los legales siguen en `v3.css` hasta su turno.
 *
 * Rutas relativas (fuentes/, img/) para que sirva también bajo /sitio/. Ningún hex fuera de :root
 * salvo las recetas de cristal, que son literales del canvas. Móvil primero; escritorio desde 1024.
 *
 * Movimiento: solo transform, opacity y clip-path (el fondo de la escena cambia de color por
 * capítulo, como pide el doc). Todo estado inicial oculto vive bajo `html.js` y
 * `prefers-reduced-motion: no-preference`: la página reducida es la página terminada.
 */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/fraunces-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/manrope-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/manrope-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/manrope-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/manrope-700-latin.woff2") format("woff2"); }

:root {
  /* ---- campos y tintas ---- */
  --papel: #FBF7F2;
  --fondo-vidrio: #F8F5F1;
  --ink: #111827;
  --ink-2: #4B5563;
  --on-dark: #F5F1EA;
  --on-dark-2: #B3AA9E;
  --negro: #0E0F12;
  --negro-sup: #1C1E24;
  --amanecer: #F4C9AE;
  --lavanda: #D9D0F2;
  --lavanda-claro: #ECE7F8;
  --oceano: #BFD9F2;
  --jardin: #CFE6DC;
  --plata: #DDE1E7;

  /* ---- cristal (receta de Vidrio) ---- */
  --cristal-fondo: #FFFFFFC7;
  --cristal-canto: #FFFFFFB3;
  --cristal-sombra: 0 8px 24px #0F172A14;
  --barra-clara: #FFFFFF8C;
  --barra-clara-canto: #FFFFFFCC;
  --barra-clara-sombra: 0 6px 20px #0F172A0F;
  --barra-oscura: #2A2420B3;
  --barra-oscura-canto: #FFFFFF1F;
  --barra-clara-solida: #FFFFFFF2;
  --barra-oscura-solida: #2A2420;
  --velo: #0E0F1273;
  --hoja: #F8F5F1F2;
  --mancha-1: #F4C9AECC;
  --mancha-2: #D9D0F2CC;
  --mancha-3: #CFE6DCCC;
  --mancha-4: #F2D6C4B3;
  --transparente: #F8F5F100;

  /* ---- héroe vivo (S1e) ---- */
  --dorado: #EBA93B;
  --velo-foto-1: #0E0F12B3;   /* 70 % arriba */
  --velo-foto-2: #0E0F1259;   /* 35 % al 45 % */
  --velo-foto-3: #0E0F12E6;   /* 90 % abajo */
  --aviso-sombra: 0 12px 32px #00000059;

  /* ---- la app en Vidrio (pantalla de la escena) ---- */
  --ap-tinta: #111A2E;
  --ap-cobre: #6F5634;
  --ap-gris: #6B7280;          /* subtítulos y detalles de la pantalla (canvas) */
  --ap-pastilla: #FFFFFF8C;    /* los días inactivos de la agenda */
  --ap-sobre-tinta: #FFFFFFB3; /* la letra del día activo */
  --ap-dock: #4B4F5ACC;
  --ap-dock-solido: #4B4F5A;
  --ap-alerta-fondo: #F9E3E1;
  --ap-alerta-tinta: #7D2825;
  --telefono-sombra: 0 40px 80px -20px #0F172A40;

  /* ---- letra: cinco papeles ---- */
  --fraunces: "Fraunces", Georgia, "Times New Roman", serif;
  --manrope: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: clamp(58px, 8.89vw, 128px);          /* el héroe, como está autorizado (S1e) */
  --display-hora: clamp(96px, 12.2vw, 176px);     /* la hora de la escena: Display 58–176, 96 en móvil */
  --titulo: clamp(40px, 4.45vw, 64px);
  --sub: clamp(24px, 1.95vw, 28px);
  --cuerpo: clamp(18px, 1.39vw, 20px);
  --nota: 15px;
  /* Tamaños de canvas que ya estaban autorizados y este doc no rediseña. */
  --titulo-preguntas: clamp(40px, 6.95vw, 100px);
  --precio: clamp(96px, 11.12vw, 160px);
  --precio-2: clamp(76px, 7.78vw, 112px);
  --cierre-frase: clamp(40px, 6.12vw, 88px);
  --cierre-campo: clamp(26px, 3.62vw, 52px);
  --cierre-boton: clamp(30px, 5vw, 72px);
  --anya-noche: clamp(48px, 6.7vw, 96px);
  --rubros: clamp(40px, 3.9vw, 56px);

  /* ---- medidas ---- */
  --margen: 20px;
  --relleno: 56px;
  --radio: 20px;
  --radio-fila: 16px;
  --radio-cristal: 22px;
  --barra-alto: 64px;
  --anillo: var(--ink);

  /* ---- movimiento ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-barra: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-viaje: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- capas ---- */
  --z-menu: 20;
  --z-barra: 30;
}

@media (min-width: 600px) {
  :root { --margen: 40px; }
}

@media (min-width: 1024px) {
  :root { --margen: 64px; --relleno: 96px; --barra-alto: 72px; }
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--manrope);
  font-size: var(--cuerpo);
  line-height: 1.5;
  color: var(--ink);
  background: var(--papel);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-optical-sizing: auto;
}

[hidden] { display: none !important; }

img, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--anillo); outline-offset: 3px; }

[id] { scroll-margin-top: 88px; }

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

.saltar {
  position: absolute; top: 8px; left: 8px;
  z-index: calc(var(--z-barra) + 1);
  padding: 10px 16px;
  background: var(--negro); color: var(--on-dark);
  border-radius: 12px; font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.centinela { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* --------------------------------------------------------------- escala */

.titulo {
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--titulo); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.sub { font-weight: 700; font-size: var(--sub); line-height: 1.15; }
.cuerpo { font-weight: 400; font-size: var(--cuerpo); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.nota { font-weight: 500; font-size: var(--nota); line-height: 1.4; }

.campo { padding: var(--relleno) 0; }
.campo--negro { background: var(--negro); color: var(--on-dark); --anillo: var(--on-dark); }
.campo--negro .cuerpo { font-weight: 500; }
.campo--amanecer { background: var(--amanecer); color: var(--ink); }
.campo--oceano { background: var(--oceano); color: var(--ink); }
.campo--jardin { background: var(--jardin); color: var(--ink); }
.campo--plata { background: var(--plata); color: var(--ink); }
.campo--papel { background: var(--papel); color: var(--ink); }

.ancho { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margen); }

.enlace { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 2px; }
.enlace--sub { font-size: var(--sub); line-height: 1.15; }

/* -------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border: 0; border-radius: var(--radio);
  font-weight: 700; font-size: var(--cuerpo); line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.boton:active { transform: scale(0.97); }
.boton--negro { background: var(--negro); color: var(--on-dark); }
.boton--amanecer { background: var(--amanecer); color: var(--ink); }
.boton--ancho { width: 100%; }
.boton--ancho-movil { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .boton--negro:hover { background: var(--negro-sup); }
  .enlace:hover, .barra__nav a:hover, .barra__entrar:hover, .pie__nav a:hover, .pie__contacto a:hover { text-decoration-thickness: 3px; }
}

@media (min-width: 1024px) {
  .boton--ancho-movil { width: auto; }
}

/* ------------------------------------------------------------- cristal */

.cristal {
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-canto);
  border-radius: var(--radio-cristal);
  box-shadow: var(--cristal-sombra);
  color: var(--ink);
}
.filas { padding: 4px 14px; }
.fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; font-size: var(--nota); line-height: 1.4;
}
.fila__izq { font-weight: 700; color: var(--ink); }
.fila__der { font-weight: 500; color: var(--ink-2); text-align: right; }

/* Grano de película, solo sobre la foto del héroe: ruido SVG quieto, al 6 % en overlay. */
.grano { position: relative; isolation: isolate; }
.grano::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------------------------------------------------------------- barra */

.barra {
  position: sticky; top: 0; z-index: var(--z-barra);
  height: var(--barra-alto);
  margin-bottom: calc(-1 * var(--barra-alto));
  color: var(--on-dark);
  --anillo: var(--on-dark);
  /* Arriba del todo va en cristal oscuro sobre la foto del héroe; al pegarse toma el tono del capítulo. */
  background: var(--barra-oscura);
  border-bottom: 1px solid var(--barra-oscura-canto);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  transition: background-color 300ms var(--ease-barra), border-color 300ms var(--ease-barra), box-shadow 300ms var(--ease-barra), color 300ms var(--ease-barra);
}
.barra--clara { color: var(--ink); --anillo: var(--ink); }
.barra--pegada.barra--clara {
  background: var(--barra-clara);
  border-bottom-color: var(--barra-clara-canto);
  box-shadow: var(--barra-clara-sombra);
}
.barra--pegada.barra--oscura {
  background: var(--barra-oscura);
  border-bottom-color: var(--barra-oscura-canto);
}
.barra--menu, .barra--menu.barra--pegada {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink); --anillo: var(--ink);
}

.barra__fila {
  height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.barra__logo { display: block; flex: 0 0 auto; border-radius: 6px; }
.logo { width: 104px; height: 26px; }
.logo--oscuro { display: none; }
.barra--clara .logo--oscuro, .barra--menu .logo--oscuro { display: block; }
.barra--clara .logo--claro, .barra--menu .logo--claro { display: none; }

.barra__nav { display: none; }
.barra__acciones { display: flex; align-items: center; gap: 8px; }
.barra__entrar { display: none; }

.boton--barra {
  min-height: 40px; padding: 0 14px; border-radius: var(--radio);
  font-size: var(--nota); line-height: 1.2;
  background: var(--amanecer); color: var(--ink);
}
.barra--clara .boton--barra { background: var(--negro); color: var(--on-dark); }
.barra--menu .boton--barra { display: none; }

.barra__menu {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: var(--nota); color: inherit;
  order: -1;
}

@media (min-width: 1024px) {
  .logo { width: 128px; height: 32px; }
  .barra__nav { display: flex; gap: 32px; }
  .barra__nav a, .barra__entrar { font-weight: 700; font-size: var(--nota); text-decoration: none; text-underline-offset: 0.2em; }
  .barra__nav a { font-weight: 500; }
  .barra__nav a:hover, .barra__entrar:hover { text-decoration: underline; }
  .barra__acciones { gap: 20px; }
  .barra__entrar { display: inline; }
  .barra__menu { display: none !important; }
  .boton--barra { min-height: 44px; padding: 0 18px; }
}

/* ----------------------------------------------------------------- menú */

.menu { position: fixed; inset: 0; z-index: var(--z-menu); }
.menu__velo {
  position: absolute; inset: 0; background: var(--velo);
  opacity: 0; transition: opacity 200ms ease;
}
.menu__hoja {
  position: absolute; top: 0; left: 0; right: 0;
  max-height: 100%; overflow-y: auto;
  padding: calc(var(--barra-alto) + 12px) var(--margen) 28px;
  background: var(--hoja);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  border-radius: 0 0 28px 28px;
  color: var(--ink);
  opacity: 0; transform: translateY(-16px);
  transition: opacity 180ms var(--ease-drawer), transform 180ms var(--ease-drawer);
}
.menu__hoja:focus { outline: none; }
.menu--abierto .menu__velo { opacity: 1; }
.menu--abierto .menu__hoja { opacity: 1; transform: none; transition-duration: 250ms; }

.menu__lista a {
  display: block; padding: 10px 0;
  font-weight: 700; font-size: 24px; line-height: 1.15; text-decoration: none;
}
.menu__entrar { margin-top: 18px; font-weight: 700; font-size: 18px; line-height: 1.3; }
.menu__entrar a { text-underline-offset: 0.16em; text-decoration-thickness: 2px; }
.menu__nota { margin-top: 4px; font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }
.menu .boton { margin-top: 20px; }

/* ---------------------------------------------------------------- héroe */

.heroe {
  position: relative;
  --corte: 440px;
  timeline-scope: --heroe;
}
/* `z-index: 0` encierra foto y avisos en su propio contexto: el titular (z 1) queda siempre encima.
   `overflow: clip` (no hidden) para que la línea de tiempo de scroll siga mirando la página. */
.heroe__negro {
  position: relative; z-index: 0; height: var(--corte);
  background: var(--negro); overflow: clip;
  view-timeline-name: --heroe;
}

.heroe__foto { position: absolute; inset: 0; }
.heroe__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; }
.heroe__foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--velo-foto-1) 0%, var(--velo-foto-2) 45%, var(--velo-foto-3) 100%);
}
/* La sombra plana que oscurece el héroe al retirarse (opacidad 0 → 0.35, ligada al scroll). */
.heroe__sombra { position: absolute; inset: 0; z-index: 1; background: var(--negro); opacity: 0; pointer-events: none; }

/* Avisos de Anya: tarjetas de cristal oscuro. Móvil, pila de 2 bajo la barra; escritorio, 3 sitios fijos.
   Transiciones (no keyframes): llegan y se van cada 3.5 s. Es el único bucle del héroe. */
.avisos {
  position: absolute; z-index: 2;
  top: calc(var(--barra-alto) + 16px); left: var(--margen); right: var(--margen);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  pointer-events: none;
}
.aviso {
  width: 300px; max-width: 100%;
  padding: 12px 16px;
  background: var(--barra-oscura);
  border: 1px solid var(--barra-oscura-canto);
  border-radius: var(--radio-cristal);
  box-shadow: var(--aviso-sombra);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  color: var(--on-dark);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), filter 400ms var(--ease-out), translate 400ms var(--ease-out);
}
.aviso__fila { display: flex; align-items: center; gap: 8px; font-size: var(--nota); line-height: 1.35; }
.aviso__punto { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); }
.aviso__titulo { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.aviso__hora { flex: 0 0 auto; font-weight: 500; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.aviso__detalle { margin-top: 4px; font-weight: 500; font-size: var(--nota); line-height: 1.35; text-wrap: pretty; }

@media (max-width: 1023px) {
  .aviso:nth-child(2) { translate: 50px 0; opacity: 0.55; }
}

html.js .aviso--entrando { opacity: 0; transform: translateY(12px); filter: blur(4px); }
html.js .aviso--saliendo { opacity: 0; transition: opacity 300ms var(--ease-out); }

.heroe__titulo {
  position: absolute; left: 0; right: 0; z-index: 1;
  top: calc(var(--corte) - 0.92em);
  padding-inline: var(--margen);
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--display); line-height: 0.92; letter-spacing: -0.025em;
  font-kerning: normal;
}
.heroe__linea { display: block; }
.heroe__linea--1 { color: var(--on-dark); }
.heroe__linea--2 { color: var(--negro); }
.heroe__amanecer {
  background: var(--amanecer); color: var(--ink);
  padding: calc(var(--display) * 0.92 + 28px) var(--margen) var(--relleno);
}
.heroe__bajo { max-width: 1312px; margin-inline: auto; }
.heroe__frase { font-size: var(--cuerpo); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.heroe__accion { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.heroe__nota { max-width: 32em; }

@media (min-width: 1024px) {
  .heroe { --corte: 560px; }
  .avisos { display: block; }
  .aviso { position: absolute; }
  .aviso[data-sitio="0"] { top: 0; right: 0; width: 380px; }
  .aviso[data-sitio="1"] { top: 72px; left: 0; width: 360px; opacity: 0.8; }
  .aviso[data-sitio="2"] { top: 112px; right: 0; width: 330px; opacity: 0.45; }
  html.js .aviso--entrando { opacity: 0; }
  html.js .aviso--saliendo { opacity: 0; }
  .heroe__titulo { text-align: center; letter-spacing: -0.035em; }
  .heroe__amanecer { padding-top: calc(var(--display) * 0.92 + 32px); text-align: center; }
  .heroe__frase { margin-inline: auto; }
  .heroe__accion { flex-direction: row; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
  .heroe__nota { text-align: left; max-width: 26em; }
}

/* Entrada del héroe (solo con JS): cada línea por clip-path, la frase por opacidad. */
html.js .heroe__linea { clip-path: inset(0 0 100% 0); animation: revelar 700ms var(--ease-out) forwards; }
html.js .heroe__linea--2 { animation-delay: 80ms; }
html.js .heroe__frase, html.js .heroe__accion { opacity: 0; animation: aparecer 400ms var(--ease-out) 300ms forwards; }

@keyframes revelar { to { clip-path: inset(-20% -4% -30% -4%); } }
@keyframes aparecer { to { opacity: 1; } }

/* El héroe se retira con el scroll: la foto baja un 8 % (con escala para no destapar el borde), la
   sombra sube a 0.35 y el titular sube un 6 %. Lineal y atado a la barra de scroll. Donde no hay
   líneas de tiempo de scroll, sitio.js lo mueve con IntersectionObserver + rAF; sin eso, quieto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .heroe__foto img { animation: heroe-hunde linear both; animation-timeline: --heroe; animation-range: exit 0% exit 100%; }
    .heroe__sombra { animation: heroe-oscurece linear both; animation-timeline: --heroe; animation-range: exit 0% exit 100%; }
    .heroe__titulo { animation: heroe-sube linear both; animation-timeline: --heroe; animation-range: exit 0% exit 100%; }
  }
}
@keyframes heroe-hunde { to { transform: translateY(8%) scale(1.08); } }
@keyframes heroe-oscurece { to { opacity: 0.35; } }
@keyframes heroe-sube { to { transform: translateY(-6%); } }

/* ------------------------------------------------------ escena «Un día» */

.dia__cabeza { text-align: center; padding-bottom: 40px; }
.dia__titulo { max-width: 15em; margin-inline: auto; }
.dia__nota { margin-top: 16px; color: var(--ink-2); }

/* Los 4 tramos apilados: es la composición terminada (sin JS, con reducir movimiento y en móvil). */
.tramo {
  display: grid; justify-items: start;
  padding: var(--relleno) max(var(--margen), calc(50% - 656px));
}
.tramo--amanecer { background: var(--amanecer); color: var(--ink); }
.tramo--oceano { background: var(--oceano); color: var(--ink); }
.tramo--plata { background: var(--plata); color: var(--ink); }
.tramo--negro { background: var(--negro); color: var(--on-dark); --anillo: var(--on-dark); }
.tramo__hora {
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--display-hora); line-height: 0.85; letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.tramo__titulo {
  margin-top: 24px;
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--titulo); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.tramo__texto { margin-top: 16px; font-size: var(--cuerpo); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.tramo--negro .tramo__texto { font-weight: 500; }
.tramo .telefono { margin-top: 40px; justify-self: center; }

@media (min-width: 1024px) {
  .dia__cabeza { padding-bottom: 56px; }
  .dia__escena:not(.dia__escena--viva) .tramo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: center; }
  .dia__escena:not(.dia__escena--viva) .tramo .telefono { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
}

/* El teléfono: un lienzo de 390×844 a escala. En los bloques apilados va a 300 de ancho, recortado a
   520 de alto con un desvanecido inferior hacia el color del bloque. */
.telefono {
  --k: 0.7692;
  position: relative;
  width: calc(390px * var(--k)); height: 520px;
  border-radius: 44px; overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}
.telefono__lienzo {
  position: relative; width: 390px; height: 844px;
  transform: scale(var(--k)); transform-origin: 0 0;
  color: var(--ink);
  background-color: var(--fondo-vidrio);
  background-image:
    radial-gradient(ellipse 130% 70% at 5% 8%, var(--mancha-1), var(--transparente)),
    radial-gradient(ellipse 120% 60% at 100% 35%, var(--mancha-2), var(--transparente)),
    radial-gradient(ellipse 130% 60% at 15% 80%, var(--mancha-3), var(--transparente)),
    radial-gradient(ellipse 100% 50% at 90% 95%, var(--mancha-4), var(--transparente));
  font-family: var(--manrope); font-size: 15px; line-height: 1.35;
}
.telefono__pantallas { position: absolute; inset: 0; }
.pantalla { position: absolute; inset: 0; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }

/* ---- la UI de la app (receta de Vidrio, calcada del canvas) ---- */
/* Barra de estado de 54: la hora abajo a la izquierda, a sangre dentro de la pantalla. */
.ap-estado {
  margin: 0 -20px; height: 54px; flex: 0 0 54px;
  display: flex; align-items: flex-end; padding: 0 16px 6px 20px;
  font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.ap-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-titulo { font-family: var(--fraunces); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.ap-boton {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: 999px; background: var(--ap-cobre); color: #FFFFFF;
  font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap;
}
.ap-boton--crema { margin-top: 16px; align-self: flex-start; background: var(--on-dark); color: var(--ap-tinta); }
.ap-sub { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--ap-gris); }
/* Los días: pastillas de 44×60 con radio 16; la de hoy en tinta. */
.ap-dias { display: flex; justify-content: space-between; }
.ap-dias li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 60px; border-radius: 16px; background: var(--ap-pastilla);
  font-size: 12px; font-weight: 600; color: var(--ap-gris);
}
.ap-dias li b { font-size: 17px; font-weight: 700; line-height: 1; color: var(--ink); }
.ap-dias__hoy { background: var(--ap-tinta); color: var(--ap-sobre-tinta); }
.ap-dias__hoy b { color: #FFFFFF; }
.ap-rotulo { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ap-cobre); }
.ap-rotulo--sobre-tinta { color: var(--on-dark-2); }
/* Cada lista va en UNA tarjeta de cristal; dentro, filas de 12 de aire arriba y abajo (66 de alto). */
.ap-lista {
  display: grid; padding: 6px 16px;
  background: var(--cristal-fondo); border: 1px solid var(--cristal-canto);
  border-radius: var(--radio-cristal); box-shadow: var(--cristal-sombra);
}
.ap-cita, .ap-turno { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.ap-cita__texto, .ap-turno__texto { flex: 1 1 auto; min-width: 0; }
.ap-cita__quien, .ap-turno__quien { font-size: 17px; font-weight: 700; line-height: 22px; }
.ap-cita__que, .ap-turno__que { margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--ap-gris); }
.ap-chip { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink); white-space: nowrap; }
.ap-chip--jardin { background: var(--jardin); }
.ap-chip--amanecer { background: var(--amanecer); }
.ap-chip--lavanda { background: var(--lavanda); }
.ap-chip--oceano { background: var(--oceano); }
.ap-monto { flex: 0 0 auto; font-family: var(--fraunces); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.ap-bloque { padding: 20px; border-radius: var(--radio-cristal); background: var(--ap-tinta); color: var(--on-dark); display: flex; flex-direction: column; align-items: flex-start; }
.ap-bloque__nombre { margin-top: 8px; font-family: var(--fraunces); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.ap-bloque__detalle { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--on-dark-2); text-wrap: pretty; }
.ap-bloque__cifra { margin-top: 8px; font-family: var(--fraunces); font-weight: 600; font-size: 48px; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.ap-bloque__numero { display: inline-block; }
.ap-alerta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px;
  background: var(--ap-alerta-fondo); color: var(--ap-alerta-tinta);
  font-size: 14px; font-weight: 700;
}
.ap-alerta__icono { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-capas { display: grid; }
.ap-capas > .ap-capa { grid-area: 1 / 1; }
.ap-capa--despues { opacity: 0; }
/* El puesto va en el mismo texto («1 · Iván C.»); las dos cifras del FLIP se apilan en línea. */
.ap-turno__n { font-variant-numeric: lining-nums tabular-nums; }
.ap-turno__n.ap-capas { display: inline-grid; vertical-align: baseline; }

/* Dock de cristal oscuro: la copia «activa» (píldora de tinta, icono y etiqueta dorados) se recorta
   con clip-path a la pestaña activa y el recorte se desliza: color y píldora cambian a la vez.
   Orden del canvas: Caja · Citas · Mensajes · Equipo. */
.dock {
  position: absolute; left: 20px; right: 20px; bottom: 24px; height: 64px;
  border-radius: 999px; background: var(--ap-dock);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  overflow: clip;
}
.dock__lista { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dock__lista li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--on-dark); }
.dock__lista svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock__lista--activa {
  background: var(--ap-tinta);
  /* Arranca en «Citas» (la pestaña del primer tramo); sitio.js la mueve por tramo. */
  clip-path: inset(4px calc(50% + 4px) 4px calc(25% + 4px) round 999px);
  transition: clip-path 350ms var(--ease-in-out);
}
.dock__lista--activa li { color: var(--dorado); }

/* ---- estados de cada pantalla (solo con JS y con movimiento permitido) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Agenda: las 4 citas entran una por una. */
  .pantalla--agenda .ap-cita { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
  .pantalla--agenda .ap-cita:nth-child(2) { transition-delay: 90ms; }
  .pantalla--agenda .ap-cita:nth-child(3) { transition-delay: 180ms; }
  .pantalla--agenda .ap-cita:nth-child(4) { transition-delay: 270ms; }
  html.js .pantalla--agenda:not(.pantalla--activa) .ap-cita { opacity: 0; transform: translateY(8px); }

  /* Fila: al entrar, «1 · Iván C.» sube a atendiendo y las demás suben un lugar (500 ms, curva drawer). */
  .pantalla--fila .ap-capa { transition: opacity 300ms ease 700ms; }
  .pantalla--fila .ap-fila { height: 210px; overflow: clip; transition: height 500ms var(--ease-drawer) 700ms; }
  html.js .pantalla--fila.pantalla--activa .ap-fila { height: 144px; }
  .pantalla--fila .ap-turno { transition: transform 500ms var(--ease-drawer) 700ms, opacity 300ms var(--ease-out) 700ms; }
  html.js .pantalla--fila.pantalla--activa .ap-capa:not(.ap-capa--despues) { opacity: 0; }
  html.js .pantalla--fila.pantalla--activa .ap-capa--despues { opacity: 1; }
  html.js .pantalla--fila.pantalla--activa .ap-turno--sale { opacity: 0; transform: translateY(-24px); }
  html.js .pantalla--fila.pantalla--activa .ap-turno--sube { transform: translateY(-66px); }

  /* Ficha: la alerta entra con scale(0.98) en 250 ms; después, la historia. */
  .pantalla--ficha .ap-alerta { transition: opacity 250ms var(--ease-out) 150ms, transform 250ms var(--ease-out) 150ms; }
  .pantalla--ficha .ap-historia .ap-cita { transition: opacity 300ms var(--ease-out) 420ms, transform 300ms var(--ease-out) 420ms; }
  .pantalla--ficha .ap-historia .ap-cita:nth-child(2) { transition-delay: 510ms; }
  .pantalla--ficha .ap-historia .ap-cita:nth-child(3) { transition-delay: 600ms; }
  html.js .pantalla--ficha:not(.pantalla--activa) .ap-alerta { opacity: 0; transform: scale(0.98); }
  html.js .pantalla--ficha:not(.pantalla--activa) .ap-historia .ap-cita { opacity: 0; transform: translateY(8px); }

  /* Caja: la cifra se revela con un recorte (el valor real está desde el primer cuadro). */
  .pantalla--caja .ap-bloque__numero { clip-path: inset(-20% -4% -20% -4%); transition: clip-path 600ms var(--ease-out) 100ms, transform 600ms var(--ease-out) 100ms; }
  .pantalla--caja .ap-entradas .ap-cita { transition: opacity 300ms var(--ease-out) 360ms, transform 300ms var(--ease-out) 360ms; }
  .pantalla--caja .ap-entradas .ap-cita:nth-child(2) { transition-delay: 450ms; }
  .pantalla--caja .ap-entradas .ap-cita:nth-child(3) { transition-delay: 540ms; }
  html.js .pantalla--caja:not(.pantalla--activa) .ap-bloque__numero { clip-path: inset(0 0 100% 0); transform: translateY(18%); }
  html.js .pantalla--caja:not(.pantalla--activa) .ap-entradas .ap-cita { opacity: 0; transform: translateY(8px); }

  /* Reinicio sin transición (sitio.js lo pone un cuadro al quitar el estado). */
  .pantalla--reinicio, .pantalla--reinicio * { transition: none !important; }
}

/* ---- el escenario vivo (escritorio, con JS y movimiento; lo arma sitio.js) ---- */
.dia__escena--viva { height: 400svh; }
.dia__escena--viva .dia__escenario {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 24px;
  padding: calc(var(--barra-alto) + 32px) max(var(--margen), calc(50% - 656px)) 48px;
  background: var(--amanecer); color: var(--ink);
  transition: background-color 500ms ease, color 500ms ease;
}
.dia__escena--viva[data-activo="1"] .dia__escenario { background: var(--oceano); }
.dia__escena--viva[data-activo="2"] .dia__escenario { background: var(--plata); }
.dia__escena--viva[data-activo="3"] .dia__escenario { background: var(--negro); color: var(--on-dark); --anillo: var(--on-dark); }

.dia__escena--viva .dia__reloj {
  grid-column: 1 / 7; grid-row: 1;
  display: flex; align-items: baseline;
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--display-hora); line-height: 0.85; letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.reloj__d { display: grid; overflow: clip; padding-block: 0.08em; margin-block: -0.08em; }
.reloj__d > span { grid-area: 1 / 1; display: block; }

.dia__escena--viva .dia__tramos { grid-column: 1 / 7; grid-row: 2; position: relative; min-height: 0; margin-top: 24px; }
.dia__escena--viva .tramo {
  position: absolute; inset: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-start; background: none; color: inherit;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 400ms ease, transform 400ms var(--ease-out);
}
.dia__escena--viva .tramo--activo { opacity: 1; transform: none; pointer-events: auto; }
.dia__escena--viva .tramo__hora {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dia__escena--viva .tramo__titulo { margin-top: 0; font-size: 56px; max-width: 14em; }
.dia__escena--viva .tramo__texto { margin-top: 24px; font-size: 20px; max-width: 24em; }
.dia__escena--viva .tramo .telefono { display: none; }

.dia__escena--viva .dia__progreso {
  grid-column: 1 / 7; grid-row: 3; align-self: end;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: 520px;
}
.progreso__barra { display: block; position: relative; height: 3px; overflow: clip; }
.progreso__barra::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.2; }
.progreso__lleno { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
.progreso__hora { display: block; margin-top: 10px; font-size: var(--nota); font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.4; transition: opacity 300ms ease; }
.progreso__paso--activo .progreso__hora { opacity: 1; }

.telefono--escena {
  --k: 0.758;
  grid-column: 7 / 13; grid-row: 1 / 4; justify-self: center; align-self: center;
  height: calc(844px * var(--k));
  box-shadow: var(--telefono-sombra);
  -webkit-mask-image: none; mask-image: none;
}
@media (max-height: 820px) { .telefono--escena { --k: 0.68; } }
@media (max-height: 720px) { .telefono--escena { --k: 0.6; } }
.telefono--escena .pantalla { opacity: 0; transition: opacity 400ms ease; }
.telefono--escena .pantalla--visible { opacity: 1; }

/* ----------------------------------------------------------------- anya */

.anya__col { max-width: 1440px; margin-inline: auto; padding-inline: var(--margen); display: flex; flex-direction: column; height: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radio-fila);
  background: var(--negro-sup); color: var(--on-dark);
  font-weight: 700; font-size: var(--nota); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.chip:active { transform: scale(0.97); }
.chip[aria-selected="true"] { background: var(--on-dark); color: var(--negro); }
.anya__mensaje { margin-top: 32px; max-width: 18em; text-wrap: pretty; hanging-punctuation: first; }

/* La noche: el título con la hora gigante detrás, al 12 %. */
.anya__noche { position: relative; margin-top: 48px; padding: 40px 0; overflow: clip; }
.anya__hora {
  position: absolute; left: -0.04em; top: 50%; translate: 0 -50%; z-index: 0;
  font-family: var(--fraunces); font-weight: 600;
  font-size: clamp(120px, 16.5vw, 240px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--on-dark); opacity: 0.12;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.anya__titulo {
  position: relative; z-index: 1;
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--titulo); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.anya__titulo--1 { font-size: var(--anya-noche); color: var(--on-dark); max-width: 7em; }
.anya__titulo--2 { margin-top: 40px; color: var(--ink); }
.anya__pie { margin-top: 24px; color: var(--on-dark-2); max-width: 28em; }

.chat { padding: 20px; border-radius: var(--radio); background: var(--lavanda-claro); }
.chat__contenido { display: flex; flex-direction: column; gap: 12px; min-height: 296px; transition: opacity 150ms ease; }
.chat__contenido.saliendo { opacity: 0; }
.burbuja { max-width: 88%; font-size: var(--nota); line-height: 1.45; }
.burbuja--cliente {
  align-self: flex-end;
  padding: 12px 16px; border-radius: 18px;
  background: var(--negro); color: var(--on-dark); font-weight: 500;
}
.burbuja--anya { align-self: flex-start; padding: 12px 16px; }
.burbuja__quien { font-weight: 700; }
.burbuja__texto { margin-top: 2px; font-weight: 500; color: var(--ink); }
.cita { padding: 14px 16px; transform-origin: 0 0; }
.cita__titulo { font-weight: 700; font-size: var(--nota); line-height: 1.4; }
.cita__detalle { font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }

.escribiendo { display: inline-flex; gap: 5px; padding: 6px 0 2px; }
.escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); opacity: 0.35; animation: latir 700ms ease-in-out infinite; }
.escribiendo span:nth-child(2) { animation-delay: 120ms; }
.escribiendo span:nth-child(3) { animation-delay: 240ms; }
@keyframes latir { 50% { opacity: 1; } }

.burbuja, .cita { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), filter 250ms var(--ease-out); }

/* El mini-hueco de agenda bajo el chat. */
.agenda-mini {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-radius: var(--radio);
  background: var(--cristal-fondo); border: 1px solid var(--cristal-canto); box-shadow: var(--cristal-sombra);
}
.agenda-mini__rotulo { flex: 0 0 auto; font-weight: 700; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }
.agenda-mini__cita { font-weight: 700; font-size: var(--nota); line-height: 1.4; text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  html.js .entrando { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  /* Antes de que corra la conversación, el chat estático espera vacío (sin salto: tiene su alto). */
  html.js .chat:not(.chat--vivo) .chat__contenido > * { opacity: 0; }
  .agenda-mini { transition: opacity 250ms var(--ease-out); }
  .agenda-mini__cita { transition: opacity 250ms var(--ease-out); }
  html.js .agenda-mini:not(.agenda-mini--visible) { opacity: 0; }
  html.js .agenda-mini:not(.agenda-mini--llena) .agenda-mini__cita { opacity: 0; }
}

.anya__texto { margin-top: 32px; }
.anya__nota { margin-top: 12px; color: var(--ink-2); }

@media (min-width: 1024px) {
  .anya { display: grid; grid-template-columns: 1fr 1fr; min-height: 860px; }
  .anya__col { padding-inline: var(--margen); }
  .anya__negro .anya__col { padding-right: 48px; }
  .anya__crema .anya__col { padding-left: 48px; }
  .anya__mensaje { margin-top: 40px; }
  .anya__noche { flex: 1 1 auto; display: flex; align-items: center; margin-top: 32px; padding: 32px 0; }
  .anya__titulo--2 { margin-top: auto; padding-top: 40px; }
  .chat, .agenda-mini { width: 480px; max-width: 100%; }
  .anya__texto { max-width: 480px; }
}

/* --------------------------------------- «Quien no es dueño, no paga» */

.nopaga { display: grid; }
.mitad { position: relative; display: flex; flex-direction: column; background: var(--papel); view-timeline-name: --mitad; }
.mitad__foto { position: sticky; top: 0; height: 100svh; overflow: clip; }
.mitad__foto img { width: 100%; height: calc(100% + 48px); margin-top: -24px; object-fit: cover; }
.mitad__hoja { position: relative; z-index: 1; flex: 1 1 auto; padding: var(--relleno) var(--margen); }
.mitad__texto { max-width: 560px; }
.lista-sub { margin-top: 28px; display: grid; gap: 14px; font-weight: 700; font-size: var(--sub); line-height: 1.15; }
.mitad__texto .cuerpo { margin-top: 28px; }
.mitad__texto .enlace--sub { display: inline-block; margin-top: 24px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mitad__foto img { animation: paralaje linear both; animation-timeline: --mitad; animation-range: cover 0% cover 100%; }
  }
}
@keyframes paralaje { from { transform: translateY(-24px); } to { transform: translateY(24px); } }

@media (min-width: 1024px) {
  .nopaga { grid-template-columns: 1fr 1fr; }
  .mitad__hoja { padding: var(--relleno) var(--margen) var(--relleno) var(--margen); }
  .mitad--clientes .mitad__hoja { padding-left: 48px; }
  .mitad--profesional .mitad__hoja { padding-right: 48px; }
  .mitad__texto .cuerpo { margin-top: 36px; }
}

/* ------------------------------------------------------------- empiezas */

.pasos { margin-top: 32px; display: grid; gap: 32px; }
.baldosa { position: relative; border-radius: var(--radio); overflow: hidden; }
.baldosa--foto img { width: 100%; height: 100%; object-fit: cover; }
.baldosa--jardin { background: var(--jardin); padding: 20px; display: flex; align-items: center; }
.baldosa--jardin .cristal { width: 100%; }
.paso--1 .baldosa { height: 130px; }
.paso--2 .baldosa { height: 180px; }
.paso--3 .baldosa { height: 240px; }
.paso__pie { margin-top: 16px; }
@media (min-width: 600px) and (max-width: 1023px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
  .paso--1 .baldosa { height: 200px; }
  .paso--2 .baldosa { height: 260px; }
  .paso--3 .baldosa { height: 320px; }
}
.paso__nombre { font-weight: 700; font-size: 20px; line-height: 1.2; }
.paso__texto { margin-top: 6px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }

@media (min-width: 1024px) {
  .empiezas__rejilla {
    display: grid; column-gap: 24px; row-gap: 0;
    grid-template-columns: 300px minmax(0, 428fr) minmax(0, 536fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .empiezas__titulo { grid-column: 1 / 3; grid-row: 1; align-self: start; padding-bottom: 48px; }
  .pasos { display: contents; }
  .paso { display: contents; }
  .paso--1 .baldosa { grid-column: 1; grid-row: 2; align-self: end; height: 260px; }
  .paso--2 .baldosa { grid-column: 2; grid-row: 2; align-self: end; height: 380px; }
  .paso--3 .baldosa { grid-column: 3; grid-row: 1 / 3; align-self: end; height: 520px; }
  .paso--1 .paso__pie { grid-column: 1; grid-row: 3; }
  .paso--2 .paso__pie { grid-column: 2; grid-row: 3; }
  .paso--3 .paso__pie { grid-column: 3; grid-row: 3; }
  .paso__pie { margin-top: 20px; }
}

/* -------------------------------------------------------------- precios */
/* Canvas p0HFRZ: arriba el nombre, «para quién» y el texto; abajo la cifra. En Mensual el botón va a
   la derecha de $299, en la misma línea base. En móvil la cifra sigue al texto y el botón va a lo ancho. */

.planes { display: grid; }
.plan { padding: var(--relleno) var(--margen); }
.plan__col { display: flex; flex-direction: column; height: 100%; max-width: 1312px; margin-inline: auto; width: 100%; }
.plan__nombre { font-family: var(--fraunces); font-weight: 600; font-size: var(--titulo-plan); line-height: 1; letter-spacing: -0.02em; }
.plan__para { margin-top: 12px; }
.plan__texto { margin-top: 28px; }
.plan__abajo { margin-top: 32px; display: flex; flex-direction: column; }
.plan__precio { display: flex; flex-direction: column; align-items: flex-start; }
.plan__cifra { font-family: var(--fraunces); font-weight: 600; line-height: 0.9; letter-spacing: -0.02em; }
[data-cifra] { display: inline-block; font-variant-numeric: tabular-nums; }
.plan__cifra--mes { font-size: var(--precio); }
.plan__cifra--anio { font-size: var(--precio-2); }
.plan__unidad { margin-top: 12px; }
.plan__unidad--linea { color: var(--on-dark-2); }
.plan__abajo .boton { margin-top: 28px; }

@media (min-width: 1024px) {
  .planes { grid-template-columns: 560px minmax(0, 1fr); min-height: 720px; }
  .plan--anual { order: -1; }
  .plan--mensual .plan__col { padding-left: 32px; }
  .plan__abajo { margin-top: auto; padding-top: 48px; }
  .plan--mensual .plan__abajo { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 32px; }
  .plan__abajo .boton { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
}

/* ------------------------------------------------------------ preguntas */

.preguntas__titulo { font-size: var(--titulo-preguntas); }
.preguntas__lista { margin-top: 40px; }
.pregunta + .pregunta { margin-top: 56px; }
.pregunta__q { font-weight: 700; font-size: 22px; line-height: 1.2; text-wrap: balance; }
.pregunta__a { margin-top: 12px; font-size: 17px; line-height: 1.5; max-width: 36em; text-wrap: pretty; }

@media (min-width: 768px) {
  .pregunta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
  .pregunta__a { margin-top: 0; }
}

@media (min-width: 1024px) {
  .preguntas__lista { margin-top: 64px; }
  .pregunta { grid-template-columns: 520px minmax(0, 1fr); gap: 24px; }
  .pregunta__q { font-size: 32px; line-height: 1.15; }
  .pregunta__a { font-size: 20px; }
}

/* --------------------------------------------------------------- cierre */

.cierre { padding: 64px 0; }
.cierre__frase {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--cierre-frase); line-height: 1.05; letter-spacing: -0.02em;
}
.cierre__campo {
  flex: 1 1 100%; min-width: 0;
  height: 60px; padding: 0 20px;
  background: var(--fondo-vidrio); color: var(--ink);
  border: 1px solid var(--ink-2); border-radius: var(--radio);
  font-family: var(--fraunces); font-weight: 600; font-size: var(--cierre-campo); line-height: 1;
}
.cierre__campo::placeholder { color: var(--ink-2); opacity: 1; }
.cierre__boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 22px;
  background: var(--negro); color: var(--on-dark);
  border-radius: var(--radio); text-decoration: none;
  font-family: var(--fraunces); font-weight: 600; font-size: var(--cierre-boton); line-height: 1; letter-spacing: -0.02em;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.cierre__boton:active { transform: scale(0.97); }
.cierre__nota { margin-top: 24px; max-width: 32em; }
.cierre__salto { flex-basis: 100%; height: 0; }

@media (hover: hover) and (pointer: fine) {
  .cierre__boton:hover { background: var(--negro-sup); }
}

@media (min-width: 1024px) {
  .cierre { padding: 140px 0; }
  .cierre__frase { gap: 20px 24px; }
  .cierre__campo { flex: 0 1 700px; height: 100px; padding: 0 28px; }
  .cierre__boton { height: 100px; padding: 0 36px; }
  .cierre__nota { margin-top: 32px; }
}

/* ------------------------------------------------------------------ pie */

.pie__rubros {
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--rubros); line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance;
}
.pie__logo { display: inline-block; margin-top: 40px; border-radius: 8px; }
.pie__logo img { height: 44px; width: auto; }
.pie__columnas { margin-top: 40px; display: grid; gap: 28px; }
.pie__nav, .pie__contacto { display: grid; align-content: start; gap: 10px; justify-items: start; font-weight: 500; font-size: var(--nota); line-height: 1.4; }
.pie__nav a, .pie__contacto a { color: var(--on-dark); text-decoration: none; }
.pie__nav a:hover, .pie__contacto a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.pie__copy { margin-top: 40px; font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--on-dark-2); }

@media (min-width: 600px) {
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pie__logo { margin-top: 56px; }
  .pie__logo img { height: 64px; }
  .pie__columnas { margin-top: 56px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .pie__copy { margin-top: 56px; }
}

/* ------------------------------------------------------------ entradas */

/* Solo en Así empiezas y Preguntas. */
html.js .entra {
  opacity: 0; translate: 0 12px;
  transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out);
}
html.js .entra[data-escalon="1"] { transition-delay: 60ms; }
html.js .entra[data-escalon="2"] { transition-delay: 120ms; }
html.js .entra[data-escalon="3"] { transition-delay: 180ms; }
html.js .entra.visto { opacity: 1; translate: 0 0; }

/* ------------------------------------------------- reducir movimiento */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .chip, .cierre__boton { transition: background-color 200ms ease, color 200ms ease; }
  .boton:active, .chip:active, .cierre__boton:active { transform: none; }
  .barra { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease; }
  .menu__hoja { transform: none; transition: opacity 180ms ease; }
  .menu--abierto .menu__hoja { transition-duration: 200ms; }
  html.js .heroe__linea { clip-path: none; animation: none; }
  html.js .heroe__frase, html.js .heroe__accion { animation: aparecer 200ms ease forwards; }
  html.js .entra { translate: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .burbuja, .cita { transition: opacity 200ms ease; }
  .escribiendo span { animation: none; opacity: 0.7; }
  /* Héroe vivo: avisos fijos (a y b, sin bucle desde sitio.js), sin retirada. */
  .aviso { transition: opacity 200ms ease; }
  .heroe__foto img, .heroe__sombra, .heroe__titulo, .mitad__foto img { animation: none; }
  /* La escena son 4 bloques quietos; el dock y las pantallas no transicionan. */
  .dock__lista--activa, .progreso__hora, .tramo { transition: none; }
}

/* ------------------------------------------- reducir transparencia */

@media (prefers-reduced-transparency: reduce) {
  .barra, .aviso { background: var(--barra-oscura-solida); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barra--pegada.barra--clara { background: var(--barra-clara-solida); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barra--pegada.barra--oscura { background: var(--barra-oscura-solida); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__hoja { background: var(--fondo-vidrio); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock { background: var(--ap-dock-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==================================================================================================
 * Páginas secundarias (2-nov-2026) · `docs/pipeline/sitio-web/03-paginas-secundarias.md`.
 * /clientes/, los puentes /abrir/ y /agenda/, /t/ y las legales. Todo lo de arriba es de la portada
 * y no se toca; aquí solo se añade. Las clases nuevas no chocan con las de la portada (`.cuerpo`,
 * `.pie`, `.fila`, `.chip`, `.aviso` siguen siendo suyas).
 * ================================================================================================ */

:root {
  --peligro: #7D2825;
  --peligro-suave: #F9E3E1;
  --blanco: #FFFFFF;                           /* los campos de /t/ (S5: campos blancos) */
  /* El acento de la ficha de quien invita (/agenda/). `abrir-en-la-app.js` lo sobreescribe en línea
     con el color elegido por el negocio (regla 3b): solo tiñe el sello, nunca los controles. */
  --ficha-profundo: var(--negro);
  --ficha-vivo: var(--amanecer);
  --ficha-tinte: var(--plata);
  --titulo-legal: clamp(40px, 5.56vw, 80px);   /* S6: Fraunces 80 en escritorio */
  --titulo-plan: clamp(40px, 5.56vw, 80px);    /* p0HFRZ: el nombre del plan, Fraunces 80 */
  --titulo-t: clamp(40px, 3.9vw, 56px);        /* S5: el negocio, 40/56 */
  --resumen: clamp(24px, 1.95vw, 28px);        /* S6: la cita, Fraunces 24/28 */
  --estrella: 48px;
}

/* ---------------------------------------------------------- piezas comunes */

/* La barra en una página interior: sin menú ni acciones; arriba del todo va transparente (sobre
   Océano o sobre el Negro del encabezado) y al pegarse toma el cristal del capítulo. */
.barra--pagina:not(.barra--pegada) {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.barra--pagina .barra__fila { justify-content: flex-start; }

/* Un campo que llena la pantalla (los puentes). */
.campo--pantalla { min-height: 100svh; display: flex; flex-direction: column; }

/* Titular de display en líneas (S3). */
.titular-d {
  font-family: var(--fraunces); font-weight: 600;
  font-size: var(--display); line-height: 0.92; letter-spacing: -0.025em;
}
.titular-d .linea { display: block; }

/* Pie mínimo: logo claro, legales y «sin cookies». */
.pie--minimo { padding: 40px 0; }
.pie--minimo .ancho { display: flex; flex-direction: column; gap: 24px; }
.pie-minimo__logo { display: inline-block; align-self: flex-start; border-radius: 6px; }
.pie-minimo__logo img { height: 26px; width: auto; }
.pie-minimo__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 500; font-size: var(--nota); line-height: 1.4; }
.pie-minimo__nav a { color: var(--on-dark); text-decoration: none; }
.pie-minimo__nota { font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--on-dark-2); }
.pie-minimo__notas { display: grid; gap: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pie-minimo__nav a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
}
@media (min-width: 1024px) {
  .pie--minimo { padding: 48px 0; }
  .pie--minimo .ancho { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .pie-minimo__logo img { height: 32px; }
}

/* Botones que faltaban. */
.boton[disabled], .boton:disabled { background: var(--plata); color: var(--ink-2); cursor: default; transform: none; }
.boton--contorno { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.boton--cristal {
  background: var(--cristal-fondo); color: var(--ink);
  border: 1px solid var(--cristal-canto); box-shadow: var(--cristal-sombra);
}
.boton-texto {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font-weight: 700; font-size: var(--nota); line-height: 1.2; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 2px;
  transition: color 200ms ease;
}
.boton-texto[disabled] { color: var(--on-dark-2); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .boton--contorno:hover { background: var(--fondo-vidrio); }
  .boton--cristal:hover { background: var(--barra-clara-solida); }
  .boton-texto:not([disabled]):hover { color: var(--ink); }
}

/* Campos de texto (S5): blancos, 60 de alto, letra 18, filete de 1 en ink-2, radio 20. */
.campo-texto, .campo-tel {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 0 20px;
  background: var(--blanco); color: var(--ink);
  border: 1px solid var(--ink-2); border-radius: var(--radio);
  font-family: var(--manrope); font-weight: 400; font-size: 18px; line-height: 1.4;
  transition: box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.campo-texto::placeholder { color: var(--ink-2); opacity: 1; }
textarea.campo-texto { min-height: 110px; padding: 16px 20px; resize: vertical; display: block; }
.campo-texto:focus-visible, .campo-tel:focus-within { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.campo-tel { padding-right: 0; }
.campo-tel span { font-weight: 700; flex: 0 0 auto; }
.campo-tel i { width: 1px; height: 24px; background: var(--ink-2); flex: 0 0 auto; }
.campo-tel input {
  flex: 1 1 auto; min-width: 0; height: 58px; border: 0; background: none; padding: 0 20px 0 0;
  font: inherit; color: inherit; outline: none;
}
.campo-tel input::placeholder { color: var(--ink-2); opacity: 1; }
.permiso { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); cursor: pointer; }
.permiso input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--negro); }
.permiso a { color: var(--ink); font-weight: 700; }
.error {
  padding: 14px 18px; border-radius: var(--radio-fila);
  background: var(--peligro-suave); color: var(--peligro);
  font-weight: 700; font-size: var(--nota); line-height: 1.4;
}

/* Chips de tienda («· próximamente»): Plata, 13/700, radio 999; no se tocan. */
.tiendas { display: flex; flex-wrap: wrap; gap: 10px; }
.tiendas--apiladas { flex-direction: column; align-items: flex-start; }
.tienda {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--plata); color: var(--ink);
  font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap;
}

/* --------------------------------------------------------------- /clientes/ */

.heroe-c { padding: calc(var(--barra-alto) + 40px) 0 var(--relleno); }
.heroe-c__frase { margin-top: 24px; font-size: var(--cuerpo); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.lugar { margin-top: 40px; padding: 20px 20px 10px; width: 100%; max-width: 420px; }
.lugar__titulo { font-weight: 700; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); padding-bottom: 6px; }
.lugar .fila { align-items: center; gap: 14px; font-size: 17px; }
.lugar__n { flex: 0 0 24px; font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.lugar .fila__izq { flex: 1 1 auto; }
.lugar .fila--tu .fila__der { color: var(--ink); }

.ventajas__foto { border-radius: var(--radio); overflow: hidden; height: 360px; }
.ventajas__foto img { width: 100%; height: 100%; object-fit: cover; }
.ventajas__lista { margin-top: 40px; display: grid; gap: 28px; }
.ventaja__nombre { font-weight: 700; font-size: var(--sub); line-height: 1.15; }
.ventaja__texto { margin-top: 6px; font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--on-dark); text-wrap: pretty; }

.descarga__nota { margin-top: 24px; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.descarga .tiendas { margin-top: 28px; }

@media (min-width: 1024px) {
  .heroe-c { padding-top: calc(var(--barra-alto) + 72px); }
  .heroe-c__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .heroe-c__texto { grid-column: 1 / 8; }
  .lugar { grid-column: 8 / 13; margin-top: 0; max-width: none; }
  .ventajas__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .ventajas__foto { grid-column: 1 / 7; height: 520px; }
  .ventajas__lista { grid-column: 8 / 13; margin-top: 0; gap: 36px; }
  .descarga .ancho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .descarga .titulo { grid-column: 1 / 8; }
  .descarga .tiendas { grid-column: 8 / 13; margin-top: 0; }
  .descarga__nota { grid-column: 8 / 13; margin-top: 20px; }
}

/* -------------------------------------------------------- puentes /abrir/ /agenda/ */

.puente { padding: 20px var(--margen) 40px; }
.puente__logo { display: inline-block; border-radius: 6px; margin-top: calc(var(--barra-alto) - 64px + 12px); }
.puente__logo img { height: 26px; width: auto; }
.puente__bajo { margin-top: auto; padding-top: 48px; max-width: 560px; }
.puente__titulo { font-family: var(--fraunces); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.puente__bajada { margin-top: 16px; font-size: var(--cuerpo); line-height: 1.5; text-wrap: pretty; }
.puente__accion { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
/* La espera real (`ESPERA` en abrir-en-la-app.js): 4 px que se llenan en 1500 ms lineales. */
.puente__espera { height: 4px; border-radius: 2px; overflow: hidden; background: var(--cristal-fondo); transition: opacity 200ms ease; }
.puente__espera i { display: block; height: 100%; background: var(--negro); transform-origin: 0 50%; transform: scaleX(0); animation: espera 1500ms linear forwards; }
@keyframes espera { to { transform: scaleX(1); } }
body.sin-app .puente__espera { opacity: 0; }
body.sin-app .puente__abrir {
  background: var(--cristal-fondo); color: var(--ink);
  border: 1px solid var(--cristal-canto); box-shadow: var(--cristal-sombra);
}
.sin-app-tarjeta { margin-top: 12px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sin-app-tarjeta__titulo { font-weight: 700; font-size: var(--sub); line-height: 1.15; }
.sin-app-tarjeta__texto { font-size: var(--cuerpo); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sin-app-tarjeta .boton { width: 100%; }
.sin-app-tarjeta .enlace { margin-top: 4px; }
/* El sello con la inicial de quien invita (/agenda/), en el color de su ficha. */
.sello {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ficha-profundo); color: var(--on-dark);
  font-family: var(--fraunces); font-weight: 600; font-size: 30px; line-height: 1;
  margin-bottom: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  .sin-app-tarjeta { transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out); }
  @starting-style { .sin-app-tarjeta:not([hidden]) { opacity: 0; translate: 0 12px; } }
}
@media (min-width: 1024px) {
  .puente { padding: 24px var(--margen) 64px; }
  .puente__logo img { height: 32px; }
  .puente__accion { align-items: flex-start; }
  .puente__espera { width: 100%; }
  .sin-app-tarjeta { width: 100%; }
}

/* ------------------------------------------------------------------ /t/ */

.t { min-height: 100svh; display: flex; flex-direction: column; background: var(--oceano); color: var(--ink); }
.t__cabecera { padding: 20px var(--margen) 0; }
.t__logo { display: inline-block; border-radius: 6px; }
.t__logo img { height: 26px; width: auto; }
.t__quien { padding: 32px var(--margen) 28px; }
.t__negocio { font-family: var(--fraunces); font-weight: 600; font-size: var(--titulo-t); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.t__sucursal { margin-top: 10px; font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }
.t__conquien { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin-top: 16px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.2; }
.t__columna { display: flex; flex-direction: column; flex: 1 1 auto; }
.panel {
  flex: 1 1 auto;
  padding: 32px var(--margen) 40px;
  background: var(--papel); color: var(--ink);
  border-radius: 28px 28px 0 0;
  display: flex; flex-direction: column; gap: 20px;
}
.panel--centrado { align-items: center; justify-content: center; text-align: center; }
.panel__titulo { font-family: var(--fraunces); font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.panel__titulo:focus { outline: none; }
.panel__bajada { font-size: var(--cuerpo); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.panel__nota { font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }
.panel .boton { width: 100%; }
.panel label { display: block; }

/* Las estrellas: `placa.js` las crea como botones con «★» y la clase `puesta`. Ni Fraunces ni
   Manrope traen ese glifo, así que el texto se apaga y la estrella se dibuja con una máscara:
   vacía con trazo de 1.5 en ink-2, puesta rellena de Negro. */
.estrellas { display: flex; justify-content: flex-start; gap: 8px; padding: 4px 0; }
.estrellas button {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: var(--estrella); height: var(--estrella); font-size: 0; line-height: 0; color: transparent;
  border-radius: 12px;
  transition: transform 120ms var(--ease-out);
}
.estrellas button::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.75' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.75' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.estrellas button.puesta::before {
  background: var(--negro);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='0.75' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='0.75' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
.estrellas button:active { transform: scale(0.92); }
/* Las estrellas dejadas (texto «★★★»): sin glifo propio, en el sistema, Negro. */
.estrellas-dejadas { font-size: 24px; line-height: 1; letter-spacing: 4px; color: var(--negro); }

.t__google { display: flex; flex-direction: column; gap: 12px; }
.t__google-titulo { font-weight: 700; font-size: var(--cuerpo); line-height: 1.3; }
.confirmar-tarjeta { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.confirmar-tarjeta__titulo { font-weight: 700; font-size: var(--sub); line-height: 1.15; }
.confirmar-tarjeta .panel__bajada { font-size: var(--nota); }
.confirmar-tarjeta a { color: var(--ink); font-weight: 700; }

/* Seis casillas de cristal de 56 con radio 16; el campo real va encima, invisible. */
.casillas { position: relative; }
.cajitas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cajitas i {
  display: flex; align-items: center; justify-content: center; height: 56px;
  background: var(--cristal-fondo); border: 1px solid var(--cristal-canto); border-radius: 16px; box-shadow: var(--cristal-sombra);
  font-style: normal; font-family: var(--fraunces); font-weight: 600; font-size: 26px; color: var(--ink);
  transition: box-shadow 160ms var(--ease-out);
}
.casillas input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  font-size: 16px; border: 0; padding: 0; color: transparent; caret-color: transparent;
}
.casillas.enfocado .cajitas i.actual { box-shadow: inset 0 0 0 2px var(--negro); }
.acciones { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 500; font-size: var(--nota); color: var(--ink-2); }
.acciones .punto { color: var(--on-dark-2); }

@media (prefers-reduced-motion: no-preference) {
  .panel { transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out); }
  @starting-style { .panel:not([hidden]) { opacity: 0; translate: 0 8px; } }
  /* La ola: 0.85 → 1 en 180 ms, 25 ms entre una y otra. Solo al aparecer: después de la primera
     estrella puesta, `placa.js` redibuja los botones a cada toque y la ola no debe repetirse. */
  .estrellas:not(:has(.puesta)) button { animation: ola 180ms var(--ease-out) both; }
  .estrellas button:nth-child(2) { animation-delay: 25ms; }
  .estrellas button:nth-child(3) { animation-delay: 50ms; }
  .estrellas button:nth-child(4) { animation-delay: 75ms; }
  .estrellas button:nth-child(5) { animation-delay: 100ms; }
}
@keyframes ola { from { transform: scale(0.85); opacity: 0; } }

@media (min-width: 600px) {
  .t { padding: 24px 16px 48px; }
  .t__columna { width: 100%; max-width: 560px; margin-inline: auto; flex: 0 1 auto; }
  .t__cabecera { max-width: 560px; margin-inline: auto; width: 100%; padding: 0 0 8px; }
  .t__logo img { height: 32px; }
  .t__quien { padding: 24px 0 24px; }
  .panel { flex: 0 1 auto; padding: 40px; border-radius: var(--radio); box-shadow: var(--cristal-sombra); }
  .panel--centrado { min-height: 320px; }
}

/* ---------------------------------------------------------------- legales */

.legal__cabecera { padding: calc(var(--barra-alto) + 28px) 0 var(--relleno); }
.legal__titulo { font-family: var(--fraunces); font-weight: 600; font-size: var(--titulo-legal); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; max-width: 12em; }
.legal__version { margin-top: 20px; font-weight: 500; font-size: var(--nota); line-height: 1.4; color: var(--on-dark-2); }

.legal { padding: 40px 0 var(--relleno); }
.indice summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none;
  background: var(--cristal-fondo); border: 1px solid var(--cristal-canto); border-radius: var(--radio); box-shadow: var(--cristal-sombra);
  font-weight: 700; font-size: var(--nota); line-height: 1.2;
}
.indice summary::-webkit-details-marker { display: none; }
.indice summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-2); transition: transform 200ms var(--ease-out); }
.indice[open] summary svg { transform: rotate(180deg); }
.indice__lista { display: grid; gap: 4px; padding: 12px 8px 4px; }
.indice__lista a {
  display: block; padding: 8px 12px; border-radius: 12px;
  font-weight: 500; font-size: var(--nota); line-height: 1.35; color: var(--ink-2); text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.indice__lista a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.indice--escritorio { display: none; }
.indice__rotulo { padding: 0 12px 8px; font-weight: 700; font-size: var(--nota); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .indice__lista a:hover { color: var(--ink); background: var(--fondo-vidrio); }
}

.legal__texto { margin-top: 32px; max-width: 680px; }
.legal__texto .sec, .legal__texto > section { display: flex; flex-direction: column; gap: 18px; }
.legal__texto .sec + .sec, .legal__texto > section + section, .legal__texto .responsable { margin-top: 56px; }
.legal__texto h2 {
  display: flex; align-items: baseline; gap: 16px;
  font-weight: 700; font-size: var(--sub); line-height: 1.15; text-wrap: balance;
}
.legal__texto h2 .sec__n { flex: 0 0 auto; font-weight: 700; font-size: var(--sub); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legal__texto h3 { margin-top: 12px; font-weight: 700; font-size: var(--cuerpo); line-height: 1.3; }
.legal__texto .resumen {
  font-family: var(--fraunces); font-weight: 600; font-size: var(--resumen); line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: pretty; hanging-punctuation: first;
}
.legal__texto p, .legal__texto li, .legal__texto address { font-size: var(--cuerpo); line-height: 1.6; text-wrap: pretty; }
.legal__texto ul, .legal__texto ol { display: grid; gap: 10px; padding-left: 1.2em; }
.legal__texto ul { list-style: disc; }
.legal__texto ol { list-style: decimal; }
.legal__texto a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 2px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.volver-indice { align-self: flex-start; font-weight: 700; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); text-decoration-thickness: 2px; }
.responsable { padding: 28px; border-radius: var(--radio); background: var(--fondo-vidrio); display: flex; flex-direction: column; gap: 14px; }
.responsable h2 { font-size: var(--sub); }

.tabla-caja { border-radius: var(--radio); background: var(--fondo-vidrio); overflow: hidden; }
.tabla-caja table { width: 100%; border-collapse: collapse; font-size: var(--nota); line-height: 1.45; }
.tabla-caja caption { text-align: left; padding: 18px 20px 6px; font-weight: 700; font-size: var(--nota); line-height: 1.4; color: var(--ink-2); }
.tabla-caja th, .tabla-caja td { text-align: left; vertical-align: top; padding: 12px 20px; }
.tabla-caja th { font-weight: 700; font-size: var(--nota); color: var(--ink-2); }
.tabla-caja tbody tr + tr td { box-shadow: inset 0 1px 0 var(--plata); }
.tabla-caja td { font-weight: 500; }
@media (max-width: 767px) {
  .tabla-caja thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-caja tr { display: block; padding: 10px 0; }
  .tabla-caja tbody tr + tr { box-shadow: inset 0 1px 0 var(--plata); }
  .tabla-caja tbody tr + tr td { box-shadow: none; }
  .tabla-caja td { display: block; padding: 4px 20px; }
  .tabla-caja td:empty { display: none; }
  .tabla-caja td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-weight: 700; font-size: 13px; color: var(--ink-2); margin-bottom: 2px; }
}

@media (min-width: 1024px) {
  .legal__version { margin-top: 28px; }
  .legal { padding: 64px 0 var(--relleno); }
  .legal__rejilla { display: grid; grid-template-columns: 260px minmax(0, 680px); column-gap: 104px; align-items: start; }
  .indice--movil { display: none; }
  .legal__rejilla > aside { align-self: stretch; }
  .indice--escritorio { display: block; position: sticky; top: calc(var(--barra-alto) + 24px); }
  .indice--escritorio .indice__lista { padding: 0; }
  .legal__texto { margin-top: 0; }
  .legal__texto .sec + .sec, .legal__texto > section + section, .legal__texto .responsable { margin-top: 72px; }
  .tabla-caja table { font-size: var(--nota); }
}

/* ------------------------------------------- reducir movimiento (secundarias) */

@media (prefers-reduced-motion: reduce) {
  .puente__espera { display: none; }
  .sin-app-tarjeta { transition: opacity 200ms ease; }
  @starting-style { .sin-app-tarjeta:not([hidden]) { opacity: 0; } }
  .panel { transition: opacity 200ms ease; }
  @starting-style { .panel:not([hidden]) { opacity: 0; } }
  .estrellas button { animation: none; transition: none; }
  .estrellas button:active { transform: none; }
  .indice summary svg { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .boton--cristal, body.sin-app .puente__abrir, .cajitas i { background: var(--barra-clara-solida); }
}

/* Precios · Mensual: «al mes por sucursal» va al lado de la cifra, en su línea base (canvas D2pYC). */
.plan--mensual .plan__precio { flex-direction: row; align-items: flex-end; column-gap: 12px; }
.plan--mensual .plan__unidad { margin-top: 0; max-width: 8em; padding-bottom: 0.5em; line-height: 1.3; }