/* =====================================================================
   COINSA ADHESIVOS — Componentes web
   Requiere las fuentes Lexend, Red Hat Text y Asap Condensed (Google Fonts).
   Versión 1.1 · Octubre 2026: Asap Condensed reemplaza a Red Hat Mono.
   ===================================================================== */

/* ---------- 1. Variables de marca ---------- */
:root {
  /* Colores */
  --c-azul: #055DC1;
  --c-azul-profundo: #0A2E86;
  --c-noche: #071C4A;
  --c-noche-2: #0E2760;
  --c-verde: #33A730;
  --c-verde-texto: #1E7A22;
  --c-lima: #BCF11A;
  --c-celeste: #2E8FF0;
  --c-plata: #C9D5DC;
  --c-grafito: #3D4A5C;
  --c-niebla: #EEF2F7;
  --c-linea: #DCE3EC;
  --c-blanco: #FFFFFF;
  --c-error: #B42F25;
  --g-marca: linear-gradient(90deg, #BCF11A 0%, #33A730 30%, #2E8FF0 70%, #055DC1 100%);

  /* Tipografía */
  --f-display: 'Lexend', sans-serif;
  --f-texto: 'Red Hat Text', sans-serif;
  --f-tecnica: 'Asap Condensed', 'Arial Narrow', sans-serif;
  --f-mono: var(--f-tecnica); /* nombre anterior, se mantiene por compatibilidad */

  /* Espaciado (múltiplos de 8) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;

  /* Bordes y sombras */
  --r-chico: 8px;
  --r-medio: 16px;
  --r-grande: 24px;
  --r-pill: 999px;
  --sh-1: 0 2px 8px rgba(7, 28, 74, 0.06);
  --sh-2: 0 12px 32px rgba(7, 28, 74, 0.10);
  --focus: 0 0 0 3px rgba(46, 143, 240, 0.45);

  /* Layout */
  --ancho-max: 1280px;
  --margen: 24px;
  --t-rapida: 180ms ease;
}
@media (min-width: 1024px) { :root { --margen: 48px; } }

/* ---------- 2. Base ---------- */
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-grafito);
  background: var(--c-blanco);
}
@media (min-width: 1024px) { body { font-size: 17px; line-height: 26px; } }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--c-noche); margin: 0; }
h1 { font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -0.02em; }
h2 { font-weight: 600; font-size: 28px; line-height: 34px; }
h3 { font-weight: 600; font-size: 20px; line-height: 26px; }
@media (min-width: 1024px) {
  h1 { font-size: 56px; line-height: 60px; }
  h2 { font-size: 40px; line-height: 48px; }
  h3 { font-size: 24px; line-height: 30px; }
}
a { color: var(--c-azul); }
a:hover { color: var(--c-azul-profundo); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-chico); }

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--margen); }
.seccion { padding: 64px 0; }
@media (min-width: 1024px) { .seccion { padding: 112px 0; } }
.seccion--niebla { background: var(--c-niebla); }
.seccion--noche { background: var(--c-noche); color: var(--c-plata); }
.seccion--noche h1, .seccion--noche h2, .seccion--noche h3 { color: var(--c-blanco); }

.lead { font-family: var(--f-display); font-weight: 500; font-size: 18px; line-height: 26px; color: var(--c-grafito); }
@media (min-width: 1024px) { .lead { font-size: 22px; line-height: 30px; } }

.eyebrow {
  font-family: var(--f-tecnica); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-azul);
}
@media (min-width: 1024px) { .eyebrow { font-size: 14px; } }
.eyebrow--verde { color: var(--c-verde-texto); }
.seccion--noche .eyebrow { color: var(--c-lima); }

.dato-tecnico { font-family: var(--f-tecnica); font-weight: 500; font-size: 15px; line-height: 20px; color: var(--c-grafito); font-variant-numeric: tabular-nums; }

/* ---------- 3. Botones ----------
   <a class="btn btn--primario" href="#">Pedí cotización</a>
   <a class="btn btn--primario" href="#">Ver productos <svg class="icono"><use href="iconos-coinsa.svg#flecha-derecha"/></svg></a>
*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; box-sizing: border-box;
  font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  transition: background-color var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida);
}
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-pill); }
.btn:active { transform: translateY(1px); }
.btn .icono { width: 18px; height: 18px; }

.btn--primario { background: var(--c-azul); color: var(--c-blanco); }
.btn--primario:hover { background: var(--c-azul-profundo); color: var(--c-blanco); }

.btn--secundario { background: transparent; color: var(--c-noche); border-color: var(--c-noche); }
.btn--secundario:hover { background: var(--c-niebla); color: var(--c-noche); }

/* Solo sobre fondos oscuros o en la banda CTA */
.btn--acento { background: var(--c-lima); color: var(--c-noche); }
.btn--acento:hover { background: var(--c-blanco); color: var(--c-noche); }

