/* =============================================================================
   Bartolomé Podestá — Hoja de estilos única
   -----------------------------------------------------------------------------
   Orden:
   01. Variables y tokens
   02. Reset y base
   03. Tipografía y utilidades de layout
   04. Botones
   05. Encabezado y navegación
   06. Hero
   07. Bloques institucionales (franja de datos, beneficios, trayectoria)
   08. Catálogo: filtros y tarjetas
   09. Ficha de producto
   10. Marcas (Sempermed, Harps)
   11. Cotización y formulario
   12. Contacto
   13. Pie de página
   14. Animaciones de aparición
   15. Impresión
   ========================================================================== */

/* == 01. Variables y tokens ================================================ */
:root {
  /* Marca */
  --verde-900: #1B2A1E;
  --verde-800: #253A28;
  --verde-700: #2F4A33;
  --verde-600: #3C5840;
  --verde-500: #557059;
  --verde-200: #C9D8CA;
  --verde-100: #E4EDE4;
  --verde-50:  #F2F7F2;

  /* Acento para llamadas a la acción */
  --acento:      #0B7A5E;
  --acento-oscuro:#08644C;
  --acento-claro: #E6F3EF;

  /* Neutros */
  --tinta:      #1F2421;
  --tinta-80:   #3E4642;
  --tinta-60:   #646D68;
  --tinta-40:   #8F9793;
  --linea:      #E2E6E2;
  --linea-suave:#EDF0ED;
  --hueso:      #FAFBF9;
  --blanco:     #FFFFFF;

  /* Muestras de color de producto (sólo para los puntos del filtro) */
  --sw-celeste: #6FB7E0;
  --sw-violeta: #7A4C9E;
  --sw-negro: #22252A;
  --sw-blanco: #F1F1EC;

  /* Tipografía */
  --f-titulo: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Espacio y formas */
  --ancho: 1200px;
  --ancho-angosto: 760px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  /* Sombras en escala, con tinte verde para que se integren con la paleta
     en lugar de verse como un gris sucio encima del fondo. */
  --sombra-sm: 0 1px 2px rgba(27, 42, 30, .04), 0 1px 3px rgba(27, 42, 30, .06);
  --sombra-md:
    0 1px 2px rgba(27, 42, 30, .04),
    0 6px 16px -4px rgba(27, 42, 30, .08),
    0 12px 28px -8px rgba(27, 42, 30, .06);
  --sombra-lg:
    0 2px 4px rgba(27, 42, 30, .04),
    0 12px 28px -6px rgba(27, 42, 30, .10),
    0 32px 64px -16px rgba(27, 42, 30, .14);
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
  --alto-header: 76px;
  --alto-navbar: 48px;
  /* Alto total de lo que queda fijo arriba al hacer scroll. */
  --alto-barras: calc(var(--alto-header) + var(--alto-navbar));
}

/* == 02. Reset y base ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-barras) + 16px);
  /* Evita el scroll horizontal que generarían el menú móvil y el panel de
     filtros mientras están fuera de pantalla. Se usa "clip" en lugar de
     "hidden" para no romper el encabezado sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta-80);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Recorta el menú móvil y el panel de filtros cuando están fuera de pantalla,
     para que no generen scroll horizontal. Se usa "clip" y no "hidden" porque
     "hidden" rompería el encabezado sticky. */
  overflow-x: clip;
}

body.menu-abierto { overflow: hidden; }

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

/* El atributo hidden tiene que ganarle a cualquier display de componente
   (si no, elementos como el contador de filtros se ven igual con hidden). */
[hidden] { display: none !important; }
a { color: var(--acento-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

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

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--verde-800);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0;
}
.salto-contenido:focus { left: 0; }

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

/* == 03. Tipografía y layout =============================================== */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  color: var(--verde-900);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
}

/* Los títulos grandes van con tracking más cerrado: a ese cuerpo, el espaciado
   por defecto de la serif se ve suelto. */
