/* ============================================================
   DeviceShop BO — Sistema de diseño "Biblioteca"
   Paleta oficial de marca (voz-de-marca.md + logo real):
   navy petróleo #002133 + cian turquesa #4FD1D9 + blanco.
   Serif editorial (Fraunces) para títulos, Instrument Sans para
   cuerpo. Verde reservado exclusivamente para WhatsApp.
   Mobile-first. Los nombres de clase existentes se conservan.
   ============================================================ */

:root{
  /* Papel frío y tinta navy (del logo: #002133) */
  --papel: #F2F7F8;
  --papel-2: #E4EDEF;
  --crema: #FBFDFD;
  --tinta: #002133;
  --tinta-2: #0A3247;
  --tinta-suave: #48626F;
  --tinta-footer: #001824;

  /* Un solo acento: cian turquesa de marca */
  --acento: #1899A6;
  --acento-oscuro: #0E7280;
  --acento-claro: #4FD1D9;
  --acento-suave: rgba(79, 209, 217, 0.16);

  /* WhatsApp (solo para acciones de WhatsApp)
     Verde ligeramente más oscuro que el oficial de WhatsApp: el tono original
     (#128C4A) daba ~4.3:1 de contraste con texto blanco, por debajo del
     mínimo AA (4.5:1). Mismo matiz/saturación, solo un poco más oscuro. */
  --whatsapp: #11834F;
  --whatsapp-dark: #0C6E39;

  /* Compatibilidad con nombres antiguos */
  --navy: var(--tinta);
  --navy-light: var(--tinta-2);
  --cian: var(--acento);
  --blanco: var(--crema);
  --light-bg: var(--papel-2);
  --light-bg-2: var(--papel);
  --texto-suave: var(--tinta-suave);

  /* Líneas y sombras (frías, tintadas con navy) */
  --borde: rgba(0, 33, 51, 0.14);
  --borde-suave: rgba(0, 33, 51, 0.08);
  --sombra: 0 30px 60px -28px rgba(0, 33, 51, 0.35);
  --sombra-suave: 0 16px 40px -20px rgba(0, 33, 51, 0.22);
  --sombra-flotante: 0 42px 80px -36px rgba(0, 33, 51, 0.45);

  /* Radios: contenedores generosos, núcleos concéntricos */
  --radio-xl: 30px;
  --radio: 22px;
  --radio-nucleo: 16px;
  --radio-chico: 12px;

  /* Tipografía */
  --fuente-titulo: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fuente-cuerpo: 'Instrument Sans', 'Avenir Next', 'Segoe UI', sans-serif;

  /* Movimiento: curvas con intención, nunca linear/ease-in-out */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-suave: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --header-h: 66px;
}

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

html{ scroll-behavior: smooth; overflow-x: hidden; }

