/* =====================================================================
   Sibiomec & Santana · estilos.css
   Identidad: Brief/SIBIOMEC_Kit_Visual_Web.txt (definida por el cliente).
   Clínico, premium y limpio: blanco dominante, azul oscuro en el hero y el pie,
   turquesa solo en acentos e íconos y ámbar EXCLUSIVO para cotizar.
   Motivo propio: la línea de pulso del logo (hero, antetítulos y cierre).
   Móvil primero. Breakpoints de Divi: 768 y 981 px.
   Las variables de :root pasan tal cual a las variables globales de Divi 5.
   ===================================================================== */

/* === Fuentes (descargadas en sitio/fonts/) === */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); }

/* === Variables === */
:root {
  /* Marca (Kit Visual) */
  --azul: #1347B5;                 /* primario: botones secundarios, enlaces, títulos de tarjeta al pasar */
  --azul-oscuro: #0E3281;          /* hero, pie y texto sobre ámbar */
  --azul-acento: #2160E8;          /* foco y brillos del hero */
  --azul-50: #EEF3FC;              /* secciones alternas y fondos suaves */
  --azul-100: #DCE6F8;
  --azul-texto-claro: #C9D7F5;     /* texto secundario sobre azul oscuro */
  --turquesa: #00A8A4;             /* solo acentos: íconos grandes, líneas, detalles */
  --turquesa-claro: #00CCC9;       /* acentos sobre azul oscuro */
  --turquesa-texto: #00756F;       /* turquesa legible en texto pequeño sobre blanco (4,9:1) */
  --turquesa-50: #E2F6F5;
  --ambar: #FFA900;                /* CTA de conversión, siempre con texto azul oscuro */
  --ambar-hover: #FFBA33;
  --verde-whatsapp: #25D366;       /* solo el botón flotante */
  --verde-whatsapp-texto: #08361B;

  /* Colores de la interfaz (los usan todos los bloques) */
  --color-fondo: var(--azul-50);   /* fondos suaves, hover */
  --color-fondo-hondo: #E3EAF6;
  --color-superficie: #FFFFFF;     /* página, encabezado y tarjetas */
  --color-texto: #383838;
  --color-texto-2: #696C72;
  --color-texto-3: #696C72;
  --color-gris-ui: #95989D;        /* solo bordes y adornos, nunca texto */
  --color-texto-claro: #FFFFFF;
  --color-texto-claro-2: var(--azul-texto-claro);
  --color-primario: var(--azul);
  --color-primario-texto: #FFFFFF;
  --color-primario-hover: var(--azul-oscuro);
  --color-primario-sombra: #9DB3E3; /* subrayado de enlaces */
  --color-secundario: var(--azul);
  --color-icono: #00857F;          /* íconos pequeños sobre blanco (3,9:1) */
  --color-oscuro-2: #0A2562;
  --color-borde: #D3DBE8;
  --color-borde-suave: #E6EBF3;
  --color-borde-form: #868C96;
  --color-foco: var(--azul-acento);
  --color-seleccion: var(--azul-50);
  --color-velo: rgba(10, 37, 98, .55);
  --color-linea-oscura: rgba(255, 255, 255, .16);
  /* Funcionales: solo con significado */
  --color-exito: #137547;
  --color-exito-fondo: #E7F4EC;
  --color-error: #B42318;
  --color-error-fondo: #FDECEA;
  --color-advertencia: #8A5C00;
  --color-advertencia-fondo: #FFF5D6;
  --etiqueta-oferta-fondo: var(--azul-oscuro);
  --etiqueta-oferta-texto: #FFFFFF;
  --etiqueta-agotado-fondo: #FFFFFF;
  --etiqueta-agotado-texto: #383838;
  --etiqueta-agotado-borde: #383838;

  /* Tipografía: Poppins (títulos y botones) e Inter (texto) */
  --fuente-titulos: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --texto-12: 0.75rem;
  --texto-14: 0.875rem;
  --texto-16: 1rem;
  --texto-18: 1.125rem;
  --texto-20: 1.25rem;
  --texto-24: 1.5rem;
  --texto-26: 1.625rem;            /* H2 móvil (Kit Visual) */
  --texto-30: 1.875rem;
  --texto-32: 2rem;                /* H1 móvil y H2 escritorio (Kit Visual) */
  --texto-36: 2.25rem;
  --texto-48: 3rem;                /* H1 escritorio (Kit Visual) */
  --texto-60: 3.75rem;
  --peso-normal: 400;
  --peso-semi: 600;
  --peso-negrita: 600;
  --peso-titulo: 700;

  /* Espaciado (escala del Kit Visual) */
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-12: 12px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-48: 48px;
  --esp-64: 64px;
  --esp-96: 96px;
  --esp-128: 128px;

  /* Formas */
  --radio-boton: 8px;
  --radio-boton-tarjeta: 8px;
  --radio-campo: 8px;
  --radio-tarjeta: 12px;
  --radio-foto: 8px;
  --radio-marco: 16px;
  --radio-pildora: 999px;
  --sombra-tarjeta: 0 1px 2px rgba(14, 50, 129, .06), 0 6px 20px rgba(14, 50, 129, .07);
  --sombra-elevada: 0 2px 6px rgba(14, 50, 129, .08), 0 24px 48px rgba(14, 50, 129, .16);
  --sombra-panel: 0 16px 32px rgba(14, 50, 129, .16);
  --sombra-barra: 0 -6px 20px rgba(14, 50, 129, .12);
  --sombra-boton-primario: none;
  --sombra-cta: 0 1px 0 rgba(14, 50, 129, .25), 0 8px 20px rgba(255, 169, 0, .28);

  /* Medidas */
  --ancho-max: 1200px;
  --margen-lateral: 16px;
  --alto-fila-encabezado: 64px;
  --alto-encabezado: 64px;
  --seccion: 64px;                 /* separación entre secciones */
}
@media (min-width: 768px) { :root { --margen-lateral: 24px; --seccion: 80px; } }
@media (min-width: 981px) { :root { --margen-lateral: 32px; --alto-fila-encabezado: 80px; --alto-encabezado: 129px; --seccion: 96px; } }

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-encabezado) + 16px); }
body {
  margin: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-16);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; color: var(--azul-oscuro); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: var(--peso-negrita); }
del { text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: calc(var(--ancho-max) + 2 * var(--margen-lateral)); margin-inline: auto; padding-inline: var(--margen-lateral); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono--relleno { fill: currentColor; stroke: none; }
.sprite { display: none; }
/* Textos con versión corta para móvil (TEXTOS.md ✂) */
.solo-movil { display: inline; }
.solo-escritorio { display: none; }
@media (min-width: 768px) { .solo-movil { display: none; } .solo-escritorio { display: inline; } }

/* === Botones === */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-8);
  min-height: 48px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--radio-boton);
  font-family: var(--fuente-titulos); font-size: var(--texto-16); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.boton .icono { width: 22px; height: 22px; }
.boton:active { transform: translateY(1px); }
/* Ámbar: solo para cotizar (conversión). Texto azul oscuro, nunca blanco. */
.boton--cta { background: var(--ambar); color: var(--azul-oscuro); box-shadow: var(--sombra-cta); }
.boton--cta:hover { background: var(--ambar-hover); }
.boton--primario { background: var(--azul); color: #FFFFFF; box-shadow: var(--sombra-boton-primario); }
.boton--primario:hover { background: var(--azul-oscuro); }
.boton--secundario { background: var(--color-superficie); color: var(--azul); border-color: var(--azul); }
.boton--secundario:hover { background: var(--azul-50); }
.boton--claro { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.boton--claro:hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; }
.boton--oscuro { background: var(--azul-oscuro); color: #FFFFFF; }
.boton--oscuro:hover { background: var(--color-oscuro-2); }
.boton--grande { min-height: 56px; padding-inline: 28px; }
.boton--bloque { display: flex; width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--color-borde); color: var(--color-texto-2); box-shadow: none; cursor: not-allowed; transform: none; }
.boton--tarjeta { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: var(--radio-boton-tarjeta); background: var(--azul); color: #FFFFFF; }
.boton--tarjeta:hover { background: var(--azul-oscuro); }
.boton--tarjeta .icono { width: 20px; height: 20px; stroke-width: 2.5; }
.boton--tarjeta-suave { background: var(--color-superficie); color: var(--azul); border-color: var(--azul); }
.boton--tarjeta-suave:hover { background: var(--azul-50); }
.enlace { display: inline-flex; align-items: center; gap: var(--esp-4); min-height: 44px; padding: 0; border: 0; background: none; color: var(--azul); font-weight: var(--peso-semi); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--color-primario-sombra); }
.enlace:hover { color: var(--azul-oscuro); text-decoration-color: currentColor; }
.enlace .icono { width: 20px; height: 20px; }
.enlace--claro { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .5); }
.enlace--claro:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.boton-icono { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; }
.boton-icono:hover { background: var(--color-fondo); }

/* === Textos comunes === */
/* Antetítulo con la línea de pulso del logo */
.antetitulo { display: inline-flex; align-items: center; gap: var(--esp-8); color: var(--turquesa-texto); font-family: var(--fuente-titulos); font-size: var(--texto-14); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.antetitulo::before { content: ""; flex: none; width: 32px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' fill='none' stroke='%2300A8A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 9h8l2-4 3 10 4-14 3 8h10'/%3E%3C/svg%3E") no-repeat center / contain; }
.antetitulo--claro { color: var(--turquesa-claro); }
.titulo-seccion { font-size: var(--texto-26); }
.antetitulo + .titulo-seccion { margin-top: var(--esp-12); }
.parrafo-seccion { margin-top: var(--esp-16); max-width: 40rem; color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.6; }
@media (min-width: 981px) { .titulo-seccion { font-size: var(--texto-32); } }
.seccion { padding-block: var(--seccion); }
.seccion--sin-arriba { padding-top: 0; }
.seccion--sin-abajo { padding-bottom: 0; }
.seccion--suave { background: var(--azul-50); }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--esp-16) var(--esp-32); margin-bottom: var(--esp-32); }
.seccion__cabeza > div { max-width: 44rem; }
@media (min-width: 981px) { .seccion__cabeza { margin-bottom: var(--esp-48); } }
.seccion__pie { margin-top: var(--esp-32); }
/* Llamado al final de una sección: frase + una acción + microcopy */
.llamado { display: grid; justify-items: start; gap: var(--esp-16); margin-top: var(--esp-32); }
.llamado__texto { max-width: 40rem; color: var(--color-texto); font-size: var(--texto-18); font-weight: var(--peso-semi); line-height: 1.5; }
.micro { color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.5; }
@media (min-width: 981px) { .llamado { margin-top: var(--esp-48); } }

