/* ============================================================
   MEDIK — hoja de estilos
   ============================================================ */

:root {
  --azul-900: #0b3a4a;
  --azul-700: #12586e;
  --azul-500: #1b7f96;
  --verde:    #17a67f;
  --wa:       #25d366;
  --wa-oscuro:#1da851;
  --tinta:    #12212a;
  --gris:     #5c6b73;
  --linea:    #e2e8ea;
  --fondo:    #ffffff;
  --fondo-alt:#f4f8f9;
  --radio:    12px;
  --ancho:    1200px;
  --sombra:   0 10px 30px rgba(11, 58, 74, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.6;
}

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

a { color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul-900);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------- Encabezado ---------------- */

/* El encabezado es «position: sticky», lo que además crea el contexto de
   posicionamiento del menú móvil: así el panel se ancla al borde inferior real
   del header (top: 100%) en vez de a una altura fija en píxeles, y no se
   despega si el alto del encabezado cambia. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 2vw, 2rem);
  min-height: clamp(58px, 4vw + 44px, 74px);
}

/* ---- Logo ---- */

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--azul-900);
}

/* El logotipo es cuadrado y ya incluye el nombre, así que se dimensiona por
   altura y no lleva texto al lado que lo repita. */
.brand__logo {
  width: auto;
  height: clamp(42px, 3vw + 30px, 56px);
  flex: none;
}

/* Descriptor junto al logotipo. Separado por una línea fina para que se lea
   como una unidad y no como texto suelto. */
.brand__bajada {
  padding-left: .7rem;
  border-left: 1px solid var(--linea);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---- Navegación ---- */

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(.88rem, .8rem + .2vw, .95rem);
  white-space: nowrap;
  color: var(--azul-900);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--verde); }

.nav .nav-cta {
  background: var(--azul-700);
  color: #fff;
  padding: .55rem clamp(.9rem, 1.5vw, 1.15rem);
  border-radius: 999px;
  border-bottom: 0;
}
.nav .nav-cta:hover { background: var(--azul-900); border-bottom-color: transparent; }

/* ---- Botón de menú ---- */

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;   /* 44 px: mínimo cómodo para el dedo */
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
}

.nav-toggle__caja {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-toggle__caja span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--azul-900);
  transition: transform .25s, opacity .2s;
}

/* Las tres barras se cruzan en X al abrir */
.nav-toggle[aria-expanded="true"] .nav-toggle__caja span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__caja span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__caja span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------- Carrusel ---------------- */

.carousel {
  position: relative;
  background: var(--azul-900);
  overflow: hidden;
}

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 600;
  object-fit: cover;
}

@media (max-width: 767px) {
  .slide img { aspect-ratio: 800 / 600; }
}

/* Flechas */

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--azul-900);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.carousel__arrow:hover { background: #fff; }
.carousel__arrow:active { transform: translateY(-50%) scale(.94); }
.carousel__arrow--prev { left: clamp(.75rem, 3vw, 2rem); }
.carousel__arrow--next { right: clamp(.75rem, 3vw, 2rem); }

.carousel__arrow svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Puntos y botón de pausa */

.carousel__controls {
  position: absolute;
  left: 50%;
  bottom: clamp(.9rem, 2.5vw, 1.75rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(11, 58, 74, .38);
  backdrop-filter: blur(4px);
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.carousel__dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.carousel__dot[aria-selected="true"] {
  width: 28px;
  border-radius: 999px;
  background: #fff;
}

.carousel__play {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.carousel__play-icon {
  width: 10px; height: 12px;
  background: #fff;
  /* dos barras = pausa */
  clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0);
}
.carousel__play[aria-pressed="false"] .carousel__play-icon {
  /* triángulo = reproducir */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.carousel :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { transition: none; }
}

/* ---------------- Secciones ---------------- */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--alt { background: var(--fondo-alt); }

.section__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  color: var(--azul-900);
}

.section__lead {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--gris);
}

/* Cuando el título va sin párrafo debajo, asume la separación que daba este:
   con solo .75rem quedaría pegado al contenido. */
.section__title--solo { margin-bottom: 2rem; }

/* ---------------- Productos destacados ---------------- */

.productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.producto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  transition: box-shadow .25s, transform .25s;
}
.producto:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}

