/* ============================================================
   DOS BUEYES · CITEX S.R.L. — Demo de rediseño
   Dirección A · "Fábrica de Confianza"
   Tipografía: Urbanist (600/700/800) + Inter (400/500/600)
   UI 100% redondeada — la insignia circular es la marca
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  /* Paleta */
  --rojo: #E83941;
  --rojo-hover: #C42F37;
  --rojo-btn: #D9323A; /* rojo levemente más profundo: contraste AA en botones con texto blanco */
  --grafito: #23262B;
  --grafito-2: #2E3238;
  --grafito-3: #3A3E45;
  --crudo: #F5F2ED;
  --tinta: #2B3A6D;
  --tinta-2: #39497F;
  --blanco: #FFFFFF;
  --costura: #D9D4CC;
  --verde-campo: #47623F;
  --texto: #23262B;
  --texto-suave: #5A5E66;
  --texto-claro: #C9CCD2;
  --ok: #47623F;

  /* Tipografía */
  --font-titulos: "Urbanist", "Trebuchet MS", sans-serif;
  --font-cuerpo: "Inter", "Segoe UI", Arial, sans-serif;

  /* Radios (todo redondeado, cero esquinas cortadas) */
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-grande: 28px;
  --r-arco: 180px;

  /* Sombras difusas suaves */
  --s-suave: 0 6px 18px rgba(35, 38, 43, 0.07);
  --s-media: 0 12px 32px rgba(35, 38, 43, 0.12);
  --s-flotante: 0 18px 44px rgba(35, 38, 43, 0.18);

  --ancho-max: 1200px;
  --transicion: 0.22s ease;
}

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-titulos);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.18rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--rojo-hover); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

svg { width: 20px; height: 20px; }

/* Iconos de línea (stroke redondeado, como la marca) */
.topbar svg, .trust svg, .servicios svg, .ignifugas-lista svg,
.footer address svg, .buscador svg, .boton-carrito svg,
.flecha svg, .boton-agregar svg, .btn svg, .navbar-acciones svg,
.pasos svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar .topbar-item:first-child svg { fill: none; }

/* WhatsApp (glyph sólido) */
.whatsapp-glyph, .topbar-item[href*="wa.me"] svg,
a[href*="wa.me"] svg > path, .whatsapp-float svg,
.btn-whatsapp-panel svg, .footer a[href*="wa.me"] svg { fill: currentColor; stroke: none; }

.contenedor {
  width: min(var(--ancho-max), 100% - 2.5rem);
  margin-inline: auto;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--font-titulos);
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  transition: top var(--transicion);
}
.skip-link:focus { top: 1rem; color: var(--blanco); }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--rojo); color: var(--blanco); }

/* El anillo tinta desaparece sobre fondos oscuros: ahí el foco es blanco */
.seccion-grafita :focus-visible,
.seccion-tinta :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.topbar :focus-visible {
  outline-color: var(--blanco);
}

/* ---------- Filtros de la grilla ---------- */
.tarjeta-producto.oculta { display: none; }

.estado-filtro {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
  font-weight: 600;
  color: var(--texto);
}
.estado-filtro[hidden] { display: none; }

.estado-filtro button,
.grilla-vacio button {
  font: inherit;
  font-weight: 700;
  color: var(--rojo);
  background: none;
  border: none;
  padding: 0.2em 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.estado-filtro button:hover,
.grilla-vacio button:hover { color: #A6282E; }

.grilla-vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 2rem 1rem;
}

/* Dots indicadores del carrusel de categorías */
.carrusel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.carrusel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--costura);
  transition: transform var(--transicion), background var(--transicion);
}
.carrusel-dot.activo { background: var(--rojo); transform: scale(1.35); }
@media (min-width: 641px) { .carrusel-dots { display: none; } }

/* Errores inline del form mayorista */
.campo-error {
  color: #A6282E;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.35rem 0 0;
}
.form-mayorista input[aria-invalid="true"] {
  border-color: #A6282E;
  background: #FBF1F1;
}