/* === Aviso de prototipo === */
.aviso-prototipo { padding: 6px var(--margen-lateral); background: #F1F2F4; color: #5A5D63; font-size: var(--texto-12); line-height: 1.4; text-align: center; }
@media (min-width: 768px) { .aviso-prototipo { font-size: var(--texto-14); } }

/* === Saltar al contenido === */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 8px; background: var(--azul-oscuro); color: #FFFFFF; font-weight: var(--peso-semi); }
.saltar:focus { top: 8px; }

/* === Franja superior === */
/* Móvil: solo «Envío incluido a toda Colombia». Desde 768 px: mensaje completo, información y WhatsApp. */
.franja { background: var(--azul-50); color: var(--azul-oscuro); font-size: var(--texto-14); }
.franja__fila { display: flex; align-items: center; justify-content: center; gap: var(--esp-24); min-height: 36px; }
.franja__mensaje { display: inline-flex; align-items: center; gap: var(--esp-8); padding-block: 6px; font-weight: var(--peso-semi); line-height: 1.3; }
.franja__mensaje .icono { width: 18px; height: 18px; color: var(--color-icono); }
.franja__enlace, .franja__wa { display: none; }
.franja__largo { display: none; }
@media (min-width: 768px) {
  .franja__fila { justify-content: flex-start; }
  .franja__largo { display: inline; }
  .franja__corto { display: none; }
  .franja__wa { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; white-space: nowrap; text-decoration: none; }
  .franja__wa .icono { width: 18px; height: 18px; color: #128C7E; }
  .franja__wa:hover strong { text-decoration: underline; }
}
@media (min-width: 981px) {
  .franja__enlace { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; text-underline-offset: 3px; }
  .franja__wa { margin-left: 0; }
}

/* === Encabezado === */
/* Móvil: logo + Buscar + Cotización + Menú (el buscador y el menú se abren debajo).
   Escritorio: fila 1 con logo, buscador, WhatsApp y «Mi cotización»; fila 2 con las 6 líneas de equipo. */
.encabezado { position: sticky; top: 0; z-index: 40; background: var(--color-superficie); box-shadow: 0 1px 0 var(--color-borde-suave); }
.encabezado__fila { display: flex; align-items: center; gap: var(--esp-8); min-height: var(--alto-fila-encabezado); }
.encabezado__logo { flex: none; display: block; margin-right: auto; padding-block: 4px; }
.encabezado__logo img { width: auto; height: 40px; }
.encabezado__acciones { display: flex; align-items: center; gap: 2px; }
.accion { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 52px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--azul-oscuro); font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.1; text-decoration: none; }
.accion:hover { background: var(--azul-50); }
.accion .icono { width: 26px; height: 26px; }
.accion__icono { position: relative; display: inline-flex; }
.accion__largo { display: none; }
.accion.accion--wa { display: none; }
.contador { position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ambar); color: var(--azul-oscuro); font-size: var(--texto-12); font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--color-superficie); }
@media (max-width: 374px) {
  .encabezado__logo img { height: 34px; }
  .accion { padding-inline: 3px; min-width: 44px; }
}
@media (min-width: 768px) { .encabezado__logo img { height: 44px; } }
@media (min-width: 981px) {
  .encabezado__fila { gap: var(--esp-32); }
  .encabezado__logo { margin-right: 0; }
  .encabezado__logo img { height: 54px; }
  .encabezado__acciones { margin-left: auto; gap: var(--esp-8); }
  .accion { flex-direction: row; gap: var(--esp-8); min-height: 48px; padding: 8px 14px; font-size: var(--texto-16); }
  .accion .icono { width: 24px; height: 24px; }
  .accion.accion--wa { display: inline-flex; }
  .accion--wa .icono { color: #128C7E; }
  .accion__largo { display: inline; }
  .accion__corto { display: none; }
  /* «Mi cotización» como píldora con el contador ámbar */
  .accion--carrito { padding-inline: 16px 12px; border-radius: var(--radio-pildora); background: var(--azul-50); box-shadow: inset 0 0 0 1.5px var(--azul-100); }
  .accion--carrito:hover { background: var(--azul-100); }
  .accion--carrito .accion__icono { display: contents; }
  .accion--carrito .contador { position: static; order: 2; box-shadow: none; }
  .accion--menu, .accion--buscar { display: none; }
}

/* === Buscador === */
/* Móvil: panel que se abre debajo del encabezado con «Buscar». Escritorio: campo fijo en la fila del logo. */
.buscador { display: none; }
.buscador--abierto {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--alto-encabezado)); overflow-y: auto;
  padding: var(--esp-12) var(--margen-lateral) var(--esp-16);
  background: var(--color-superficie); box-shadow: var(--sombra-panel);
  border-top: 1px solid var(--color-borde-suave);
}
.buscador__caja { display: flex; align-items: center; gap: var(--esp-8); padding: 3px 3px 3px 12px; border: 1.5px solid var(--color-borde-form); border-radius: var(--radio-campo); background: var(--color-superficie); }
.buscador__caja:hover { border-color: var(--azul); }
.buscador__caja:focus-within { border-color: var(--azul); outline: 3px solid var(--color-foco); outline-offset: 1px; }
.buscador__lupa { color: var(--color-texto-2); }
.buscador__campo { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; font-size: var(--texto-18); }
.buscador__campo:focus-visible { outline: none; }
.buscador__campo::placeholder { color: var(--color-texto-2); }
.buscador__boton { min-height: 44px; padding: 8px 18px; border-radius: 6px; }
.buscador__sugerencias { margin-top: var(--esp-8); overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.sugerencia { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--esp-12); align-items: center; min-height: 72px; padding: var(--esp-8) var(--esp-12); border-bottom: 1px solid var(--color-borde-suave); text-decoration: none; }
.sugerencia img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.sugerencia__nombre { display: block; font-weight: var(--peso-semi); line-height: 1.3; }
.sugerencia__precio { display: block; color: var(--color-texto-2); line-height: 1.35; }
.sugerencia__precio strong { color: var(--color-texto); }
.sugerencia:hover, .sugerencia[aria-selected="true"] { background: var(--azul-50); }
.sugerencias__todos { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-8); min-height: 52px; padding: var(--esp-8) var(--esp-16); color: var(--azul); font-weight: var(--peso-semi); text-decoration: none; }
.sugerencias__todos span { text-decoration: underline; text-decoration-color: var(--color-primario-sombra); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sugerencias__todos:hover, .sugerencias__todos[aria-selected="true"] { background: var(--azul-50); }
.sugerencias__vacio { display: grid; gap: var(--esp-12); padding: var(--esp-16); }
.sugerencias__vacio .chips { gap: var(--esp-8); }
@media (min-width: 981px) {
  .buscador { display: block; position: relative; flex: 1; max-width: 560px; }
  .buscador__campo { font-size: var(--texto-16); }
  .buscador__sugerencias { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 8px); margin: 0; box-shadow: var(--sombra-elevada); }
}

/* === Menú === */
/* Las 6 líneas de equipo de config.js, sin submenús.
   Móvil: lista con el nombre completo y la línea de apoyo, que se abre con «Menú».
   Escritorio: segunda fila del encabezado con el nombre corto y una barra turquesa en la activa. */
.menu { display: none; }
.menu__lista { list-style: none; }
.menu__enlace { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: var(--azul-oscuro); text-decoration: none; }
.menu__nombre { font-weight: var(--peso-semi); line-height: 1.25; }
.menu__apoyo { display: none; }
.menu__corto { display: none; }
.menu--abierto {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--alto-encabezado)); overflow-y: auto;
  padding: var(--esp-8) 0 var(--esp-24);
  background: var(--color-superficie); box-shadow: var(--sombra-panel);
  border-top: 1px solid var(--color-borde-suave);
}
.menu--abierto .menu__enlace { position: relative; min-height: 68px; padding: 10px 32px 10px 0; border-bottom: 1px solid var(--color-borde-suave); }
.menu--abierto .menu__enlace::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-top: 2.5px solid var(--color-icono); border-right: 2.5px solid var(--color-icono); transform: translateY(-50%) rotate(45deg); }
.menu--abierto .menu__nombre { font-family: var(--fuente-titulos); font-size: var(--texto-18); font-weight: 600; }
.menu--abierto .menu__apoyo { display: block; margin-top: 2px; color: var(--color-texto-2); line-height: 1.35; }
.menu--abierto .menu__enlace--activo .menu__nombre { color: var(--azul); }
.menu__wa { margin-top: var(--esp-24); width: 100%; }
@media (min-width: 981px) {
  .menu { display: block; border-top: 1px solid var(--color-borde-suave); }
  .menu__lista { display: flex; align-items: stretch; justify-content: space-between; }
  .menu__largo { display: none; }
  .menu__corto { display: inline; }
  .menu__enlace { position: relative; min-height: 48px; padding: 0 4px; font-family: var(--fuente-titulos); white-space: nowrap; }
  .menu__nombre { font-weight: 600; }
  .menu__enlace::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color .15s; }
  .menu__enlace:hover { color: var(--azul); }
  .menu__enlace:hover::after { background: var(--azul-100); }
  .menu__enlace--activo { color: var(--azul); }
  .menu__enlace--activo::after, .menu__enlace--activo:hover::after { background: var(--turquesa); }
  .menu__wa { display: none; }
}

/* === Encabezado del checkout === */
body[data-pagina="checkout"] { --alto-encabezado: var(--alto-fila-encabezado); }
.encabezado--checkout .encabezado__fila { gap: var(--esp-8); }
.encabezado__ayuda { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 52px; padding: 4px 6px; border-radius: 10px; color: var(--azul-oscuro); font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.1; text-decoration: none; }
.encabezado__ayuda:hover { background: var(--azul-50); }
.encabezado__ayuda .icono { width: 26px; height: 26px; }
.encabezado__ayuda strong { font-weight: inherit; }
.encabezado__ayuda-largo { display: none; }
.encabezado__volver { display: inline-flex; align-items: center; gap: var(--esp-4); min-height: 44px; max-width: 108px; color: var(--azul); font-weight: var(--peso-semi); line-height: 1.15; text-decoration: none; }
.encabezado__volver .icono { width: 20px; height: 20px; }
@media (min-width: 768px) {
  .encabezado--checkout .encabezado__fila { gap: var(--esp-12); }
  .encabezado__ayuda { flex-direction: row; gap: 6px; min-height: 44px; margin-left: auto; padding: 4px 10px; color: var(--color-texto-2); font-size: var(--texto-16); font-weight: var(--peso-normal); line-height: 1.3; }
  .encabezado__ayuda .icono { width: 22px; height: 22px; color: #128C7E; }
  .encabezado__ayuda strong { color: var(--color-texto); font-weight: var(--peso-semi); }
  .encabezado__ayuda-largo { display: inline; }
  .encabezado__volver { max-width: none; }
  .encabezado__volver-corto { display: none; }
}
.encabezado__volver { max-width: none; white-space: nowrap; }

/* === Precio === */
.precio { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--esp-8); }
.precio__desde { color: var(--color-texto-2); font-size: var(--texto-16); }
.precio__valor { font-size: var(--texto-24); font-weight: var(--peso-semi); letter-spacing: -0.01em; line-height: 1.2; }
.precio__antes { color: var(--color-texto-3); font-size: var(--texto-16); }
.precio__iva { color: var(--color-texto-2); font-size: var(--texto-16); }

/* === Etiquetas === */
.etiqueta { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; border-radius: var(--radio-pildora); font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.2; }
.etiqueta .icono { width: 16px; height: 16px; stroke-width: 2.25; }
.etiqueta--oferta { background: var(--etiqueta-oferta-fondo); color: var(--etiqueta-oferta-texto); }
.etiqueta--agotado { background: var(--etiqueta-agotado-fondo); color: var(--etiqueta-agotado-texto); box-shadow: inset 0 0 0 1.5px var(--etiqueta-agotado-borde); }
/* Todos los equipos tienen registro Invima (confirmado por el usuario) */
.etiqueta--invima { background: var(--turquesa-50); color: var(--turquesa-texto); }

