/* =====================================================================
   Comercial JFI · prototipo de tienda · estilos.css
   Dirección de arte: opción 3 «Cemento claro» (ver Brief/RESUMEN.md).
   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 de Google Fonts) === */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-800-latin.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-variable-latin.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

/* === Variables === */
:root {
  /* Colores de la opción 3 */
  --color-fondo: #EFEBE4;          /* cemento: fondo de las páginas */
  --color-fondo-hondo: #E5DFD5;    /* cemento más oscuro: alterna secciones */
  --color-superficie: #FFFFFF;     /* encabezado, tarjetas y botones secundarios */
  --color-texto: #17191D;          /* títulos, textos, franja superior y pie */
  --color-texto-2: #4D5159;        /* texto secundario */
  --color-texto-3: #5E626A;        /* texto terciario (precio tachado, notas) */
  --color-texto-claro: #FFFFFF;
  --color-texto-claro-2: #C9CCD1;  /* texto secundario sobre fondo oscuro */
  --color-primario: #FFDA00;       /* botón principal y subrayado del titular */
  --color-primario-hover: #F3C900;
  --color-primario-sombra: #D9B900;
  --color-secundario: #806600;     /* ocre: íconos, antetítulos, presentaciones */
  --color-secundario-hondo: #6B5500; /* ocre para texto sobre el cemento oscuro (contraste AA) */
  --color-oscuro-2: #24262B;
  --color-borde: #DCD6CB;
  --color-borde-suave: #EAE6DF;
  --color-borde-form: #8D929C;
  --color-foco: #806600;
  /* 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;

  /* Tipografía */
  --fuente-titulos: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --fuente-texto: 'Figtree', 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-30: 1.875rem;
  --texto-36: 2.25rem;
  --texto-48: 3rem;
  --texto-60: 3.75rem;
  --peso-normal: 400;
  --peso-semi: 600;
  --peso-negrita: 700;
  --peso-titulo: 800;

  /* Espaciado (escala fija) */
  --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: 14px;
  --radio-boton-tarjeta: 12px;
  --radio-campo: 12px;
  --radio-tarjeta: 20px;
  --radio-foto: 14px;
  --radio-marco: 24px;             /* marco de la foto del hero: 24 px móvil, 32 px escritorio */
  --radio-pildora: 999px;
  --sombra-tarjeta: 0 1px 2px rgba(23, 25, 29, .05), 0 8px 24px rgba(23, 25, 29, .07);
  --sombra-elevada: 0 2px 6px rgba(23, 25, 29, .08), 0 24px 48px rgba(23, 25, 29, .16);
  --sombra-boton-primario: 0 3px 0 var(--color-primario-sombra);

  /* Medidas */
  --ancho-max: 1200px;
  --margen-lateral: 16px;
  --alto-fila-encabezado: 64px;    /* fila del logo */
  --alto-encabezado: 64px;         /* encabezado completo (en escritorio, con la fila de categorías) */
}
@media (min-width: 768px) { :root { --margen-lateral: 24px; } }
@media (min-width: 981px) { :root { --margen-lateral: 32px; --radio-marco: 32px; --alto-fila-encabezado: 64px; --alto-encabezado: 109px; } }