.producto__media {
  background: #fff;
  border-bottom: 1px solid var(--linea);
}
.producto__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.producto__body {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
}

.producto__marca {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}

/* los min-height dejan los botones de todas las tarjetas a la misma altura
   aunque el título o el resumen ocupen una línea más */
.producto__nombre {
  margin: .2rem 0 .5rem;
  /* Reserva 3 líneas (3 × line-height 1.25): es lo que ocupa el título más
     largo. Como la rejilla usa align-items:start, cada tarjeta mide por su
     cuenta y sin esta reserva los botones se desalinean. */
  min-height: 3.75em;
}

/* Si la tarjeta no muestra marca, el título queda de primero y asume el
   espacio que ella ocupaba: así los botones siguen alineados entre tarjetas
   con marca y sin ella. */
.producto__nombre:first-child {
  margin-top: 1.45rem;
}

.producto__nombre {
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--azul-900);
}

.producto__resumen {
  margin: 0 0 1.1rem;
  /* Reserva 4 líneas: es lo que ocupa el resumen más largo de los productos
     actuales. Si algún resumen pasara de ahí, los botones de esa tarjeta
     bajarían y habría que subir este valor. */
  min-height: 6.4em;
  font-size: .92rem;
  color: var(--gris);
}

@media (max-width: 560px) {
  .producto__nombre,
  .producto__resumen { min-height: 0; }
}

/* Los dos botones comparten la fila. «Ver descripción» crece y el de manual
   ocupa lo que necesite; en tarjetas angostas se apilan. */
.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
}

.producto__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex: 1 1 8rem;
  min-width: 0;
  padding: .7rem .95rem;
  border: 1px solid var(--azul-700);
  border-radius: 999px;
  background: #fff;
  color: var(--azul-700);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.producto__toggle:hover {
  background: var(--azul-700);
  color: #fff;
}
.producto__toggle:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
}

.producto__toggle-icon {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.producto__toggle-icon::before,
.producto__toggle-icon::after {
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s, opacity .25s;
  content: "";
}
.producto__toggle-icon::before { width: 14px; height: 2px; }
.producto__toggle-icon::after  { width: 2px; height: 14px; }

.producto__toggle[aria-expanded="true"] .producto__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ---- Descarga del manual técnico ---- */

.producto__manual {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Con el rótulo «Ficha técnica» los dos botones ya no caben en una fila
     dentro de una tarjeta, así que se apilan. Para que se vea deliberado y no
     descuadrado, este también se estira: quedan dos botones del mismo ancho,
     uno sobre otro. Si algún día cupieran en la fila, se repartirían a partes
     iguales. */
  flex: 1 1 auto;
  justify-content: center;
  padding: .7rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--gris);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.producto__manual:hover {
  border-color: var(--verde);
  background: #f2fbf8;
  color: #0d5f4a;
}

/* El rótulo identifica el botón; el peso va detrás, más pequeño y en tono
   menor, porque es un dato secundario —aunque necesario: hay una ficha de
   12 MB y nadie debería empezar a bajarla desde el celular sin saberlo—. */
.producto__manual-txt {
  font-weight: 700;
}

.producto__manual-peso {
  font-weight: 400;
  font-size: .76rem;
  opacity: .75;
}
.producto__manual:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
}