h1 {
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
  letter-spacing: -.025em;
  line-height: 1.1;
}
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.seccion { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.seccion--hueso { background: var(--hueso); }
.seccion--verde-suave { background: var(--verde-50); }
/* Las secciones oscuras llevan un halo y una trama muy fina, para que el verde
   no se lea como un bloque de color plano. */
.seccion--oscura {
  position: relative;
  background: var(--verde-900);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.seccion--oscura::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(11, 122, 94, .28), transparent 70%),
    radial-gradient(50% 50% at 90% 100%, rgba(85, 112, 89, .22), transparent 70%);
  pointer-events: none;
}
.seccion--oscura > * { position: relative; z-index: 1; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--compacta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.encabezado-seccion { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem); }
.encabezado-seccion--centrado { margin-inline: auto; text-align: center; }

/* Rótulo de sección: una regla corta antes del texto, un recurso clásico de
   pieza institucional que ordena la lectura sin agregar ruido. */
.rotulo {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1rem;
}
.rotulo::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.encabezado-seccion--centrado .rotulo { justify-content: center; }
.seccion--oscura .rotulo { color: var(--verde-200); }

.bajada {
  font-size: 1.0625rem;
  color: var(--tinta-60);
  max-width: 62ch;
}
.seccion--oscura .bajada { color: rgba(255, 255, 255, .72); }

.grilla { display: grid; gap: clamp(1.25rem, .75rem + 1.5vw, 2rem); }
@media (min-width: 640px)  { .grilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grilla--4 { grid-template-columns: repeat(4, 1fr); } }

.nota-placeholder {
  display: block;
  border-left: 3px solid #C9A227;
  background: #FDF9EC;
  color: #6A5312;
  padding: .7rem .9rem;
  font-size: .8125rem;
  line-height: 1.5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* == 04. Botones =========================================================== */
.btn {
  --btn-fondo: var(--acento);
  --btn-texto: #fff;
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  min-height: 48px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--btn-texto);
  background: var(--btn-fondo);
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion),
              box-shadow var(--transicion);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-md); }
.btn:active { transform: none; box-shadow: none; }
.btn svg { flex: none; }

/* El botón principal lleva un brillo interior muy leve en el borde superior:
   lo separa del fondo y le da algo de materialidad. */
.btn--primario {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 2px rgba(27, 42, 30, .16);
}
.btn--primario:hover {
  --btn-fondo: var(--acento-oscuro);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    var(--sombra-md);
}

.btn--secundario {
  --btn-fondo: transparent;
  --btn-texto: var(--verde-800);
  --btn-borde: var(--verde-200);
}
.btn--secundario:hover { --btn-fondo: var(--verde-50); --btn-borde: var(--verde-500); }

.btn--sobre-oscuro {
  --btn-fondo: transparent;
  --btn-texto: #fff;
  --btn-borde: rgba(255, 255, 255, .38);
}
.btn--sobre-oscuro:hover { --btn-fondo: rgba(255, 255, 255, .1); --btn-borde: #fff; }

.btn--wa { --btn-fondo: #1FA855; }
.btn--wa:hover { --btn-fondo: #17843F; }

.btn--bloque { width: 100%; }
.btn--chico { padding: .6rem 1.05rem; min-height: 40px; font-size: .875rem; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--acento-oscuro);
}
.enlace-flecha svg { transition: transform var(--transicion); }
.enlace-flecha:hover { text-decoration: none; }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* == 05. Encabezado y navegación =========================================== */

/* -- Barra superior: datos de contacto siempre a mano ---------------------- */
.barra-superior {
  background: var(--verde-900);
  color: rgba(255, 255, 255, .72);
  font-size: .8125rem;
}
.barra-superior__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 38px;
}
.barra-superior__datos { display: flex; align-items: center; gap: 1.5rem; }
.barra-superior a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255, 255, 255, .85);
}
.barra-superior a:hover { color: #fff; text-decoration: none; }
.barra-superior svg { flex: none; opacity: .7; }
.barra-superior__horario { white-space: nowrap; }
@media (max-width: 860px) {
  .barra-superior__horario { display: none; }
  .barra-superior__datos { gap: 1rem; font-size: .75rem; }
}
@media (max-width: 520px) {
  .barra-superior__datos a:nth-child(2) { display: none; }
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea-suave);
  transition: box-shadow var(--transicion);
}
.header.esta-fijo { box-shadow: var(--sombra-sm); }

.header__interior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--alto-header);
}