/* === 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-fondo);
  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.02em; line-height: 1.1; text-wrap: balance; }
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; }

/* === 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-size: var(--texto-16); font-weight: var(--peso-negrita); line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .15s, transform .1s, box-shadow .1s;
}
.boton .icono { width: 22px; height: 22px; }
.boton--primario { background: var(--color-primario); color: var(--color-texto); box-shadow: var(--sombra-boton-primario); }
.boton--primario:hover { background: var(--color-primario-hover); }
.boton--primario:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-primario-sombra); }
.boton--secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-texto); }
.boton--secundario:hover { background: var(--color-fondo); }
.boton--oscuro { background: var(--color-texto); color: var(--color-texto-claro); }
.boton--oscuro:hover { background: var(--color-oscuro-2); }
.boton--grande { min-height: 56px; font-size: var(--texto-18); 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(--color-texto); color: var(--color-texto-claro); font-size: var(--texto-16); }
.boton--tarjeta:hover { background: var(--color-oscuro-2); }
.boton--tarjeta .icono { width: 20px; height: 20px; }
.boton--tarjeta-suave { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-texto); }
.boton--tarjeta-suave:hover { background: var(--color-fondo); }
.enlace { display: inline-flex; align-items: center; gap: var(--esp-4); min-height: 44px; padding: 0; border: 0; background: none; font-weight: var(--peso-negrita); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--color-primario-sombra); }
.enlace:hover { text-decoration-color: var(--color-texto); }
.enlace .icono { width: 20px; height: 20px; }
.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 === */
.antetitulo { display: inline-flex; align-items: center; gap: var(--esp-8); color: var(--color-secundario); font-size: var(--texto-14); font-weight: var(--peso-negrita); }
.antetitulo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primario); box-shadow: 0 0 0 2px rgba(255, 218, 0, .35); }
.titulo-seccion { font-size: var(--texto-30); }
.antetitulo + .titulo-seccion { margin-top: var(--esp-12); }
.parrafo-seccion { margin-top: var(--esp-12); max-width: 36rem; color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.55; }
@media (min-width: 981px) { .titulo-seccion { font-size: var(--texto-36); } }
.seccion { padding-block: var(--esp-48); }
@media (min-width: 981px) { .seccion { padding-block: var(--esp-96); } }
.seccion--sin-arriba { padding-top: 0; }
.seccion--sin-abajo { padding-bottom: 0; }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--esp-16); margin-bottom: var(--esp-24); }
@media (min-width: 981px) { .seccion__cabeza { margin-bottom: var(--esp-32); } }
.seccion__pie { margin-top: var(--esp-24); }

/* === Aviso de prototipo === */
.aviso-prototipo { padding: 6px var(--margen-lateral); background: var(--color-fondo-hondo); color: var(--color-texto-2); 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: 12px; background: var(--color-texto); color: #fff; font-weight: 700; }
.saltar:focus { top: 8px; }

/* === Franja superior === */
.franja { background: var(--color-texto); color: var(--color-texto-claro); font-size: var(--texto-14); }
/* Móvil: «Envíos y pagos» (Información) a la izquierda y el WhatsApp a la derecha, en una sola línea.
   Desde 768 px: IVA · «Envíos, pagos y cambios» a la izquierda y el WhatsApp completo a la derecha. */
.franja__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); min-height: 36px; }
.franja__iva { display: none; }
.franja__info { padding-block: 6px; line-height: 1.3; white-space: nowrap; text-underline-offset: 3px; }
.franja__wa { padding-block: 6px; text-decoration: none; line-height: 1.3; text-align: right; white-space: nowrap; }
.franja__wa:hover strong { text-decoration: underline; }
.franja__largo { display: none; }
@media (max-width: 374px) { .franja { font-size: var(--texto-12); } }
@media (min-width: 768px) {
  .franja__iva { display: inline; }
  .franja__info { margin-right: auto; padding-left: var(--esp-24); }
  .franja__largo { display: inline; }
  .franja__corto { display: none; }
}

/* === Encabezado === */
.encabezado { position: sticky; top: 0; z-index: 40; background: var(--color-superficie); box-shadow: 0 1px 0 var(--color-borde-suave); }
/* Móvil: logo + Buscar + Carrito + Menú. El WhatsApp aparece desde 768 px (en móvil está en la franja y en el menú).
   Escritorio: fila 1 con logo, buscador, WhatsApp y carrito; fila 2 con las categorías. */
