/* Caleido Pantallas — estilos de la página web (sección 1)
 *
 * Tesis: la competencia lidera con azul corporativo y usa naranja de acento.
 * Aquí el héroe es teal sobre tinta —la tele encendida en un local en penumbra—
 * y el resto de la página es claro. La franja inferior de la pantalla (la marca
 * del producto) se repite como motivo en toda la página.
 */

/* ---------- Teal legible como texto ----------
   var(--teal) da 4.19:1 sobre blanco — pasa como color de botón/borde (no es
   texto) pero varios sitios de esta hoja SÍ lo usan como color de texto
   (kicker, nombre de plan, pregunta abierta, link de pie al pasar el mouse),
   donde WCAG AA pide 4.5:1 para texto normal. En vez de tocar --teal (cambia
   también botones/bordes en estilos.css, compartido con panel/pantallas) se
   define aquí una variante 15% más oscura, solo para esos usos de texto —
   el mismo verde, casi imperceptible el cambio, ya sobre el mínimo AA. */
:root {
  --teal-texto: color-mix(in srgb, var(--teal) 85%, black);
  /* Mismo problema con var(--aqua) como texto/ícono sobre fondos claros
     (blanco o --neutro): 2.3–2.6:1, muy por debajo incluso del 3:1 que pide
     un ícono/control de UI. 70/30 es la mezcla mínima que ya cruza 4.5:1
     sobre blanco, así que de paso cubre el caso más exigente. */
  --aqua-texto: color-mix(in srgb, var(--aqua) 70%, black);
}

/* ---------- Saltar al contenido ---------- */
/* Enlace de accesibilidad clásico: invisible hasta que se recibe foco por
   teclado, para que quien navega con Tab no tenga que pasar por el aviso +
   toda la barra (5 links + Entrar) en cada carga de página para llegar al
   contenido. Mismo lenguaje de foco (outline aqua) que el resto del sitio. */
.saltar-contenido {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: top .2s ease;
}
.saltar-contenido:focus-visible {
  top: 12px;
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* ---------- Aviso superior ---------- */
/* Inspirado en la franja fija de Netflix sobre su nav: refuerza la oferta
   antes de que la persona llegue al héroe. A propósito NO es sticky —
   se va con el primer scroll, y la barra de abajo es la que se queda. */
.aviso-barra {
  background: linear-gradient(90deg, var(--teal), var(--aqua));
  color: #06231F;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 24px;
}

/* ---------- Kickers ---------- */
/* Etiqueta corta antes de cada h2 de sección, al estilo de los "eyebrows"
   editoriales de Ghost — ayuda a que cada bloque se lea como su propio
   capítulo sin necesitar más texto. Teal sobre fondo claro, aqua sobre los
   remates oscuros (héroe/cierre). */
.kicker {
  display: block;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-texto);
  margin-bottom: 10px;
}
.cierre .kicker { color: var(--aqua); }

/* ---------- Héroe oscuro ---------- */
.hero {
  background:
    radial-gradient(1100px 620px at 84% -12%, rgba(22, 179, 176, .20), transparent 60%),
    radial-gradient(760px 520px at 6% 108%, rgba(14, 140, 113, .16), transparent 62%),
    var(--tinta);
  color: var(--neutro);
  padding: 0 0 clamp(56px, 7vw, 108px);
  /* Red de seguridad para el sangrado de la tele (ver "--tele-sangrado"
     junto a .hero-grid más abajo): ese cálculo ya está pensado para nunca
     desbordar, pero esto cubre el caso límite de navegadores que cuentan
     la barra de scroll vertical dentro de "100vw". */
  overflow-x: hidden;
}
/* La barra vive fuera de .hero a propósito: position:sticky solo se pega
   dentro de la caja de su propio contenedor, así que si se queda anidada
   en el héroe deja de estar pegada apenas se sale de esa sección. Al
   sacarla como <header> independiente, queda pegada durante todo el scroll. */