body{
  margin: 0;
  overflow-x: hidden;
  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano de papel: capa fija sobre todo, imperceptible pero presente */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

::selection{ background: var(--acento); color: #FFFFFF; }

h1, h2, h3, h4{
  font-family: var(--fuente-titulo);
  font-weight: 550;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p{ margin: 0 0 1em; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

main{ padding-top: calc(var(--header-h) + 26px); }

/* Foco visible para accesibilidad de teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- Revelado al hacer scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
}
[data-reveal].visible{
  opacity: 1;
  transform: none;
  filter: none;
}
[data-reveal-orden="2"]{ transition-delay: .1s; }
[data-reveal-orden="3"]{ transition-delay: .2s; }
[data-reveal-orden="4"]{ transition-delay: .3s; }
[data-reveal-orden="5"]{ transition-delay: .4s; }
[data-reveal-orden="6"]{ transition-delay: .5s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Ceja editorial (eyebrow) ---------- */
.ceja{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  border: 1px solid var(--borde);
  background: var(--crema);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 18px;
}

/* ---------- Botones ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .98rem;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    background .3s var(--ease-out),
    color .3s var(--ease-out),
    border-color .3s var(--ease-out);
  line-height: 1.1;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.btn:active{ transform: translateY(0) scale(.98); box-shadow: none; }

/* Primario (nombre histórico .btn-cian): navy de marca */
.btn-cian{
  background: var(--tinta);
  color: #FFFFFF;
}
.btn-cian:hover{ background: var(--tinta-2); }

/* Sobre fondos oscuros, el primario se invierte a cian de marca */
.seccion-navy .btn-cian,
.tarjeta-comparacion.kindle .btn-cian,
.site-footer .btn-cian{
  background: var(--acento-claro);
  color: var(--tinta);
}
.seccion-navy .btn-cian:hover,
.tarjeta-comparacion.kindle .btn-cian:hover,
.site-footer .btn-cian:hover{
  background: #6FDDE3;
}

.btn-outline{
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline:hover{ background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; }

.btn-outline-navy{
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--borde-suave);
}
.btn-outline-navy:hover{ border-color: var(--tinta); background: var(--crema); }

.btn-whatsapp{
  background: var(--whatsapp);
  color: #FFFFFF;
}
.btn-whatsapp:hover{ background: var(--whatsapp-dark); }
/* Logo de WhatsApp dentro de los botones (lo inyecta ponerIconoWhatsApp) */
.btn-whatsapp svg{
  width: 19px; height: 19px;
  margin-right: 8px;
  vertical-align: -4px;
  flex-shrink: 0;
}

/* Flecha anidada en su propio círculo (botón-dentro-de-botón) */
.btn .orbe{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  margin-right: -10px;
  transition: transform .45s var(--ease-out), background .3s var(--ease-out);
}
.btn:hover .orbe{ transform: translate(3px, -2px) scale(1.06); background: rgba(255, 255, 255, 0.28); }
.orbe-libro svg{ width: 16px; height: 16px; }
.btn:hover .orbe-libro svg{ transform: scale(1.08); }
.seccion-navy .btn-cian .orbe,
.site-footer .btn-cian .orbe{ background: rgba(0, 33, 51, 0.14); }

.btn-bloque{ width: 100%; }
.btn-chico{ padding: 9px 16px; font-size: .85rem; }

/* Ícono de carrito en los botones de "Agregar al pedido" */
.icono-carrito{ width: 18px; height: 18px; flex-shrink: 0; }
.btn-chico .icono-carrito{ width: 15px; height: 15px; }

.btn:disabled{ opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Header: píldora flotante ---------- */
.site-header{
  position: fixed;
  top: 14px;
  left: 0; right: 0;
  z-index: 40;
  pointer-events: none;
}
.site-header .container{
  max-width: 1180px;
}
.header-pildora{
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(251, 253, 253, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--borde-suave);
  box-shadow: 0 18px 40px -22px rgba(0, 33, 51, 0.35), inset 0 1px 0 rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 9px 10px 9px 20px;
}

/* Logo real de la marca */
.logotipo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logotipo img{
  height: 34px;
  width: auto;
  display: block;
}
.footer-logo .logotipo img{ height: 46px; }

.nav-desktop{ display: none; }
.nav-desktop ul{
  list-style: none;
  display: flex;
  /* Centrado vertical: sin esto los <li> se estiran a la altura del más
     alto (el de "Solo clientes", que es inline-flex con padding) y los
     enlaces de solo texto quedan arriba, desalineados del logo. */
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.nav-desktop a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 550;
  font-size: .88rem;
  color: var(--tinta-suave);
  padding: 9px 13px;
  border-radius: 999px;
  transition: color .3s var(--ease-out), background .3s var(--ease-out);
  white-space: nowrap;
}
.nav-desktop a:hover{ color: var(--tinta); background: var(--acento-suave); }
.nav-desktop a[aria-current="page"]{
  color: #FFFFFF;
  background: var(--tinta);
}

.header-acciones{
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-carrito{
  position: relative;
  background: var(--tinta);
  border: none;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 700;
  font-size: .96rem;
  font-family: var(--fuente-cuerpo);
  box-shadow: var(--sombra-suave);
  transition: transform .45s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn-carrito:hover{ background: var(--tinta-2); transform: translateY(-2px); box-shadow: var(--sombra-flotante); }
.btn-carrito:active{ transform: scale(.97); }
.btn-carrito svg{ width: 20px; height: 20px; }
.contador-carrito{
  position: absolute;
  top: -7px;
  right: -6px;
  background: var(--acento-claro);
  color: var(--tinta);
  font-size: .74rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--papel);
}
.contador-carrito[data-vacio="true"]{ display: none; }

/* Hamburguesa que se transforma en X */
.btn-menu{
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  width: 42px; height: 42px;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.btn-menu span{
  display: block;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--tinta);
  transition: transform .5s var(--ease-drawer), opacity .3s var(--ease-out);
}
.btn-menu[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
.btn-menu[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }

/* Menú móvil: telón completo navy con revelado escalonado */
.nav-movil{
  position: fixed;
  inset: 0;
  pointer-events: auto; /* el header padre tiene pointer-events:none */
  background: rgba(0, 33, 51, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 39;
  padding: calc(var(--header-h) + 44px) 26px 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease-drawer), visibility 0s linear .5s;
}
.nav-movil.abierto{
  visibility: visible;
  opacity: 1;
  transition: opacity .5s var(--ease-drawer);
}
.nav-movil ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-movil li{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.nav-movil.abierto li{ opacity: 1; transform: none; }
.nav-movil.abierto li:nth-child(1){ transition-delay: .06s; }
.nav-movil.abierto li:nth-child(2){ transition-delay: .12s; }
.nav-movil.abierto li:nth-child(3){ transition-delay: .18s; }
.nav-movil.abierto li:nth-child(4){ transition-delay: .24s; }
.nav-movil.abierto li:nth-child(5){ transition-delay: .3s; }
.nav-movil.abierto li:nth-child(6){ transition-delay: .36s; }
.nav-movil a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #F2F7F8;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(242, 247, 248, 0.1);
}
.nav-movil a::after{
  content: "→";
  font-size: 1.1rem;
  color: var(--acento-claro);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.nav-movil a:hover::after,
.nav-movil a[aria-current="page"]::after{ opacity: 1; transform: none; }
.nav-movil a[aria-current="page"]{ color: var(--acento-claro); }
.nav-movil .btn{ margin-top: 34px; opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out) .42s, transform .6s var(--ease-out) .42s; }
.nav-movil.abierto .btn{ opacity: 1; transform: none; }

/* Modelos (Kindle/Kobo) dentro del menú móvil: acceso directo a cada
   producto sin pasar por el catálogo. */
.nav-movil-modelos{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(242, 247, 248, 0.12);
}
.nav-movil-subtitulo{
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-claro);
  margin: 18px 0 6px;
}
.nav-movil-modelos > span:first-child{ margin-top: 0; }
.nav-movil-modelos ul{ list-style: none; margin: 0; padding: 0; }
.nav-movil-modelos a{
  display: block;
  color: rgba(242, 247, 248, 0.82);
  text-decoration: none;
  font-family: var(--fuente-cuerpo);
  font-size: .92rem;
  font-weight: 500;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(242, 247, 248, 0.06);
}
.nav-movil-modelos a:hover,
.nav-movil-modelos a[aria-current="page"]{ color: var(--acento-claro); }

@media (min-width: 960px){
  .nav-desktop{ display: block; }
  .btn-menu{ display: none; }
  .nav-movil{ display: none !important; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  background: var(--whatsapp);
  color: #FFFFFF;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 36px -14px rgba(12, 110, 57, 0.55);
  text-decoration: none;
  transition: transform .45s var(--ease-out);
}
.whatsapp-flotante::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: pulso-wa 2.6s var(--ease-out) infinite;
}
@keyframes pulso-wa{
  0%{ transform: scale(1); opacity: .7; }
  70%, 100%{ transform: scale(1.55); opacity: 0; }
}
.whatsapp-flotante:hover{ transform: scale(1.07) translateY(-2px); }
.whatsapp-flotante:active{ transform: scale(.96); }
.whatsapp-flotante svg{ width: 28px; height: 28px; }

/* ---------- Hero editorial: video de fondo (assets/video/hero.mp4) ----------
   "main{ padding-top: header-h + 26px }" reserva espacio para que el navbar
   fijo no tape el contenido en todas las páginas. Acá se cancela con un
   margin-top negativo (solo en esta sección) para que el video se vea
   también detrás del navbar, y se repone esa misma altura como padding
   para que el texto quede exactamente donde estaba. */
.hero{
  position: relative;
  color: var(--papel);
  margin-top: calc(-1 * (var(--header-h) + 26px));
  padding: calc(var(--header-h) + 26px + 44px) 0 0;
  overflow: hidden;
  background: var(--tinta) center/cover no-repeat;
  background-image: url("../img/hero-video-poster.jpg");
}
.hero-video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce){
  .hero-video-bg{ display: none; }
}
/* Velo navy: tiñe el video (cálido) al azul de marca y garantiza contraste
   del texto en todo momento, incluso en los fotogramas más claros del loop. */
.hero-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg,
    rgba(0, 33, 51, 0.90) 0%,
    rgba(0, 33, 51, 0.84) 55%,
    rgba(0, 33, 51, 0.68) 100%);
}
@media (max-width: 919px){
  .hero-video-overlay{ background: rgba(0, 33, 51, 0.86); }
}
.hero .container{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.hero-texto{
  padding-bottom: 24px;
}
.hero-texto h1{
  font-size: clamp(2.7rem, 6.4vw, 4.7rem);
  font-weight: 560;
  line-height: 1.18;
  margin-bottom: .35em;
  letter-spacing: -0.03em;
}
.hero-texto h1 .cursiva{
  font-style: italic;
  font-weight: 480;
  color: var(--acento-claro);
}

/* Trazo resaltador (elemento firma, se conserva).
   Bloque sólido tipo marcador (pedido explícito de José: nada de banda
   translúcida ni línea, un rectángulo opaco cubriendo toda la palabra). */
.resaltado{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: .03em .16em .07em;
  border-radius: 5px;
  background: var(--acento);
}
.hero-texto h1 .resaltado{
  color: var(--papel);
}

.hero-ctas{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
@media (min-width: 560px){
  .hero-ctas{ flex-direction: row; align-items: center; }
}
/* En mobile todo el bloque del hero se sentía muy pegado (ceja, título,
   botones, pagos y sellos casi sin aire entre sí) — más espacio en cada
   salto para que se vea limpio, no cargado. El hueco grande entre el
   título y el botón (para que se vea el video) estaba desbalanceado:
   mucho video vacío arriba y los textos amontonados abajo — parte de
   ese espacio se repartió entre sellos, prueba social y pagos. */
@media (max-width: 919px){
  .hero{ padding-bottom: 0; }
  .hero-texto .ceja{ margin-bottom: 20px; }
  .hero-texto h1{ margin-top: 50px; }
  .hero-sellos{ margin-top: 56px; padding-top: 30px; }
  .hero .hero-sellos{ gap: 14px 24px; }
  .hero-prueba-social{ margin-top: 40px; }
  .hero-pagos{ margin-top: 42px; }
}
@media (max-width: 430px){
  .hero-ctas{ margin-top: 90px; }
}
/* Sobre el video, el primario pasa a cian sólido (mismo patrón que .seccion-navy)
   y el secundario a borde claro — ambos ya probados sobre fondo navy en el sitio. */
.hero .btn-cian{
  background: var(--acento-claro);
  color: var(--tinta);
}
.hero .btn-cian:hover{ background: #6FDDE3; }
.hero .btn-cian .orbe{ background: rgba(0, 33, 51, 0.14); }
.hero .btn-outline-navy{
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn-outline-navy:hover{ background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; }
.icono-whatsapp{ width: 18px; height: 18px; flex-shrink: 0; }

/* Métodos de pago aceptados, junto al CTA principal */
.hero-pagos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 36px;
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(242, 247, 248, 0.82);
}
.hero-pagos > span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.hero-pagos svg{
  width: 16px; height: 16px;
  color: var(--acento-claro);
  flex-shrink: 0;
  display: block;
}
.hero-pagos .hero-pagos-etiqueta{ font-weight: 600; color: #FFFFFF; }

/* Prueba social bajo los sellos: copy configurable en productos.js */
.hero-prueba-social{
  margin-top: 32px;
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 600;
  color: #FFFFFF;
}
.hero-prueba-social[hidden]{ display: none; }

/* Mini-fila de confianza bajo los CTAs. Estructura base reutilizada tal
   cual (fondo claro) en las fichas de producto (.producto-hero). */
.hero-sellos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--borde-suave);
  font-size: .84rem;
  font-weight: 550;
  color: var(--tinta-suave);
}
.hero-sellos span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-sellos svg{
  width: 16px; height: 16px;
  color: var(--acento-oscuro);
  flex-shrink: 0;
}
/* Sobre el video del hero de portada: texto claro (mismas reglas de
   arriba, solo recoloreadas — no tocar ".hero-sellos" a secas). */
.hero .hero-sellos{
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(242, 247, 248, 0.82);
}
.hero .hero-sellos svg{ color: var(--acento-claro); }

.flota-a{ animation: flotar 7s var(--ease-suave) infinite alternate; }
.flota-b{ animation: flotar 8.5s var(--ease-suave) infinite alternate-reverse; }
.flota-c{ animation: flotar 6s var(--ease-suave) infinite alternate; animation-delay: 1.2s; }
@keyframes flotar{
  from{ transform: translateY(0); }
  to{ transform: translateY(-14px); }
}

@media (min-width: 920px){
  .hero{ padding: calc(var(--header-h) + 26px + 90px) 0 0; }
  .hero-texto{ max-width: 640px; }
  .hero-sellos{ margin-top: 56px; }
  .hero-prueba-social{ margin-top: 40px; }
  .hero-pagos{ margin-top: 42px; }
}

.cinta-titulo{
  margin: 48px auto 20px;
  max-width: 90%;
}
@media (min-width: 760px){
  .cinta-titulo{
    margin: 64px auto 26px;
  }
}

/* ---------- Cinta de géneros (marquee) ---------- */
.cinta{
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
  background: var(--papel-2);
  overflow: hidden;
  padding: 16px 0;
}
.cinta-pista{
  display: flex;
  width: max-content;
  animation: cinta-scroll 46s linear infinite;
}
.cinta:hover .cinta-pista{ animation-play-state: paused; }
.cinta ul{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0 17px;
}
.cinta li{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--tinta-suave);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 34px;
}
.cinta li::after{
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B4C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5.5c4-1,8-1,12 0'/%3E%3Cpath d='M7 3.8c4-1,8-1,12 0'/%3E%3Cpath d='M19 3.8v1.7'/%3E%3Cpath d='M7 3.8C5 3.8,4 5.3,4 7.3v11.7c0 2,1 3.5,3 3.5'/%3E%3Crect x='7' y='5.5' width='12' height='15.5' rx='2' fill='rgba(79,209,217,0.15)'/%3E%3Cline x1='12' y1='18.2' x2='14' y2='18.2' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  font-style: normal;
  font-size: 0;
  color: var(--acento);
}
@keyframes cinta-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .cinta-pista{ animation: none; }
}

/* ---------- Barra / tarjetas de confianza ---------- */
.barra-confianza{ padding: 0; background: transparent; border: 0; }
.confianza-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 860px){
  .confianza-grid{ grid-template-columns: repeat(4, 1fr); }
  .confianza-grid.confianza-5{ grid-template-columns: repeat(5, 1fr); }
}
.sello{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 22px 20px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.sello:hover{ transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.sello svg{
  width: 26px; height: 26px;
  color: var(--acento-oscuro);
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.sello h3{
  font-family: var(--fuente-cuerpo);
  font-size: .95rem;
  font-weight: 650;
  margin: 0 0 4px;
  letter-spacing: 0;
}
.sello p{
  font-size: .84rem;
  color: var(--tinta-suave);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Secciones ---------- */
.seccion{ padding: 50px 0; }
/* En pantallas chicas MUCHO menos: con 40px todavía quedaban bloques
   grandes de fondo sin contenido (pedido de José: menos de la mitad). */
@media (max-width: 425px){
  .seccion{ padding: 18px 0; }
}
.seccion-clara{ background: var(--papel-2); }
.seccion-navy{
  background: var(--tinta);
  color: var(--papel);
  position: relative;
  overflow: hidden;
}
.seccion-navy::before{
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 209, 217, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.titulo-seccion{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  text-align: center;
  margin-bottom: 12px;
  font-weight: 560;
}
.titulo-seccion .cursiva{
  font-style: italic;
  font-weight: 480;
  color: var(--acento-oscuro);
}
.seccion-navy .titulo-seccion .cursiva{ color: var(--acento-claro); }
.subtitulo-seccion{
  text-align: center;
  color: var(--tinta-suave);
  max-width: 58ch;
  margin: 0 auto 46px;
  font-size: 1.02rem;
}
.seccion-navy .subtitulo-seccion{ color: rgba(242, 247, 248, 0.75); }

.encabezado-alineado{ text-align: left; }
.encabezado-alineado .titulo-seccion,
.encabezado-alineado .subtitulo-seccion{ text-align: left; margin-left: 0; }

/* ---------- Acento de marca sobre nombres de producto ---------- */
.marca-acento{
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--acento-oscuro);
  text-transform: uppercase;
}
.seccion-navy .marca-acento{ color: var(--acento-claro); }

/* ---------- Filtros de catálogo ---------- */
.filtros{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.filtro-btn{
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .86rem;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .35s var(--ease-out);
}
.filtro-btn:hover{ border-color: var(--tinta); color: var(--tinta); transform: translateY(-1px); }
.filtro-btn:active{ transform: scale(.97); }
.filtro-btn[aria-pressed="true"]{
  background: var(--tinta);
  border-color: var(--tinta);
  color: #FFFFFF;
}
a.filtro-comparar{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-radius: 10px;
  border-style: solid;
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento-oscuro);
}
a.filtro-comparar:hover{ background: var(--acento); border-color: var(--acento); color: #FFFFFF; text-decoration: none; }

/* En mobile el encabezado (título + subtítulo + filtros) dejaba mucho
   espacio en blanco antes de ver el primer producto — se ve "vacío".
   Solo se acorta acá, el resto de páginas que usan .seccion no cambia. */
@media (max-width: 640px){
  .seccion-catalogo{ padding-top: 6px; }
  .seccion-catalogo .subtitulo-seccion{ margin-bottom: 22px; }
  .seccion-catalogo .filtros{ margin-bottom: 20px; }
}

.grilla-productos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}
@media (max-width: 560px){
  .grilla-productos{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .tarjeta-producto{
    padding: 6px;
  }
  .tarjeta-producto .foto-wrap{
    padding: 12px;
  }
  .tarjeta-producto .cuerpo{
    padding: 10px 6px 6px;
    gap: 6px;
  }
  .tarjeta-producto h3{
    font-size: 0.95rem;
  }
  .tarjeta-producto .resumen{
    display: none;
  }
  .tarjeta-producto .precio{
    font-size: 1.15rem;
    padding-top: 6px;
  }
  .tarjeta-producto .acciones .btn{
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .tarjeta-producto .acciones .btn svg{
    width: 14px;
    height: 14px;
  }
  .tarjeta-producto .acciones{
    gap: 4px;
    margin-top: 4px;
  }
  /* Con 2 columnas la tarjeta es angosta: la etiqueta ya no va encima
     de la foto (tapaba el producto) — pasa a ser un chip chico arriba,
     fuera de la imagen (pedido de José). */
  .etiqueta-destacado{
    position: static;
    display: inline-flex;
    align-self: flex-start;
    order: -1;
    margin: 0 0 6px;
    font-size: 0.56rem;
    padding: 3px 7px;
    letter-spacing: 0.08em;
  }
  .etiqueta-destacado--oferta{
    padding: 4px 8px;
    gap: 2px;
  }
  .etiqueta-destacado--oferta .etiqueta-oferta-linea{ font-size: 0.66rem; }
  .etiqueta-destacado--oferta .etiqueta-oferta-limite{ font-size: 0.5rem; }
}

/* Vista "Todos" del catálogo: subtítulos por sección para ubicarse
   sin depender de los filtros. El contenedor pasa a apilar sus grupos
   (cada uno con su propia grilla interna, misma clase .grilla-productos). */
.grilla-productos.catalogo-agrupado{
  display: block;
}
.catalogo-agrupado .grilla-productos{ margin-bottom: 48px; }
.catalogo-agrupado .grilla-productos:last-child{ margin-bottom: 0; }
.catalogo-subtitulo{
  font-family: var(--fuente-titulo);
  font-weight: 570;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 0 0 20px;
  padding-top: 8px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
/* Mismo juego de colores que los títulos del sitio: tinta + acento en cursiva */
/* Sin itálica: a este tamaño la "d" y la "l" de Fraunces itálica se
   confundían (pedido de José) — se mantiene el acento de color, solo
   más peso y sin inclinar. */
.catalogo-subtitulo .cursiva{
  font-style: normal;
  font-weight: 650;
  color: var(--acento-oscuro);
}
.catalogo-agrupado > .catalogo-subtitulo:first-child{ padding-top: 0; }

/* Botones "salta a tu modelo": aparecen solo con el filtro Accesorios
   activo, arriba de los grupos. Más chicos que los filtros principales
   (.filtro-btn) — son navegación secundaria dentro de la vista. */
.salto-modelo{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 0 0 36px;
}
.salto-modelo-btn{
  background: var(--papel-2);
  border: 1px solid var(--borde-suave);
  color: var(--tinta-suave);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .78rem;
  padding: 7px 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: all .3s var(--ease-out);
}
.salto-modelo-btn:hover{ border-color: var(--acento); color: var(--acento-oscuro); transform: translateY(-1px); }

.tarjeta-producto{
  position: relative;
  background: rgba(0, 33, 51, 0.035);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-xl);
  padding: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s var(--ease-out);
}
.tarjeta-producto:hover{
  border-color: var(--borde-fuerte);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.tarjeta-producto:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-underline-offset: 4px;
}
.tarjeta-producto:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
.tarjeta-producto .acciones{ position: relative; z-index: 1; }
.tarjeta-producto .acciones .btn{ cursor: pointer; }
.tarjeta-producto .foto-wrap{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
  border-radius: var(--radio);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.tarjeta-producto .foto-wrap img{
  height: 100%; width: 100%;
  object-fit: contain;
  transition: transform .8s var(--ease-drawer);
}
.tarjeta-producto:hover .foto-wrap img{ transform: scale(1.045) rotate(-0.5deg); }

.etiqueta-destacado{
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--tinta);
  color: #FFFFFF;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 6px 11px;
  border-radius: 8px;
  z-index: 1;
}
.etiqueta-destacado::before{ content: "✦ "; color: var(--acento-claro); }
.etiqueta-destacado--oferta{
  background: #e60000;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 13px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(230,0,0,.4);
}
.etiqueta-destacado--oferta::before{ content: none; }
.etiqueta-destacado--oferta .etiqueta-oferta-linea{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.etiqueta-destacado--oferta .etiqueta-oferta-linea svg{ width: 16px; height: 16px; flex-shrink: 0; }
.etiqueta-destacado--oferta .etiqueta-oferta-limite{
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .95;
}

.badge-oferta-inline{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e60000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 14px;
  font-size: .54em;
  vertical-align: middle;
  margin-left: 8px;
  font-weight: 700;
}
.badge-oferta-inline svg{ width: 13px; height: 13px; }

.tarjeta-producto .cuerpo{
  padding: 18px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tarjeta-producto h3{
  font-size: 1.18rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  margin: 0;
}
.tarjeta-producto .resumen{
  color: var(--tinta-suave);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}
.tarjeta-producto .precio{
  font-family: var(--fuente-titulo);
  font-size: 1.42rem;
  font-weight: 600;
  margin: 10px 0 0;
  margin-top: auto;
  padding-top: 12px;
}
.tarjeta-producto .precio .divisa{
  font-size: .82rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  color: var(--tinta-suave);
  margin-right: 3px;
}
.tarjeta-producto .acciones{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.nota-precio{
  text-align: center;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: .9rem;
  color: var(--tinta-suave);
  margin-top: 30px;
}
.nota-precio::before{ content: "✦ "; font-style: normal; font-size: .7rem; color: var(--acento); }

/* Grilla bento para destacados (rompe la monotonía de columnas iguales) */
@media (min-width: 920px){
  .grilla-bento{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
  }
  /* Los dos Kindle van lado a lado, mismo tamaño de tarjeta estándar
     (antes la Paperwhite era una card de 2 filas y quedaba con la foto
     estirada y mucho espacio vacío alrededor). */
  .grilla-bento > :nth-child(1),
  .grilla-bento > :nth-child(2){ grid-column: span 6; }
  /* Kobo y Scribe ocupan la fila completa, con foto a la izquierda —
     mismo tratamiento horizontal para ambas. */
  .grilla-bento > :nth-child(3),
  .grilla-bento > :nth-child(4){
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .grilla-bento > :nth-child(3) .foto-wrap,
  .grilla-bento > :nth-child(4) .foto-wrap{
    aspect-ratio: auto;
    width: 320px;
    flex-shrink: 0;
  }
  .grilla-bento > :nth-child(3) .cuerpo,
  .grilla-bento > :nth-child(4) .cuerpo{
    padding: 26px 30px;
    justify-content: center;
  }
  .grilla-bento > :nth-child(3) .acciones,
  .grilla-bento > :nth-child(4) .acciones{
    flex-direction: row;
    align-items: center;
  }
  .grilla-bento > :nth-child(3) .acciones .btn,
  .grilla-bento > :nth-child(4) .acciones .btn{ width: auto; }
}

/* ---------- Índice literario (¿cuál me conviene?) ---------- */
.indice{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
}
.indice li{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 19px 14px;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: background .35s var(--ease-out), transform .45s var(--ease-out);
}
.indice li:hover{ background: var(--crema); transform: translateX(4px); }
.indice li:active{ transform: translateX(4px) scale(.995); }
.indice .perfil{
  color: var(--tinta);
  font-weight: 500;
  font-size: .98rem;
}
.indice .puntos{
  flex: 1;
  min-width: 40px;
  border-bottom: 2px dotted rgba(0, 33, 51, 0.28);
  transform: translateY(-5px);
}
.indice .modelo{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--acento-oscuro);
  text-align: right;
  white-space: nowrap;
}
.indice li::after{
  content: "→";
  font-size: .9rem;
  color: var(--acento);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.indice li:hover::after{ opacity: 1; transform: none; }
@media (max-width: 560px){
  .indice .modelo{ white-space: normal; }
  .indice li::after{ display: none; }
}

/* ---------- Asesor de lectura (chat) ---------- */
.asesor-grid{
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px){
  .asesor-grid{ grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
}
.asesor-intro h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 560;
}
.asesor-intro h2 .cursiva{ font-style: italic; font-weight: 480; color: var(--acento-oscuro); }
.asesor-intro p{ color: var(--tinta-suave); max-width: 44ch; }
.asesor-pasos{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asesor-pasos li{
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.asesor-pasos .num{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--acento-oscuro);
  flex-shrink: 0;
}
/* Enlaces inline dentro de un paso (ej. "catálogo" en garantia.html) */
.asesor-pasos a{ color: var(--acento-oscuro); font-weight: 600; }

/* La consola del chat: carcasa navy, núcleo de papel */
.chat{
  background: var(--tinta);
  border-radius: var(--radio-xl);
  padding: 10px;
  box-shadow: var(--sombra-flotante), inset 0 1px 0 rgba(79, 209, 217, 0.14);
}
.chat-nucleo{
  background: var(--papel);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}
.chat-cabecera{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: var(--crema);
  border-bottom: 1px solid var(--borde-suave);
}
.chat-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--acento-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-avatar svg{ width: 20px; height: 20px; }
.chat-cabecera .quien{ line-height: 1.25; }
.chat-cabecera .nombre-bot{
  font-weight: 650;
  font-size: .95rem;
  display: block;
}
.chat-cabecera .estado{
  font-size: .74rem;
  color: var(--tinta-suave);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-cabecera .estado::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2E9E5B;
  animation: latido 2.2s var(--ease-suave) infinite;
}
@keyframes latido{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}
.chat-etiqueta{
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 10px;
}

.chat-log{
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 430px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.burbuja{
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: .94rem;
  line-height: 1.55;
  animation: burbuja-entra .55s var(--ease-out) both;
}
.burbuja.bot{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-bottom-left-radius: 6px;
  align-self: flex-start;
  box-shadow: 0 4px 14px -8px rgba(0, 33, 51, 0.25);
}
.burbuja.usuario{
  background: var(--tinta);
  color: #F2F7F8;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}
@keyframes burbuja-entra{
  from{ opacity: 0; transform: translateY(14px) scale(.97); }
  to{ opacity: 1; transform: none; }
}

.escribiendo{
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 16px 18px;
}
.escribiendo i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tinta-suave);
  animation: punto-salta 1.2s var(--ease-suave) infinite;
}
.escribiendo i:nth-child(2){ animation-delay: .15s; }
.escribiendo i:nth-child(3){ animation-delay: .3s; }
@keyframes punto-salta{
  0%, 60%, 100%{ transform: translateY(0); opacity: .45; }
  30%{ transform: translateY(-5px); opacity: 1; }
}

.chat-opciones{
  padding: 14px 18px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  background: var(--crema);
  border-top: 1px solid var(--borde-suave);
  min-height: 68px;
}
.opcion-chip{
  background: var(--papel);
  border: 1.5px solid var(--borde);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .88rem;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .4s var(--ease-out);
  animation: burbuja-entra .5s var(--ease-out) both;
}
.opcion-chip:nth-child(2){ animation-delay: .07s; }
.opcion-chip:nth-child(3){ animation-delay: .14s; }
.opcion-chip:nth-child(4){ animation-delay: .21s; }
.opcion-chip:hover{
  border-color: var(--acento);
  background: var(--acento-suave);
  transform: translateY(-2px);
}
.opcion-chip:active{ transform: scale(.96); }
.opcion-reiniciar{
  border-style: dashed;
  color: var(--tinta-suave);
}

/* Recomendación dentro del chat */
.chat-reco{
  align-self: stretch;
  max-width: 100%;
  background: rgba(0, 33, 51, 0.035);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 7px;
  animation: burbuja-entra .6s var(--ease-out) both;
}
.chat-reco .reco-nucleo{
  background: var(--crema);
  border-radius: var(--radio-nucleo);
  border: 1px solid var(--borde-suave);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.chat-reco img{
  width: 78px; height: 78px;
  object-fit: contain;
  background: var(--papel);
  border-radius: 12px;
  padding: 8px;
  flex-shrink: 0;
}
.chat-reco .reco-info{ min-width: 0; }
.chat-reco .reco-marca{
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
}
.chat-reco h4{
  font-size: 1.05rem;
  margin: 2px 0 2px;
  font-weight: 600;
}
.chat-reco .reco-precio{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.05rem;
}
.chat-reco .reco-acciones{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 10px 6px;
}
.chat-reco .reco-acciones .btn{ flex: 1; min-width: 130px; }

/* ---------- Modal ficha de producto ---------- */
.modal-fondo{
  position: fixed;
  inset: 0;
  background: rgba(0, 33, 51, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 60;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-fondo.abierto{ display: flex; animation: fondo-entra .4s var(--ease-out) both; }
@keyframes fondo-entra{ from{ opacity: 0; } to{ opacity: 1; } }

.modal-ficha{
  background: var(--papel);
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  padding: 26px 22px 30px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.modal-fondo.abierto .modal-ficha{ animation: ficha-entra .55s var(--ease-drawer) both; }
@keyframes ficha-entra{
  from{ opacity: 0; transform: translateY(48px) scale(.98); }
  to{ opacity: 1; transform: none; }
}
@media (min-width: 780px){
  .modal-fondo{ align-items: center; padding: 30px; }
  .modal-ficha{ border-radius: 28px; padding: 38px; }
}

.modal-cerrar{
  position: absolute;
  top: 16px; right: 16px;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--tinta);
  z-index: 2;
  transition: transform .4s var(--ease-out), background .3s var(--ease-out);
}
.modal-cerrar:hover{ background: var(--papel-2); transform: rotate(90deg); }
.modal-cerrar:active{ transform: rotate(90deg) scale(.94); }

.ficha-grid{ display: grid; gap: 26px; }
@media (min-width: 780px){
  .ficha-grid{ grid-template-columns: 330px 1fr; align-items: start; }
  .ficha-lado{ position: sticky; top: 0; }
}

/* ---------- Galería de fotos y video en la ficha ---------- */
.ficha-media{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
  border-radius: var(--radio);
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.ficha-media.ficha-media-video{ background: var(--tinta); }
.ficha-media img,
.ficha-media video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ficha-media iframe{
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
}
@media (min-width: 780px){
  .ficha-media{ height: 320px; }
}

.ficha-miniaturas{
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ficha-miniatura{
  flex-shrink: 0;
  width: 56px; height: 56px;
  padding: 0;
  background: var(--crema);
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s var(--ease-out);
}
.ficha-miniatura img{ width: 100%; height: 100%; object-fit: cover; }
.ficha-miniatura.activa{ border-color: var(--acento); }
.ficha-miniatura .miniatura-video{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  color: var(--acento-claro);
}
.ficha-miniatura .miniatura-video svg{ width: 18px; height: 18px; }

/* Fila de confianza dentro de la ficha */
.ficha-confianza{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ficha-confianza span{
  font-size: .72rem;
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  padding: 9px 8px;
  text-align: center;
  line-height: 1.35;
}

.modal-ficha h2{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 570;
  margin: 4px 0 8px;
  letter-spacing: -0.02em;
}

.chips-ideal{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
}
.chips-ideal span:not(.badge-sin-ads){
  font-size: .76rem;
  font-weight: 600;
  color: var(--acento-oscuro);
  background: var(--acento-suave);
  border-radius: 999px;
  padding: 6px 13px;
}
.badge-sin-ads{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: #2E7D32;
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 2px 8px rgba(46,125,50,.35);
}
.badge-sin-ads svg{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.badge-modelo-nuevo{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: var(--acento-oscuro);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 2px 8px rgba(14,114,128,.35);
}
.badge-modelo-nuevo svg{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.item-carrito .badge-sin-ads{
  font-size: .68rem;
  padding: 3px 10px;
  margin: 2px 0 4px;
  box-shadow: none;
}
.item-carrito .badge-sin-ads svg{
  width: 11px;
  height: 11px;
}

.modal-ficha .descripcion-ficha{
  color: var(--tinta-suave);
  line-height: 1.7;
}

.modal-ficha .subtitulo-ficha{
  font-family: var(--fuente-cuerpo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 24px 0 12px;
}

.modal-ficha ul.beneficios{
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.modal-ficha ul.beneficios li{
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: .94rem;
  line-height: 1.55;
}
.modal-ficha ul.beneficios li::before{
  content: "✓";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(3px);
}

/* Especificaciones técnicas */
.especificaciones{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--borde-suave);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-nucleo);
  overflow: hidden;
}
@media (min-width: 560px){
  .especificaciones{ grid-template-columns: 1fr 1fr; }
}
.espec{
  background: var(--crema);
  padding: 13px 16px;
}
.espec dt{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 3px;
}
.espec dd{
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}

.modal-ficha .nota-honesta{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico);
  padding: 13px 16px;
  font-size: .88rem;
  line-height: 1.6;
  margin-top: 18px;
  color: var(--tinta-suave);
}
.modal-ficha .nota-honesta strong{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-weight: 550;
  color: var(--tinta);
}

/* Combina bien con */
.combina{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.combina-item{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-nucleo);
  padding: 10px 12px;
}
.combina-item img{
  width: 48px; height: 48px;
  object-fit: contain;
  background: var(--papel);
  border-radius: 10px;
  padding: 5px;
  flex-shrink: 0;
}
.combina-item .combina-info{ flex: 1; min-width: 0; }
.combina-item .combina-nombre{
  font-size: .88rem;
  font-weight: 600;
  display: block;
}
.combina-nombre[data-ficha]{
  cursor: pointer;
  transition: color .3s var(--ease-out);
}
.combina-nombre[data-ficha]:hover{
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-underline-offset: 3px;
}
.combina-nombre[data-ficha]:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
.combina-item .combina-precio{
  font-size: .8rem;
  color: var(--tinta-suave);
}
.combina-item .btn{ flex-shrink: 0; }

/* Combina bien con (tarjetas cuadradas en páginas de producto dedicadas) */
.combina-cuadrada .container{ padding-top: 0; padding-bottom: 0; }
.combina-cuadrada-titulo{
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin: 0 0 18px;
  text-align: center;
}
.combina-cuadrada-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
.combina-cuadro{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-nucleo);
  padding: 18px 12px;
}
.combina-cuadro img{
  width: 64px; height: 64px;
  object-fit: contain;
  background: var(--papel);
  border-radius: 10px;
  padding: 6px;
}
.combina-cuadro .combina-cuadro-nombre{
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta);
}
.combina-cuadro-nombre[data-ficha]{
  cursor: pointer;
  transition: color .3s var(--ease-out);
}
.combina-cuadro-nombre[data-ficha]:hover{
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-underline-offset: 3px;
}
.combina-cuadro-nombre[data-ficha]:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
.combina-cuadro .combina-cuadro-precio{
  font-size: .78rem;
  color: var(--tinta-suave);
}
.combina-cuadro .btn{
  width: 100%;
  font-size: .78rem;
  padding: 8px 10px;
}

/* Tarjeta de combo con descuento (destacada en rojo) */
.combina-cuadro--oferta{
  background: #FBEAEA;
  border: 1px solid #E9A8A8;
  position: relative;
}
.combina-cuadro-badge{
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #e60000;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(230,0,0,.4);
}
.combina-cuadro-badge svg{ width: 15px; height: 15px; flex-shrink: 0; }
.combina-cuadro--oferta .combina-cuadro-nombre{ margin-top: 6px; }
.combina-cuadro--oferta .combina-cuadro-precio{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.combina-cuadro-tachado{
  text-decoration: line-through;
  color: #8a8a8a;
  font-size: .78rem;
}
.combina-cuadro-final{
  font-weight: 700;
  color: #d32f2f;
  font-size: .95rem;
}
.combina-cuadro-ahorro{
  font-size: .76rem;
  font-weight: 600;
  color: #b02525;
}
.combina-cuadro--oferta .btn{ background: #d32f2f; }
.combina-cuadro--oferta .btn:hover{ background: #b02525; }
.combina-cuadro-nota{
  font-size: .66rem;
  color: var(--tinta-suave);
  line-height: 1.3;
}

/* Item de combo dentro del carrito */
.combo-incluye{
  font-size: .78rem;
  color: var(--tinta-suave);
  margin: 2px 0;
}
.combo-nota{
  font-size: .68rem;
  color: var(--tinta-suave);
  font-style: italic;
  margin-top: 2px;
}

.modal-ficha .precio-modal{
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  font-weight: 600;
  margin: 20px 0 14px;
  letter-spacing: -0.02em;
}
.modal-ficha .precio-modal .divisa{
  font-size: 1rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  color: var(--tinta-suave);
  margin-right: 4px;
}
.modal-ficha .acciones-modal{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 560px){
  .modal-ficha .acciones-modal{ flex-direction: row; }
  .modal-ficha .acciones-modal .btn{ flex: 1; }
}
.modal-ficha .nota-precio{ margin-top: 18px; }

/* ---------- Fila de acciones rápidas (¿cómo llega? / comparar) ---------- */
.fila-acciones-rapidas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 24px;
}
.tarjeta-accion{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--papel-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: 16px;
  padding: 16px 10px;
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.tarjeta-accion svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--acento-oscuro); }
.tarjeta-accion:hover{ background: var(--crema); border-color: var(--tinta); transform: translateY(-2px); }
.tarjeta-accion:active{ transform: translateY(0) scale(.97); }
/* Link a la garantía: mismo estilo de tarjeta pero ocupa todo el ancho,
   para que se note que es un extra de confianza y no una tercera acción
   del mismo peso que "cómo llega"/"comparar". */
.tarjeta-accion--ancho{
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
}

/* Franja de confianza al final del catálogo: para quien duda de comprar
   por WhatsApp, antes de llegar al CTA final. */
.franja-confianza{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--acento-suave);
  border: 1px solid rgba(24, 153, 166, 0.25);
  border-radius: var(--radio);
  color: var(--tinta);
}
.franja-confianza svg{ width: 30px; height: 30px; flex-shrink: 0; color: var(--acento-oscuro); }
.franja-confianza p{ margin: 0; line-height: 1.5; font-size: .95rem; }
.franja-confianza a{ color: var(--acento-oscuro); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px){
  .franja-confianza{ flex-direction: column; text-align: center; }
}

/* ---------- Modal "¿Cómo me llega mi producto?" ---------- */
.modal-entrega{ max-width: 760px; }
.modal-entrega .ceja{ margin-bottom: 10px; }
.modal-entrega-garantia{
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--borde-suave);
  text-align: center;
  font-size: .9rem;
  color: var(--tinta-suave);
}
.modal-entrega-garantia a{ color: var(--acento-oscuro); font-weight: 700; }

.titulo-modal-entrega{
  font-family: var(--fuente-titulo);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 570;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.subtitulo-modal-entrega{
  color: var(--tinta-suave);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 48ch;
}

.entrega-videos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 620px){
  .entrega-videos-grid{ grid-template-columns: 1fr 1fr; gap: 18px; }
}

.entrega-video-item{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entrega-video-nombre{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--tinta-suave);
}
.entrega-video-nombre::before{
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-punto, var(--acento));
  border: 1px solid rgba(0, 33, 51, .15);
  flex-shrink: 0;
}
.entrega-video-marco{
  background: var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1);
}
.entrega-video-marco video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Carrito lateral (drawer) ---------- */
.carrito-fondo{
  position: fixed;
  inset: 0;
  background: rgba(0, 33, 51, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 70;
  display: none;
}
.carrito-fondo.abierto{ display: block; animation: fondo-entra .35s var(--ease-out) both; }
.carrito-panel{
  position: fixed;
  top: 0; right: 0;
  bottom: 0;
  width: 100%;
  max-width: 450px;
  background: var(--papel);
  z-index: 71;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .5s var(--ease-drawer);
  box-shadow: -30px 0 70px -30px rgba(0, 33, 51, 0.4);
}
@media (min-width: 560px){
  .carrito-panel{ border-radius: 24px 0 0 24px; }
}
.carrito-fondo.abierto .carrito-panel{ transform: translateX(0); }
.carrito-header{
  background: var(--tinta);
  color: #F2F7F8;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 560px){
  .carrito-header{ border-radius: 24px 0 0 0; }
}
.carrito-header h2{
  font-size: 1.35rem;
  margin: 0;
  font-weight: 550;
}
.carrito-cerrar{
  background: rgba(242, 247, 248, 0.1);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  color: #F2F7F8;
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s var(--ease-out), transform .4s var(--ease-out);
}
.carrito-cerrar:hover{ background: rgba(242, 247, 248, 0.2); transform: rotate(90deg); }
.carrito-cuerpo{
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.carrito-vacio{
  text-align: center;
  color: var(--tinta-suave);
  padding: 60px 14px;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
}
.carrito-vacio a{ color: var(--acento-oscuro); }
.item-carrito{
  display: flex;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.item-carrito img{
  width: 62px; height: 62px;
  object-fit: contain;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  padding: 7px;
}
.item-carrito .info{ flex: 1; }
.item-carrito .nombre{ font-weight: 600; font-size: .92rem; line-height: 1.35; }
.item-carrito .precio-unit{ color: var(--tinta-suave); font-size: .8rem; margin-top: 2px; }
.item-carrito .fila-cantidad{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.btn-cantidad{
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--crema);
  color: var(--tinta);
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition: all .3s var(--ease-out);
}
.btn-cantidad:hover{ border-color: var(--tinta); }
.btn-cantidad:active{ transform: scale(.92); }
.cantidad-valor{ min-width: 20px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-carrito .quitar{
  background: none;
  border: none;
  color: var(--tinta-suave);
  font-size: .78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  margin-left: 4px;
  transition: color .3s var(--ease-out);
}
.item-carrito .quitar:hover{ color: #B23A3A; }
.item-carrito .subtotal{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  white-space: nowrap;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}

.upsell{
  background: var(--acento-suave);
  border: 1px dashed rgba(24, 153, 166, 0.55);
  border-radius: var(--radio-chico);
  padding: 13px 14px;
  margin-top: 14px;
  font-size: .88rem;
}
.upsell p{ margin: 0 0 9px; line-height: 1.5; }

.selector-ciudad{ margin-top: 22px; }
.selector-ciudad label{
  display: block;
  font-weight: 650;
  font-size: .88rem;
  margin-bottom: 8px;
}
.selector-ciudad select{
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radio-chico);
  border: 1.5px solid var(--borde);
  font-size: .95rem;
  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  background: var(--crema);
  cursor: pointer;
  transition: border-color .3s var(--ease-out);
}
.selector-ciudad select:hover{ border-color: var(--tinta); }
.texto-entrega{
  font-size: .82rem;
  color: var(--tinta-suave);
  margin-top: 9px;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  line-height: 1.55;
}

.carrito-footer{
  border-top: 1px solid var(--borde);
  padding: 18px 20px 22px;
  background: var(--crema);
}
.fila-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.aviso-carrito{
  font-size: .76rem;
  color: var(--tinta-suave);
  margin: 10px 0 0;
  text-align: center;
}

/* ---------- Guía "¿Cuál me conviene?" (tabla) ---------- */
.tabla-guia{
  width: 100%;
  border-collapse: collapse;
  background: var(--crema);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--borde-suave);
}
.tabla-guia th, .tabla-guia td{
  text-align: left;
  padding: 17px 20px;
  border-bottom: 1px solid var(--borde-suave);
  font-size: .94rem;
}
.tabla-guia th{
  background: var(--papel-2);
  color: var(--tinta-suave);
  font-family: var(--fuente-cuerpo);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  font-weight: 700;
}
.tabla-guia tbody tr{ transition: background .3s var(--ease-out); }
.tabla-guia tbody tr:hover{ background: var(--papel); }
.tabla-guia tr:last-child td{ border-bottom: none; }
.tabla-guia td:last-child{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-weight: 550;
  font-size: 1.02rem;
  color: var(--acento-oscuro);
}
.tabla-guia td:last-child a{
  color: inherit;
  text-decoration: none;
}
.tabla-guia td:last-child a:hover,
.tabla-guia td:last-child a:focus-visible{ text-decoration: underline; }
.tabla-guia-wrap{ overflow-x: auto; border-radius: var(--radio); }

/* ---------- Tablet vs Kindle ---------- */
/* Tabla comparativa tablet vs kindle: mismo patrón que el comparador de
   modelos — la etiqueta se lee UNA vez y al lado/abajo van las 2 columnas,
   en desktop y en mobile por igual. */
.comparacion{
  max-width: 920px;
  margin: 0 auto;
}
.vs-cabeceras{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vs-cabecera{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 560;
  text-align: center;
  padding: 15px 10px;
  border-radius: var(--radio-nucleo);
}
.vs-cabecera.tablet{
  background: var(--papel-2);
  border: 1px solid var(--borde-suave);
  color: var(--tinta-suave);
}
.vs-cabecera.kindle{
  background: var(--tinta);
  border: 1px solid var(--tinta);
  color: var(--papel);
  box-shadow: var(--sombra-suave);
}
.vs-fila{ margin-top: 14px; }
.vs-etiqueta{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 7px;
}
.vs-valores{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vs-celda{
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  font-size: .86rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.vs-celda.tablet{
  background: var(--papel-2);
  border: 1px solid var(--borde-suave);
  color: var(--tinta-suave);
}
.vs-celda.kindle{
  background: var(--tinta);
  border: 1px solid var(--tinta);
  color: var(--papel);
}
@media (min-width: 800px){
  .vs-cabecera{ font-size: 1.25rem; }
  .vs-celda{ padding: 15px 18px; font-size: .95rem; }
}

/* ---------- Pasos (cómo comprar) ---------- */
.pasos{
  display: grid;
  gap: 20px;
}
@media (min-width: 800px){
  .pasos{ grid-template-columns: repeat(3, 1fr); }
}
.paso{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-xl);
  padding: 30px 26px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.paso:hover{ transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.paso .numero{
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--acento);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1;
  display: block;
  margin: 0 0 14px;
}
.paso h3{
  font-size: 1.2rem;
  font-weight: 570;
}
.paso p{ color: var(--tinta-suave); font-size: .93rem; margin: 0; }

.tarjeta-ciudad{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 24px 26px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.tarjeta-ciudad:hover{ transform: translateY(-3px); box-shadow: var(--sombra-suave); }
.tarjeta-ciudad h3{ font-size: 1.12rem; margin-bottom: 6px; font-weight: 570; }
.tarjeta-ciudad p{ margin: 0; color: var(--tinta-suave); font-size: .94rem; }

/* ---------- Galería social proof (polaroids) ---------- */
.galeria{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 620px;
  margin: 0 auto;
}
@media (min-width: 760px){
  .galeria{ max-width: 700px; gap: 28px; }
}
.galeria-item{
  display: block;
  margin: 0;
  border-radius: 4px;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  padding: 10px 10px 12px;
  box-shadow: var(--sombra-suave);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.galeria-item img{
  display: block;
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--papel);
}
.galeria-item figcaption{
  min-height: 1.1em;
  margin-top: 8px;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--tinta-suave);
  text-align: center;
}
/* Reseña dentro del polaroid: recortada a 3 líneas, se abre con "Ver más" */
.galeria-resena{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  line-height: 1.45;
}
.galeria-item.expandida .galeria-resena{
  display: block;
  -webkit-line-clamp: unset;
}
.galeria-vermas{
  display: inline-block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-style: italic;
  font-size: .75rem;
  font-weight: 700;
  color: var(--acento-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.galeria-autor{
  display: block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--tinta);
}
.galeria-item:nth-child(odd){ transform: rotate(-1.6deg); }
.galeria-item:nth-child(even){ transform: rotate(1.8deg); }
.galeria-item:hover{ transform: rotate(0) scale(1.03); box-shadow: var(--sombra); z-index: 1; position: relative; }

/* ---------- Reseñas de clientes (foto + reseña pegadas, como una sola tarjeta) ---------- */
.entregas-resenas{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1000px){
  .entregas-resenas{ max-width: 760px; gap: 32px; }
}
/* Prueba: 2 columnas también en mobile chico (antes 1 sola, mucho scroll).
   Tarjeta más angosta = menos padding y texto de reseña más chico para
   que no se vea apretado. */
@media (max-width: 559px){
  .entregas-resenas{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .resena-card{ padding: 12px 12px 14px; }
  .resena-texto{ font-size: 0.82rem; line-height: 1.45; }
  .resena-estrellas svg{ width: 12px; height: 12px; }
}
.entrega-resena{
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.entrega-resena:hover{ transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.foto-entrega{
  width: 100%;
  /* height:auto anula el height="250" del HTML para que mande el
     aspect-ratio. Vertical 3:4, como las fotos que mandan los clientes
     desde el celular — en cuadrado 1:1 se recortaban mal. */
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radio) var(--radio) 0 0;
  border: 1px solid var(--borde-suave);
  border-bottom: none;
  position: relative;
  z-index: 1;
}
.resena-card{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 20px 20px 22px;
  margin-top: -1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  flex: 1;
}
.resena-estrellas{
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
}
.resena-estrellas svg{
  width: 15px; height: 15px;
  fill: var(--acento);
}
.resena-texto{
  margin: 0 0 16px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta);
}
.resena-autor{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.resena-autor strong{ font-size: .92rem; font-weight: 650; }
.resena-autor span{ font-size: .84rem; color: var(--tinta-suave); }
.resena-autor span::before{ content: "· "; }

/* ---------- Garantía ---------- */
.lista-garantia{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px){
  .lista-garantia{ grid-template-columns: repeat(2, 1fr); }
}
.lista-garantia li{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 24px;
  font-weight: 550;
  font-size: .97rem;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.lista-garantia li:hover{ transform: translateY(-3px); box-shadow: var(--sombra-suave); }

/* ---------- Garantía: hero de confianza (iconos propios, no emoji) ---------- */
.garantia-hero{ position: relative; }
/* Botón "Volver" solo en mobile: para no dejar a la persona sin adónde ir
   si entró a esta página desde una ficha de producto o el catálogo. */
.btn-volver{
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(242, 247, 248, 0.85);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  padding: 0;
  margin-bottom: 22px;
  cursor: pointer;
}
.btn-volver svg{ width: 18px; height: 18px; flex-shrink: 0; }
.btn-volver:hover{ color: #FFFFFF; }
@media (max-width: 919px){
  .btn-volver{ display: inline-flex; }
}
.garantia-hero-sello{
  position: absolute;
  right: -26px; top: -24px;
  width: 180px; height: 180px;
  color: rgba(79, 209, 217, 0.10);
  transform: rotate(9deg);
  pointer-events: none;
}
.garantia-hero-sello svg{ width: 100%; height: 100%; }

/* Pegada al hero (ambos navy): sin padding superior, el respiro lo pone
   el cierre del hero. Aplica en desktop y mobile. */
.garantia-confianza{ padding-top: 0; }

.garantia-confianza .confianza-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 8px;
  position: relative;
  justify-items: center;
}
@media (min-width: 980px){
  .garantia-confianza .confianza-grid{ grid-template-columns: repeat(5, 1fr); }
}
/* Prueba: 2 columnas fijas en mobile en vez de auto-fit (que con 5 tarjetas
   quedaba en 1 sola columna y hacía scrollear mucho antes de llegar a las
   otras secciones). Solo mobile — tablet/desktop siguen igual. */
@media (max-width: 719px){
  .garantia-confianza .confianza-grid{ grid-template-columns: repeat(2, 1fr); justify-items: stretch; }
  .garantia-confianza .confianza-item{ padding: 16px 14px; text-align: center; }
  .garantia-confianza .confianza-icono{ margin-left: auto; margin-right: auto; }
}
.confianza-item{
  background: rgba(251, 253, 253, 0.045);
  border: 1px solid rgba(251, 253, 253, 0.14);
  border-radius: var(--radio-xl);
  padding: 24px 20px;
  text-align: left;
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.confianza-item:hover{
  transform: translateY(-4px);
  border-color: rgba(79, 209, 217, .45);
  background: rgba(251, 253, 253, 0.075);
}
.confianza-icono{
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(79, 209, 217, 0.14);
  border: 1px solid rgba(79, 209, 217, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.confianza-icono svg{ width: 23px; height: 23px; color: var(--acento-claro); }
.confianza-item h3{
  font-size: 1.02rem;
  font-weight: 630;
  color: #FFFFFF;
  margin: 0 0 6px;
}
.confianza-item p{
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(242, 247, 248, 0.7);
}

/* ---------- "Así te llega tu equipo": 3 videos por familia ---------- */
.entrega-videos-grid--familias{ grid-template-columns: 1fr; }
@media (min-width: 700px){
  .entrega-videos-grid--familias{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.entrega-video-marco.placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(160deg, #0A2A3E, var(--tinta));
  border: 1.5px dashed rgba(79, 209, 217, .4);
  color: rgba(79, 209, 217, .85);
  text-align: center;
  padding: 20px;
}
.entrega-video-marco.placeholder svg{ width: 38px; height: 38px; flex-shrink: 0; }
.entrega-video-marco.placeholder span{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(242, 247, 248, .55);
}

/* ---------- Garantía: comunidad / redes sociales (colores reales de cada red) ---------- */
.comunidad-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
/* Prueba: 2 columnas en mobile (antes 1, con auto-fit no entraba una
   segunda columna de 180px en pantallas chicas). El 3er ítem (TikTok)
   queda solo en su fila. */
@media (max-width: 480px){
  .comunidad-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .comunidad-item{ padding: 14px 14px; }
  .comunidad-item p{ font-size: .78rem; }
}
.comunidad-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 22px 20px;
  text-decoration: none;
  box-shadow: var(--sombra-suave);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.comunidad-item:hover{
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}
.comunidad-icono{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.comunidad-icono svg{ width: 20px; height: 20px; }
/* Azul y magenta más profundos que el oficial "de app": con blanco encima
   dan mejor contraste que los tonos claros de sus logos originales. El
   degradado de Instagram se recorta al tramo morado-magenta, sin la banda
   amarilla del logo oficial (ahí el ícono blanco casi desaparecía). */
.comunidad-icono.icono-facebook{ background: #0B5FCE; }
.comunidad-icono.icono-instagram{ background: linear-gradient(135deg, #833AB4, #C13584); }
.comunidad-icono.icono-tiktok{ background: #000000; }
.comunidad-item h3{
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 4px;
}
.comunidad-item p{
  margin: 0 0 14px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.comunidad-link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 650;
}
.comunidad-item.item-facebook .comunidad-link{ color: #0B5FCE; }
.comunidad-item.item-instagram .comunidad-link{ color: #C13584; }
.comunidad-item.item-tiktok .comunidad-link{ color: var(--tinta); }
.comunidad-link svg{ width: 13px; height: 13px; transition: transform .4s var(--ease-out); }
.comunidad-item:hover .comunidad-link svg{ transform: translateX(4px); }

/* ---------- Respaldo bajo links de WhatsApp (por si no abre la app) ----------
   Especificidad reforzada (p.wa-respaldo, con !important en tipografía):
   este texto se inyecta dentro de secciones con su propio estilo para <p>
   (ej. ".cta-final p" en serif grande) y necesita verse igual en todas. */
p.wa-respaldo{
  flex-basis: 100%; /* si el link vive en un contenedor flex, que caiga en su propia línea */
  max-width: none !important;
  font-family: var(--fuente-cuerpo) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  color: var(--tinta-suave) !important;
  margin: 8px 0 0 !important;
  text-align: left;
}
.wa-respaldo a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wa-respaldo a:hover{ color: var(--tinta); }
.seccion-navy .wa-respaldo{ color: rgba(242, 247, 248, 0.62) !important; }
.cta-final .wa-respaldo,
.acciones-producto--centro .wa-respaldo,
.club-teaser-ctas .wa-respaldo{ text-align: center; }

/* ---------- Footer: navy profundo, contraste alto ---------- */
.site-footer{
  background: var(--tinta-footer);
  color: #E8F1F3;
  padding: 92px 0 30px;
  margin-top: 96px;
  position: relative;
  overflow: hidden;
}
.site-footer::before{
  content: "";
  position: absolute;
  top: -30%;
  left: -12%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 209, 217, 0.10) 0%, transparent 65%);
  pointer-events: none;
}
.site-footer .container{ position: relative; }

.footer-grid{
  display: grid;
  gap: 44px;
  margin-bottom: 64px;
}
@media (min-width: 860px){
  .footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
}
.footer-grid h4{
  font-family: var(--fuente-cuerpo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7FA9B8;
  margin: 0 0 18px;
}
.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 11px; }
.footer-grid a{
  text-decoration: none;
  color: #E8F1F3;
  font-size: .97rem;
  display: inline-block;
  transition: color .3s var(--ease-out), transform .4s var(--ease-out);
}
.footer-grid a:hover{ color: var(--acento-claro); transform: translateX(3px); }

.footer-descripcion{
  color: #A7C2CC;
  font-size: .95rem;
  line-height: 1.7;
  max-width: 34ch;
  margin: 18px 0 0;
}

.footer-contacto-num{
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 550;
  color: #FFFFFF !important;
  letter-spacing: 0.01em;
}
.footer-contacto-det{
  color: #A7C2CC;
  font-size: .9rem;
  line-height: 1.65;
}

.footer-redes{
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.footer-redes a{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(232, 241, 243, 0.22);
  color: #E8F1F3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s var(--ease-out);
}
.footer-redes a:hover{
  border-color: var(--acento-claro);
  background: rgba(79, 209, 217, 0.12);
  color: var(--acento-claro);
  transform: translateY(-3px) rotate(-4deg);
}

.footer-copy{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  font-size: .8rem;
  color: #8FA9B3;
  border-top: 1px solid rgba(232, 241, 243, 0.14);
  padding-top: 24px;
  margin: 0;
}
.footer-copy .lema{
  font-family: var(--fuente-titulo);
  font-style: italic;
  color: #A7C2CC;
}

/* ---------- Utilidades ---------- */
.text-center{ text-align: center; }
.mt-24{ margin-top: 24px; }
.oculto{ display: none !important; }

.cta-final{
  text-align: center;
  padding: 50px 0;
}
/* Mismo respiro reducido que .seccion en pantallas chicas */
@media (max-width: 425px){
  .cta-final{ padding: 40px 0; }
}
.cta-final p{
  font-family: var(--fuente-titulo);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 520;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 24ch;
  margin: 0 auto 28px;
  text-wrap: balance;
}
/* Sin itálica en la palabra resaltada: la "g"/"j" de Fraunces itálica
   no se leía bien a este tamaño (mismo pedido que .catalogo-subtitulo
   .cursiva) — se mantiene el énfasis con peso, sin inclinar. */
.cta-final p em{
  font-style: normal;
  font-weight: 650;
}
.cta-final.seccion-navy p{ color: var(--papel); }

/* ============================================================
   PÁGINA DE PRODUCTO (kindle-basic.html y futuros modelos)
   Reusa .ficha-media / .ficha-miniaturas de la ficha modal.
   ============================================================ */

/* --- Migas de pan --- */
.migas{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}
.migas a{
  text-decoration: none;
  transition: color .3s var(--ease-out);
}
.migas a:hover{ color: var(--acento-oscuro); }
.migas .sep{ color: var(--borde); }

/* --- Hero de compra --- */
.producto-hero{ padding: 40px 0; }
@media (min-width: 800px){
  .producto-hero{ padding: 40px 0 76px; }
}
.producto-hero .container{ display: grid; gap: 34px; }
@media (min-width: 920px){
  .producto-hero .container{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
  }
  .producto-galeria{ position: sticky; top: calc(var(--header-h) + 28px); }
}
.producto-galeria .ficha-media{ height: 330px; }
@media (min-width: 920px){
  .producto-galeria .ficha-media{ height: 460px; }
}

.producto-info h1{
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 570;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.producto-info h1 .cursiva{
  font-style: italic;
  font-weight: 480;
  color: var(--acento-oscuro);
}
.producto-info .precio-producto{
  font-family: var(--fuente-titulo);
  font-size: 2.1rem;
  font-weight: 600;
  margin: 18px 0 4px;
}
.producto-info .precio-producto .divisa{
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-right: 4px;
}
.producto-info .nota-precio{ text-align: left; margin: 4px 0 18px; }
.producto-info .acciones-producto{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 26px;
}
@media (min-width: 560px){
  .producto-info .acciones-producto{ flex-direction: row; }
}
.acciones-producto--centro{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (min-width: 560px){
  .acciones-producto--centro{ flex-direction: row; }
}
.producto-info .hero-sellos{ margin-top: 0; }
.producto-info .descripcion-producto{
  color: var(--tinta-suave);
  line-height: 1.7;
  margin: 22px 0 0;
  max-width: 58ch;
}
.producto-info .beneficios{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.producto-info .beneficios li{
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  line-height: 1.55;
}
.producto-info .beneficios li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  font-size: .68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Secciones editoriales estilo revista --- */
.seccion-editorial{ padding: 40px 0; }
@media (min-width: 800px){
  .seccion-editorial{ padding: 78px 0; }
}
.titulo-editorial{
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 570;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.06;
  margin: 0 0 18px;
  text-wrap: balance;
}
.titulo-editorial .cursiva{
  font-style: italic;
  font-weight: 480;
  color: var(--acento-oscuro);
}
.intro-editorial{
  text-align: center;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.75;
}

/* Panel de imagen a sangre con radios de marca */
.media-panel{
  border-radius: var(--radio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  margin-top: 44px;
}
/* height:auto es clave: sin esto, el atributo height del <img> fija la
   altura y la imagen se estira al angostar el contenedor (celular) */
.media-panel img{ width: 100%; height: auto; display: block; }

/* Variante para imágenes de menor resolución: se muestran a su tamaño
   natural (centradas) para no perder nitidez al ampliarlas */
.media-panel--nativo{
  max-width: 876px;
  margin-left: auto;
  margin-right: auto;
}

/* Título a la izquierda + texto a la derecha (ritmo Amazon) */
.split-editorial{
  display: grid;
  gap: 18px;
  align-items: end;
  margin-bottom: 8px;
}
@media (min-width: 800px){
  .split-editorial{ grid-template-columns: 1.1fr 1fr; gap: 54px; }
  .split-editorial .titulo-editorial{ text-align: left; margin-bottom: 0; }
  .split-editorial .intro-editorial{ text-align: left; margin: 0 0 10px; }
}
@media (max-width: 799px){
  .split-editorial .titulo-editorial,
  .split-editorial .intro-editorial{ text-align: left; margin-left: 0; }
}

/* Imagen y texto lado a lado */
.dupla-editorial{
  display: grid;
  gap: 30px;
  align-items: center;
}
/* Sin esto, un video/imagen grande puede forzar el ancho de su columna
   por encima del viewport y producir scroll horizontal en mobile. */
.dupla-editorial > *{ min-width: 0; }
@media (min-width: 800px){
  .dupla-editorial{ grid-template-columns: 1fr 1fr; gap: 60px; }
}
.dupla-editorial .media-panel{ margin-top: 0; }
.dupla-editorial .titulo-editorial{ text-align: left; }
.dupla-editorial .intro-editorial{ text-align: left; margin: 0; }

/* Variante: en mobile el texto siempre va antes que la imagen (orden del DOM);
   en desktop esta clase intercala la imagen a la izquierda en vez de a la derecha. */
@media (min-width: 800px){
  .dupla-editorial--img-izq .media-panel{ order: -1; }
}

/* Fotos/videos del mismo tamaño dentro de una dupla-editorial, sin importar
   su relación de aspecto original (recorta con object-fit: cover). */
.media-uniforme{ aspect-ratio: 1 / 1; }
.media-uniforme img,
.media-uniforme video{ width: 100%; height: 100%; object-fit: cover; }

/* --- Reseñas de lectores --- */
.resenas-grid{
  display: grid;
  gap: 22px;
  margin-top: 44px;
}
@media (min-width: 800px){
  .resenas-grid{ grid-template-columns: repeat(3, 1fr); gap: 26px; }
}
.resena{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 26px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resena .estrellas{
  color: var(--acento);
  font-size: .95rem;
  letter-spacing: 3px;
}
.resena blockquote{
  margin: 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--tinta-suave);
  flex: 1;
}
.resena .autor{
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: .95rem;
  color: var(--tinta);
}

/* --- Dimensiones --- */
.panel-dimensiones{
  background: #FFFFFF;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-suave);
  padding: clamp(18px, 4vw, 44px);
  margin-top: 44px;
}
.panel-dimensiones img{
  width: 100%;
  height: auto;
  max-width: 900px;
  margin: 0 auto;
  display: block;
}

/* Medidas en nuestro estilo, debajo del diagrama */
.dim-datos{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 760px;
  margin: clamp(20px, 4vw, 36px) auto 0;
}
@media (min-width: 720px){
  .dim-datos{ grid-template-columns: repeat(4, 1fr); }
}
.dim-dato{
  text-align: center;
  border-top: 2px solid var(--acento-suave);
  padding-top: 14px;
}
.dim-dato .valor{
  display: block;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.1;
}
.dim-dato .valor small{
  font-size: .62em;
  font-weight: 500;
  color: var(--acento-oscuro);
  font-style: italic;
}
.dim-dato .nombre{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 5px;
}

/* --- Ficha técnica completa --- */
.specs-completa{
  max-width: 880px;
  margin: 44px auto 0;
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
}
.specs-completa .fila-spec{
  display: grid;
  gap: 3px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--borde-suave);
}
@media (min-width: 640px){
  .specs-completa .fila-spec{ grid-template-columns: 225px 1fr; gap: 20px; padding: 16px 26px; }
}
.specs-completa .fila-spec:last-child{ border-bottom: none; }
.specs-completa dt{
  font-weight: 650;
  font-size: .87rem;
}
.specs-completa dd{
  margin: 0;
  color: var(--tinta-suave);
  font-size: .92rem;
  line-height: 1.65;
}
.specs-completa .fila-spec.destacada{ background: var(--acento-suave); }
.specs-completa .fila-spec.destacada dd{ color: var(--tinta); }

/* --- Barra de compra fija en mobile --- */
.compra-fija{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--crema);
  border-top: 1px solid var(--borde);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transform: translateY(105%);
  transition: transform .5s var(--ease-drawer);
  box-shadow: 0 -18px 40px -22px rgba(0, 33, 51, 0.35);
}
.compra-fija.visible{ transform: translateY(0); }
@media (min-width: 920px){
  .compra-fija{ display: none; }
}
.compra-fija .cf-info{ display: flex; flex-direction: column; min-width: 0; }
.compra-fija .cf-nombre{
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compra-fija .cf-precio{
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
}
.compra-fija .btn{ flex-shrink: 0; padding: 12px 20px; font-size: .9rem; }

/* Con la barra fija visible, el botón flotante de WhatsApp sube para no taparla */
.whatsapp-flotante{ transition: transform .45s var(--ease-out), bottom .5s var(--ease-drawer); }
body.con-compra-fija .whatsapp-flotante{ bottom: 96px; }
@media (min-width: 920px){
  body.con-compra-fija .whatsapp-flotante{ bottom: 20px; }
}

/* ============================================================
   COMPARADOR DE MODELOS (comparador.html)
   2 columnas por defecto, tercera opcional. Mobile-first:
   los selects nativos abren el picker del sistema en iOS/Android.
   ============================================================ */
.comparador{ --cols: 2; }

.cmp-controles{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
}
.cmp-selects{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.cmp-select-wrap{ position: relative; }
.cmp-select-label{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.cmp-select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230E7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 34px 12px 13px;
  font-family: var(--fuente-cuerpo);
  /* 16px mínimo: evita que iOS haga zoom automático al enfocar */
  font-size: 16px;
  font-weight: 550;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-select:focus-visible{
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.cmp-quitar{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--crema);
  color: var(--tinta-suave);
  font-size: .72rem;
  cursor: pointer;
  z-index: 1;
  transition: all .3s var(--ease-out);
}
.cmp-quitar:hover{ background: var(--tinta); border-color: var(--tinta); color: #FFF; }
.cmp-anadir{
  align-self: end;
  border: 1.5px dashed var(--borde);
  background: transparent;
  color: var(--tinta-suave);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  border-radius: var(--radio-chico);
  padding: 12px 16px;
  cursor: pointer;
  transition: all .3s var(--ease-out);
  grid-column: 1 / -1;
}
@media (min-width: 800px){
  .cmp-anadir{ grid-column: auto; }
}
.cmp-anadir:hover{ border-color: var(--acento); color: var(--acento-oscuro); }

.cmp-toggle{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--tinta-suave);
  cursor: pointer;
  user-select: none;
}
.cmp-toggle input{
  appearance: none;
  -webkit-appearance: none;
  width: 40px; height: 23px;
  border-radius: 999px;
  background: var(--borde);
  position: relative;
  cursor: pointer;
  transition: background .3s var(--ease-out);
  flex-shrink: 0;
}
.cmp-toggle input::after{
  content: "";
  position: absolute;
  top: 2.5px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 33, 51, 0.25);
  transition: transform .35s var(--ease-drawer);
}
.cmp-toggle input:checked{ background: var(--acento); }
.cmp-toggle input:checked::after{ transform: translateX(16px); }

/* --- Tabla comparativa --- */
.cmp-tabla{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cabeceras fijas al hacer scroll: siempre se sabe qué columna es cuál */
.cmp-cabeceras{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 10px;
  position: sticky;
  top: 88px;
  z-index: 10;
  background: rgba(242, 247, 248, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--borde-suave);
}
.cmp-cabecera{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-nucleo);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.cmp-cabecera img{
  width: 58px; height: 58px;
  object-fit: contain;
}
.cmp-nombre{
  font-family: var(--fuente-titulo);
  font-size: .92rem;
  font-weight: 570;
  line-height: 1.25;
}
.cmp-precio{
  font-size: .85rem;
  font-weight: 650;
  color: var(--acento-oscuro);
}
@media (min-width: 800px){
  .cmp-cabecera{ padding: 16px 14px; }
  .cmp-cabecera img{ width: 74px; height: 74px; }
  .cmp-nombre{ font-size: 1.05rem; }
  .cmp-precio{ font-size: .95rem; }
}

/* Cada fila: etiqueta arriba (ancho completo) + una celda por modelo */
.cmp-fila{ margin-top: 6px; }
.cmp-etiqueta{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 7px;
}
.cmp-fila.difiere .cmp-etiqueta::after{
  content: "✦";
  font-size: .6rem;
  color: var(--acento);
}
.cmp-valores{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 10px;
}
.cmp-celda{
  background: var(--crema);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  padding: 11px 12px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--tinta);
  overflow-wrap: break-word;
}
@media (min-width: 800px){
  .cmp-celda{ padding: 14px 16px; font-size: .92rem; }
}
.cmp-fila.igual .cmp-celda{ color: var(--tinta-suave); }

/* Con el toggle activo, las filas idénticas desaparecen */
.cmp-tabla.solo-diferencias .cmp-fila.igual{ display: none; }

.cmp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cmp-chips span{
  font-size: .7rem;
  font-weight: 600;
  color: var(--acento-oscuro);
  background: var(--acento-suave);
  border-radius: 999px;
  padding: 4px 9px;
}
.cmp-celda-accion{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cmp-celda-accion .btn{ font-size: .8rem; padding: 10px 12px; }
.cmp-fila-acciones .cmp-etiqueta{ visibility: hidden; }

@media (min-width: 800px) {
  .cmp-cabeceras {
    grid-template-columns: 180px repeat(3, minmax(0, 1fr));
  }
  .cmp-cabeceras::before {
    content: "";
  }
  .cmp-fila {
    display: grid;
    grid-template-columns: 180px repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: 0;
  }
  .cmp-etiqueta {
    margin-bottom: 0;
    align-items: center;
    padding-left: 10px;
  }
  .cmp-valores {
    display: contents;
  }
  .cmp-selects {
    grid-template-columns: 180px repeat(3, minmax(0, 1fr));
  }
  .cmp-selects::before {
    content: "";
  }
}

/* --- Botón Ver detalles en tarjetas del catálogo --- */
.btn-detalles{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 6px;
  cursor: pointer;
  text-decoration: none;
  transition: color .3s var(--ease-out);
}
.btn-detalles::after{
  content: "→";
  transition: transform .45s var(--ease-out);
}
.btn-detalles:hover{ color: var(--acento-oscuro); }
.btn-detalles:hover::after{ transform: translateX(4px); }

/* ---------- Enlace "Solo clientes" (Club) destacado en la navegación ---------- */
.nav-club{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--acento-oscuro) !important;
  font-weight: 650 !important;
}
.nav-club svg{ width: 15px; height: 15px; flex-shrink: 0; }
.nav-club[aria-current="page"]{ color: #FFFFFF !important; }

/* Con 7 enlaces, en escritorios justos el nav respira menos */
@media (min-width: 960px) and (max-width: 1180px){
  .nav-desktop a{ padding: 9px 9px; font-size: .84rem; }
}

/* ---------- Teaser del Club de Lectores (portada) ---------- */
.club-teaser{
  position: relative;
  background: var(--tinta);
  color: #FFFFFF;
  border-radius: var(--radio-xl);
  padding: 46px 28px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.club-teaser::before{
  content: "";
  position: absolute;
  inset: -60% -30% auto;
  height: 160%;
  background: radial-gradient(44% 60% at 82% 30%, rgba(79, 209, 217, 0.24), transparent 70%);
  pointer-events: none;
}
.club-teaser-texto{ position: relative; max-width: 56ch; }
.club-teaser .ceja{
  background: rgba(251, 253, 253, 0.08);
  color: var(--acento-claro);
  border: 1px solid rgba(79, 209, 217, 0.3);
}
.club-teaser h2{
  color: #FFFFFF;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 16px 0 10px;
}
.club-teaser h2 .cursiva{ font-style: italic; color: var(--acento-claro); }
.club-teaser p{ color: rgba(251, 253, 253, 0.78); }
.club-teaser-ctas{ margin-top: 22px; }
.club-teaser-sello{
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 190px;
  height: 190px;
  color: rgba(79, 209, 217, 0.16);
  transform: rotate(-8deg);
  pointer-events: none;
}
.club-teaser-sello svg{ width: 100%; height: 100%; }
@media (min-width: 760px){
  .club-teaser{ padding: 56px 60px; }
}

/* ---------- Carrito: selector de ciudad siempre visible (pie fijo) ---------- */
.carrito-panel{ height: 100dvh; }
.carrito-footer .selector-ciudad{
  margin: 0 0 14px;
}
.carrito-footer .selector-ciudad .texto-entrega{
  margin-top: 8px;
}
.pista-ciudad{
  margin: 8px 0 0;
  font-size: .82rem;
  font-weight: 650;
  color: #8C2B38;
}
.selector-ciudad.ciudad-falta select{
  border-color: #B23A48;
  box-shadow: 0 0 0 4px rgba(178, 58, 72, 0.12);
}
.selector-ciudad.ciudad-falta{
  animation: sacudida-suave .5s var(--ease-out);
}
@keyframes sacudida-suave{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-5px); }
  50%{ transform: translateX(5px); }
  75%{ transform: translateX(-3px); }
}
.enlace-seguir{
  display: block;
  width: 100%;
  background: none;
  border: 0;
  margin-top: 10px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .86rem;
  color: var(--tinta-suave);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.enlace-seguir:hover{ color: var(--tinta); }
/* En pantallas bajas, el cuerpo cede espacio y el pie nunca se corta */
.carrito-footer{ flex-shrink: 0; }
@media (max-height: 700px){
  .carrito-cuerpo{ padding: 12px 20px; }
  .carrito-footer{ padding: 12px 20px 14px; }
  .carrito-footer .fila-total{ margin-bottom: 10px; font-size: 1.2rem; }
  .aviso-carrito{ display: none; }
}

/* ---------- Selector de color (según stock real) ---------- */
.chips-color{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.chips-color-etiqueta{
  font-weight: 650;
  font-size: .88rem;
  margin-right: 2px;
}
.chip-color{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--crema);
  border: 1.5px solid var(--borde);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: .86rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.chip-color:hover{ border-color: var(--acento); transform: translateY(-1px); }
.chip-color[aria-pressed="true"]{
  border-color: var(--tinta);
  box-shadow: 0 0 0 1.5px var(--tinta);
  background: var(--papel-2);
}
.muestra-color{
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 33, 51, 0.25);
  flex-shrink: 0;
}
.item-carrito .color-item{
  font-size: .8rem;
  color: var(--tinta-suave);
  margin: 1px 0 2px;
}

/* Cambiar color directo desde el carrito */
.cambiar-color{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}
.cambiar-color-label{
  font-size: .72rem;
  color: var(--tinta-suave);
  margin-right: 2px;
}
.chip-color-mini{
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  background: var(--crema);
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.chip-color-mini:hover{ border-color: var(--acento); transform: translateY(-1px); }
.chip-color-mini.activo{
  border-color: var(--tinta);
  box-shadow: 0 0 0 1.5px var(--tinta);
}
.chip-color-mini .muestra-color{ width: 13px; height: 13px; }

/* Combo dentro del carrito: nombre + color de cada componente,
   editable con los mismos chips chicos de arriba */
.combo-componentes{ margin: 4px 0 6px; }
.combo-comp-linea{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--tinta-suave);
  margin-top: 4px;
}
.combo-comp-linea:first-child{ margin-top: 0; }
.combo-comp-nombre strong{ color: var(--tinta); }
.combo-comp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 3px 0 2px 21px;
}

/* Modal "elige los colores de tu combo" */
.modal-combo-colores{ max-width: 640px; }
.titulo-modal-combo{
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  margin: 4px 0 18px;
}
.combo-color-lista{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.combo-color-nombre{
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 8px;
}
.combo-color-fotos{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.combo-color-foto{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  background: var(--crema);
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio-nucleo);
  padding: 8px 6px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.combo-color-foto:hover{ border-color: var(--acento); }
.combo-color-foto.activo{
  border-color: var(--tinta);
  box-shadow: 0 0 0 1.5px var(--tinta);
}
.combo-color-foto img{
  width: 100%;
  height: 60px;
  object-fit: contain;
  background: var(--papel);
  border-radius: 6px;
}
.combo-color-foto span{
  font-size: .68rem;
  font-weight: 600;
  color: var(--tinta-suave);
  text-align: center;
}
.combo-color-foto.activo span{ color: var(--tinta); }
.combo-modal-footer{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--borde-suave);
}
.combo-modal-precio{
  text-align: center;
  font-size: .95rem;
  margin: 0 0 14px;
}
.combo-modal-precio strong{ color: #d32f2f; font-size: 1.15em; margin: 0 6px; }

/* Botón claro sobre fondos navy (CTA final de páginas de producto) */
.btn-outline-claro{
  background: transparent;
  border: 1.5px solid rgba(251, 253, 253, 0.35);
  color: #FFFFFF;
}
.btn-outline-claro:hover{
  border-color: var(--acento-claro);
  color: var(--acento-claro);
  background: rgba(79, 209, 217, 0.08);
}