/* ===========================================================================
   Kofur — la web pública (kofur.cl)

   Viene del prototipo aprobado, docs/web-propuesta/opcion-a/css/kofur.css,
   copiado tal cual salvo dos cosas: sin las anotaciones `.proto` del
   prototipo, y con la sección «Tienda» al final (carrito, checkout, pago),
   que el prototipo no tenía. Respecto de la v2:

   · Los colores dejan de ser valores sueltos y pasan a ser TOKENS, los mismos
     de la app (`frontend/src/theme/kofur-base.css`), con su versión oscura.
     El morado que se pinta (--kofur-primario) y el que se lee
     (--kofur-primario-texto) son dos tokens: en claro valen lo mismo, en
     oscuro no (#5F409D sobre el fondo oscuro da 2,4:1; #B49AEE da 7,9:1).
   · #4B32A8 queda retirado (CLAUDE.md): el cierre y los hover ya no lo usan.
   · La letra es Familjen Grotesk, autoalojada, la de la app. Sin CDN.
   · Tema en tres estados: automático (sin atributo), `data-tema="claro"` y
     `data-tema="oscuro"` en <html>. El atributo lo pone un script en línea en
     el <head>, antes de esta hoja, así que no hay parpadeo.
   =========================================================================== */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/familjen-grotesk-normal-latin.c5d0fcda30d9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/familjen-grotesk-normal-latin-ext.1df2b918923e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens: claro ───────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --kofur-primario: #330099;
  --kofur-primario-presionado: #2A0080;
  --kofur-primario-suave: #F0EBFF;
  --kofur-primario-texto: #330099;
  --kofur-sobre-primario: #FFFFFF;

  --fondo: #FFFFFF;
  --fondo-suave: #FAF8F5;           /* --kofur-fondo de la app */
  --superficie: #FFFFFF;
  --texto: #1B1626;
  --texto-2: #5A5368;               /* 7,6:1 sobre blanco */
  --texto-3: #6F6880;               /* 5,3:1 sobre blanco, 5,0:1 sobre el suave */
  --borde: #E0DAD2;
  --borde-control: #8F867A;         /* 3,6:1: el borde de lo que se toca */
  --exito: #2A7345;
  --ambar-fondo: #FFF4DF;
  --ambar-texto: #6A4300;

  /* La sección de las fotos es una banda morada de marca (toque de la B):
     #330099 en claro, #251B38 en oscuro. Texto blanco en los dos temas.
     Contraste sobre #330099 (y #251B38): blanco 13,1 (16,2) · texto-2 9,4
     (11,8) · texto-3 7,4 (9,4) · enlace 9,7 (12,1). */
  --banda: #330099;
  --banda-texto: #FFFFFF;
  --banda-texto-2: rgba(255, 255, 255, .84);
  --banda-texto-3: rgba(255, 255, 255, .74);
  --banda-borde: rgba(255, 255, 255, .22);
  --banda-enlace: #E2D9FF;

  --barra-fondo: rgba(255, 255, 255, .92);
  --sombra: 0 1px 2px rgba(27, 22, 38, .05), 0 8px 24px rgba(27, 22, 38, .06);
  --suelo: rgba(27, 22, 38, .055);
  --sombra-tel: rgba(24, 16, 64, .30);
  --halo: transparent;

  --radio: 18px;
  --radio-chico: 12px;
  --radio-boton: 27px;
  --sans: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── Tokens: oscuro (sistema, salvo que se haya elegido claro) ────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --kofur-primario: #5F409D;
    --kofur-primario-presionado: #6F4FB0;
    --kofur-primario-suave: #251B38;
    --kofur-primario-texto: #B49AEE;
    --fondo: #141019;
    --fondo-suave: #1A1520;
    --superficie: #1E1926;
    --texto: #F5F2F7;
    --texto-2: #B8B2C4;
    --texto-3: #9A93A8;
    --borde: #2E2838;
    --borde-control: #716A85;
    --exito: #5FBF82;
    --ambar-fondo: #2B2011;
    --ambar-texto: #F7D9A6;
    --banda: #251B38;
    --banda-borde: rgba(255, 255, 255, .16);
    --barra-fondo: rgba(20, 16, 25, .9);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --suelo: rgba(0, 0, 0, .35);
    --sombra-tel: rgba(0, 0, 0, .6);
    --halo: rgba(180, 154, 238, .13);
  }
}

/* ── Tokens: oscuro elegido a mano ───────────────────────────────────────── */

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --kofur-primario: #5F409D;
  --kofur-primario-presionado: #6F4FB0;
  --kofur-primario-suave: #251B38;
  --kofur-primario-texto: #B49AEE;
  --fondo: #141019;
  --fondo-suave: #1A1520;
  --superficie: #1E1926;
  --texto: #F5F2F7;
  --texto-2: #B8B2C4;
  --texto-3: #9A93A8;
  --borde: #2E2838;
  --borde-control: #716A85;
  --exito: #5FBF82;
  --ambar-fondo: #2B2011;
  --ambar-texto: #F7D9A6;
  --banda: #251B38;
  --banda-borde: rgba(255, 255, 255, .16);
  --barra-fondo: rgba(20, 16, 25, .9);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --suelo: rgba(0, 0, 0, .35);
  --sombra-tel: rgba(0, 0, 0, .6);
  --halo: rgba(180, 154, 238, .13);
}

/* ── Base ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--fondo); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16.5px;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kofur-primario-texto); outline-offset: 2px; border-radius: 4px; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Escala de titulares (toque de la B): H1 42 px en un teléfono de 390 y 84 px
   en escritorio; H2 34 px y 56 px. Crece en línea recta entre 390 y 1440 px
   de ancho y no baja de 40/32 px a 360. */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(40px, 4vw + 26.4px, 84px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: clamp(32px, 2.1vw + 25.8px, 56px); line-height: 1.05; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
p { text-wrap: pretty; }

section[id], [id].ancla { scroll-margin-top: 78px; }

.seccion { padding: 76px 0; }
.seccion--suave { background: var(--fondo-suave); }
.seccion__titulo { max-width: 660px; margin-bottom: 36px; }
.seccion__titulo h2 { margin-top: 12px; }
.seccion__titulo p { color: var(--texto-2); margin-top: 12px; font-size: 17.5px; }

.etiqueta {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--kofur-primario-texto); background: var(--kofur-primario-suave);
  padding: 5px 12px; border-radius: 999px;
}
.etiqueta--banda { color: #fff; background: rgba(255, 255, 255, .14); }

.enlace {
  color: var(--kofur-primario-texto);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--kofur-primario-texto); font-weight: 600;
}
.enlace-flecha svg { transition: transform .15s ease; }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid transparent; border-radius: var(--radio-boton);
  font-size: 16.5px; font-weight: 600; font-family: inherit; line-height: 1.2;
  text-align: center; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