.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; }
.encabezado__logo img { width: auto; height: 36px; }
.encabezado__acciones { display: flex; align-items: center; gap: var(--esp-4); }
.accion.accion--wa { display: none; }
@media (min-width: 768px) { .accion.accion--wa { display: inline-flex; } }
.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: 12px; background: none; font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.1; text-decoration: none; }
.accion:hover { background: var(--color-fondo); }
.accion .icono { width: 26px; height: 26px; }
.accion__icono { position: relative; display: inline-flex; }
.contador { position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--color-primario); color: var(--color-texto); font-size: var(--texto-12); font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 374px) {
  .encabezado__logo img { height: 32px; }
  .accion { padding-inline: 4px; min-width: 44px; }
}
@media (min-width: 981px) {
  .encabezado__fila { gap: var(--esp-32); }
  .encabezado__logo { margin-right: 0; }
  .encabezado__logo img { height: 48px; }
  .encabezado__acciones { margin-left: auto; gap: var(--esp-8); }
  .accion { flex-direction: row; gap: var(--esp-8); padding: 8px 14px; font-size: var(--texto-16); }
  .accion .icono { width: 24px; height: 24px; }
  .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: 0 16px 32px rgba(23, 25, 29, .16);
  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(--color-texto-2); }
.buscador__caja:focus-within { border-color: var(--color-texto); 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-3); }
.buscador__boton { min-height: 44px; padding: 8px 18px; border-radius: 10px; }
.buscador__sugerencias { margin-top: var(--esp-8); overflow: hidden; border: 1px solid var(--color-borde); border-radius: 14px; 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: 10px; 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(--color-fondo); }
.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); font-weight: var(--peso-negrita); 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(--color-fondo); }
.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: 620px; }
  .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ú === */
/* Categorías primero: las 6 categorías, sin submenús («Información» va en la franja superior y en el pie).
   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 (los 6 nombres completos no caben). */
.menu { display: none; }
.menu__lista { list-style: none; }
.menu__enlace { display: flex; flex-direction: column; justify-content: center; min-height: 44px; 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: 0 16px 32px rgba(23, 25, 29, .16);
  border-top: 1px solid var(--color-borde-suave);
}
.menu--abierto .menu__enlace { min-height: 64px; padding-block: 10px; border-bottom: 1px solid var(--color-borde-suave); }
.menu--abierto .menu__nombre { font-size: var(--texto-18); font-weight: var(--peso-negrita); }
.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(--color-secundario); }
.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: center; gap: var(--esp-4); padding-block: 0; } /* menú de 44 px (antes 52) */
  .menu__largo { display: none; }
  .menu__corto { display: inline; }
  /* Zona de clic de 44 px (la fila entera); la píldora se dibuja 4 px más adentro para que no toque los bordes de la fila */
  .menu__enlace { position: relative; isolation: isolate; padding: 0 14px; border-radius: var(--radio-pildora); white-space: nowrap; }
  .menu__enlace::before { content: ""; position: absolute; z-index: -1; inset: 4px 0; border-radius: var(--radio-pildora); }
  .menu__enlace:hover::before { background: var(--color-fondo); }
  .menu__enlace--activo::before { background: var(--color-fondo); box-shadow: inset 0 0 0 1px var(--color-borde); }
  .menu__wa { display: none; }
}

/* === Encabezado del checkout === */
/* El encabezado del checkout no tiene fila de categorías */
body[data-pagina="checkout"] { --alto-encabezado: var(--alto-fila-encabezado); }
/* Móvil: WhatsApp con ícono y texto, como las acciones del encabezado normal. Desde 768 px: frase completa. */
.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: 12px; font-size: var(--texto-14); font-weight: var(--peso-semi); line-height: 1.1; text-decoration: none; }
.encabezado__ayuda:hover { background: var(--color-fondo); }
.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; font-weight: var(--peso-negrita); 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: var(--color-texto); }
  .encabezado__ayuda strong { color: var(--color-texto); font-weight: var(--peso-negrita); }
  .encabezado__ayuda-largo { display: inline; }
  .encabezado__volver { max-width: none; }
}

