/* ==========================================================================
   ZELVANE — Bolsa protectora para lavar zapatillas
   Estética: moderna, premium, fondo blanco, acento verde lima.
   Mobile-first. Tipografía: Poppins autoalojada (sin peticiones a Google
   Fonts: nada de terceros que cargar antes de dar consentimiento de cookies).
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2");
}

:root {
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --text: #0B0B0C;
  --text-dim: #5B5B5F;
  --line: #E7E7E7;
  --lime: #C6F24E;
  --lime-dark: #A9D92C;
  --lime-tint: #F4FBE2;
  --black: #0B0B0C;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(11, 11, 12, 0.06);
  --shadow-md: 0 12px 36px rgba(11, 11, 12, 0.1);
  --shadow-lg: 0 24px 60px rgba(11, 11, 12, 0.14);
  --shadow-lime: 0 10px 28px rgba(198, 242, 78, 0.35);

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1400px;
  --header-h: 58px;
}

* { box-sizing: border-box; }

/* Varias reglas de abajo fijan su propio "display" con la misma
   especificidad que la hoja de estilos por defecto del navegador para
   [hidden]; sin esto, el atributo hidden que usa app.js para mostrar u
   ocultar bloques según config.js quedaría sin efecto. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 40px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Los estilos :hover de abajo solo se aplican en dispositivos con puntero
   fino (ratón). En móvil no hay "hover" real: al tocar un botón, muchos
   navegadores dejan el estado :hover "pegado" hasta el siguiente toque en
   otro sitio, mostrando ese botón con el fondo/borde de hover permanente
   (por eso los iconos de la cabecera podían parecer "cuadrados vacíos" tras
   tocarlos en el móvil). */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; }
  .btn-dark:hover { background: #262628; transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-lime:hover { background: var(--lime-dark); transform: translateY(-1px); box-shadow: var(--shadow-lime); }
  .btn-ghost:hover { border-color: var(--black); }
  .icon-btn:hover { background: var(--bg-soft); }
  .pack-card:hover { border-color: #C9C9C9; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .pack-card.is-selected:hover { border-color: var(--black); }
  .social-row a:hover { border-color: var(--black); background: var(--bg-soft); }
  .footer-col a:hover { text-decoration: underline; }
  .visual-proof-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .gallery-arrow:hover { background: var(--bg); }
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.55rem, 6vw, 2.9rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--text-dim); }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--black); color: var(--bg);
  padding: 12px 18px; z-index: 400; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 820px; }
@media (min-width: 760px) { .container { padding: 0 40px; } }