.barra {
  border-bottom: 1px solid rgba(237, 242, 241, .12);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tinta);
}
.marca-txt { color: #fff; }
/* .barra-der (botón principal + hamburguesa) ya no necesita su propio
   margin-left:auto de estilos.css — .barra-links es ahora lo primero
   después del logo en llevárselo, así ambos grupos quedan pegados entre
   sí en vez de repartirse el espacio libre y abrirse un hueco enorme. */
.barra-der { margin-left: 0; }
.barra-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.barra-link { color: #A9BAC0; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: color .2s ease; }
.barra-link:hover { color: var(--aqua); }
.barra-link:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }

/* El botón hamburguesa y el fondo reutilizan el patrón ya existente del
   cajón móvil del panel (.btn-hamburguesa/.sidebar-fondo en estilos.css,
   ver panel/index.html) — mismo breakpoint (820px), misma mecánica de
   abrir/cerrar, solo con los colores oscuros de esta barra. */
/* 44×44: el tamaño base de estilos.css (40×40, compartido con el sidebar del
   panel) queda un poco corto del mínimo táctil recomendado (44×44 en iOS,
   48×48 en Material) — se ajusta aquí, sin tocar la regla compartida, para
   no afectar el botón del panel. */
.barra .btn-hamburguesa { width: 44px; height: 44px; border-color: rgba(237, 242, 241, .28); }
.barra .btn-hamburguesa:hover { border-color: var(--aqua); }
.barra .icono-hamburguesa span { background: #fff; }
.barra-fondo { display: none; }

/* Scroll suave a las secciones ancladas, sin quedar tapadas por la barra sticky */
html { scroll-behavior: smooth; }
#giros, #paquetes, #quienes-somos, #preguntas { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* La tele es el elemento firma (ver comentario junto a .tele más abajo):
   se le da más peso de columna que al texto — antes 1.15fr/.95fr (más
   ancho al texto) la dejaba angosta y perdida a la derecha; luego .95fr/
   1.35fr (reporte de usuario: "se sigue sintiendo pequeña"). No se ensancha
   .contenedor aquí: la barra sticky de arriba comparte el mismo
   .contenedor a 1060px (fuera de .hero, ver nota junto a .barra), así que
   ensanchar el contenedor completo desalineaba el logo/nav de arriba
   contra el texto de abajo — se ganó tamaño vía proporción de columna
   (esta regla) y, además, dejando que la tele misma sangre hacia la
   derecha en pantallas anchas (ver "--tele-sangrado" más abajo, junto a
   .hero-grid > section:last-child), sin tocar el ancho del contenedor. */
.hero-grid {
  display: grid;
  grid-template-columns: .85fr 1.45fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(44px, 6vw, 76px);
  position: relative;
  z-index: 1;
}
/* Sangrado de la tele más allá de .contenedor (1060px) en pantallas anchas:
   a partir de ese ancho ya hay margen libre sin usar a los lados del
   contenedor — se le cede ese margen a la tele en vez de dejarlo vacío.
   "--tele-sangrado" es 0 en cualquier viewport donde el contenedor ya
   ocupa todo el ancho disponible (max(0px, ...) lo bloquea en negativo),
   así nunca se desborda ni aparece scroll horizontal; el factor .82 deja
   un colchón del 18% del margen libre sin usar, más ancho que cualquier
   barra de scroll vertical que el navegador pueda contar dentro de
   "100vw" — sin ese colchón, un viewport apenas más ancho que 1060px
   podría desbordar por ese margen de error. overflow-x:hidden en .hero es
   una segunda red de seguridad, no la única. */
.hero-grid > section:last-child {
  --tele-sangrado: min(220px, max(0px, (100vw - 1060px) / 2 * .82));
  width: calc(100% + var(--tele-sangrado));
  margin-right: calc(-1 * var(--tele-sangrado));
}
.hero h1 {
  font-size: clamp(2.625rem, 1.85rem + 3.2vw, 4.375rem);
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--aqua); }
.hero .lead {
  font-size: 19px;
  color: #A9BAC0;
  max-width: 40ch;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.hero .fila { gap: 12px; }

/* Entrada orquestada al cargar: el texto primero, la tele justo detrás */
@media (prefers-reduced-motion: no-preference) {
  .hero-grid > section:first-child {
    animation: hero-entra-txt .8s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero-grid > section:last-child {
    animation: hero-entra-tele .9s .12s cubic-bezier(.16, 1, .3, 1) backwards;
  }
}
@keyframes hero-entra-txt {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-entra-tele {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* ---------- Botones: microinteracciones ----------
   Un mismo lenguaje de hover para los tres tipos: leve elevación + glow de
   marca + easing consistente. Solo cambia el color del glow según el botón
   y su fondo (aqua para CTA principal, teal/aqua para los secundarios). */
.btn {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              box-shadow .25s cubic-bezier(.16, 1, .3, 1),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

.btn-aqua { background: var(--aqua); color: #0B1A1F; box-shadow: 0 0 0 0 rgba(22, 179, 176, 0); }
.btn-aqua:hover { background: #13a09d; box-shadow: 0 14px 30px -12px rgba(22, 179, 176, .55); }
.btn-aqua:active { box-shadow: 0 6px 16px -8px rgba(22, 179, 176, .5); }

.btn-fantasma {
  background: transparent;
  color: var(--neutro);
  border: 1.5px solid rgba(237, 242, 241, .28);
}
.btn-fantasma:hover {
  border-color: var(--aqua);
  color: var(--aqua);
  background: rgba(22, 179, 176, .08);
  box-shadow: 0 10px 26px -14px rgba(22, 179, 176, .4);
}

.btn-linea:hover {
  box-shadow: 0 10px 24px -14px rgba(14, 140, 113, .35);
  background: rgba(14, 140, 113, .04);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

.hero-nota { font-size: 13.5px; color: #7E9199; margin-top: 16px; }

/* ---------- La tele: el elemento firma ---------- */
.tele {
  background: #0E1A1F;
  border: 10px solid #24343B;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(22, 179, 176, .18), 0 26px 60px -22px rgba(22, 179, 176, .35);
  overflow: hidden;
  /* Se le mueve el transform en cada frame de scroll (parallax en el JS
     del final del documento); adelantarle al navegador que va a cambiar
     evita que recalcule su capa de composición en cada paso. */
  will-change: transform;
}
.tele-caja { position: relative; aspect-ratio: 16 / 9; background: var(--tinta); }
.tele-slide {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 7px;
  padding: 12px;
  opacity: 0;
  /* El cruce entre slides lo anima esta transición; el <script> del final
     del documento pone opacity en línea sobre cada slide (le gana a
     cualquier regla de aquí) desde un solo reloj que también mueve el
     texto de la franja — ver el comentario de ese script para el porqué. */
  transition: opacity .6s ease;
}
/* Sin JS (o con prefers-reduced-motion, donde el script no llega a tocar
   ningún opacity en línea) esta regla es la que manda: se queda fijo el
   primer slide, ni negro ni roto. */
.tele-slide:first-child { opacity: 1; }
.tj {
  background: var(--teal);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden; /* recorta la foto de fondo a las esquinas redondeadas */
}
.tj.b { background: var(--confianza); }

/* Foto de fondo del anuncio simulado: mismo criterio que .tarjeta.con-img
   del player real (tv.css) — la foto cubre la tarjeta y un recuadro oscuro
   semitransparente detrás del texto mantiene la legibilidad sin perder el
   look de señal digital. Si la foto no carga, .tj-img se remueve (script al
   final del documento) y queda el fondo sólido de arriba de respaldo. */
.tj-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tj-txt { position: relative; z-index: 1; }
.tj.con-img .tj-txt {
  background: rgba(23, 36, 42, .74);
  padding: 7px 9px;
  border-radius: 6px;
}

.tj-t {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  font-size: 15px;
}
.tj-d { color: var(--aqua); font-weight: 600; font-size: 12px; margin-top: 2px; }
.s-solo .tj-t { font-size: 30px; }
.s-solo .tj-d { font-size: 15px; }
.s-grid { flex-wrap: wrap; }
.s-grid .tj { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px); }

/* .s-menu ya hereda position:absolute de .tele-slide (misma regla arriba,
   ambas clases están en el mismo elemento) — no se repite aquí a propósito:
   declararlo de nuevo con la misma especificidad ganaría por orden de
   cascada y lo sacaría del apilado absoluto de los 3 slides, rompiendo el
   cross-fade. Ya es "positioned" y sirve de contenedor para .tj-img/::after. */
.s-menu { flex-direction: column; gap: 0; }
/* El menú usa UNA sola foto de fondo para toda la franja (no una por fila,
   serían 4 recortes muy angostos) + un degradado parejo (no solo abajo,
   como en las demás tarjetas) para que las 4 filas de texto se sigan
   leyendo en toda la altura. */
.s-menu > .tj-img { z-index: 0; }
.s-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 36, 42, .74), rgba(23, 36, 42, .9));
  pointer-events: none;
}
.s-menu .tj {
  background: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(237, 242, 241, .14);
  border-radius: 0;
  position: relative;
  z-index: 2;
}
.s-menu .tj-t { font-size: 14px; }
.s-menu .tj-d { font-size: 14px; margin: 0; }

/* s-destacado: ficha dividida, foto a la izquierda y ficha de texto a la
   derecha — versión miniatura de .lay-destacado en tv.css (el player real).
   Capacidad 1: una promoción grande, no una lista. */
.s-destacado .tj::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 40%, var(--tinta) 78%, var(--tinta));
}
.s-destacado .tj-txt {
  margin-left: auto;
  width: 54%;
  text-align: right;
  position: relative;
  z-index: 2;
}
.s-destacado .tj.con-img .tj-txt { background: transparent; padding: 0; border-radius: 0; }
.s-destacado .tj-t { font-size: 21px; }
.s-destacado .tj-d { font-size: 13px; }

/* s-ranking: lista numerada tipo "top 3" — versión miniatura de .lay-ranking
   en tv.css. Mismo patrón que .s-menu: UNA foto de fondo para todo el
   slide (no una por fila) + degradado parejo para legibilidad, con las
   filas encima usando counter() para el número grande. */
.s-ranking { flex-direction: column; gap: 0; counter-reset: rank; }
.s-ranking > .tj-img { z-index: 0; }
.s-ranking::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 36, 42, .68), rgba(23, 36, 42, .88));
  pointer-events: none;
}
.s-ranking .tj {
  background: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(237, 242, 241, .14);
  border-radius: 0;
  position: relative;
  z-index: 2;
  counter-increment: rank;
}
.s-ranking .tj::before {
  content: counter(rank);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--aqua);
  flex: 0 0 auto;
  min-width: 20px;
  text-align: center;
}
.s-ranking .tj-t { font-size: 13px; }
.s-ranking .tj-d { font-size: 11px; margin-top: 1px; }