/* === Tarjeta de producto === */
/* Sin precio: «Precio por cotización» + «Agregar a mi cotización» (config.cotizacion).
   Móvil: foto a la izquierda y botón a todo el ancho. Desde 768 px: tarjeta vertical (2, 3 y 4 columnas). */
.grilla-productos { display: grid; gap: var(--esp-12); list-style: none; }
.grilla-productos > li { display: flex; min-width: 0; }
.grilla-productos > li > .tarjeta { flex: 1; min-width: 0; }
@media (min-width: 768px) { .grilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16); } }
@media (min-width: 981px) { .grilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); } }
@media (min-width: 1200px) { .grilla-productos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tarjeta {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "foto cuerpo" "accion accion";
  gap: var(--esp-12) var(--esp-16); padding: var(--esp-12);
  background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
  transition: box-shadow .2s ease, transform .2s ease;
}
.tarjeta__foto { grid-area: foto; position: relative; display: block; align-self: start; border-radius: var(--radio-foto); overflow: hidden; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.tarjeta__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-foto); transition: transform .3s ease; }
.tarjeta__foto .etiqueta { position: absolute; left: 4px; bottom: 4px; min-height: 24px; padding: 1px 8px 1px 6px; }
.tarjeta__foto .etiqueta .icono { width: 14px; height: 14px; }
.tarjeta__cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; min-width: 0; }
.tarjeta__categoria, .tarjeta__linea { color: var(--color-texto-2); font-size: var(--texto-14); line-height: 1.4; }
.tarjeta__nombre { margin-top: 2px; color: var(--color-texto); font-family: var(--fuente-titulos); font-size: var(--texto-16); font-weight: 600; letter-spacing: 0; line-height: 1.3; text-wrap: pretty; }
.tarjeta__nombre a { text-decoration: none; }
.tarjeta__nombre a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.tarjeta__opciones { margin-top: 2px; color: var(--color-secundario); font-size: var(--texto-16); font-weight: var(--peso-semi); }
.tarjeta__precio { margin-top: var(--esp-8); }
.tarjeta__precio .precio__valor { font-size: var(--texto-20); }
.tarjeta__iva { color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.3; }
/* En lugar del precio */
.tarjeta__cotiza { display: flex; align-items: center; gap: 6px; margin-top: var(--esp-8); color: var(--azul-oscuro); font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.3; }
.tarjeta__cotiza .icono { width: 18px; height: 18px; color: var(--color-icono); }
.tarjeta__ficha { align-self: flex-start; min-height: 40px; font-size: var(--texto-16); }
.tarjeta__accion { grid-area: accion; align-self: end; }
.tarjeta--agotado .tarjeta__foto img { opacity: .55; filter: grayscale(.4); }
@media (hover: hover) {
  .tarjeta:hover { box-shadow: var(--sombra-elevada); transform: translateY(-2px); }
  .tarjeta:hover .tarjeta__foto img { transform: scale(1.03); }
}
@media (min-width: 768px) {
  .tarjeta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "cuerpo" "accion"; grid-template-rows: auto 1fr auto; gap: var(--esp-12); padding: var(--esp-16); }
  .tarjeta__foto { box-shadow: none; }
  .tarjeta__foto .etiqueta { left: 8px; top: 8px; bottom: auto; min-height: 28px; padding: 2px 10px 2px 8px; }
  .tarjeta__foto .etiqueta .icono { width: 16px; height: 16px; }
  .tarjeta__nombre { font-size: var(--texto-18); }
  .tarjeta__precio .precio__valor { font-size: var(--texto-24); }
  .tarjeta__accion { margin-top: var(--esp-4); }
}
/* En 3 y 4 columnas el «+» no cabe junto a «Agregar a mi cotización» sin partir el texto en 2 líneas */
@media (min-width: 981px) { .tarjeta .boton--tarjeta .icono { display: none; } }

/* === Hero (primera pantalla del inicio) === */
/* Dirección de arte: «el equipo real sobre el azul de la marca». Fondo azul oscuro con la línea de pulso
   del logo, y los equipos en tarjetas blancas como piezas de vitrina; el sello Invima flota encima.
   Móvil: sello, titular, frase y CTA sin scroll a 360 × 640; la vitrina y las 4 garantías debajo.
   Escritorio: 2 columnas (texto 52 / vitrina 48) y las 4 garantías en una fila al pie del hero. */
.hero { position: relative; overflow: hidden; padding: var(--esp-24) 0 var(--esp-32); background: radial-gradient(120% 80% at 100% 0%, #1A4FC4 0%, rgba(26, 79, 196, 0) 60%), var(--azul-oscuro); color: #FFFFFF; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-32); }
.hero__grid > * { min-width: 0; }
.hero__sello { display: inline-flex; align-items: center; gap: var(--esp-8); min-height: 32px; padding: 4px 14px 4px 8px; border-radius: var(--radio-pildora); background: rgba(0, 204, 201, .14); box-shadow: inset 0 0 0 1px rgba(0, 204, 201, .5); color: #FFFFFF; font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.3; }
.hero__sello .icono { width: 20px; height: 20px; color: var(--turquesa-claro); }
.hero__titulo { margin-top: var(--esp-16); color: #FFFFFF; font-size: var(--texto-30); line-height: 1.15; }
.hero__apoyo { margin-top: var(--esp-12); max-width: 36rem; color: var(--azul-texto-claro); font-size: var(--texto-16); line-height: 1.55; }
.hero__acciones { display: grid; gap: var(--esp-4); margin-top: var(--esp-24); }
.hero__acciones .boton { width: 100%; }
.hero__acciones .enlace { justify-self: center; }
.hero__micro { margin-top: var(--esp-8); color: var(--azul-texto-claro); font-size: var(--texto-14); line-height: 1.5; text-align: center; }
/* Vitrina: 3 equipos reales + sello Invima sobre la línea de pulso */
.vitrina { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 560px; margin-inline: auto; }
.vitrina__pulso { position: absolute; left: -16px; right: -16px; top: 48%; width: calc(100% + 32px); height: auto; color: var(--turquesa-claro); opacity: .55; }
.vitrina__pieza { position: absolute; margin: 0; padding: 6%; border-radius: var(--radio-marco); background: #FFFFFF; box-shadow: 0 2px 4px rgba(4, 16, 48, .2), 0 24px 48px rgba(4, 16, 48, .35); }
.vitrina__pieza img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.vitrina__pieza--1 { right: 0; top: 0; width: 64%; }
.vitrina__pieza--2 { left: 0; bottom: 0; width: 40%; padding: 4%; }
.vitrina__pieza--3 { left: 46%; bottom: 2%; width: 24%; padding: 3%; border-radius: var(--radio-tarjeta); }
.vitrina__nota { position: absolute; left: 0; top: 10%; display: none; grid-template-columns: 36px auto; align-items: center; gap: 2px 10px; max-width: 46%; padding: 10px 14px 10px 10px; border-radius: var(--radio-tarjeta); background: #FFFFFF; box-shadow: 0 12px 32px rgba(4, 16, 48, .35); color: var(--azul-oscuro); }
.vitrina__nota-icono { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--turquesa-50); color: var(--turquesa-texto); }
.vitrina__nota-icono .icono { width: 22px; height: 22px; }
.vitrina__nota strong { font-family: var(--fuente-titulos); font-size: var(--texto-14); font-weight: 600; line-height: 1.2; }
.vitrina__nota span { color: var(--color-texto-2); font-size: var(--texto-14); line-height: 1.25; }
/* Las 4 garantías al pie del hero */
.garantias { display: grid; gap: var(--esp-12); margin-top: var(--esp-32); padding-top: var(--esp-24); border-top: 1px solid var(--color-linea-oscura); list-style: none; }
.garantias li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--esp-12); color: #FFFFFF; font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.35; }
.garantias__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 204, 201, .12); color: var(--turquesa-claro); }
.garantias__icono .icono { width: 22px; height: 22px; }
.sin-corte { white-space: nowrap; }
@media (max-width: 374px) {
  .hero { padding-top: var(--esp-16); }
  .hero__titulo { margin-top: var(--esp-12); font-size: var(--texto-26); }
  .hero__acciones { margin-top: var(--esp-16); }
}
@media (min-width: 390px) { .hero__titulo { font-size: var(--texto-32); } }
@media (min-width: 768px) {
  .hero { padding: var(--esp-48) 0 var(--esp-32); }
  .hero__titulo { font-size: var(--texto-36); }
  .hero__apoyo { font-size: var(--texto-18); }
  .hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8) var(--esp-24); }
  .hero__acciones .boton { width: auto; }
  .hero__micro { text-align: left; font-size: var(--texto-16); }
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16) var(--esp-32); }
  .vitrina__nota { display: grid; max-width: 60%; }
  .vitrina__nota strong, .vitrina__nota span { font-size: var(--texto-16); }
}
@media (min-width: 981px) {
  .hero { padding: var(--esp-48) 0 var(--esp-32); }
  .hero__grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; gap: var(--esp-48); }
  .hero__titulo { margin-top: var(--esp-16); font-size: var(--texto-36); line-height: 1.12; }
  .hero__apoyo { margin-top: var(--esp-16); }
  .hero__acciones { margin-top: var(--esp-32); }
  .vitrina { aspect-ratio: 1 / 1; max-width: none; }
  .vitrina__pieza--1 { width: 70%; top: 4%; }
  .vitrina__pieza--2 { width: 44%; bottom: 2%; }
  .vitrina__pieza--3 { left: 50%; bottom: 6%; width: 26%; }
  .vitrina__nota { top: 12%; max-width: 56%; padding: 12px 18px 12px 12px; grid-template-columns: 44px auto; column-gap: 12px; }
  .vitrina__nota-icono { width: 44px; height: 44px; border-radius: 12px; }
  .vitrina__nota-icono .icono { width: 26px; height: 26px; }
  .garantias { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--esp-48); }
}
@media (min-width: 1200px) { .hero__titulo { margin-top: var(--esp-24); font-size: var(--texto-48); } }

/* === Categorías del inicio (las 6 líneas) === */
.categorias { display: grid; gap: var(--esp-12); list-style: none; }
.categoria { display: grid; grid-template-columns: 80px minmax(0, 1fr) 24px; align-items: center; gap: var(--esp-16); min-height: 104px; padding: var(--esp-12) var(--esp-16) var(--esp-12) var(--esp-12); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); color: var(--color-texto); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.categoria__foto { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--azul-50); }
.categoria__foto img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.categoria__nombre { display: block; color: var(--azul-oscuro); font-family: var(--fuente-titulos); font-size: var(--texto-18); font-weight: 600; line-height: 1.25; }
.categoria__apoyo { display: block; margin-top: 2px; color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.4; }
.categoria__ver { display: none; }
.categoria > .icono { color: var(--color-icono); }
@media (hover: hover) {
  .categoria:hover { transform: translateY(-2px); box-shadow: var(--sombra-elevada); }
  .categoria:hover .categoria__foto img { transform: scale(1.05); }
  .categoria:hover .categoria__nombre { color: var(--azul); }
}
@media (min-width: 768px) { .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16); } }
@media (min-width: 981px) {
  .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); }
  .categoria { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; align-items: start; gap: 0; padding: var(--esp-12) var(--esp-12) var(--esp-24); }
  .categoria__foto { width: 100%; height: 200px; margin-bottom: var(--esp-24); border-radius: 10px; }
  .categoria__foto img { width: auto; height: 82%; }
  .categoria > span:not(.categoria__foto) { padding-inline: var(--esp-12); }
  .categoria__nombre { font-size: var(--texto-20); }
  .categoria > .icono { display: none; }
  .categoria__ver { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--esp-16); padding-inline: var(--esp-12); color: var(--azul); font-weight: var(--peso-semi); }
  .categoria__ver .icono { width: 20px; height: 20px; }
}