.producto__manual-icono {
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El peso va en tono menor: informa sin competir con la acción */
.producto__manual-peso {
  font-weight: 600;
  font-size: .76rem;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .producto__manual { transition: none; }
}

.producto__desc {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .35s ease;
}
/* `display: grid` gana sobre el atributo hidden, hay que reponerlo */
.producto__desc[hidden] { display: none; }
.producto__desc.is-open { grid-template-rows: 1fr; }
.producto__desc-inner { min-height: 0; }

.producto__desc p,
.producto__desc ul {
  font-size: .9rem;
  color: var(--gris);
}
.producto__desc p { margin: 1.1rem 0 .75rem; }
.producto__desc ul { margin: 0; padding-left: 1.1rem; }
.producto__desc li { margin-bottom: .35rem; }
.producto__desc li::marker { color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  .producto,
  .producto__desc,
  .producto__toggle-icon::before,
  .producto__toggle-icon::after { transition: none; }
}

/* ---------------- Carrusel de marcas ---------------- */

.marcas__viewport {
  overflow: hidden;
  /* difumina los bordes para que la entrada y salida no se vea cortada */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.marcas__track {
  display: flex;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  will-change: transform;
}
.marcas__track.is-animando { transition: transform .8s cubic-bezier(.4, 0, .2, 1); }

/* el arrastre sigue al dedo, sin transición de por medio */
.marcas__track {
  cursor: grab;
  touch-action: pan-y;          /* deja pasar el scroll vertical de la página */
}
.marcas__track.is-arrastrando {
  cursor: grabbing;
  user-select: none;
}
.marcas__track.is-arrastrando .marca::before { box-shadow: none; }

/* ---- controles del pasador ---- */

.marcas__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.marcas__flecha {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: #fff;
  color: var(--azul-700);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.marcas__flecha:hover {
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: #fff;
}
.marcas__flecha:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
}
.marcas__flecha svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marcas__puntos {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.marcas__punto {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8d4d8;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.marcas__punto[aria-selected="true"] {
  width: 26px;
  border-radius: 999px;
  background: var(--azul-700);
}
.marcas__punto:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .marcas__flecha,
  .marcas__punto { transition: none; }
}

.marca {
  flex: 0 0 33.3333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 168px;
  padding: 1.75rem 1rem;
  text-align: center;
}

/* la tarjeta va en un pseudo-contenedor interno para que el gap
   no rompa el cálculo de desplazamiento del carrusel */
.marca > * { position: relative; z-index: 1; }
.marca::before {
  position: absolute;
  inset: .25rem .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  transition: box-shadow .25s;
  content: "";
}
.marca { position: relative; }
.marca:hover::before { box-shadow: var(--sombra); }

/* Los logos vienen con proporciones muy distintas: Rotaid es 4,4:1 y ZOLL
   2,2:1. Limitar por alto y dejar el ancho libre hasta el borde de la tarjeta
   los equilibra ópticamente; si se limitara por ancho, los apaisados se verían
   diminutos al lado de los compactos. */
.marca__logo {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* ZOLL trae fondo azul sólido como parte de su identidad; el redondeo evita
     que se lea como un recorte mal hecho. No afecta a los transparentes. */
  border-radius: 4px;
}

/* Wordmarks provisionales, mientras no estén los archivos de logo */
.marca__wordmark {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
}
.marca__wordmark small {
  display: block;
  margin-top: .15rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.marca__wordmark sup { font-size: .55em; }

.marca__wordmark--zoll    { color: #0072ce; letter-spacing: .04em; }
.marca__wordmark--aluderm { color: #ef7d00; text-transform: lowercase; }
.marca__wordmark--sohngen { color: #1c1c1c; letter-spacing: .06em; }
.marca__wordmark--rotaid  { color: #0b3a4a; letter-spacing: .06em; }

.marca__desc {
  font-size: .88rem;
  color: var(--gris);
}

/* La sigla entre paréntesis de la leyenda —«Desfibriladores (DEA)»— va
   resaltada: es la palabra con la que el cliente busca el equipo. La regla es
   general, no apunta a una marca concreta: cualquier leyenda que termine en
   paréntesis lo recibe. */
.marca__desc strong {
  font-weight: 700;
  color: var(--azul-900);
}

@media (max-width: 900px) {
  .marca { flex-basis: 50%; }
}
@media (max-width: 560px) {
  .marca { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .marcas__track.is-animando { transition: none; }
  .marca::before { transition: none; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  padding: 1.75rem;
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra);
  border-top: 4px solid var(--verde);
}
.card h3 { margin: 0 0 .5rem; color: var(--azul-900); font-size: 1.15rem; }
.card p  { margin: 0; color: var(--gris); font-size: .95rem; }

.cta { background: var(--azul-900); color: #fff; }
.cta .section__title { color: #fff; }
.cta .section__lead { color: rgba(255, 255, 255, .78); margin-bottom: 0; }

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* El título quedó solo en su columna al quitar el párrafo de apoyo. Su margen
   inferior cuenta dentro de la caja flex, así que lo desplazaba 6 px por
   encima del centro de los botones. */
.cta__inner .section__title { margin-bottom: 0; }

.btn {
  display: inline-block;
  padding: .9rem 1.75rem;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #0f8e6c; }

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

.btn--wa {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--wa);
}
.btn--wa:hover { background: var(--wa-oscuro); }

.btn--linea {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
}
.btn--linea:hover { background: rgba(255, 255, 255, .12); }

.wa-icono {
  width: 22px; height: 22px;
  flex: none;
  fill: currentColor;
}

/* el sprite solo define el símbolo, no debe ocupar espacio */
.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* ---------------- Enlace de WhatsApp con número ---------------- */

.wa-enlace {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--wa-oscuro);
  white-space: nowrap;
}
.wa-enlace:hover { text-decoration: underline; }
.wa-enlace .wa-icono { width: 20px; height: 20px; }

/* franja bajo el carrusel */

.wa-franja {
  background: var(--azul-900);
  color: #fff;
}
.wa-franja__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1rem;
  padding: .9rem 0;
  text-align: center;
}
.wa-franja p {
  margin: 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
}
/* cierre de cada sección */

.wa-pie-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .6rem;
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: .95rem;
  color: var(--gris);
  text-align: center;
}

/* solo el ícono, sin número */
.wa-enlace--icono {
  width: 34px; height: 34px;
  justify-content: center;
  gap: 0;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  transition: background .2s, transform .2s;
}
.wa-enlace--icono:hover {
  background: var(--wa-oscuro);
  transform: scale(1.08);
  text-decoration: none;
}
.wa-enlace--icono:focus-visible {
  outline: 3px solid var(--wa-oscuro);
  outline-offset: 3px;
}
.wa-enlace--icono .wa-icono { width: 21px; height: 21px; }

@media (prefers-reduced-motion: reduce) {
  .wa-enlace--icono { transition: none; }
}

/* dentro de la descripción de un producto */

.wa-enlace--producto {
  margin-top: 1rem;
  font-size: .88rem;
}

/* el enlace del pie se estiliza junto al resto del pie, más abajo */

/* ---------------- Botón flotante de WhatsApp ---------------- */

.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
}

.wa-flotante__circulo {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
  transition: transform .2s, background .2s;
}
.wa-flotante__circulo .wa-icono { width: 32px; height: 32px; }

.wa-flotante:hover .wa-flotante__circulo,
.wa-flotante:focus-visible .wa-flotante__circulo {
  background: var(--wa-oscuro);
  transform: scale(1.06);
}

.wa-flotante__texto {
  padding: .5rem .9rem;
  border-radius: 999px;
  background: #fff;
  color: var(--azul-900);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.wa-flotante:hover .wa-flotante__texto,
.wa-flotante:focus-visible .wa-flotante__texto {
  opacity: 1;
  transform: translateX(0);
}

.wa-flotante:focus-visible {
  outline: 3px solid var(--wa-oscuro);
  outline-offset: 4px;
  border-radius: 999px;
}

/* en pantallas táctiles no hay hover: se deja solo el círculo */
@media (hover: none), (max-width: 560px) {
  .wa-flotante__texto { display: none; }
  .wa-flotante__circulo { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flotante__circulo,
  .wa-flotante__texto { transition: none; }
}

/* ---------------- Visor de manuales en PDF ---------------- */

.visor {
  width: min(1100px, 94vw);
  height: min(90vh, 900px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(11, 58, 74, .35);
}
.visor::backdrop {
  background: rgba(8, 42, 54, .68);
  backdrop-filter: blur(3px);
}

/* Columna: barra fija arriba, documento ocupando el resto */
.visor[open] {
  display: flex;
  flex-direction: column;
}

.visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: .85rem 1rem .85rem 1.25rem;
  background: var(--azul-900);
  color: #fff;
}

.visor__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visor__acciones {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}

.visor__descargar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.visor__descargar:hover { background: #0f8e6c; }
.visor__descargar svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visor__cerrar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.visor__cerrar:hover { background: rgba(255, 255, 255, .26); }
.visor__cerrar svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.visor :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* El cuerpo apila el iframe sobre el aviso de respaldo: si el navegador no
   puede mostrar el PDF, el iframe queda transparente y el mensaje asoma. */
.visor__cuerpo {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--fondo-alt);
}

.visor__marco {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--fondo-alt);
}

.visor__respaldo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 2rem;
  text-align: center;
  color: var(--gris);
  font-size: .95rem;
}
.visor__respaldo a { color: var(--azul-500); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .visor::backdrop { backdrop-filter: none; }
}

/* ---------------- Formulario de cotización ---------------- */

.form-wrap { max-width: 860px; }

/* campo trampa para robots: fuera de la vista, nunca oculto con display:none
   porque algunos robots ignoran los campos ocultos de esa forma */
.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}

.campo { display: flex; flex-direction: column; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  margin-bottom: .35rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--azul-900);
}
.req { color: #c0392b; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }

.campo input::placeholder,
.campo textarea::placeholder { color: #9aa8ae; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px rgba(27, 127, 150, .18);
}

.campo .is-invalido {
  border-color: #c0392b;
  background: #fdf4f3;
}
.campo .is-invalido:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .16); }

.campo__error {
  margin: .35rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: #c0392b;
}

.form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn--enviar {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #fff;
}
.btn--enviar:disabled { opacity: .65; cursor: progress; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.form__nota {
  margin: 0;
  font-size: .88rem;
  color: var(--gris);
}
.form__nota .wa-enlace { font-size: .9rem; }

/* aviso de resultado */

.aviso {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  border-left: 4px solid;
  font-weight: 600;
}
.aviso--ok {
  border-color: var(--verde);
  background: #eaf8f3;
  color: #0d5f4a;
}
.aviso--error {
  border-color: #c0392b;
  background: #fdf1ef;
  color: #922b21;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .campo input,
  .campo select,
  .campo textarea { transition: none; }
}

.site-footer {
  padding: 2.25rem 0 1.75rem;
  background: #082a36;
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
}
.site-footer p { margin: 0; }

/* ---- bloque de contactos ---- */

/* título y datos en una sola línea, alineados a la izquierda.
   flex-wrap evita el desborde en pantallas angostas: ahí se parte en dos. */
.pie-contactos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem 1.75rem;
}

.pie-contactos__titulo {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.pie-contactos__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-enlace {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
.pie-enlace:hover { text-decoration: underline; }

.pie-icono {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: var(--verde);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-enlace--pie {
  color: #fff;
  font-weight: 600;
}
.wa-enlace--pie .wa-icono { fill: var(--wa); }

.site-footer__legal {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}

/* ---------------- Móvil ---------------- */

/* ---------------- Encabezado en pantallas angostas ----------------
   El punto de quiebre se eligió midiendo: el menú horizontal necesita unos
   600 px y el logo otros 110 px. Por debajo de 900 px empieza a quedar
   apretado, así que ahí pasa a botón. */

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  /* Anclado al borde inferior real del encabezado, no a una altura fija */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 14px 28px rgba(11, 58, 74, .12);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
    overflow: hidden;
    visibility: hidden;
  }
  .nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  /* El relleno vertical va en los elementos de la lista, no en el <ul>:
     con box-sizing: border-box, un padding en el hijo del grid no colapsa
     al llegar a 0fr y dejaría una franja visible bajo el encabezado. */
  .nav ul {
    min-width: 0;
    min-height: 0;      /* imprescindible para que el 0fr colapse */
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 clamp(1rem, 4vw, 1.25rem);
  }

  .nav li { border-bottom: 1px solid var(--linea); }
  .nav li:last-child { border-bottom: 0; margin-bottom: 1.25rem; }

  .nav a {
    padding: .95rem .25rem;
    font-size: 1rem;
    border-bottom: 0;
  }
  .nav a:hover { color: var(--azul-500); }

  .nav .nav-cta {
    text-align: center;
    margin-top: .85rem;
    padding: .8rem 1.15rem;
  }

  .carousel__arrow { width: 40px; height: 40px; }
}

/* En pantallas angostas queda solo el logotipo: ya contiene el nombre, así
   que el descriptor es lo prescindible cuando falta espacio. */
@media (max-width: 460px) {
  .brand__bajada { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav-toggle__caja span { transition: none; }
}

/* ---------------- Buscador rápido ----------------
   El encabezado ya iba justo de espacio, así que la búsqueda no ocupa una
   barra fija: es un botón que abre una caja sobre la página. Así se comporta
   igual en escritorio y en móvil, y hay sitio de sobra para los resultados. */

.header-acciones {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}

.buscar-abrir {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  color: var(--azul-900);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.buscar-abrir svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.buscar-abrir:hover { border-color: var(--verde); color: var(--verde); }
.buscar-abrir:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* Por encima del encabezado, que es sticky con z-index 50 */
.buscador {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 8vh, 6rem) 1rem 1rem;
  background: rgba(11, 58, 74, .45);
  backdrop-filter: blur(3px);
}
.buscador[hidden] { display: none; }

.buscador__caja {
  width: min(640px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 58, 74, .3);
  overflow: hidden;
}

.buscador__campo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--linea);
}
.buscador__lupa {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gris);
  stroke-width: 2;
  stroke-linecap: round;
}
.buscador__campo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--azul-900);
  background: transparent;
}
/* la X nativa del type=search duplicaría el botón de cerrar */
.buscador__campo input::-webkit-search-cancel-button { display: none; }

.buscador__cerrar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
}
.buscador__cerrar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.buscador__cerrar:hover { background: var(--linea); color: var(--azul-900); }