/* s-catalogo: 3 columnas fijas, foto arriba + franja de texto abajo —
   versión miniatura de .lay-catalogo en tv.css. A diferencia de
   solo/destacado/grid, la imagen NO es fondo a pantalla completa: ocupa una
   franja fija arriba (por eso se saca de position:absolute solo aquí). */
.s-catalogo .tj {
  flex-direction: column;
  padding: 0;
  justify-content: flex-start;
}
.s-catalogo .tj-img {
  position: static;
  width: 100%;
  height: 56%;
  object-fit: cover;
  flex: 0 0 auto;
}
.s-catalogo .tj-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px;
}
/* Auditoría ui-ux-pro-max (2026-08-14): esta capa quitaba el scrim oscuro
   que sí tienen las demás variantes de .tj.con-img, dejando el texto
   (blanco y aqua) directo sobre el fondo sólido var(--teal)/var(--confianza)
   de respaldo — aqua sobre teal da ~1.6:1 de contraste, invisible en la
   práctica. Se conserva el mismo scrim que ya usan solo/destacado/grid en
   vez de quitarlo, solo sin el radio de esquina (la franja de texto ya no
   tiene foto detrás que recortar). */
.s-catalogo .tj.con-img .tj-txt { background: rgba(23, 36, 42, .74); padding: 6px 8px; border-radius: 0; }
.s-catalogo .tj-t { font-size: 11px; line-height: 1.15; }
.s-catalogo .tj-d { font-size: 9.5px; }