/* === Destacados del inicio === */
/* Móvil: 4 equipos (la lista larga cansa); desde 768 px, los 8 */
@media (max-width: 767px) { .grilla-productos--inicio > li:nth-child(n+5) { display: none; } }

/* === Soluciones por especialidad (inicio) === */
.soluciones { display: grid; gap: var(--esp-12); list-style: none; }
.solucion { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: var(--esp-4) var(--esp-16); height: 100%; padding: var(--esp-16); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: inset 0 0 0 1px var(--color-borde); color: var(--color-texto); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.solucion__icono { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--azul-50); color: var(--azul); }
.solucion__icono .icono { width: 26px; height: 26px; }
.solucion__nombre { color: var(--azul-oscuro); font-family: var(--fuente-titulos); font-size: var(--texto-18); font-weight: 600; line-height: 1.3; }
.solucion__equipos { color: var(--color-texto-2); line-height: 1.45; }
.solucion__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--esp-8); color: var(--azul); font-weight: var(--peso-semi); }
.solucion__ir .icono { width: 20px; height: 20px; }
.solucion__ir .icono--wa { color: #128C7E; }
@media (hover: hover) {
  .solucion:hover { box-shadow: inset 0 0 0 2px var(--azul), var(--sombra-tarjeta); }
  .solucion:hover .solucion__icono { background: var(--azul); color: #FFFFFF; }
}
@media (min-width: 768px) { .soluciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16); } }
@media (min-width: 981px) {
  .soluciones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-24); }
  .solucion { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding: var(--esp-24); }
  .solucion__icono { grid-row: auto; margin-bottom: var(--esp-12); }
  .solucion__ir { margin-top: var(--esp-16); }
}

/* === Solución por especialidad (solucion.html) === */
/* Misma dirección de arte que el inicio: hero azul con la vitrina de equipos reales.
   Móvil: migas, H1 corto (✂), frase, insignias y CTA sin scroll a 360 × 640; la vitrina debajo. */
.migas.migas--claro { padding-block: 0 var(--esp-8); color: var(--azul-texto-claro); }
.migas.migas--claro a { color: var(--azul-texto-claro); }
.migas.migas--claro a:hover { color: #FFFFFF; }
.migas.migas--claro li + li::before { color: rgba(255, 255, 255, .45); }
.migas.migas--claro [aria-current] { color: #FFFFFF; }
.hero--solucion { padding-top: var(--esp-16); }
.hero--solucion .hero__titulo { margin-top: var(--esp-4); font-size: var(--texto-26); }
.hero--solucion .hero__apoyo { margin-top: var(--esp-12); }
.hero__insignias { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-top: var(--esp-16); list-style: none; }
.hero__insignias li { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 12px 2px 8px; border-radius: var(--radio-pildora); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #FFFFFF; font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.2; }
.hero__insignias .icono { width: 16px; height: 16px; color: var(--turquesa-claro); stroke-width: 3; }
.hero--solucion .hero__acciones { margin-top: var(--esp-16); }
.hero--solucion .hero__acciones { gap: var(--esp-8); }
.hero--solucion .hero__acciones .enlace { justify-self: start; align-items: flex-start; gap: var(--esp-8); text-align: left; }
.hero--solucion .hero__acciones .enlace .icono { margin-top: 2px; }
.hero--solucion .hero__micro { text-align: left; }
.intro__grid, .publico__grid { display: grid; gap: var(--esp-24); }
.intro__texto { display: grid; gap: var(--esp-16); max-width: 40rem; color: var(--color-texto-2); font-size: var(--texto-18); }
.intro__texto a, .preguntas a { color: var(--azul); font-weight: var(--peso-semi); text-underline-offset: 3px; }
.publico__texto { max-width: 40rem; color: var(--color-texto-2); font-size: var(--texto-18); }
.publico__columnas { display: grid; gap: var(--esp-12); list-style: none; }
.publico__columnas .razon { box-shadow: inset 0 0 0 1px var(--color-borde); }
/* Móvil: el botón antes que las insignias, para que se vea completo a 360 × 640 (el H1 ya dice «con respaldo Invima») */
@media (max-width: 767px) {
  .hero--solucion .hero__texto { display: flex; flex-direction: column; }
  .hero--solucion .hero__insignias { order: 1; }
  .hero--solucion .hero__micro { order: 2; }
}
@media (min-width: 390px) { .hero--solucion .hero__titulo { font-size: var(--texto-30); } }
@media (min-width: 768px) {
  .hero--solucion { padding-top: var(--esp-24); }
  .hero--solucion .hero__titulo { margin-top: var(--esp-8); font-size: var(--texto-36); }
  .hero__insignias li { font-size: var(--texto-16); min-height: 36px; }
  .publico__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16); }
}
@media (min-width: 981px) {
  .hero--solucion { padding-bottom: var(--esp-64); }
  .hero--solucion .hero__titulo { font-size: var(--texto-36); }
  .intro__grid, .publico__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-64); align-items: start; }
  .soluciones--tipos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .soluciones--otras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .hero--solucion .hero__titulo { font-size: 2.625rem; } }
/* La banda final propia reemplaza al cierre del pie */
body[data-pagina="solucion"] .cierre-envoltura--pie { display: none; }

/* === Por qué Sibiomec & Santana (inicio) === */
.porque__grid { display: grid; gap: var(--esp-32); }
.razones { display: grid; gap: var(--esp-12); list-style: none; }
.razon { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--esp-16); align-items: start; padding: var(--esp-24) var(--esp-16); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: var(--sombra-tarjeta); }
.razon__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--turquesa-50); color: var(--turquesa-texto); }
.razon__icono .icono { width: 26px; height: 26px; }
.razon h3 { color: var(--azul-oscuro); font-size: var(--texto-18); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.razon p { margin-top: var(--esp-8); color: var(--color-texto-2); }
.razon--destacada { box-shadow: inset 4px 0 0 var(--turquesa), var(--sombra-tarjeta); }
@media (min-width: 768px) {
  .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-16); }
  .razon { grid-template-columns: 1fr; gap: var(--esp-16); padding: var(--esp-24); }
  .razon--destacada { grid-column: 1 / -1; grid-template-columns: 48px minmax(0, 1fr); }
}
@media (min-width: 981px) {
  .porque__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-64); align-items: start; }
  .porque__intro { position: sticky; top: calc(var(--alto-encabezado) + 32px); }
  .razon h3 { font-size: var(--texto-20); }
}

/* === Marcas (inicio) === */
.marcas { display: flex; flex-wrap: wrap; gap: var(--esp-8); list-style: none; }
.marcas li { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 52px; padding: 8px 18px; border-radius: 10px; background: var(--color-superficie); box-shadow: inset 0 0 0 1px var(--color-borde); color: #4E5157; font-family: var(--fuente-titulos); font-size: var(--texto-18); font-weight: 700; letter-spacing: .02em; }
.marcas__nota { margin-top: var(--esp-24); max-width: 44rem; color: var(--color-texto-2); }
@media (min-width: 981px) { .marcas { gap: var(--esp-12); } .marcas li { min-width: 120px; min-height: 64px; font-size: var(--texto-20); } }

/* === Cobertura (inicio) === */
.cobertura__grid { display: grid; gap: var(--esp-32); }
.cobertura__bloques { display: grid; gap: var(--esp-24); margin-top: var(--esp-32); }
.cobertura__bloque { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-16); }
.cobertura__bloque .icono { width: 28px; height: 28px; margin-top: 2px; color: var(--color-icono); }
.cobertura__bloque h3 { color: var(--azul-oscuro); font-size: var(--texto-18); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.cobertura__bloque p { margin-top: var(--esp-8); color: var(--color-texto-2); }
/* Tarjeta de regiones: Barranquilla al centro y los departamentos del Caribe */
.regiones { position: relative; overflow: hidden; display: grid; gap: var(--esp-16); align-content: start; padding: var(--esp-24); border-radius: var(--radio-marco); background: var(--azul-oscuro); color: #FFFFFF; }
.regiones::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 18px; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' fill='none' stroke='%2300CCC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 30h150l8-12 10 26 14-42 12 30h206'/%3E%3C/svg%3E") no-repeat center / 100% 100%; opacity: .35; pointer-events: none; }
.regiones__base { display: flex; align-items: center; gap: var(--esp-12); font-family: var(--fuente-titulos); font-size: var(--texto-20); font-weight: 600; line-height: 1.25; }
.regiones__base .icono { width: 32px; height: 32px; color: var(--ambar); }
.regiones__base small { display: block; color: var(--azul-texto-claro); font-family: var(--fuente-texto); font-size: var(--texto-16); font-weight: 400; }
.regiones ul { display: flex; flex-wrap: wrap; gap: var(--esp-8); padding-bottom: var(--esp-48); list-style: none; }
.regiones li { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: var(--radio-pildora); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-weight: var(--peso-semi); }
.regiones li.regiones__pais { background: var(--turquesa-claro); box-shadow: none; color: var(--azul-oscuro); }
@media (min-width: 981px) {
  .cobertura__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-64); align-items: center; }
  .cobertura__bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-32); }
  .regiones { padding: var(--esp-32); }
}

/* === Preguntas frecuentes (inicio) === */
.faq__grid { display: grid; gap: var(--esp-24); }
@media (min-width: 981px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--esp-64); align-items: start; } }

/* === Banda final (inicio) y bloque de cierre de las demás páginas === */
/* Tarjeta blanca montada sobre el borde del pie azul */
.cierre-envoltura { padding-top: var(--esp-48); background: linear-gradient(to bottom, var(--color-superficie) 50%, var(--azul-oscuro) 50%); }
.cierre { position: relative; overflow: hidden; display: grid; gap: var(--esp-24); padding: var(--esp-32) var(--esp-24); background: var(--color-superficie); border-radius: var(--radio-marco); box-shadow: var(--sombra-elevada); }
.cierre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--turquesa) 0%, var(--azul) 100%); }
.cierre h2 { font-size: var(--texto-24); }
.cierre p { margin-top: var(--esp-12); max-width: 40rem; color: var(--color-texto-2); }
.cierre__accion { display: grid; gap: var(--esp-8); justify-items: start; }
.cierre__accion .micro { font-size: var(--texto-16); }
.insignias { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-16); margin-top: var(--esp-16); list-style: none; }
.insignias li { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-oscuro); font-weight: var(--peso-semi); line-height: 1.3; }
.insignias .icono { width: 20px; height: 20px; color: var(--color-icono); }
/* En el inicio la banda final propia reemplaza al cierre del pie */
body[data-pagina="inicio"] .cierre-envoltura--pie { display: none; }
@media (min-width: 768px) { .cierre h2 { font-size: var(--texto-30); } }
@media (min-width: 981px) {
  .cierre-envoltura { padding-top: var(--esp-64); }
  .cierre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-48); padding: var(--esp-48) var(--esp-64); }
  .cierre__accion { justify-items: center; text-align: center; }
}

