/* ============================================================
   QRonline — Landing (apple-design)
   Estética: superficie limpia, tipografía de sistema, materiales
   translúcidos, muelles críticos y hover con puertas (hover only).
   ============================================================ */

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  /* El azul de la marca: el del logotipo, #3e61aa (RGB 62 97 170). Antes era
     el azul de acción de Apple (#0071e3), que estaba bien pero no era nuestro.
     Sobre blanco da 6,01 : 1 —mejor que el 4,70 de aquel—, así que se gana
     contraste al cambiarlo, tanto de enlace como de botón con texto blanco. */
  --accent: #3e61aa;
  --accent-press: #314d87;  /* el mismo tono, más oscuro, para el pulsado */
  /* ⚠️ Este NO se toca: es el azul de la marca GOOGLE, no la nuestra. Se usa
     donde se representa a Google, y cambiarlo sería pintar su logotipo de otro
     color. */
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC04;
  --google-green: #34A853;
  /* Verde de TEXTO para lo que abarata una opción. No vale
     `--google-green`: es el de la marca y sobre blanco da 3,06 : 1, por
     debajo del 4,5 que pide un texto de 12 px. Este da 5,39. */
  --ahorro: #1f7a37;
  --star: #FBBC04;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 30px 70px rgba(0,0,0,.16);
  --radius: 18px;
  --radius-lg: 28px;
  --nav-h: 52px;
  /* La medida del contenido. Ya NO es fija: en una pantalla grande la web se
     quedaba en una columna de 1120 px con dos márgenes enormes a los lados.
     Ahora crece con la ventana y se para en 1440. Ojo al mínimo: por debajo
     de 1120/0,76 ≈ 1474 px de ventana manda el `1120px`, así que en un
     portátil todo queda EXACTAMENTE igual que antes; solo cambia de ahí
     para arriba. */
  --maxw: clamp(1120px, 76vw, 1440px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.4, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #161617;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #86868b;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    /* En oscuro el azul del logotipo se queda corto: sobre el fondo del tema da
       3,01 : 1, por debajo del 4,5 que pide un texto. Se sube la luminosidad
       del MISMO tono (H 221°, S 47%) hasta 5,54 : 1, así que se sigue leyendo
       como el azul de la marca sin dejar de leerse. */
    --accent: #718ecb;
    --accent-press: #3e61aa;   /* el del logotipo, que aquí hace de pulsado */
    --ahorro: #5ec97a;   /* 8,1 : 1 sobre el fondo oscuro */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.55);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Nav translúcida ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; }
/* El logo de la marca. Es un SVG que trae dentro su propia media query, así
   que en tema oscuro se aclara solo: un fichero para los dos temas. */
.brand__logo { height: 26px; width: auto; display: block; }
/* La nav es sticky: sin esto, saltar a #comprobador deja el título pegado
   (o tapado) por la barra. scroll-margin-top reserva ese hueco. */
section[id], header[id], #top { scroll-margin-top: calc(var(--nav-h) + 20px); }

.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { font-size: 14px; color: var(--text-2); transition: color .2s var(--ease-out); }
.nav__links a:hover { color: var(--text); }
.nav__links a.nav__casa { display: inline-flex; align-items: center; }   /* el icono, sin línea base de texto */
.nav__links a.nav__cta {   /* más específico que `.nav__links a`, o su gris gana */
  font-size: 14px; font-weight: 500;
  background: var(--accent); color: #fff;
  padding: 7px 15px; border-radius: 980px;
  transition: transform .1s var(--ease-out), background .2s;
}
.nav__cta:active { transform: scale(.96); background: var(--accent-press); }

/* ---------- Carrito flotante (botón + panel lateral) ---------- */
.cartfab {
  /* `--ckb-h` es la altura real del banner de cookies, que la mide `cookies.js`
     y vale 0px mientras no haya banner. Un número fijo no servía: el banner
     mide una línea en escritorio y cuatro en móvil, y el carrito se plantaba
     encima del texto justo cuando hay que leerlo. */
  position: fixed; right: 24px; bottom: calc(24px + var(--ckb-h, 0px)); z-index: 400;
  transition: bottom .25s var(--ease-out);
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .18s var(--spring), box-shadow .2s;
}
.cartfab:hover { transform: scale(1.06); }
.cartfab:active { transform: scale(.94); }
.cartfab__n {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px;
  padding: 0 6px; box-sizing: border-box; display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  border-radius: 980px; border: 2px solid var(--bg);
}
.cartfab__n.bump { animation: cartBump .45s var(--spring); }
@keyframes cartBump {
  0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); }
}

.cartov {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.32); opacity: 0;
  transition: opacity .3s var(--ease-out);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cartov.is-open { opacity: 1; }

.cartpanel {
  position: fixed; top: 0; right: 0; z-index: 600;
  width: 380px; max-width: 92vw; height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,.16);
  transform: translateX(100%);
  transition: transform .38s var(--spring);
  visibility: hidden;
}
.cartpanel.is-open { transform: translateX(0); visibility: visible; }

.cartpanel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.cartpanel__head h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.cartpanel__uds { color: var(--text-3); font-weight: 400; font-size: 13.5px; }
.cartpanel__close {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-2); font-size: 15px; font-family: inherit;
  transition: background .2s, color .2s;
}
.cartpanel__close:hover { background: var(--surface-2); color: var(--text); }

.cartpanel__body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cartpanel__vacio { text-align: center; padding: 48px 10px; color: var(--text-2); font-size: 14.5px; }
.cartpanel__vacio svg { color: var(--border-strong); margin-bottom: 12px; }