.btn--primario { background: var(--kofur-primario); color: var(--kofur-sobre-primario); }
.btn--primario:hover { background: var(--kofur-primario-presionado); }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-control); }
.btn--secundario:hover { border-color: var(--texto-2); }
.btn--claro { background: #fff; color: #330099; }
.btn--claro:hover { background: #F0EBFF; }
.btn--bloque { width: 100%; }
.btn--chico { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 50;
  background: var(--barra-fondo);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra__interior { display: flex; align-items: center; gap: 10px; height: 64px; }
.marca {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; letter-spacing: 3px; font-size: 18px; color: var(--kofur-primario-texto);
}
.barra__nav { display: none; }
.barra__codigo {
  margin-left: auto;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: 15.5px; color: var(--kofur-primario-texto);
  white-space: nowrap;
}
.barra__menu {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--texto);
}
.barra__menu:hover { background: var(--fondo-suave); }
.barra__menu .icono-cerrar { display: none; }
.barra__menu[aria-expanded="true"] .icono-abrir { display: none; }
.barra__menu[aria-expanded="true"] .icono-cerrar { display: block; }

@media (min-width: 900px) {
  .barra__interior { gap: 26px; }
  .barra__nav { display: flex; gap: 4px; margin-left: auto; }
  .barra__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    color: var(--texto-2); font-size: 15.5px; border-radius: 10px;
  }
  .barra__nav a:hover { color: var(--kofur-primario-texto); }
  .barra__codigo {
    margin-left: 0; border: 1.5px solid var(--borde-control); border-radius: var(--radio-boton);
    padding: 0 16px;
  }
  .barra__menu { display: none; }
}

/* El menú de móvil: ocupa la pantalla bajo la cabecera y se cierra tocando
   fuera o con Esc. No lleva X: el mismo botón que lo abrió lo cierra.
   Toque de la B: idioma y tema a la vista como botones grandes (48 px) y
   WhatsApp abajo del todo. Si la pantalla es baja, el menú se desplaza. */
.menu {
  position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 49;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo-suave);
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu__interior { flex: 1 0 auto; display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: center; min-height: 52px;
  font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--borde);
}
.menu__grupo { margin-top: 22px; }
.menu__grupo + .menu__grupo { margin-top: 24px; }
.menu__rotulo { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-2); margin-bottom: 10px; }
.menu .menu__wa { margin-top: auto; min-height: 56px; font-size: 18px; }
.menu__grupo:last-of-type { margin-bottom: 28px; }
@media (min-width: 900px) { .menu { display: none !important; } }

/* Idioma en el menú: una fila por idioma, cada una un botón de 48 px. */
.idiomas--botones { display: grid; gap: 8px; }
.menu .idiomas.idiomas--botones a, .menu .idiomas.idiomas--botones .idiomas__no {
  min-height: 48px; padding: 0 16px; border-radius: 14px; font-size: 17px;
  background: var(--superficie); border: 1px solid var(--borde-control); color: var(--texto);
}
.menu .idiomas--botones a:hover { background: var(--kofur-primario-suave); }
.menu .idiomas--botones a[aria-current="true"] {
  background: var(--kofur-primario-suave); color: var(--kofur-primario-texto);
  border: 2px solid var(--kofur-primario-texto); padding: 0 15px; font-weight: 700;
}
/* El activo lleva un punto, como la B, en lugar de la marca. */
.menu .idiomas--botones a[aria-current="true"]::after {
  width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%;
  background: currentColor; transform: none;
}
.menu .idiomas.idiomas--botones .idiomas__no {
  background: transparent; border-style: dashed; color: var(--texto-2);
}
.menu .idiomas--botones .idiomas__no small { border: 0; padding: 0; font-size: 14px; font-weight: 500; }

/* ── Selector de idioma ─────────────────────────────────────────────────── */

.idioma { position: relative; }
.idioma summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  color: var(--texto-2); font-size: 15px; font-weight: 600; border-radius: 10px;
}
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary:hover { color: var(--texto); }
.idioma__lista {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  box-shadow: var(--sombra); padding: 6px; list-style: none;
}
.idiomas { list-style: none; }
.idiomas a, .idiomas .idiomas__no {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 15.5px;
}
.idiomas a:hover { background: var(--fondo-suave); }
.idiomas a[aria-current="true"] { font-weight: 700; color: var(--kofur-primario-texto); }
.idiomas a[aria-current="true"]::after {
  content: ""; width: 10px; height: 6px; margin-right: 2px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px);
}
/* Mapudungun: se ve, no se elige. No es enlace y lo dice. */
.idiomas .idiomas__no { color: var(--texto-3); cursor: not-allowed; }
.idiomas__no small {
  font-size: 12px; font-weight: 600; border: 1px dashed var(--borde-control);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.menu .idiomas a, .menu .idiomas .idiomas__no, .pie .idiomas a, .pie .idiomas .idiomas__no { padding-left: 0; }

/* ── Selector de tema ───────────────────────────────────────────────────── */

.tema { border: 0; }
.tema__opciones {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--fondo-suave); border: 1px solid var(--borde);
  max-width: 380px;
}
.tema label { position: relative; }
.tema input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tema span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 8px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--texto-2); text-align: center;
}
.tema input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.tema input:focus-visible + span { outline: 2px solid var(--kofur-primario-texto); outline-offset: 1px; }
/* Tema en el menú: tres botones sueltos de 48 px, el elegido en morado. */
.tema--botones .tema__opciones { gap: 8px; padding: 0; background: none; border: 0; max-width: none; }
.tema--botones span {
  min-height: 48px; border-radius: 14px; font-size: 16px; font-weight: 500;
  background: var(--superficie); border: 1px solid var(--borde-control); color: var(--texto);
}
.tema--botones input:checked + span {
  background: var(--kofur-primario-suave); color: var(--kofur-primario-texto);
  border: 2px solid var(--kofur-primario-texto); font-weight: 700; box-shadow: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 40px 0 44px; }
.hero__grid { display: grid; gap: 22px; align-items: center; }
.hero h1 { max-width: 13.5em; }
.hero__bajada { font-size: 19px; color: var(--texto-2); margin-top: 16px; max-width: 34em; }
.hero__acciones { display: grid; gap: 10px; margin-top: 24px; }
.hero__acciones .btn { width: 100%; }
.hero__otro { margin-top: 8px; }

@media (min-width: 620px) {
  .hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero__acciones .btn { width: auto; }
}
@media (min-width: 900px) {
  .hero { padding: 72px 0 60px; }
  /* Con el H1 a 84 px (toque de la B) el texto necesita ~690 px para caber en
     cuatro líneas, como en la B: la escena cede espacio y se achica un poco. */
  .hero--tel .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; }
  .hero h1 { max-width: none; }
}

/* La escena: el equipo en 3D delante y el teléfono detrás, sobre el mismo
   plano y con la sombra hacia el mismo lado. Igual que en la v2. */
.escena {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  min-height: 340px; padding: 30px 0 46px;
}
/* En oscuro, un halo tenue detrás: sin él el equipo negro se funde con el
   fondo. En claro vale `transparent`. */
.escena::before {
  content: ""; position: absolute; inset: 0 0 10% 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 60% at 50% 58%, var(--halo), transparent 72%);
}
.escena__suelo {
  position: absolute; left: 8%; right: 2%; bottom: 40px; height: 54px; border-radius: 50%;
  background: radial-gradient(ellipse at 46% 55%, var(--suelo) 0%, transparent 74%);
  pointer-events: none;
}
.hero__tel { position: relative; z-index: 1; margin: 0 0 6px; order: 2; }
.hero__tel .kf-tel { --w: min(190px, 40vw); }
.hero__tel .kf-tel__sombra {
  left: 14%; right: -10%;
  bottom: calc(var(--w) * -0.012);
  height: calc(var(--w) * 0.085);
  background: radial-gradient(ellipse at 34% 50%, var(--sombra-tel) 0%, transparent 78%);
}
.hero__aparato {
  position: relative; z-index: 2; order: 1;
  width: min(340px, 66vw); height: min(265px, 52vw);
  display: flex; align-items: flex-end; justify-content: center;
}
.hero__aparato canvas { display: block; width: 100% !important; height: 100% !important; }
.hero__aparato-img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  transition: opacity .35s ease;
}
.hero__aparato-img--oculta { opacity: 0; position: absolute; pointer-events: none; }