/* === Pie === */
.pie { padding: var(--esp-48) 0 var(--esp-32); background: var(--azul-oscuro); color: var(--azul-texto-claro); font-size: var(--texto-16); }
.pie__columnas { display: grid; gap: var(--esp-32); }
.pie__logo { display: inline-block; }
.pie__logo img { width: auto; height: 56px; }
.pie__marca p { margin-top: var(--esp-16); max-width: 22rem; }
.pie__redes { display: flex; gap: var(--esp-8); margin-top: var(--esp-16); list-style: none; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.pie__redes a:hover { background: rgba(255, 255, 255, .16); }
.pie__redes .icono { width: 22px; height: 22px; }
.pie__titulo { margin-bottom: var(--esp-8); color: #FFFFFF; font-family: var(--fuente-titulos); font-size: var(--texto-16); font-weight: 600; letter-spacing: 0; }
.pie ul { list-style: none; }
.pie li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--azul-texto-claro); text-decoration: none; }
.pie li a:hover { color: #FFFFFF; text-decoration: underline; }
.pie__contacto li { display: flex; gap: var(--esp-8); padding-block: 8px; line-height: 1.5; }
.pie__contacto li a { min-height: 0; color: #FFFFFF; font-weight: var(--peso-semi); }
.pie__contacto .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--turquesa-claro); }
.pie__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-24); margin-top: var(--esp-32); padding-top: var(--esp-24); border-top: 1px solid var(--color-linea-oscura); font-size: var(--texto-14); }
.pie__legal > span:first-child { width: 100%; }
@media (min-width: 768px) { .pie__legal > span:first-child { width: auto; } }
.pie__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul-texto-claro); }
.pie__legal a:hover { color: #FFFFFF; }
.pie__aviso { width: 100%; color: var(--azul-texto-claro); }
.pie__lista-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-16); }
@media (min-width: 768px) { .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) {
  .pie { padding-top: var(--esp-64); }
  .pie__columnas { grid-template-columns: 1.3fr 1.1fr 1fr 1fr 1.2fr; gap: var(--esp-32); }
  .pie__lista-doble { grid-template-columns: minmax(0, 1fr); }
  .pie__aviso { width: auto; margin-left: auto; }
}
.pie--simple { padding: var(--esp-24) 0; }
.pie--simple .pie__legal { margin-top: 0; padding-top: 0; border: 0; }

/* === Botón flotante de WhatsApp === */
/* Verde por convención (Decisiones). Móvil: solo el ícono; escritorio: «¿Dudas? Escríbenos».
   Sube cuando aparece la barra fija de la ficha o de «Mi cotización». */
.wa-flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-8); width: 56px; height: 56px; border-radius: var(--radio-pildora); background: var(--verde-whatsapp); color: var(--verde-whatsapp-texto); font-family: var(--fuente-titulos); font-weight: 600; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 10px 24px rgba(8, 54, 27, .3); transition: transform .15s, bottom .2s; }
.wa-flotante:hover { transform: translateY(-2px); }
.wa-flotante .icono { width: 28px; height: 28px; }
.wa-flotante__texto { display: none; }
body.con-barra .wa-flotante { bottom: calc(92px + env(safe-area-inset-bottom)); }
/* «Mi cotización» con lista ya trae «Enviar la lista por WhatsApp»: el flotante sobra y lo tapaba */
body:has(.resumen__alternativa) .wa-flotante { display: none; }
@media (min-width: 981px) {
  .wa-flotante { right: 24px; bottom: 24px; width: auto; height: 52px; padding: 0 20px 0 16px; }
  .wa-flotante__texto { display: inline; }
  body.con-barra .wa-flotante { bottom: 24px; }
}

/* === Mini-cotización lateral (mini-carrito) === */
.mini-carrito { position: fixed; inset: 0; z-index: 90; }
.mini-carrito__fondo { position: absolute; inset: 0; background: var(--color-velo); animation: aparecer .2s ease; }
.mini-carrito__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100%); background: var(--color-superficie); box-shadow: var(--sombra-elevada); animation: deslizar .25s ease; }
.mini-carrito__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); padding: var(--esp-12) var(--esp-12) var(--esp-12) var(--esp-24); border-bottom: 1px solid var(--color-borde-suave); }
.mini-carrito__cabeza h2 { font-size: var(--texto-24); }
.mini-carrito__confirmacion { display: flex; gap: var(--esp-8); align-items: flex-start; margin: var(--esp-16) var(--esp-24) 0; padding: var(--esp-12) var(--esp-16); border-radius: 10px; background: var(--color-exito-fondo); color: var(--color-exito); font-weight: var(--peso-semi); line-height: 1.4; }
.mini-carrito__confirmacion .icono { width: 22px; height: 22px; stroke-width: 2.5; }
.mini-carrito__cuerpo { flex: 1; overflow-y: auto; padding: var(--esp-8) var(--esp-24); }
.mini-carrito__pie { display: grid; gap: var(--esp-12); padding: var(--esp-16) var(--esp-24) calc(var(--esp-16) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-borde-suave); background: var(--color-superficie); }
.mini-carrito__subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-12); font-weight: var(--peso-semi); }
.mini-carrito__subtotal strong { font-size: var(--texto-24); }
.mini-carrito__nota { color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.45; }
.mini-carrito__pie .enlace { justify-self: center; }
.mini-carrito__enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-4) var(--esp-16); }
.mini-carrito__enlaces .enlace { min-height: 44px; }
.mini-carrito__vacio { display: grid; justify-items: start; gap: var(--esp-16); padding-block: var(--esp-24); }
.mini-linea { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--esp-12); padding-block: var(--esp-16); border-bottom: 1px solid var(--color-borde-suave); }
.mini-linea:last-child { border-bottom: 0; }
.mini-linea img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.mini-linea__nombre { display: block; font-weight: var(--peso-semi); line-height: 1.3; text-decoration: none; }
.mini-linea__nombre:hover { color: var(--azul); text-decoration: underline; }
.mini-linea__opcion { color: var(--color-texto-2); font-size: var(--texto-16); }
.mini-linea__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-8); margin-top: 2px; }
.mini-linea__fila .enlace { min-height: 44px; min-width: 44px; justify-content: center; font-size: var(--texto-16); }
body.sin-scroll { overflow: hidden; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes deslizar { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* === Migas === */
.migas { padding-block: var(--esp-16); font-size: var(--texto-14); color: var(--color-texto-2); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--color-texto-3); }
.migas a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-texto-2); }
.migas a:hover { color: var(--color-texto); }
.migas [aria-current] { color: var(--color-texto); font-weight: var(--peso-semi); }
.migas--volver { display: none; }
@media (max-width: 767px) {
  .migas { padding-block: var(--esp-8); }
  .migas--ficha { display: none; }
  .migas--volver { display: block; padding-block: var(--esp-8); }
  .migas--volver a { min-height: 40px; gap: 4px; color: var(--color-texto); font-size: var(--texto-16); font-weight: var(--peso-semi); text-decoration: none; }
  .migas--volver .icono { width: 20px; height: 20px; color: var(--color-secundario); }
}

/* === Encabezado de página (catálogo, carrito, información) === */
.cabeza-pagina { padding-bottom: var(--esp-24); }
.cabeza-pagina h1 { font-size: var(--texto-36); }
.cabeza-pagina p { margin-top: var(--esp-8); max-width: 40rem; color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.5; }
.cabeza-pagina p + p { margin-top: var(--esp-4); font-size: var(--texto-16); }
@media (min-width: 981px) { .cabeza-pagina { padding-bottom: var(--esp-32); } .cabeza-pagina h1 { font-size: var(--texto-48); } }

/* === Catálogo: filtros y orden === */
.filtros { display: grid; gap: var(--esp-16); margin-bottom: var(--esp-24); }
.filtros__grupo { display: grid; gap: var(--esp-8); }
.filtros__etiqueta { font-size: var(--texto-16); font-weight: var(--peso-negrita); }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-8); list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--radio-pildora); background: var(--color-superficie); box-shadow: inset 0 0 0 1.5px var(--color-borde); font-weight: var(--peso-semi); line-height: 1.2; text-decoration: none; }
.chip { color: var(--azul-oscuro); }
.chip:hover { background: var(--azul-50); box-shadow: inset 0 0 0 1.5px var(--azul); }
.chip[aria-current="page"] { background: var(--azul-oscuro); color: #FFFFFF; box-shadow: none; }
.filtros__barra { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--esp-12); }
.contador-resultados { color: var(--color-texto-2); font-weight: var(--peso-semi); }
.orden { display: flex; align-items: center; gap: var(--esp-8); }
.orden label { font-size: var(--texto-16); font-weight: var(--peso-negrita); white-space: nowrap; }
.orden select { min-height: 44px; padding-block: 8px; font-size: var(--texto-16); width: auto; }
.sin-resultados { display: grid; justify-items: start; gap: var(--esp-16); padding: var(--esp-32) var(--esp-24); background: var(--color-superficie); border-radius: var(--radio-tarjeta); }
.sin-resultados p { max-width: 40rem; color: var(--color-texto-2); font-size: var(--texto-18); }
.sin-resultados .sin-resultados__titulo { color: var(--color-texto); font-size: var(--texto-20); font-weight: var(--peso-negrita); }
.sin-resultados .categorias { justify-self: stretch; margin-bottom: var(--esp-8); }
/* Categorías sugeridas cuando la búsqueda no encuentra nada: tarjetas horizontales sobre el fondo */
.categorias--compactas .categoria { min-height: 88px; background: var(--color-fondo); box-shadow: none; }
@media (min-width: 768px) { .categorias--compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) {
  .categorias--compactas .categoria { grid-template-columns: 72px minmax(0, 1fr) 24px; grid-template-rows: none; justify-items: stretch; padding: var(--esp-12) var(--esp-16) var(--esp-12) var(--esp-12); }
  .categorias--compactas .categoria__foto { width: 72px; height: 72px; }
}
/* «Todos los productos» agrupado por categoría */
.grilla-productos--grupos { display: block; }
.grilla-productos--grupos > li.grupo { display: block; }
.grupo + .grupo { margin-top: var(--esp-48); }
.grupo__titulo { margin-bottom: var(--esp-16); font-size: var(--texto-24); }
.grupo__titulo a { display: inline-flex; align-items: center; gap: var(--esp-4); min-height: 44px; text-decoration: none; }
.grupo__titulo a:hover { text-decoration: underline; text-decoration-color: var(--color-primario-sombra); text-underline-offset: 4px; }
.grupo__titulo .icono { color: var(--color-secundario); }
@media (min-width: 981px) { .grupo__titulo { font-size: var(--texto-30); margin-bottom: var(--esp-24); } }
.catalogo { padding-bottom: var(--esp-48); }