.section { padding: 56px 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; font-weight: 600; font-size: 0.98rem;
  cursor: pointer; text-align: center; line-height: 1.25;
  /* Sin white-space:nowrap: algunos textos son largos ("PAGO DISPONIBLE
     PRÓXIMAMENTE") y en 320-375px no caben en una sola línea — mejor que
     el botón crezca a 2 líneas a que desborde o quede cortado. */
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-dark { background: var(--black); color: var(--bg); box-shadow: 0 6px 18px rgba(11,11,12,.18); }
.btn-dark:disabled { background: #CFCFCF; color: #8A8A8A; cursor: not-allowed; box-shadow: none; }
.btn-lime { background: var(--lime); color: var(--black); box-shadow: var(--shadow-lime); }
.btn-lime:disabled { background: #E9E9E9; color: #9A9A9A; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.88rem; }
.btn-xl { min-height: 54px; padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }

.secure-note {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 0.82rem; color: var(--text-dim); margin: 12px 0 0;
}

.pending-tag {
  background: #FFF7E0; color: #7A5A00; border: 1px solid #F3E2A6;
  padding: 1px 8px; border-radius: 6px; font-size: 0.9em;
}

/* ---------- Franja superior ---------- */
.topbar {
  background: var(--black); color: var(--bg); text-align: center;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 9px 16px;
}
.topbar-msg { margin: 0; transition: opacity .22s ease; }
.topbar-msg.is-fading { opacity: 0; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 150;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  min-height: var(--header-h);
}
@media (min-width: 480px) { .header-inner { gap: 12px; } }
.brand {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  order: 2; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
@media (min-width: 480px) { .brand { font-size: 1.3rem; } }

.main-nav { display: none; }
@media (min-width: 980px) {
  .main-nav { display: flex; gap: 24px; font-size: 0.92rem; font-weight: 500; }
  .main-nav-left { order: 1; }
  .main-nav-right { order: 3; }
  .main-nav a:hover { text-decoration: underline; }
}

.header-actions { display: flex; align-items: center; gap: 6px; order: 4; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: none; color: var(--text);
  cursor: pointer; position: relative; border-radius: var(--radius-sm);
}
.icon-btn svg { width: 22px; height: 22px; }
.menu-toggle { order: 0; }
@media (min-width: 980px) { .menu-toggle { display: none; } }

.search-panel { border-top: 1px solid var(--line); background: var(--bg); }
.search-form { display: flex; gap: 10px; padding: 14px 20px; }
.search-form input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 10px 16px; font-size: 0.95rem; font-family: inherit;
}

.mobile-menu {
  /* "top" lo fija app.js al abrir (la cabecera no siempre está a la misma
     distancia del borde: cambia según si la franja superior aún se ve o
     ya se hizo scroll). z-index por encima de .mobile-cta-bar (190): si
     no, la barra de compra fija quedaría encima del menú abierto en vez
     de tapada por él. */
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 191; background: var(--bg);
  display: flex; flex-direction: column; padding: 10px 20px; overflow-y: auto;
}
.mobile-menu a { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; color: var(--text); }
@media (min-width: 980px) { .mobile-menu { display: none !important; } }

/* ---------- Ficha de producto ---------- */
.product-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 960px) { .product-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: 56px; } }

.gallery-main {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #FFFFFF 0%, var(--bg-soft) 70%);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  /* Compacta y sin un hueco vacío enorme en móvil: altura fluida, con techo
     más bajo para la compra rápida (.gallery-compact) que en la galería
     general de la ficha. */
  height: clamp(200px, 46vw, 460px);
}
.gallery-compact .gallery-main { height: clamp(180px, 40vw, 380px); }
.gallery-main-btn { border: none; background: none; padding: 0; cursor: zoom-in; width: 100%; height: 100%; display: block; }
.gallery-main-btn img {
  width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg);
}
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.gallery-arrow-prev { left: 12px; }
.gallery-arrow-next { right: 12px; }
.gallery-arrow svg { width: 20px; height: 20px; }
.gallery-caption { text-align: center; font-size: 0.8rem; color: var(--text-dim); margin: 12px 0 0; }