/* La franja: el motivo que se repite en toda la página */
.franja {
  background: var(--neutro);
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.franja .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; }
/* El nombre cambia junto con el slide visible (ver el <script> del final del
   documento) — min-width:0 + ellipsis para que un negocio con nombre largo
   (p. ej. "Ferretería El Tornillo Feliz") nunca empuje "Caleido" fuera de la
   franja; la transición de opacity es lo que el script anima al cambiar de
   texto, para que no se sienta como un salto brusco. */
.franja-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.franja .fin { margin-left: auto; font-weight: 400; color: #57646A; font-size: 11px; flex: 0 0 auto; }

/* ---------- Comparación: hoy vs con Caleido ---------- */
/* Ritmo: las secciones con padding-top:0 (comida del producto) quedan
   agrupadas —un solo salto entre ellas—; las demás usan el padding completo
   arriba y abajo, así que el espacio se siente el doble de generoso. Al
   escalar este valor con clamp(), esa alternancia "apretado / que respira"
   se mantiene en cualquier tamaño de pantalla. */
.seccion { padding: clamp(64px, 8vw, 128px) 0; }
.seccion h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  margin-bottom: 8px;
  text-wrap: balance;
}
.seccion .sub { color: var(--muted); font-size: 17px; margin-bottom: 34px; max-width: 52ch; text-wrap: pretty; }