/* === 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-negrita); 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; min-height: 28px; padding: 2px 10px; border-radius: var(--radio-pildora); font-size: var(--texto-14); font-weight: var(--peso-negrita); line-height: 1.2; }
.etiqueta--oferta { background: var(--color-texto); color: var(--color-primario); }
.etiqueta--agotado { background: var(--color-superficie); color: var(--color-texto); box-shadow: inset 0 0 0 1.5px var(--color-texto); }

/* === Tarjeta de producto === */
/* Móvil: foto a la izquierda y botón a todo el ancho. Desde 768 px: tarjeta vertical. */
.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(3, minmax(0, 1fr)); gap: var(--esp-16); } }
@media (min-width: 981px) { .grilla-productos { gap: var(--esp-24); } }
@media (min-width: 1200px) { .grilla-productos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tarjeta {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "foto cuerpo" "accion accion";
  gap: var(--esp-12); padding: var(--esp-12);
  background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
}
.tarjeta__foto { grid-area: foto; position: relative; display: block; align-self: start; border-radius: var(--radio-foto); overflow: hidden; background: #fff; }
.tarjeta__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-foto); transition: transform .3s ease; }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.03); }
.tarjeta__foto .etiqueta { position: absolute; top: 6px; left: 6px; min-height: 24px; padding: 1px 8px; font-size: var(--texto-14); }
.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; font-family: var(--fuente-texto); font-size: var(--texto-16); font-weight: var(--peso-negrita); letter-spacing: 0; line-height: 1.3; text-wrap: pretty; }
.tarjeta__nombre a { text-decoration: none; }
.tarjeta__nombre a:hover { text-decoration: underline; }
.tarjeta__opciones { margin-top: 2px; color: var(--color-secundario); font-size: var(--texto-16); font-weight: var(--peso-negrita); }
.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; }
.tarjeta__accion { grid-area: accion; align-self: end; }
.tarjeta--agotado .tarjeta__foto img { opacity: .55; filter: grayscale(.4); }
@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-16); padding: var(--esp-16); }
  .tarjeta__foto .etiqueta { top: 10px; left: 10px; min-height: 28px; padding: 2px 10px; font-size: var(--texto-14); }
  .tarjeta__nombre { font-size: var(--texto-18); }
  .tarjeta__precio .precio__valor { font-size: var(--texto-24); }
}
@media (min-width: 981px) { .tarjeta { padding: var(--esp-24) var(--esp-24) var(--esp-24); border-radius: var(--radio-tarjeta); } }
/* Tarjeta con nombre de marca grande (línea PAFER del inicio) */
.tarjeta--marca .tarjeta__nombre { font-family: var(--fuente-titulos); font-size: var(--texto-20); font-weight: var(--peso-titulo); letter-spacing: -0.02em; line-height: 1.1; }
.tarjeta--marca .tarjeta__linea { order: 2; margin-top: 4px; }
.tarjeta--marca .tarjeta__precio { order: 3; }
.tarjeta--marca .tarjeta__iva { order: 4; }
@media (min-width: 768px) { .tarjeta--marca .tarjeta__nombre { font-size: var(--texto-24); } }

/* === Hero (primera pantalla del inicio) === */
/* Con los cambios de la revisión externa (03/11/2026, a prueba): antetítulo en pastilla amarilla, subrayado en
   «tu ferretería», checks sin círculo, un CTA y un enlace, fila de categorías que se desliza (móvil y tablet),
   foto sin marco ni sombra (a todo el ancho en móvil) y, en escritorio, una franja amarilla recta en el borde
   derecho en lugar del círculo. */
