/* ==========================================================================
   BuyVoice — hoja de estilo única
   Acento: el violeta del icono de la app. Fondos crema y salvia, tomados
   del degradado de la propia app. Verde 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 */

  /* Violeta de la marca, tomado del icono. Dos tonos porque el claro no
     llega a 4.5:1 sobre fondo claro: el vivo es decorativo, el profundo
     es el que puede llevar o recibir texto. */
  --acento:      #7c6ef5;
  --acento-ink:  #5b4bd8;
  --acento-soft: #f3eefd;

  --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;
}

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

    --acento:      #a08ffb;
    --acento-ink:  #b6a8ff;
    --acento-soft: #221c33;

    --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:#a08ffb; --acento-ink:#b6a8ff; --acento-soft:#221c33;
  --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:#7c6ef5; --acento-ink:#5b4bd8; --acento-soft:#f3eefd;
  --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: 4rem;
}

.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: 28px; height: 28px; border-radius: 7px; }

.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: #fff; }
.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); }
.hero .entradilla { max-width: 34rem; margin-bottom: 2rem; }
.hero .tiendas { margin-bottom: 1rem; }
.hero-nota { font-size: var(--t-xs); color: var(--muted); }

.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/2wBDAAgYGBwYHCEhISEhISckJygoKCcnJycoKCgrKyszMzMrKysoKCsrMDAzMzc5NzQ0MzQ5OTw8PEhIRUVUVFdnZ3z/xABpAAEBAQEBAAAAAAAAAAAAAAAFBgIHBAEBAQEBAQAAAAAAAAAAAAAAAwIABQQQAAEEAAMIAwEAAAAAAAAAAAECAAMRUQQTEhQhQpEigTHB0QVBEQEBAQEBAAAAAAAAAAAAAAABACExEf/AABEIABQAFAMBIgACEQADEQD/2gAMAwEAAhEDEQA/AOiQhOjESBZQCe1J4+Q3EpQeRPQfT8mXQBDED/EgNOgGW+y3NM9LpTbIAHaC5reTg2P0inX4nkHy5C0YvpBnW8S7yvjm5YgEiqGIaceakV7ro4+X21YmbULamQmZe0sWarwGfu8eDYLw9Vf/2Q==");
  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ó casi cuadrado: 720x736. */
.video-marco.widget-video { aspect-ratio: 720 / 736; max-width: 26rem; }

/* 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: #fff; }

.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: #fff;
  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; } }

.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: #fff;
  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;
  }
}