/* ============================================================
   CLIPPER · estilos.css
   Interfaz basada en el render de referencia del proyecto.
   Los COLORES y la TIPOGRAFÍA se controlan desde estas variables.
   ============================================================ */

/* ── Fuente local (evita petición a Google Fonts en cada carga) ────────────
   Inter es una fuente variable: un solo archivo cubre los pesos 100–900.
   El archivo italic solo contiene el peso 900 (logo en cursiva).
   Cambiando los archivos en /fonts/ se actualiza la fuente en todo el sitio. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter-900-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --azul:        #1E88E5;   /* azul principal (barra de navegación) */
  --azul-claro:  #29A0F4;   /* acento "IDEAS" y detalles */
  --azul-oscuro: #0F5BB5;   /* botones primarios */
  --marino:      #0E2242;   /* titulares y textos fuertes */
  --texto:       #33415C;   /* texto normal */
  --texto-suave: #6B7A99;   /* textos secundarios */
  --borde:       #E4EAF2;
  --fondo:       #FFFFFF;
  --fondo-suave: #F2F5FA;   /* franja inferior y fondos claros */
  --verde-wsp:   #25D366;
  --rojo:        #E53935;
  --naranja:     #FF9800;
  --dorado:      #FFB400;   /* estrellas de calificación */
  --radio:       14px;
  --sombra:      0 6px 20px rgba(14, 34, 66, .07);
  --sombra-alta: 0 12px 32px rgba(14, 34, 66, .14);
  --fuente:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.55;
  /* Refuerza (junto al viewport) que el doble-toque no haga zoom en la
     página — el viewport meta tag no siempre alcanza por sí solo en
     todos los navegadores móviles. También elimina el retraso de 300ms
     al tocar botones. */
  touch-action: manipulation;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.oculto { display: none !important; }