/* Certificación Santista en texto, sin pseudo-sello */
.badge-santista-texto {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}
.badge-santista-texto strong { color: var(--blanco); }

/* ============================================================
   1 · TOPBAR
   ============================================================ */
.topbar {
  background: var(--grafito);
  color: var(--texto-claro);
  font-size: 0.82rem;
  font-weight: 500;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--texto-claro);
  font-weight: 500;
}
.topbar-item:hover { color: var(--blanco); }
.topbar-item svg { width: 16px; height: 16px; flex: none; }
.topbar-centro { margin: 0; }

@media (max-width: 720px) {
  .topbar-centro { display: none; }
  .topbar-inner { justify-content: center; gap: 1.4rem; }
}

/* ============================================================
   2 · NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--costura);
  transition: box-shadow var(--transicion);
}
.navbar.sombra { box-shadow: var(--s-media); }

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.7rem;
}

.logo img { width: 158px; height: auto; }

.nav-principal { margin-left: auto; }
.nav-principal ul {
  display: flex;
  gap: 0.35rem;
}
.nav-principal a {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  transition: background var(--transicion), color var(--transicion);
}
.nav-principal a:hover {
  background: var(--crudo);
  color: var(--rojo-hover);
}

/* Buscador */
.buscador {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--crudo);
  border: 1.5px solid var(--costura);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.3rem 0.25rem 0.95rem;
  min-width: 0;
}
.buscador svg { width: 17px; height: 17px; color: var(--texto-suave); flex: none; }
.buscador input {
  border: none;
  background: transparent;
  font-family: var(--font-cuerpo);
  font-size: 0.9rem;
  color: var(--texto);
  width: 210px;
  padding: 0.3rem 0;
}
.buscador input:focus { outline: none; }
.buscador:focus-within {
  border-color: var(--tinta);
  background: var(--blanco);
}
.buscador button {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--grafito);
  color: var(--blanco);
  padding: 0.42rem 1rem;
  border-radius: var(--r-pill);
  flex: none;
  transition: background var(--transicion);
}
.buscador button:hover { background: var(--rojo-hover); }

/* Acciones navbar */
.navbar-acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.boton-carrito {
  position: relative;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--costura);
  color: var(--texto);
  background: var(--blanco);
  transition: border-color var(--transicion), color var(--transicion);
}
.boton-carrito:hover { border-color: var(--rojo); color: var(--rojo-hover); }
.boton-carrito svg { width: 20px; height: 20px; }
.contador-carrito {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  background: var(--rojo-hover);
  color: var(--blanco);
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--blanco);
}
/* Oculto mientras el pedido está vacío (lo muestra app.js al sumar) */
.contador-carrito.vacio { display: none; }

/* Hamburguesa */
.boton-hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  border-radius: 50%;
  border: 1.5px solid var(--costura);
}
.boton-hamburguesa span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform var(--transicion), opacity var(--transicion);
}
.boton-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.boton-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Panel móvil */
.panel-movil {
  display: none;
  background: var(--blanco);
  border-radius: 0 0 var(--r-card-grande) var(--r-card-grande);
  border-top: 1px solid var(--costura);
  padding: 1.1rem 1.4rem 1.5rem;
  box-shadow: var(--s-media);
}
.panel-movil.abierto { display: block; }
.buscador-movil { margin-bottom: 1rem; }
.buscador-movil input { width: 100%; flex: 1; }
.panel-movil nav ul { display: grid; gap: 0.15rem; }
.panel-movil nav a {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0.65rem 1rem;
  border-radius: 16px;
  color: var(--texto);
}
.panel-movil nav a:hover { background: var(--crudo); color: var(--rojo-hover); }
.btn-whatsapp-panel { margin-top: 0.9rem; justify-content: center; }
.btn-whatsapp-panel svg { width: 18px; height: 18px; }

