/* ==========================================================================
   Cuervo Bags — Sistema de diseño
   v=1 · 2026-08-02
   Estructura: el patrón validado en drogasyenseres.com y en el sitio nuevo de
   Quick Pak (Bootstrap 5.3 + capa propia).
   Piel: la visión editorial premium ya definida para la marca en junio
   (Polène / JW Pei / Cloe), no el azul corporativo de la familia Medware.
   ========================================================================== */

:root{
  /* --- Marca (los tres colores ya decididos para Cuervo) --- */
  --cb-ink:#1a1a1a;        /* negro de marca: fondos editoriales y titulares */
  --cb-gold:#B8960C;       /* dorado: acento, filetes, detalles */
  --cb-cream:#FAF7F4;      /* crema: fondo cálido, es el color que más superficie ocupa */

  /* Dorado en dos tonos porque el de marca NO cumple contraste con texto:
     #B8960C sobre blanco da 2.9:1 → sirve para filetes e iconos, NO para texto.
     ✅ MEDIDO el 2026-08-02 (fórmula WCAG, no a ojo). El primer intento
     (#8A7009) daba 4.47 sobre crema: REPROBABA por 0.03. Corregido a #846B09,
     que da 4.81 sobre crema y 5.14 sobre blanco, con margen para redondeos. */
  --cb-gold-txt:#846B09;
  --cb-gold-soft:#E8DCC0;

  /* Neutros cálidos (no la escala slate fría de la familia corporativa) */
  --cb-900:#1a1a1a;
  --cb-800:#2e2b28;
  --cb-700:#4a453f;
  --cb-500:#736C65;   /* medido: 4.84 sobre crema. El anterior (#7a736b) daba 4.38 */
  /* --cb-400 SÓLO sobre fondo OSCURO (pie): ahí da 6.34 y cumple.
     Sobre blanco daba 2.74 — reprobaba en la etiqueta de modelo y en la miga
     de pan. Por eso hay un token aparte para texto pequeño sobre claro. */
  --cb-400:#a39b91;
  --cb-tenue:#797165;   /* medido: 4.81 sobre blanco, 4.51 sobre crema */
  --cb-300:#d6cfc6;
  --cb-200:#e9e3db;
  --cb-100:#f4f0ea;
  --cb-white:#fff;

  /* Tipografía */
  --cb-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --cb-sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* En moda el radio pequeño lee más caro que el redondeado */
  --cb-radius:2px;
  --cb-shadow:0 1px 2px rgba(26,26,26,.04), 0 12px 32px rgba(26,26,26,.06);
  --cb-ring:0 0 0 3px rgba(184,150,12,.28);
  /* 1440: medido en JW Pei, la tarjeta de producto ocupa ~25% del ancho en
     escritorio. Con el contenedor a 1280 las mías salían al 18.9% y la rejilla
     se veía apretada y pequeña en pantallas grandes. */
  --cb-container:1440px;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--cb-sans);
  color:var(--cb-700);
  background:var(--cb-cream);
  line-height:1.7;
  font-weight:300;               /* Jost light: es lo que da el aire editorial */
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--cb-serif);
  color:var(--cb-ink);
  font-weight:400;               /* el serif NO va en negrita: se vuelve pesado */
  line-height:1.15;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}

a{color:var(--cb-ink);text-decoration:none}
a:hover{color:var(--cb-gold-txt)}
.container{max-width:var(--cb-container)}

/* Gutter: el padding del contenedor tiene que absorber el margen negativo de la
   fila. Bootstrap da 12px de padding y `g-5` mete -24px por lado.
   🔑 En Quick Pak el bug era `g-lg-5` y bastó arreglarlo de 992px en adelante.
   Aquí era `g-5` A SECAS, que aplica en TODOS los anchos: medido con Playwright,
   el sitio se salía 12px desde 390px hasta 991px. Por eso el padding va sin
   media query. La lección: el arreglo heredado tapaba la mitad del problema
   porque la clase NO era la misma. */
.container{padding-left:1.5rem;padding-right:1.5rem}
img{max-width:100%;height:auto;display:block}