.citem { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.citem:last-child { border-bottom: 0; }
.citem__img { width: 54px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.citem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.citem__nom { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.citem__ops { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.citem__pu { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.citem__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.citem__precio { font-size: 14px; font-weight: 600; white-space: nowrap; }
.citem__cant { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: 980px; padding: 2px; }
.citem__cant button {
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text); font-size: 14px; line-height: 1; font-family: inherit;
}
.citem__cant button:hover { background: var(--surface-2); }
.citem__cant span { min-width: 20px; text-align: center; font-size: 13px; font-weight: 600; }

.cartpanel__foot { padding: 16px 20px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.cartpanel__tot { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 10px; font-size: 13.5px; }
.cartpanel__tot dt { color: var(--text-2); }
.cartpanel__tot dd { margin: 0; text-align: right; }
.cartpanel__falta { margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.cartpanel__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--border); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cartpanel__ir { width: 100%; margin: 14px 0 8px; justify-content: center; }
.cartpanel__ver { display: block; text-align: center; font-size: 13px; color: var(--text-2); text-decoration: none; }
.cartpanel__ver:hover { color: var(--text); }

body.cart-abierto { overflow: hidden; }   /* que no scrollee la página detrás */
@media (max-width: 720px) { .nav__links a:not(.nav__cta) { display: none; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 500; line-height: 1;
  padding: 14px 26px; border-radius: 980px; border: 0; cursor: pointer;
  font-family: inherit;
  transition: transform .1s var(--ease-out), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:active { background: var(--accent-press); }
.btn--ghost { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.btn--lg { font-size: 17px; padding: 16px 30px; }

/* ---------- Hero ---------- */
.hero { padding: 74px 0 96px; text-align: center; overflow: hidden; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 980px; box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.hero__eyebrow .stars { color: var(--star); letter-spacing: 1px; }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 700;
  margin: 0 auto 18px; max-width: 14ch;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--google-blue), var(--google-green) 45%, var(--google-yellow) 70%, var(--google-red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* La medida sube de 40ch a 66ch: con 40 la frase se partía en tres renglones y
   Paco la quiere en dos. 66ch es lo que necesita la primera frase para caber
   entera en una línea a este cuerpo; el remate ocupa la segunda él solo. */
.hero p.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--text-2);
  max-width: 66ch; margin: 0 auto 30px; line-height: 1.45;
}
/* En bloque, no `font-weight` a secas: es lo que le garantiza su renglón. */
.hero p.lead .lead__remate { display: block; color: var(--text); font-weight: 600; }
/* ⚠️ Este margen NO es decoración. Los dos botones van justo debajo de la
   promoción, y sin él quedaban pegados a los logotipos de pago: se leían como
   una fila más del panel de compra, cuando son de la página. El aire es lo
   único que dice que ahí se acaba el producto y empieza otra cosa. */
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
             margin-top: clamp(56px, 6vw, 104px); }
.hero__note { margin-top: 16px; font-size: 13px; color: var(--text-3); }

/* Producto flotante del hero */
.hero__stage { margin-top: 52px; display: flex; justify-content: center; perspective: 1200px; }
.plaque {
  position: relative; width: min(320px, 82vw); aspect-ratio: 1 / 1.15;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #d8a566, #b5793a 55%, #8a5a28);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: #fff; text-align: center; padding: 30px;
}
.plaque::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 40%);
  pointer-events: none;
}
.plaque__stars { color: #fff; font-size: 26px; letter-spacing: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.plaque__qr {
  width: 128px; height: 128px; border-radius: 14px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color: #1d1d1f;
}
.plaque__qr svg { width: 96px; height: 96px; }
.plaque__label { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.plaque__sub { font-size: 12px; opacity: .82; }

/* ==========================================================================
   Promoción de portada (Marketing → Portada)
   ==========================================================================
   La placa a la izquierda y el panel de compra a la derecha. Se administra en
   el panel y puede haber varias; con dos o más salen las flechas.

   ⚠️ La regla que manda aquí: al cambiar de promoción **solo se mueven la foto
   y la línea fina**. Todo lo demás está clavado, y por eso el alto de la foto
   va por `aspect-ratio` y no por el contenido: si dependiera de la imagen, cada
   flecha daría un salto de layout y el botón de comprar se movería debajo del
   dedo.
   ========================================================================== */
.promo {
  position: relative;
  margin-top: 56px;
  display: grid; gap: clamp(20px, 4vw, 56px);
  grid-template-columns: 1fr;
  text-align: left;                 /* el hero va centrado; esto no */
  align-items: center;
}
@media (min-width: 900px) { .promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ⚠️ El hueco de las flechas NO se le quita al contenido. Se probó con
   `padding-inline` y el efecto fue que la foto encogía —de 528 a 410 px a 1280—
   para hacerle sitio a dos flechas. Ahora se van FUERA del bloque, al margen
   que la página ya deja a los lados, y la placa se queda con todo su ancho.
   El precio de hacerlo así es que por debajo de 1280 px no hay margen que
   aprovechar; ahí las flechas bajan a su fila (ver más abajo). */
@media (min-width: 1280px) {
  .promo {
    padding-bottom: 52px;             /* el sitio de los puntos */
    /* Lo que sobra a cada lado de la página, menos 16 px para no pegarse al
       borde de la pantalla. Tope de 170 px: en un monitor muy ancho el margen
       es enorme y las flechas acabarían tan lejos que no parecerían del
       bloque. */
    --promo-fuera: clamp(86px, calc((100vw - var(--maxw)) / 2 + 6px), 170px);
  }
}

/* ---- La foto ---- */
/* `aspect-ratio` con la medida de la plantilla de Paco (1400 × 1371). Las fotos
   se apilan una encima de otra: solo se ve la activa, y así el barrido puede
   enseñar la que entra y la que sale a la vez. */
.promo__foto {
  position: relative; width: 100%;
  aspect-ratio: 1400 / 1371;
}
.promo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  /* Fuera de vista, recortada por la derecha. La activa la abre a `inset(0)`. */
  clip-path: inset(0 0 0 100%);
  opacity: 0; pointer-events: none;
}
.promo__img.is-on { clip-path: inset(0); opacity: 1; }
/* El barrido. Se enciende desde el JS (clase `is-anim` en el contenedor) para
   que la primera pintada no anime: si animara al cargar, la placa entraría
   sola en una portada que nadie ha tocado. */
.promo.is-anim .promo__img {
  transition: clip-path .58s var(--ease-out), opacity .28s linear;
}
/* Hacia atrás el barrido va al revés, si no la flecha izquierda «empuja» hacia
   la derecha y se lee como si avanzara. */
.promo.is-atras .promo__img:not(.is-on) { clip-path: inset(0 100% 0 0); }

/* En oscuro la foto lleva su sombra blanca quemada dentro del PNG, y sobre
   negro se ve como una mancha. Se le pone una superficie clara detrás — el
   sitio no tiene selector de tema, pero el navegador del cliente sí. */
@media (prefers-color-scheme: dark) {
  .promo__foto {
    background: #f5f5f7; border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }
}

/* ---- Las flechas ---- */
/* ⚠️ Son del bloque entero, no de la foto. Pegadas a la imagen significaban
   «otra foto del mismo producto», que es lo contrario de lo que hacen. Sin
   círculo y grandes —como en la portada de LFDP—: un círculo pequeño es el
   gesto de una galería, y esto cambia de producto.
   El trazo lo escala el propio SVG (viewBox de 24 a 46 px), así que a este
   tamaño sale fino sin tocar `stroke-width`. */
.promo__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 56px; height: 56px;          /* área de pulsación, no dibujo */
  background: none; border: 0; padding: 0;
  color: var(--text-3); cursor: pointer;
  transition: color .22s var(--ease-out), transform .3s var(--spring);
}
.promo__nav--izq { left: calc(-1 * var(--promo-fuera, 0px)); }
.promo__nav--der { right: calc(-1 * var(--promo-fuera, 0px)); }
@media (hover: hover) {
  .promo__nav:hover { color: var(--text); }
  /* Se aparta hacia donde lleva: dice a dónde vas antes de pulsarla. */
  .promo__nav--izq:hover { transform: translate(-5px, -50%); }
  .promo__nav--der:hover { transform: translate(5px, -50%); }
}
.promo__nav:active { color: var(--accent); }
.promo__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* ---- Los puntos ---- */
/* El punto de verdad es el <span>: el <button> es solo el área de pulsación,
   de 24 px, porque un blanco de 8 px no se acierta con el dedo. */
.promo__dots { display: flex; gap: 4px; align-items: center; justify-content: center; }
.promo__dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.promo__dot span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
  transition: background .25s var(--ease-out), transform .3s var(--spring);
}
.promo__dot.is-on span { background: var(--accent); transform: scale(1.35); }
@media (hover: hover) { .promo__dot:not(.is-on):hover span { background: var(--text-3); } }
.promo__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }

/* A partir de 1280 el envoltorio desaparece (`display: contents`) y las dos
   flechas se cuelgan fuera del bloque; los puntos se van abajo del todo,
   centrados en el bloque entero. */
@media (min-width: 1280px) {
  .promo__navs { display: contents; }
  .promo__dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
}

/* Por debajo no hay hueco a los lados, así que bajan a una fila propia debajo
   de la foto. Siguen fuera de la imagen —que era el problema— y no tapan la
   placa, que es lo que se ha venido a mirar. */
@media (max-width: 1279px) {
  /* Aquí no hay margen que aprovechar a los lados, así que la fila es
     «‹ • • ›»: flechas y puntos juntos, debajo de la foto. Sigue estando fuera
     de la imagen —que era el problema— y no le quita ni un píxel. */
  .promo__navs {
    display: flex; gap: 4px; justify-content: center; align-items: center;
    grid-row: 2; grid-column: 1;
  }
  .promo__foto  { grid-row: 1; grid-column: 1; }
  .promo__panel { grid-row: 3; grid-column: 1; }
  .promo__nav { position: static; transform: none; width: 54px; height: 54px; }
  @media (hover: hover) {
    .promo__nav--izq:hover, .promo__nav--der:hover { transform: none; }
  }
}
/* Entre 900 y 1279 el bloque ya son dos columnas: la fila de flechas se queda
   debajo de la foto, en su columna, y el panel ocupa la otra entera. */
@media (min-width: 900px) and (max-width: 1279px) {
  .promo__panel { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---- El panel ---- */
.promo__titulo {
  font-size: clamp(28px, 4.2vw, 42px); letter-spacing: -0.025em;
  line-height: 1.06; margin: 0; font-weight: 700;
}
/* La línea fina. Va en 300 SIEMPRE —es la que pidió Paco «siempre fino»— y en
   el mismo cuerpo que el título, para que las dos se lean como una sola cosa
   de dos pisos. */
.promo__linea {
  position: relative; margin: 2px 0 24px;
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1.12; color: var(--text-2);
  min-height: 1.12em;                /* el hueco no se encoge si una está vacía */
}
.promo__linea-t {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  clip-path: inset(0 0 0 100%); opacity: 0;
}
.promo__linea-t.is-on { position: static; clip-path: inset(0); opacity: 1; }
.promo.is-anim .promo__linea-t {
  transition: clip-path .58s var(--ease-out), opacity .28s linear;
}
.promo.is-atras .promo__linea-t:not(.is-on) { clip-path: inset(0 100% 0 0); }

.promo__ventajas { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 15px; }
.promo__ventajas li { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; }
.promo__vic { color: var(--accent); display: grid; place-items: center; padding-top: 1px; }
.promo__ventajas strong { display: block; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.promo__vtxt { display: block; color: var(--text-2); font-size: 14px; margin-top: 1px; }

.promo__precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.promo__precio strong { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.03em; font-weight: 700; }
.promo__ud { color: var(--text-2); font-size: 14.5px; }
/* El verde de texto de la casa, el que sí contrasta. Ver --ahorro. */
.promo__ahorro { color: var(--ahorro); font-size: 14.5px; font-weight: 600; }

/* ---- Los packs ---- */
.promo__packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.promo__pack {
  position: relative; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: 14px; padding: 12px 10px; text-align: center;
  font: inherit; color: var(--text);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--spring);
}
@media (hover: hover) { .promo__pack:hover { border-color: var(--accent); } }
.promo__pack:active { transform: scale(.97); }
.promo__pack.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.promo__pack-n { display: block; font-weight: 600; font-size: 14.5px; }
.promo__pack-p { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.promo__pct {
  position: absolute; top: -9px; right: -6px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 2px 7px; border-radius: 980px;
}
.promo__iva { color: var(--text-3); font-size: 12.5px; margin: 0 0 22px; }

/* ---- Comprar ---- */
.promo__compra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.promo__cant {
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 980px; overflow: hidden;
}
.promo__mas {
  width: 42px; height: 46px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 19px; color: var(--text); line-height: 1;
  transition: background .18s var(--ease-out);
}
@media (hover: hover) { .promo__mas:hover { background: var(--surface-2); } }
.promo__mas:disabled { opacity: .35; cursor: default; }
/* `tabular-nums` para que el ancho no baile al pasar de 9 a 10. */
.promo__n {
  width: 34px; border: 0; background: none; text-align: center;
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
}
.promo__comprar { flex: 1; min-width: 180px; }
/* Los logos de pago son un pie de página del panel, no otro control: pegados al
   botón se leían como una fila más de botones. Con este aire quedan claramente
   debajo, que es lo que son. */
.promo__pagos { display: flex; gap: 14px; align-items: center; margin-top: 40px; color: var(--text-3); flex-wrap: wrap; }
.promo__pagos .pay__logo { height: 34px; }

/* El descuento por pack, en la línea del carrito. Va en el verde de TEXTO de
   la casa (--ahorro), no en el de la marca de Google: sobre blanco aquel da
   3,06 : 1 y esto es texto de 12,5 px. */
/* Los packs en la ficha de producto. Reutilizan `.promo__pack` —es el mismo
   control y tiene que verse igual en los dos sitios—; esto solo los coloca. */
.ficha__packs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin: 18px 0 8px;
}
.ficha__packnota { color: var(--ahorro); font-size: 13px; font-weight: 600; margin: 0 0 16px; }

.cline__pack { display: block; color: var(--ahorro); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.cline__pack s { color: var(--text-3); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .promo.is-anim .promo__img,
  .promo.is-anim .promo__linea-t { transition: opacity .2s linear !important; }
  .promo__nav, .promo__pack, .promo__mas { transition: none; }
}

/* ---------- Comprobador ---------- */
.checker { padding: 34px 0 10px; }
.checker__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 36px clamp(22px, 5vw, 48px); text-align: center;
  position: relative; overflow: hidden;
}
.checker__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--google-blue);
  background: color-mix(in srgb, var(--google-blue) 12%, transparent);
  padding: 5px 12px; border-radius: 980px; margin-bottom: 16px;
}
.checker h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 8px; }
.checker p { color: var(--text-2); margin: 0 auto 24px; max-width: 46ch; }
.checker__form {
  display: flex; gap: 10px; max-width: 520px; margin: 0 auto; flex-wrap: wrap;
}
.checker__input {
  flex: 1 1 240px; font-size: 16px; font-family: inherit;
  padding: 15px 18px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.checker__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.checker__hint { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.checker__note {
  margin-top: 18px; font-size: 12px; color: var(--text-3);
  border-top: 1px dashed var(--border); padding-top: 14px;
}

/* ---------- Sección genérica ---------- */
.section { padding: 64px 0; }
.section__head { text-align: center; margin-bottom: 42px; }
.section__head h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.025em; margin: 0 0 10px; }
.section__head p { color: var(--text-2); font-size: 1.05rem; margin: 0 auto; max-width: 44ch; }

/* ---------- Grid de productos ---------- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* La parrilla de destacados de la portada. Son 4 tarjetas fijas (tope del
   panel) y con `auto-fill` el contenedor ancho abría una quinta columna vacía
   y las cuatro se quedaban pegadas a la izquierda. `auto-fit` colapsa las
   columnas que sobran y reparte el ancho entre las que hay: llenan la fila y
   quedan centradas por construcción. La tienda sigue con `auto-fill`, que
   ahí la última fila corta es lo normal. */
.grid--destacados { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
}
.card__media {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--card-accent) 16%, var(--surface-2)), var(--surface-2));
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; }
.card__ph {
  width: 92px; height: 92px; border-radius: 16px; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  color: #1d1d1f;
}
.card__ph svg { width: 66px; height: 66px; }
.card__badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--badge-color, var(--card-accent)); padding: 4px 10px; border-radius: 980px;
  box-shadow: var(--shadow-sm);
}
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.card__sub { font-size: 13.5px; color: var(--text-2); line-height: 1.4; flex: 1; }
.card__material {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 3px;
}
/* Cada dato es una isla icono+texto: si la tarjeta se estrecha, envuelve por
   parejas y nunca deja el icono huérfano en la línea de arriba. */