.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.col-hoy, .col-nos { border-radius: 14px; padding: 26px; }
/* "Hoy" queda deliberadamente apagado: borde sutil, sin sombra, texto que se
   nota secundario. "Con Caleido" lleva el mismo lenguaje de profundidad que
   el héroe y el cierre (glow radial + sombra de marca) para que se sienta
   igual de cuidado que el resto de la página, no solo "la caja verde". */
.col-hoy {
  background: var(--neutro);
  border: 1.5px solid var(--linea);
}
.col-nos {
  /* var(--teal) puro de fondo dejaba el texto claro (blanco o #E4F3EE, ver
     .punto-li abajo) en 3.7–4.2:1 — por debajo del 4.5:1 que pide AA para
     texto normal. Una capa negra al 12% sobre el teal basta para cruzar el
     mínimo sin que el verde dejе de leerse como la marca. */
  background:
    radial-gradient(560px 280px at 100% 0%, rgba(22, 179, 176, .38), transparent 65%),
    linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)),
    var(--teal);
  color: #fff;
  box-shadow: 0 26px 52px -30px rgba(14, 140, 113, .55);
  position: relative;
  overflow: hidden;
}
.col-tit { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 16px; }
.col-hoy .col-tit { color: var(--muted); }
.col-nos .col-tit { color: #fff; position: relative; z-index: 1; }
.punto-li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 15.5px; position: relative; z-index: 1; }
.punto-li:last-child { margin-bottom: 0; }
.mark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; margin-top: 1px;
}
.mark-no { background: #D8DEDC; color: #6B797E; }
.mark-si { background: var(--aqua); color: #0B1A1F; box-shadow: 0 0 0 4px rgba(22, 179, 176, .22); }
.col-nos .punto-li { color: #E4F3EE; }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.paso-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tinta); color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.paso h3 { font-size: 19px; margin-bottom: 5px; }
.paso p { font-size: 14.5px; color: var(--muted); }

/* ---------- Para su negocio: giros ---------- */
/* Carrusel de fotos por columna: mismo lenguaje de cross-fade que
   .prov-carrusel/@keyframes provCiclo (panel/index.html) — adaptado dos
   veces: el @keyframes se
   genera por JS porque el roster de giros crece (ver construirGiros en
   index.html), y aquí van 4 columnas en paralelo en vez de una sola, cada
   una rotando su propio subconjunto del roster. El tratamiento visual de
   cada foto (fondo + degradado de legibilidad) es el mismo que
   .rubro-tarjeta en ejemplos.html — misma metáfora en los tres lugares del
   sitio donde se muestra "un negocio con su foto".*/
.giros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.giro-carrusel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--tinta);
  box-shadow: 0 1px 2px rgba(23, 36, 42, .06);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.giro-carrusel:hover, .giro-carrusel:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -22px rgba(14, 140, 113, .32), 0 0 0 1px rgba(22, 179, 176, .35);
}
/* Mismo lenguaje de foco que el resto del sitio (.barra-link, .btn,
   .pie-nav a): outline sólido de marca, no solo el glow del hover de
   arriba, que es demasiado sutil sobre una foto para servir de indicador
   de foco por sí solo. */
.giro-carrusel:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.giro-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
/* Con un solo giro en la columna no hay nada que rotar — queda fijo. */
.giro-slide.giro-slide-unico { opacity: 1; animation: none; }
.giro-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.giro-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--tinta) 8%, rgba(23, 36, 42, .55) 42%, transparent 72%);
}
.giro-slide-cuerpo { position: relative; z-index: 1; padding: 18px; }
.giro-slide-cuerpo h3 { font-size: 16.5px; color: #fff; margin-bottom: 4px; }
.giro-slide-cuerpo p { font-size: 13px; line-height: 1.35; color: rgba(237, 242, 241, .88); }
/* Pausa al pasar el mouse o al enfocar la columna con teclado (tabIndex la
   vuelve enfocable) — mismo criterio de accesibilidad que .prov-carrusel. */
.giro-carrusel:hover .giro-slide,
.giro-carrusel:focus-within .giro-slide { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .giro-carrusel { transition: none; }
  .giro-slide { animation: none; opacity: 0; }
  .giro-slide:first-child { opacity: 1; }
}

/* ---------- Paquetes ---------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s cubic-bezier(.16, 1, .3, 1),
              border-color .35s cubic-bezier(.16, 1, .3, 1);
}
.plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -24px rgba(23, 36, 42, .32);
  border-color: #C7D4D0;
}
/* El plan recomendado se lee más grande y con un halo propio incluso en
   reposo, no solo al pasar el mouse — así la jerarquía no depende de la
   interacción para notarse. */
.plan-destacado {
  border: 2px solid var(--aqua);
  background: linear-gradient(180deg, rgba(22, 179, 176, .07), transparent 45%) , #fff;
  box-shadow: 0 22px 48px -26px rgba(22, 179, 176, .45);
  transform: scale(1.025);
  z-index: 1;
}
.plan-destacado:hover {
  transform: scale(1.025) translateY(-5px);
  border-color: var(--aqua);
  box-shadow: 0 30px 58px -24px rgba(22, 179, 176, .55);
}
.plan-etiqueta {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--aqua);
  color: #0B1A1F;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(22, 179, 176, .55);
}