/* -- Buscador del encabezado ---------------------------------------------- */
.buscador {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
}
.buscador input {
  width: 100%;
  font: inherit;
  font-size: .9375rem;
  padding: .7rem 3rem .7rem 1rem;
  color: var(--tinta);
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 100px;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.buscador input::placeholder { color: var(--tinta-40); }
.buscador input:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-claro);
}
.buscador button {
  position: absolute;
  top: 4px; right: 4px; bottom: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--transicion);
}
.buscador button:hover { background: var(--acento-oscuro); }

.header__acciones { display: flex; align-items: center; gap: .55rem; flex: none; }

@media (max-width: 1024px) {
  .header__interior { gap: .75rem; }
  .header__acciones { display: none; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; margin: 0 0 .9rem; }
  .header__interior { flex-wrap: wrap; padding-top: .9rem; }
}

.marca { display: inline-flex; align-items: center; gap: .7rem; }
.marca:hover { text-decoration: none; }
.marca img { width: 44px; height: 44px; border-radius: 50%; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre {
  font-family: var(--f-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--verde-900);
  letter-spacing: -.01em;
}
.marca__rubro {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

/* -- Barra de navegación: franja propia bajo el encabezado ----------------- */
.navbar {
  position: sticky;
  top: var(--alto-header);
  z-index: 98;
  background: var(--verde-800);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.navbar__interior { display: flex; align-items: center; gap: .15rem; }

.navbar__enlace {
  position: relative;
  padding: .95rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  transition: color var(--transicion), background var(--transicion);
}
.navbar__enlace:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.navbar__enlace[aria-current="page"] { color: #fff; font-weight: 600; }
/* Subrayado del ítem activo, dibujado sobre el borde inferior de la barra. */
.navbar__enlace[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: -1px;
  height: 2px;
  background: var(--verde-200);
  border-radius: 2px;
}
.navbar__acciones { display: none; }

.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  cursor: pointer;
}
.menu-boton span {
  position: relative;
  display: block;
  width: 19px; height: 1.5px;
  background: var(--verde-900);
  transition: transform var(--transicion), background var(--transicion);
}
.menu-boton span::before,
.menu-boton span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 1.5px;
  background: var(--verde-900);
  transition: transform var(--transicion), top var(--transicion);
}
.menu-boton span::before { top: -6px; }
.menu-boton span::after { top: 6px; }
.menu-boton[aria-expanded="true"] span { background: transparent; }
.menu-boton[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* En mobile la barra de navegación se convierte en el panel desplegable que
   abre el botón de menú. */
@media (max-width: 1024px) {
  .menu-boton { display: inline-flex; }
  .navbar {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    z-index: 130;
    background: var(--verde-900);
    border: 0;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transicion), visibility var(--transicion);
    box-shadow: -18px 0 45px rgba(27, 42, 30, .28);
  }
  .navbar.esta-abierto { transform: none; visibility: visible; }
  .navbar__interior {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--alto-header) + 1rem) 1.5rem 2.5rem;
  }
  .navbar__enlace {
    padding: 1rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .navbar__enlace:hover { background: none; }
  .navbar__enlace[aria-current="page"]::after { display: none; }
  .navbar__acciones { display: grid; gap: .6rem; margin-top: 1.75rem; }
}

/* -- Franja de credenciales ------------------------------------------------
   Va debajo de la navegación y antes del catálogo: dice quiénes somos en una
   línea, sin robarle lugar al producto. */
.credenciales {
  background: var(--verde-50);
  border-bottom: 1px solid var(--verde-100);
}
/* Grilla y no flex-wrap: las cuatro credenciales suman más que el ancho máximo
   del contenedor, así que con wrap quedaba una huérfana en la segunda fila.
   En grilla 2x2 las filas quedan parejas en cualquier ancho. */
.credenciales__interior {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: .4rem 1.75rem;
  padding-block: .7rem;
}
@media (min-width: 821px) {
  .credenciales__interior { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.credenciales__item {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--tinta-60);
}
.credenciales__item svg { flex: none; color: var(--verde-500); }
.credenciales__item strong { color: var(--verde-800); font-weight: 600; }
.credenciales__item--destacado { color: var(--verde-800); }
.credenciales__item--destacado svg { color: var(--acento); }

/* En pantallas chicas se muestra sólo la credencial principal: las otras tres
   ocuparían media pantalla antes de llegar al catálogo. */
@media (max-width: 820px) {
  .credenciales__item:not(.credenciales__item--destacado) { display: none; }
  .credenciales__interior { padding-block: .7rem; }
}

/* == 06. Hero ============================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--verde-50) 0%, var(--blanco) 100%);
  border-bottom: 1px solid var(--linea-suave);
  overflow: hidden;
}
/* Halo verde muy suave detrás del hero: da profundidad sin verse como un
   degradado decorativo. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 120%;
  background: radial-gradient(closest-side, rgba(11, 122, 94, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__interior { position: relative; z-index: 1; }
.hero__interior {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  /* padding-block y no el atajo "padding": el atajo pisaría el padding
     lateral que aporta .contenedor y el texto quedaría pegado al borde. */
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__interior { grid-template-columns: 1.05fr .95fr; }
}

.hero__insignias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.hero__insignia {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .8rem .32rem .6rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--verde-100);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--verde-700);
  box-shadow: var(--sombra-sm);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}