.card__material > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.card__price { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.card__price small { display: block; font-size: 11px; font-weight: 400; color: var(--text-2);
  letter-spacing: 0; line-height: 1.1; margin-bottom: -1px; }
.card__actions { display: flex; align-items: center; gap: 6px; }
.card__add {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: #fff; background: var(--accent);
  border: 0; border-radius: 980px; padding: 8px 13px 8px 10px; cursor: pointer; font-family: inherit;
  transition: transform .1s var(--ease-out), background .2s;
}
.card__add:active { transform: scale(.94); background: var(--accent-press); }
.card__info {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  color: var(--text-2); background: transparent;
  border: 1px solid var(--border-strong); border-radius: 50%; padding: 0;
  cursor: pointer; font-family: inherit; transition: transform .1s var(--ease-out), border-color .2s, background .2s, color .2s;
}
.card__info:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .card__info:hover { border-color: var(--text-3); background: var(--surface-2); color: var(--text); }
}

/* Iconos SVG inline: se alinean con el texto y heredan su color. */
.ic { flex: 0 0 auto; display: block; }
.checker__badge .ic, .trust__badges .ic { display: inline-block; vertical-align: -3px; margin-right: 2px; }
.step__n .ic { display: block; }

.section__more { text-align: center; margin-top: 36px; }

/* ---------- Tooltips (componente compartido con el panel) ---------- */
/* Van en <body> con position:fixed: las tarjetas tienen overflow:hidden y
   un tooltip hecho con ::after dentro de la tarjeta se recortaría. */
.tip {
  position: fixed; left: 0; top: 0; z-index: 300;
  max-width: 240px; padding: 7px 11px;
  background: var(--text); color: var(--bg);
  font-size: 12.5px; font-weight: 500; line-height: 1.35; text-align: center;
  border-radius: 9px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(3px); pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
}
.tip.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.tip::after {
  content: ''; position: absolute; left: var(--tip-ax, 50%); top: 100%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: inherit; transform: rotate(45deg); border-radius: 1px;
}
.tip--abajo::after { top: 0; }

/* ---------- Resultado del comprobador ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.checker__result { margin-top: 22px; text-align: left; }
.cres__msg { margin: 0; text-align: center; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.cres__link { color: var(--accent); text-decoration: none; font-weight: 500; }
.cres__link:hover { text-decoration: underline; }
.cres__title { margin: 0 0 14px; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.cres {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.cres__main { min-width: 0; flex: 1 1 220px; }
.cres__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.cres__addr { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.cres__meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cres__stars { color: #FBBC04; letter-spacing: 1px; }
.cres__rating { font-weight: 600; }
.cres__count { color: var(--text-3); }
.cres__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.cres__ver { font-size: 13px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.cres__ver:hover { color: var(--text); text-decoration: underline; }
.cres__copy.is-done { background: #34A853; }
.cres__aviso {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); text-align: center;
}
.cres__aviso strong { color: var(--text); }
.btn--sm { padding: 7px 14px; font-size: 13.5px; }
.cres__foot {
  margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-2);
}

/* ==========================================================================
   Tienda (catálogo) y ficha de producto
   ========================================================================== */
.phead { padding: 108px 0 8px; }
.phead h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.02em; margin: 6px 0 10px; }
/* La misma medida que el cuerpo de las páginas legales (720 px): la entradilla
   cae justo encima de ese texto y, si mide distinto, se nota. */
.phead .lead { max-width: min(100%, 720px); margin: 0; }
.section--tight { padding-top: 26px; }
.tienda__count { margin: 0 0 16px; font-size: 13.5px; color: var(--text-3); }
.tienda__reset { margin-left: 10px; color: var(--accent); text-decoration: none; }
.tienda__reset:hover { text-decoration: underline; }
.tienda__vacio { margin: 30px 0; font-size: 15px; color: var(--text-2); text-align: center; }
.tienda__vacio a { color: var(--accent); }

/* ---------- Filtros y buscador de la tienda ---------- */
/* Es un <form> de verdad con enlaces de verdad: sin JavaScript filtra igual,
   recargando. El JS solo se adelanta para que no parpadee. */
.filtros { display: grid; gap: 14px; margin: 0 0 20px; }
.filtros__buscar { position: relative; display: flex; align-items: center; max-width: 420px; }
.filtros__lupa { position: absolute; left: 13px; display: grid; place-items: center; color: var(--text-3); pointer-events: none; }
.filtros__q {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  padding: 11px 14px 11px 40px; border: 1px solid var(--border-strong);
  border-radius: 980px; background: var(--surface);
  /* Sin esto el navegador pinta el campo con SU tema y no con el nuestro: es
     la que siempre se olvida (misma norma que los <select> del proyecto). */
  color-scheme: light dark;
  transition: border-color .2s, box-shadow .2s;
}
.filtros__q:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.filtros__q::-webkit-search-cancel-button { cursor: pointer; }
/* El botón «Buscar» solo existe para quien no tiene JavaScript: con JS la
   lista se filtra al teclear y el botón sobra. Lo esconde landing.js. */
.filtros__ir { margin-left: 8px; font: inherit; font-size: 14px; font-weight: 500;
  color: #fff; background: var(--accent); border: 0; border-radius: 980px;
  padding: 10px 16px; cursor: pointer; white-space: nowrap; }