.buscador__lista {
  margin: 0;
  padding: .4rem;
  list-style: none;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.buscador__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 9px;
  cursor: pointer;
}
.buscador__opcion.is-activa { background: #eef4f7; }

.buscador__cuerpo {
  display: grid;
  min-width: 0;
}
.buscador__titulo {
  font-weight: 600;
  color: var(--azul-900);
  /* los nombres de producto son largos: se recortan en una línea */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buscador__detalle {
  font-size: .85rem;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador__tipo {
  flex: 0 0 auto;
  padding: .15rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--gris);
}

.buscador__vacio {
  margin: 0;
  padding: 1.25rem 1.15rem;
  color: var(--gris);
  font-size: .92rem;
}

.buscador__pie {
  margin: 0;
  padding: .55rem 1rem;
  border-top: 1px solid var(--linea);
  background: #fafcfd;
  font-size: .78rem;
  color: var(--gris);
}
.buscador__pie kbd {
  padding: .1rem .35rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: .74rem;
}

/* En pantallas cortas el atajo de teclado no aplica y el pie roba altura */
@media (max-width: 640px), (max-height: 520px) {
  .buscador__pie { display: none; }
}

/* Destello del destino al llegar desde el buscador */
.resaltado {
  animation: destello 1.6s ease;
  outline: none;
}
@keyframes destello {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 166, 127, 0); }
  15%, 60% { box-shadow: 0 0 0 3px rgba(23, 166, 127, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .resaltado { animation: none; box-shadow: 0 0 0 3px rgba(23, 166, 127, .55); }
  .buscador { backdrop-filter: none; }
}