@media (prefers-reduced-motion: reduce) {
  .plan, .plan-destacado { transition: none; }
}
/* Nombre del plan como "kicker" (mayúsculas, chico, con tracking) al estilo
   de las etiquetas de categoría en la tabla de precios de Ghost — así el
   precio, no el nombre, es lo primero que se lee en cada tarjeta. */
.plan-nombre {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-texto);
  margin-bottom: 8px;
}
.plan-destacado .plan-nombre { color: var(--aqua-texto); }
.plan-precio { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 36px; color: var(--tinta); margin-bottom: 10px; }
.plan-precio span { font-family: "Figtree", sans-serif; font-weight: 500; font-size: 15px; color: var(--muted); }
.plan-para { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; min-height: 42px; }
.plan-incluye { list-style: none; margin-bottom: 22px; flex: 1; }
.plan-incluye li {
  font-size: 14.5px;
  padding-left: 24px;
  position: relative;
  margin-bottom: 10px;
}
.plan-incluye li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}
.planes-nota { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 28px; }

/* ---------- Quiénes somos ---------- */
.contenedor.contenedor-angosta { max-width: 720px; }
.nosotros p { font-size: 16.5px; color: var(--tinta); margin-bottom: 14px; }
.nosotros p:last-child { margin-bottom: 0; }
.valores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.valor {
  background: var(--neutro);
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
}

/* ---------- Preguntas (FAQ) ---------- */
/* Aplanado al estilo de la lista de FAQ de Netflix: un solo contenedor con
   filas divididas por una línea, en vez de una tarjeta suelta por pregunta.
   Se siente más como una lista de lectura y menos como un montón de cajas. */
.faq {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  padding: 0 22px;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item:hover { background: var(--neutro); }
.faq-item[open] { background: var(--neutro); }
/* La pregunta abierta se queda en teal aunque el mouse ya no esté encima
   (antes dependía de un listón lateral inset — un tell clásico de UI
   generada por IA; el mismo tinte de fondo + texto/ícono en color ya
   comunica "esto está abierto" sin necesitar el borde de acento). */
.faq-item[open] summary { color: var(--teal-texto); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 0;
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item:hover summary { color: var(--teal-texto); }
/* <summary> es un widget interactivo nativo; sin esto cae al outline por
   defecto del navegador, que no sigue el lenguaje de foco del resto del
   sitio (mismo criterio que .btn:focus-visible arriba). */
.faq-item summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: -2px;
  border-radius: 6px;
}
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--teal);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s ease;
}
.faq-item[open] summary::after { transform: rotate(135deg); color: var(--aqua-texto); }
.faq-item p { color: var(--muted); font-size: 14.5px; padding-bottom: 18px; margin-top: -4px; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: color .2s ease; }
}