/* Dentro del grupo, el margen inferior lo pone el contenedor. */
.hero__insignias .hero__insignia { margin-bottom: 0; }
.hero__insignia::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 3px rgba(11, 122, 94, .13);
}

.hero h1 { color: var(--verde-900); margin-bottom: .75rem; }
.hero__subtitulo {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--verde-700);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.hero__texto { color: var(--tinta-60); max-width: 54ch; margin-bottom: 2rem; }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- Composición visual del hero -------------------------------------------
   Una vitrina principal con producto real, una segunda tarjeta desplazada que
   sólo aparece en pantallas grandes, y el sello de la empresa superpuesto. */
.hero__visual {
  position: relative;
  isolation: isolate;
}

.hero__vitrina {
  position: relative;
  margin: 0;
  padding: clamp(1.25rem, .75rem + 2vw, 2.25rem);
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--verde-50) 100%);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}
/* Brillo sutil en el borde superior, para que no se vea plana. */
.hero__vitrina::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  pointer-events: none;
}
.hero__vitrina img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(27, 42, 30, .14));
}

/* Se alinea al borde derecho de la columna, no a la ventana: así queda a la
   misma distancia del borde que el resto del contenido en cualquier ancho,
   en lugar de acercarse al filo cuando el contenedor llega a su máximo. */
.hero__vitrina--flotante {
  display: none;
  position: absolute;
  right: 0;
  bottom: -13%;
  width: 46%;
  padding: 1rem;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  z-index: 2;
}
@media (min-width: 1100px) { .hero__vitrina--flotante { display: block; } }

.hero__sello {
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 8px;
  background: var(--blanco);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(27, 42, 30, .16);
}
.hero__sello img { width: 100%; border-radius: 50%; }
@media (max-width: 640px) {
  .hero__sello { width: 66px; height: 66px; top: -14px; left: -10px; }
}

/* Franja de datos bajo el hero */
.franja-datos {
  border-top: 1px solid var(--linea-suave);
  background: var(--blanco);
}
.franja-datos__lista {
  display: grid;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .franja-datos__lista { grid-template-columns: repeat(4, 1fr); } }
.franja-datos__item {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--linea-suave);
}
@media (min-width: 720px) {
  .franja-datos__item { border-bottom: 0; border-left: 1px solid var(--linea-suave); text-align: center; }
  .franja-datos__item:first-child { border-left: 0; }
}
.franja-datos__dato {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--f-titulo);
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight: 600;
  color: var(--verde-800);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.franja-datos__texto {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--tinta-60);
  display: block;
  max-width: 24ch;
}
@media (min-width: 720px) { .franja-datos__texto { margin-inline: auto; } }

/* == 07. Bloques institucionales =========================================== */
.tarjeta-beneficio {
  padding: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-beneficio:hover {
  border-color: var(--verde-200);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}
.tarjeta-beneficio__icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--r-md);
  color: var(--verde-700);
}
.tarjeta-beneficio h3 { margin-bottom: .4rem; font-size: 1.0625rem; }
.tarjeta-beneficio p { font-size: .9375rem; color: var(--tinta-60); margin: 0; }