@media (max-width: 1020px) {
  .buscador { display: none; }
}
@media (max-width: 880px) {
  .nav-principal { display: none; }
  .boton-hamburguesa { display: flex; }
  .navbar-inner { justify-content: space-between; }
  .logo img { width: 138px; }
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-pill);
  transition: background var(--transicion), color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }

.btn-rojo {
  background: var(--rojo-btn);
  color: var(--blanco);
  box-shadow: 0 10px 24px rgba(217, 50, 58, 0.32);
}
.btn-rojo:hover {
  background: var(--rojo-hover);
  color: var(--blanco);
  box-shadow: 0 12px 28px rgba(196, 47, 55, 0.38);
}

.btn-grafito { background: var(--grafito); color: var(--blanco); }
.btn-grafito:hover { background: #15171B; color: var(--blanco); }

.btn-verde { background: var(--verde-campo); color: var(--blanco); }
.btn-verde:hover { background: #375030; color: var(--blanco); }

.btn-blanco { background: var(--blanco); color: var(--tinta); }
.btn-blanco:hover { background: var(--crudo); color: var(--tinta); }

.btn-borde-blanco {
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  color: var(--blanco);
}
.btn-borde-blanco:hover { background: var(--blanco); color: var(--grafito); }

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

/* ============================================================
   3 · HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(120% 130% at 20% 20%, var(--grafito-2) 0%, var(--grafito) 55%, #1B1E22 100%);
  color: var(--blanco);
}
.hero-media {
  position: absolute;
  inset: 0;
  background: var(--grafito); /* fallback mientras exista la foto */
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(27, 30, 34, 0.9) 0%, rgba(27, 30, 34, 0.62) 45%, rgba(27, 30, 34, 0.25) 100%),
    linear-gradient(0deg, rgba(27, 30, 34, 0.75) 0%, rgba(27, 30, 34, 0) 38%);
}
/* Arcos firma: medias circunferencias que remiten al yugo */
.arco {
  position: absolute;
  border: 2.5px solid rgba(255, 255, 255, 0.16);
  border-bottom: none;
  border-radius: 50%;
  pointer-events: none;
}
.arco-1 { width: 520px; height: 520px; right: -140px; bottom: -260px; }
.arco-2 { width: 700px; height: 700px; right: -240px; bottom: -350px; border-color: rgba(232, 57, 65, 0.28); }

.hero-contenido {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 9vw, 7rem);
  max-width: 680px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  padding: 0.4rem 1.2rem 0.4rem 0.5rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-badge img {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--rojo);
  padding: 3px;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #E9EBEE;
  max-width: 34em;
  margin-bottom: 2rem;
}
.hero-sub strong { color: var(--blanco); font-weight: 600; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}
.hero-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-claro);
}
.hero-mini li { display: flex; align-items: center; gap: 0.5rem; }
.hero-mini li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rojo);
  flex: none;
}

/* ============================================================
   Secciones genéricas
   ============================================================ */
.seccion { padding-block: clamp(3.4rem, 7vw, 5.8rem); }
.seccion-cruda { background: var(--crudo); }
.seccion-grafita {
  background: var(--grafito);
  color: var(--blanco);
  border-radius: var(--r-card-grande);
  margin-inline: clamp(0.6rem, 1.6vw, 1.6rem);
}
@media (min-width: 1260px) {
  .seccion-grafita {
    margin-inline: auto;
    max-width: var(--ancho-max); /* alineada al grid de 1200px, sin sobresalir */
  }
}
.seccion-tinta {
  background: var(--tinta);
  color: var(--blanco);
}