.hero { position: relative; isolation: isolate; overflow: clip; padding: var(--esp-24) 0 var(--esp-48); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-16); }
.hero__grid > * { min-width: 0; } /* la fila de categorías se desliza dentro de su columna, sin ensancharla */
.hero__ante { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radio-pildora); background: var(--color-primario); color: var(--color-texto); font-size: var(--texto-16); font-weight: var(--peso-semi); line-height: 1.3; }
.hero__titulo { margin-top: var(--esp-12); font-size: var(--texto-36); line-height: 1.05; }
.resaltado {
  background: linear-gradient(to bottom, transparent 56%, var(--color-primario) 56%, var(--color-primario) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 2px; margin-inline: -2px;
}
.hero__apoyo { margin-top: var(--esp-16); max-width: 34rem; color: var(--color-texto-2); font-size: var(--texto-18); line-height: 1.5; }
.lista-confianza { display: grid; gap: var(--esp-8); margin-top: var(--esp-16); list-style: none; }
.lista-confianza li { display: flex; align-items: center; gap: var(--esp-12); font-weight: var(--peso-semi); line-height: 1.3; }
.check { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-superficie); color: var(--color-secundario); box-shadow: 0 1px 2px rgba(23, 25, 29, .08); }
.check .icono { width: 16px; height: 16px; stroke-width: 3; }
/* En el hero el check va solo, sin círculo y en negro (el ocre en círculo blanco se veía pálido) */
.hero .check { width: 24px; height: 24px; background: none; box-shadow: none; color: var(--color-texto); }
.hero .check .icono { width: 22px; height: 22px; }
/* Un CTA principal y un enlace secundario: el enlace no compite con el botón */
.hero__acciones { display: grid; justify-items: center; gap: var(--esp-4); margin-top: var(--esp-16); }
.hero__acciones .boton { width: 100%; }
/* Relieve del botón principal: sobre el cemento, el amarillo solo tiene poco borde */
.hero__acciones .boton--primario { box-shadow: var(--sombra-boton-primario), 0 10px 22px rgba(23, 25, 29, .16); }
/* Categorías en móvil y tablet: una fila de pastillas que se desliza de lado (en escritorio están en el menú).
   La última asoma cortada en el borde para que se note que hay más. */
.hero__categorias {
  display: flex; gap: var(--esp-8); margin: var(--esp-8) calc(-1 * var(--margen-lateral)) 0; padding: 0 var(--margen-lateral) var(--esp-4);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.hero__categorias::-webkit-scrollbar { display: none; }
.hero__categorias .chip { flex: none; white-space: nowrap; scroll-snap-align: start; scroll-margin-inline: var(--margen-lateral); }
/* Las otras 2 viñetas de confianza van debajo de la foto, para que la foto suba en móvil */
.hero__confianza-pie { margin-top: 0; }
/* Foto sin marco ni sombra; en móvil, a todo el ancho de la pantalla */
.hero__imagen { margin-inline: calc(-1 * var(--margen-lateral)); }
.marco-foto img { width: 100%; height: auto; }
@media (max-width: 374px) {
  .hero { padding-top: var(--esp-16); }
  .hero__apoyo { font-size: var(--texto-16); }
}
@media (min-width: 768px) {
  .hero { padding: var(--esp-32) 0 var(--esp-64); }
  .hero__grid { gap: var(--esp-32); }
  .hero__titulo { font-size: var(--texto-48); }
  .hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8) var(--esp-24); margin-top: var(--esp-24); }
  .hero__acciones .boton { width: auto; }
  .hero__categorias { margin-top: var(--esp-16); }
  .hero__confianza-pie { display: flex; flex-wrap: wrap; gap: var(--esp-12) var(--esp-32); }
  .hero__iva { display: none; } /* desde 768 px ya lo dice la franja superior */
  .hero__imagen { margin-inline: 0; }
  .marco-foto img { border-radius: var(--radio-marco); }
}
@media (min-width: 981px) {
  /* Arriba 24 px y no 64: compensa la fila de categorías del encabezado para que el titular y el CTA no bajen */
  .hero { padding: var(--esp-24) 0 var(--esp-64); }
  /* 45/55 a favor de la foto; la confianza que sobra va en una fila debajo, a todo el ancho */
  .hero__grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; gap: var(--esp-32) var(--esp-48); }
  .hero__confianza-pie { grid-column: 1 / -1; margin-top: 0; }
  .hero__titulo { font-size: var(--texto-48); line-height: 1.02; }
  .hero__apoyo { margin-top: var(--esp-24); font-size: var(--texto-20); }
  .lista-confianza { margin-top: var(--esp-24); gap: var(--esp-12); }
  .hero__acciones { margin-top: var(--esp-32); }
  .hero__acciones .boton--primario { border-color: var(--color-texto); } /* borde oscuro: se despega del cemento */
  .hero__categorias { display: none; }
  /* Franja amarilla recta, de toda la altura, en el borde derecho; la foto se apoya sobre ella */
  .hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 26%; background: var(--color-primario); }
}