.bloque-partido {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .bloque-partido { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bloque-partido--imagen-izq > :first-child { order: 2; } }

.bloque-partido__figura img {
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-md);
  background: var(--hueso);
}

.lista-chequeo { margin: 0 0 1.75rem; padding: 0; list-style: none; }
.lista-chequeo li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .85rem;
  color: var(--tinta-80);
}
.lista-chequeo li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--acento-claro) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A5E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.seccion--oscura .lista-chequeo li { color: rgba(255, 255, 255, .8); }

/* -- Pasos numerados (Cómo comprar) ---------------------------------------- */
.pasos {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 640px)  { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.pasos__item {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}
.pasos__numero {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 1rem;
  background: var(--verde-800);
  color: #fff;
  border-radius: 50%;
  font-family: var(--f-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
}
.pasos__item h3 { font-size: 1rem; margin-bottom: .35rem; }
.pasos__item p { font-size: .875rem; color: var(--tinta-60); margin: 0; }

/* Línea que conecta los pasos en pantallas anchas. */
@media (min-width: 1000px) {
  .pasos__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1.5rem + 16px);
    right: -1.25rem;
    width: 1.25rem;
    height: 1px;
    background: var(--linea);
  }
}

/* == 08. Catálogo ========================================================== */

/* Cabecera del catálogo: título a la izquierda, aclaración de precios a la
   derecha, para que no empuje la grilla hacia abajo. */
.seccion--catalogo { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); }

.catalogo-cabecera {
  display: grid;
  gap: 1rem 2.5rem;
  align-items: start;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
@media (min-width: 900px) {
  .catalogo-cabecera { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.catalogo-cabecera h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  margin-bottom: .6rem;
}
.catalogo-cabecera__nota {
  margin: 0;
  padding: .9rem 1.1rem;
  background: var(--verde-50);
  border-left: 3px solid var(--verde-200);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta-60);
}
.catalogo {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
}
@media (min-width: 1000px) { .catalogo { grid-template-columns: 268px 1fr; } }

/* -- Panel de filtros -- */
.filtros {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 1.35rem;
}
@media (min-width: 1000px) {
  .filtros { position: sticky; top: calc(var(--alto-barras) + 1.25rem); max-height: calc(100vh - var(--alto-barras) - 2.5rem); overflow-y: auto; }
}
.filtros__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--linea-suave);
}
.filtros__titulo { font-family: var(--f-titulo); font-size: 1.125rem; color: var(--verde-900); font-weight: 600; }
.filtros__limpiar {
  background: none; border: 0; padding: 0;
  font-size: .8125rem; font-weight: 600; color: var(--acento-oscuro);
  cursor: pointer; text-decoration: underline;
}
.filtros__limpiar[hidden] { display: none; }

.grupo-filtro { border-bottom: 1px solid var(--linea-suave); }
.grupo-filtro:last-child { border-bottom: 0; }
.grupo-filtro__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-800);
  cursor: pointer;
}
.grupo-filtro__boton svg { transition: transform var(--transicion); color: var(--tinta-40); }
.grupo-filtro__boton[aria-expanded="false"] svg { transform: rotate(-90deg); }
.grupo-filtro__cuerpo { padding-bottom: 1rem; }

.opcion-filtro {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem 0;
  font-size: .9375rem;
  color: var(--tinta-80);
  cursor: pointer;
}
.opcion-filtro:hover { color: var(--verde-800); }
.opcion-filtro input {
  flex: none;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--acento);
  cursor: pointer;
}
.opcion-filtro__cuenta { margin-left: auto; font-size: .8125rem; color: var(--tinta-40); font-variant-numeric: tabular-nums; }
.opcion-filtro__muestra {
  flex: none;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  border: 1px solid rgba(31, 36, 33, .2);
}

/* Barra móvil de filtros */
.filtros-barra-movil {
  display: none;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
@media (max-width: 999px) {
  .filtros-barra-movil { display: flex; }
  .filtros {
    position: fixed;
    inset: 0;
    z-index: 120;
    border-radius: 0;
    border: 0;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 6rem;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--transicion), visibility var(--transicion);
  }
  .filtros.esta-abierto { transform: none; visibility: visible; }
  .filtros__cerrar-movil {
    position: sticky;
    bottom: 0;
    display: block;
    margin-top: 1.5rem;
  }
}
@media (min-width: 1000px) { .filtros__cerrar-movil { display: none; } }