.filtros__eje { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filtros__lbl { font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-right: 3px; }

.chipf {
  display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none;
  font-size: 13.5px; color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 980px; padding: 7px 13px;
  transition: background .2s, border-color .2s, color .2s;
}
.chipf:hover { color: var(--text); border-color: var(--text-3); }
.chipf.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
.chipf__n { font-size: 11.5px; color: var(--text-3); }
.chipf.is-on .chipf__n { color: rgba(255,255,255,.75); }
/* Un chip que llevaría a cero resultados: apagado, pero sigue siendo un enlace
   —no se esconde— para que no baile la fila entera al escribir en el buscador. */
.chipf.is-vacio { opacity: .38; }
.chipf--hija { font-size: 12.5px; padding: 6px 11px; }

/* Las hijas van pegadas a su madre con una rayita, igual que en el panel. */
.filtros__eje .chipf--hija:first-of-type { margin-left: -1px; }

/* Cada tarjeta va en su envoltorio para poder esconderla sin tocar la tarjeta,
   que la comparten la portada y la tienda. */
.grid__it { display: flex; min-width: 0; }
.grid__it > .card { flex: 1; min-width: 0; }
.grid__it[hidden] { display: none; }

/* ---------- Navegación entre etiquetas (pie de la página de etiqueta) ---------- */
.etnav__t { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 14px; }
.etnav { display: flex; gap: 9px; flex-wrap: wrap; }
.etnav__a {
  display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none;
  font-size: 14px; color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: 980px; padding: 8px 15px;
  transition: border-color .2s, color .2s;
}
.etnav__a:hover { color: var(--text); border-color: var(--text-3); }
.etnav__a span { font-size: 12px; color: var(--text-3); }

.crumbs { font-size: 13px; color: var(--text-3); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }

/* La tarjeta ahora enlaza: que el enlace no pinte de azul ni subraye. */
.card__media { display: block; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; }

/* ---------- Ficha ---------- */
.ficha__oculto {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin: 78px auto 0; max-width: var(--maxw); padding: 12px 18px;
  background: color-mix(in srgb, #f0b429 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #f0b429 34%, transparent);
  font-size: 13.5px; color: var(--text-2); text-align: center;
}
.ficha__oculto strong { color: var(--text); }
.ficha__oculto + .ficha { padding-top: 24px; }

.ficha { padding: 100px 0 40px; }
.ficha__grid { display: grid; gap: 34px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 860px) { .ficha__grid { grid-template-columns: 1.05fr .95fr; gap: 44px; } }

.fgal__main {
  aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.fgal__main img, .fgal__main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgal__main--ph { display: grid; place-items: center; color: var(--text-3); }
.fgal__main--ph svg { width: 42%; }
.fgal__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fgal__thumb {
  width: 68px; aspect-ratio: 4 / 3; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  display: grid; place-items: center; color: var(--text-2);
  transition: border-color .2s, transform .1s var(--ease-out);
}
/* `min-width/height: 0` NO es adorno: sin ellos, una foto que no sea 4:3 rompe
   el encuadre. La imagen es un grid item, y un grid item tiene un «tamaño mínimo
   automático» igual a su contenido, que gana sobre el `height: 100%`. Con una
   foto cuadrada (1024×1024) la imagen se dimensionaba por su ancho, se salía por
   abajo y el `overflow` la recortaba SOLO ahí: la miniatura enseñaba el trozo de
   ARRIBA mientras la principal —que no es grid— enseñaba el del CENTRO, y la
   misma foto parecía descuadrada según dónde se mirase. En el carrusel era peor:
   el slide perdía el 4:3 y se volvía cuadrado. Con el mínimo a 0 manda el
   `object-fit: cover` y las cuatro cajas recortan igual, centrado. */
.fgal__thumb img { width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }
.fgal__thumb.is-on { border-color: var(--accent); }
.fgal__thumb:active { transform: scale(.95); }

/* ---------- Vídeos de la ficha ---------- */
/* Mismo tamaño y peso que el rótulo de un grupo de opciones («Tecnología»,
   «Color»), que es lo que lo hace parecer parte de la ficha y no un anuncio.
   La diferencia es que este SE PULSA, y eso hay que verlo sin pasar el ratón
   por encima: por eso va el color de acento y el triángulo de play. En el móvil
   no hay hover, y un texto gris idéntico a los rótulos de al lado no lo pulsa
   nadie. */
.fvid { margin-top: 12px; }
.fvid__btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--accent); background: transparent; border: 0; padding: 4px 0;
  transition: opacity .2s, transform .1s var(--ease-out);
}
.fvid__btn:hover { opacity: .78; }
.fvid__btn:active { transform: scale(.96); }
.fvid__btn .ic { flex: none; }

/* El ancho del modal sale de la ALTURA disponible y de la proporción del vídeo,
   no de un número fijo. A 860 px de ancho un 9:16 se va a 1.460 px de alto: no
   cabe en ninguna pantalla. Y hacerlo al revés —limitar el alto del reproductor
   y dejar el ancho quieto— no encoge nada, aplasta el vídeo.
   `--vnum` es la proporción en número (ancho ÷ alto) y la pone el JS con la del
   vídeo que se está viendo, así que esto vale igual para un 16:9, un 9:16 o un
   4:5. El 1.7778 de reserva es 16:9, por si el JS no llegara a ejecutarse.
   El 70vh deja sitio para la cabecera, las flechas y el «Ver en …». */
.vmodal {
  border: 0; padding: 0; background: transparent; color: var(--text);
  max-width: min(860px, calc(70vh * var(--vnum, 1.7778)));
  width: calc(100% - 32px); max-height: 92vh; border-radius: var(--radius-lg);
  overflow: visible;
}
.vmodal::backdrop {
  background: rgba(0,0,0,.6);
  backdrop-filter: saturate(140%) blur(6px);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.vmodal[open]::backdrop { opacity: 1; }
.vmodal__box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 16px 18px 14px; max-height: 92vh; overflow-y: auto;
}
.vmodal[open] .vmodal__box { animation: pmodal-in .34s var(--spring) both; }
.vmodal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vmodal__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; flex: 1; min-width: 0; }
.vmodal__close {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .1s var(--ease-out);
}
.vmodal__close:hover { background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.vmodal__close:active { transform: scale(.9); }
/* El fondo es negro y no `--surface-2`: los vídeos verticales de TikTok y de
   Instagram no llenan la caja, y contra un gris claro las bandas de los lados
   cantan más que el vídeo. La proporción la pone el JS con `--vratio`, porque
   depende de la plataforma: 16:9 los de YouTube y Vimeo, 9:16 los verticales. */
.vmodal__player {
  aspect-ratio: var(--vratio, 16 / 9); background: #000;
  border-radius: var(--radius); overflow: hidden;
}
.vmodal__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.vmodal__nav {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .1s var(--ease-out);
}
.vmodal__nav:hover { background: var(--surface-2); }
.vmodal__nav:active { transform: scale(.9); }
.vmodal__pos { font-size: 12.5px; color: var(--text-3); min-width: 46px; text-align: center; }
.vmodal__fuente { margin: 10px 0 0; font-size: 12px; color: var(--text-3); text-align: center; }
.vmodal__fuente a { color: inherit; }

/* En el móvil el diálogo ya ocupa casi toda la pantalla: solo se recorta el
   acolchado para que el vídeo gane esos píxeles. */
@media (max-width: 620px) {
  .vmodal__box { padding: 14px 14px 12px; }
}

.ficha__badge {
  display: inline-block; padding: 4px 11px; border-radius: 980px; font-size: 12px; font-weight: 600;
  color: #fff; background: var(--badge-color, var(--accent)); margin-bottom: 12px;
}
.ficha__info h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.02em; margin: 0 0 6px; }
.ficha__sub { margin: 0 0 18px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.ficha__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.ficha__price span { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.ficha__price small { font-size: 12.5px; color: var(--text-3); }

.ficha__opts { margin-bottom: 18px; }
/* Las aclaraciones de los grupos de opciones: con icono y a la vista, encima
   del botón de comprar (ficha) y encima del pie del modal (tienda). Antes eran
   un tooltip colgado de una «?» de 15 px, y así no las leía nadie: en el móvil
   no hay hover, y quien compra desde el teléfono es la mayoría. Mismo lenguaje
   visual que las líneas de envío y devolución.
   El icono se alinea ARRIBA, no al centro: estos textos ocupan dos líneas a
   poco que se alarguen y centrado queda flotando en mitad del párrafo. */
.ficha__notas, .pmodal__notas { list-style: none; padding: 0; display: grid; gap: 8px; }
.ficha__notas li, .pmodal__notas li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.45; color: var(--text-2);
}
.ficha__notas .ic, .pmodal__notas .ic { flex: none; margin-top: 1px; color: var(--text-3); }
/* 20 px de aire a cada lado, medidos en pantalla. Arriba los pone este margen
   entero: colapsa con los 18 de `.ficha__opts` y gana el mayor, no se suman.
   Abajo son 14 + los 6 que ya trae `.ficha__add`. Si se toca uno de los tres
   números, hay que repasar los otros dos. */
.ficha__notas { margin: 20px 0 14px; }

.ficha__optlabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.ficha__optfija { font-size: 14.5px; }
.ficha__optlist { display: flex; gap: 8px; flex-wrap: wrap; }
.fopt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--text); background: transparent;
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 9px 14px;
  transition: border-color .2s, background .2s, transform .1s var(--ease-out);
}
.fopt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* No cabe con lo elegido en otro grupo («solo con»). Se ve, pero apagada y
   con el bocadillo que dice con qué sí: esconderla dejaría al cliente sin
   saber que ese diseño existe con NFC. */
.fopt.is-off { opacity: .42; border-style: dashed; cursor: not-allowed; }
.fopt.is-off:active { transform: none; }
.fopt:active { transform: scale(.96); }
.fopt__plus { font-size: 12px; color: var(--text-3); }
/* Lo que RESTA, en verde: es un ahorro, no un recargo, y en el gris de
   siempre se lee como «otro número» en vez de como una ventaja. */
.fopt__plus--menos { color: var(--ahorro); font-weight: 600; }