/* Animación de apertura vía JS (Web Animations API, ver script al final del
   documento). Si JS falla, <details> igual abre/cierra de forma nativa e
   instantánea: la funcionalidad nunca depende de esto. */
.faq-item.faq-anim { overflow: hidden; }

/* ---------- Cierre ---------- */
/* Mismo lenguaje de profundidad que el héroe (glow radial derivado de la
   paleta) para que los dos remates oscuros se lean como un mismo gesto
   intencional, no como una coincidencia. */
.cierre {
  background:
    radial-gradient(900px 480px at 50% 130%, rgba(22, 179, 176, .18), transparent 62%),
    var(--tinta);
  color: var(--neutro);
  padding: clamp(56px, 7vw, 108px) 0;
  text-align: center;
}
.cierre h2 {
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.625rem);
  color: #fff;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cierre p { color: #A9BAC0; font-size: 17px; margin-bottom: 26px; }

.cierre-cta { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* ---------- Scroll-reveal (progressive enhancement) ---------- */
/* Por defecto todo es visible: si el JS no corre, o el navegador no soporta
   IntersectionObserver, o el usuario pide menos movimiento, no se añade
   .js-reveal y estas reglas nunca activan el estado oculto. */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.js-reveal [data-reveal].en-vista {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ---------- Pie ---------- */
.pie-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pie-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pie-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.pie-nav a:hover { color: var(--teal-texto); }
.pie-nav a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; }
  .comparar, .pasos, .planes { grid-template-columns: 1fr; }
  .giros { grid-template-columns: repeat(2, 1fr); }
  .plan-destacado { order: -1; }
  /* El menú de texto ya no cabe en una sola línea a partir de aquí (se
     probó con el truco del iframe angosto): "Caleido Pantallas" y los
     links empiezan a partirse en dos renglones y descuadran la barra.
     Antes esto solo escondía los links sin dar ninguna forma de llegar a
     "Para su negocio"/Paquetes/Quiénes somos/Preguntas desde el header en
     móvil (quedaban solo alcanzables bajando hasta el pie) — se corrigió
     convirtiéndolos en el mismo cajón deslizante que ya usa el panel
     (mismo breakpoint, misma mecánica: ver .sidebar en estilos.css y el
     JS al final de este documento). El logo y el botón principal
     ("Entrar"/"Probar gratis") siguen siempre visibles fuera del cajón. */
  /* Bug encontrado en code-review (2026-08-14): .barra-der cuenta con que
     .barra-links (margin-left:auto en el flex de arriba) empuje a los dos
     juntos contra el borde derecho — pero aquí abajo .barra-links pasa a
     position:fixed y sale por completo del flujo del flex, así que ya no
     hay nada empujando a .barra-der. Sin este margin-left:auto propio,
     .barra-der se queda pegado a la izquierda (junto al logo) con un hueco
     vacío grande a la derecha en todo este rango de ancho. */
  .barra-der { margin-left: auto; }
  .barra-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* misma escala que el panel: fondo 30 < cajón 40 < barra sticky 50 */
    width: min(78vw, 300px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 84px 20px 24px;
    background: var(--tinta);
    border-left: 1px solid rgba(237, 242, 241, .14);
    box-shadow: -8px 0 24px -8px rgba(0, 0, 0, .45);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    overflow-y: auto;
  }
  .barra-links.abierto { transform: translateX(0); }
  .barra-links .barra-link { padding: 11px 6px; border-radius: 8px; }
  .barra-links .barra-link:hover { background: rgba(255, 255, 255, .06); }

  .barra-fondo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(6, 15, 18, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .barra-fondo.visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .barra-links { transition: none; }
  .barra-fondo { transition: none; }
}

@media (max-width: 640px) {
  .giros { grid-template-columns: 1fr; }
}