/* === Catálogo grande: «Ver más» y productos sin foto === */
.ver-mas { display: grid; justify-items: center; gap: var(--esp-12); margin-top: var(--esp-24); text-align: center; }
.ver-mas__cuenta { color: var(--color-texto-2); font-size: var(--texto-16); }
.ver-mas .boton { min-width: 220px; }
.tarjeta--sin-foto .tarjeta__foto img { transform: none !important; }
/* Filtros de la tienda en móvil: una sola fila que se desliza de lado */
@media (max-width: 767px) {
  .filtros .chips { flex-wrap: nowrap; min-width: 0; margin-inline: calc(-1 * var(--margen-lateral)); padding: 0 var(--margen-lateral) var(--esp-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .filtros .chips::-webkit-scrollbar { display: none; }
  .filtros .chips > li { flex: none; }
  .filtros .chip { white-space: nowrap; scroll-snap-align: start; scroll-margin-inline: var(--margen-lateral); }
}
/* Móvil: que el primer producto se vea en la primera pantalla. El contador sube a la fila
   de «Categoría» y «Ordenar por» queda en una sola fila con su selector. */
@media (max-width: 767px) {
  .cabeza-pagina--catalogo { padding-bottom: var(--esp-12); }
  .cabeza-pagina--catalogo h1 { font-size: var(--texto-30); }
  .filtros { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiqueta contador" "chips chips" "orden orden"; gap: var(--esp-8) var(--esp-12); margin-bottom: var(--esp-16); }
  .filtros__grupo, .filtros__barra { display: contents; }
  .filtros__etiqueta { grid-area: etiqueta; align-self: end; }
  .chips { grid-area: chips; }
  .contador-resultados { grid-area: contador; align-self: end; white-space: nowrap; }
  .orden { grid-area: orden; }
}
@media (min-width: 981px) { .filtros { margin-bottom: var(--esp-32); } .catalogo { padding-bottom: var(--esp-64); } }

/* === Formularios === */
.campo { display: grid; gap: 6px; align-content: start; }
.campo > label, .campo__etiqueta { font-weight: var(--peso-semi); line-height: 1.3; }
.opcional { color: var(--color-texto-2); font-weight: var(--peso-normal); }
.ayuda { color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.4; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--color-borde-form); border-radius: var(--radio-campo);
  background: var(--color-superficie); font-size: var(--texto-18); line-height: 1.3;
}
textarea.entrada { min-height: 104px; resize: vertical; }
select.entrada, .orden select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; border: 1.5px solid var(--color-borde-form); border-radius: var(--radio-campo); background-color: var(--color-superficie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2318181B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
}
.orden select { padding-left: 12px; }
.entrada:hover { border-color: var(--color-texto-2); }
.entrada:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 1px; border-color: var(--color-texto); }
.campo--error .entrada { border: 2px solid var(--color-error); background: var(--color-error-fondo); }
.campo__error { display: flex; align-items: flex-start; gap: 6px; color: var(--color-error); font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.4; }
.campo__error .icono { width: 18px; height: 18px; margin-top: 1px; }

/* === Cantidad (− n +) === */
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--color-borde-form); border-radius: var(--radio-campo); background: var(--color-superficie); }
.cantidad__boton { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: none; border-radius: 10px; }
.cantidad__boton:hover { background: var(--color-fondo); }
.cantidad__boton .icono { width: 20px; height: 20px; stroke-width: 2.5; }
.cantidad__boton:disabled { color: var(--color-borde-form); cursor: not-allowed; background: none; }
.cantidad__input { width: 52px; height: 48px; border: 0; background: none; font-size: var(--texto-18); font-weight: var(--peso-negrita); text-align: center; -moz-appearance: textfield; }
.cantidad__input:focus-visible { outline-offset: -3px; }

/* === Avisos (estado) === */
.aviso { display: flex; align-items: flex-start; gap: var(--esp-12); padding: var(--esp-12) var(--esp-16); border-radius: 12px; font-weight: var(--peso-semi); line-height: 1.45; }
.aviso .icono { width: 22px; height: 22px; margin-top: 1px; }
.aviso--exito { background: var(--color-exito-fondo); color: var(--color-exito); }
.aviso--error { background: var(--color-error-fondo); color: var(--color-error); }
.aviso--advertencia { background: var(--color-advertencia-fondo); color: var(--color-advertencia); }
.aviso--info { background: var(--color-superficie); color: var(--color-texto-2); font-weight: var(--peso-normal); box-shadow: inset 0 0 0 1px var(--color-borde); }

/* === Confianza (ficha, carrito y checkout) === */
.confianza { display: grid; gap: var(--esp-12); list-style: none; }
.confianza li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-12); align-items: start; line-height: 1.45; }
.confianza__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-fondo); color: var(--color-secundario); }
.confianza__icono .icono { width: 22px; height: 22px; }
.confianza strong { display: block; }
.confianza span { color: var(--color-texto-2); }
.confianza a { color: var(--color-texto); font-weight: var(--peso-negrita); white-space: nowrap; }
.confianza--compacta li { grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-8); color: var(--color-texto-2); font-size: var(--texto-16); }
.confianza--compacta .icono { width: 20px; height: 20px; color: var(--color-secundario); margin-top: 1px; }

/* === Ficha de producto === */
.ficha { padding-bottom: var(--esp-48); }
.ficha__grid { display: grid; gap: var(--esp-16); }
.campo > .cantidad { justify-self: start; }
.galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-8); padding: var(--esp-12); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.galeria--miniaturas { grid-template-columns: 52px minmax(0, 1fr); }
.galeria__principal { display: grid; place-items: center; }
.galeria__principal img { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-foto); }
@media (min-width: 390px) { .galeria__principal img { max-width: 248px; } }
.galeria__miniaturas { display: flex; flex-direction: column; gap: var(--esp-8); list-style: none; }
.miniatura { display: block; width: 52px; height: 52px; padding: 0; border: 2px solid var(--color-borde-suave); border-radius: 10px; background: var(--color-superficie); overflow: hidden; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura[aria-pressed="true"] { border-color: var(--color-texto); }
.ficha__titulo { font-size: var(--texto-24); line-height: 1.15; }
.ficha__codigo { margin-top: var(--esp-8); color: var(--color-texto-2); font-size: var(--texto-16); }
.ficha__precio { margin-top: var(--esp-8); }
.ficha__precio .precio__valor { font-size: var(--texto-30); }
.ficha__precio .precio__desde { font-size: var(--texto-16); }
.ficha__precio .precio__antes { font-size: var(--texto-18); }
.ahorro { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--radio-pildora); background: var(--color-exito-fondo); color: var(--color-exito); font-size: var(--texto-16); font-weight: var(--peso-negrita); }
.ficha__corta { margin-top: var(--esp-16); color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.55; }
.compra { display: grid; gap: var(--esp-16); margin-top: var(--esp-24); padding: var(--esp-16); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.compra__fila { display: flex; flex-wrap: wrap; align-items: end; gap: var(--esp-12); }
.disponibilidad { display: flex; align-items: flex-start; gap: var(--esp-8); font-weight: var(--peso-semi); line-height: 1.4; }
.disponibilidad .icono { width: 22px; height: 22px; }
.disponibilidad--si { color: var(--color-exito); }
.disponibilidad--no { color: var(--color-advertencia); }
.compra__botones { display: grid; gap: var(--esp-12); }
.compra .confianza { margin-top: var(--esp-8); padding-top: var(--esp-16); border-top: 1px solid var(--color-borde-suave); }
.acordeon { display: grid; gap: var(--esp-12); margin-top: var(--esp-24); }
.acordeon details { background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); min-height: 60px; padding: var(--esp-12) var(--esp-16) var(--esp-12) var(--esp-24); font-size: var(--texto-18); font-weight: var(--peso-negrita); cursor: pointer; list-style: none; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .icono { transition: transform .2s; }
.acordeon details[open] summary .icono { transform: rotate(180deg); }
.acordeon__cuerpo { display: grid; gap: var(--esp-12); padding: 0 var(--esp-24) var(--esp-24); color: var(--color-texto-2); max-width: 44rem; }
.acordeon__cuerpo strong { color: var(--color-texto); }
.relacionados { padding-bottom: var(--esp-48); }
.relacionados h2 { margin-bottom: var(--esp-24); font-size: var(--texto-30); }
.no-encontrado { display: grid; justify-items: start; gap: var(--esp-16); max-width: 36rem; padding-block: var(--esp-48); }
.no-encontrado h1 { font-size: var(--texto-36); }
.no-encontrado p { color: var(--color-texto-2); font-size: var(--texto-18); }
/* Barra fija de compra en móvil */
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); padding: var(--esp-12) var(--margen-lateral) calc(var(--esp-12) + env(safe-area-inset-bottom)); background: var(--color-superficie); box-shadow: var(--sombra-barra); transform: translateY(110%); transition: transform .2s ease; }
.barra-compra--visible { transform: none; }
.barra-compra__precio { display: grid; line-height: 1.2; }
.barra-compra__precio strong { font-size: var(--texto-18); white-space: nowrap; }
.barra-compra__precio span { color: var(--color-texto-2); font-size: var(--texto-16); }
.barra-compra .boton { flex: 1; max-width: 240px; padding-inline: 12px; white-space: nowrap; }
body.con-barra { padding-bottom: 80px; }
/* Ficha sin precio (cotización): línea · marca, «Precio por cotización», sello Invima, ficha técnica y «Se usa en» */
.galeria__principal { position: relative; }
.galeria__sello { position: absolute; left: 0; bottom: 0; }
.galeria__nota { grid-column: 1 / -1; display: flex; gap: var(--esp-8); color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.45; }
.galeria__nota .icono { width: 20px; height: 20px; margin-top: 1px; color: var(--color-icono); }
.galeria__nota a { color: var(--azul); font-weight: var(--peso-semi); }
.ficha__linea { margin-bottom: var(--esp-4); color: var(--turquesa-texto); font-family: var(--fuente-titulos); font-size: var(--texto-14); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.ficha__cotiza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-16); margin-top: var(--esp-12); line-height: 1.3; }
.ficha__cotiza strong { color: var(--azul-oscuro); font-family: var(--fuente-titulos); font-size: var(--texto-20); font-weight: 600; }
.ficha__cotiza span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-texto-2); font-size: var(--texto-16); }
.ficha__cotiza .icono { width: 20px; height: 20px; color: var(--color-icono); }
.compra__nota { margin-top: calc(-1 * var(--esp-4)); color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.45; text-align: center; }
.ficha__pdf { justify-self: start; font-size: var(--texto-16); }
.compra__confianza { padding-top: var(--esp-16); border-top: 1px solid var(--color-borde-suave); }
.compra__confianza a { color: var(--azul); font-weight: var(--peso-semi); white-space: nowrap; }
.ficha__usos { display: grid; gap: var(--esp-8); margin-top: var(--esp-24); }
.ficha__usos-titulo { font-weight: var(--peso-semi); }
.etiquetas-uso { display: flex; flex-wrap: wrap; gap: var(--esp-8); list-style: none; }
.etiquetas-uso li { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: var(--radio-pildora); background: var(--azul-50); color: var(--azul-oscuro); font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.2; }
.etiquetas-uso li:has(> a) { padding: 0; }
.etiquetas-uso a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px; border-radius: inherit; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primario-sombra); }
.etiquetas-uso a:hover { background: var(--azul-100); text-decoration-color: currentColor; }
.lista-check { display: grid; gap: var(--esp-8); list-style: none; }
.lista-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--esp-8); line-height: 1.5; }
.lista-check .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--color-icono); stroke-width: 2.5; }
/* Barra fija de la ficha en modo cotización: «Agregar» + «Cotizar por WhatsApp» */
.barra-compra--cotizar .boton { max-width: none; min-height: 48px; }
.barra-compra--cotizar .barra-compra__agregar { flex: none; padding-inline: 14px; }
.barra-compra--cotizar .barra-compra__cta { flex: 1; }
.barra-compra__largo { display: none; }
@media (min-width: 400px) { .barra-compra__largo { display: inline; } }
@media (min-width: 768px) {
  .ficha__grid { gap: var(--esp-24); }
  .ficha__titulo { font-size: var(--texto-30); }
  .galeria__principal img { max-width: 440px; }
  .galeria--miniaturas { grid-template-columns: 72px minmax(0, 1fr); }
  .miniatura { width: 72px; height: 72px; }
  .compra { padding: var(--esp-24); }
}
@media (min-width: 981px) {
  .ficha__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--esp-48); align-items: start; }
  .galeria { position: sticky; top: calc(var(--alto-encabezado) + 24px); padding: var(--esp-16); }
  .galeria__principal img { max-width: none; }
  .ficha__titulo { font-size: var(--texto-36); }
  .ficha__precio .precio__valor { font-size: var(--texto-36); }
  .barra-compra { display: none; }
  body.con-barra { padding-bottom: 0; }
  .relacionados { padding-bottom: var(--esp-64); }
  .relacionados h2 { font-size: var(--texto-36); margin-bottom: var(--esp-32); }
}