.ficha__add { width: 100%; justify-content: center; margin: 6px 0 18px; }
.ficha__meta { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
.ficha__meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.ficha__desc { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.ficha__etiq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin: -8px 0 20px; font-size: 13px; color: var(--text-3); }
.ficha__etiq a { color: var(--text-2); text-decoration: none;
                 border: 1px solid var(--border); border-radius: 980px; padding: 4px 11px;
                 transition: border-color .2s, color .2s; }
.ficha__etiq a:hover { color: var(--text); border-color: var(--text-3); }

.ficha__sec { margin-top: 46px; }
.ficha__sec h2 { font-size: 21px; letter-spacing: -0.01em; margin: 0 0 16px; }
.ficha__ventajas { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ficha__ventajas li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.ficha__ventajas li svg { color: var(--accent); margin-top: 2px; }
.ficha__specs { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; font-size: 14.5px; }
.ficha__specs dt { color: var(--text-2); }
.ficha__specs dd { margin: 0; }

/* Especificaciones por variante — `Material [Blanco]`.
   Sin JS se ven todas las filas y cada una lleva su color al lado. Ese rótulo
   solo se esconde en la fila que el filtro ha acertado (`.is-solo`): ahí ya se
   sabe de qué color se habla. Si el nombre no casa con ninguna opción —una
   errata al escribirlo— se enseñan todas CON su color, que es lo único que las
   distingue. El [hidden] va explícito: son celdas de un grid y conviene no
   depender de la hoja de estilos del navegador. */
.specs__var { color: var(--text-3); font-weight: 400; }
.ficha__specs dt.is-solo .specs__var,
.pmodal__specs dt.is-solo .specs__var { display: none; }
.ficha__specs [hidden],
.pmodal__specs [hidden] { display: none; }
.ficha__faq {
  border-top: 1px solid var(--border); padding: 14px 0;
}
.ficha__faq summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; }
.ficha__faq summary::-webkit-details-marker { display: none; }
.ficha__faq summary::after { content: '+'; float: right; color: var(--text-3); font-size: 18px; line-height: 1; }
.ficha__faq[open] summary::after { content: '−'; }
.ficha__faq p { margin: 10px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
/* FAQ de la portada (paso 169): reutiliza el desplegable de la ficha, en una
   columna estrecha y con línea de cierre abajo. */
.faqp { max-width: 720px; margin: 0 auto; border-bottom: 1px solid var(--border); }
.faqp .ficha__faq summary { font-size: 16px; padding-right: 28px; }
.faqp .ficha__faq p { font-size: 15px; }
/* Plantilla de diseño descargable. El texto manda y el botón va debajo; en
   pantalla ancha se ponen en fila, con el botón sin encogerse. */
.ficha__plantilla { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ficha__plantilla p { margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 1.6; }
.ficha__plantilla .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }

.ficha__volver { margin-top: 42px; text-align: center; }

/* ---------- Carrito ---------- */
.cart__vacio { text-align: center; padding: 40px 0 60px; }
.cart__vacio p { color: var(--text-2); margin: 0 0 18px; }
.cart { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cart { grid-template-columns: 1fr 320px; gap: 36px; } }

.cline {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: 72px 1fr auto auto auto;
  padding: 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.cline__img { display: block; width: 72px; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.cline__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cline__ph { display: grid; place-items: center; height: 100%; color: var(--text-3); }
.cline__ph svg { width: 60%; }
.cline__main { min-width: 0; }
.cline__nombre { font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; letter-spacing: -0.01em; }
.cline__nombre:hover { text-decoration: underline; }
.cline__ops { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.cline__unit { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.cline__cant { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: 980px; padding: 3px; }
.cqty {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text); font-size: 16px; line-height: 1; font-family: inherit;
  transition: background .2s, transform .1s var(--ease-out);
}
.cqty:hover { background: var(--surface-2); }
.cqty:active { transform: scale(.9); }
.cqty__n { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; }
.cline__total { font-size: 15px; font-weight: 600; min-width: 74px; text-align: right; }
.cline__quitar {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-3); font-size: 14px; font-family: inherit;
  transition: color .2s, background .2s;
}
.cline__quitar:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 620px) {
  .cline { grid-template-columns: 60px 1fr auto; grid-template-areas: 'img main quitar' 'img cant total'; }
  .cline__img { grid-area: img; width: 60px; }
  .cline__main { grid-area: main; }
  .cline__cant { grid-area: cant; justify-self: start; } /* sin esto el grid lo estira a toda la columna (paso 150) */
  .cline__total { grid-area: total; }
  .cline__quitar { grid-area: quitar; }
}

.cart__resumen {
  padding: 20px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  position: sticky; top: calc(var(--nav-h) + 16px);
}
.cart__resumen h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -0.01em; }
.cart__tot { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 12px; font-size: 14px; }
.cart__tot dt { color: var(--text-2); }
.cart__tot dd { margin: 0; text-align: right; }
.cart__falta { margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); }
.cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.cart__pagar { width: 100%; margin: 16px 0 10px; }
.cart__seguir { display: block; text-align: center; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.cart__seguir:hover { color: var(--text); }
.cart__meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- Checkout y pago ---------- */
.crumbs__off { color: var(--border-strong); }
.cko { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cko { grid-template-columns: 1fr 320px; gap: 36px; } }
.cko__error {
  margin: 0 0 20px; padding: 12px 16px; border-radius: var(--radius);
  background: color-mix(in srgb, #EA4335 10%, transparent);
  border: 1px solid color-mix(in srgb, #EA4335 30%, transparent);
  font-size: 14px;
}
.cko__bloque {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin: 0 0 18px; background: var(--surface);
}
.cko__bloque--destacado { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cko__bloque legend { padding: 0 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cko__intro { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cko__intro a { color: var(--accent); }
.cko__buscar { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 18px; }

/* Añadido del QR dinámico: una tarjeta pinchable entera, no una casilla suelta
   con letra al lado. El objetivo es que se lea, no que pase desapercibida. */
.extra {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2); cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.extra:hover { border-color: var(--border-strong); }
.extra:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.extra:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.extra input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.extra__cuerpo { display: flex; flex-direction: column; gap: 6px; }
.extra__ttl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
.extra__precio { font-weight: 600; color: var(--accent); white-space: nowrap; }
.extra__txt { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.extra__txt--fino { color: var(--text-3); font-size: 12.5px; }

/* La gestión de placas (019): dejó de ser una casilla y pasó a ser una
   elección de dos o tres. `.extra--ops` es un <fieldset>, así que hay que
   apagarle los estilos que el navegador le pone de fábrica; y NO puede
   heredar el `:has(input:checked)` de `.extra`, porque ahí siempre habrá uno
   marcado —«No, gracias» también es una opción— y el bloque entero se vería
   siempre encendido. */
.extra--ops { display: block; border: 1px solid var(--border); padding: 16px 18px; margin: 0; }
.extra--ops:has(input:checked) { border-color: var(--border); background: none; }
.extra--ops .extra__ttl { margin-bottom: 6px; }
.extra--ops .extra__txt { margin: 0 0 14px; }
/* Desde el 03/09 la gestión es un `.cko__bloque` propio, el quinto del
   checkout, y las opciones cuelgan directamente de él: el primer `.extra__op`
   no necesita el margen de separación que le da la lista. */
.cko__bloque--ops .cko__intro { margin-bottom: 4px; }

.extra__op {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; margin-top: 8px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
@media (hover: hover) { .extra__op:hover { border-color: var(--border-strong); } }
.extra__op:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.extra__op:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.extra__op-t { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
/* En bloque: la aclaración es un segundo renglón, no la coletilla del título. */
.extra__op-d { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.5;
               color: var(--text-2); margin-top: 3px; }
.extra__op-p { font-weight: 600; color: var(--accent); white-space: nowrap; text-align: right; }
.extra__op-ud { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .extra { transition: none; } }
.cko__nota { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
/* Un párrafo de varias líneas con un <strong> dentro: como flex, el <strong>
   se convierte en una caja aparte y el texto sale partido (se vio en «Tu
   diseño» del pedido real, paso 161). El icono va en línea con el texto. */
.cko__nota--texto { display: block; line-height: 1.55; }
/* `.ic` es display:block en todo el sitio (línea 667): sin esto el icono se
   queda solo en su renglón, encima del texto. */
.cko__nota--texto .ic { display: inline-block; vertical-align: -3px; margin-right: 4px; }

.flds { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .flds { grid-template-columns: 1fr; } }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.fld label span { font-weight: 400; color: var(--text-3); }
.fld input, .fld textarea {
  font-family: inherit; font-size: 14.5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.fld textarea { resize: vertical; }
.fld__ayuda { font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.fld__err { font-size: 11.5px; color: #EA4335; }
.fld--err input, .fld--err textarea { border-color: #EA4335; }

.cko__resumen { position: sticky; top: calc(var(--nav-h) + 16px); }
.cko__lineas { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.cko__lineas li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
.cko__cant { color: var(--text-3); }
.cko__nom small { display: block; color: var(--text-3); font-size: 12px; }
.cko__imp { font-weight: 600; }

.cko__aviso {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 10px;
  background: color-mix(in srgb, #f0b429 13%, transparent);
  border: 1px solid color-mix(in srgb, #f0b429 34%, transparent);
  font-size: 12px; line-height: 1.5; color: var(--text-2);
}

/* El «recibido» del diseño: mismo molde que .cko__aviso pero en verde. */
.cko__aviso--ok {
  background: color-mix(in srgb, var(--ok, #1a9c5b) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok, #1a9c5b) 34%, transparent);
}

/* ── Subida del diseño del cliente ───────────────────────────────────────────
   El `<input type="file">` nativo pinta un icono del sistema y un texto que no
   se puede maquetar ni recortar. Se esconde —sin sacarlo del foco del teclado—
   y encima van un botón y el nombre del fichero, que ocupa el ancho sobrante.
   Es la misma regla que ya siguen los `<select>` del proyecto. */
.arte { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.filepick { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; cursor: pointer; }
.filepick__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filepick__btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: border-color .16s ease, background .16s ease;
}
.filepick:hover .filepick__btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.filepick__input:focus-visible + .filepick__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.filepick__nombre {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--text-3);
}
.filepick__nombre.is-set { color: var(--text); }
.filepick__enviar[disabled] { opacity: .45; cursor: not-allowed; }

/* Facturación: particular o empresa. Dos tarjetas seleccionables en vez de un
   <select>, que aquí son solo dos opciones y conviene ver las dos a la vez. */
.cko__tipos { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
@media (max-width: 620px) { .cko__tipos { grid-template-columns: 1fr; } }
.cko__tipo {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .16s ease, background .16s ease;
}
.cko__tipo:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cko__tipo input { margin-top: 2px; flex: none; accent-color: var(--accent); }
.cko__tipo:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cko__tipo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cko__tipo__txt { display: flex; flex-direction: column; gap: 2px; }
.cko__tipo__txt strong { font-size: 14px; }
.cko__tipo__txt small { font-size: 12px; line-height: 1.45; color: var(--text-3); }

.cko__fiscal[hidden] { display: none; }

.cko__recargo {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin-top: 4px; padding: 12px 13px; border-radius: 10px;
  border: 1px dashed var(--border); background: var(--surface-2);
}
.cko__recargo[hidden] { display: none; }
.cko__recargo input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.cko__recargo__txt { display: flex; flex-direction: column; gap: 3px; }
.cko__recargo__txt strong { font-size: 13.5px; }
.cko__recargo__txt small { font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* Modo de pruebas. Más fuerte que .cko__aviso a propósito: aquel matiza algo
   del pedido, este dice que la compra no es real. Rojo, no ámbar. */
.cko__pruebas {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, #d64545 11%, transparent);
  border: 1px solid color-mix(in srgb, #d64545 40%, transparent);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.cko__pruebas .ic { flex: none; margin-top: 1px; color: #d64545; }
.cko__pruebas strong { color: var(--text); }
.cko__pruebas a { color: inherit; }
.cart__tot dt small { color: var(--text-3); font-weight: 400; }

.pago__metodos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .pago__metodos { grid-template-columns: 1fr; } }
.pago__btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 16px; cursor: pointer; font-family: inherit;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); transition: border-color .2s, transform .1s var(--ease-out);
}
.pago__btn:hover:not(:disabled) { border-color: var(--accent); }
.pago__btn:active:not(:disabled) { transform: scale(.98); }
.pago__btn:disabled { opacity: .5; cursor: not-allowed; }
.pago__btn small { font-size: 12px; color: var(--text-3); }
/* Dentro del botón el logo va más contenido que en la fila de la landing:
   ahí es el protagonista, aquí comparte sitio con el texto de debajo. */
.pago__btn .pay__logo { height: 30px; }
.pago__ok {
  padding: 18px 20px; border-radius: var(--radius); margin-bottom: 18px;
  background: color-mix(in srgb, #34A853 10%, transparent);
  border: 1px solid color-mix(in srgb, #34A853 30%, transparent);
}
.pago__ok h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 17px; }
.pago__ok p { margin: 0; font-size: 14px; color: var(--text-2); }
.pago__envio { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.pago__refpago { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.pago__refpago code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pago__link {
  margin: 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}

/* ---------- Cómo funciona ---------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { text-align: center; padding: 10px; }
.step__n {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 18px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.step h3 { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 6px; }
.step p { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* ---------- Pagos / confianza ---------- */
.trust { padding: 48px 0; }
.trust__card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px; text-align: center;
}
.trust h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin: 0 0 6px; }
.trust p { color: var(--text-2); margin: 0 0 22px; }
.pays { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* Sin caja alrededor: los iconos «cc-» de FontAwesome YA son una tarjeta
   redondeada, y meterlos dentro de otra deja una ficha dentro de otra ficha.
   Sueltos y más grandes se leen mejor y la fila queda más limpia. */
.pay { display: inline-flex; align-items: center; color: var(--text-2); }
/* Los tres comparten viewBox (576x512): fijando la altura salen todos del
   mismo tamaño, sin cuadrarlos uno a uno. */
.pay__logo { height: 40px; width: auto; display: block; }
.trust__badges { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; color: var(--text-2); font-size: 13.5px; }
.trust__badges span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Área de cliente: entrar y elegir contraseña (019) ---------- */
/* Medida corta a propósito: es un formulario de dos campos, y estirarlo al
   ancho de la página lo hace parecer más trabajo del que es. */
.acceso { max-width: 420px; }
.acceso__form { display: grid; gap: 14px; margin-bottom: 22px; }
.acceso__form .btn { width: 100%; justify-content: center; }
.acceso__txt { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.acceso__pie { font-size: 13px; line-height: 1.6; color: var(--text-3);
               margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.acceso__pie a { color: var(--accent); }

/* El aviso y el error comparten forma y solo cambian de color: son lo mismo
   —una respuesta del servidor— y distinguirlos por la forma haría creer que
   uno es más importante que el otro. */
.acceso__aviso, .acceso__error {
  font-size: 13.5px; line-height: 1.55; margin: 0 0 18px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid;
}
.acceso__aviso { color: var(--ahorro); border-color: color-mix(in srgb, var(--ahorro) 35%, transparent);
                 background: color-mix(in srgb, var(--ahorro) 8%, transparent); }
.acceso__error { color: #c5372c; border-color: color-mix(in srgb, #EA4335 35%, transparent);
                 background: color-mix(in srgb, #EA4335 7%, transparent); }
@media (prefers-color-scheme: dark) { .acceso__error { color: #ff8a80; } }

.acceso__olvido summary {
  cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--accent);
  padding: 8px 0; list-style: none;
}
.acceso__olvido summary::-webkit-details-marker { display: none; }
.acceso__olvido summary::before { content: '+ '; }
.acceso__olvido[open] summary::before { content: '− '; }
.acceso__olvido summary:hover { text-decoration: underline; }
.acceso__olvido form { display: grid; gap: 12px; padding: 4px 0 8px; }

/* ---------- Área de cliente: mis placas (019) ---------- */
.cli__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cli__salir { display: flex; align-items: center; gap: 12px; }
.cli__quien { font-size: 13px; color: var(--text-3); }

.cli__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cli__link {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover: hover) { .cli__link:hover { border-color: var(--border-strong); transform: translateX(2px); } }
/* ⚠️ Las tres llevan fila Y columna explícitas. Con `.cli__ir` a `grid-row`
   pero sin columna, la rejilla la colocaba ANTES que el nombre —coloca primero
   lo que tiene fila fija y después lo automático—, así que la flecha se
   quedaba a la izquierda y el nombre a la derecha. */
.cli__nom  { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 16px;
             letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cli__meta { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--text-2); }
.cli__ir   { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); display: grid; place-items: center; }
.cli__pend { color: var(--text-3); font-style: italic; }
.cli__chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 980px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.cli__chip--off { background: color-mix(in srgb, #EA4335 12%, transparent); color: #c5372c; }

.cli { max-width: 640px; }
.cli__caja { border: 1px solid var(--border); border-radius: var(--radius);
             background: var(--surface); padding: 20px 22px; margin-bottom: 16px; }
.cli__caja h2 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 8px; }
.cli__sub { font-size: 13px; color: var(--text-2); margin: 20px 0 8px; font-weight: 600; }
.cli__txt { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.cli__txt--fino { font-size: 12.5px; color: var(--text-3); margin: 14px 0 0; }
.cli__txt--ojo { color: #c5372c; margin: 12px 0 0; }
.cli__form { display: flex; gap: 10px; flex-wrap: wrap; }
.cli__form .field { flex: 1; min-width: 220px; }
.cli__vacio { border: 1px dashed var(--border-strong); border-radius: var(--radius);
              padding: 28px; text-align: center; color: var(--text-2); font-size: 14px; }
.cli__vacio p { margin: 0 0 8px; }
.cli__nota { font-size: 12.5px; color: var(--text-3); margin-top: 18px; }

.cli__cifras { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 4px; }
.cli__cifras div { display: flex; flex-direction: column; }
.cli__cifras span:last-child { font-size: 12px; color: var(--text-3); }
.cli__num { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

/* Las horas, en barras. `align-items: end` para que crezcan hacia arriba desde
   la línea de las etiquetas, que es como se lee un gráfico de barras. */
.cli__horas { list-style: none; margin: 0; padding: 0; display: flex; align-items: end;
              gap: 3px; height: 90px; }
.cli__horas li { flex: 1; display: flex; flex-direction: column; align-items: center;
                 justify-content: end; height: 100%; }
.cli__hbar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px; }
.cli__hnum { font-size: 9.5px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Lo que el cliente ve desde el 04/09, además de las horas: los 30 días, los
   cuatro repartos y los últimos escaneos. Mismo lenguaje que el resto de
   `.cli__`: nada de tablas del panel, que son de otro sitio. */
.cli__subn { font-weight: 400; color: var(--text-3); margin-left: 8px; }
.cli__dias .cli__hnum { min-height: 12px; }
.cli__hbar--cero { background: transparent; }
.cli__rep { display: flex; flex-direction: column; gap: 7px; }
.cli__repfila { display: grid; grid-template-columns: 7.5rem 1fr 4.5rem; align-items: center; gap: 10px; }
.cli__replbl { font-size: 13px; }
.cli__repbarra { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cli__repbarra i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cli__repnum { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.cli__repnum small { color: var(--text-3); }
.cli__tablawrap { overflow-x: auto; }
.cli__tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cli__tabla th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-3); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.cli__tabla td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.cli__tabla td small { display: block; color: var(--text-3); font-size: 11.5px; }
.cli__fila--off td { color: var(--text-3); }
.cli__chip--ok { background: color-mix(in srgb, #34A853 14%, transparent); color: #1e7a3b; }

/* ---------- Páginas legales ---------- */
/* Texto largo para leer, no para escanear: medida corta, interlínea holgada y
   una jerarquía que se distinga de un vistazo. Es lo que separa un documento
   que alguien lee de uno que todo el mundo salta. */
/* ⚠️ La medida de lectura NO la pone el contenedor, la ponen los bloques.
   El contenedor mide lo mismo que la cabecera (`--maxw`) para que el cuerpo
   arranque ALINEADO con el h1: antes iba centrado en 68ch y el texto empezaba
   200 px a la derecha del título, que es lo que hacía que la página pareciera
   una columna estrecha perdida en medio de la pantalla. Y de paso las tablas
   —que son datos, no prosa— pueden ocupar más que un párrafo.
   ⚠️ Y esa medida va en px, no en `ch`: en `ch` cada bloque se mediría con SU
   tamaño de letra, y la fecha (13,5 px), las notas y el pie (14,5 px) salían
   170 px más estrechos que los párrafos —se notaba en el filete del pie, que
   quedaba corto—. 720 px ≈ 76 caracteres a 16 px. */
.legal { --medida: 720px; max-width: var(--maxw);
         font-size: 16px; line-height: 1.7; color: var(--text-2); }
.legal > h2, .legal > h3, .legal > p, .legal > ul, .legal > ol { max-width: var(--medida); }
.legal h2 { font-size: 21px; letter-spacing: -0.01em; color: var(--text);
            margin: 40px 0 12px; scroll-margin-top: 80px; }
.legal h3 { font-size: 16.5px; color: var(--text); margin: 26px 0 8px; }
.legal p, .legal ul, .legal ol { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__fecha { font-size: 13.5px; color: var(--text-3); margin-bottom: 24px; }
.legal__nota { font-size: 14.5px; color: var(--text-3); }
.legal__pie { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
              font-size: 14.5px; color: var(--text-3); }

/* El resumen de arriba: lo que de verdad sorprende al comprar no puede estar
   enterrado en el apartado 6. */
.legal__resumen {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 34px;
  /* algo más ancha que un párrafo: es una caja, y su borde encajona el texto */
  max-width: 800px;
}
.legal__resumen h2 { margin: 0 0 10px; font-size: 17px; }
.legal__resumen ul { margin: 0; }
.legal__resumen li:last-child { margin-bottom: 0; }

/* La tabla de portes se desplaza ELLA si no cabe, no la página. */
/* Y va más ancha que el texto: en una tabla el ancho es lo que evita que cada
   celda se parta en cuatro líneas, y aquí la prosa se lee en la celda de al
   lado, no a lo largo de toda la fila. */
.legal__tabla { overflow-x: auto; margin: 0 0 16px; max-width: min(100%, 980px); }
/* Menos las que NO tienen cabecera: esas no son una comparativa, son una
   ficha de datos («Titular», «NIF», «Correo»…). Estiradas a 980 px dejan
   un filete larguísimo debajo de un NIF de nueve caracteres, así que se
   quedan en la medida del texto. */
.legal__tabla:not(:has(thead)) { max-width: min(100%, var(--medida)); }
.legal__tabla table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal__tabla th, .legal__tabla td { text-align: left; padding: 9px 14px 9px 0;
                                     border-bottom: 1px solid var(--border); }
.legal__tabla th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--text-3); font-weight: 600; }
/* Los rótulos de la cabecera son etiquetas de una palabra: partirlos («Para /
   qué», «Dura- / ción») es puro ruido. Solo los de `thead`: en aviso legal y
   privacidad el `th` es la primera columna de cada fila y ahí sí puede y debe
   partirse. */
.legal__tabla thead th { white-space: nowrap; }
.legal__tabla td { font-variant-numeric: tabular-nums; }

.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a { color: var(--text-3); text-decoration: none; }
.footer__legal a:hover { color: var(--text-2); text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { padding: 40px 0; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; }
.footer__right { display: inline-flex; align-items: center; gap: 14px; }
.footer__admin {
  color: var(--text-3); text-decoration: none; padding: 3px 9px; border-radius: 980px;
  border: 1px solid var(--border); transition: color .2s, border-color .2s;
}
.footer__admin:hover { color: var(--text); border-color: var(--border-strong); }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Entrada escalonada del hero ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.is-in .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.is-in .reveal:nth-child(1) { transition-delay: .00s; }
.is-in .reveal:nth-child(2) { transition-delay: .07s; }
.is-in .reveal:nth-child(3) { transition-delay: .14s; }
.is-in .reveal:nth-child(4) { transition-delay: .21s; }
.is-in .reveal:nth-child(5) { transition-delay: .28s; }

/* Aparición al hacer scroll */
.appear { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.appear.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .appear, .card { transition: opacity .3s ease !important; transform: none !important; }
  .tip { transition: opacity .12s ease !important; transform: none !important; }
  .reveal { opacity: 1; }
  .btn:active, .card__add:active, .nav__cta:active { transform: none; }
  .cartfab__n.bump { animation: none; }
  .cartpanel { transition: transform .01s; }
}

/* Toast del carrito */
.toast {
  position: fixed; left: 50%; bottom: calc(26px + var(--ckb-h, 0px)); transform: translate(-50%, 20px);
  background: var(--text); color: var(--bg);
  padding: 12px 20px; border-radius: 22px; font-size: 14px; font-weight: 500;
  width: max-content; max-width: min(440px, calc(100vw - 32px)); text-align: center; line-height: 1.35;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .4s var(--spring); z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* En móvil el aviso ocupa casi todo el ancho y caía debajo del botón flotante
   del carrito (56 px a 24 px del borde, z-index 400): se sube por encima (paso 150). */
@media (max-width: 620px) { .toast { bottom: calc(24px + 56px + 12px + var(--ckb-h, 0px)); } }

/* ---------- Modal del comprobador (checkout) ----------
   Reutiliza .pmodal entero; solo cambia el ancho y quita el margen que el
   formulario del comprobador lleva pensado para el hero de la landing. */
.cmodal { max-width: 520px; }
.cmodal .checker__form { margin-top: 18px; }
.cmodal .checker__result { margin-top: 16px; }

/* El campo parpadea en verde al rellenarse desde el modal: sin esto, el modal
   se cierra y no queda claro que algo haya pasado. */
.fld--ok {
  border-color: var(--google-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--google-green) 18%, transparent) !important;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .fld--ok { transition: none; } }

/* ---------- Modal de ficha de producto ---------- */
.pmodal {
  border: 0; padding: 0; background: transparent; color: var(--text);
  max-width: 620px; width: calc(100% - 32px); max-height: 88vh; border-radius: var(--radius-lg);
  overflow: visible;
}
.pmodal::backdrop {
  background: rgba(0,0,0,.34);
  backdrop-filter: saturate(140%) blur(6px);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.pmodal[open]::backdrop { opacity: 1; }
.pmodal__box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 30px 30px 22px; max-height: 88vh; overflow-y: auto; position: relative;
  -webkit-overflow-scrolling: touch;
}
.pmodal[open] .pmodal__box { animation: pmodal-in .34s var(--spring) both; }
@keyframes pmodal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* El aspa y las flechas son SVG, no caracteres: un glifo se centra por las
   métricas de la fuente y no por su dibujo, y así las flechas se quedaban 2,3 px
   por debajo del centro del círculo —medido—. Con SVG el centrado es geometría y
   sale igual en cualquier sistema. Por eso aquí ya no hay `font-size`. */
.pmodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-2);
  backdrop-filter: blur(6px);
  cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .1s var(--ease-out);
}
.pmodal__close:hover { background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.pmodal__close:active { transform: scale(.9); }

/* Carrusel de media dentro del modal */
.carousel { position: relative; margin: -30px -30px 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--surface-2); }
.carousel__track { display: flex; transition: transform .42s var(--ease-out); }
.carousel__slide { min-width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-2); }
.carousel__slide img, .carousel__slide video { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(6px);
  color: var(--text); display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: background .2s, transform .1s var(--ease-out);
}
.carousel__nav:hover { background: var(--surface); }
.carousel__nav:active { transform: translateY(-50%) scale(.9); }
.carousel__nav--prev { left: 12px; }
.carousel__nav--next { right: 12px; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; }
.carousel__dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--text) 30%, transparent); transition: background .2s, transform .2s var(--ease-out); }
.carousel__dot.is-on { background: #fff; transform: scale(1.25); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* La línea de vídeos del modal de producto. Va pegada al carrusel —que sube
   con margen negativo hasta el borde— y por eso solo lleva aire por abajo. */
.pmodal__vid { margin: 2px 0 14px; }
.pmodal__vid[hidden] { display: none; }

.pmodal__head { padding-right: 40px; }
.pmodal__badge { display: inline-block; color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 980px; margin-bottom: 10px; }
.pmodal__title { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.pmodal__sub { color: var(--text-2); font-size: 1rem; margin: 0 0 10px; }
.pmodal__price { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; }

.pmodal__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.pmodal__chip { font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 980px; padding: 6px 12px; }
.pmodal__chiplabel { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

.pmodal__opts { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0 4px; }
.pmodal__optlabel { display: block; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.pmodal__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pmodal__optpill {
  font-size: 13px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 980px; padding: 6px 14px;
  cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .1s var(--ease-out);
}
.pmodal__optpill:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .pmodal__optpill:hover { border-color: var(--text-3); } }
.pmodal__optpill.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.pmodal__optpill.is-fixed { cursor: default; }
.pmodal__optpill.is-off { opacity: .42; border-style: dashed; cursor: not-allowed; }
.pmodal__optpill.is-off:active { transform: none; }
.pmodal__optpill.is-fixed:active { transform: none; }
.pmodal__optplus { margin-left: 6px; font-size: 11px; font-weight: 600; opacity: .75; }
.pmodal__optplus--menos { color: var(--ahorro); opacity: 1; }

.pmodal__desc { margin: 20px 0 4px; color: var(--text); line-height: 1.55; }
.pmodal__desc p { margin: 0 0 10px; }
.pmodal__desc p:first-child { font-weight: 600; font-size: 1.05rem; }

.pmodal__sec { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.pmodal__sec h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 12px; }
.pmodal__list { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.5; }
.pmodal__list li { margin-bottom: 7px; }

.pmodal__specs { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 18px; margin: 0; }
.pmodal__specs dt { color: var(--text-2); font-size: 14px; }
.pmodal__specs dd { margin: 0; font-size: 14px; font-weight: 500; }

.pmodal__faq { display: flex; flex-direction: column; gap: 14px; }
.pmodal__q { font-weight: 600; margin: 0 0 3px; }
.pmodal__a { color: var(--text-2); margin: 0; line-height: 1.5; }

/* Pegada al pie del modal; los 24 px del `.pmodal__cta` la separan por abajo. */
.pmodal__notas { margin: 22px 0 0; }

.pmodal__cta {
  position: sticky; bottom: -22px; margin: 24px -30px -22px; padding: 16px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--border);
}
.pmodal__price--foot { font-size: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .pmodal[open] .pmodal__box { animation: none; }
  .pmodal::backdrop { transition: none; }
  .carousel__track { transition: none; }
}
@media (max-width: 520px) {
  .pmodal__box { padding: 24px 20px 18px; }
  .pmodal__cta { margin: 20px -20px -18px; padding: 14px 20px; }
  .pmodal__specs { grid-template-columns: 1fr; gap: 2px 0; }
  .pmodal__specs dd { margin-bottom: 8px; }
}

/* ==========================================================================
   Código promocional — carrito y checkout.
   Va plegado en un <details> a propósito: la inmensa mayoría no tiene código,
   y una caja vacía pidiendo cupón hace pensar «¿me estoy perdiendo un
   descuento?» justo antes de pagar. Quien lo tiene, lo busca y lo encuentra.
   ========================================================================== */
.cupon { margin: 0 0 14px; }
.cupon__caja > summary {
  cursor: pointer; font-size: 13.5px; color: var(--text-2);
  padding: 6px 0; list-style: none; user-select: none;
}
.cupon__caja > summary::-webkit-details-marker { display: none; }
.cupon__caja > summary::before {
  content: "+"; display: inline-block; width: 15px; font-weight: 500; color: var(--text-3);
}
.cupon__caja[open] > summary::before { content: "−"; }
.cupon__caja > summary:hover { color: var(--text); }

.cupon__fila { display: flex; gap: 8px; margin-top: 8px; }
.cupon__input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 11px;
}
.cupon__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cupon__input::placeholder { letter-spacing: .04em; color: var(--text-3); }
.cupon__btn { flex: 0 0 auto; padding-inline: 16px; }
.cupon__err { margin: 8px 0 0; font-size: 12.5px; color: var(--google-red); }

/* Aplicado: deja de ser un formulario y pasa a ser un hecho. */
.cupon__puesto {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; padding: 9px 11px; border-radius: 10px;
  color: var(--google-green);
  background: color-mix(in srgb, var(--google-green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--google-green) 32%, transparent);
}
.cupon__puesto svg { flex: none; }
.cupon__puesto > span { flex: 1 1 auto; color: var(--text); }
.cupon__puesto strong { letter-spacing: .05em; }
.cupon__puesto small { color: var(--text-2); margin-left: 4px; }
.cupon__quitar {
  flex: none; border: 0; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--text-3); padding: 0 2px;
}
.cupon__quitar:hover { color: var(--text); }

/* La línea de descuento del resumen, en verde: es lo único que RESTA. */
.cart__desc { color: var(--google-green) !important; }

/* Aclaración de la opción elegida, bajo su grupo. */
.ficha__optayuda { margin: 6px 0 0; font-size: .82rem; color: var(--text-2); line-height: 1.45; }
.pmodal__optayuda { margin: 6px 0 0; font-size: .8rem; color: var(--text-2); line-height: 1.45; }

/* ============================================================
   Contacto (/contacto)
   ============================================================ */
/* Dos columnas: el formulario manda y la barra de canales directos acompaña.
   En móvil se apilan, y los canales van DEBAJO: quien entra a escribir ve el
   formulario primero, no tres botones que le sacan de la página. */
.ctc { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start; }
@media (max-width: 860px) { .ctc { grid-template-columns: 1fr; gap: 24px; } }

.ctc__form { display: grid; gap: 16px; }
.ctc__form .flds { gap: 14px; }
/* ⚠️ `.fld` es `display:flex`, y eso GANA al `display:none` que el navegador
   trae para `[hidden]`: sin esta línea los campos que dependen del motivo se
   marcan como ocultos y se siguen viendo. */
.ctc__extra[hidden] { display: none; }
@media (max-width: 560px) { .ctc__form .flds { grid-template-columns: 1fr; } }

/* El <select> maquetado. Norma del proyecto: nunca el aspecto nativo.
   `color-scheme: light dark` es la que siempre se olvida — sin ella la lista
   que despliega el navegador sale con SU tema y no con el nuestro. La flecha
   va en `stroke='%236e6e73'`, un gris que se lee sobre los dos fondos. */
.ctc__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  cursor: pointer; line-height: normal;
  padding: 11px 38px 11px 13px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  color-scheme: light dark;
  background: var(--surface)
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.75 6 7.75l3-3'/></svg>")
    no-repeat right 13px center / 12px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.ctc__select::-ms-expand { display: none; }
.ctc__select:focus { outline: none; border-color: var(--accent);
  background-color: var(--surface);   /* Safari se queda con el fondo del sistema al enfocar */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.ctc__select option { background: var(--surface); color: var(--text); }

/* El honeypot. `left: -9999px` y no `display: none` a propósito: hay bots que
   descartan lo que está en display:none, y este campo solo sirve si lo
   rellenan. Para una persona es igual de invisible. */
.ctc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ctc__check { display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.ctc__check input { width: 17px; height: 17px; margin: 1px 0 0; flex: none;
  accent-color: var(--accent); cursor: pointer; }
.ctc__check strong { color: var(--text); font-weight: 600; }
.ctc__check a { color: var(--accent); }
/* `.ic` es `display:block` para todo el sitio, y aquí el icono va DENTRO de
   una frase: en bloque se lleva su propia línea y parte el texto en dos. */
.ctc__check .ic { display: inline-block; vertical-align: -3px; margin-right: 3px;
  color: #128C7E; }
.ctc__check--err { color: var(--google-red); }
.ctc__checkerr { margin: -10px 0 0 27px; }

.ctc__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* El verde es el de WhatsApp, no un color de la marca: el botón se reconoce
   por él. #128C7E (el oscuro de su paleta) da 4,55 : 1 con texto blanco; el
   #25D366 que se ve en todas partes se queda en 1,9 y no es texto legible. */
.btn--wa { background: #128C7E; color: #fff; }
.btn--wa:active { background: #0e6f64; }
.btn--wa .ic { vertical-align: -4px; margin-right: 4px; }

.ctc__error { display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 18px; padding: 12px 15px; border-radius: 12px; font-size: 14.5px;
  line-height: 1.55; color: var(--google-red);
  background: color-mix(in srgb, var(--google-red) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--google-red) 28%, transparent); }
.ctc__error .ic { flex: none; margin-top: 2px; }

.fld__cuenta { align-self: flex-end; font-variant-numeric: tabular-nums; }
.fld__cuenta--pasa { color: var(--google-red); }

/* Confirmación. Ocupa el sitio del formulario: si el formulario siguiera
   debajo, la primera reacción sería volver a enviarlo. */
.ctc__ok { padding: 30px 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ctc__okic { display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; margin-bottom: 14px; color: #fff; background: #1f7a37; }
.ctc__ok h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.ctc__ok p { margin: 0; color: var(--text-2); line-height: 1.6; }
.ctc__okmas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px !important; }

/* ---------- Columna de canales directos ---------- */
.ctc__side { display: grid; gap: 14px; }
.ctc__card { padding: 20px 20px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ctc__card--tenue { background: var(--surface-2); box-shadow: none; }
.ctc__card h2 { margin: 0 0 12px; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }

.ctc__via { display: flex; gap: 12px; align-items: center; padding: 9px 0;
  text-decoration: none; color: inherit; border-radius: 12px; }
.ctc__via + .ctc__via { border-top: 1px solid var(--border); }
.ctc__viaic { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px; color: var(--text-2);
  background: color-mix(in srgb, var(--text) 6%, transparent); }
.ctc__viaic--wa { color: #fff; background: #128C7E; }
.ctc__viatx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ctc__viatx strong { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ctc__viatx small { font-size: 13px; color: var(--text-2); }
.ctc__via:hover .ctc__viatx strong { color: var(--accent); }

.ctc__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* El icono y el texto, dos columnas. El texto va envuelto en un <span> a
   propósito: en un grid cada hijo ocupa su celda, y si el texto fuera suelto,
   cada <strong> abriría una celda nueva y la frase se partiría en trozos
   superpuestos. */
.ctc__lista li { display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ctc__lista .ic { margin-top: 2px; color: var(--accent); }
.ctc__lista strong { color: var(--text); font-weight: 600; }
.ctc__nota { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ctc__nota a { color: var(--accent); }

/* ============================================================
   Banner de cookies
   ============================================================ */
/* Abajo y a lo ancho, no un modal a pantalla completa: la web se puede seguir
   leyendo mientras se decide, que es lo que pide la AEPD —el consentimiento
   tiene que ser libre, y bloquear la página para arrancarlo no lo es—.
   Deja hueco al carrito flotante, que vive en la misma esquina. */
.ckb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.ckb[hidden] { display: none; }
.ckb__box { max-width: var(--maxw); margin: 0 auto;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); }
.ckb__txt { flex: 1 1 380px; min-width: 0; }
.ckb__tit { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); }
.ckb__txt p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ckb__txt a { color: var(--accent); }
/* Los dos botones al mismo tamaño y con el mismo peso: rechazar no puede
   costar más que aceptar. En móvil se reparten la línea a partes iguales. */
.ckb__btns { display: flex; gap: 10px; flex: 0 0 auto; }
.ckb__btns .btn { font-size: 14px; padding: 11px 18px; white-space: nowrap; }
@media (max-width: 620px) {
  .ckb__box { padding: 15px 16px; }
  .ckb__btns { width: 100%; }
  .ckb__btns .btn { flex: 1 1 0; white-space: normal; }
}

/* ---------- El taller (paso 170) ---------- */
.taller__hero { padding-bottom: 56px; }
.taller__lead { max-width: 60ch; margin: 0 auto 34px; color: var(--text-2); font-size: 1.12rem; line-height: 1.6; }
.tstats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 880px; margin: 0 auto; }
.tstat { padding: 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.tstat strong { display: block; font-size: 1.6rem; letter-spacing: -0.02em; }
.tstat span { color: var(--text-2); font-size: 13.5px; }
.fases { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; gap: 6px; }
.fase { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--border); }
.fase:first-child { border-top: 0; }
.fase__n {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 18px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.fase h3 { font-size: 18px; letter-spacing: -0.01em; margin: 4px 0 6px; }
.fase p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; }
.tvideos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; max-width: 1100px; margin: 0 auto; }
.tvideo { margin: 0; }
.tvideo video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; display: block; }
.tvideo figcaption { margin-top: 10px; text-align: center; color: var(--text-2); font-size: 14px; }
.tlistas { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 880px; margin: 0 auto; }
.tlista { padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.tlista h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; }
.tlista ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.tfotos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); justify-content: center; max-width: 1100px; margin: 0 auto; }
/* Todas al mismo formato 4:5 recortando (object-fit): las fotos vienen de móvil en
   vertical, cuadrado y apaisado, y sin esto la rejilla queda dentada. */
.tfotos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block; background: var(--surface); }

/* ── Guías (paso 173) ──────────────────────────────────────────────────────
   El índice son tarjetas enlazadas enteras (la misma caja que `.tlista`); la
   guía reutiliza la prosa de `.legal` y añade la caja de salida a la tienda. */
.guias { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 980px; margin: 0 auto; }
.guiacard { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--border);
            border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none;
            transition: border-color .2s ease, transform .2s ease; }
.guiacard:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.guiacard h2 { font-size: 1.08rem; letter-spacing: -0.01em; margin: 0; }
.guiacard p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; flex: 1; }
.guiacard__meta { font-size: 13px; color: var(--text-3); }
.guia .legal__fecha { margin-bottom: 30px; }
.guia code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; background: var(--surface-2);
             padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.guia__faq { margin: 0 0 8px; max-width: var(--medida); }
.guia__cta { max-width: var(--medida); margin: 40px 0 8px; padding: 22px 24px; border: 1px solid var(--border-strong);
             border-radius: var(--radius); background: var(--surface); }
.guia__cta h2 { margin: 0 0 8px; font-size: 19px; }
.guia__cta p { margin: 0 0 12px; }
.guia__cta p:last-child { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
/* `.legal a` pinta todo enlace de acento y le gana al botón por especificidad:
   salía azul sobre azul, sin texto. Se le devuelve su color. */
.guia__cta .btn { text-decoration: none; color: var(--text); }
.guia__cta .btn--primary { color: #fff; }
.guia__otras { list-style: none; padding: 0; max-width: var(--medida); }
.guia__otras li { padding: 10px 0; border-top: 1px solid var(--border); }
.guia__otras a { display: block; font-weight: 600; text-decoration: none; color: var(--text); }
.guia__otras a:hover { text-decoration: underline; }
.guia__otras span { display: block; font-size: 14px; color: var(--text-3); }
.guia__audio { max-width: var(--medida); margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--border);
               border-radius: var(--radius); background: var(--surface); display: grid; gap: 10px; }
.guia__audio figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.guia__audio figcaption strong { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; }
.guia__audio figcaption span { font-size: 13px; color: var(--text-3); }
.guia__audio audio { width: 100%; height: 40px; }