/* Accesibilidad: foco visible siempre (requisito heredado de DYE) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--cb-ring);border-radius:var(--cb-radius)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--cb-ink);color:#fff;padding:.6rem 1rem;z-index:2000}
.skip-link:focus{left:.5rem;top:.5rem}

/* ---------- Utilidades de marca ---------- */
.eyebrow{
  font-family:var(--cb-sans);
  font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cb-gold-txt);margin-bottom:.9rem;display:block;
}
.lead-cb{font-size:1.06rem;color:var(--cb-500);max-width:60ch;font-weight:300}
.bg-ink{background:var(--cb-ink);color:var(--cb-100)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-cream{background:var(--cb-cream)}
.bg-soft{background:var(--cb-100)}
.text-gold{color:var(--cb-gold-txt)!important}

/* Filete dorado: el gesto de marca que se repite en toda la casa.
   Da 2.66 sobre crema, por debajo del 3.0 de WCAG 1.4.11 — pero esa regla es
   para gráficos que TRANSMITEN INFORMACIÓN, y esto es un adorno: si no se ve,
   no se pierde nada. Se deja el color de marca a propósito, medido y decidido. */
.rule-gold{width:56px;height:1px;background:var(--cb-gold);border:0;opacity:1;margin:1.2rem 0}
.rule-gold.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Botones ----------
   Regla heredada de DYE y Quick Pak, traducida a esta marca:
     sólido negro = acción principal (Comprar / Ver colección)
     contorno     = secundaria (Ver ficha / Saber más)
     verde        = SIEMPRE WhatsApp, nunca otro uso
   ------------------------------------------------------------------------ */
.btn{
  font-family:var(--cb-sans);
  border-radius:var(--cb-radius);
  padding:.85rem 2rem;
  font-size:.82rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-cb{background:var(--cb-ink);color:#fff;border:1px solid var(--cb-ink)}
.btn-cb:hover{background:var(--cb-gold-txt);border-color:var(--cb-gold-txt);color:#fff}
.btn-cb-outline{background:transparent;color:var(--cb-ink);border:1px solid var(--cb-300)}
.btn-cb-outline:hover{border-color:var(--cb-ink);color:var(--cb-ink);background:transparent}
.btn-cb-light{background:#fff;color:var(--cb-ink);border:1px solid #fff}
.btn-cb-light:hover{background:var(--cb-gold);border-color:var(--cb-gold);color:var(--cb-ink)}
.btn-wa{background:#25D366;color:#fff;border:1px solid #25D366}
.btn-wa:hover{background:#1da851;border-color:#1da851;color:#fff}

/* ---------- Navegación ---------- */
.cb-nav{
  background:rgba(250,247,244,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cb-200);
  padding:.9rem 0;
}
.cb-nav .navbar-brand{font-family:var(--cb-serif);font-size:1.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cb-ink)}
.cb-nav .nav-link{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cb-700);padding:.5rem 1rem;
}
.cb-nav .nav-link:hover,.cb-nav .nav-link.active{color:var(--cb-gold-txt)}

/* Barra de anuncio: sólo aparece si hay dato de envío gratis */
.cb-anuncio{
  background:var(--cb-ink);color:var(--cb-cream);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:.55rem 1rem;
}

/* ---------- Producto ---------- */
/* Fondo TRANSPARENTE: el blanco sólo va en la foto. Con la tarjeta entera en
   blanco, el texto quedaba dentro de una caja recortada sobre el crema y la
   rejilla parecía una tabla. En la referencia el texto va sobre el fondo de la
   página y sólo la imagen tiene su propio plano. */
.cb-card{background:transparent;border:0;overflow:visible}
.cb-card .cb-foto{
  position:relative;overflow:hidden;background:var(--cb-100);
  aspect-ratio:1/1;   /* nativo de las fotos: ni se rellena ni se recorta */
}
.cb-card .cb-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cb-card:hover .cb-foto img{transform:scale(1.04)}
.cb-card .cb-nombre{font-family:var(--cb-serif);font-size:1.15rem;color:var(--cb-ink);margin:.9rem 0 .2rem}
.cb-card .cb-precio{font-size:.9rem;color:var(--cb-500);letter-spacing:.04em}

/* Etiqueta de escasez / novedad (el recurso de Jaime Ibiza en la referencia) */
.cb-badge{
  position:absolute;top:.8rem;left:.8rem;z-index:2;
  background:var(--cb-cream);color:var(--cb-ink);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.3rem .7rem;
}

/* ---------- Hero editorial ---------- */
.cb-hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;background:var(--cb-ink)}
.cb-hero img.cb-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.cb-hero .container{position:relative;z-index:2}
.cb-hero h1{color:#fff;max-width:14ch}
.cb-hero .lead-cb{color:rgba(255,255,255,.86)}

/* ---------- Secciones ---------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section-sm{padding:clamp(2.5rem,5vw,4rem) 0}

/* ---------- Reveal on scroll, CON FALLBACK ----------
   Requisito heredado de DYE: SIN JavaScript el contenido tiene que verse.
   Por eso el estado oculto sólo se aplica cuando <html> tiene la clase 'js',
   que la pone un script inline en el <head>. Si el JS no corre, no se oculta nada. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .cb-card .cb-foto img{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- WhatsApp flotante ---------- */
.cb-wa-flotante{
  position:fixed;right:1rem;bottom:1rem;z-index:1050;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.cb-wa-flotante:hover{color:#fff;background:#1da851}

/* ---------- Pie ---------- */
.cb-footer{background:var(--cb-ink);color:var(--cb-400);padding:4rem 0 2rem;font-size:.86rem}
.cb-footer a{color:var(--cb-300)}
.cb-footer a:hover{color:var(--cb-gold)}
.cb-footer h4{color:#fff;font-family:var(--cb-sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.cb-footer .cb-legal{border-top:1px solid rgba(255,255,255,.09);margin-top:2.5rem;padding-top:1.5rem;font-size:.76rem;color:var(--cb-500)}

/* ==========================================================================
   Bloques añadidos al conectar el catálogo real (2026-08-02)
   ========================================================================== */

/* ---------- Hero partido ----------
   Mitad texto, mitad foto. Se eligió este encuadre porque las fotos de producto
   son CUADRADAS 1080: un hero panorámico obligaría a inventar imagen o a
   recortar la bolsa. En móvil se apila, foto primero. */
.cb-hero-split{display:grid;grid-template-columns:1fr;background:var(--cb-cream)}
.cb-hero-split .cb-hero-img{order:-1}
.cb-hero-split .cb-hero-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.cb-hero-split .cb-hero-txt{display:flex;align-items:center;padding:clamp(2.5rem,6vw,5rem) 1.5rem}
.cb-hero-inner{max-width:34rem;margin-inline:auto;width:100%}
@media (min-width:992px){
  .cb-hero-split{grid-template-columns:1fr 1fr;min-height:min(90vh,820px)}
  .cb-hero-split .cb-hero-img{order:0}
  .cb-hero-split .cb-hero-img img{aspect-ratio:auto;height:100%}
  .cb-hero-inner{margin-inline:0;margin-left:auto;padding-right:clamp(1rem,4vw,4rem)}
}

/* ---------- Tira de colores ---------- */
.cb-tira{border-block:1px solid var(--cb-200);background:#fff}
.cb-color-chip{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cb-500);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.cb-color-chip:hover{color:var(--cb-ink);border-bottom-color:var(--cb-gold)}

/* ---------- Tarjeta de producto ---------- */
.cb-card{display:flex;flex-direction:column}
.cb-card-link{flex:1 1 auto}
.cb-card .cb-foto{background:#fff;border:1px solid var(--cb-200)}
.cb-card-txt{padding:.9rem .2rem 1rem}
.cb-modelo{
  display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cb-tenue);margin-bottom:.25rem;
}
.cb-card .cb-nombre{margin:0 0 .3rem;font-size:1.08rem}
.cb-card .cb-precio{margin:0;font-size:.86rem;color:var(--cb-500);letter-spacing:.04em}
/* El botón de la tarjeta es más discreto que el de una sección: en una rejilla
   de 8 piezas, 8 botones sólidos compiten entre sí y con la foto. */
.cb-card .btn{padding:.6rem 1rem;font-size:.72rem}

/* ---------- Cabecera de colección ---------- */
.cb-cabecera{background:#fff;border-bottom:1px solid var(--cb-200);padding-top:clamp(2.5rem,5vw,4rem)}
.cb-cabecera .lead-cb{margin-inline:auto}

/* ---------- Filtros ---------- */
.cb-filtros{display:grid;gap:.9rem;padding:1.6rem 0 .4rem}
.cb-filtro-fila{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cb-filtro-lbl{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cb-tenue);
  min-width:4.5rem;
}
.cb-chip{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .95rem;border:1px solid var(--cb-200);border-radius:999px;
  color:var(--cb-700);background:#fff;transition:border-color .2s,color .2s,background .2s;
}
.cb-chip:hover{border-color:var(--cb-400);color:var(--cb-ink)}
.cb-chip.activo{background:var(--cb-ink);border-color:var(--cb-ink);color:#fff}

/* Imagen de bloque editorial */
.cb-img-media{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ==========================================================================
   Ficha de producto (2026-08-02)
   ========================================================================== */

.cb-miga{background:#fff;border-bottom:1px solid var(--cb-200);padding:.9rem 0;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-tenue)}
.cb-miga a{color:var(--cb-500)}
.cb-miga a:hover{color:var(--cb-ink)}
.cb-miga span{margin:0 .5rem}
.cb-miga .cb-miga-actual{color:var(--cb-ink);margin-left:0}

.cb-ficha{padding:clamp(2rem,4vw,3.5rem) 0}

/* --------------------------------------------------------------------------
   GALERÍA — sin una línea de JavaScript.
   Un <input type=radio> oculto por foto; el <label> con la miniatura lo marca
   y estas reglas enseñan la grande que le corresponde. Se navega con las
   flechas del teclado de serie, porque son radios de verdad.
   🔑 Por defecto la foto se VE: con una sola imagen no se pinta ningún radio,
      y si el estado por defecto fuese "oculta" esa ficha se quedaría en blanco.
      Sólo dentro de .cb-galeria-multi se esconden y se elige una.
   -------------------------------------------------------------------------- */
.cb-galeria-radio{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cb-galeria-visor{background:#fff;border:1px solid var(--cb-200);aspect-ratio:1/1;overflow:hidden}
.cb-galeria-foto{margin:0;width:100%;height:100%}
.cb-galeria-foto img{width:100%;height:100%;object-fit:cover;display:block}

.cb-galeria-multi .cb-galeria-foto{display:none}
#cb-foto-0:checked ~ .cb-galeria-visor .cb-galeria-foto-0,
#cb-foto-1:checked ~ .cb-galeria-visor .cb-galeria-foto-1,
#cb-foto-2:checked ~ .cb-galeria-visor .cb-galeria-foto-2,
#cb-foto-3:checked ~ .cb-galeria-visor .cb-galeria-foto-3,
#cb-foto-4:checked ~ .cb-galeria-visor .cb-galeria-foto-4{display:block}

.cb-galeria-tira{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.cb-galeria-mini{display:block;width:78px;height:78px;border:1px solid var(--cb-200);
  overflow:hidden;cursor:pointer;transition:border-color .2s}
.cb-galeria-mini img{width:100%;height:100%;object-fit:cover;display:block}
.cb-galeria-mini:hover{border-color:var(--cb-400)}
#cb-foto-0:checked ~ .cb-galeria-tira .cb-galeria-mini-0,
#cb-foto-1:checked ~ .cb-galeria-tira .cb-galeria-mini-1,
#cb-foto-2:checked ~ .cb-galeria-tira .cb-galeria-mini-2,
#cb-foto-3:checked ~ .cb-galeria-tira .cb-galeria-mini-3,
#cb-foto-4:checked ~ .cb-galeria-tira .cb-galeria-mini-4{border-color:var(--cb-ink);border-width:2px}
/* El foco tiene que verse: el radio está oculto, así que lo lleva su miniatura. */
#cb-foto-0:focus-visible ~ .cb-galeria-tira .cb-galeria-mini-0,
#cb-foto-1:focus-visible ~ .cb-galeria-tira .cb-galeria-mini-1,
#cb-foto-2:focus-visible ~ .cb-galeria-tira .cb-galeria-mini-2,
#cb-foto-3:focus-visible ~ .cb-galeria-tira .cb-galeria-mini-3,
#cb-foto-4:focus-visible ~ .cb-galeria-tira .cb-galeria-mini-4{box-shadow:var(--cb-ring)}

/* En escritorio los datos se pegan arriba mientras la foto es alta */
@media (min-width:992px){
  .cb-ficha-datos{position:sticky;top:6rem}
}
.cb-ficha-datos h1{font-size:clamp(1.9rem,3.2vw,2.8rem);margin-bottom:.4rem}
.cb-ficha-precio{font-size:1.25rem;color:var(--cb-ink);letter-spacing:.04em;margin:0}
/* Cuando NO hay precio: se dice, no se finge. Tono discreto, no de error. */
.cb-ficha-sinprecio{font-size:.92rem;color:var(--cb-500);margin:0;font-style:italic}

.cb-colores{margin:1.8rem 0}
.cb-colores-lista{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.cb-color-mini{display:block;width:60px;height:60px;border:1px solid var(--cb-200);
  overflow:hidden;transition:border-color .2s}
.cb-color-mini img{width:100%;height:100%;object-fit:cover}
.cb-color-mini:hover{border-color:var(--cb-400)}
.cb-color-mini.activo{border-color:var(--cb-ink);border-width:2px}

.cb-personaliza{background:var(--cb-100);padding:1.3rem 1.4rem;margin:1.8rem 0}
.cb-personaliza h2{font-size:1.15rem;margin:0 0 .4rem}
.cb-personaliza p{font-size:.92rem;color:var(--cb-500);margin:0 0 .5rem}
.cb-personaliza a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--cb-gold);padding-bottom:2px}

.cb-ficha-cta{margin-bottom:1.5rem}

.cb-ficha-detalles{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;
  font-size:.88rem;color:var(--cb-500)}
.cb-ficha-detalles i{color:var(--cb-gold-txt);margin-right:.6rem}

/* ==========================================================================
   Páginas interiores: pasos, FAQ, formulario, legales (2026-08-02)
   ========================================================================== */

.cb-paso{height:100%}
.cb-paso-num{display:block;font-family:var(--cb-serif);font-size:2.4rem;
  color:var(--cb-gold);line-height:1;margin-bottom:.6rem}
.cb-paso h2{font-size:1.4rem;margin-bottom:.5rem}
.cb-paso a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--cb-gold);padding-bottom:2px}

.cb-faq{padding:1.4rem 0;border-bottom:1px solid var(--cb-200)}
.cb-faq:last-of-type{border-bottom:0}
.cb-faq h2,.cb-faq h3{font-size:1.2rem;margin:0 0 .4rem}
.cb-faq p{margin:0;color:var(--cb-500);font-size:.98rem}

/* ---------- Formulario ---------- */
.cb-form{background:#fff;border:1px solid var(--cb-200);padding:clamp(1.4rem,3vw,2.4rem)}
.cb-lbl{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cb-500);margin-bottom:.4rem}
.cb-input{width:100%;border:1px solid var(--cb-300);border-radius:var(--cb-radius);
  padding:.7rem .85rem;font-family:var(--cb-sans);font-size:.95rem;font-weight:300;
  color:var(--cb-800);background:#fff}
.cb-input:focus{outline:none;border-color:var(--cb-ink);box-shadow:var(--cb-ring)}
.cb-form-pieza{background:var(--cb-100);padding:.7rem .9rem;font-size:.9rem;margin-bottom:1.2rem}
.cb-form-nota{font-size:.78rem;color:var(--cb-tenue);text-align:center;margin:.9rem 0 0}
.cb-aviso-error{background:#fdecec;border:1px solid #f5c2c2;color:#8a1f1f;
  padding:.8rem 1rem;font-size:.9rem;margin-bottom:1.2rem}

/* Honeypot: FUERA DE PANTALLA por posición, no con display:none.
   Algunos bots saltan los campos con display:none y este los cazaría igual. */
.cb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.cb-contacto-lat{background:var(--cb-100);padding:clamp(1.3rem,3vw,2rem)}
.cb-contacto-lat h2{font-size:1.15rem;margin:0}

.cb-legal-pendiente{background:#fff;border:1px solid var(--cb-200);
  padding:clamp(2rem,5vw,3.5rem)}
.cb-legal-pendiente .lead-cb{margin-inline:auto}

/* ==========================================================================
   Cierre de diseño (2026-08-02) — cambios justificados con la referencia medida
   ========================================================================== */

/* ---------- Tarjeta sin botón ----------
   Medido en JW Pei: la tarjeta no lleva botón, la foto entera es el enlace.
   Con 42 piezas, 42 botones sólidos convertían la rejilla en un formulario. */
.cb-card-link{display:flex;flex-direction:column;height:100%}
.cb-card-txt{padding:.85rem .1rem 0}
.cb-card .cb-nombre{margin:0 0 .35rem;font-size:1.05rem}
.cb-card-pie{display:flex;align-items:center;gap:.5rem}
.cb-precio{font-size:.84rem;color:var(--cb-500);letter-spacing:.04em}
/* Sin precio el hueco lo ocupa el color: información real, y la tarjeta no
   queda coja mientras llegan los precios. */
.cb-precio-vacio{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cb-tenue)}

/* Punto de color de la tarjeta */
.cb-punto{
  width:11px;height:11px;border-radius:50%;
  background:var(--tono);
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.18);   /* borde para que el hueso se vea sobre blanco */
  flex:0 0 auto;
}

/* ---------- Muestras de color en los filtros ---------- */
.cb-muestra{
  width:26px;height:26px;border-radius:50%;
  background:var(--tono);
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.18);
  outline:1px solid transparent;outline-offset:3px;
  transition:outline-color .2s,transform .2s;
  display:inline-block;
}
.cb-muestra:hover{transform:scale(1.12)}
.cb-muestra.activo{outline-color:var(--cb-ink)}

/* La fila de filtros ya no necesita dos renglones: los 9 colores caben en uno */
.cb-filtros{gap:.75rem}
.cb-filtro-fila{gap:.55rem}

/* ---------- Ficha: nombre del color bajo la miniatura ---------- */
.cb-color-mini{position:relative}
.cb-color-mini::after{
  content:attr(title);
  position:absolute;left:50%;bottom:-1.35rem;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cb-400);
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;
}
.cb-color-mini:hover::after{opacity:1}
.cb-colores-lista{margin-bottom:1.6rem}

/* Aviso de privacidad en el punto de recogida del formulario.
   Discreto pero legible: si se disimula tanto que nadie lo lee, no informa. */
.cb-privacidad-corto{
  background:var(--cb-100);border-left:2px solid var(--cb-gold);
  padding:.9rem 1rem;margin-top:1.4rem;font-size:.84rem;color:var(--cb-500);
}
.cb-privacidad-corto p{margin:0 0 .4rem}
.cb-privacidad-corto a{color:var(--cb-ink);border-bottom:1px solid var(--cb-gold)}

/* Puntos de color en la ficha (hasta 23 por modelo) */
.cb-tonos{gap:.4rem}
.cb-punto-grande{
  width:22px;height:22px;border-radius:50%;background:var(--tono);
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.18);display:inline-block;
}
.cb-colores-txt{font-size:.8rem;color:var(--cb-tenue);margin:.6rem 0 0}

/* ==========================================================================
   Ficha: disponibilidad, compra, compartir y pestañas (2026-08-02)
   ========================================================================== */

/* Disponibilidad. Es el dato que la tienda de referencia enseña bajo el precio.
   El verde y el rojo NO son el único portador del mensaje: la palabra lo dice. */
.cb-dispo{font-size:.84rem;letter-spacing:.02em;margin:.55rem 0 0;color:var(--cb-500)}
.cb-dispo-lbl{color:var(--cb-tenue);margin-right:.35rem}
.cb-dispo.es-hay{color:#1F6B47}
.cb-dispo.es-pedido{color:#8A6A12}
.cb-dispo.es-agotado{color:#8C2F2F}

.cb-precio-antes{color:var(--cb-tenue);text-decoration:line-through;
  font-size:.86em;margin-right:.5rem;font-weight:300}

/* Compra: cantidad + botón. Es un <form method=get> normal contra WooCommerce,
   sin JS: el navegador arma la URL con add-to-cart y quantity. */
.cb-compra{margin:1.8rem 0 0}
.cb-cantidad{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.cb-cantidad label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cb-tenue);margin:0}
.cb-cantidad input{width:5.5rem;padding:.6rem .7rem;border:1px solid var(--cb-300);
  background:#fff;color:var(--cb-ink);font-family:var(--cb-sans);font-size:1rem;
  border-radius:var(--cb-radius);text-align:center}
.cb-cantidad input:focus{outline:0;border-color:var(--cb-gold);box-shadow:var(--cb-ring)}

/* Aviso cuando la pieza no se puede añadir al carrito. Tono informativo, no de
   error: no ha fallado nada, es que esa pieza no está a la venta ahora. */
.cb-aviso-compra{font-size:.88rem;color:var(--cb-500);background:var(--cb-100);
  padding:.85rem 1rem;margin:1.8rem 0 .9rem;border-left:2px solid var(--cb-gold)}

.cb-compartir{display:flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--cb-200)}
.cb-compartir-lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cb-tenue);margin-right:.35rem}
.cb-compartir-btn{width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--cb-300);color:var(--cb-500);
  border-radius:50%;transition:all .2s}
.cb-compartir-btn:hover{border-color:var(--cb-ink);color:var(--cb-ink)}
.cb-compartir-btn:focus-visible{outline:0;box-shadow:var(--cb-ring)}

/* --------------------------------------------------------------------------
   PESTAÑAS — mismo mecanismo de radios que la galería, cero JS.
   En móvil se apilan a lo ancho; no se convierten en acordeón porque son tres
   y caben, y un acordeón esconde contenido que ya está pagado en HTML.
   -------------------------------------------------------------------------- */
.cb-pestanas-wrap{padding:0 0 clamp(2rem,4vw,3.5rem)}
.cb-pestanas{border-top:1px solid var(--cb-200);padding-top:2rem}
.cb-tab-radio{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cb-tab-lista{display:flex;flex-wrap:wrap;gap:1.8rem;border-bottom:1px solid var(--cb-200);
  margin-bottom:1.8rem}
.cb-tab-lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cb-tenue);cursor:pointer;padding-bottom:.8rem;margin-bottom:-1px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cb-tab-lbl:hover{color:var(--cb-ink)}

.cb-tab-panel{display:none;max-width:70ch}
.cb-tab-panel p{color:var(--cb-500);font-weight:300;margin-bottom:.9rem}
#cb-tab-desc:checked        ~ .cb-tab-panel-desc,
#cb-tab-detalles:checked    ~ .cb-tab-panel-detalles,
#cb-tab-personaliza:checked ~ .cb-tab-panel-personaliza{display:block}
#cb-tab-desc:checked        ~ .cb-tab-lista .cb-tab-lbl-desc,
#cb-tab-detalles:checked    ~ .cb-tab-lista .cb-tab-lbl-detalles,
#cb-tab-personaliza:checked ~ .cb-tab-lista .cb-tab-lbl-personaliza{
  color:var(--cb-ink);border-bottom-color:var(--cb-gold)}
#cb-tab-desc:focus-visible        ~ .cb-tab-lista .cb-tab-lbl-desc,
#cb-tab-detalles:focus-visible    ~ .cb-tab-lista .cb-tab-lbl-detalles,
#cb-tab-personaliza:focus-visible ~ .cb-tab-lista .cb-tab-lbl-personaliza{
  outline:0;box-shadow:var(--cb-ring)}

/* Tabla de datos. Dos columnas en escritorio, apiladas en móvil. */
.cb-datos{display:grid;grid-template-columns:1fr;gap:.2rem 1.5rem;margin:0}
.cb-datos dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cb-tenue);font-weight:400;padding-top:.9rem}
.cb-datos dd{margin:0 0 .9rem;color:var(--cb-700);font-weight:300;
  border-bottom:1px solid var(--cb-200);padding-bottom:.9rem}
@media (min-width:576px){
  .cb-datos{grid-template-columns:minmax(9rem,auto) 1fr}
  .cb-datos dt{padding-top:.9rem;border-bottom:1px solid var(--cb-200);padding-bottom:.9rem;margin:0}
  .cb-datos dd{padding-top:.9rem}
}

.cb-enlace-mas{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--cb-gold);padding-bottom:2px}

/* Nota bajo el botón cuando la pieza se pide por mensaje en vez de por carrito */
.cb-nota-pedido{font-size:.8rem;color:var(--cb-tenue);margin:-.7rem 0 1.5rem;line-height:1.6}

/* --------------------------------------------------------------------------
   Retoques medidos a 390 px (2026-08-02)
   El pie de la tarjeta ponía precio y nº de colores en una fila rígida: en
   móvil "1,120 MXN" y "5 COLORES" se partían cada uno por su lado y quedaban
   dos columnas de palabras sueltas. Con wrap se van a línea completa.
   -------------------------------------------------------------------------- */
.cb-card-pie{flex-wrap:wrap;row-gap:.15rem}
.cb-card-pie .cb-precio,.cb-card-pie .cb-precio-vacio{white-space:nowrap}

/* Las tres pestañas no caben en una línea a 390 px con 1.8rem de separación */
@media (max-width:575.98px){
  .cb-tab-lista{gap:1.1rem}
  .cb-tab-lbl{font-size:.7rem;letter-spacing:.12em}
}