.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .gallery-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.gallery-thumbs button {
  border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0; overflow: hidden;
  cursor: pointer; background: var(--bg-soft); aspect-ratio: 1/1;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.is-active { border-color: var(--black); }

.eyebrow-pill {
  display: inline-block; background: var(--lime); color: var(--black);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}

.benefit-list { margin: 20px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.96rem; color: var(--text); }
.benefit-list .check-icon {
  display: block;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  max-width: 22px;
  flex: 0 0 22px;
  margin-top: 1px;
}

/* ---------- Selector de packs ---------- */
.pack-selector { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 20px; }
@media (min-width: 560px) { .pack-selector { grid-template-columns: repeat(3, 1fr); } }
.pack-card {
  position: relative; text-align: left; background: var(--bg); border: 2px solid var(--line);
  border-radius: var(--radius-md); padding: 18px 16px 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.pack-card.is-selected { border-color: var(--black); background: var(--lime-tint); box-shadow: var(--shadow-sm); }
.pack-card.is-selected::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23C6F24E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pack-badge {
  position: absolute; top: -11px; left: 14px; background: var(--black); color: var(--lime);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.pack-name { font-weight: 700; font-size: 1rem; }
.pack-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.pack-price { font-weight: 800; font-size: 1.2rem; }
.pack-price-pending { font-size: 0.86rem; font-weight: 600; color: var(--text-dim); }

/* ---------- Confianza ---------- */
.trust-section { background: var(--bg-soft); }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 26px; text-align: center; }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-item img {
  margin: 0 auto 14px; width: 60px; height: 60px; padding: 12px; box-sizing: border-box;
  background: var(--bg); border-radius: 50%; box-shadow: var(--shadow-sm);
}
.trust-item h3 { margin-bottom: 6px; }
.trust-item p { font-size: 0.9rem; margin: 0; }

/* ---------- Acordeones ---------- */
.accordion-group { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border: none; padding: 18px 20px; font-size: 1rem; font-weight: 600;
  cursor: pointer; color: var(--text);
}
.accordion-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.accordion-icon::before, .accordion-icon::after {
  content: ""; position: absolute; background: var(--text); border-radius: 2px; transition: transform .18s ease;
}
.accordion-icon::before { width: 18px; height: 2px; top: 8px; left: 0; }
.accordion-icon::after { width: 2px; height: 18px; top: 0; left: 8px; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: scaleY(0); }
.accordion-panel { padding: 0 20px 20px; }

.steps-list { display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.steps-list li { position: relative; padding-left: 34px; font-size: 0.95rem; color: var(--text); counter-increment: step; }
.steps-list li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--black); color: var(--bg);
  font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.spec-list { display: flex; flex-direction: column; gap: 10px; }
.spec-list li { font-size: 0.95rem; color: var(--text); }

/* ---------- Compatibilidad y resultados ---------- */
.visual-proof-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF4 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.visual-proof-heading { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.visual-proof-heading .eyebrow-pill { margin-bottom: 16px; }
.visual-proof-heading p { margin: 0; }
.visual-proof-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.visual-proof-card {
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.visual-proof-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.visual-proof-copy { padding: 22px 22px 20px; }
.visual-proof-copy h3 { font-size: 1.25rem; margin-bottom: 8px; }
.visual-proof-copy p { margin: 0; font-size: 0.95rem; }
.visual-proof-note { max-width: 760px; margin: 18px auto 0; text-align: center; font-size: 0.8rem; }
@media (min-width: 860px) {
  .visual-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .visual-proof-copy { padding: 26px 28px 24px; }
}

/* ---------- Secciones explicativas ---------- */
.explain-section:nth-of-type(even) { background: var(--bg-soft); }
.explain-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 860px) {
  .explain-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .explain-reverse .explain-grid { direction: rtl; }
  .explain-reverse .explain-copy, .explain-reverse .explain-media { direction: ltr; }
}
.explain-media img { border-radius: var(--radius-lg); background: var(--bg-soft); aspect-ratio: 1/1; object-fit: cover; box-shadow: var(--shadow-sm); }
.explain-copy p { font-size: 1rem; }

.explain-grid-mosaic { grid-template-columns: 1fr; }
@media (min-width: 860px) { .explain-grid-mosaic { grid-template-columns: 0.8fr 1.2fr; } }
.media-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.media-mosaic img, .media-mosaic video { border-radius: var(--radius-md); aspect-ratio: 1/1; object-fit: cover; }

/* ---------- Reseñas ---------- */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
@media (min-width: 760px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
.review-card img, .review-card video { aspect-ratio: 3/4; object-fit: cover; }
.review-caption { padding: 10px 14px; font-size: 0.86rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq-section {
  position: relative;
  background: linear-gradient(160deg, #0B0B0C 0%, #202024 60%, #14140F 100%);
  color: var(--bg);
  overflow: hidden;
}
.faq-section::before {
  content: ""; position: absolute; top: -20%; right: -10%; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(198,242,78,.14) 0%, rgba(198,242,78,0) 70%);
  pointer-events: none;
}
.faq-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 0.9fr 1.4fr; gap: 60px; } }
.faq-heading h2 { color: var(--bg); font-size: clamp(2rem, 4vw, 3rem); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--bg); border-radius: var(--radius-md); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: none; border: none; padding: 18px 20px; text-align: left;
  font-weight: 600; color: var(--text); cursor: pointer; font-size: 0.98rem;
}
.faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--text); border-radius: 2px; transition: transform .18s ease;
}
.faq-icon::before { width: 18px; height: 2px; top: 8px; left: 0; }
.faq-icon::after { width: 2px; height: 18px; top: 0; left: 8px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); }
.faq-answer { margin: 0; padding: 0 20px 20px; font-size: 0.92rem; color: var(--text-dim); }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final-inner p { font-size: 1.02rem; }