@media (min-width: 1200px) { .hero__titulo { font-size: var(--texto-60); } }

/* === Categorías del inicio === */
.categorias { display: grid; gap: var(--esp-12); list-style: none; }
.categoria { display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: center; gap: var(--esp-16); min-height: 96px; 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); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.categoria:hover { transform: translateY(-2px); box-shadow: var(--sombra-elevada); }
.categoria__foto { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--color-fondo); box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.categoria__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.categoria__nombre { display: block; font-size: var(--texto-18); font-weight: var(--peso-negrita); line-height: 1.25; }
.categoria__apoyo { display: block; margin-top: 2px; color: var(--color-texto-2); font-size: var(--texto-14); line-height: 1.4; }
.categoria .icono { color: var(--color-secundario); }
@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); } /* 6 categorías = 2 filas */
  .categoria { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: start; gap: var(--esp-16); padding: var(--esp-24); }
  .categoria__foto { width: 120px; height: 120px; }
  .categoria__nombre { font-size: var(--texto-20); }
  .categoria__apoyo { font-size: var(--texto-16); }
}

/* === Línea PAFER (inicio) === */
.pafer { background: var(--color-fondo-hondo); }
.pafer .antetitulo { color: var(--color-secundario-hondo); }
.pafer__grid { display: grid; gap: var(--esp-24); }
.pafer__foto { position: relative; isolation: isolate; }
.pafer__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; border-radius: var(--radio-marco); box-shadow: var(--sombra-tarjeta); }
.pafer__foto::after { content: ""; position: absolute; z-index: -1; left: -16px; bottom: -16px; width: 96px; height: 96px; border-radius: 50%; border: 14px solid var(--color-primario); }
.pafer__tarjetas { margin-top: var(--esp-24); }
.pafer__notas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-8) var(--esp-24); margin-top: var(--esp-24); }
.nota-ficha { display: inline-flex; align-items: center; gap: var(--esp-8); color: var(--color-texto-2); }
.nota-ficha .icono { color: var(--color-secundario); }
.nota-ficha a { color: var(--color-texto); font-weight: var(--peso-negrita); }
@media (min-width: 768px) { .pafer__foto img { aspect-ratio: 21 / 9; } }
@media (min-width: 981px) {
  .pafer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--esp-48); align-items: stretch; }
  .pafer__foto img { height: 100%; aspect-ratio: auto; min-height: 520px; object-position: 50% 20%; }
  .pafer__foto::after { left: -32px; bottom: -32px; width: 160px; height: 160px; border-width: 22px; }
  .pafer__contenido { display: flex; flex-direction: column; }
  .pafer__tarjetas { margin-top: var(--esp-32); }
}

/* === Cómo pedir (inicio) === */
.pasos__grid { display: grid; gap: var(--esp-32); }
.pasos { display: grid; gap: var(--esp-16); margin-top: var(--esp-24); list-style: none; counter-reset: paso; }
.paso { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--esp-16); align-items: start; padding: var(--esp-16); background: var(--color-superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-texto); color: var(--color-primario); font-family: var(--fuente-titulos); font-size: var(--texto-24); font-weight: 800; line-height: 1; }
.paso__titulo { font-family: var(--fuente-texto); font-size: var(--texto-18); font-weight: var(--peso-negrita); letter-spacing: 0; line-height: 1.3; }
.paso__texto { margin-top: 4px; color: var(--color-texto-2); }
.pasos__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-marco); box-shadow: var(--sombra-tarjeta); }
@media (min-width: 981px) {
  .pasos__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-64); align-items: center; }
  .pasos__foto { order: -1; }
  .pasos__foto img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
  .paso { padding: var(--esp-24); }
}