.seccion-cabecera {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.seccion-cabecera.alinear-izq {
  text-align: left;
  margin-inline: 0;
}
.kicker {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A6282E; /* rojo oscuro: AA sobre blanco y crudo */
  margin-bottom: 0.6rem;
}
.kicker-claro { color: #FF9BA0; }
.seccion-sub {
  color: var(--texto-suave);
  font-size: 1.02rem;
  margin: 0;
}
.seccion-grafita .seccion-sub,
.seccion-tinta .seccion-sub { color: var(--texto-claro); }

/* ============================================================
   4 · TRUST STRIP
   ============================================================ */
.trust {
  background: var(--crudo);
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--costura);
}
.trust-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}
.trust-grilla li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.icono-circulo {
  flex: none;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanco);
  border: 1.5px solid var(--costura);
  color: var(--rojo);
  box-shadow: var(--s-suave);
}
.icono-circulo svg { width: 24px; height: 24px; }
.icono-tinta { color: var(--tinta); }
.trust-grilla strong {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
}
.trust-grilla small {
  display: block;
  color: var(--texto-suave);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* ============================================================
   5 · CARRUSEL DE CATEGORÍAS
   ============================================================ */
.carrusel-contenedor { position: relative; }

.carrusel {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.4rem 0.2rem 1.2rem;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel li { flex: 0 0 min(72vw, 258px); scroll-snap-align: start; }

.card-cat {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--costura);
  border-radius: var(--r-card-grande);
  overflow: hidden;
  box-shadow: var(--s-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-cat:hover,
.card-cat:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--s-media);
  color: inherit;
}
.card-cat-media {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  background: var(--crudo); /* fondo fallback de la imagen */
  border-radius: calc(var(--r-card-grande) - 6px);
  margin: 6px;
  overflow: hidden;
}
.card-cat-media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.card-cat-info {
  display: block;
  padding: 0.7rem 1.2rem 1.05rem;
}
.card-cat-info strong {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--texto);
}
.card-cat-info small { color: var(--texto-suave); font-size: 0.84rem; }

.flecha {
  position: absolute;
  top: 31%; /* centro óptico de .card-cat-media (aspect 5/4), no de la tarjeta entera */
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanco);
  border: 1.5px solid var(--costura);
  color: var(--texto);
  box-shadow: var(--s-media);
  transition: background var(--transicion), color var(--transicion);
}
.flecha:hover { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
.flecha svg { width: 22px; height: 22px; }
.flecha-prev { left: -10px; }
.flecha-next { right: -10px; }
@media (max-width: 640px) { .flecha { display: none; } }

/* ============================================================
   6 · GRILLA DE PRODUCTOS
   ============================================================ */
.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
  gap: 1.3rem;
}

.tarjeta-producto {
  background: var(--blanco);
  border: 1px solid var(--costura);
  border-radius: var(--r-card);
  padding: 0.75rem 0.9rem 1.1rem;
  box-shadow: var(--s-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--s-media);
}

.producto-foto { display: block; position: relative; color: inherit; }
.producto-media {
  display: block;
  position: relative;
  aspect-ratio: 1;
  background: var(--crudo); /* fallback mientras carga la foto */
  border-radius: calc(var(--r-card) - 6px);
  overflow: hidden;
}
.producto-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.badge-linea {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.32rem 0.8rem;
  border-radius: var(--r-pill);
  color: var(--blanco);
  box-shadow: 0 4px 12px rgba(35, 38, 43, 0.25);
}
.badge-linea.pampero { background: var(--verde-campo); }
.badge-linea.dosbueyes { background: var(--grafito); }

.producto-cuerpo { padding: 0.85rem 0.35rem 0; }
.producto-cuerpo h3 {
  text-transform: uppercase;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.producto-cuerpo h3 a { color: var(--texto); }
.producto-cuerpo h3 a:hover { color: var(--rojo-hover); }

/* Dots de color */
.dots-colores {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--dot);
  border: 2px solid var(--blanco);
  box-shadow: 0 0 0 1.5px rgba(35, 38, 43, 0.45);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.dot:hover { transform: scale(1.12); }
.dot[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--grafito);
  transform: scale(1.08);
}