/* === Carrito === */
.carrito { padding-bottom: var(--esp-48); }
.carrito__grid { display: grid; gap: var(--esp-24); align-items: start; }
.carrito__lineas { background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.carrito__columnas { display: none; }
.linea { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "foto info" "controles controles"; gap: var(--esp-12); padding: var(--esp-16); border-bottom: 1px solid var(--color-borde-suave); }
.linea:last-child { border-bottom: 0; }
.linea__foto { grid-area: foto; }
.linea__foto img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.linea__info { grid-area: info; min-width: 0; }
.linea__nombre { display: block; font-weight: var(--peso-negrita); line-height: 1.3; text-decoration: none; }
.linea__nombre:hover { text-decoration: underline; }
.linea__detalle { color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.45; }
.linea__unitario { color: var(--color-texto-2); font-size: var(--texto-16); }
.linea__unitario del { color: var(--color-texto-3); }
.linea__controles { grid-area: controles; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-8) var(--esp-12); }
.linea__total { font-size: var(--texto-18); font-weight: var(--peso-negrita); }
.linea__quitar { font-size: var(--texto-16); }
.linea__precio-col { display: none; }
.carrito__avisos:not(:empty) { margin-bottom: var(--esp-16); }
.resumen { display: grid; gap: var(--esp-16); padding: var(--esp-24); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.resumen h2 { font-size: var(--texto-24); }
.resumen__filas { display: grid; gap: var(--esp-8); }
.resumen__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-16); }
.resumen__fila span:last-child { text-align: right; }
.resumen__fila--nota span:last-child { max-width: 60%; color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.4; }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-16); padding-top: var(--esp-12); border-top: 1px solid var(--color-borde-suave); font-weight: var(--peso-negrita); }
.resumen__total strong { font-size: var(--texto-30); line-height: 1.1; }
.resumen__total small { display: block; color: var(--color-texto-2); font-size: var(--texto-16); font-weight: var(--peso-normal); line-height: 1.4; }
.resumen__alternativa { display: grid; gap: var(--esp-8); padding-top: var(--esp-16); border-top: 1px solid var(--color-borde-suave); }
.resumen__alternativa p { color: var(--color-texto-2); font-weight: var(--peso-semi); text-align: center; }
.carrito__seguir { justify-self: start; }
.carrito-vacio { display: grid; justify-items: start; gap: var(--esp-24); padding: var(--esp-32) var(--esp-24); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.carrito-vacio p { max-width: 32rem; color: var(--color-texto-2); font-size: var(--texto-18); }
.carrito-vacio__botones { display: flex; flex-wrap: wrap; gap: var(--esp-12); }
@media (min-width: 768px) {
  .linea { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "foto info controles"; align-items: center; gap: var(--esp-16); padding: var(--esp-16) var(--esp-24); }
  .linea__foto img { width: 96px; height: 96px; }
  .linea__controles { justify-content: flex-end; flex-wrap: nowrap; gap: var(--esp-24); }
  .linea__total { min-width: 110px; text-align: right; }
}
@media (min-width: 981px) {
  /* «Seguir comprando» va debajo de las líneas; el resumen ocupa la columna derecha entera */
  .carrito__grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; gap: var(--esp-16) var(--esp-32); }
  .carrito__grid > .resumen { grid-column: 2; grid-row: 1 / span 2; }
  .carrito__seguir { grid-column: 1; grid-row: 2; }
  /* Hasta 1199 px la columna de las líneas no da para la tabla: cantidad y total van debajo del nombre */
  .linea { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "foto info" "foto controles"; align-items: start; row-gap: var(--esp-12); }
  .linea__controles { justify-content: space-between; }
  .resumen--fijo { position: sticky; top: calc(var(--alto-encabezado) + 24px); }
}
@media (min-width: 1200px) {
  .carrito__columnas, .linea { grid-template-columns: 96px minmax(0, 1fr) 96px 148px 104px; column-gap: var(--esp-16); }
  .carrito__columnas { display: grid; padding: var(--esp-16) var(--esp-24); border-bottom: 1px solid var(--color-borde-suave); color: var(--color-texto-2); font-size: var(--texto-14); font-weight: var(--peso-negrita); }
  .carrito__columnas span:first-child { grid-column: 1 / 3; }
  .carrito__columnas span:not(:first-child) { text-align: right; }
  .carrito__columnas span:nth-child(3) { text-align: center; }
  .linea { grid-template-areas: none; align-items: center; }
  .linea__foto, .linea__info { grid-area: auto; }
  .linea__unitario { display: none; }
  .linea__precio-col { display: grid; justify-items: end; font-weight: var(--peso-semi); line-height: 1.3; }
  .linea__precio-col del { color: var(--color-texto-3); font-size: var(--texto-16); font-weight: var(--peso-normal); }
  .linea__controles { display: contents; }
  .linea__controles .cantidad { justify-self: center; }
  .linea__total { min-width: 0; }
}

/* «Mi cotización» (config.cotizacion): líneas sin precio y resumen con «Pedir cotización» */
ul.carrito__lineas { list-style: none; }
.linea--cotizacion .linea__detalle { margin-top: 2px; }
.linea__cantidad { display: flex; align-items: center; gap: var(--esp-12); }
.linea__etiqueta { color: var(--color-texto-2); font-size: var(--texto-16); }
.linea--cotizacion .linea__quitar { min-width: 44px; justify-content: center; }
.resumen__cuenta { font-size: var(--texto-18); }
.resumen__cuenta strong { color: var(--azul-oscuro); font-family: var(--fuente-titulos); font-size: var(--texto-24); }
.resumen__nota { display: flex; gap: var(--esp-8); align-items: flex-start; padding: var(--esp-12) var(--esp-16); border-radius: 12px; background: var(--azul-50); color: var(--azul-oscuro); font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.45; }
.resumen__nota .icono { width: 22px; height: 22px; color: var(--color-icono); }
.resumen__ayuda { margin-top: calc(-1 * var(--esp-8)); color: var(--color-texto-2); font-size: var(--texto-16); text-align: center; }
.carrito-vacio__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--azul-50); color: var(--azul); }
.carrito-vacio__icono .icono { width: 32px; height: 32px; }
@media (min-width: 1200px) {
  .linea.linea--cotizacion { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "foto info controles"; }
  .linea--cotizacion .linea__foto { grid-area: foto; }
  .linea--cotizacion .linea__info { grid-area: info; }
  .linea--cotizacion .linea__controles { display: flex; grid-area: controles; gap: var(--esp-24); }
}

/* === Aviso de envío gratis (carrito y checkout; solo con envio.gratisDesde en config.js) === */
.aviso-gratis { display: flex; gap: var(--esp-8); align-items: flex-start; padding: var(--esp-12) var(--esp-16); border-radius: 12px; background: var(--color-fondo); color: var(--color-texto); font-size: var(--texto-16); line-height: 1.45; }
.aviso-gratis .icono { width: 22px; height: 22px; color: var(--color-secundario); }
.aviso-gratis--listo { background: var(--color-exito-fondo); color: var(--color-exito); }
.aviso-gratis--listo .icono { color: var(--color-exito); }
#envio-gratis:empty { display: none; }

/* === Checkout === */
.checkout { padding-bottom: var(--esp-48); }
.checkout__grid { display: grid; gap: var(--esp-24); align-items: start; }
.checkout__principal { display: grid; gap: var(--esp-24); min-width: 0; }
.checkout__form { display: grid; gap: var(--esp-24); }
.bloque-form { display: grid; gap: var(--esp-16); padding: var(--esp-24) var(--esp-16); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); border: 0; margin: 0; min-width: 0; }
.bloque-form legend, .bloque-form h2 { float: left; width: 100%; padding: 0; font-family: var(--fuente-titulos); font-size: var(--texto-24); font-weight: var(--peso-titulo); letter-spacing: -0.02em; line-height: 1.1; }
.bloque-form legend + * { clear: both; }
.campos-2 { display: grid; gap: var(--esp-16); }
.envio-calculo { display: flex; gap: var(--esp-12); align-items: flex-start; padding: var(--esp-16); border-radius: 14px; background: var(--color-fondo); line-height: 1.5; }
.envio-calculo .icono { color: var(--color-secundario); margin-top: 1px; }
.envio-calculo--listo { background: var(--color-exito-fondo); }
.envio-calculo--listo .icono { color: var(--color-exito); }
.opciones-pago { display: grid; gap: var(--esp-12); }
.opcion-pago { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-12); align-items: start; padding: var(--esp-16); border: 1.5px solid var(--color-borde-form); border-radius: 14px; background: var(--color-superficie); cursor: pointer; line-height: 1.45; }
.opcion-pago:hover { border-color: var(--color-texto); }
.opcion-pago:has(input:checked) { border: 2px solid var(--color-texto); background: var(--color-seleccion); padding: 15.5px; }
.opcion-pago input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--color-borde-form); border-radius: 50%; background: var(--color-superficie); display: grid; place-items: center; }
.opcion-pago input:checked { border-color: var(--color-texto); background: radial-gradient(circle, var(--color-texto) 0 5px, var(--color-superficie) 6px); }
.opcion-pago strong { display: block; }
.opcion-pago__desc { display: block; color: var(--color-texto-2); }
.cabeza-pagina--checkout { padding-top: var(--esp-24); }
@media (min-width: 981px) { .cabeza-pagina--checkout { padding-top: var(--esp-48); } }
.grupo-error .opcion-pago { border-color: var(--color-error); }
.nota-prototipo { display: flex; gap: var(--esp-8); color: var(--color-texto-2); font-size: var(--texto-16); }
.nota-prototipo .icono { width: 20px; height: 20px; }
.confirmar { display: grid; gap: var(--esp-16); }
.confirmar__legal { color: var(--color-texto-2); font-size: var(--texto-16); }
.confirmar__legal a { color: var(--color-texto); }
.confirmar__cuentas { display: grid; gap: var(--esp-16); }
.resumen-errores { display: grid; gap: var(--esp-8); padding: var(--esp-16); border-radius: 14px; background: var(--color-error-fondo); color: var(--color-error); border: 2px solid var(--color-error); }
.resumen-errores p { display: flex; gap: var(--esp-8); font-weight: var(--peso-negrita); }
.resumen-errores ul { padding-left: 32px; }
.resumen-errores a { color: var(--color-error); font-weight: var(--peso-semi); }
.pedido-lineas { display: grid; gap: var(--esp-12); list-style: none; }
.pedido-linea { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--esp-12); align-items: center; }
.pedido-linea img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.pedido-linea__nombre { font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.35; }
.pedido-linea__nombre span { display: block; color: var(--color-texto-2); font-weight: var(--peso-normal); }
.pedido-linea__total { font-weight: var(--peso-negrita); white-space: nowrap; }
.resumen-movil { background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.resumen-movil summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); min-height: 60px; padding: var(--esp-12) var(--esp-16); font-weight: var(--peso-negrita); cursor: pointer; list-style: none; }
.resumen-movil summary::-webkit-details-marker { display: none; }
.resumen-movil summary .ver { display: inline-flex; align-items: center; gap: 4px; color: var(--color-texto-2); font-size: var(--texto-16); }
.resumen-movil summary .icono { width: 20px; height: 20px; transition: transform .2s; }
.resumen-movil[open] summary .icono { transform: rotate(180deg); }
.resumen-movil__total { color: var(--color-texto); font-size: var(--texto-20); }
.resumen-movil .resumen { box-shadow: none; padding-top: 0; }
.resumen-lateral { display: none; }
/* «Enviar mi cotización» (config.cotizacion): lista sin precios y datos junto al botón */
.pedido-linea--cotizacion { grid-template-columns: 56px minmax(0, 1fr); }
.pedido-linea__nombre .pedido-linea__cantidad { display: inline; color: var(--azul); font-weight: var(--peso-titulo); white-space: nowrap; }
.confirmar__resumen { font-size: var(--texto-18); }
.confirmar__resumen strong { color: var(--azul-oscuro); }
.confirmar__confianza { margin-top: var(--esp-4); }
.resumen .resumen__cuenta + .pedido-lineas { margin-top: calc(-1 * var(--esp-4)); }