/* === Crédito (inicio) === */
.credito { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--esp-24); padding: var(--esp-32) var(--esp-24); border-radius: var(--radio-marco); background: var(--color-texto); color: var(--color-texto-claro); }
.credito::after { content: ""; position: absolute; z-index: -1; right: -48px; top: -48px; width: 124px; height: 124px; border-radius: 50%; border: 20px solid var(--color-primario); }
.credito .titulo-seccion { max-width: 22ch; padding-right: 40px; }
.credito p { max-width: 38rem; margin-top: var(--esp-12); color: var(--color-texto-claro-2); font-size: var(--texto-18); }
@media (min-width: 981px) {
  .credito { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-48); padding: var(--esp-64); }
  .credito::after { right: -64px; top: -112px; width: 232px; height: 232px; border-width: 34px; }
  .credito .titulo-seccion { padding-right: 0; }
  .credito .boton { margin-right: 160px; }
}

/* === Bloque de cierre y pie === */
.cierre-envoltura { padding-top: var(--esp-48); background: linear-gradient(to bottom, var(--color-fondo) 50%, var(--color-texto) 50%); }
.cierre { 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 h2 { font-size: var(--texto-24); }
.cierre p { margin-top: var(--esp-12); max-width: 40rem; color: var(--color-texto-2); }
@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); }
}
.pie { padding: var(--esp-48) 0 var(--esp-32); background: var(--color-texto); color: var(--color-texto-claro-2); font-size: var(--texto-16); }
.pie__columnas { display: grid; gap: var(--esp-32); }
.pie__logo { display: inline-block; }
.pie__logo img { width: auto; height: 44px; }
.pie__marca p { margin-top: var(--esp-16); max-width: 22rem; }
.pie__titulo { margin-bottom: var(--esp-8); color: var(--color-texto-claro); font-family: var(--fuente-texto); font-size: var(--texto-16); font-weight: var(--peso-negrita); letter-spacing: 0; }
.pie ul { list-style: none; }
.pie li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--color-texto-claro-2); text-decoration: none; }
.pie li a:hover { color: var(--color-texto-claro); 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: var(--color-texto-claro); font-weight: var(--peso-semi); }
.pie__contacto .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--color-primario); }
.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 rgba(255, 255, 255, .14); 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(--color-texto-claro-2); }
.pie__legal a:hover { color: var(--color-texto-claro); }
.pie__aviso { width: 100%; color: var(--color-texto-claro-2); }
@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 1fr 1fr 1.3fr; gap: var(--esp-48); }
  .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; }

/* === Mini-carrito lateral === */
.mini-carrito { position: fixed; inset: 0; z-index: 90; }
.mini-carrito__fondo { position: absolute; inset: 0; background: rgba(23, 25, 29, .5); 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: 12px; 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__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: 10px; box-shadow: inset 0 0 0 1px var(--color-borde-suave); }
.mini-linea__nombre { display: block; font-weight: var(--peso-negrita); line-height: 1.3; text-decoration: none; }
.mini-linea__nombre:hover { 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:hover { box-shadow: inset 0 0 0 1.5px var(--color-texto); }
.chip[aria-current="page"] { background: var(--color-texto); color: var(--color-texto-claro); 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 color cemento */
.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, como las categorías del hero */
@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='%2317191D' 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: #fff; 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: 0 -6px 20px rgba(23, 25, 29, .12); 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; }
@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; }
}

/* === 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: 800; 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--metro { background: var(--color-exito-fondo); }
.envio-calculo--metro .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: #FFFCEB; 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: #fff; display: grid; place-items: center; }
.opcion-pago input:checked { border-color: var(--color-texto); background: radial-gradient(circle, var(--color-texto) 0 5px, #fff 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; }
@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); box-shadow: var(--sombra-boton-primario); }
.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__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-primario); font-family: var(--fuente-titulos); font-weight: 800; }
.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; }
.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); }
.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); }
}