/* ==========================================================================
   Voice Grocery — hoja de estilo única
   Acento: el verde del icono de la app. Fondos crema y salvia, tomados
   del degradado de la propia app. Verde claro solo para lo confirmado.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- color -------------------------------------------------------- */
  --ink:        #1b2018;
  --ink-2:      #46503f;
  --muted:      #737d6c;
  --rule:       #e2e4d2;
  --paper:      #faf8ec;   /* crema de la app */
  --surface:    #ffffff;
  --surface-2:  #eef2df;   /* salvia de la app */

  /* Verde de la marca, tomado del micrófono del icono. Dos tonos: el vivo
     es decorativo y sirve de hover, el profundo es el que puede llevar o
     recibir texto. --sobre-acento es el color del texto encima del acento. */
  --acento:      #3a7049;
  --acento-ink:  #2c5839;
  --acento-soft: #e9f1e8;
  --sobre-acento: #ffffff;

  --done:       #2f7d4f;   /* marcado, incluido, hecho */
  --done-soft:  #e7f2e6;

  /* --- tipografía --------------------------------------------------- */
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* escala fluida */
  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.1rem,  0.9rem + 0.6vw,  1.3rem);
  --t-xl:   clamp(1.4rem,  1.1rem + 1.2vw,  1.9rem);
  --t-2xl:  clamp(1.9rem,  1.4rem + 2.2vw,  2.9rem);
  --t-3xl:  clamp(2.4rem,  1.6rem + 3.6vw,  4.2rem);

  /* --- espacio ------------------------------------------------------ */
  --ancho:  72rem;
  --lectura: 40rem;
  --seccion: clamp(4rem, 9vw, 7.5rem);
  --radio: 14px;

  /* El tic de las listas, como máscara: así toma el color de quien lo use
     y no hay que repetir el SVG por cada elemento. */
  --tic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5 6 12l-3.5-3.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #eaeae4;
    --ink-2:     #b8bdb0;
    --muted:     #8d9386;
    --rule:      #2e3230;
    --paper:     #101210;
    --surface:   #191c19;
    --surface-2: #202420;

    --acento:      #85c99b;
    --acento-ink:  #6ab97f;
    --acento-soft: #182a1d;
    --sobre-acento: #0e140f;

    --done:      #5cc47f;
    --done-soft: #14251a;
  }
}

/* El interruptor de tema del usuario gana sobre la preferencia del sistema. */
:root[data-theme="dark"] {
  --ink:#eaeae4; --ink-2:#b8bdb0; --muted:#8d9386; --rule:#2e3230;
  --paper:#101210; --surface:#191c19; --surface-2:#202420;
  --acento:#85c99b; --acento-ink:#6ab97f; --acento-soft:#182a1d; --sobre-acento:#0e140f;
  --done:#5cc47f; --done-soft:#14251a;
}
:root[data-theme="light"] {
  --ink:#1b2018; --ink-2:#46503f; --muted:#737d6c; --rule:#e2e4d2;
  --paper:#faf8ec; --surface:#ffffff; --surface-2:#eef2df;
  --acento:#3a7049; --acento-ink:#2c5839; --acento-soft:#e9f1e8; --sobre-acento:#ffffff;
  --done:#2f7d4f; --done-soft:#e7f2e6;
}

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

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

/* Un `display` explícito en una clase gana al atributo hidden, así que
   lo reforzamos aquí una sola vez. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--t-3xl); font-weight: 700; }
h2 { font-size: var(--t-2xl); font-weight: 700; }
h3 { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; }
p  { margin: 0; text-wrap: pretty; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }
.centrado   { max-width: var(--lectura); margin-inline: auto; text-align: center; }

section { padding-block: var(--seccion); }

/* etiqueta pequeña en versalitas, para eyebrows */
.etiqueta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.punto {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--acento); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .punto { animation: latido 2.4s ease-in-out infinite; }
  @keyframes latido { 0%,100% { opacity:1 } 50% { opacity:.3 } }
}

.entradilla { font-size: var(--t-lg); color: var(--ink-2); }