/* Chips de talle circulares 36px */
.talles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}
.chip-talle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--texto);
  background: var(--crudo);
  border: 1.5px solid var(--costura);
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.chip-talle:hover { border-color: var(--grafito); }
.chip-talle[aria-pressed="true"] {
  background: var(--grafito);
  border-color: var(--grafito);
  color: var(--blanco);
}

.precio {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--rojo);
  margin: 0 0 0.7rem;
}

.producto-accion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-mayorista {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--tinta);
  color: var(--tinta);
  text-align: center;
  transition: background var(--transicion), color var(--transicion);
}
.btn-mayorista:hover {
  background: var(--tinta);
  color: var(--blanco);
}
.boton-agregar {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 8px 18px rgba(232, 57, 65, 0.35);
  transition: background var(--transicion), transform var(--transicion);
}
.boton-agregar:hover { background: var(--rojo-hover); }
.boton-agregar:active { transform: scale(0.92); }
.boton-agregar svg { width: 20px; height: 20px; }

.nota-precios {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.85rem;
  max-width: 560px;
  margin: 2rem auto 0;
}

/* ============================================================
   7 · EDITORIAL DOS LÍNEAS
   ============================================================ */
.split-lineas {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 900px) {
  .split-lineas { grid-template-columns: 1fr 1fr; }
}

.linea {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--costura);
  border-radius: var(--r-card-grande);
  padding: 1.6rem;
  overflow: hidden;
  box-shadow: var(--s-suave);
}
.linea-arco {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  top: -170px; right: -110px;
  pointer-events: none;
}
.linea-trabajo .linea-arco { border: 30px solid rgba(35, 38, 43, 0.07); }
.linea-airelibre .linea-arco { border: 30px solid rgba(71, 98, 63, 0.1); }

.linea-media {
  display: block;
  width: min(230px, 58%);
  aspect-ratio: 1;
  margin: 0 0 1.2rem;
  background: var(--crudo);
  border-radius: var(--r-arco) var(--r-arco) var(--r-card) var(--r-card); /* ARCO */
  overflow: hidden;
  box-shadow: var(--s-suave);
}
.linea-media img { width: 100%; height: 100%; object-fit: cover; }

.linea-tag {
  display: inline-block;
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-pill);
  color: var(--blanco);
  margin-bottom: 0.8rem;
}
.tag-dosbueyes { background: var(--grafito); }
.tag-pampero { background: var(--verde-campo); }

.linea h3 { font-size: 1.5rem; max-width: 12em; }
.linea p { color: var(--texto-suave); max-width: 30em; }

/* Tira de fábrica */
.fabrica-strip {
  margin-top: 1.4rem;
  background: var(--grafito);
  color: var(--blanco);
  border-radius: var(--r-card-grande);
  padding: 1.4rem;
  display: grid;
  gap: 1.3rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .fabrica-strip { grid-template-columns: 132px 1fr auto; padding: 1.6rem 2rem; }
}
.fabrica-media {
  width: 116px; height: 116px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grafito-2);
  border: 3px solid rgba(255, 255, 255, 0.18);
}
.fabrica-media img { width: 100%; height: 100%; object-fit: cover; }
.fabrica-texto h3 { margin-bottom: 0.3rem; font-size: 1.3rem; }
.fabrica-texto p { margin: 0; color: var(--texto-claro); max-width: 46em; }
.fabrica-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  margin: 1rem 0 0;
}
.fabrica-stats li { display: grid; gap: 0.05rem; }
.fabrica-stats strong {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--blanco);
}
.fabrica-stats small {
  color: var(--texto-claro);
  font-size: 0.8rem;
}
.fabrica-stats-nota {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--texto-claro);
  opacity: 0.75;
}
.fabrica-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.4rem 0.55rem 0.55rem;
  justify-self: start;
}
.fabrica-badge img {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--rojo);
  padding: 3px;
}
.fabrica-badge span {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ============================================================
   8 · SERVICIOS
   ============================================================ */
.servicios-layout {
  display: grid;
  gap: 2.4rem;
  align-items: center;
}
@media (min-width: 940px) {
  .servicios-layout { grid-template-columns: 1.1fr 0.9fr; }
}
.servicios-lista { display: grid; gap: 1.1rem; }
.servicios-lista li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--blanco);
  border: 1px solid var(--costura);
  border-radius: var(--r-card);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--s-suave);
}
.servicios-lista .icono-circulo { width: 48px; height: 48px; }
.servicios-lista .icono-circulo svg { width: 21px; height: 21px; }
.servicios-lista h3 { margin-bottom: 0.2rem; font-size: 1.05rem; }
.servicios-lista p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; }