.chip-conteo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem; height: 1.35rem;
  padding: 0 .3rem;
  background: var(--acento);
  color: #fff;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
}

/* -- Barra de resultados -- */
.resultados-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea-suave);
}
.resultados-barra__cuenta { font-size: .9375rem; color: var(--tinta-60); }
.resultados-barra__cuenta strong { color: var(--verde-900); font-weight: 600; }

.orden { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--tinta-60); }
.orden select {
  font: inherit;
  padding: .5rem 2rem .5rem .7rem;
  color: var(--tinta);
  background: var(--blanco) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646D68' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right .55rem center / .85rem no-repeat;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  appearance: none;
  cursor: pointer;
}

.chips-activos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chips-activos:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .5rem .35rem .75rem;
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: 100px;
  font-size: .8125rem;
  color: var(--verde-800);
}
.chip button {
  display: grid;
  place-items: center;
  width: 1.15rem; height: 1.15rem;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--verde-700);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.chip button:hover { background: var(--verde-100); }

/* -- Grilla y tarjetas de producto -- */
.grilla-productos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.tarjeta-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
/* Filete de acento que aparece arriba de la tarjeta al pasar el mouse. */
.tarjeta-producto::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--acento);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--transicion), transform var(--transicion);
  z-index: 2;
}
.tarjeta-producto:hover {
  border-color: var(--verde-200);
  box-shadow: var(--sombra-lg);
  transform: translateY(-4px);
}
.tarjeta-producto:hover::before { opacity: 1; transform: scaleX(1); }

.tarjeta-producto__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  /* Plinto: el producto se apoya sobre un halo claro en vez de sobre un
     rectángulo gris plano. */
  background: radial-gradient(100% 80% at 50% 25%, #fff 0%, var(--hueso) 55%, #F1F4F0 100%);
  border-bottom: 1px solid var(--linea-suave);
  overflow: hidden;
}
.tarjeta-producto__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 1.35rem;
  filter: drop-shadow(0 6px 12px rgba(27, 42, 30, .10));
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}
.tarjeta-producto:hover .tarjeta-producto__media img { transform: scale(1.04) translateY(-2px); }

.media-pendiente {
  display: grid;
  place-content: center;
  gap: .5rem;
  height: 100%;
  padding: 1rem;
  text-align: center;
  background: repeating-linear-gradient(135deg, var(--hueso) 0 10px, #F4F6F3 10px 20px);
  color: var(--tinta-40);
  font-size: .75rem;
  letter-spacing: .04em;
}
.media-pendiente svg { margin-inline: auto; color: var(--verde-200); }

.tarjeta-producto__etiquetas {
  position: absolute;
  top: .7rem; left: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: calc(100% - 1.4rem);
}
.etiqueta {
  padding: .22rem .5rem;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-60);
}
.etiqueta--esteril { background: var(--acento); border-color: var(--acento); color: #fff; }
.etiqueta--marca { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.35rem;
}
.tarjeta-producto__marca {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: .45rem;
}
.tarjeta-producto__nombre {
  font-family: var(--f-titulo);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 .85rem;
}
.tarjeta-producto__nombre a { color: var(--verde-900); }
.tarjeta-producto__nombre a:hover { color: var(--acento-oscuro); text-decoration: none; }

.especificaciones-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .7rem;
  margin: 0 0 1.1rem;
  font-size: .8125rem;
}
.especificaciones-mini dt { color: var(--tinta-40); }
.especificaciones-mini dd { margin: 0; color: var(--tinta-80); font-weight: 500; }

.tarjeta-producto__pie { margin-top: auto; display: grid; gap: .5rem; }

.sin-resultados {
  padding: clamp(2.5rem, 2rem + 3vw, 4rem) 1.5rem;
  text-align: center;
  background: var(--hueso);
  border: 1px dashed var(--linea);
  border-radius: var(--r-lg);
}
.sin-resultados h3 { margin-bottom: .4rem; }
.sin-resultados p { color: var(--tinta-60); margin-bottom: 1.5rem; }