/* ----------------------------------------------------------- cabecera --- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.cabecera[data-desplazada="si"] { border-bottom-color: var(--rule); }

.cabecera .contenedor {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.75rem;
}

.marca {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 680; letter-spacing: -0.02em; font-size: 1.05rem;
  text-decoration: none; margin-right: auto;
}
.marca img { width: 56px; height: 56px; border-radius: 13px; }

.nav { display: none; gap: 1.75rem; font-size: var(--t-sm); }
@media (min-width: 52rem) { .nav { display: flex; } }
.nav a { color: var(--ink-2); text-decoration: none; transition: color .15s; }
.nav a:hover { color: var(--ink); }

/* selector de idioma */
.idiomas { position: relative; }
.idiomas > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-sm); color: var(--ink-2);
  padding: 0.4rem 0.6rem; border-radius: 8px;
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary:hover { background: var(--surface-2); color: var(--ink); }
.idiomas-lista {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 0.35rem; min-width: 11rem;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
  display: flex; flex-direction: column;
}
.lang-opt {
  padding: 0.5rem 0.7rem; border-radius: 7px;
  font-size: var(--t-sm); text-decoration: none; color: var(--ink-2);
}
.lang-opt:hover { background: var(--surface-2); color: var(--ink); }
.lang-opt.is-activa { color: var(--acento-ink); font-weight: 600; }