.contenedor { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.icono { display: inline-flex; }
.icono svg { width: 1.35em; height: 1.35em; }
.icono-azul   { color: var(--azul); }
.icono-oscuro { color: var(--marino); }
.icono-wsp    { color: var(--verde-wsp); }

/* ============================================================
   HEADER SUPERIOR
   ============================================================ */
.header-superior { background: #fff; border-bottom: 1px solid var(--borde); }
.header-fila {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 20px;
}

.logo { display: flex; flex-direction: column; line-height: 1; flex: none; }
.logo-foto { display: block; height: 53px; width: auto; max-width: 278px; object-fit: contain; }
.logo-marca {
  font-weight: 900; font-size: 33px; letter-spacing: -.5px; font-style: italic;
  background: linear-gradient(100deg, var(--azul-claro), var(--azul-oscuro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: 3.2px;
  color: var(--marino); margin-top: 3px;
}

/* Buscador grande */
.buscador { position: relative; flex: 1 1 auto; max-width: 430px; }
.buscador input {
  width: 100%; height: 46px; padding: 0 52px 0 18px;
  border: 1.5px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: 16px; color: var(--marino); background: #FAFCFF;
  transition: border-color .15s, box-shadow .15s;
}
.buscador input::placeholder { color: var(--texto-suave); }
.buscador input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .14);
}
.buscador-btn {
  position: absolute; right: 5px; top: 5px; width: 38px; height: 36px;
  border: 0; border-radius: 8px; background: transparent; color: var(--azul);
  display: grid; place-items: center;
}
.buscador-btn:hover { background: rgba(30,136,229,.1); }
.buscador-sugerencias {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.buscador-sugerencias a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: var(--marino); font-weight: 500;
}
.buscador-sugerencias a:hover { background: var(--fondo-suave); }
.buscador-sugerencias a .icono { color: var(--texto-suave); }
.buscador-sugerencias a em {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--azul); background: rgba(30,136,229,.1);
  padding: 2px 8px; border-radius: 20px;
}

/* Bloques de contacto */
.header-contactos { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.contacto { display: flex; align-items: center; gap: 9px; color: var(--marino); }
.contacto .icono svg { width: 24px; height: 24px; }
.contacto-texto { display: flex; flex-direction: column; line-height: 1.25; }
.contacto-texto strong { font-size: 13px; font-weight: 700; white-space: nowrap; }
.contacto-texto small { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }

/* Carrito del header */
.carrito-header {
  position: relative; color: var(--marino); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; height: 44px; border-radius: 10px;
}
.carrito-header:hover { background: var(--fondo-suave); }
.carrito-icono-wrap { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
.carrito-header .icono svg { width: 24px; height: 24px; }
.carrito-total {
  font-size: 13px; font-weight: 800; color: var(--marino); white-space: nowrap;
}
.carrito-badge {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px;
  border-radius: 10px; background: var(--azul); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
  padding: 0 5px;
}

.btn-menu-movil { display: none; }

/* ============================================================
   NAVEGACIÓN PRINCIPAL (barra azul)
   ============================================================ */
.nav-principal { background: var(--azul); position: relative; z-index: 40; }
.nav-fila { display: flex; align-items: stretch; padding: 0 20px; }
.nav-casa {
  display: grid; place-items: center; width: 52px;
  background: rgba(0, 0, 0, .18); color: #fff;
}
.nav-casa .icono svg { width: 20px; height: 20px; }
.nav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px; color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  white-space: nowrap; transition: background .15s;
}
.nav-item:hover, .nav-item.activo { background: rgba(0, 0, 0, .16); }
.nav-chevron svg { width: 13px; height: 13px; opacity: .85; }

.nav-desplegable { position: relative; display: flex; }
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: #fff; border-radius: 0 0 12px 12px;
  box-shadow: var(--sombra-alta); padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-desplegable:hover .nav-menu,
.nav-desplegable:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu a {
  display: block; padding: 9px 18px; color: var(--marino);
  font-size: 13.5px; font-weight: 500;
}
.nav-menu a:hover { background: var(--fondo-suave); color: var(--azul); }

/* ============================================================
   HERO · SLIDER DE PORTADAS
   Cada portada es una fotografía a sangre completa con un velo
   degradado encima que garantiza el contraste del texto sin
   importar qué foto se suba después. Cambiar la foto no rompe la
   composición: el texto vive en su propia capa.
   ============================================================ */
/* El banner ya NO va de borde a borde: se contiene al mismo ancho
   máximo que el resto del contenido (1280px) y se separa de los bordes,
   igual que las secciones de abajo. Así queda alineado con las
   categorías y los productos en vez de desbordarse en pantallas anchas. */
.hero {
  position: relative; overflow: hidden;
  background: var(--marino);
  max-width: 1280px; margin: 18px auto 34px;
  width: calc(100% - 40px);
  border-radius: var(--radio);
}
.hero-pista {
  display: flex; width: 100%;
  transition: transform .7s cubic-bezier(.65, .02, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-pista { transition: none; }
}
.hero-slide {
  position: relative; flex: 0 0 100%;
  min-height: clamp(250px, 30vw, 350px);
  display: flex; align-items: center;
}

/* Capa 1 · la fotografía, siempre cubriendo todo el área */
.hero-foto-zona { position: absolute; inset: 0; }
.hero-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Foto alternativa para celular (columna imagen_movil del CSV). En
   escritorio nunca se muestra; el CSS móvil la enciende. */
.hero-foto-movil { display: none; }

/* Capa 2 · velo de contraste. Es más denso del lado donde va el
   texto y se desvanece hacia el lado libre, así la foto se sigue
   viendo y el texto nunca queda ilegible. */
.hero-velo { position: absolute; inset: 0; }
.hero-texto-izquierda .hero-velo {
  background: linear-gradient(90deg, rgba(6,17,36,.92) 0%, rgba(6,17,36,.75) 38%, rgba(6,17,36,.15) 72%, rgba(6,17,36,.05) 100%);
}
.hero-texto-derecha .hero-velo {
  background: linear-gradient(270deg, rgba(6,17,36,.92) 0%, rgba(6,17,36,.75) 38%, rgba(6,17,36,.15) 72%, rgba(6,17,36,.05) 100%);
}
.hero-texto-centro .hero-velo {
  background: linear-gradient(180deg, rgba(6,17,36,.55) 0%, rgba(6,17,36,.78) 100%);
}

/* Capa 3 · el contenido. Todo compactado para la altura reducida del
   banner: el objetivo es que las 4 piezas (título, bajada, sellos y
   botones) quepan sin apretarse. */
.hero-contenido {
  position: relative; z-index: 2; width: 100%;
  /* El aire lateral deja libres los carriles donde viven las flechas del
     slider, y el de abajo, la fila de puntos indicadores. */
  padding: 15px 60px 28px;
}
.hero-texto { max-width: 560px; }
.hero-texto-derecha .hero-texto { margin-left: auto; }
.hero-texto-centro  .hero-texto { margin: 0 auto; text-align: center; }
.hero-texto-centro  .hero-sellos,
.hero-texto-centro  .hero-botones { justify-content: center; }

.hero-texto h1 {
  color: #fff; font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 900; line-height: 1.02; letter-spacing: -1px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
/* Firma CMYK: la palabra de acento pintada con las cuatro tintas. */
.acento .tinta-c { color: #00B8D4; }
.acento .tinta-m { color: #FF2E93; }
.acento .tinta-y { color: #FFC400; }
.acento .tinta-k { color: #7FC4FF; }

.hero-sub {
  margin-top: 9px; font-size: clamp(13.5px, 1.15vw, 15px);
  color: rgba(255, 255, 255, .93); line-height: 1.45; max-width: 430px;
}
.hero-texto-centro .hero-sub { margin-left: auto; margin-right: auto; }
.hero-desc { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); max-width: 430px; }

.hero-sellos {
  display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 12px;
}
.hero-sello { display: flex; gap: 8px; align-items: center; }
.hero-sello-icono {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
}
.hero-sello-icono .icono svg { width: 15px; height: 15px; }
.hero-sello-cian     { background: linear-gradient(135deg, #22C3E6, #0E9BC4); }
.hero-sello-magenta  { background: linear-gradient(135deg, #FF4FA3, #E01E79); }
.hero-sello-amarillo { background: linear-gradient(135deg, #FFC93C, #F0A100); }
.hero-sello-verde    { background: linear-gradient(135deg, #34D97B, #1FAE55); }
.hero-sello-azul     { background: linear-gradient(135deg, #4FA9F5, #1E88E5); }
.hero-sello-texto { display: flex; flex-direction: column; line-height: 1.25; }
.hero-sello-texto strong { color: #fff; font-size: 12.5px; font-weight: 700; }
.hero-sello-texto small  { color: rgba(255, 255, 255, .72); font-size: 11.5px; }

.hero-botones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hero-botones .btn { padding: 12px 22px; border-radius: 8px; font-size: 12.5px; }
.btn-hero-primario {
  background: linear-gradient(90deg, #FF2E93, #FF6B4A); color: #fff;
  box-shadow: 0 10px 26px rgba(255, 46, 147, .38);
}
.btn-hero-primario:hover { background: linear-gradient(90deg, #EC1F82, #FF5733); transform: translateY(-1px); }
.btn-hero-secundario {
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
}
.btn-hero-secundario:hover { background: #fff; color: var(--marino); border-color: #fff; }

/* Sello de confianza: se ubica en el lado LIBRE de la portada, el
   contrario al del texto, para no chocar nunca con los botones. */
.hero-confianza {
  position: absolute; right: 18px; bottom: 14px;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .96); border-radius: 10px;
  padding: 9px 14px; box-shadow: var(--sombra-alta);
}
.hero-texto-derecha .hero-confianza { right: auto; left: 18px; }
.hero-confianza .icono { color: var(--azul); }
.hero-confianza .icono svg { width: 26px; height: 26px; }
.hero-confianza span { display: flex; flex-direction: column; line-height: 1.25; }
.hero-confianza strong { color: var(--marino); font-size: 13px; font-weight: 800; }
.hero-confianza small { color: var(--texto-suave); font-size: 11.5px; }

/* Controles del slider: discretos, sobre la foto */
.hero-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
  color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px); transition: background .18s, transform .18s;
}
.hero-flecha:hover { background: rgba(255, 255, 255, .95); color: var(--marino); }
.hero-flecha .icono svg { width: 18px; height: 18px; }
.hero-flecha-izq { left: 12px; }
.hero-flecha-der { right: 12px; }

.hero-puntos {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  z-index: 6; display: flex; gap: 8px;
}
.hero-punto {
  width: 9px; height: 9px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .45); transition: background .2s, width .2s;
}
.hero-punto:hover { background: rgba(255, 255, 255, .8); }
.hero-punto.activo { background: #FF2E93; width: 24px; border-radius: 5px; }
/* ============================================================
   PORTADA EN CELULAR (≤900px)
   El banner NO se rediseña para el teléfono: se muestra la misma
   composición de escritorio (foto de fondo, texto a un lado, botones y
   flechas), achicada en bloque para que quepa. Con eso sí hay algunos
   ajustes propios del lienzo angosto (620px de diseño, ver home.js):
   - Foto propia de celular si se sube (columna imagen_movil): la misma
     foto de escritorio recortada a 3.66:1 se ve mal en un cuadro tan
     angosto — encoge demasiado lo importante de la imagen. Si no se
     sube, se sigue mostrando la de escritorio.
   - Los 4 sellos (Entrega rápida / Cotiza por WhatsApp / Calidad
     profesional / Despachamos) se ocultan: en la composición angosta
     eran demasiada información encima de la foto. Siguen en escritorio.
   - El texto y el relleno se angostan: con los valores de escritorio
     (pensados para 1280px) el título y los botones invadían el espacio
     del sello de confianza en el lienzo de 620px.
   ============================================================ */
@media (max-width: 900px) {
  /* El contenedor recorta lo que sobre mientras se aplica la escala */
  #hero { overflow: hidden; }
  .hero {
    /* El ancho de diseño y la escala los fija el JS del slider, porque
       dependen del ancho real del teléfono. Al escalar el banco completo,
       todas las proporciones internas se conservan intactas. */
    max-width: none; margin: 0; transform-origin: top left;
  }
  /* Foto propia de celular, si se sube; si no, sigue la de escritorio */
  .hero-slide-con-movil .hero-foto { display: none; }
  .hero-foto-movil { display: block; }

  .hero-sellos { display: none; }
  .hero-flecha { display: none; }
  .hero-contenido { padding: 15px 24px 20px; }
  .hero-texto { max-width: 62%; }
  .hero-sub, .hero-desc { max-width: 100%; }
  .hero-confianza { padding: 7px 11px; gap: 7px; }
  .hero-confianza strong { font-size: 11.5px; }
  .hero-confianza small { font-size: 10px; }
  .hero-confianza .icono svg { width: 20px; height: 20px; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 10px; border: 0;
  font-size: 13.5px; font-weight: 800; letter-spacing: .4px;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--azul-oscuro); color: #fff; box-shadow: 0 6px 16px rgba(15, 91, 181, .3); }
.btn-primario:hover { background: #0C4A96; }
/* Confirmación breve y discreta: mismo color del botón, solo un pulso leve
   (sin cambiar a verde ni a ningún otro color) para que se note el clic
   sin alterar la identidad visual de la página. */
@keyframes pulso-confirmacion {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.btn-confirmado { animation: pulso-confirmacion .4s ease; opacity: .92; cursor: default; }
.btn-secundario {
  background: #fff; color: var(--marino);
  border: 1.5px solid var(--borde);
}
.btn-secundario:hover { border-color: var(--azul); color: var(--azul); }
.btn .icono svg { width: 16px; height: 16px; }

/* ============================================================
   TARJETAS DE CATEGORÍA
   ============================================================ */
.seccion-categorias { margin-top: 8px; }
.grilla-categorias {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.tarjeta-categoria {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tarjeta-categoria:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-alta);
  border-color: rgba(30, 136, 229, .35);
}
.tarjeta-categoria-foto { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.foto-categoria {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s;
}
.tarjeta-categoria:hover .foto-categoria { transform: scale(1.04); }
.tarjeta-categoria-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta-categoria h3 {
  color: var(--marino); font-size: 13.5px; font-weight: 800; letter-spacing: .3px;
}
.tarjeta-categoria p { font-size: 12px; color: var(--texto-suave); line-height: 1.45; flex: 1; }
.ver-mas {
  color: var(--azul); font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.ver-mas .icono svg { width: 14px; height: 14px; }
.tarjeta-categoria:hover .ver-mas { text-decoration: underline; }

/* ============================================================
   PRODUCTOS DESTACADOS (carrusel)
   ============================================================ */
.seccion-destacados { margin-top: 34px; }
.destacados-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.destacados-cabecera h2 {
  color: var(--marino); font-size: 17px; font-weight: 800; letter-spacing: .4px;
  border-bottom: 3px solid var(--azul); padding-bottom: 6px;
}
.ver-todos { font-size: 13px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.ver-todos .icono svg { width: 14px; height: 14px; }

.carrusel { position: relative; }
.carrusel-pista {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 12px;
  scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
/* Indicador visual: degradado en el borde cuando hay más contenido */
.carrusel::before, .carrusel::after {
  content: ""; position: absolute; top: 0; bottom: 12px; width: 46px; z-index: 5;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.carrusel::before { left: 0;  background: linear-gradient(90deg, #fff, transparent); }
.carrusel::after  { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.carrusel.con-sombra-izq::before { opacity: 1; }
.carrusel.con-sombra-der::after  { opacity: 1; }

.carrusel-flecha {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 10;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde);
  background: #fff; color: var(--marino); box-shadow: var(--sombra-alta);
  display: grid; place-items: center; transition: opacity .2s, background .15s;
}
.carrusel-flecha:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.carrusel-flecha .icono svg { width: 18px; height: 18px; }
.carrusel-izq { left: -16px; }
.carrusel-der { right: -16px; }
.carrusel-flecha-oculta { opacity: 0; pointer-events: none; }

.tarjeta-producto {
  flex: 0 0 172px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.tarjeta-producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta-producto-foto { display: block; overflow: hidden; }
.tarjeta-producto-foto img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .25s;
}
.tarjeta-producto:hover .tarjeta-producto-foto img { transform: scale(1.04); }
.tarjeta-producto-cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta-producto h3 { font-size: 12.5px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.tarjeta-producto h3 a { color: var(--marino); }
.tarjeta-producto h3 a:hover { color: var(--azul); }
.tarjeta-producto-desc { font-size: 12px; color: var(--texto-suave); flex: 1; }
.tarjeta-producto-pie {
  display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto;
}
.precio-desde { display: flex; flex-direction: column; line-height: 1.15; }
.precio-desde small { font-size: 10.5px; color: var(--texto-suave); }
.precio-desde strong { font-size: 15px; font-weight: 800; color: var(--marino); }
.btn-mini-carrito {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1.5px solid var(--azul); color: var(--azul);
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.btn-mini-carrito:hover { background: var(--azul); color: #fff; }
.btn-mini-carrito .icono svg { width: 17px; height: 17px; }

/* ============================================================
   FRANJA DE BENEFICIOS + TARJETA WHATSAPP
   ============================================================ */
.franja-beneficios {
  margin-top: 34px; margin-bottom: 40px;
  background: var(--fondo-suave); border-radius: var(--radio);
  padding: 22px 26px;
  display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr;
  gap: 22px; align-items: center;
}
.beneficio { display: flex; gap: 12px; align-items: center; }
.beneficio .icono svg { width: 34px; height: 34px; }
.beneficio strong { display: block; color: var(--marino); font-size: 12.5px; letter-spacing: .3px; }
.beneficio span { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

.tarjeta-whatsapp {
  background: linear-gradient(115deg, var(--azul), var(--azul-oscuro));
  border-radius: var(--radio); color: #fff;
  padding: 16px 20px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 10px 24px rgba(15, 91, 181, .3);
  transition: transform .15s;
}
.tarjeta-whatsapp:hover { transform: translateY(-2px); }
.tarjeta-whatsapp-icono {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
}
.tarjeta-whatsapp-icono .icono svg { width: 26px; height: 26px; }
.tarjeta-whatsapp strong { display: block; font-size: 14px; }
.tarjeta-whatsapp span { font-size: 12.5px; opacity: .9; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  background: var(--verde-wsp); color: #fff; font-style: normal;
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
  padding: 8px 16px; border-radius: 8px;
}
.btn-whatsapp .icono svg { width: 14px; height: 14px; }

/* ============================================================
   PÁGINAS INTERIORES (categoría / producto / carrito)
   ============================================================ */
.migas { font-size: 12.5px; color: var(--texto-suave); margin: 20px 0 10px; }
.migas span { color: var(--marino); font-weight: 600; }

.pagina-categoria { padding-bottom: 50px; }
.pagina-categoria h1 {
  color: var(--marino); font-size: 26px; font-weight: 900; letter-spacing: -.3px;
}
.categoria-descripcion { color: var(--texto-suave); margin: 6px 0 22px; }
.grilla-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.grilla-productos .tarjeta-producto { flex: initial; }

/* ---------- Página de producto / configurador ---------- */
.pagina-producto { padding-bottom: 60px; }

/* Barra fija de móvil: Total | Agregar — solo aparece en pantallas chicas,
   para que el cliente vea cuánto lleva y pueda agregar sin buscar el
   botón real, sin importar qué tan abajo haya scrolleado. */
.barra-movil { display: none; }
@media (max-width: 899px) {
  .barra-movil {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--borde);
    box-shadow: 0 -6px 18px rgba(14, 34, 66, .1);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .barra-movil-total { display: flex; flex-direction: column; line-height: 1.2; }
  .barra-movil-total small { font-size: 11px; color: var(--texto-suave); font-weight: 600; }
  .barra-movil-total strong { font-size: 18px; font-weight: 900; color: var(--marino); }
  .barra-movil .btn { flex: 1; justify-content: center; }
  .pagina-producto { padding-bottom: 90px; } /* espacio para que la barra no tape el final del contenido */
}

/* Complemento: caja plegable dentro de la página de otro producto
   (ej. "Impresión de Documentos" dentro de Planos) */
/* Selector de pestañas Producto principal ↔ Complemento (ej. Planos ↔
   Documentos). Ambas vistas quedan montadas en el DOM todo el tiempo — se
   alterna solo su visibilidad, así ninguna pierde su configuración al
   cambiar de pestaña. */
.selector-producto {
  display: inline-flex; gap: 4px; padding: 4px; margin: 18px 0 22px;
  background: var(--fondo-suave); border-radius: 12px;
}
.tab-producto {
  display: flex; align-items: center; gap: 8px; border: 0; background: transparent;
  padding: 10px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: var(--texto-suave); cursor: pointer; transition: background .15s, color .15s;
}
.tab-producto:hover { color: var(--marino); }
.tab-producto.activo { background: #fff; color: var(--azul-oscuro); box-shadow: var(--sombra); }
.tab-producto .icono svg { width: 15px; height: 15px; }

.complemento-panel { margin-top: 4px; }
.complemento-panel .producto-descripcion { margin: 0 0 20px; }

/* Grid responsive real (no transform:scale) — replica EXACTAMENTE los
   mismos breakpoints y proporciones que .producto-fila (Planos), para que
   ambas pestañas se sientan parte del mismo sistema: 3 columnas en
   escritorio grande, 2 en tablet (resumen abajo, ancho completo), 1 en
   móvil. */
.complemento-grid {
  display: grid; grid-template-columns: minmax(220px, .9fr) 1.25fr minmax(260px, .95fr);
  gap: 28px; align-items: start;
}
.complemento-col-imagen .producto-foto { aspect-ratio: 1 / .95; }
.complemento-subtitulo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 10px;
}
.complemento-panel-precio { margin-top: 0; }
@media (min-width: 768px) {
  .complemento-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .complemento-campos .grupo-campo { margin-bottom: 14px; }
  /* Impresión (1 cara/2 caras) va sola, de ancho completo, para que
     Tamaño+Color y Hojas+Copias queden emparejados a los lados */
  .complemento-campos fieldset[data-campo="caras"] { grid-column: 1 / -1; }
  /* Tela adicional para Paloma: es el ÚNICO campo de ese complemento, así
     que no tiene con qué emparejarse — va de ancho completo y sus 3
     tamaños en una sola fila pareja (en vez de heredar el límite de 2
     columnas / 460px pensado para Pendón Roller, que aquí los dejaba
     apretados en una esquina). */
  .complemento-campos[data-configurador="paloma-tela"] fieldset[data-campo="medida"] {
    grid-column: 1 / -1;
  }
  .complemento-campos[data-configurador="paloma-tela"] fieldset[data-campo="medida"] .pastillas {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
}
.complemento-col-resumen {
  position: sticky; top: 18px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 18px;
}

@media (max-width: 1080px) {
  .complemento-grid { grid-template-columns: 1fr 1.4fr; }
  .complemento-col-resumen { grid-column: 1 / -1; position: static; }
}
@media (max-width: 768px) {
  .complemento-grid { grid-template-columns: 1fr; }
  .complemento-col-resumen { grid-column: auto; }
}

.btn-agregar-complemento { width: 100%; justify-content: center; margin-top: 12px; }
.complemento-confirmacion {
  margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #1B7A3E; text-align: center;
}
.producto-fila {
  display: grid; grid-template-columns: minmax(260px, .9fr) 1.25fr minmax(280px, .95fr);
  gap: 28px; align-items: start;
}
.producto-foto {
  width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); aspect-ratio: 1/ .95; object-fit: cover;
  transition: opacity .18s ease;
}
.producto-foto.foto-cambiando { opacity: 0; }
.producto-panel h1 { color: var(--marino); font-size: 24px; font-weight: 900; letter-spacing: -.3px; }
.producto-descripcion { color: var(--texto-suave); margin: 8px 0 20px; font-size: 14px; }
.nota-producto {
  display: flex; align-items: flex-start; gap: 6px; font-size: 12px;
  color: var(--texto-suave); margin: -10px 0 16px; line-height: 1.4;
}
.nota-producto .icono { flex: none; margin-top: 1px; color: var(--naranja); }
.nota-producto .icono svg { width: 13px; height: 13px; }
.precio-grande strong { font-size: 26px; }

.grupo-campo { border: 0; margin-bottom: 20px; }

/* Configurador compacto en escritorio: en vez de una fila gigante por
   pregunta, se agrupan en una cuadrícula de 2 columnas — reduce
   considerablemente el alto total sin apretar el contenido. Las
   preguntas que necesitan más ancho (formato, la casilla de ajuste,
   tipo de doblado) siguen ocupando el ancho completo. */
@media (min-width: 900px) {
  #campos-configurador { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
  #campos-configurador .grupo-campo { margin-bottom: 16px; }
  #campos-configurador fieldset[data-campo="formato"],
  #campos-configurador fieldset[data-campo="ajustar_formato"],
  #campos-configurador fieldset[data-campo="tipo_doblado"],
  /* Stickers: cada decisión principal ocupa su propia fila completa, en
     vez de quedar emparejada al azar con la siguiente pregunta (eso era
     lo que separaba Ancho de Alto). */
  #campos-configurador fieldset[data-campo="forma"],
  #campos-configurador fieldset[data-campo="ancho_mm"],
  #campos-configurador fieldset[data-campo="diametro_mm"],
  #campos-configurador fieldset[data-campo="lado_mm"],
  #campos-configurador fieldset[data-campo="adhesivo"],
  #campos-configurador fieldset[data-campo="terminacion"],
  #campos-configurador fieldset[data-campo="entrega_formato"],
  #campos-configurador fieldset[data-campo="prueba_color"],
  #campos-configurador fieldset[data-campo="medida"],
  #campos-configurador fieldset[data-campo="comentarios"],
  /* Plotter de Corte: color, modalidad y el par ancho×largo también van
     a ancho completo — la modalidad tiene texto largo por opción y se
     ve apilada/apretada si queda solo en media columna. */
  #campos-configurador fieldset[data-campo="color"],
  #campos-configurador fieldset[data-campo="modalidad"],
  #campos-configurador fieldset[data-campo="ancho"],
  /* Tela PVC: Ojetillos y Bolsillo tienen varias opciones con texto largo
     — apretadas en media columna quedan apiladas y feas. El par
     Ancho×Alto (data-campo="ancho_cm") también va a ancho completo. */
  #campos-configurador fieldset[data-campo="ojetillos"],
  #campos-configurador fieldset[data-campo="bolsillo"],
  #campos-configurador fieldset[data-campo="ancho_cm"],
  /* Adhesivo Gran Formato: 6 materiales con nombres largos (ej. "Adhesivo
     Empavonado tipo Froster") quedan apretados/apilados en media columna
     — mismo motivo que "material" en Tela PVC. El par Ancho×Alto también
     a ancho completo, igual que en Tela PVC. */
  #campos-configurador fieldset[data-campo="material"],
  /* Díptico/Tríptico: las 2 opciones traen miniatura + descripción, así que
     en media columna se apilaban una sobre otra. A ancho completo quedan
     en par, lado a lado. */
  #campos-configurador fieldset[data-campo="tipo"],
  #campos-configurador fieldset[data-campo="ancho_adhesivo_cm"] {
    grid-column: 1 / -1;
  }
  /* Cualquier aviso (mensaje contextual) siempre a ancho completo — nunca
     apretado en media columna, en ningún producto presente o futuro. */
  #campos-configurador .campo-aviso { grid-column: 1 / -1; }
  /* Tela PVC: "Cantidad de copias" quedaba sola en la columna derecha,
     dejando un hueco vacío a la izquierda — a ancho completo no pasa. */
  #campos-configurador[data-configurador="tela-pvc"] fieldset[data-campo="copias"] { grid-column: 1 / -1; }
  /* Se Vende / Se Arrienda: Diseño, Teléfono, Correo, Tamaño y Medida
     personalizada quedaban emparejados al azar en media columna (ej.
     Diseño con Teléfono, y Correo solo) — a ancho completo cada uno queda
     en su propia fila, en el orden real del formulario. */
  #campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="diseno"],
  #campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="tamano"],
  #campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="medida_personalizada"],
  #campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="copias"] {
    grid-column: 1 / -1;
  }
}
/* Flyers: la medida siempre en pares (2 columnas fijas) — si son 3
   opciones, la tercera queda sola en su propia fila, como se pidió. */
fieldset[data-campo="medida"] .pastillas { grid-template-columns: repeat(2, 1fr); max-width: 460px; }

/* Se Vende / Se Arrienda: Modalidad es la primera y más importante
   decisión — pastillas bien grandes, no del tamaño estándar del resto
   del sitio. */
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="modalidad"] .pastillas {
  grid-template-columns: repeat(2, 1fr); gap: 12px;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="modalidad"] .pastilla {
  padding: 22px 16px; font-size: 16px; border-radius: 12px;
}
/* Los 4 diseños de la modalidad elegida, de a 2 por fila — antes quedaban
   apilados de a uno (nombres largos + ancho completo = una sola columna
   angosta y alta). */
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="diseno"] .pastillas {
  grid-template-columns: repeat(2, 1fr);
}
/* Teléfono y Correo: fondo amarillo pastel para que el cliente los note
   de inmediato como "esto hay que completar" — antes eran textareas
   comunes, fáciles de pasar por alto entre el resto de las preguntas. */
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="telefono"],
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="correo"] {
  background: #fff8d6; border: 1.5px solid #f2d675; border-radius: var(--radio);
  padding: 12px 14px 14px;
}
/* Material (Tela PVC / Sintra): se rediseñó como tarjeta vertical —
   foto grande arriba (ancho completo de la pastilla), nombre y
   descripción abajo. El primer intento (ícono chico al costado) quedó
   demasiado discreto; acá la foto es protagonista, pero sigue usando la
   columna "miniatura" (independiente de "imagen"), así que elegir el
   material sigue sin reemplazar la foto principal del producto. */
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastillas {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastilla {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 0; gap: 0;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastilla-miniatura {
  width: 100%; height: 140px;
  border-radius: 7.5px 7.5px 0 0;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastilla-texto {
  padding: 12px 14px 14px;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastilla-nombre {
  font-size: 14px;
}
#campos-configurador[data-configurador="se-vende-arrienda"] fieldset[data-campo="material"] .pastilla-con-descripcion small {
  font-size: 12px;
}

/* Producción con más protagonismo: fondo propio, ícono e ítem destacado —
   es una decisión importante de la compra, no un detalle secundario. */
.grupo-produccion {
  background: var(--fondo-suave); border-radius: var(--radio); padding: 16px 18px; margin-top: 6px;
}
.grupo-produccion legend {
  font-size: 14.5px; color: var(--marino); margin-bottom: 12px;
}
.grupo-campo legend {
  font-size: 13px; font-weight: 800; color: var(--marino);
  letter-spacing: .3px; text-transform: uppercase; margin-bottom: 9px;
}
.ayuda-campo { font-size: 12px; color: var(--texto-suave); margin-top: 7px; display: flex; gap: 6px; align-items: center; }
.ayuda-campo .icono svg { width: 14px; height: 14px; }

.pastillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 7px; }
/* Forma del sticker: la 4ta opción (Irregular/troquelado) tiene nombre y
   descripción más largos, así que ocupa su propia fila completa en vez
   de dejar un hueco vacío al lado — las primeras 3 (Circular/Cuadrado/
   Rectangular) siguen en una fila pareja. */
fieldset[data-campo="forma"] .pastillas label:nth-child(4) { grid-column: 1 / -1; }
.pastilla {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--borde); border-radius: 9px;
  padding: 7px 12px; background: #fff; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--marino); text-align: center; line-height: 1.25;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pastilla input { position: absolute; opacity: 0; pointer-events: none; }
.pastilla em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--azul); }
/* Pastillas con descripción corta (ej. tipo de adhesivo, forma de entrega):
   más anchas, texto a la izquierda, nombre + subtítulo apilados */
.pastilla-con-descripcion {
  grid-column: span 1; justify-content: flex-start; text-align: left;
  padding: 10px 14px;
  /* min-width con "min()" en vez de un valor fijo: en pantallas anchas se
     comporta igual que antes (160px), pero en ventanas medianas se puede
     achicar en vez de desbordarse y empujar la página hacia el costado. */
  min-width: min(160px, 100%);
  /* Si aun así no cabe (ej. una opción con nombre largo + precio a la
     derecha), el precio baja a la línea siguiente en vez de salirse. */
  flex-wrap: wrap;
}
/* El texto interno puede encogerse; sin esto el bloque de texto conserva
   su ancho natural y empuja el precio fuera del recuadro. */
.pastilla-con-descripcion .pastilla-texto { min-width: 0; flex: 1 1 auto; }
.pastilla-texto { display: flex; flex-direction: column; gap: 1px; }
.pastilla-nombre { font-size: 12.5px; font-weight: 700; color: var(--marino); }
.pastilla-con-descripcion small { font-size: 11px; font-weight: 500; color: var(--texto-suave); }
.pastilla-miniatura {
  width: 44px; height: 44px; border-radius: 7px; object-fit: cover; flex: none;
}
.campo-textarea {
  width: 100%; border: 1.5px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--marino); resize: vertical;
}
.campo-textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }
.campo-texto-corto {
  width: 100%; border: 1.5px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--marino);
}
.campo-texto-corto:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }
.pastilla:hover { border-color: var(--azul); }
.pastilla.elegida {
  border-color: var(--azul); border-width: 2px; background: rgba(30, 136, 229, .09);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .15);
}
.pastilla.elegida::after {
  content: "✓"; position: absolute; top: -8px; right: -8px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--azul); color: #fff; border: 2px solid #fff;
  font-size: 11px; font-weight: 900; line-height: 15px; text-align: center;
  box-shadow: 0 2px 5px rgba(14, 34, 66, .25);
}
.pastilla.deshabilitada { opacity: .45; cursor: not-allowed; }
.pastilla-produccion {
  min-width: 0; /* el ancho lo controla la grilla de #opciones-produccion, no el hijo */
  justify-content: space-between; text-align: left; align-items: flex-start;
}
.pastilla-produccion span { display: flex; flex-direction: column; line-height: 1.3; }
.pastilla-produccion small { font-weight: 500; color: var(--texto-suave); font-size: 11.5px; }
.pastilla-produccion em { flex: none; white-space: nowrap; padding-left: 6px; }
/* Las tarjetas de producción llevan más texto (título + descripción + contador + precio)
   que una pastilla normal, así que necesitan columnas más anchas para no superponerse. */
#opciones-produccion.pastillas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cuenta-regresiva { color: var(--azul) !important; font-weight: 700 !important; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cuenta-regresiva .icono svg { width: 12px; height: 12px; }

/* Desplegable nativo (alternativa a pastillas para listas largas, ej. Formato) */
.campo-desplegable {
  width: 100%; max-width: 320px; height: 42px; padding: 0 12px;
  border: 1.5px solid var(--borde); border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--marino); background: #fff;
}
.campo-desplegable:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }
@media (max-width: 899px) {
  /* En celular SÍ debe quedar en 16px: por debajo de eso, iOS Safari hace
     zoom automático al tocar el campo — mismo motivo que los campos
     numéricos del sitio. */
  .campo-desplegable { font-size: 16px; height: 46px; }
}

/* Casilla de verificación (ej. "Ajustar archivo al formato seleccionado") */
.campo-checkbox { margin-bottom: 20px; }
.casilla {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border: 2px solid var(--naranja); border-radius: 10px;
  background: rgba(255, 152, 0, .07); width: 100%; transition: border-color .12s, background .12s;
}
.casilla:has(input:checked), .casilla.marcada { border-color: var(--azul); background: rgba(30, 136, 229, .08); }
.casilla input { position: absolute; opacity: 0; pointer-events: none; }
.casilla-marca {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  border: 2px solid var(--naranja); display: grid; place-items: center;
  color: #fff; transition: background .12s, border-color .12s;
}
.casilla-marca svg { width: 15px; height: 15px; }
.casilla input:checked ~ .casilla-marca, .casilla.marcada .casilla-marca { background: var(--azul); border-color: var(--azul); }
.casilla-texto { font-size: 14.5px; font-weight: 700; color: var(--marino); line-height: 1.4; }
.casilla-ayuda { margin-top: 8px; }
.nota-destacada {
  background: rgba(30, 136, 229, .08); border-radius: 8px; padding: 9px 12px;
  margin-top: 10px;
}
.resumen-neutro { margin: 0; }
.aviso-validacion {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  color: #8A5300; background: rgba(255, 152, 0, .1); border-radius: 8px;
  padding: 9px 12px; margin: 0 0 12px;
}
.aviso-validacion .icono { flex: none; color: var(--naranja); }

.campo-numero { display: inline-flex; align-items: stretch; border: 1.5px solid var(--borde); border-radius: 10px; overflow: hidden; }
.campo-numero input {
  /* font-size 16px evita que iOS Safari haga zoom automático al enfocar el campo */
  width: 84px; border: 0; text-align: center; font-family: inherit; font-size: 16px; font-weight: 700;
  color: var(--marino);
}
.campo-numero input:focus { outline: none; background: rgba(30,136,229,.06); }
.btn-paso {
  width: 40px; border: 0; background: var(--fondo-suave);
  font-size: 18px; font-weight: 700; color: var(--marino);
}
.btn-paso:hover { background: var(--azul); color: #fff; }

/* "Ancho × Alto" como una sola unidad visual, siempre en la misma fila —
   incluso en celular — para que se entienda de un vistazo que es una
   sola medida con dos números, no dos preguntas distintas y separadas. */
.grupo-medida-par legend { margin-bottom: 10px; }

/* Indicador de m² (Plotter de Corte): número grande + barra, mínimo texto */
.medidor-m2 {
  background: var(--fondo-suave); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.medidor-cifra { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.medidor-cifra strong { font-size: 34px; font-weight: 900; color: var(--marino); line-height: 1; }
.medidor-cifra span { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.medidor-barra { height: 8px; border-radius: 5px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--borde); }
.medidor-relleno { height: 100%; background: var(--azul); border-radius: 5px; transition: width .2s ease; }
.medidor-real { margin: 6px 0 0; font-size: 11.5px; color: var(--texto-suave); }
.medidor-vacio { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.medidor-vacio .icono { flex: none; }
.par-medidas { display: flex; align-items: flex-end; gap: 8px; }
.medida-mini { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.medida-mini label { font-size: 10.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.medida-mini .campo-numero { width: 100%; }
.medida-mini .campo-numero input { width: auto; flex: 1; min-width: 0; }
.medida-metros { font-size: 11px; font-weight: 700; color: var(--azul); min-height: 14px; }
.separador-medida { flex: none; font-size: 19px; font-weight: 800; color: var(--texto-suave); padding-bottom: 9px; }

/* Adhesivo Gran Formato: tira visual de paños ("Paño 1 — 1,20 m · Paño 2
   — 0,50 m") debajo de Ancho×Largo, cuando el trabajo se divide en más
   de una pieza. */
#paneles-adhesivo:empty { display: none; }
.paneles-titulo { font-size: 12px; color: var(--texto-suave); margin: 10px 0 8px; }
.paneles-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pano-chip {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--marino);
}

/* Zona de carga de archivos */
.zona-carga-area {
  width: 100%; border: 2px dashed rgba(30, 136, 229, .5); border-radius: var(--radio);
  background: rgba(30, 136, 229, .04); padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--marino); font: inherit; text-align: center;
  transition: background .15s, border-color .15s;
}
.zona-carga-area:hover, .zona-carga-area.arrastrando {
  background: rgba(30, 136, 229, .1); border-color: var(--azul);
}
.zona-carga-area .icono svg { width: 30px; height: 30px; color: var(--azul); }
.zona-carga-area strong { font-size: 13.5px; }
.zona-carga-area span { font-size: 12px; color: var(--texto-suave); }
.lista-archivos { list-style: none; margin-top: 10px; }
.lista-archivos li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px;
  background: #fff;
}
.lista-archivos .icono svg { width: 22px; height: 22px; color: var(--azul); }
.archivo-datos { flex: 1; line-height: 1.3; }
.archivo-datos strong { font-size: 13px; color: var(--marino); word-break: break-all; }
.archivo-datos span { font-size: 11.5px; color: var(--texto-suave); }
.estado-archivo { font-style: normal; color: var(--verde-wsp); font-weight: 700; }
.btn-quitar-archivo {
  border: 0; background: none; color: var(--rojo); width: 34px; height: 34px;
  border-radius: 8px; display: grid; place-items: center;
}
.btn-quitar-archivo:hover { background: rgba(229, 57, 53, .1); }
.zona-carga-error { color: var(--rojo); font-size: 12.5px; margin-top: 8px; font-weight: 600; }

/* Panel resumen de precio */
.producto-resumen {
  position: sticky; top: 18px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px;
}
.producto-resumen h2 { color: var(--marino); font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.desglose { list-style: none; }
.desglose li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 5px 0; color: var(--texto);
}
.desglose li strong { color: var(--marino); font-weight: 700; white-space: nowrap; }
.desglose .linea-base { color: var(--marino); font-weight: 600; }
.desglose .linea-subtotal { border-top: 1px dashed var(--borde); margin-top: 4px; padding-top: 9px; font-weight: 600; }
.total-fila {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px solid var(--marino); margin-top: 10px; padding-top: 12px;
}
.total-fila span { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; color: var(--marino); }
.total-fila strong { font-size: 24px; font-weight: 900; color: var(--marino); }
.btn-agregar { width: 100%; justify-content: center; margin-top: 14px; }
.nota-archivos { font-size: 12px; color: var(--texto-suave); margin-top: 12px; display: flex; gap: 6px; align-items: flex-start; }
.nota-archivos .icono svg { width: 15px; height: 15px; margin-top: 1px; }
.nota-prototipo { font-size: 11px; color: var(--texto-suave); margin-top: 10px; text-align: center; }

/* Avisos */
.aviso-info, .aviso-suave, .aviso-advertencia, .aviso-exito {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 12px 16px; font-size: 13px; margin: 12px 0;
}
.aviso-info { background: rgba(30, 136, 229, .08); color: var(--marino); }
.aviso-info .icono { color: var(--azul); }
.aviso-suave { background: var(--fondo-suave); color: var(--texto-suave); font-size: 12px; padding: 9px 12px; margin-top: 10px; }
/* Aviso destacado: para mensajes importantes que cambian el flujo del
   pedido (ej. prueba de color) — mucho más visible que un texto de
   ayuda normal, con color, ícono y borde propio. */
.aviso-destacado {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(30, 136, 229, .08); border: 1.5px solid rgba(30, 136, 229, .35);
  border-radius: 10px; padding: 12px 14px; margin-top: 12px;
  font-size: 13px; line-height: 1.5; color: var(--marino);
}
.aviso-destacado .icono { flex: none; color: var(--azul); margin-top: 1px; }
.aviso-advertencia { background: rgba(255, 152, 0, .1); color: #8A5300; }
.aviso-advertencia .icono { color: var(--naranja); }
.aviso-exito {
  background: rgba(37, 211, 102, .1); color: #1B7A3E; flex-wrap: wrap;
  border: 1px solid rgba(37, 211, 102, .3); align-items: center;
}
.aviso-exito-icono {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde-wsp); color: #fff; display: grid; place-items: center;
}
.aviso-exito-icono .icono svg, .aviso-exito-icono svg { width: 17px; height: 17px; }
.aviso-exito-texto { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.aviso-exito-titulo { color: #145C2E; font-size: 13.5px; }
.aviso-exito-texto span:not(.aviso-exito-titulo) { font-size: 12.5px; color: #1B7A3E; line-height: 1.4; }
.aviso-exito .icono { color: var(--verde-wsp); flex: none; }
.btn-ir-carrito { margin-top: 0; flex: none; }
.aviso-complemento-recordatorio {
  background: rgba(30, 136, 229, .1); color: var(--marino); border-color: rgba(30, 136, 229, .35);
  margin-top: 10px;
}
.aviso-complemento-recordatorio .aviso-exito-icono { background: var(--azul); }
.aviso-complemento-recordatorio .aviso-exito-titulo { color: var(--marino); }
.aviso-complemento-recordatorio .aviso-exito-texto span:not(.aviso-exito-titulo) { color: var(--texto-suave); }
.aviso-complemento-recordatorio .btn-ir-carrito { background: var(--azul); color: #fff; border-color: var(--azul); }
.aviso-error { text-align: center; padding: 70px 20px; }
.aviso-error h2 { color: var(--marino); margin-bottom: 10px; }
.aviso-error p { color: var(--texto-suave); margin-bottom: 10px; }
.aviso-error .btn { margin-top: 14px; }

.btn-whatsapp-grande {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: var(--verde-wsp); color: #fff;
  font-weight: 800; font-size: 13.5px; letter-spacing: .4px;
  padding: 14px 20px; border-radius: 10px; margin-top: 14px;
  box-shadow: 0 8px 18px rgba(37, 211, 102, .3);
}
.btn-whatsapp-grande:hover { background: #1FB958; }
.btn-whatsapp-grande .icono svg { width: 19px; height: 19px; }

/* ---------- Carrito ---------- */
.pagina-carrito { padding-bottom: 60px; }
.pagina-carrito h1 { color: var(--marino); font-size: 26px; font-weight: 900; margin: 24px 0 20px; }
.carrito-fila { display: grid; grid-template-columns: 1.7fr .9fr; gap: 26px; align-items: start; }
.carrito-items { display: flex; flex-direction: column; gap: 14px; }
.item-carrito {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra);
}
.item-foto img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; }
.item-datos h3 { color: var(--marino); font-size: 15px; font-weight: 800; }
.item-config { list-style: none; margin: 8px 0 10px; }
.item-config li { font-size: 12.5px; color: var(--texto); padding: 1.5px 0; }
.item-config li span { color: var(--texto-suave); }
.item-archivo { display: flex; align-items: center; gap: 6px; }
.item-archivo .icono svg { width: 14px; height: 14px; color: var(--azul); }
.item-archivo em { font-style: normal; color: var(--verde-wsp); font-size: 11.5px; font-weight: 700; }
.item-archivo.sin-archivo .icono { color: var(--naranja); }
.item-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.accion {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; color: var(--azul);
  font-size: 12.5px; font-weight: 700; padding: 4px 0;
}
.accion .icono svg { width: 14px; height: 14px; }
.accion:hover { text-decoration: underline; }
.accion-eliminar { color: var(--rojo); }
.item-precio { font-size: 18px; font-weight: 900; color: var(--marino); white-space: nowrap; }
.carrito-resumen {
  position: sticky; top: 18px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px;
}
.carrito-resumen h2 { color: var(--marino); font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.grupo-entrega { margin: 18px 0 4px; }
.grupo-entrega legend { font-size: 12.5px; font-weight: 800; color: var(--marino); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.grupo-entrega .pastillas { grid-template-columns: 1fr; }
.grupo-entrega .pastilla-produccion { justify-content: flex-start; text-align: left; }
.campos-direccion {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px;
}
.campo-texto-full { grid-column: 1 / -1; }
.campo-texto label { display: block; font-size: 11.5px; font-weight: 700; color: var(--texto-suave); margin-bottom: 4px; }
.campo-texto input, .campo-texto select {
  width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--borde); border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--marino); background: #fff;
}
.campo-texto input:focus, .campo-texto select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,136,229,.12); }
.aviso-tamano-despacho { margin: 12px 0 0; font-size: 12px; }
.linea-envio strong { color: var(--azul); }
.btn-vaciar { margin-top: 16px; }
.carrito-vacio {
  text-align: center; padding: 70px 20px; color: var(--texto-suave);
}
.carrito-vacio .icono svg { width: 60px; height: 60px; color: var(--borde); }
.carrito-vacio h2 { color: var(--marino); margin: 14px 0 6px; }
.carrito-vacio .btn { margin-top: 20px; }

/* ---------- Páginas simples (nosotros / contacto) ---------- */
.pagina-simple { padding: 30px 0 60px; max-width: 820px; }
.pagina-simple h1 { color: var(--marino); font-size: 28px; font-weight: 900; margin-bottom: 14px; }
.pagina-simple h2 { color: var(--marino); font-size: 18px; font-weight: 800; margin: 22px 0 8px; }
.pagina-simple p { margin-bottom: 10px; }
.datos-contacto { list-style: none; margin: 14px 0; }
.datos-contacto li { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: var(--marino); font-weight: 600; }
.datos-contacto .icono { color: var(--azul); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--marino); color: #C9D4E8; margin-top: 20px; }
.footer-columnas {
  display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
  gap: 30px; padding: 38px 20px 26px;
}
.logo-footer { font-size: 26px; }
.logo-sub-footer { color: #8FA3C8; display: block; margin-bottom: 12px; }
.footer p { font-size: 13px; line-height: 1.6; display: flex; gap: 8px; align-items: center; }
.footer .icono svg { width: 15px; height: 15px; }
.footer h4 {
  color: #fff; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 10px;
}
.footer a { display: block; color: #C9D4E8; font-size: 13px; padding: 3px 0; }
.footer a:hover { color: #fff; }
.footer-inferior { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 0; font-size: 12px; color: #8FA3C8; }

/* Imagen de respaldo cuando la foto real aún no está en el hosting */
.img-respaldo { object-fit: contain !important; background: var(--fondo-suave); padding: 12%; }

/* ============================================================
   MENÚ MÓVIL
   ============================================================ */
.menu-movil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 34, 66, .5);
}
.menu-movil-panel {
  width: min(320px, 86vw); height: 100%; background: #fff;
  padding: 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  animation: entrar-izq .2s ease;
}
@keyframes entrar-izq { from { transform: translateX(-30px); opacity: 0; } }
.menu-movil-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.menu-movil-cabecera button {
  border: 0; background: var(--fondo-suave); width: 38px; height: 38px;
  border-radius: 9px; color: var(--marino); display: grid; place-items: center;
}
.menu-movil-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: 10px;
  color: var(--marino); font-weight: 700; font-size: 14.5px;
}
.menu-movil-item:hover { background: var(--fondo-suave); }
.menu-movil-item .icono { color: var(--azul); }
.menu-movil-carrito { border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 16px; }
.menu-movil-carrito .carrito-badge { position: static; }
.menu-movil-carrito .carrito-total { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--marino); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .contacto-dir { display: none; }
  .grilla-categorias { grid-template-columns: repeat(3, 1fr); }
  .franja-beneficios { grid-template-columns: repeat(2, 1fr); }
  .tarjeta-whatsapp { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .header-contactos .contacto:nth-child(3) { display: none; } /* correo */
  .producto-fila { grid-template-columns: 1fr 1.4fr; }
  .producto-resumen { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) {
  .header-contactos { display: none; }
  .carrito-fila { grid-template-columns: 1fr; }
  .carrito-resumen { position: static; }
}
/* El menú completo (Inicio, Planos, Papelería...) necesita ~1280px de
   ancho para caber sin desbordarse — así que el botón de hamburguesa se
   activa desde 1300px hacia abajo, no solo en celular. Antes solo se
   activaba a los 768px, dejando una brecha (tablets como iPad, que miden
   entre 768 y 1024px) donde el menú se desbordaba y empujaba toda la
   página hacia el costado. */
@media (max-width: 1300px) {
  .btn-menu-movil {
    display: grid; place-items: center;
    width: 44px; height: 44px; border: 0; background: var(--fondo-suave);
    border-radius: 10px; color: var(--marino); flex: none;
  }
  .nav-principal { display: none; }          /* en tablet/móvil manda el menú hamburguesa */
}
@media (max-width: 768px) {
  body { font-size: 14.5px; }
  .header-fila { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .logo { order: 1; }
  .btn-menu-movil { order: 3; }
  .carrito-header { order: 2; margin-left: auto; }
  .buscador { order: 4; flex: 1 1 100%; max-width: none; }
  .grilla-categorias { grid-template-columns: repeat(2, 1fr); }
  .carrusel-flecha { display: none; }        /* móvil: swipe horizontal */
  .tarjeta-producto { flex-basis: 158px; }
  .franja-beneficios { grid-template-columns: 1fr; padding: 18px; }
  .producto-fila { grid-template-columns: 1fr; }
  /* En móvil todo se apila en una columna, así que "¿Cómo funciona?"
     (que en escritorio va en la columna izquierda, bajo las opiniones)
     quedaría ANTES del nombre del producto y del formulario, empujando
     lo importante hacia abajo. Acá se manda al final de todo. */
  .producto-galeria { display: contents; }
  .producto-galeria > .como-funciona { order: 99; }
  .producto-fila > .producto-panel { order: 2; }
  .producto-fila > .producto-resumen-col { order: 3; }
  .producto-resumen { grid-column: auto; }
  .item-carrito { grid-template-columns: 84px 1fr; }
  .item-foto img { width: 84px; height: 84px; }
  .item-precio { grid-column: 1 / -1; text-align: right; }
  .footer-columnas { grid-template-columns: 1fr 1fr; }
  .pastilla-produccion { min-width: 100%; }
  /* Díptico/Tríptico: en escritorio van en par, pero en celular el texto
     de la descripción no alcanza a caber y se corta — acá se apilan. */
  #campos-configurador fieldset[data-campo="tipo"] .pastillas { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .grilla-categorias { grid-template-columns: 1fr 1fr; gap: 10px; }
  .footer-columnas { grid-template-columns: 1fr; }
}

/* Foco visible para navegación con teclado */
a:focus-visible, button:focus-visible, input:focus-visible, .pastilla:focus-within {
  outline: 3px solid rgba(30, 136, 229, .45); outline-offset: 2px;
}

/* ── Skeleton de carga (producto.html) ─────────────────────────────────────
   Aparece de inmediato al entrar a un producto, mientras configurador.js
   carga los CSV y arma el formulario. Ocupa el mismo espacio que el layout
   real para que no haya salto visual cuando el contenido llega.
   La animación shimmer (brillo que recorre el bloque) da la sensación de
   que algo está sucediendo, sin mostrar un spinner genérico. ------------- */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.sk-bloque {
  border-radius: 8px;
  background: linear-gradient(90deg, #E4EAF2 25%, #F2F5FA 50%, #E4EAF2 75%);
  background-size: 600px 100%;
  animation: sk-shimmer 1.4s infinite linear;
}
.sk-migas  { height: 14px; width: 220px; margin-bottom: 20px; border-radius: 6px;
             background: linear-gradient(90deg,#E4EAF2 25%,#F2F5FA 50%,#E4EAF2 75%);
             background-size: 600px 100%; animation: sk-shimmer 1.4s infinite linear; }
.sk-foto   { aspect-ratio: 1 / .95; width: 100%; border-radius: var(--radio); }
.sk-resenas { height: 56px; margin-top: 10px; border-radius: var(--radio); }
.sk-titulo { height: 32px; width: 70%; margin-bottom: 12px; }
.sk-linea  { height: 14px; margin-bottom: 10px; }
.sk-campo  { height: 88px; margin-bottom: 16px; border-radius: var(--radio); }
.sk-campo-chico { height: 60px; }
.sk-subtitulo { height: 18px; width: 50%; margin-bottom: 18px; }
.sk-btn    { height: 46px; margin-top: 20px; border-radius: 10px; }
.sk-panel  { min-height: 260px; }
/* En móvil el grid es de 1 columna — el skeleton respeta eso */
@media (max-width: 700px) {
  .sk-foto { aspect-ratio: 16 / 9; }
}

/* ── Reseñas y calificación con estrellas (producto.html) ──────────────────
   Bloque resumen: va debajo de la foto del producto, columna izquierda.
   Cuando ya hay opiniones se muestra como tarjeta completa (ícono + título,
   promedio grande, insignia de recomendado y desglose por estrella, estilo
   Falabella/Mercado Libre). Sin opiniones se muestra un estado compacto.
   Panel: overlay con la lista de opiniones publicadas + formulario para
   escribir una nueva (se publica de inmediato, ver js/resenas.js). ------- */

.estrella { color: var(--borde); font-size: 15px; line-height: 1; }
.estrella-llena { color: var(--dorado); }

.resenas-resumen {
  margin-top: 10px; padding: 12px 14px; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--radio);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.resenas-promedio { display: flex; align-items: center; gap: 10px; }
.resenas-promedio > strong { font-size: 20px; color: var(--marino); font-weight: 900; }
.resenas-detalle { display: flex; flex-direction: column; gap: 2px; }
.resenas-estrellas { display: flex; gap: 1px; }
.resenas-estrellas-chico .estrella { font-size: 12px; }
.resenas-cantidad { font-size: 11.5px; color: var(--texto-suave); }
.resenas-sin-opiniones { display: flex; flex-direction: column; gap: 4px; }
.resenas-sin-opiniones span { font-size: 12px; color: var(--texto-suave); }

/* Tarjeta completa (con opiniones ya publicadas) — anula el layout en fila
   del estado vacío y pasa a columna. */
.resenas-resumen.resenas-tarjeta { display: block; padding: 16px; }

.resenas-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.resenas-card-estrella { color: var(--dorado); font-size: 20px; line-height: 1; }
.resenas-card-header h3 { color: var(--marino); font-size: 15px; font-weight: 800; }

.resenas-card-promedio-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.resenas-card-numero { font-size: 34px; font-weight: 900; color: var(--marino); line-height: 1; }
.resenas-card-promedio-detalle { display: flex; flex-direction: column; gap: 3px; }
.resenas-estrellas-grande .estrella { font-size: 16px; }
.resenas-card-basado { font-size: 11.5px; color: var(--texto-suave); }

.resenas-recomendado {
  display: flex; align-items: center; gap: 6px; background: #E8F8EE; color: #1E8E4C;
  font-size: 12px; font-weight: 700; padding: 8px 10px; border-radius: 8px; margin-bottom: 14px;
}
.resenas-recomendado .icono svg { width: 13px; height: 13px; }

.resenas-desglose-estrellas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.resenas-desglose-fila { display: flex; align-items: center; gap: 8px; }
.resenas-desglose-label { flex: 0 0 58px; font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.resenas-desglose-barra {
  flex: 1 1 auto; height: 7px; background: var(--fondo-suave); border-radius: 6px; overflow: hidden;
}
.resenas-desglose-relleno { height: 100%; background: var(--dorado); border-radius: 6px; transition: width .3s ease; }
.resenas-desglose-cifra { flex: 0 0 52px; font-size: 11px; color: var(--texto-suave); text-align: right; white-space: nowrap; }

.btn-opiniones-ancho { width: 100%; justify-content: center; }

.btn-opiniones {
  border: 1.5px solid var(--azul); background: #fff; color: var(--azul);
  font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 10px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease;
}
.btn-opiniones:hover { background: var(--fondo-suave); }
.btn-opiniones .icono { width: 13px; height: 13px; }

/* Overlay + panel */
.resenas-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(14, 34, 66, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.resenas-overlay[hidden] { display: none; }
.resenas-panel {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-alta);
  max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 26px 26px 22px; position: relative;
}
.resenas-cerrar {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: var(--fondo-suave); color: var(--texto-suave);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.resenas-cerrar:hover { background: var(--borde); }
.resenas-cerrar .icono svg { width: 14px; height: 14px; }
.resenas-panel h2 { color: var(--marino); font-size: 18px; font-weight: 900; margin-bottom: 14px; padding-right: 30px; }
.resenas-panel h3 { color: var(--marino); font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }

.resenas-lista { display: flex; flex-direction: column; gap: 14px; max-height: 280px; overflow-y: auto; }
.resenas-vacio-panel { font-size: 13px; color: var(--texto-suave); }

/* Galería "Fotos de clientes" (bloque resumen, solo cuando se pasa
   mostrarFotos=true — hoy solo Santitos, ver configurador.js) */
.resenas-fotos-clientes { margin-top: 14px; cursor: pointer; }
.resenas-fotos-titulo { font-size: 12px; font-weight: 700; color: var(--marino); margin-bottom: 8px; }
.resenas-fotos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.resena-foto-mini { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; }
.resena-foto-mas {
  width: 100%; aspect-ratio: 1/1; border-radius: 8px; background: var(--fondo-suave);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--texto-suave);
}
.resena-item { border-bottom: 1px solid var(--borde); padding-bottom: 12px; }
.resena-item:last-child { border-bottom: none; padding-bottom: 0; }
.resena-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.resena-nombre { font-weight: 700; font-size: 13px; color: var(--marino); }
.resena-comentario { font-size: 13px; color: var(--texto); line-height: 1.5; }

.resenas-separador { border: none; border-top: 1px solid var(--borde); margin: 20px 0 16px; }

.resenas-form-etiqueta { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 6px; }
.resenas-estrellas-elegir { display: flex; gap: 6px; margin-bottom: 14px; }
.estrella-boton {
  background: none; border: none; cursor: pointer; font-size: 26px;
  color: var(--borde); padding: 0; line-height: 1; transition: color .1s ease;
}
.estrella-boton.elegida { color: var(--dorado); }
.resenas-input, .resenas-textarea {
  width: 100%; border: 1.5px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--marino);
  margin-bottom: 10px; resize: vertical;
}
.resenas-input:focus, .resenas-textarea:focus { outline: none; border-color: var(--azul); }
.resenas-nota { font-size: 11px; color: var(--texto-suave); margin-top: 8px; line-height: 1.4; }

.resenas-foto-boton {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px dashed var(--borde); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; color: var(--texto-suave); margin-bottom: 10px; transition: border-color .15s ease;
}
.resenas-foto-boton:hover { border-color: var(--azul); color: var(--azul); }
.resenas-foto-boton .icono svg { width: 14px; height: 14px; }

/* Honeypot: invisible para una persona, pero presente en el DOM para que
   los robots de spam lo rellenen y así se detecten. No usar display:none
   (algunos bots lo detectan y lo ignoran a propósito). */
.campo-honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.resena-foto {
  display: block; max-width: 180px; border-radius: 10px; margin-top: 8px;
}

.resenas-error {
  color: var(--rojo); font-size: 12px; margin-top: 8px; font-weight: 600;
}

#resenas-enviar { width: 100%; margin-top: 4px; }
#resenas-enviar:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
  .resenas-panel { padding: 22px 18px 18px; }
}

/* ════════════════════════════════════════════════════════════════════════
   DISEÑO PREMIUM — prueba piloto en Santitos (ago 2026)
   Todo lo que sigue vive bajo .pagina-producto-premium — una clase que
   SOLO se agrega en el producto de prueba (ver configurador.js, variable
   `premium`). Ningún otro producto se ve afectado por este bloque; si el
   piloto funciona bien, se puede extender quitando esa condición.
   ════════════════════════════════════════════════════════════════════════ */

/* Foto principal con esquinas grandes — sin badge de "foto referencial":
   acá la foto es la imagen representativa de la categoría a propósito. */
.pagina-producto-premium .producto-galeria { position: relative; }
.pagina-producto-premium .producto-foto { border-radius: 18px; box-shadow: var(--sombra-alta); }

/* Galería de miniaturas — se arma sola probando archivos numerados
   (santitos1.jpg, santitos2.jpg...); las que no existen se borran solas. */
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.miniatura {
  width: 60px; height: 60px; object-fit: cover; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; opacity: .75; transition: opacity .15s ease, border-color .15s ease;
}
.miniatura:hover { opacity: 1; }
.miniatura-activa { opacity: 1; border-color: var(--azul-oscuro); }

/* Espacios más compactos entre título, descripción y campos — Jorge pidió
   aprovechar mejor el aire entre preguntas. */
.pagina-producto-premium .producto-panel h1 { margin-bottom: 2px; }
.pagina-producto-premium .producto-descripcion { margin: 4px 0 16px; }
.pagina-producto-premium #campos-configurador .grupo-campo { margin-bottom: 12px; }
.pagina-producto-premium .grupo-campo legend { margin-bottom: 6px; }
/* "Medida" es un simple desplegable en Santitos, Tarjetones y Partes de
   Matrimonio (no una fila de tarjetas anchas con foto, como en Flyers o
   Pendón Roller) — en esos 3 vuelve a la grilla de 2 columnas junto a
   "Tipo de papel". Acotado por producto a propósito: aplicarlo a todos
   apretaría las tarjetas con foto de Flyers/Pendón Roller. */
.pagina-producto-premium #campos-configurador[data-configurador="santitos"] fieldset[data-campo="medida"],
.pagina-producto-premium #campos-configurador[data-configurador="tarjetones"] fieldset[data-campo="medida"],
.pagina-producto-premium #campos-configurador[data-configurador="partes-matrimonio"] fieldset[data-campo="medida"] {
  grid-column: auto;
}

/* "¿Cómo funciona?" — 4 pasos. Va en la columna izquierda, debajo de las
   opiniones de clientes: así la página no se estira tanto hacia abajo y
   aprovecha el espacio que quedaba vacío bajo la foto. Como esa columna
   es angosta, los pasos van en 2×2 en vez de 4 en fila. */
.como-funciona {
  margin: 16px 0 0; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px;
}
.como-funciona h3 { font-size: 14px; font-weight: 800; color: var(--marino); margin-bottom: 14px; }
.pasos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
.paso-item { text-align: center; }
.paso-numero {
  width: 30px; height: 30px; border-radius: 50%; background: var(--azul-oscuro); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  margin: 0 auto 8px;
}
.paso-icono { color: var(--azul-oscuro); margin-bottom: 6px; }
.paso-icono svg { width: 20px; height: 20px; }
.paso-item strong { display: block; font-size: 12.5px; color: var(--marino); margin-bottom: 3px; }
.paso-item p { font-size: 11px; color: var(--texto-suave); line-height: 1.35; }

/* Aviso "Importante" */
.aviso-importante {
  display: flex; gap: 10px; background: #FFF8EC; border: 1px solid #F5DFAE; border-radius: var(--radio);
  padding: 14px 16px; margin: 22px 0; font-size: 12px; color: #7A5A16; line-height: 1.5;
}
.aviso-importante .icono { flex: none; color: #B5860F; }
.aviso-importante strong { display: block; color: #6B4E12; margin-bottom: 2px; font-size: 12.5px; }

/* Tarjeta de resumen (derecha) con mini-foto + nombre + specs */
.pagina-producto-premium .producto-resumen-col {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 18px; /* toda la columna se pega junta — antes solo el precio
    quedaba fijo mientras la producción, debajo, se le escondía detrás al hacer scroll */
}
.pagina-producto-premium .producto-resumen { padding: 20px; position: static; }
.resumen-cabecera { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--borde); }
.resumen-cabecera img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.resumen-cabecera-texto strong { display: block; font-size: 14px; color: var(--marino); margin-bottom: 3px; }
.resumen-cabecera-texto span { font-size: 11.5px; color: var(--texto-suave); line-height: 1.4; }

.pagina-producto-premium .total-fila strong { color: var(--azul-oscuro); }

/* Tarjeta de producción reubicada en la barra lateral */
.produccion-lateral {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px; box-shadow: var(--sombra); margin: 0;
}
.produccion-lateral > legend { font-size: 14px; font-weight: 800; color: var(--marino); margin-bottom: 10px; padding: 0; }

/* ── "¿Cuándo lo necesitas?" destacado arriba (prueba en Tarjetas) ────────
   Va antes del formulario porque en el mesón real de la imprenta la
   primera pregunta del cliente casi siempre es "¿para cuándo lo tienen?".
   Las 3 opciones van en fila (horizontal) en escritorio y apiladas en
   celular, con un realce azul suave para que se lea como el primer paso
   del pedido y no como un detalle más. */
.produccion-destacada {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF5D8 100%);
  border: 1.5px solid #F5DFA8; border-radius: var(--radio);
  padding: 13px 15px; margin: 0 0 18px;
}
.produccion-destacada > legend {
  font-size: 15px; font-weight: 900; color: var(--marino); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
  /* El recuadro tiene padding propio, que empujaba el "1" hacia adentro y
     lo dejaba desalineado respecto al "2" de abajo (que va fuera del
     recuadro). Este margen negativo lo devuelve a la misma línea. */
  padding: 0; margin-left: -15px; padding-left: 15px;
}
.produccion-destacada > legend::before {
  content: "1"; background: var(--azul-oscuro); color: #fff; width: 22px; height: 22px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex: none;
}
/* Las 3 opciones en fila pareja — cada una del mismo ancho. Se usa el ID
   para ganarle en especificidad a la regla general de #opciones-produccion
   (que pide un mínimo de 220px por opción y por eso las apilaba acá). */
.produccion-destacada #opciones-produccion.pastillas {
  grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.produccion-destacada .pastilla-produccion {
  background: #fff; flex-direction: column; align-items: flex-start;
  /* Centrado vertical: las opciones con poco texto (24h/48h) ya no quedan
     con un bloque de blanco abajo cuando la de al lado (Súper Express)
     es más larga — todas se ven parejas. */
  justify-content: center;
  text-align: left; padding: 11px 13px; min-height: 0; gap: 2px;
}
.produccion-destacada .pastilla-produccion strong { font-size: 13.5px; }
.produccion-destacada .pastilla-produccion small { font-size: 11px; line-height: 1.3; }
.produccion-destacada .pastilla-produccion em { padding-left: 0; margin-top: 2px; }
/* La cuenta regresiva no debe partirse en dos líneas al angostar la
   ventana — se mantiene en una sola línea siempre. */
.produccion-destacada .cuenta-regresiva { white-space: nowrap; }
.produccion-destacada .ayuda-campo { margin-top: 8px; margin-bottom: 0; font-size: 11px; }
/* Encabezado "2 · Configura tu pedido" antes del formulario, para que se
   lea la secuencia (1 = cuándo lo necesitas, 2 = el resto). Es un elemento
   propio y no un ::before del contenedor, porque ese contenedor es una
   grilla y el pseudo-elemento se colaba como una celda más. */
.paso-formulario {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 900; color: var(--marino); margin: 0 0 14px;
}
.paso-formulario::before {
  content: "2"; background: var(--azul-oscuro); color: #fff; width: 22px; height: 22px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex: none;
}
@media (max-width: 900px) {
  .produccion-destacada #opciones-produccion.pastillas { grid-template-columns: 1fr; }
  .produccion-destacada .pastilla-produccion { min-height: 0; }
}

@media (max-width: 980px) {
  .pasos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Impresión de Papelería ───────────────────────────────────────────────
   El campo "papel" tiene 9 opciones con descripción didáctica, así que va
   a ancho completo y en tarjetas de 2 columnas (1 en celular). */
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="papel"],
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="formato"],
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="caras"] {
  grid-column: 1 / -1;
}
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="papel"] .pastillas {
  grid-template-columns: repeat(2, 1fr);
}
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="formato"] .pastillas,
#campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="caras"] .pastillas {
  grid-template-columns: repeat(2, 1fr);
}

/* Bloque "¿No sabes qué papel elegir?" — set de muestras físicas */
.bloque-muestras {
  margin-top: 16px; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.muestras-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.muestras-texto { padding: 16px; }
.muestras-texto h3 { font-size: 14.5px; font-weight: 800; color: var(--marino); margin-bottom: 6px; }
.muestras-texto p { font-size: 12.5px; color: var(--texto-suave); line-height: 1.45; margin-bottom: 12px; }
.muestras-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.muestras-pie strong { font-size: 19px; font-weight: 900; color: var(--marino); }
.muestras-pie .btn { padding: 9px 14px; font-size: 12.5px; }
.muestras-nota {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: var(--texto-suave); line-height: 1.35; margin-top: 10px;
}
.muestras-nota .icono { flex: none; margin-top: 1px; }
.muestras-nota .icono svg { width: 12px; height: 12px; }

@media (max-width: 768px) {
  #campos-configurador[data-configurador="impresion-papeleria"] fieldset[data-campo="papel"] .pastillas {
    grid-template-columns: 1fr;
  }
}