@media (min-width: 900px) {
  .escena { min-height: 460px; }
  .hero--tel .escena { justify-content: flex-end; }
  .hero__aparato { flex: none; width: min(340px, 23.6vw); height: min(268px, 18.6vw); margin: 0 -80px -14px 0; }
  .hero__tel .kf-tel { --w: min(166px, 11.5vw); }
}
@media (min-width: 620px) and (max-width: 899.98px) {
  .escena { min-height: 300px; padding: 10px 0 30px; }
  .hero__aparato { width: min(340px, 44vw); height: min(266px, 34vw); }
  .hero__tel .kf-tel { --w: min(168px, 22vw); --giro-y: -20deg !important; --giro-x: 6deg !important; }
}
/* En un teléfono: el pliegue muestra titular, bajada, los dos botones y el
   borde de arriba de la escena, que invita a bajar (ux §3). */
@media (max-width: 619.98px) {
  .escena { gap: 0; min-height: 250px; padding: 8px 0 22px; transform: translateX(-10px); }
  .hero__aparato { width: min(214px, 55vw); height: min(167px, 43vw); margin-bottom: -6px; }
  .hero__tel { margin: 0 0 4px -4%; }
  .hero__tel .kf-tel { --w: min(140px, 36vw); }
}

/* Las tres garantías, bajo la escena. */
.garantias {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding-top: 16px; border-top: 1px solid var(--borde);
  color: var(--texto-2); font-size: 15px;
}
.garantias span { position: relative; padding-left: 20px; }
.garantias span::before, .lista-check li::before, .plan__lista li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--kofur-primario-texto); border-bottom: 2px solid var(--kofur-primario-texto);
  transform: rotate(-45deg);
}

/* ── Tarjetas y rejillas ─────────────────────────────────────────────────── */

.rejilla { display: grid; gap: 18px; }
@media (min-width: 700px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 1019.98px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 24px;
}
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p { color: var(--texto-2); font-size: 15.5px; }
.tarjeta p + p { margin-top: 10px; }

.paso__n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kofur-primario-suave); color: var(--kofur-primario-texto);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; margin-bottom: 14px;
}

.lista-check { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 24px; color: var(--texto-2); }

.nota {
  font-size: 15px; color: var(--texto-2);
  padding-left: 14px; border-left: 2px solid var(--borde); margin-top: 16px;
}

.chip {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--fondo-suave); color: var(--texto-2); border: 1px solid var(--borde);
}
.chip--premium { background: var(--kofur-primario-suave); color: var(--kofur-primario-texto); border-color: transparent; }

/* ── Foto + texto (duo), como en la v2 ───────────────────────────────────── */

.duo { display: grid; gap: 32px; align-items: center; }
.duo__texto h2 { margin-top: 12px; }
.duo__texto > p { color: var(--texto-2); margin-top: 14px; }
.duo__foto { margin: 0; }
.duo__foto img { width: 100%; height: auto; border-radius: var(--radio); }
.duo__foto figcaption { margin-top: 10px; font-size: 14.5px; color: var(--texto-3); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 56px; }
  .duo--foto-primero .duo__foto { order: -1; }
}

.sirve__clave { font-size: 22px; font-weight: 700; color: var(--texto); margin-top: 14px; letter-spacing: -0.01em; }
.sirve .btn { margin-top: 24px; }

/* ── Quién entra ─────────────────────────────────────────────────────────── */