.servicios-media { position: relative; }
/* Marco de foto en arco (media circunferencia) */
.arco-foto {
  display: block;
  position: relative;
  aspect-ratio: 8 / 7;
  background: var(--crudo); /* fallback */
  border-radius: var(--r-arco) var(--r-arco) var(--r-card-grande) var(--r-card-grande);
  overflow: hidden;
  box-shadow: var(--s-media);
}
.seccion-grafita .arco-foto { background: var(--grafito-2); }
.seccion-tinta .arco-foto { background: var(--tinta-2); }
.arco-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pildra-flotante {
  position: absolute;
  right: -6px; bottom: -26px;
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--crudo);
  background: var(--grafito);
  box-shadow: var(--s-flotante);
}
.pildra-flotante img { width: 100%; height: 100%; object-fit: cover; }
.servicios-media { padding-bottom: 26px; }

/* ============================================================
   9 · BORDADO 3 PASOS
   ============================================================ */
.bordado { overflow: hidden; }
.bordado-layout {
  display: grid;
  gap: 2.4rem;
  align-items: center;
}
@media (min-width: 940px) {
  .bordado-layout { grid-template-columns: 1fr 1fr; }
}
.bordado-media .arco-foto { aspect-ratio: 4 / 3.4; }

.pasos { display: grid; gap: 1.2rem; margin-bottom: 1.8rem; }
.pasos li {
  display: flex;
  gap: 1.05rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem;
}
.paso-num {
  flex: none;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(232, 57, 65, 0.4);
}
.pasos h3 { color: var(--blanco); margin-bottom: 0.15rem; font-size: 1.08rem; }
.pasos p { margin: 0; color: var(--texto-claro); font-size: 0.92rem; }

/* ============================================================
   10 · BANNER MAYORISTA
   ============================================================ */