/* == 09. Ficha de producto ================================================= */
.miga {
  padding-block: 1.1rem;
  font-size: .8125rem;
  color: var(--tinta-40);
  border-bottom: 1px solid var(--linea-suave);
}
.miga ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.miga li::after { content: "/"; margin-left: .4rem; color: var(--linea); }
.miga li:last-child::after { content: none; }
.miga a { color: var(--tinta-60); }

.ficha { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 900px) { .ficha { grid-template-columns: 1fr 1fr; align-items: start; } }

.ficha__galeria { position: sticky; top: calc(var(--alto-barras) + 1.5rem); }
@media (max-width: 899px) { .ficha__galeria { position: static; } }

.ficha__imagen-principal {
  aspect-ratio: 4 / 3;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ficha__imagen-principal img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1rem, .5rem + 2vw, 2.25rem);
}

.ficha__miniaturas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.ficha__miniaturas button {
  width: 74px; height: 62px;
  padding: .3rem;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--transicion);
}
.ficha__miniaturas button:hover { border-color: var(--verde-500); }
.ficha__miniaturas button[aria-current="true"] { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.ficha__miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.ficha__sku { font-size: .8125rem; color: var(--tinta-40); letter-spacing: .04em; }
.ficha h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin: .5rem 0 1rem; }
.ficha__resumen { font-size: 1.0625rem; color: var(--tinta-60); margin-bottom: 1.75rem; }

.ficha__insignias { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }

.ficha__acciones {
  display: grid;
  gap: .65rem;
  padding: 1.35rem;
  margin-bottom: 2rem;
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--r-lg);
}
@media (min-width: 560px) { .ficha__acciones { grid-template-columns: 1fr 1fr; } }
.ficha__acciones p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .8125rem;
  color: var(--tinta-60);
}

.bloque-ficha { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--linea-suave); }
.bloque-ficha:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.bloque-ficha h2 { font-size: 1.1875rem; margin-bottom: 1rem; }

.tabla-especificaciones { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-especificaciones th,
.tabla-especificaciones td { padding: .7rem .5rem; text-align: left; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla-especificaciones th { width: 42%; font-weight: 500; color: var(--tinta-60); }
.tabla-especificaciones td { color: var(--tinta); font-weight: 500; }
.tabla-scroll { overflow-x: auto; }

.acordeon { border-top: 1px solid var(--linea-suave); }
.acordeon__item { border-bottom: 1px solid var(--linea-suave); }
.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--f-texto);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--verde-900);
  cursor: pointer;
}
.acordeon__boton svg { flex: none; color: var(--acento); transition: transform var(--transicion); }
.acordeon__boton[aria-expanded="true"] svg { transform: rotate(45deg); }
.acordeon__panel { padding: 0 0 1.15rem; font-size: .9375rem; color: var(--tinta-60); max-width: 62ch; }

.relacionados { border-top: 1px solid var(--linea-suave); }

/* == 10. Marcas (Sempermed, Harps) ========================================= */
/* Contenedor del logotipo de una marca. Sirve tanto con la imagen real como
   con el sustituto tipográfico que se usa mientras falta el archivo. */
.marca-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .1rem;
  padding: .9rem 1.35rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  margin-bottom: 1.75rem;
}
/* El tamaño de cada logotipo se define con sus atributos width/height en el
   HTML, porque cada marca tiene una proporción distinta. */
.marca-logo img { max-width: 100%; }
.seccion--oscura .marca-logo { background: #fff; border-color: transparent; }

.marca-logo--texto .marca-logo__nombre {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: #0B4DA2;
}
.marca-logo--texto .marca-logo__sub {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--tinta-60);
}