.personas { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .personas { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
.roles { display: grid; gap: 14px; }
@media (min-width: 560px) { .roles { grid-template-columns: 1fr 1fr; } }
.rol { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.rol__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rol h3 { font-size: 17px; }
.rol p { font-size: 15px; color: var(--texto-2); }
.rol__legal { margin-top: 8px; font-size: 13.5px !important; color: var(--texto-3) !important; }

/* Trabajadores con su horario e invitaciones: capturas reales de la app. */
.personas__tels { align-self: center; }
@media (max-width: 899.98px) { .personas__tels .kf-tel { --w: min(236px, 62vw); } }
@media (min-width: 900px) {
  .personas__tels.kf-tel-par .kf-tel { --w: min(224px, 16vw); }
  .personas__tels.kf-tel-par > .kf-tel:last-child { --w: calc(min(224px, 16vw) * .82); }
}

/* ── Las fotos: banda morada de marca en los dos temas ───────────────────── */

.foto { background: var(--banda); color: var(--banda-texto); }
.foto h2, .foto h3 { color: var(--banda-texto); }
.foto__cabeza { max-width: 700px; }
.foto__cabeza h2 { margin: 14px 0 12px; }
.foto__cabeza p { color: var(--banda-texto-2); font-size: 17.5px; }
.foto__tira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
  margin: 32px -20px 40px; padding: 0 20px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
}
.foto__tira figure { scroll-snap-align: start; margin: 0; }
.foto__tira img { width: 100%; height: auto; aspect-ratio: 1376 / 768; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--banda-borde); }
.foto__tira figcaption { margin-top: 9px; font-size: 14px; color: var(--banda-texto-3); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .foto__tira { grid-auto-columns: 1fr; overflow: visible; margin: 32px 0 44px; padding: 0; }
}
.foto__abajo { display: grid; gap: 34px; align-items: center; }
.foto__tels { display: flex; justify-content: center; }
.foto__nota p { color: var(--banda-texto-2); margin-top: 12px; }
.foto__nota h3 + p { margin-top: 10px; }
.foto__nota h3:not(:first-child) { margin-top: 28px; }
.foto__aviso {
  margin-top: 22px !important; padding: 16px 18px; border-radius: var(--radio-chico);
  border: 1px solid var(--banda-borde); font-size: 15px; color: var(--banda-texto-2) !important;
}
.foto .enlace { color: var(--banda-enlace); }
.foto .enlace-flecha { color: var(--banda-enlace); }
@media (max-width: 899.98px) { .foto__tels .kf-tel { --w: min(236px, 62vw); } }
@media (min-width: 900px) {
  .foto__abajo { grid-template-columns: 1fr 1fr; gap: 56px; }
  .foto__tels.kf-tel-par .kf-tel { --w: min(236px, 18vw); }
  .foto__tels.kf-tel-par > .kf-tel:last-child { --w: calc(min(236px, 18vw) * .82); }
}

/* ── Tu lugar ────────────────────────────────────────────────────────────── */

.lugar { display: flex; flex-direction: column; }
.lugar__icono {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  background: var(--kofur-primario-suave); color: var(--kofur-primario-texto);
  display: flex; align-items: center; justify-content: center;
}
.lugar__pie { margin-top: auto; padding-top: 14px; }
.lugar__dato { font-size: 14px !important; color: var(--texto-3) !important; }

/* ── Cómo empiezas ───────────────────────────────────────────────────────── */

.empiezas { display: grid; gap: 30px; align-items: center; margin-top: 40px; }
.empiezas__tel { display: flex; justify-content: center; }
.empiezas__tel .kf-tel { --w: min(220px, 56vw); }
.empiezas__foto { margin: 0; }
.empiezas__foto img { width: 100%; height: auto; border-radius: var(--radio); }
.empiezas__foto figcaption { margin-top: 12px; font-size: 14.5px; color: var(--texto-2); }
@media (min-width: 900px) { .empiezas { grid-template-columns: .5fr 1fr; gap: 56px; } }

.tiendas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tienda {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 20px 0 16px; border-radius: 14px;
  background: var(--texto); color: var(--fondo);
}
.tienda small { display: block; font-size: 12px; opacity: .85; line-height: 1.1; }
.tienda strong { display: block; font-size: 17px; line-height: 1.15; }
.tienda:hover { opacity: .9; }

/* ── Planes ──────────────────────────────────────────────────────────────── */

.plan { display: flex; flex-direction: column; height: 100%; }
.plan--destacado { border: 2px solid var(--kofur-primario-texto); box-shadow: var(--sombra); }
.plan__quien { font-size: 14.5px; color: var(--texto-3); }
.plan__precio { font-size: 34px; font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__precio small { font-size: 16px; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.plan__iva { font-size: 14px; color: var(--texto-2); }
.plan__lista { list-style: none; margin: 18px 0 0; display: grid; gap: 9px; }
.plan__lista li { position: relative; font-size: 15.5px; color: var(--texto-2); padding-left: 22px; }
.plan__accion { margin-top: auto; padding-top: 22px; }
.plan__accion .btn { width: 100%; }
.plan__accion .enlace-flecha { margin-top: 6px; }

.condiciones {
  margin-top: 22px; font-size: 16px; color: var(--texto-2);
  display: grid; gap: 8px; max-width: 820px;
}
.condiciones strong { color: var(--texto); }

.sinplan {
  margin-top: 30px; background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 26px 24px;
}
.seccion--suave .sinplan { background: var(--superficie); }
.sinplan h3 { margin-bottom: 10px; font-size: 21px; }
.sinplan p { color: var(--texto-2); }
.sinplan strong { color: var(--texto); }

/* ── Preguntas ───────────────────────────────────────────────────────────── */

.preguntas { max-width: 820px; display: grid; gap: 12px; }
.pregunta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.pregunta summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 20px; font-weight: 700; font-size: 17px;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2);
  transform: rotate(45deg) translateY(-3px); transition: transform .15s ease;
}
.pregunta[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.pregunta__cuerpo { padding: 0 20px 18px; color: var(--texto-2); }
.pregunta__cuerpo p + p { margin-top: 10px; }

/* ── Cierre ──────────────────────────────────────────────────────────────── */

/* Sin el degradado a #4B32A8 de la v2 (retirado): #330099 sólido con una luz
   blanca muy tenue. Es el mismo en los dos temas: es una superficie pintada. */
.cierre {
  background: radial-gradient(ellipse 70% 90% at 80% 0%, rgba(255, 255, 255, .10), transparent 60%), #330099;
  color: #fff; padding: 76px 0;
}
.cierre__interior { text-align: center; max-width: 640px; margin: 0 auto; }
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255, 255, 255, .92); margin: 12px 0 26px; font-size: 18px; }
.cierre__nota { margin: 22px 0 0 !important; font-size: 15px !important; color: rgba(255, 255, 255, .86) !important; }
.cierre__nota a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie { background: #16121C; color: #fff; padding: 52px 0 28px; }
.pie__interior { display: grid; gap: 34px; }
@media (min-width: 900px) { .pie__interior { grid-template-columns: 1fr 2fr; } }
.pie .marca { color: #fff; }
.pie__nota { color: rgba(255, 255, 255, .8); font-size: 15px; margin-top: 8px; }
.pie__legalinfo { margin-top: 14px; line-height: 2; }
.pie__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (min-width: 620px) { .pie__cols { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.pie h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .66); margin-bottom: 8px; font-weight: 700; }
.pie__cols a { display: flex; align-items: center; min-height: 40px; color: rgba(255, 255, 255, .88); font-size: 15px; }
.pie__cols a:hover { color: #fff; }
.pie__redes { display: flex; gap: 10px; }
.pie__cols .pie__redes a { width: 44px; height: 44px; min-height: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.pie__cols .pie__redes a:hover { background: rgba(255, 255, 255, .1); }
.sin-corte { white-space: nowrap; }
.pie__ajustes { display: grid; gap: 26px; margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 760px) { .pie__ajustes { grid-template-columns: 1fr 1fr; } }
.pie .idiomas { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pie .idiomas a { color: rgba(255, 255, 255, .88); }
.pie .idiomas a[aria-current="true"] { color: #fff; }
.pie .idiomas .idiomas__no { color: rgba(255, 255, 255, .6); }
.pie .idiomas__no small { border-color: rgba(255, 255, 255, .4); }
.pie .tema__opciones { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.pie .tema span { color: rgba(255, 255, 255, .8); }
.pie .tema input:checked + span { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7); font-size: 14px;
}

/* Datos legales que faltan: a la vista, con aspecto de hueco por llenar. Un
   dato legal inventado es peor que un hueco (v2). */
.pendiente {
  display: inline-block; font-size: 13px; color: rgba(255, 255, 255, .7);
  border: 1px dashed rgba(255, 255, 255, .4); border-radius: 5px; padding: 1px 7px; margin: 2px 0;
}
.pie__cols .pendiente { display: flex; align-items: center; min-height: 34px; margin: 3px 0; width: fit-content; }

/* ── WhatsApp fijo abajo, solo en móvil, con su espacio reservado ────────── */

.wa-fijo { display: none; }
@media (max-width: 899.98px) {
  /* El hueco se reserva en el pie, que es oscuro: en el body quedaba una
     franja clara bajo él. */
  .con-wa .pie { padding-bottom: calc(28px + 80px); }
  .con-wa .wa-fijo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--barra-fondo);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
  }
  .wa-fijo .btn { width: 100%; min-height: 52px; }
  /* Mientras se ven los botones del hero, la barra se esconde: serían dos
     WhatsApp en la misma pantalla. Se desliza fuera sin mover nada. */
  .con-wa .wa-fijo { transition: transform .25s ease, visibility .25s; }
  .js .con-wa .wa-fijo--oculto { transform: translateY(110%); visibility: hidden; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) { .con-wa .wa-fijo { transition: none; } }

/* ── Sugerencia de idioma: flota sobre la página, no la empuja ───────────── */

.sugerencia {
  position: fixed; z-index: 45; left: 16px; right: 16px; bottom: 16px;
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px 10px 18px; border-radius: 16px;
  background: var(--texto); color: var(--fondo); box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  font-size: 15px;
}
.sugerencia[hidden] { display: none; }
.sugerencia p { flex: 1 1 180px; }
.sugerencia a, .sugerencia button {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; font-weight: 700; font-size: 15px;
}
.sugerencia a { background: var(--fondo); color: var(--texto); }
.sugerencia button { background: transparent; color: var(--fondo); }
@media (max-width: 899.98px) { .con-wa .sugerencia { bottom: 92px; } }

/* ── Condominios ─────────────────────────────────────────────────────────── */

.c-hero { padding: 44px 0 56px; overflow-x: clip; }
.c-hero__grid { display: grid; gap: 36px; align-items: center; }
.c-hero h1 { margin-top: 14px; max-width: 14em; }
.c-hero__bajada { color: var(--texto-2); font-size: 18.5px; margin-top: 16px; max-width: 36em; }
.c-par { position: relative; display: flex; justify-content: center; min-height: 420px; padding: 20px 0; }
.c-par__frente { position: relative; z-index: 3; }
.c-par__frente .kf-tel { --w: min(236px, 60vw); }
.c-par__fondo { position: absolute; z-index: 1; top: 6%; right: 0; pointer-events: none; }
.c-par__fondo .kf-tel { --w: min(190px, 48vw); --giro-y: 20deg !important; }
@media (min-width: 900px) {
  .c-hero { padding: 64px 0 72px; }
  /* El H1 de condominios comparte fila con dos teléfonos: llega a 72 px (no
     a 84, como la portada) para quedar en cuatro líneas en los dos idiomas. */
  .c-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; }
  .c-hero h1 { max-width: none; font-size: clamp(40px, 3vw + 26px, 72px); }
  .c-par__frente { transform: translateX(-22%); }
  .c-par__frente .kf-tel { --w: min(250px, 19vw); }
  .c-par__fondo .kf-tel { --w: min(200px, 15vw); }
}
@media (max-width: 899.98px) {
  .c-par { min-height: 0; }
  .c-par__fondo { display: none; }
}

.prueba {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 14px 18px; border-radius: var(--radio-chico);
  background: var(--fondo-suave); border: 1px solid var(--borde); font-size: 15.5px; color: var(--texto-2);
}
.prueba strong { color: var(--texto); }

.llamadas { display: grid; gap: 18px; }
@media (min-width: 800px) { .llamadas { grid-template-columns: repeat(3, 1fr); } }
.llamada__cita { font-size: 19px; font-weight: 700; color: var(--kofur-primario-texto); margin-bottom: 14px; letter-spacing: -0.01em; }

/* El panel y el código: capturas reales de la app. */
.panel-tels { align-self: center; }
@media (max-width: 899.98px) { .panel-tels .kf-tel { --w: min(236px, 62vw); } }
@media (min-width: 900px) {
  .panel-tels.kf-tel-par .kf-tel { --w: min(236px, 17vw); }
  .panel-tels.kf-tel-par > .kf-tel:last-child { --w: calc(min(236px, 17vw) * .82); }
}

.tabla-env { overflow-x: auto; margin-top: 24px; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--texto-3); background: var(--fondo-suave); }
.tabla td:first-child { color: var(--texto-2); }
.tabla td:last-child { color: var(--texto); font-weight: 600; }
.tabla--num td:not(:first-child), .tabla--num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* La calculadora */
.calc { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: 1.1fr .9fr; gap: 40px; } }
.calc__panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.calc label { display: block; font-weight: 700; font-size: 16px; }
.calc__fila { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.calc input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--kofur-primario-texto); }
.calc input[type="number"] {
  width: 96px; min-height: 48px; padding: 0 12px; font: inherit; font-size: 18px; font-weight: 700;
  border: 1.5px solid var(--borde-control); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto); text-align: center; font-variant-numeric: tabular-nums;
}
.calc__total { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); }
.calc__cifra { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc__cifra small { font-size: 17px; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.calc__detalle { display: grid; gap: 4px; margin-top: 8px; color: var(--texto-2); font-size: 15.5px; font-variant-numeric: tabular-nums; }
.calc__detalle strong { color: var(--texto); }
.calc__nota { margin-top: 14px; font-size: 14px; color: var(--texto-3); }

.honesto { margin-top: 30px; border: 1px dashed var(--borde-control); border-radius: var(--radio); padding: 24px; }
.honesto h3 { margin-bottom: 12px; }
.honesto ul { display: grid; gap: 8px; padding-left: 20px; color: var(--texto-2); }

/* ── Entrar con código ───────────────────────────────────────────────────── */

.entrar { padding: 48px 0 72px; }
.entrar__grid { display: grid; gap: 28px; max-width: 1020px; }
@media (min-width: 900px) { .entrar__grid { grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } }
.entrar h1 { max-width: 12em; }
.entrar__bajada { color: var(--texto-2); font-size: 18px; margin-top: 12px; }
.form-codigo { margin-top: 26px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.form-codigo label { display: block; font-weight: 700; margin-bottom: 8px; }
.form-codigo input {
  width: 100%; min-height: 60px; padding: 0 16px;
  font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  border: 1.5px solid var(--borde-control); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto);
}
.form-codigo input::placeholder { color: var(--texto-3); opacity: 1; letter-spacing: .18em; }
.form-codigo input:focus { outline: 2px solid var(--kofur-primario-texto); outline-offset: 1px; }
.form-codigo[data-estado="error"] input { border-color: #C4342B; }
/* El mensaje del campo tiene su alto reservado: aparecer no mueve nada. */
.form-codigo__msg { min-height: 68px; margin-top: 8px; font-size: 14.5px; color: var(--texto-2); }
.form-codigo[data-estado="error"] .form-codigo__msg { color: #C4342B; }
:root[data-tema="oscuro"] .form-codigo[data-estado="error"] .form-codigo__msg { color: #E8635A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .form-codigo[data-estado="error"] .form-codigo__msg { color: #E8635A; } }
.form-codigo__pista { margin-top: 16px; font-size: 15px; color: var(--texto-2); }
.bloque { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.bloque + .bloque { margin-top: 16px; }
.bloque h2 { font-size: 22px; }
.bloque p { color: var(--texto-2); margin-top: 10px; font-size: 15.5px; }
.bloque .tiendas { margin-top: 16px; }
.bloque .tienda { min-height: 52px; }

/* ── Utilidades de la cabecera ───────────────────────────────────────────── */

.solo-escritorio { display: none; }
@media (min-width: 900px) { .solo-escritorio { display: block; } }

/* El enlace para saltar al contenido: invisible hasta que recibe el foco. */
a.solo-lector:focus {
  position: fixed !important; left: 12px; top: 12px; z-index: 100;
  width: auto; height: auto; clip: auto; padding: 12px 16px;
  background: var(--superficie); color: var(--texto); border-radius: 10px; box-shadow: var(--sombra);
}

/* ===========================================================================
   Tienda: carrito, checkout, pago y resultado (y las páginas del plan)

   El prototipo no las incluía. Son las reglas de la v2, pasadas a los tokens
   de arriba para que funcionen en claro y en oscuro. Todo va con prefijo de
   clase propio: nada de aquí toca la portada, /condominios ni /entrar.
   =========================================================================== */

:root { --error: #B3261E; --error-fondo: #FDEDEE; --exito-fondo: #EDF7F1; }
:root[data-tema="oscuro"] { --error: #F2877F; --error-fondo: #3A1A1C; --exito-fondo: #15291D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --error: #F2877F; --error-fondo: #3A1A1C; --exito-fondo: #15291D; }
}

/* El carrito aparece en la cabecera solo si tiene algo (ux §2.10). */
.carrito-boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--texto); flex: none;
}
.carrito-boton:hover { background: var(--fondo-suave); }
.carrito-boton__n {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--kofur-primario); color: var(--kofur-sobre-primario);
  border-radius: 9px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.avisos { padding-top: 16px; }
.aviso {
  padding: 12px 16px; border-radius: var(--radio-chico); font-size: 14.5px; margin-bottom: 10px;
  border: 1px solid var(--borde); background: var(--fondo-suave); color: var(--texto);
}
.aviso--success { background: var(--exito-fondo); color: var(--exito); }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--warning { background: var(--ambar-fondo); color: var(--ambar-texto); }

.producto__precio { display: flex; align-items: baseline; gap: 12px; margin: 16px 0; }
.producto__precio strong { font-size: 30px; font-weight: 700; }
.producto__precio del { color: var(--texto-3); font-size: 17px; }
.agotado { color: var(--error); font-weight: 600; }

.cantidad {
  display: inline-flex; align-items: center; border: 1px solid var(--borde-control);
  border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie);
}
.cantidad button {
  width: 44px; height: 44px; border: 0; background: var(--superficie); cursor: pointer;
  font-size: 19px; color: var(--texto); font-family: inherit;
}
.cantidad button:hover { background: var(--fondo-suave); }
.cantidad__valor { min-width: 46px; text-align: center; font-weight: 600; }

.compra { display: grid; gap: 28px; padding-top: 36px; padding-bottom: 72px; align-items: start; }
@media (min-width: 900px) { .compra { grid-template-columns: 1.3fr .7fr; gap: 44px; } }
.linea {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px;
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--borde);
}
.linea__miniatura {
  width: 64px; height: 64px; border-radius: var(--radio-chico); background: var(--kofur-primario-suave);
  display: flex; align-items: center; justify-content: center;
  color: var(--kofur-primario-texto); font-weight: 700; font-size: 12px; text-align: center;
}
.linea__nombre { font-weight: 600; }
.linea__meta { color: var(--texto-3); font-size: 13.5px; margin-top: 2px; }
.linea__controles { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.linea__quitar {
  background: none; border: 0; color: var(--texto-2); font-size: 13.5px; cursor: pointer;
  font-family: inherit; text-decoration: underline; min-height: 44px;
}
.linea__quitar:hover { color: var(--error); }
.linea__total { font-weight: 700; white-space: nowrap; }

.resumen {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 24px; position: sticky; top: 82px;
}
.resumen h3 { margin-bottom: 16px; }
.resumen__fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--texto-2); }
.resumen__fila--descuento { color: var(--exito); }
.resumen__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 19px; font-weight: 700;
}
.resumen__nota { color: var(--texto-3); font-size: 13px; margin-top: 14px; }

.vacio { text-align: center; padding: 64px 20px; }
.vacio p { color: var(--texto-2); margin: 10px 0 22px; }

.campos { display: grid; gap: 16px; }
@media (min-width: 640px) { .campos--2 { grid-template-columns: 1fr 1fr; } }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--borde-control); border-radius: var(--radio-chico);
  font-size: 16px; font-family: inherit; color: var(--texto); background: var(--superficie);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--kofur-primario-texto); outline-offset: 1px; border-color: transparent;
}
.campo--error input, .campo--error select { border-color: var(--error); }
.campo__pista { color: var(--texto-3); font-size: 13px; margin-top: 5px; }
.compra fieldset { border: 0; margin-bottom: 28px; }
.compra legend { font-weight: 700; font-size: 17px; margin-bottom: 14px; }