.mayorista-banner {
  position: relative;
  background: var(--grafito);
  color: var(--blanco);
  border-radius: var(--r-card-grande);
  overflow: hidden;
  box-shadow: var(--s-media);
}
.mayorista-fondo {
  position: absolute;
  inset: 0;
  background: var(--grafito);
}
.mayorista-fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.mayorista-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(35, 38, 43, 0.55), rgba(35, 38, 43, 0.92));
  pointer-events: none;
}
.mayorista-contenido {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.2rem;
  padding: clamp(1.6rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .mayorista-contenido { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.mayorista-texto h2 { max-width: 13em; }
.mayorista-texto > p { color: var(--texto-claro); }
.mayorista-beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.mayorista-beneficios li {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-mayorista {
  display: grid;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  padding: 1.4rem;
}
.campo label {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.opcional { color: var(--texto-claro); font-weight: 600; font-size: 0.78rem; }
.campo input,
.campo textarea {
  width: 100%;
  font-family: var(--font-cuerpo);
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--blanco);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.75rem 1.05rem;
  transition: border-color var(--transicion);
}
.campo input::placeholder,
.campo textarea::placeholder { color: #9CA0A8; }
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--rojo); }
.campo textarea { resize: vertical; min-height: 84px; }
.form-nota {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--texto-claro);
}

/* ============================================================
   11 · IGNÍFUGAS
   ============================================================ */
.ignifugas { border-radius: 0; }
.ignifugas-layout {
  display: grid;
  gap: 2.6rem;
  align-items: center;
}
@media (min-width: 940px) {
  .ignifugas-layout { grid-template-columns: 1.05fr 0.95fr; }
}
.ignifugas-sub { color: var(--texto-claro); }
.ignifugas-sub strong { color: var(--blanco); font-weight: 700; }
.ignifugas-lista { display: grid; gap: 0.9rem; margin-bottom: 1.8rem; }
.ignifugas-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.98rem;
}
.ignifugas-lista svg {
  flex: none;
  width: 26px; height: 26px;
  color: #9FB4E8;
  margin-top: 1px;
}
.ignifugas-media { position: relative; }
.ignifugas-media .arco-foto { aspect-ratio: 4 / 3.4; }
.badge-santista {
  position: absolute;
  left: 14px; bottom: -30px;
  z-index: 3;
  width: 132px; height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 50%;
  box-shadow: var(--s-flotante);
  text-align: center;
  padding: 0.6rem;
}
.badge-santista svg { width: 26px; height: 26px; color: var(--rojo); }
.badge-santista strong {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.badge-santista small {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}
.ignifugas-media { padding-bottom: 30px; }

/* ============================================================
   12 · FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--grafito);
  color: var(--texto-claro);
  border-radius: 44px 44px 0 0;
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.footer-sup {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.6rem;
}
@media (min-width: 880px) {
  .footer-sup { grid-template-columns: 1.4fr 0.8fr 0.9fr 1.2fr; }
}
.footer-logo { width: 190px; height: auto; }
.footer-claim {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--blanco);
  margin: 1.1rem 0 0.4rem;
}
.footer-razon { font-size: 0.88rem; max-width: 30em; }
.footer-isotipo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.2rem 0.5rem 0.5rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.82rem;
}
.footer-isotipo img {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--rojo);
  padding: 3px;
}
.footer-col h3 {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: 0.45rem; }
.footer-col a {
  color: var(--texto-claro);
  font-size: 0.92rem;
  transition: color var(--transicion);
}
.footer-col a:hover { color: var(--blanco); }

.footer-contacto address { font-style: normal; }
.footer-contacto p {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.footer-contacto svg {
  flex: none;
  width: 18px; height: 18px;
  color: var(--rojo);
  margin-top: 2px;
}
.footer-contacto a { color: var(--texto-claro); }
.footer-contacto a:hover { color: var(--blanco); }

/* Mapa de ubicación (iframe Google Maps) */
.mapa {
  margin-top: 1.2rem;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--grafito-2);
}
.mapa iframe { display: block; width: 100%; height: 230px; border: 0; }
.mapa-link {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
}
.mapa-link:hover { background: rgba(255, 255, 255, 0.1); }

.footer-inf {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.8rem;
}
.footer-inf p { margin: 0; }

/* ============================================================
   WhatsApp flotante + Toast
   ============================================================ */
.whatsapp-float {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 150;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grafito);
  color: var(--blanco);
  box-shadow: var(--s-flotante);
  transition: background var(--transicion), transform var(--transicion);
}
.whatsapp-float:hover { background: var(--rojo); color: var(--blanco); transform: translateY(-3px); }
.whatsapp-float svg { width: 27px; height: 27px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 140%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--grafito);
  color: var(--blanco);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.5rem;
  box-shadow: var(--s-flotante);
  max-width: min(92vw, 480px);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast.visible { transform: translate(-50%, 0); }
.toast-punto {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rojo);
}
.toast p { margin: 0; font-size: 0.9rem; font-weight: 500; }
/* En mobile, levantar el toast para que no tape el botón WhatsApp flotante */
@media (max-width: 640px) {
  .toast { bottom: 5.5rem; }
}

/* ============================================================
   Ficha de producto (producto.html)
   ============================================================ */