.aviso-institucional {
  padding: 1.15rem 1.35rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--verde-200);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .78);
}
.aviso-institucional strong { color: #fff; }

/* == 11. Cotización y formulario =========================================== */
.cotizacion { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .cotizacion { grid-template-columns: .85fr 1.15fr; } }

.panel-whatsapp {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--verde-900);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, .82);
}
.panel-whatsapp h3 { color: #fff; font-size: 1.3rem; }
.panel-whatsapp p { font-size: .9375rem; }
.panel-whatsapp .btn { margin-top: .5rem; }
.panel-whatsapp__dato {
  display: flex;
  gap: .7rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .875rem;
}
.panel-whatsapp__dato svg { flex: none; margin-top: .15rem; color: var(--verde-200); }
.panel-whatsapp__dato strong { display: block; color: #fff; font-weight: 600; }

.formulario {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}
.formulario__grilla { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .formulario__grilla { grid-template-columns: 1fr 1fr; } }
.campo--ancho { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label { font-size: .875rem; font-weight: 600; color: var(--verde-900); }
.campo label .opcional { font-weight: 400; color: var(--tinta-40); }
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: .9375rem;
  padding: .75rem .85rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  width: 100%;
}
.campo select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646D68' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .9rem;
  cursor: pointer;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-claro);
}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #C0392B; }
.campo__error { font-size: .8125rem; color: #C0392B; min-height: 1.2em; }
.campo__error:empty { min-height: 0; }
.campo__ayuda { font-size: .8125rem; color: var(--tinta-40); }

.campo-producto {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--acento-claro);
  border: 1px solid #BFE0D7;
  border-radius: var(--r-md);
  font-size: .875rem;
  color: var(--verde-900);
}
.campo-producto[hidden] { display: none; }
.campo-producto svg { flex: none; color: var(--acento); }
.campo-producto strong { font-weight: 600; }

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-suave);
}
.formulario__nota { font-size: .8125rem; color: var(--tinta-40); flex: 1 1 15rem; }

.aviso-form {
  display: none;
  gap: .75rem;
  padding: 1rem 1.15rem;
  margin-top: 1.25rem;
  border-radius: var(--r-md);
  font-size: .9375rem;
  line-height: 1.55;
}
.aviso-form.esta-visible { display: flex; }
.aviso-form svg { flex: none; margin-top: .15rem; }
.aviso-form--ok { background: var(--acento-claro); border: 1px solid #BFE0D7; color: #0A5744; }
.aviso-form--error { background: #FDECEA; border: 1px solid #F5C6C0; color: #922B21; }

/* == 12. Contacto ========================================================== */
.contacto { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; } }

.lista-contacto { margin: 0; padding: 0; list-style: none; }
.lista-contacto > div {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linea-suave);
}
.lista-contacto > div:first-child { padding-top: 0; }
.lista-contacto__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--r-md);
  color: var(--verde-700);
}
.lista-contacto dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-40);
  margin-bottom: .2rem;
}
.lista-contacto dd { margin: 0; color: var(--tinta); font-weight: 500; }
.lista-contacto dd a { color: var(--tinta); }
.lista-contacto dd a:hover { color: var(--acento-oscuro); }

.mapa {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hueso);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* == 13. Pie de página ===================================================== */
.pie {
  position: relative;
  background: var(--verde-900);
  color: rgba(255, 255, 255, .62);
  font-size: .875rem;
}
/* Filete de acento arriba del pie: cierra la página en lugar de cortarla. */
.pie::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acento) 0%, var(--verde-500) 100%);
}
.pie a { color: rgba(255, 255, 255, .82); }
.pie a:hover { color: #fff; }

.pie__superior {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 760px) { .pie__superior { grid-template-columns: 1.4fr 1fr 1fr; } }

.pie__marca { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.pie__marca img { width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.pie__marca span { font-family: var(--f-titulo); font-size: 1.125rem; color: #fff; font-weight: 600; }
.pie__descripcion { max-width: 38ch; }

.pie h4 {
  color: #fff;
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { margin-bottom: .6rem; }

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
}

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem;
  background: #1FA855;
  color: #fff;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: var(--sombra-lg);
  transition: background var(--transicion), transform var(--transicion);
}
.wa-flotante:hover { background: #17843F; text-decoration: none; transform: translateY(-2px); }
.wa-flotante__texto { display: none; }
@media (min-width: 560px) { .wa-flotante__texto { display: inline; } }

/* == 14. Animaciones de aparición ========================================== */
.aparecer {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.aparecer.esta-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .aparecer { opacity: 1; transform: none; }
}

/* == 15. Impresión ========================================================= */
@media print {
  .header, .pie, .wa-flotante, .filtros, .filtros-barra-movil,
  .ficha__acciones, .panel-whatsapp, .formulario { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .seccion { padding: 1rem 0; }
}