/* Secundario sobre fondo oscuro */
.btn--claro { background: transparent; color: var(--c-blanco); border-color: var(--c-blanco); }
.btn--claro:hover { background: rgba(255, 255, 255, 0.10); color: var(--c-blanco); }

/* Link con flecha, para tarjetas */
.btn--texto {
  min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--c-azul); border-radius: 0;
}
.btn--texto:hover { color: var(--c-azul-profundo); }
.btn--texto .icono { transition: transform var(--t-rapida); }
.btn--texto:hover .icono { transform: translateX(4px); }

.btn--chico { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--bloque { width: 100%; }
@media (max-width: 599px) { .btn--bloque-mobile { width: 100%; } }

.btn[disabled], .btn--deshabilitado { opacity: 0.45; pointer-events: none; }

/* Botón flotante de WhatsApp */
.btn-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-verde); color: var(--c-noche);
  box-shadow: var(--sh-2); transition: transform var(--t-rapida);
}
.btn-whatsapp:hover { transform: scale(1.06); color: var(--c-noche); }
.btn-whatsapp .icono { width: 28px; height: 28px; }

/* ---------- 4. Íconos ----------
   <svg class="icono" aria-hidden="true"><use href="iconos-coinsa.svg#selladores"/></svg>
*/
.icono {
  width: 24px; height: 24px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icono--chico { width: 18px; height: 18px; }
.icono--grande { width: 32px; height: 32px; stroke-width: 1.8; }

/* Contenedor de ícono (tarjetas de categoría y beneficios) */
.icono-caja {
  width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-niebla); color: var(--c-azul);
}
.icono-caja .icono { width: 30px; height: 30px; stroke-width: 1.8; }
.seccion--niebla .icono-caja { background: var(--c-blanco); }
.seccion--niebla .tarjeta--blanca .icono-caja, .tarjeta--blanca .icono-caja { background: var(--c-niebla); }
.seccion--noche .icono-caja { background: var(--c-noche-2); color: var(--c-lima); }

/* ---------- 5. Tarjetas ---------- */
.tarjeta {
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px; border-radius: var(--r-medio);
  background: var(--c-niebla); color: var(--c-grafito);
  text-decoration: none;
  transition: box-shadow var(--t-rapida), transform var(--t-rapida);
}
.tarjeta--blanca { background: var(--c-blanco); border: 1px solid var(--c-linea); }
.tarjeta--oscura { background: var(--c-noche-2); color: var(--c-plata); }
.tarjeta--oscura h3 { color: var(--c-blanco); }
a.tarjeta:hover, .tarjeta--interactiva:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.tarjeta p { margin: 0; }
.tarjeta > .chip, .tarjeta > .btn, .tarjeta > .icono-caja,
.producto__cuerpo > .chip, .producto__cuerpo > .btn { align-self: flex-start; }
.tarjeta > .btn--texto { margin-top: auto; }

/* Tarjeta de producto */
.producto { background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: var(--r-medio); overflow: hidden; display: flex; flex-direction: column; }
.producto__imagen { background: var(--c-niebla); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.producto__imagen img { max-width: 80%; max-height: 85%; object-fit: contain; }
.producto__cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.producto__cuerpo h3 { font-size: 20px; line-height: 26px; }

/* Tabla de datos técnicos */
.ficha { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ficha th, .ficha td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--c-linea); vertical-align: top; }
.ficha th { font-family: var(--f-tecnica); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-azul); width: 40%; padding-right: 16px; }
.ficha-scroll { overflow-x: auto; }

/* ---------- 6. Chips / etiquetas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--f-tecnica); font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--c-niebla); color: var(--c-azul);
}
.chip--nuevo { background: var(--c-lima); color: var(--c-noche); }
.chip--verde { background: var(--c-verde); color: var(--c-noche); }
.chip--oscuro { background: var(--c-noche-2); color: var(--c-lima); }

/* ---------- 7. Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-family: var(--f-texto); font-weight: 500; font-size: 15px; color: var(--c-noche); }
.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: 12px 16px; box-sizing: border-box; width: 100%;
  font: inherit; font-size: 16px; color: var(--c-noche);
  background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: var(--r-chico);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--c-azul); box-shadow: 0 0 0 3px rgba(46, 143, 240, 0.35); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--c-error); }
.campo__error { font-size: 14px; color: var(--c-error); }
.campo__ayuda { font-size: 14px; color: var(--c-grafito); }

/* ---------- 8. Recursos de marca ---------- */
/* Franja con el gradiente de marca (ej.: arriba del footer) */
.franja-marca { height: 6px; background: var(--g-marca); }

/* Línea de aplicación: usar el SVG "linea-aplicacion" del set de íconos o el de la guía */
.linea-aplicacion { display: block; width: 100%; height: 48px; }
@media (min-width: 1024px) { .linea-aplicacion { height: 70px; } }

/* Lista con tildes */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check .icono { color: var(--c-verde-texto); margin-top: 1px; }
.seccion--noche .lista-check .icono { color: var(--c-lima); }