.estado { text-align: center; padding: 56px 20px 72px; max-width: 620px; margin: 0 auto; }
.estado__icono {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}
.estado__icono--ok { background: var(--exito-fondo); color: var(--exito); }
.estado__icono--espera { background: var(--ambar-fondo); color: var(--ambar-texto); }
.estado__icono--no { background: var(--error-fondo); color: var(--error); }
.estado p { color: var(--texto-2); margin: 12px 0; }
.estado__numero {
  display: inline-block; background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: 10px 18px; margin: 8px 0 22px; font-weight: 700; letter-spacing: 1px;
}

/* ── Tienda: IVA, entrega en mano ─────────────────────────────────────────
   «IVA incluido» va pegado al precio. La modalidad de entrega muestra y
   esconde bloques con [data-solo]: el CSS lo hace con :has() (sin JS) y
   tienda.js pone `hidden` para los navegadores que no tienen :has(). */
.precio__iva { font-size: 13px; font-weight: 600; color: var(--texto-3); white-space: nowrap; }
.producto__precio .precio__iva { align-self: center; }
.resumen__iva { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borde); }
.resumen__iva .resumen__fila { font-size: 13.5px; padding: 4px 0; color: var(--texto-3); }
.resumen__total small { font-size: 12px; font-weight: 600; color: var(--texto-3); }