/* --- Pasos de la cotización (✓ Tu lista · 2 Tus datos · 3 Envías en WhatsApp) --- */
.pasos-cotizacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-8); margin-top: var(--esp-16); list-style: none; counter-reset: none; }
.pasos-cotizacion__paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.25; text-align: center; }
.pasos-cotizacion__paso:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 22px); right: calc(-50% + 22px - var(--esp-8)); height: 2px; background: var(--color-borde-suave); }
.pasos-cotizacion__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-borde-form); background: var(--color-superficie); font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); }
.pasos-cotizacion__num .icono { width: 18px; height: 18px; stroke-width: 3; }
.pasos-cotizacion__paso--hecho .pasos-cotizacion__num { border-color: var(--color-exito); background: var(--color-exito); color: #fff; }
.pasos-cotizacion__paso--actual { color: var(--azul-oscuro); font-weight: var(--peso-semi); }
.pasos-cotizacion__paso--actual .pasos-cotizacion__num { border-color: var(--azul); background: var(--azul); color: #fff; }
@media (min-width: 768px) {
  .pasos-cotizacion { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--esp-32); }
  .pasos-cotizacion__paso { flex-direction: row; gap: var(--esp-8); text-align: left; }
  .pasos-cotizacion__paso:not(:last-child)::after { display: none; }
}

/* --- «Es para…»: 3 opciones de un toque (radio) --- */
.grupo-opciones { border: 0; margin: 0; padding: 0; min-width: 0; }
.bloque-form .grupo-opciones legend { float: left; width: 100%; margin-bottom: var(--esp-8); padding: 0; font-family: inherit; font-size: var(--texto-16); font-weight: var(--peso-semi); letter-spacing: 0; line-height: 1.4; }
.grupo-opciones legend + * { clear: both; }
.opciones-comprador { display: grid; gap: var(--esp-8); }
.opcion-comprador { display: flex; align-items: center; gap: var(--esp-12); min-height: 52px; padding: var(--esp-8) var(--esp-16); border: 1.5px solid var(--color-borde-form); border-radius: 10px; background: var(--color-superficie); cursor: pointer; line-height: 1.3; }
.opcion-comprador:hover { border-color: var(--color-texto); }
.opcion-comprador:has(input:checked) { border: 2px solid var(--azul); background: var(--color-seleccion); padding: 7.5px 15.5px; font-weight: var(--peso-semi); }
.opcion-comprador input { flex: none; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--color-borde-form); border-radius: 50%; background: var(--color-superficie); }
.opcion-comprador input:checked { border-color: var(--azul); background: radial-gradient(circle, var(--azul) 0 5px, var(--color-superficie) 6px); }
.opcion-comprador input:focus-visible { outline: 3px solid var(--color-foco, var(--azul-acento)); outline-offset: 2px; }
@media (min-width: 768px) { .opciones-comprador { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Plegable «Datos para la factura (opcional)» --- */
.plegable-factura { border: 1.5px dashed var(--color-borde-form); border-radius: 12px; }
.plegable-factura summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 2px var(--esp-12); align-items: center; min-height: 56px; padding: var(--esp-12) var(--esp-16); cursor: pointer; list-style: none; }
.plegable-factura summary::-webkit-details-marker { display: none; }
.plegable-factura__titulo { font-weight: var(--peso-semi); color: var(--azul); }
.plegable-factura__ayuda { grid-column: 1; color: var(--color-texto-2); font-size: var(--texto-16); line-height: 1.4; }
.plegable-factura summary .icono { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--azul); transition: transform .2s; }
.plegable-factura[open] summary .icono { transform: rotate(180deg); }
.plegable-factura__campos { padding: 0 var(--esp-16) var(--esp-16); }

/* «Enviar mi solicitud por WhatsApp» → «Enviar por WhatsApp» en móvil, para que quepa en una línea */
.solo-768 { display: none; }
@media (min-width: 768px) { .solo-768 { display: inline; } }
.confirmar__ayuda { margin-top: calc(-1 * var(--esp-8)); color: var(--color-texto); font-size: var(--texto-16); line-height: 1.45; text-align: center; }
@media (min-width: 768px) {
  .bloque-form { padding: var(--esp-32); }
  .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos-2 .campo--ancho { grid-column: 1 / -1; }
}
@media (min-width: 981px) {
  .checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--esp-32); }
  .resumen-movil, .confirmar__cuentas { display: none; }
  .resumen-lateral { display: block; position: sticky; top: calc(var(--alto-encabezado) + 24px); }
}

/* === Gracias === */
.gracias { padding-block: var(--esp-24) var(--esp-48); }
.gracias__grid { display: grid; gap: var(--esp-24); align-items: start; }
.gracias__cabeza { display: grid; gap: var(--esp-12); }
.gracias__sello { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primario); color: var(--color-primario-texto); }
.gracias__sello .icono { width: 34px; height: 34px; stroke-width: 3; }
.gracias h1 { font-size: var(--texto-36); }
.gracias__numero { color: var(--color-texto-2); font-size: var(--texto-18); font-weight: var(--peso-semi); }
.gracias__texto { max-width: 36rem; color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.55; }
.gracias__cabeza + .gracias__botones { margin-top: var(--esp-24); }
.gracias .siguientes li::before { background: var(--azul-oscuro); }
.gracias__aviso { margin-top: var(--esp-16); }
.siguientes { margin-top: var(--esp-24); display: grid; gap: var(--esp-16); padding: var(--esp-24); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.siguientes h2 { font-size: var(--texto-24); }
.siguientes ol { display: grid; gap: var(--esp-12); list-style: none; counter-reset: paso; }
.siguientes li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--esp-12); align-items: start; line-height: 1.5; }
.siguientes li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-texto); color: var(--color-texto-claro); font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); }
.gracias__botones { display: grid; gap: var(--esp-12); }
.gracias__entrega { display: grid; gap: var(--esp-4); padding-top: var(--esp-12); border-top: 1px solid var(--color-borde-suave); color: var(--color-texto-2); }
.gracias__entrega strong { color: var(--color-texto); }
@media (min-width: 768px) { .gracias__botones { display: flex; flex-wrap: wrap; } }
@media (min-width: 981px) {
  .gracias { padding-block: var(--esp-48) var(--esp-64); }
  .gracias__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--esp-48); }
  .gracias h1 { font-size: var(--texto-48); }
}

/* === Información === */
.info { padding-bottom: var(--esp-48); }
.indice { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-bottom: var(--esp-32); list-style: none; }
.info__grid { display: grid; gap: var(--esp-24); }
.info__seccion { padding: var(--esp-24) var(--esp-16); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.info__seccion h2 { margin-bottom: var(--esp-16); font-size: var(--texto-30); }
.info__seccion > p, .info__seccion li { max-width: 44rem; color: var(--color-texto-2); }
.info__seccion > p + p { margin-top: var(--esp-12); }
.info__lista { display: grid; gap: var(--esp-12); list-style: none; }
/* Listas que pinta comun.js desde config.js (envíos y formas de pago) */
.info__datos { display: grid; gap: var(--esp-8); padding-left: 20px; }
.info__datos + p { margin-top: var(--esp-16); }
.info__lista + p, .tabla-envios + p { margin-top: var(--esp-16); }
.info__seccion p a, .info__seccion li a { color: var(--color-texto); font-weight: var(--peso-semi); }
.contacto-info__empresa { font-size: var(--texto-18); font-weight: var(--peso-negrita); }
.info__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-12); }
.info__lista .icono { width: 22px; height: 22px; color: var(--color-secundario); margin-top: 1px; }
.info__lista strong { color: var(--color-texto); }
.tabla-envios { width: 100%; border-collapse: collapse; margin-bottom: var(--esp-16); }
.tabla-envios caption { text-align: left; }
.tabla-envios th, .tabla-envios td { padding: var(--esp-12); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-borde-suave); line-height: 1.45; }
.tabla-envios thead th { color: var(--color-texto-2); font-size: var(--texto-14); }
.tabla-envios tbody th { font-weight: var(--peso-negrita); }
.tabla-envios td { color: var(--color-texto-2); }
.tabla-envios td strong { color: var(--color-texto); }
@media (max-width: 767px) {
  .tabla-envios thead { display: none; }
  .tabla-envios tr { display: grid; gap: 4px; padding-block: var(--esp-12); border-bottom: 1px solid var(--color-borde-suave); }
  .tabla-envios th, .tabla-envios td { padding: 0; border: 0; }
  .tabla-envios td::before { content: attr(data-etiqueta) ": "; color: var(--color-texto); font-weight: var(--peso-semi); }
}
.preguntas { display: grid; gap: 0; }
.preguntas details { border-bottom: 1px solid var(--color-borde-suave); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-16); min-height: 60px; padding-block: var(--esp-12); font-size: var(--texto-18); font-weight: var(--peso-negrita); line-height: 1.35; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .icono { color: var(--color-secundario); transition: transform .2s; }
.preguntas details[open] summary .icono { transform: rotate(180deg); }
.preguntas details p { max-width: 44rem; padding-bottom: var(--esp-16); color: var(--color-texto-2); }
/* «Cómo cotizar» en 3 pasos */
.pasos { display: grid; gap: var(--esp-16); max-width: 44rem; list-style: none; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-12); align-items: start; line-height: 1.5; }
.pasos li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-oscuro); color: #FFFFFF; font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); }
.pasos strong { display: block; color: var(--color-texto); }
.pasos li > span { padding-top: 7px; }
.pasos + .boton { margin-top: var(--esp-24); }
@media (min-width: 981px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: var(--esp-32); } .pasos li { grid-template-columns: minmax(0, 1fr); } }
.contacto-info { display: grid; gap: var(--esp-16); }
.contacto-info .boton { justify-self: start; }
@media (min-width: 768px) { .info__seccion { padding: var(--esp-32); } }
@media (min-width: 981px) {
  .info__seccion { padding: var(--esp-48); }
  .info__seccion h2 { font-size: var(--texto-36); margin-bottom: var(--esp-24); }
}