/* ---------- CTA fija móvil ---------- */
/* Siempre visible en móvil (no depende de ningún estado de la tienda): el
   propio botón ya se desactiva solo si el pack elegido no tiene enlace de
   Stripe. El padding del body reserva sitio para que nunca tape el pie de
   página ni el resto del contenido. */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(11,11,12,.08);
}
.mobile-cta-price { font-weight: 700; font-size: 1.05rem; flex-shrink: 0; }
/* Botón más compacto que el resto de .btn: en 320-360px de ancho, junto al
   precio, el relleno y tamaño por defecto de .btn desbordarían la barra. */
.mobile-cta-bar .btn { padding: 10px 14px; font-size: 0.82rem; min-height: 44px; }
@media (min-width: 400px) { .mobile-cta-bar .btn { padding: 12px 22px; font-size: 0.92rem; } }
@media (min-width: 960px) { .mobile-cta-bar { display: none !important; } }
/* Solo reserva hueco cuando la barra fija existe de verdad en la página
   (hoy, únicamente index.html) — así las páginas simples (gracias, 404,
   contacto, legales) no arrastran un espacio vacío al final sin motivo. */
body.has-mobile-cta { padding-bottom: 78px; }
@media (min-width: 960px) { body.has-mobile-cta { padding-bottom: 0; } }

@media (max-width: 559px) {
  .section { padding: 38px 0; }
  .quick-buy { padding-top: 24px; }
  .product-grid { gap: 26px; }
  .gallery-compact .gallery-main { height: clamp(210px, 64vw, 280px); }
  .gallery-caption { margin-top: 8px; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .product-info h1 { font-size: clamp(1.8rem, 8.2vw, 2.25rem); line-height: 1.08; }
  .benefit-list { margin: 18px 0 24px; gap: 10px; }
  .pack-card { padding: 16px 15px 14px; }
}

/* ---------- Modal / lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 250; background: rgba(11,11,12,.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); object-fit: contain; }
.lightbox-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- Pie de página ---------- */
.site-footer { background: var(--bg-soft); padding: 52px 0 22px; margin-top: 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand .brand { font-size: 1.2rem; }
.footer-tagline { font-size: 0.9rem; max-width: 30ch; }
.social-row { display: flex; gap: 10px; margin-top: 10px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.social-row a svg { width: 18px; height: 18px; }
.footer-heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 10px; }
.footer-col a, .footer-col .link-btn { display: block; font-size: 0.92rem; color: var(--text); padding: 5px 0; }
.link-btn { background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding-left: 0; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; font-size: 0.8rem; color: var(--text-dim); }
.footer-bottom p { margin: 0; }

/* ---------- Cookies ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 260;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); max-width: 640px; margin: 0 auto;
}
.cookie-banner-inner { padding: 20px; }
.cookie-banner-inner p { font-size: 0.88rem; margin-bottom: 14px; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.cookie-modal {
  position: fixed; inset: 0; z-index: 270; background: rgba(11,11,12,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cookie-modal-inner { background: var(--bg); border-radius: var(--radius-lg); padding: 26px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; }
.cookie-category { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cookie-category-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cookie-category p { font-size: 0.85rem; margin: 0; }
.cookie-toggle-fixed { font-size: 0.78rem; color: var(--text-dim); }
.cookie-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.switch-track::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: var(--bg); border-radius: 50%; transition: transform .15s ease;
}
.switch input:checked + .switch-track { background: var(--black); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--black); outline-offset: 2px; }

/* ---------- Páginas simples (gracias, 404, contacto, legales) ---------- */
.simple-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.simple-header .container { display: flex; align-items: center; min-height: var(--header-h); }

.legal-doc { max-width: 780px; }
.legal-doc .draft-notice {
  background: #FFF7E0; border: 1px solid #F3E2A6; color: #7A5A00;
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.92rem; margin-bottom: 28px;
}
.legal-doc h2 { margin-top: 1.6em; }
.legal-doc .placeholder {
  background: #FFF7E0; border: 1px solid #F3E2A6; color: #7A5A00;
  padding: 1px 6px; border-radius: 4px; font-size: 0.95em;
}
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal-nav a { font-size: 0.9rem; font-weight: 600; }
.legal-nav a.active { text-decoration: underline; }

.contact-block { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.contact-block a { font-weight: 600; }