.entrega { display: grid; gap: 12px; }
@media (min-width: 640px) { .entrega { grid-template-columns: 1fr 1fr; } }
.entrega__opcion {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 16px; min-height: 44px; border: 1.5px solid var(--borde-control);
  border-radius: var(--radio-chico); background: var(--superficie);
}
.entrega__opcion input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--kofur-primario); flex: none; }
.entrega__opcion strong { display: block; font-size: 16px; }
.entrega__opcion small { display: block; color: var(--texto-2); font-size: 13.5px; margin-top: 3px; }
.entrega__opcion:has(input:checked) { border-color: var(--kofur-primario-texto); box-shadow: 0 0 0 1px var(--kofur-primario-texto); }
.entrega__opcion:has(input:focus-visible) { outline: 2px solid var(--kofur-primario-texto); outline-offset: 2px; }
.campo__opcional { font-weight: 400; color: var(--texto-3); }

[data-solo][hidden] { display: none !important; }
.compra:has(#entrega-en_mano:checked) [data-solo="despacho"],
.compra:has(#entrega-despacho:checked) [data-solo="en_mano"] { display: none; }
/* WebKit (iOS) ignora alto y borde de un <select> nativo: se le quita la
   apariencia del sistema y se dibuja la flecha. */
.campo select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236F6880' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

/* ── Tienda: cupón ────────────────────────────────────────────────────────
   Va dentro del formulario, justo antes del botón de pagar: en el teléfono
   el resumen queda debajo del formulario y un cupón puesto allí quedaría
   después del botón. El mensaje de error tiene su alto reservado: aparecer
   no mueve el botón. */
.compra fieldset.cupon { margin-bottom: 12px; min-width: 0; }
.compra form { min-width: 0; }
.cupon__caja summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--kofur-primario-texto); font-weight: 600; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; list-style: none;
}
.cupon__caja summary::-webkit-details-marker { display: none; }
.cupon__fila { display: flex; gap: 10px; margin-top: 6px; }
.cupon__fila input {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--borde-control); border-radius: var(--radio-chico);
  font-size: 16px; font-family: inherit; color: var(--texto); background: var(--superficie);
  text-transform: uppercase; letter-spacing: .08em;
}
.cupon__fila input::placeholder { text-transform: none; letter-spacing: 0; }
.cupon__fila input:focus { outline: 2px solid var(--kofur-primario-texto); outline-offset: 1px; border-color: transparent; }
.cupon__fila input[aria-invalid="true"] { border-color: var(--error); }
.cupon__fila .btn { min-height: 48px; flex: none; }
.cupon__puesto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 6px 10px 16px; border-radius: var(--radio-chico);
  background: var(--exito-fondo); color: var(--exito); font-size: 15px;
}
.cupon__puesto strong { letter-spacing: .06em; }
.cupon__quitar {
  background: none; border: 0; color: inherit; font-size: 14px; cursor: pointer;
  font-family: inherit; text-decoration: underline; min-height: 44px; min-width: 44px; padding: 0 10px;
}
.cupon__error { min-height: 20px; margin-top: 6px; color: var(--error); font-size: 14px; }

/* ── Tienda: aceptación de Términos y Privacidad ──────────────────────────
   Toda la fila es área de toque (≥44 px). Los enlaces son texto dentro de la
   frase: el relleno vertical negativo les da 44 px de alto al tocarlos sin
   mover la línea. El error tiene su alto reservado. */
.acepto { margin-bottom: 16px; }
.acepto__caja {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.5; color: var(--texto-2);
}
.acepto__caja input {
  width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--kofur-primario);
}
.acepto__caja input:focus-visible { outline: 2px solid var(--kofur-primario-texto); outline-offset: 2px; }
.acepto__caja a {
  color: var(--kofur-primario-texto); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; padding: 13px 0; margin: -13px 0;
}
.acepto--error .acepto__caja input { outline: 2px solid var(--error); outline-offset: 2px; }
.acepto__error { min-height: 21px; line-height: 21px; margin-top: 2px; padding-left: 34px; color: var(--error); font-size: 14px; }

/* ── Cómo se configura (portada #configurar) ── */
.hero__precio { display: inline-block; margin-bottom: 8px; color: var(--texto-2); font-size: 15px; }
.configurar { margin-top: 40px; padding: 28px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.configurar h3, .configurar h2 { margin: 0 0 16px; font-size: 22px; }
.configurar__pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 14px; }
.configurar__pasos li { counter-increment: paso; position: relative; padding-left: 44px; line-height: 1.5; }
.configurar__pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kofur-primario-suave); color: var(--kofur-primario-texto); font-weight: 700; font-size: 14px;
}
.configurar__nota { margin: 18px 0 0; color: var(--texto-2); font-size: 15px; }
@media (max-width: 600px) { .configurar { padding: 20px 16px; } }