/* Botón "volver" circular en la navbar de la ficha */
.boton-volver {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--costura);
  color: var(--texto);
  background: var(--blanco);
  transition: border-color var(--transicion), color var(--transicion);
}
.boton-volver:hover { border-color: var(--rojo); color: var(--rojo-hover); }

.migas {
  padding-block: 1.1rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.migas ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; }
.migas li:not(:last-child)::after {
  content: "/";
  margin-left: 0.55rem;
  color: var(--costura);
}
.migas a { color: var(--tinta); }
.migas a:hover { color: var(--rojo-hover); }
.migas [aria-current="page"] { color: var(--texto); font-weight: 600; }

.ficha {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 1rem;
}
@media (min-width: 940px) {
  .ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 3rem; }
}

.galeria { display: grid; gap: 0.8rem; }
.galeria-principal {
  display: block;
  aspect-ratio: 1;
  background: var(--crudo);
  border-radius: var(--r-card-grande);
  overflow: hidden;
  box-shadow: var(--s-suave);
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-thumbs {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.thumb {
  width: 76px; height: 76px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--crudo);
  border: 2.5px solid transparent;
  padding: 0;
  transition: border-color var(--transicion);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"], .thumb:hover { border-color: var(--rojo); }

.ficha-info .linea-tag { margin-bottom: 0.6rem; }
.ficha-info h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 0.6rem;
}
.ficha-codigo {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}
.ficha-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 0.4rem;
}
.ficha-precio .precio { font-size: 2rem; margin: 0; }
.ficha-precio small {
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.badge-mayorista {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--crudo);
  border: 1.5px dashed var(--tinta);
  color: var(--tinta);
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  margin-bottom: 1.4rem;
}
.badge-mayorista svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.selector { margin-bottom: 1.3rem; }
.selector-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
}
.selector-encabezado h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.selector-elegido { font-size: 0.85rem; color: var(--texto-suave); }
.selector-elegido strong { color: var(--texto); font-weight: 600; }

.ficha .talles .chip-talle { width: 44px; height: 44px; font-size: 0.82rem; }
.chip-talle[disabled] {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

.guia-talles {
  margin-top: 0.7rem;
  font-size: 0.85rem;
}
.guia-talles summary {
  cursor: pointer;
  color: var(--tinta);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.guia-talles summary:hover { color: var(--rojo-hover); }
.guia-talles table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0.7rem;
  background: var(--crudo);
  border-radius: 16px;
  overflow: hidden;
  font-size: 0.85rem;
}
.guia-talles th, .guia-talles td {
  padding: 0.5rem 0.8rem;
  text-align: left;
}
.guia-talles th {
  font-family: var(--font-titulos);
  font-weight: 700;
  background: var(--grafito);
  color: var(--blanco);
}
.guia-talles tr:nth-child(even) td { background: rgba(217, 212, 204, 0.35); }

.ficha-ctas {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 1.4rem;
}
@media (min-width: 480px) {
  .ficha-ctas { grid-template-columns: 1fr 1fr; }
}
.ficha-ctas .btn { justify-content: center; }

.prestaciones { display: grid; gap: 0.5rem; }
.prestaciones li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--texto);
}
.prestaciones svg {
  flex: none;
  width: 20px; height: 20px;
  color: var(--verde-campo);
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ficha-detalle {
  background: var(--crudo);
  border-radius: var(--r-card-grande);
  padding: 1.5rem;
  max-width: 880px;
  margin-inline: auto;
}
.ficha-detalle h2 { font-size: 1.3rem; }
.ficha-detalle p { color: var(--texto-suave); }
.ficha-detalle ul {
  display: grid;
  gap: 0.45rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
}
.ficha-detalle ul li { display: flex; gap: 0.6rem; }
.ficha-detalle ul li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  margin-top: 0.5rem;
}

.relacionados { padding-block: clamp(2.6rem, 5vw, 4rem); }

/* ============================================================
   Animación respetuosa
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}