/* TruVaBo · sitio público (18-oct-2026).
   Fondo claro fijo (crema de la marca), fotos del estado Trujillo que se desvanecen hacia el fondo,
   el verde solo en las acciones. Las pantallas de la app van en oscuro, como en el teléfono. */

:root {
  color-scheme: light;
  --fondo: #FAF7F2;        /* crema arepa */
  --papel: #FFFFFF;        /* blanco nube */
  --tinta: #1F2A27;        /* carbón montaña */
  --suave: #4E5A56;
  --verde: #2E6B5E;        /* verde páramo: SOLO acciones */
  --verde-fuerte: #245A4E;
  --terracota: #A65035;    /* acento de la marca: las sílabas Tru, Va, Bo */

  /* la app (fragmentos data-ui) en su modo oscuro */
  --app-fondo: #121816; --app-tarjeta: #1A2220; --app-campo: #1F4F45; --app-texto: #E3EBE7; --app-suave: #BFC9C5;
  --app-menta: #A6DCCB; --app-menta-tinta: #0F3B32; --app-marron: #6E3420; --app-borde: #3A4744;

  --letra: "Nunito", "Segoe UI", system-ui, sans-serif;
  --t-chica: 0.9375rem;                                    /* 15 px */
  --t-cuerpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17–19 px */
  --t-guia: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);       /* 22–28 px */
  --t-titulo: clamp(2.125rem, 1.2rem + 2.6vw, 3.75rem);     /* 34–60 px */
  --t-grande: clamp(3rem, 1.6rem + 5vw, 6rem);              /* 48–96 px */

  --margen: clamp(1.25rem, 3vw, 3rem);
  --hueco: clamp(1rem, 2vw, 2rem);
  --radio: 20px;
  --seccion: clamp(5.5rem, 10vw, 10rem);

  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --suavecita: cubic-bezier(0.33, 1, 0.68, 1);
  --t-pulso: 140ms; --t-flota: 180ms; --t-ui: 240ms; --t-aparece: 800ms;

  /* El desvanecido de las fotos (máscaras, no colores): se funden con el fondo por la izquierda, arriba y abajo.
     Pedido por el dueño; la skill de diseño lo marca como degradado. */
  --desvanece-izq: linear-gradient(to right, transparent 0%, #000 34%); /* taste-skill-ignore: máscara de desvanecido pedida */
  --desvanece-arr: linear-gradient(to bottom, transparent 0%, #000 16%); /* taste-skill-ignore: máscara de desvanecido pedida */
  --desvanece-aba: linear-gradient(to top, transparent 0%, #000 24%); /* taste-skill-ignore: máscara de desvanecido pedida */
  --desvanece-der: linear-gradient(to left, transparent 0%, #000 34%); /* taste-skill-ignore: máscara de desvanecido pedida */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--letra); font-size: var(--t-cuerpo); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 1.5rem; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
p { text-wrap: pretty; max-width: 58ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--verde); color: #fff; font-weight: 800; font-size: 1.0625rem; text-decoration: none; border: 2px solid var(--verde); transition: transform var(--t-pulso) var(--salida), background-color var(--t-flota) ease, color var(--t-flota) ease; }
.boton:active { transform: scale(0.97); }
.boton.borde { background: transparent; color: var(--verde); }
.enlace { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-flota) ease; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--verde-fuerte); border-color: var(--verde-fuerte); color: #fff; }
  .enlace:hover { text-decoration-color: currentColor; }
}

/* Foto que se desvanece hacia el fondo (izquierda, arriba y abajo). */
.desvanece {
  -webkit-mask-image: var(--desvanece-izq), var(--desvanece-arr), var(--desvanece-aba);
  mask-image: var(--desvanece-izq), var(--desvanece-arr), var(--desvanece-aba);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
}

/* ---------- barra ---------- */
.barra { position: relative; z-index: 3; display: flex; align-items: center; gap: 2rem; padding: 18px var(--margen); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; }
.marca img { width: 30px; height: 41px; }
.barra .enlaces { margin-left: auto; display: flex; gap: 1.75rem; font-size: var(--t-chica); font-weight: 700; }
.barra .boton { min-height: 46px; padding: 0 22px; font-size: 1rem; }

/* ---------- portada ---------- */
.portada { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.portada-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portada-texto { position: relative; z-index: 2; margin: auto 0; padding: 2rem var(--margen) 5rem; width: min(50%, 46rem); }
.portada h1 { font-size: clamp(2.125rem, 1rem + 3.3vw, 4rem); max-width: 15ch; }
.portada .apoyo { margin-top: 1.5rem; max-width: 40ch; }
.portada .acciones { margin-top: 2.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.portada .nota { color: var(--suave); font-size: var(--t-chica); }
.portada .ciudades { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-weight: 800; font-size: var(--t-guia); letter-spacing: -0.01em; }
.portada .ciudades a { text-decoration: none; transition: color var(--t-flota) ease; }
.portada .ciudades b { color: var(--terracota); }
@media (hover: hover) and (pointer: fine) { .portada .ciudades a:hover { color: var(--verde); } }
.pie-foto { position: absolute; z-index: 2; right: var(--margen); bottom: 20px; font-size: var(--t-chica); color: var(--suave); }

/* ---------- cómo funciona: lectura + escenario fijo ---------- */
.escena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); padding: var(--seccion) var(--margen) 0; align-items: start; }
.lectura { min-width: 0; padding-right: clamp(0rem, 3vw, 3rem); }
.lectura h2 { font-size: var(--t-titulo); max-width: 14ch; }
.pasos { margin-top: 1rem; }
.paso { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; max-width: 32ch; }
.paso:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 2.5rem; }
.paso .enunciado { font-size: var(--t-guia); font-weight: 800; line-height: 1.15; color: var(--suave); transition: color var(--t-ui) ease; }
.paso p + p { margin-top: 0.75rem; color: var(--suave); transition: color var(--t-ui) ease; }
.paso.is-active .enunciado, .paso.is-active p + p { color: var(--tinta); }

.vitrina { padding-top: clamp(4rem, 12vh, 9rem); padding-bottom: 30vh; }
.nombres { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.2em; }
.nombres button { display: block; text-align: left; font-size: var(--t-guia); font-weight: 800; line-height: 1.2; color: var(--suave); padding: 0.15em 0; transition: color var(--t-ui) ease, transform var(--t-pulso) var(--salida); }
.nombres button:active { transform: scale(0.985); transform-origin: left center; }
.nombres button[aria-pressed="true"] { color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .nombres button:hover { color: var(--tinta); } .nombres button[aria-pressed="true"]:hover { color: var(--verde); } }
.pantalla-movil { display: none; }
.vitrina .pie-vitrina { margin-top: 2rem; color: var(--suave); font-size: var(--t-chica); max-width: 42ch; }

.escenario { position: sticky; top: var(--margen); height: calc(100svh - 2 * var(--margen)); border-radius: var(--radio); overflow: hidden; background: #3B4A3F; }
.fondo-difuso { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; object-fit: cover; filter: blur(26px) saturate(1.15) brightness(0.8); }
.capa { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 600ms var(--salida); }
.capa.is-on { opacity: 1; z-index: 2; }
.capa[hidden] { display: none; }
.capa-fragmento:not(.is-on) { visibility: hidden; transition: none; }
.capa-fragmento, .capa-vitrina { display: grid; place-items: center; }
.capa-vitrina img.pantalla { position: absolute; left: 50%; top: 50%; height: min(760px, calc(100% - 64px)); width: auto; aspect-ratio: 720 / 1560; transform: translate(-50%, -50%); border-radius: 28px; opacity: 0; transition: opacity 220ms ease; background: var(--app-fondo); }
.capa-vitrina img.pantalla.is-on { opacity: 1; }

/* ---------- seguridad: título fijo a la izquierda, protecciones a la derecha ---------- */
.seguridad { margin-top: var(--seccion); background: var(--papel); padding: var(--seccion) var(--margen); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.seguridad .titulo { grid-column: 1 / 5; position: sticky; top: 14vh; align-self: start; }
.seguridad h2 { font-size: var(--t-titulo); max-width: 11ch; }
.seguridad .titulo p { margin-top: 1.25rem; max-width: 34ch; }
.modulos { grid-column: 6 / 13; display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5rem); }
.modulo { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.modulo .panel { width: 360px; border-radius: var(--radio); overflow: hidden; background: var(--app-fondo); }
.modulo .panel img { width: 360px; }
.modulo h3 { font-size: var(--t-cuerpo); line-height: 1.3; letter-spacing: -0.01em; }
.modulo p { margin-top: 0.6rem; }
@media (max-width: 1240px) { .modulo { grid-template-columns: 1fr; } }

/* ---------- el estado: tres ciudades ---------- */
.region { padding-top: var(--seccion); }
.region-intro { padding: 0 var(--margen); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: end; }
.region-intro h2 { grid-column: 1 / 7; font-size: var(--t-titulo); max-width: 12ch; }
.region-intro p { grid-column: 7 / 12; font-size: var(--t-guia); line-height: 1.35; font-weight: 700; }
.region-intro p b { color: var(--terracota); font-weight: 800; }
.ciudad { position: relative; min-height: 80svh; margin-top: clamp(2rem, 5vw, 4rem); display: flex; align-items: center; overflow: hidden; }
.ciudad .foto { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
.ciudad .foto img { width: 100%; height: 100%; object-fit: cover; }
.ciudad .texto { position: relative; z-index: 1; padding: 3rem var(--margen); width: min(44%, 40rem); }
.ciudad h3 { font-size: var(--t-grande); line-height: 0.95; letter-spacing: -0.035em; }
.ciudad .lema { margin-top: 1rem; font-size: var(--t-guia); line-height: 1.3; font-weight: 700; max-width: 24ch; }
.ciudad .rotulo { margin-top: 2rem; font-weight: 800; }
.ciudad .lugares { margin-top: 0.5rem; columns: 2; column-gap: 2rem; }
.ciudad .lugares li { break-inside: avoid; padding: 0.15rem 0; }
.ciudad .boton { margin-top: 2rem; }
.ciudad .credito { position: absolute; z-index: 1; right: var(--margen); bottom: 14px; font-size: var(--t-chica); color: var(--suave); }
/* Fila al revés: la foto a la izquierda y se desvanece hacia la derecha. */
.ciudad.izquierda .foto { right: auto; left: 0; }
.ciudad.izquierda .foto.desvanece { -webkit-mask-image: var(--desvanece-der), var(--desvanece-arr), var(--desvanece-aba); mask-image: var(--desvanece-der), var(--desvanece-arr), var(--desvanece-aba); }
.ciudad.izquierda .texto { margin-left: auto; }
.ciudad.izquierda .credito { right: auto; left: var(--margen); }

/* ---------- cierre: La Puerta de fondo, la primera pantalla de la app ya abierta ---------- */
.cierre { position: relative; margin-top: var(--seccion); min-height: 92svh; color: #fff; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); padding: 56px var(--margen); align-items: end; overflow: hidden; background: #26312D; }
.cierre .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cierre .velo { position: absolute; inset: 0; background: rgba(10, 16, 14, 0.56); }
.cierre .palabras { position: relative; z-index: 1; grid-column: 1 / 7; align-self: end; }
.cierre h2 { font-size: var(--t-grande); line-height: 0.95; letter-spacing: -0.035em; max-width: 10ch; }
.cierre .palabras p { margin-top: 1.25rem; max-width: 40ch; }
.cierre .dialogo-sitio { position: relative; z-index: 1; grid-column: 8 / 13; align-self: center; justify-self: end; }
.cierre .pie-foto { color: #E3EBE7; bottom: 16px; }

/* ---------- preguntas como texto corrido ---------- */
.preguntas { padding: var(--seccion) var(--margen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.preguntas h2 { grid-column: 1 / 4; font-size: var(--t-titulo); }
.preguntas .texto { grid-column: 5 / 13; columns: 2; column-gap: 56px; }
.preguntas .texto p { break-inside: avoid; margin: 0 0 22px; }
.preguntas .texto b { font-weight: 800; }

/* ---------- pie ---------- */
.pie { padding: 26svh var(--margen) 30px; }
.pie .franja { height: 12px; border-radius: 999px; overflow: hidden; margin-bottom: 2.25rem; }
.pie .franja svg { width: 100%; height: 100%; }
.pie .linea { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; font-size: var(--t-chica); }
.pie .linea .centro { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.pie .linea .derecha { text-align: right; }
.pie .linea span { color: var(--suave); }
.pie .linea a { font-weight: 700; }
.pie .creditos { margin-top: 1.5rem; font-size: var(--t-chica); line-height: 1.55; max-width: 64ch; }

/* ---------- fragmentos de la app (data-ui): sus propias convenciones ---------- */
[data-ui] { width: 360px; max-width: 100%; background: var(--app-fondo); color: var(--app-texto); border-radius: 28px; padding: 20px; font-family: var(--letra); font-size: 15px; line-height: 1.35; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
[data-ui] * { box-sizing: border-box; }
[data-ui] .cab { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
[data-ui] .cab small { display: block; font-size: 15px; font-weight: 400; color: var(--app-suave); margin-top: 4px; letter-spacing: 0; }
[data-ui] .etq { font-size: 15px; font-weight: 700; margin: 14px 0 8px; }
[data-ui] .pildoras { display: flex; gap: 8px; }
[data-ui] .pildoras button { flex: 1; min-height: 44px; border-radius: 16px; border: 1.5px solid var(--app-borde); background: transparent; color: var(--app-texto); font-weight: 700; transition: background-color var(--t-flota) ease, transform var(--t-pulso) var(--salida); }
[data-ui] .pildoras button:active { transform: scale(0.97); }
[data-ui] .pildoras button[aria-pressed="true"] { background: var(--app-marron); border-color: var(--app-marron); color: #fff; }
[data-ui] .pildoras.ciudades button[aria-pressed="true"] { background: var(--app-campo); border-color: var(--app-campo); color: #CDEBE1; }
[data-ui] select { width: 100%; min-height: 48px; border-radius: 16px; border: 1.5px solid var(--app-borde); background: var(--app-tarjeta); color: var(--app-texto); padding: 0 40px 0 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23BFC9C5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[data-ui] .accion { width: 100%; min-height: 52px; border-radius: 999px; background: var(--app-menta); color: var(--app-menta-tinta); font-weight: 800; font-size: 15px; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform var(--t-pulso) var(--salida), background-color var(--t-flota) ease; }
[data-ui] .accion:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { [data-ui] .accion:hover { background: #B9E6D8; } }
[data-ui] .tarjeta { background: var(--app-tarjeta); border-radius: 20px; padding: 14px 16px; }
[data-ui] .tarjeta + .tarjeta { margin-top: 10px; }
[data-ui] .fila { display: flex; justify-content: space-between; gap: 12px; }
[data-ui] .fila span:first-child { color: var(--app-suave); }
[data-ui] .fila + .fila { margin-top: 6px; }
[data-ui] .oferta { text-align: center; background: var(--app-campo); border-radius: 20px; padding: 14px 16px; margin-top: 12px; }
[data-ui] .oferta .mas-menos { display: flex; align-items: center; justify-content: center; gap: 16px; }
[data-ui] .oferta .mas-menos button { width: 44px; height: 44px; border-radius: 50%; background: var(--app-marron); color: #fff; font-size: 24px; font-weight: 800; line-height: 1; transition: transform var(--t-pulso) var(--salida); }
[data-ui] .oferta .mas-menos button:active { transform: scale(0.92); }
[data-ui] .oferta .mas-menos button:disabled { opacity: 0.45; }
[data-ui] .oferta .usd { font-size: 23px; font-weight: 800; color: #CDEBE1; line-height: 1.1; }
[data-ui] .oferta .bs { color: #CDEBE1; font-size: 15px; }
[data-ui] .oferta .minimo { margin-top: 8px; font-size: 13px; color: #CDEBE1; }
[data-ui] .nota-noche { margin-top: 8px; font-size: 13px; color: var(--app-suave); }
[data-ui] .banda { background: var(--app-campo); border-radius: 20px; padding: 12px 16px; color: #CDEBE1; }
[data-ui] .banda b { display: block; font-size: 15px; }
[data-ui] .conductor { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
[data-ui] .conductor .nombre { font-weight: 800; }
[data-ui] .conductor .estrellas { color: #F2C14E; font-size: 13px; }
[data-ui] .conductor .carro { grid-column: 1 / -1; color: var(--app-suave); }
[data-ui] .conductor .llega { grid-column: 1 / -1; }
[data-ui] .conductor .acepta { grid-column: 1 / -1; margin-top: 6px; min-height: 44px; border-radius: 999px; background: var(--app-menta); color: var(--app-menta-tinta); font-weight: 800; transition: transform var(--t-pulso) var(--salida); }
[data-ui] .conductor .acepta:active { transform: scale(0.97); }
[data-ui] .pin { margin-top: 12px; text-align: center; background: var(--app-campo); border-radius: 20px; padding: 14px; color: #CDEBE1; }
[data-ui] .pin .digitos { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
[data-ui] .pin .digitos span { width: 48px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--app-tarjeta); font-size: 23px; font-weight: 800; color: #CDEBE1; }
[data-ui] .pin small { display: block; font-size: 13px; }
[data-ui] .estado { display: none; }
[data-ui][data-estado="1"] .estado-1, [data-ui][data-estado="2"] .estado-2, [data-ui][data-estado="3"] .estado-3 { display: block; }
[data-ui] .opciones { display: grid; gap: 10px; }
[data-ui] .opciones label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; background: var(--app-tarjeta); border: 1.5px solid transparent; border-radius: 20px; padding: 12px 16px; cursor: pointer; transition: border-color var(--t-flota) ease, transform var(--t-pulso) var(--salida); }
[data-ui] .opciones label:active { transform: scale(0.98); }
[data-ui] .opciones label:has(input:checked) { border-color: var(--app-menta); }
[data-ui] .opciones label small { grid-column: 1; color: var(--app-suave); font-size: 13px; }
[data-ui] .opciones input { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; accent-color: var(--app-menta); margin: 0; }
[data-ui] .despues { margin-top: 14px; color: var(--app-suave); min-height: 3.6em; }

/* ---------- pruébala: el único lugar de descarga ---------- */
.portada a.nota { text-decoration: underline; text-decoration-color: rgba(78, 90, 86, 0.35); text-underline-offset: 4px; transition: color var(--t-flota) ease; }
@media (hover: hover) and (pointer: fine) { .portada a.nota:hover { color: var(--verde); } }

.probar { padding: var(--seccion) var(--margen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; }
.probar-cabeza { grid-column: 1 / 6; }
.probar .sello { display: inline-block; margin-bottom: 1.25rem; padding: 6px 14px; border-radius: 999px; background: #F3E3DC; color: var(--terracota); font-size: var(--t-chica); font-weight: 800; }
.probar h2 { font-size: var(--t-titulo); max-width: 12ch; }
.probar .ficha { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--suave); font-size: var(--t-chica); font-weight: 700; }
.probar .ficha li { padding: 5px 13px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px #ECE6DC; }
.probar .ficha b { color: var(--tinta); font-weight: 800; }
.probar-accion { margin-top: 2rem; }
.boton.grande { min-height: 64px; padding: 0 34px; font-size: 1.1875rem; box-shadow: 0 10px 24px -12px rgba(46, 107, 94, 0.55); }
.boton.grande svg { transition: transform var(--t-ui) var(--salida); }
@media (hover: hover) and (pointer: fine) { .boton.grande:hover svg { transform: translateY(3px); } }
.probar .siempre { margin-top: 0.9rem; color: var(--suave); font-size: var(--t-chica); max-width: 40ch; }
.probar .qr { margin-top: 2.25rem; display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: var(--radio); background: var(--papel); width: fit-content; max-width: 30rem; box-shadow: 0 1px 0 rgba(31, 42, 39, 0.06); }
.probar .qr img { width: 112px; height: 112px; flex: none; border-radius: 10px; }
.probar .qr figcaption { color: var(--suave); font-size: var(--t-chica); line-height: 1.45; max-width: 26ch; }

.instalar { grid-column: 7 / 13; display: grid; gap: 0.5rem; padding-top: 0.5rem; }
.instalar li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 1.4rem 0; border-top: 1px solid #E8E2D8; }
.instalar li:first-child { border-top: 0; padding-top: 0; }
.instalar .num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #E1EEE9; color: var(--verde-fuerte); font-weight: 800; font-size: 1.25rem; }
.instalar b { display: block; font-size: var(--t-guia); line-height: 1.15; letter-spacing: -0.015em; }
.instalar p { margin-top: 0.4rem; color: var(--suave); }

.cuentas { grid-column: 1 / 13; margin-top: clamp(3.5rem, 6vw, 5.5rem); padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: 28px; background: var(--papel); }
.cuentas h3, .novedades h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.cuentas > p { margin-top: 0.75rem; color: var(--suave); max-width: 70ch; }
.cuentas-lista { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
.cuentas-lista li { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--radio); background: var(--fondo); }
.cuentas-lista .rol { font-size: var(--t-chica); font-weight: 800; color: var(--terracota); }
.cuentas-lista b { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); letter-spacing: -0.01em; }
.cuentas-lista span:last-child { color: var(--suave); font-size: var(--t-chica); }
.cuentas .aviso { margin-top: 1.5rem; color: var(--suave); font-size: var(--t-chica); }

.para-tiendas { grid-column: 1 / 13; margin-top: clamp(3.5rem, 6vw, 5.5rem); padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: 28px; background: #1F2A27; color: #F3EFE7; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--hueco); align-items: center; }
.para-tiendas h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); max-width: 22ch; }
.para-tiendas p { margin-top: 0.75rem; color: #C9D2CE; }
.para-tiendas-botones { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.para-tiendas .boton.borde { color: #F3EFE7; border-color: #F3EFE7; }
.para-tiendas .siempre { color: #AEB8B4; text-align: center; }
@media (hover: hover) and (pointer: fine) { .para-tiendas .boton.borde:hover { background: #F3EFE7; color: #1F2A27; } }
@media (max-width: 900px) { .para-tiendas { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; border-radius: 24px; } }
.novedades { grid-column: 1 / 13; margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.novedades ul { margin-top: 1.5rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem var(--hueco); }
.novedades li { padding-top: 1rem; border-top: 2px solid var(--tinta); color: var(--suave); }
.novedades li b { display: block; color: var(--tinta); font-size: 1.125rem; margin-bottom: 0.25rem; }

@media (max-width: 1100px) {
  .cuentas-lista, .novedades ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .probar { display: block; padding: 4.5rem 20px 0; }
  .probar-accion .boton.grande { width: 100%; }
  .probar .qr { display: none; }
  .instalar { margin-top: 2.5rem; }
  .instalar li { grid-template-columns: 44px 1fr; gap: 14px; }
  .instalar .num { width: 40px; height: 40px; font-size: 1.125rem; }
  .cuentas { padding: 1.5rem 1.25rem; border-radius: 24px; }
  .cuentas-lista, .novedades ul { grid-template-columns: 1fr; gap: 0.75rem; }
  .novedades ul { gap: 1.25rem; }
}

/* ---------- movimiento (solo transform/opacity; sin JS todo se ve) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .portada-foto img { animation: asienta 2400ms var(--suavecita) both; }
  .js [data-sube] { opacity: 0; transform: translateY(18px); animation: sube var(--t-aparece) var(--salida) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .js [data-aparece] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--salida), transform 900ms var(--salida); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-aparece].is-in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .ciudad .foto img, .cierre .fondo { animation: deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes sube { to { opacity: 1; transform: none; } }
@keyframes asienta { from { transform: scale(1.07); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes deriva { from { transform: translateY(-3%) scale(1.07); } to { transform: translateY(3%) scale(1.07); } }

/* ---------- teléfono y tableta ---------- */
@media (max-width: 900px) {
  .portada .barra { order: -1; }
  .barra { gap: 1rem; padding: 14px 20px; }
  .barra .enlaces { display: none; }
  .barra .boton { margin-left: auto; min-height: 44px; padding: 0 18px; }
  .marca { font-size: 1.3rem; }

  .portada { min-height: 0; }
  .portada-foto { position: relative; width: 100%; height: 50svh; }
  .portada-foto img { object-position: 50% 18%; }
  .portada-foto.desvanece { -webkit-mask-image: var(--desvanece-aba); mask-image: var(--desvanece-aba); -webkit-mask-composite: source-over; mask-composite: add; }
  .portada-texto { width: auto; margin: 0; padding: 0.5rem 20px 1rem; }
  .portada .acciones .boton { width: 100%; }
  .portada .ciudades { margin-top: 2rem; }
  .pie-foto { position: static; padding: 0.75rem 20px 0; }

  .escena { display: flex; flex-direction: column; padding: 5rem 20px 0; gap: 0; }
  .lectura { display: contents; }
  .como { order: 1; }
  .escenario { order: 2; position: relative; top: auto; height: auto; margin-top: 1.5rem; padding: 28px 14px; }
  .vitrina { order: 3; padding: 4.5rem 0 0; }
  .capa-fragmento { position: relative; inset: auto; opacity: 1; visibility: visible; display: grid !important; }
  .capa-vitrina { display: none !important; }
  .paso, .paso:first-child { min-height: 0; padding: 1rem 0; max-width: none; }
  .paso .enunciado, .paso p + p { color: var(--tinta); }
  .pantalla-movil { display: block; width: min(100%, 340px); height: auto; margin-top: 1.5rem; border-radius: 24px; background: var(--app-fondo); }

  .seguridad { display: block; padding: 5rem 20px; }
  .seguridad .titulo { position: static; }
  .modulos { margin-top: 2.5rem; }
  .modulo .panel { width: 100%; }
  .modulo .panel img { width: 360px; max-width: none; }

  .region-intro { display: block; padding: 0 20px; }
  .region-intro p { margin-top: 1.25rem; }
  .ciudad { display: block; min-height: 0; margin-top: 3.5rem; }
  .ciudad .foto { position: relative; width: 100%; height: 46svh; }
  .ciudad .foto.desvanece { -webkit-mask-image: var(--desvanece-aba); mask-image: var(--desvanece-aba); -webkit-mask-composite: source-over; mask-composite: add; }
  .ciudad .texto { width: auto; margin-top: -3rem; padding: 0 20px; }
  .ciudad .lugares { columns: 1; }
  .ciudad .boton { width: 100%; }
  .ciudad .credito, .ciudad.izquierda .credito { position: static; padding: 0.75rem 20px 0; }
  .ciudad.izquierda .foto.desvanece { -webkit-mask-image: var(--desvanece-aba); mask-image: var(--desvanece-aba); }

  .cierre { display: block; min-height: 0; padding: 4rem 16px 3.5rem; }
  .cierre .dialogo-sitio { margin-top: 2.5rem; }
  .cierre .dialogo-sitio [data-ui] { width: 100%; }
  .cierre .pie-foto { position: static; padding: 1.5rem 0 0; }

  .preguntas { display: block; padding: 5rem 20px 0; }
  .preguntas .texto { margin-top: 1.5rem; columns: 1; }
  .pie { padding: 16svh 20px 24px; }
  .pie .linea { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .pie .linea .centro { justify-content: flex-start; }
  .pie .linea .derecha { text-align: left; }
}