.tema {
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  padding: 0.45rem; border-radius: 8px; display: inline-flex;
}
.tema:hover { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .tema-luna, .tema-luna { display: none; }
:root[data-theme="dark"] .tema-sol { display: block; }
@media (prefers-color-scheme: dark) {
  .tema-luna { display: none; } .tema-sol { display: block; }
}
@media (prefers-color-scheme: light) {
  .tema-sol { display: none; } .tema-luna { display: block; }
}
:root[data-theme="light"] .tema-sol { display: none; }
:root[data-theme="light"] .tema-luna { display: block; }

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

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 10px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .15s, border-color .15s;
}
.boton:active { transform: translateY(1px); }
.boton-acento  { background: var(--acento-ink); color: var(--sobre-acento); }
.boton-acento:hover { background: var(--acento); }
.boton-sec  { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.boton-sec:hover { border-color: var(--muted); }

/* insignias de tienda */
.tiendas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.tiendas a { display: block; transition: transform .15s ease, opacity .15s; }
.tiendas a:hover { transform: translateY(-2px); }
.tiendas img { height: 3.1rem; width: auto; }

/* ------------------------------------------------------------------ hero */

/* Padding inferior corto: la sección siguiente aporta el suyo, así que con
   el completo se abría un hueco muerto y con cero quedaba ahogado. */
.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .acento { color: var(--acento-ink); }
/* Márgenes cortos a propósito: en un móvil de 667 px los botones de tienda
   se quedaban justo debajo del pliegue, y ese es el único clic que importa
   en esta página. Con esto entran sin hacer scroll. */
.hero .entradilla { max-width: 34rem; margin-bottom: 1.5rem; }
.hero .tiendas { margin-bottom: 1.1rem; }
.hero-nota { font-size: var(--t-xs); color: var(--muted); }

/* Las tres señales bajo los botones. Son hechos comprobables, no adorno:
   mientras la app no tenga valoraciones, es la única prueba honesta que hay. */
.hero-confianza {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem;
  font-size: var(--t-xs); color: var(--ink-2);
}
.hero-confianza li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-confianza li::before {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem;
  background: var(--acento-ink);
  -webkit-mask: var(--tic) center / contain no-repeat;
          mask: var(--tic) center / contain no-repeat;
}

.hero-rejilla { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
/* Los hijos de un grid tienen min-width:auto, así que el tamaño intrínseco
   del vídeo (1280 px) ensancharía la columna y desbordaría en móvil. */
.hero-rejilla > * { min-width: 0; }
@media (min-width: 60rem) {
  .hero-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.hero .etiqueta { margin-bottom: 1.25rem; }

/* --- el vídeo con subtítulos encima --- */
.video-marco {
  position: relative; border-radius: var(--radio); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.4);
}
.video-marco video, .video-marco img.cartel { width: 100%; height: 100%; object-fit: cover; }
.video-marco.es-cuadrado { aspect-ratio: 1 / 1; }

/* Placeholder borroso incrustado (unas 400 bytes cada uno): pinta al instante
   con el HTML, así nunca hay un hueco vacío mientras carga el cartel y, tras
   él, el vídeo. Se escala desde 20 px de ancho, de ahí el desenfoque. */
.video-marco[data-lqip="hero"] {
  background-image: url("data:image/jpeg;base64,/9j//gAQTGF2YzYyLjExLjEwMAD/2wBDAAgYGBwYHCEhISEhISckJygoKCcnJycoKCgrKyszMzMrKysoKCsrMDAzMzc5NzQ0MzQ5OTw8PEhIRUVUVFdnZ3z/xABpAAACAwEBAAAAAAAAAAAAAAADBQQBBwYCAQEBAAAAAAAAAAAAAAAAAAADBBAAAQMEAAYCAwEAAAAAAAAAAQIRAAMhBBIxIjKh0VFh8HKBQXERAQADAQEAAAAAAAAAAAAAAAABETESIf/AABEIABQAFAMBIgACEQADEQD/2gAMAwEAAhEDEQA/AGuXUCb016qJu4YEtb/YTHXTr4oqqJCulTD+vfheZtm1VDJZnCQLM4vxl4RqU1VU30VzBwWLHsYXPkHtrSFapZIDfuSN1fHeJkKOoh9j9A8QKNbjcqmDzOoH4MHQBShY2VzKvf1J+T0yLR6T+USMDOnwDAXMJf2e3iUOAnqTmf/Z");
  background-size: cover;
  background-position: center;
}
.video-marco[data-lqip="supermercado"] {
  background-image: url("data:image/jpeg;base64,/9j//gAQTGF2YzYyLjExLjEwMAD/2wBDAAgYGBwYHCEhISEhISckJygoKCcnJycoKCgrKyszMzMrKysoKCsrMDAzMzc5NzQ0MzQ5OTw8PEhIRUVUVFdnZ3z/xAB5AAEAAwEBAAAAAAAAAAAAAAADBAIBBQYBAQEBAQAAAAAAAAAAAAAAAAMEAAEQAAECBAEKBAcBAAAAAAAAAAECABEDIRIxcdGRBBNBUlGBsRRCIySCoZNjM2Jh8BEAAgEFAQEBAAAAAAAAAAAAAQBxEZIyIQITElH/wAARCAAUABQDASIAAhEAAxEA/9oADAMBAAIRAxEAPwCyETTcIpSR5YJrkyupCpZQFRWo/aiMd5gNIfG8TaQpZShJgQIE4f7k1VN2tomUtNKxiNxqAOmDHYC1XpLvuoiX0CR3qw9TgRoRmcInVzioD+GTmoz9txp+kczh9D+dWlb5i4Ia7LTshTBSfmYObPECz138XxI7tp+LuOIl5xkYL56zkVDIXtn7L0uS9eq0ACg0H//Z");
  background-size: cover;
  background-position: center;
}
.video-marco[data-lqip="compartir"] {
  background-image: url("data:image/jpeg;base64,/9j//gAQTGF2YzYyLjExLjEwMAD/2wBDAAgYGBwYHCEhISEhISckJygoKCcnJycoKCgrKyszMzMrKysoKCsrMDAzMzc5NzQ0MzQ5OTw8PEhIRUVUVFdnZ3z/xABwAAADAQEAAAAAAAAAAAAAAAAGBAcFAwEBAQEBAAAAAAAAAAAAAAAABQQBAhAAAgAEAwUFCQEAAAAAAAAAAQIRAwAhEgQxQVETgbFS0ZFhBTMUInKhgnEyYlMRAQEBAQAAAAAAAAAAAAAAAAABESH/wAARCAAUABQDASIAAhEAAxEA/9oADAMBAAIRAxEAPwDS4uBzGIDHZv52pOf6gs6Y0vDCwwkn9oG9tlcJrtLu2Ej5Qb7r6dKmcxXxMzBlMcQ/m2g51LJqi8UxJ00L8KLDzJprjz+yniaVTKIwiJkzzuNYCOymfc1/0meI7q41oj4aEQgIR6UE5hElM0EU2OojVB3c6BM7q34ND0tCuVmM8vETCLGwhCtqLdo/TuocyXsfubrRFSg9/9k=");
  background-size: cover;
  background-position: center;
}
.video-marco[data-lqip="widget"] {
  background-image: url("data:image/jpeg;base64,/9j//gAQTGF2YzYyLjExLjEwMAD/2wBDAAgsLDQsNDw8PDw8PEdCR0pKSkdHR0dKSkpPT09dXV1PT09KSk9PWFhdXWVoZWBgXWBoaG5uboSEfn6amp+9veT/xABsAAACAwEBAQAAAAAAAAAAAAABBQYCAAQDBwEBAQEBAAAAAAAAAAAAAAAABAUAAxAAAgECAgsBAQAAAAAAAAAAAAECIQNSERMEEhQi0ZHBoXFBYVERAQEBAQEBAAAAAAAAAAAAAAABETEhAv/AABEIABIAFAMBIgACEQADEQD/2gAMAwEAAhEDEQA/AGasynVNLqX3W5iXnkPNXk3B54uxNUa31xx8k2WqfwrkCdzil7Zx6X8LGjI0CLdasB5x+haR88pqYJhae//Z");
  background-size: cover;
  background-position: center;
}
/* El vídeo del hero es cuadrado: se limita para que no empuje el hero
   hasta ocupar toda la pantalla en portátiles. */
.video-marco.hero-video { max-width: 30rem; margin-inline: auto; }

/* El widget se grabó apaisado, con aire a los lados: 1000x864. */
.video-marco.widget-video { aspect-ratio: 1000 / 864; max-width: 30rem; }

/* --- de la lista de papel a la app --- */
/* Reutiliza el reparto del hero, pero con una ilustración y un h2: en la
   página solo puede haber un h1, el del hero. */
.foto-lista {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--rule);
}
.foto-lista h2 { margin-bottom: 1.1rem; }
.foto-lista h2 .acento { color: var(--acento-ink); }
.foto-lista .entradilla { margin-bottom: 1rem; }
/* La ilustración es apaisada y ya trae su propio margen dibujado. */
.foto-marco { aspect-ratio: 820 / 520; }
.foto-svg {
  width: 100%; height: 100%; display: block;
  --fa-fondo:    var(--surface-2);
  --fa-hoja:     var(--surface);
  --fa-linea:    var(--rule);
  --fa-tinta:    var(--ink);
  --fa-marco:    var(--acento-ink);
  --fa-pantalla: var(--surface);
}

/* Sección de compartir: el vídeo cuadrado a un lado, el texto al otro. */
.compartir-rejilla { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.compartir-rejilla > * { min-width: 0; }
@media (min-width: 56rem) {
  .compartir-rejilla { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .compartir-rejilla.es-invertida { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}
/* En móvil el vídeo va siempre arriba, aunque en el HTML vaya después. */
@media (max-width: 55.99rem) {
  .compartir-rejilla.es-invertida > figure { order: -1; }
}

/* Banner de subtítulos: una banda sólida que sube desde el borde inferior.
   Fondo opaco en vez de degradado para que el texto se lea sobre cualquier
   fotograma, sea claro u oscuro. */
.subtitulo {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.15rem 1.4rem;
  background: rgb(16 19 21 / 0.92);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--acento);
  color: #fff;
  font-size: clamp(1.15rem, 0.7rem + 1.9vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.25;
  text-align: center; text-wrap: balance;
  pointer-events: none;
  opacity: 0; transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.subtitulo[data-visible="si"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .subtitulo { transform: none; }
}

/* Play manual: aparece siempre que el vídeo esté parado, sea porque el
   navegador bloqueó el autoplay o porque el sistema pide menos movimiento. */
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(16 19 21 / 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 0.25); color: #fff;
  cursor: pointer; padding-inline-start: 4px;
  transition: opacity .2s, transform .15s, background-color .2s;
}
.video-play:hover { background: var(--acento); border-color: transparent; transform: scale(1.06); }
.video-marco[data-reproduciendo="si"] .video-play { opacity: 0; pointer-events: none; }

.video-sonido {
  position: absolute; top: 0.8rem; inset-inline-end: 0.8rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgb(0 0 0 / 0.45); border: 0; cursor: pointer;
  color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.video-sonido:hover { background: rgb(0 0 0 / 0.65); }

/* --------------------------------------------------------- funciones --- */

.rejilla-funciones {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.funcion {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radio); padding: 1.6rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
/* Las dos funciones que venden la app ocupan el doble y llevan el acento. */
.funcion.destacada { background: var(--acento-soft); border-color: transparent; }
@media (min-width: 52rem) { .funcion.destacada { grid-column: span 2; } }
.funcion.destacada .funcion-icono { background: var(--acento-ink); color: var(--sobre-acento); }

.funcion-icono {
  width: 2.5rem; height: 2.5rem; border-radius: 9px;
  background: var(--surface-2); color: var(--ink);
  display: grid; place-items: center; margin-bottom: 0.35rem;
}
.funcion p { color: var(--ink-2); font-size: var(--t-sm); }
.funcion .premium {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: auto; padding-top: 0.5rem;
}

/* ---------------------------------------------------- tira de capturas -- */

.tira {
  margin-top: 3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Se difumina en los bordes para insinuar que la tira sigue. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.tira::-webkit-scrollbar { display: none; }
.tira:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

.tira-pista {
  display: flex;
  gap: 1.5rem;
  /* Los laterales alinean la primera captura con el contenedor y dejan
     respirar a la última. */
  padding: 0.5rem max(1.5rem, calc((100vw - var(--ancho)) / 2 + 1.5rem)) 1rem;
  width: max-content;
}

.toma {
  margin: 0;
  scroll-snap-align: center;
  width: 15rem;
  flex: none;
}
@media (min-width: 48rem) { .toma { width: 17rem; } }

.toma img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: 0 20px 45px -22px rgb(0 0 0 / 0.45);
}
.toma figcaption { padding: 1.15rem 0.25rem 0; }
.toma h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.toma p { font-size: var(--t-sm); color: var(--ink-2); }

.tira-pista-texto {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-top: 1.5rem;
}
@media (min-width: 64rem) { .tira-pista-texto { display: none; } }

/* ----------------------------------------------------------- precios --- */

.planes {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  max-width: 46rem; margin-inline: auto;
}
.plan {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radio); padding: 1.9rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.plan.recomendado { border-color: var(--acento); position: relative; }
.plan-cinta {
  position: absolute; top: -0.7rem; inset-inline-start: 1.7rem;
  background: var(--acento-ink); color: var(--sobre-acento);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 5px;
}
.plan-precio { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; }
.plan-precio small { font-size: var(--t-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.plan li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.plan li svg { flex: none; margin-top: 0.28rem; color: var(--done); }

/* -------------------------------------------------------------- FAQ ---- */

.faq { max-width: var(--lectura); margin-inline: auto; margin-top: 2.5rem; }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 0.35rem; top: 1.5rem;
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding-bottom: 1.2rem; color: var(--ink-2); font-size: var(--t-sm); }

/* ---------------------------------------------------------- idiomas ---- */

.fichas-idioma { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin-top: 2rem; }
.ficha-idioma {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 100px; padding: 0.4rem 0.95rem;
  font-size: var(--t-sm); color: var(--ink-2);
}

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

.pie { border-top: 1px solid var(--rule); padding-block: 3.5rem 2.5rem; }
.pie-rejilla {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pie h4 {
  margin: 0 0 0.9rem; font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pie a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.pie a:hover { color: var(--ink); }
.pie-legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--muted);
}

/* ------------------------------------------------- barra fija en móvil -- */
/* Tarjeta flotante, no una barra pegada al borde: icono, nombre y píldora.
   Se separa de los lados para que se lea como un objeto sobre la página. */

.barra-movil {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateY(130%);
  transition: transform .32s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.barra-movil[data-visible="si"] { transform: none; }
@media (min-width: 52rem) { .barra-movil { display: none; } }

/* La tarjeta es fija, así que hay que reservarle sitio: sin esto tapa el
   final del pie y los enlaces de privacidad y términos quedan debajo.
   El selector de hermano lo limita a las páginas que llevan banner — las
   legales y la de contacto no lo tienen y no deben ganar ese hueco. */
@media (max-width: 51.99rem) {
  .barra-movil ~ .pie { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}

.barra-tarjeta {
  pointer-events: auto;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgb(24 20 40 / 0.22),
              0 2px 6px -2px rgb(24 20 40 / 0.12);
}
.barra-tarjeta:active { transform: scale(0.99); }

.barra-icono { width: 3.15rem; height: 3.15rem; border-radius: 14px; flex: none; }

.barra-texto { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.barra-texto strong {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-texto small {
  font-size: 0.85rem; color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.barra-cta {
  flex: none;
  background: var(--acento-ink); color: var(--sobre-acento);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  padding: 0.72rem 1.35rem; border-radius: 100px;
  white-space: nowrap;
}
.barra-tarjeta:hover .barra-cta { background: var(--acento); }

/* --------------------------------------------------------- contenido --- */
/* páginas legales y de soporte: una columna de lectura cómoda */

.prosa { max-width: var(--lectura); margin-inline: auto; }
.prosa h2 { font-size: var(--t-xl); margin-top: 2.75rem; margin-bottom: 0.75rem; }
.prosa h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prosa p, .prosa li { color: var(--ink-2); }
.prosa p { margin-bottom: 1rem; }
.prosa ul { padding-inline-start: 1.2rem; margin-bottom: 1rem; }
.prosa li { margin-bottom: 0.4rem; }
.prosa a { color: var(--acento-ink); }

/* ------------------------------------------------------------ formulario */

.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 9px; padding: 0.7rem 0.85rem; width: 100%;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent;
}

/* ------------------------------------------------------------- utilidad */

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}