/* ===========================================================================
   Ficha del Kofur Pulso (/tienda/producto/<slug>/), diseño aprobado «v2»

   Hero (texto y compra a la izquierda, dibujo a la derecha en escritorio;
   en el teléfono el dibujo va entre la bajada y el precio), ¿sirve?, tres
   pasos en tarjetas iguales, qué incluye y un cierre con el precio. Los
   dibujos vienen de los videos y son de papel claro en los dos temas: van
   enmarcados como una lámina, con borde.
   =========================================================================== */

.ficha h2 { font-size: clamp(28px, 1.7vw + 21.4px, 46px); }
.ficha .sirve__clave { font-size: clamp(18px, .3vw + 16.8px, 21px); }

/* Un dibujo: lámina de papel con su borde. En oscuro se baja un poco el
   brillo para que el papel no deslumbre junto al fondo oscuro. */
.ficha-dibujo { background: #F1EEE8; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.ficha-dibujo img, img.ficha-dibujo { width: 100%; height: auto; }
:root[data-tema="oscuro"] .ficha-dibujo { filter: brightness(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ficha-dibujo { filter: brightness(.9); } }

/* ── 1 · Hero ── */
.ficha-hero { padding: 28px 0 40px; }
.ficha-hero__grid {
  display: grid; gap: 18px;
  grid-template-areas: "texto" "dibujo" "compra";
}
.ficha-hero__texto { grid-area: texto; }
.ficha-hero__dibujo { grid-area: dibujo; margin: 6px 0 0; }
.ficha-hero__compra { grid-area: compra; }
.ficha-hero h1 { margin-top: 14px; font-size: clamp(38px, 2.2vw + 29.4px, 60px); letter-spacing: -0.02em; }
.ficha-hero__bajada { font-size: clamp(19px, .45vw + 17.2px, 24px); line-height: 1.35; margin-top: 14px; max-width: 26em; }

.ficha-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ficha-precio strong { font-size: clamp(32px, .9vw + 28.5px, 42px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ficha-precio del { color: var(--texto-3); font-size: 17px; }
.ficha-precio span { font-size: 14.5px; color: var(--texto-2); }

.ficha-hero__accion { display: grid; gap: 10px; margin-top: 16px; }
.ficha-hero__accion .btn { width: 100%; min-height: 56px; font-size: 18px; }
.ficha-hero__despacho { text-align: center; font-size: 14.5px; color: var(--texto-2); }

/* Los tres sellos: en el teléfono, tres columnas con el icono arriba; en
   escritorio, en fila y separados del resto por una línea. */
.sellos {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borde);
}
.sellos li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.sellos svg { width: 26px; height: 26px; color: var(--kofur-primario-texto); }

@media (min-width: 900px) {
  .ficha-hero { padding: 64px 0 72px; }
  .ficha-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 0;
    grid-template-areas: "texto dibujo" "compra dibujo";
    grid-template-rows: auto 1fr;
  }
  .ficha-hero__dibujo { align-self: center; margin: 0; border-radius: 26px; }
  .ficha-hero__compra { margin-top: 22px; }
  .ficha-hero__accion { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
  .ficha-hero__accion .btn { width: auto; padding: 0 40px; }
  .ficha-hero__despacho { text-align: left; max-width: 12em; line-height: 1.35; }
  .sellos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
  .sellos li { flex-direction: row; gap: 8px; font-size: 16px; text-align: left; }
  .sellos svg { width: 22px; height: 22px; }
}

/* ── 2 · ¿Sirve? ── */
.ficha-sirve { padding: 44px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.ficha-sirve__grid { display: grid; gap: 22px; align-items: center; }
.ficha-sirve h2 { margin-top: 12px; }
.ficha-requisitos { list-style: none; display: grid; gap: 12px; }
.ficha-requisitos li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.4; }
.ficha-requisitos svg { flex: none; margin-top: 1px; color: var(--kofur-primario-texto); stroke-width: 2.2; }
.ficha-sirve .enlace-flecha { margin-top: 10px; }
@media (min-width: 900px) {
  .ficha-sirve { padding: 60px 0; }
  .ficha-sirve__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .ficha-requisitos li { font-size: 18px; }
}

/* ── 3 · Tres pasos: tarjetas iguales, imagen arriba ── */
.ficha-pasos__lista { list-style: none; }
.ficha-paso {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
/* Las tres imágenes con la misma proporción: las tarjetas quedan iguales. */
.ficha-paso__imagen { aspect-ratio: 5 / 4; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; }
.ficha-paso__imagen img { width: 100%; height: 100%; object-fit: cover; }
/* La captura de la app asoma desde abajo, como la pantalla de un teléfono. */
.ficha-paso__imagen--app {
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  padding-top: 26px; background: var(--kofur-primario-suave);
}
.ficha-paso__imagen--app img {
  width: min(190px, 52%); height: 100%; object-fit: cover; object-position: top;
  border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px var(--borde), var(--sombra);
}
.ficha-captura--oscuro { display: none; }
:root[data-tema="oscuro"] .ficha-captura--claro { display: none; }
:root[data-tema="oscuro"] .ficha-captura--oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ficha-captura--claro { display: none; }
  :root:not([data-tema="claro"]) .ficha-captura--oscuro { display: block; }
}
.ficha-paso__cuerpo { padding: 18px 20px 22px; }
.ficha-paso__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ficha-paso__n {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kofur-primario); color: var(--kofur-sobre-primario); font-weight: 700; font-size: 17px;
}
.ficha-paso h3 { font-size: 20px; }
.ficha-paso p { color: var(--texto-2); font-size: 16px; line-height: 1.5; }

/* La franja morada: la banda de marca, blanca sobre morado en los dos temas. */
.ficha-listo {
  display: grid; gap: 8px; margin-top: 24px; padding: 22px 20px;
  background: var(--banda); color: var(--banda-texto); border-radius: var(--radio);
}
.ficha-listo__titulo { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.ficha-listo__ayuda p { color: var(--banda-texto-2); font-size: 15.5px; line-height: 1.45; }
.ficha-listo .enlace-flecha { color: var(--banda-enlace); }
@media (min-width: 900px) {
  .ficha-listo { grid-template-columns: 1fr minmax(0, 460px); align-items: center; gap: 24px; padding: 26px 36px; }
  .ficha-listo__titulo { font-size: 30px; }
  .ficha-listo__ayuda p { font-size: 17px; }
}

/* ── 4 · Qué incluye ── */
.ficha-incluye__grid { display: grid; gap: 24px; align-items: stretch; }
.ficha-incluye__caja { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.ficha-incluye__caja img { flex: none; width: 130px; border-radius: var(--radio-chico); }
.ficha-incluye__caja ul { list-style: none; display: grid; gap: 6px; font-size: 16.5px; line-height: 1.35; }
.ficha-gratis {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px;
}
.ficha-gratis__titulo { font-size: 18px; font-weight: 700; color: var(--texto); }
.ficha-gratis p:not(.ficha-gratis__titulo) { color: var(--texto-2); font-size: 15.5px; }
@media (min-width: 900px) {
  .ficha-incluye__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ficha-incluye__caja img { width: 200px; }
  .ficha-incluye__caja ul { font-size: 18px; gap: 8px; }
  .ficha-gratis { padding: 28px; }
  .ficha-gratis__titulo { font-size: 22px; }
  .ficha-gratis p:not(.ficha-gratis__titulo) { font-size: 17px; }
}

/* ── 5 · Cierre ── */
.ficha-cierre { padding: 32px 0 44px; border-top: 1px solid var(--borde); }
.ficha-cierre__grid { display: grid; gap: 16px; }
.ficha-cierre__nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ficha-cierre__nombre strong { font-size: 22px; margin-right: auto; }
.ficha-cierre__precio { font-size: 24px; font-weight: 700; color: var(--kofur-primario-texto); font-variant-numeric: tabular-nums; }
.ficha-cierre__acciones { display: flex; flex-direction: column-reverse; gap: 10px; }
.ficha-cierre__acciones .btn { width: 100%; }
.ficha-cierre__acciones .btn--primario { min-height: 56px; font-size: 18px; }
@media (min-width: 900px) {
  .ficha-cierre { padding: 44px 0; }
  .ficha-cierre__grid { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .ficha-cierre__nombre { gap: 16px; }
  .ficha-cierre__nombre strong { font-size: 28px; margin-right: 0; }
  .ficha-cierre__precio { font-size: 28px; }
  .ficha-cierre__acciones { flex-direction: row; align-items: center; gap: 12px; }
  .ficha-cierre__acciones .btn { width: auto; }
  .ficha-cierre__acciones .btn--primario { padding: 0 36px; }
}

/* ══ Portada del 28-09-2026: promesas, aviso push, pasos con foto, lugares ══ */

/* El aviso push: flota sobre el teléfono del hero y de la promesa del medio.
   Plano (sin el giro 3D del teléfono), para que se lea como un aviso que
   llega y no como parte de la app. */
.aviso-push {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .97); color: #1B1626;
  box-shadow: 0 16px 36px rgba(24, 16, 64, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
  text-align: left;
}
.aviso-push__app { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.aviso-push__cuerpo { display: grid; gap: 1px; min-width: 0; }
.aviso-push__fila { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.aviso-push__fila span { color: #6F6880; }
.aviso-push__texto { font-size: 14px; line-height: 1.3; }
.hero__aviso { position: absolute; z-index: 3; left: 0; top: 18px; width: min(300px, 78%); }
@media (min-width: 900px) { .hero__aviso { left: auto; right: 90px; top: 40px; width: 300px; } }

/* Tres promesas. */
.promesas { display: grid; gap: 20px; }
@media (min-width: 900px) { .promesas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.promesa {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px);
  overflow: hidden; display: flex; flex-direction: column;
}
.promesa--destacada { border: 2px solid var(--kofur-primario-texto); }
.promesa__visual {
  position: relative; height: 230px; overflow: hidden;
  background: var(--kofur-primario-suave);
  display: flex; justify-content: center; padding-top: 24px; box-sizing: border-box;
}
.promesa--destacada .promesa__visual { background: var(--kofur-primario); }
.promesa__visual .kf-tel { --w: 210px; --giro-y: 0deg !important; --giro-x: 0deg !important; }
.promesa__visual .kf-tel__sombra { display: none; }
.promesa__aviso { position: absolute; left: 18px; right: 18px; top: 84px; }
.promesa__texto { padding: 22px 24px 26px; }
.promesa__texto h3 { font-size: 23px; }
.promesa__texto > p { color: var(--texto-2); margin-top: 8px; }
.promesa__texto .lista-check { margin-top: 14px; }

/* ¿Sirve?: el dibujo sobre su papel, igual en claro y en oscuro. */
.duo__foto--papel { background: #F2F0E4; border-radius: var(--radio); padding: 22px 22px 16px; }
.duo__foto--papel img { border-radius: 0; }
.duo__foto--papel figcaption { color: #5E5670; text-align: center; }
.sirve__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }

/* El video de 28 s. */
.video-explica { display: grid; gap: 28px; align-items: center; }
.video-explica__video {
  width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto;
  border-radius: var(--radio); background: #1B1330; box-shadow: var(--sombra); display: block;
}
.video-explica__texto h2 { margin-top: 12px; }
.video-explica__texto p { color: var(--texto-2); margin-top: 12px; max-width: 520px; }
@media (min-width: 900px) { .video-explica { grid-template-columns: 300px 1fr; gap: 64px; } }

/* Cómo empiezas: cuatro pasos con foto. */
.seccion__titulo--fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; max-width: none; }
.pasos-foto { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 620px) { .pasos-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasos-foto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.paso-foto {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px);
  overflow: hidden; display: flex; flex-direction: column;
}
.paso-foto__visual { position: relative; aspect-ratio: 4 / 3; }
.paso-foto__visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paso-foto__img--derecha { object-position: right center; }
/* El teléfono va sobre el borde derecho, donde la foto está libre: sobre el
   seto en el paso 3, sobre el tablero del auto en el 4. */
.paso-foto__tel { position: absolute; right: 8px; bottom: 8px; z-index: 1; }
.paso-foto__tel .kf-tel { --w: 68px; --giro-y: 0deg !important; --giro-x: 0deg !important; }
.paso-foto__tel .kf-tel__sombra { display: none; }
.paso-foto__texto { padding: 20px 22px 24px; }
.paso-foto__texto h3 { font-size: 21px; display: flex; align-items: center; gap: 10px; }
.paso-foto__n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--kofur-primario); color: var(--kofur-sobre-primario);
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
}
.paso-foto__texto > p { color: var(--texto-2); margin-top: 8px; font-size: 15.5px; }
.paso-foto__texto .enlace-flecha { margin-top: 8px; }

/* Planes: el equipo en morado, como cuarta tarjeta y separado de los planes. */
.planes { gap: 16px; }
.plan--equipo { background: var(--kofur-primario); border-color: var(--kofur-primario); color: #fff; }
.plan--equipo h3, .plan--equipo .plan__precio { color: #fff; }
.plan--equipo .plan__quien, .plan--equipo .plan__iva, .plan--equipo .plan__lista li { color: rgba(255, 255, 255, .88); }
.plan--equipo .plan__lista li::before { border-color: #fff; }
@media (min-width: 700px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan--equipo { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .planes { grid-template-columns: 1fr 24px repeat(3, 1fr); }
  .plan--equipo { grid-column: 1; }
  .planes > :nth-child(2) { grid-column: 3; }
  .planes .tarjeta { padding: 24px 20px; }
  .planes .plan__precio { font-size: 30px; }
  .planes .plan__precio small { display: block; font-size: 14px; margin-top: 4px; }
}
@media (min-width: 1300px) { .planes { margin-inline: -60px; } }

/* ¿No es una casa? */
.lugares-foto { display: grid; gap: 16px; }
@media (min-width: 760px) { .lugares-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.lugar-foto {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px);
  background: var(--superficie); color: var(--texto);
}
.lugar-foto img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }
.lugar-foto__texto { padding: 16px 20px 20px; display: grid; gap: 4px; }
.lugar-foto__texto strong { font-size: 19px; display: inline-flex; align-items: center; gap: 6px; color: var(--kofur-primario-texto); }
.lugar-foto__texto span { color: var(--texto-2); font-size: 15px; }
.lugar-foto:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* En un teléfono, las tarjetas de promesas, pasos y lugares van en una fila
   que se desliza hacia el lado en vez de apilarse: la portada no crece. */
@media (max-width: 619.98px) {
  .promesas, .pasos-foto, .lugares-foto {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 0 16px 10px; scrollbar-width: none;
  }
  .promesas::-webkit-scrollbar, .pasos-foto::-webkit-scrollbar, .lugares-foto::-webkit-scrollbar { display: none; }
  .promesa, .paso-foto, .lugar-foto { flex: 0 0 82%; scroll-snap-align: start; }
}