/* =====================================================
   TECHNOCARD — Hoja de estilos
   Sección actual: Header + Hero ("BIOMEDIC ECG")
   Iremos agregando estilos por sección conforme avancemos.
   ===================================================== */

:root {
  /* Paleta (tomada de la referencia: cielo azul + coral + navy) */
  --sky-100: #DCF1FB;
  --sky-200: #BEE6F7;
  --sky-300: #8FD0EC;
  --sky-400: #63B8DE;
  --sky-500: #4AA6D2;
  --navy:      #1C2B3A;
  --navy-2:    #12202C;
  --coral:     #F2665C;
  --coral-dark:#E14A3F;
  --teal:      #3FD8C2;
  --white:     #FFFFFF;

  --font-heading: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;

  --header-h: 84px;
  --container-w: 1240px;

  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* =============== Reset básico =============== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--sky-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

a { color: inherit; text-decoration: none; }

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

.visually-hidden {
  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: 12px;
  top: -60px;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

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

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* =============== Fondo decorativo (aurora) =============== */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(160deg, var(--sky-100) 0%, var(--sky-200) 45%, var(--sky-400) 100%);
  overflow: hidden;
}

/*
  Capa de "ambientación" (consultorio de cardiología): papel tipo ECG +
  iconografía médica en SVG, colocada detrás de todo y con opacidad baja
  para que quede como una textura del fondo, no como una imagen protagonista.
  Ajusta --bg-texture-opacity si la quieres más o menos marcada.
*/
.page-bg__texture {
  --bg-texture-opacity: 0.7;
  position: absolute;
  inset: 0;
  background-image: url("../assets/fondo-cardiologia.jpeg");
  background-size: cover;
  background-position: center;
  opacity: var(--bg-texture-opacity);
}

.page-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.page-bg__blob--1 {
  width: 46vw; height: 46vw;
  top: -12vw; left: -10vw;
  background: var(--sky-300);
  animation: blob-drift-1 22s ease-in-out infinite;
}
.page-bg__blob--2 {
  width: 34vw; height: 34vw;
  bottom: -10vw; right: -6vw;
  background: var(--sky-500);
  animation: blob-drift-2 26s ease-in-out infinite;
}
.page-bg__blob--3 {
  width: 22vw; height: 22vw;
  top: 30%; right: 12%;
  background: var(--white);
  opacity: 0.25;
  animation: blob-drift-3 18s ease-in-out infinite;
}

@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vw, 5vw) scale(1.1); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3vw, -4vw) scale(1.08); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2vw, 3vw); }
}

/* =============== Header / Nav =============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(28, 43, 58, 0.08);
}
.site-header.is-scrolled .nav-links a,
.site-header.is-scrolled .social-icons a { color: var(--navy); }
.site-header.is-scrolled .social-icons a { background: rgba(28, 43, 58, 0.08); }
.site-header.is-scrolled .nav-toggle__bar { background: var(--navy); }

.navbar {
  max-width: var(--container-w);
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
}
.logo__accent-o { color: var(--sky-500); }
.logo__coral { color: var(--coral); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.25s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }

.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icons a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  transition: transform 0.2s ease, background 0.2s ease;
}
.social-icons a:hover { transform: translateY(-2px); background: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============== Hero ============ */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h));
  max-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(8px, 3vh, 40px) 0 clamp(12px, 5vh, 56px);
}

/* Texto gigante decorativo */
.hero__watermark {
  /* ---------------------------------------------------------------
     Variable de ajuste: cambia SOLO este número para hacer el texto
     más o menos "alargado" (estiramiento vertical de las letras).
     1 = sin estirar · 1.75 = como está ahora · sube o baja a tu gusto.
     --------------------------------------------------------------- */
  --wm-stretch: 2.2;

  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700; /* Montserrat Bold */
  font-size: clamp(2.8rem, min(14vw, 20vh), 11rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  animation: wm-drift 5s ease-in-out infinite;
}
.hero__watermark-word {
  display: inline-block;
  /* Estiramiento vertical: usa la variable --wm-stretch de arriba */
  transform: translateY(14px) scaleY(var(--wm-stretch));
  transform-origin: center bottom;
  opacity: 0;
  letter-spacing: 0.35em;
  /* Degradado de arriba hacia abajo: sólido en la parte alta, se difumina hacia la base */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.32) 45%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wm-word-in 1.3s var(--ease-out) forwards;
}
.hero__watermark-word[data-word="2"] { animation-delay: 0.18s; }
.hero__watermark-word[data-word="1"] { animation-delay: 0s; }

@keyframes wm-word-in {
  to { opacity: 1; transform: translateY(0) scaleY(var(--wm-stretch)); letter-spacing: 0.02em; }
}
@keyframes wm-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Composición de productos: ahora es una sola foto (fondo ya recortado) */
.hero__products {
  /* ---------------------------------------------------------------
     Variable de ajuste: el producto es lo que más debe lucir, así
     que sube este número si necesitas que se vea todavía más grande
     (1 = tamaño base de abajo, 1.3 = como está ahora).
     Está definida aquí y la usa directamente la <img> de abajo.
     --------------------------------------------------------------- */
  --product-scale: 1.2;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Contenedor "libre": no le ponemos un ancho fijo/limitado, así nunca
     recorta a la imagen. Solo un máximo de seguridad para pantallas
     angostas. */
  max-width: 96vw;
  margin-bottom: clamp(2px, 1.2vh, 12px);
  margin-top: 5%;
  transition: transform 0.2s ease-out;
}

/* ---------------------------------------------------------------------
   SLIDER de productos (reemplaza la foto única de antes): .hero__products
   sigue siendo el contenedor que mueve el parallax del mouse (JS), y
   .hero__slider-track fija el alto (la misma fórmula clamp() de antes,
   por eso los media queries de "pantalla baja" más abajo casi no
   cambian) para que cada diapositiva se acomode dentro sin saltos.
   Las diapositivas se apilan una sobre otra (position:absolute) y se
   cruzan con un fundido de opacidad; js/script.js agrega/quita
   ".is-active" para pasar de una a otra. */
.hero__slider-track {
  position: relative;
  height: calc(clamp(220px, 46vh, 480px) * var(--product-scale));
  width: min(620px, 92vw);
  max-width: 96vw;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vh, 10px);
  /* Deja libre la franja de abajo para que el nombre del producto nunca
     quede tapado por los puntos indicadores (.hero__slider-dots), que
     se superponen sobre esa misma esquina inferior del slider. */
  padding-bottom: clamp(30px, 5vh, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Envuelve la foto sola: así puede encogerse (flex + min-height:0) para
   cederle espacio al nombre del producto de abajo sin desbordar la
   diapositiva. */
.hero__slide-media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__slide-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(18, 32, 44, 0.25));
}

/* Nombre del producto, debajo de la foto (placeholder por ahora:
   "Producto 1/2/3/4" — en cuanto me confirmes el nombre real de cada
   equipo lo reemplazo aquí). */
.hero__slide-caption {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #006a99;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(18, 32, 44, 0.14);
}

/* Botones de navegación manual (izquierda/derecha) */
.hero__slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 4vw, 44px);
  height: clamp(34px, 4vw, 44px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #006a99;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 32, 44, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero__slider-btn:hover,
.hero__slider-btn:focus-visible {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.hero__slider-btn--prev { left: clamp(-6px, -1.5vw, 6px); }
.hero__slider-btn--next { right: clamp(-6px, -1.5vw, 6px); }

/* Puntos indicadores: se superponen sobre el borde inferior de la foto
   (en vez de ir debajo, fuera de la caja) para no invadir el espacio
   entre el slider y el encabezado "Equipamiento profesional" — con tan
   poco margen entre ambos, unos puntos "de más" ahí terminaban pisando
   el texto. La píldora oscura semitransparente de fondo asegura que se
   lean igual de bien sobre fotos claras u oscuras. */
.hero__slider-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.6vh, 14px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(12, 22, 32, 0.32);
  z-index: 3;
}
.hero__slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero__slider-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

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

/*
  ---------------------------------------------------------------------
  OPCIONAL — animación de entrada + flotación del producto.
  Si más adelante la quieres de vuelta: en la regla ".hero__products img"
  de arriba, reemplaza "opacity: 1; transform: none;" por estas 4 líneas,
  y agrega la regla ".hero.is-loaded .hero__products img" debajo:

  opacity: 0;
  transform: translateY(26px) scale(0.92);
  transition: opacity 0.9s var(--ease-out) 0.1s, transform 1s var(--ease-out) 0.1s;
  animation: float-bob 6.5s ease-in-out infinite;
  animation-play-state: paused;
  }
  .hero.is-loaded .hero__products img {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation-play-state: running;
  }
  ---------------------------------------------------------------------
*/

@keyframes float-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}

/* Encabezado principal */
.hero__heading {
  margin: clamp(4px, 1.5vh, 8px) 0 clamp(10px, 3vh, 32px);
  max-width: 900px;
}

.hero__stroke-text {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, min(4.6vw, 5.4vh), 3.2rem);
  text-transform: uppercase;
  line-height: 0.8;
  /* Sin contorno, sin filtro: un solo color sólido, blanco. */
  color: #fff;
  letter-spacing: 0.01em;
  /* Animación de entrada DESACTIVADA por pedido: queda estática. */
}

.hero__subline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(6px, 1.5vh, 14px);
  font-family: var(--font-heading);
  font-weight: 350;
  font-size: clamp(1.35rem, min(4vw, 4.8vh), 2.8rem);
  text-transform: uppercase;
  color: #fff;
  /* Animación de entrada DESACTIVADA por pedido: queda estática. */
}

/* Píldora blanca sólida con el texto en transparente. */
.pill {
  position: relative;
  display: inline-flex;
  background: linear-gradient(180deg, #ffffff 0%, #e8f7fd 100%);
  padding: 0.3em 1em;
  border-radius: 999px;
  font-size: 0.6em;
  box-shadow: 0 10px 24px rgba(18, 32, 44, 0.12);
  overflow: hidden;
}
.pill__text {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Texto "incrustado": color celeste que se funde con el fondo del sitio,
     como en la referencia (no blanco puro, no navy sólido). */
  color: var(--sky-400);
}

/* Botón CTA */
.btn--pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  border-radius: 999px;
  padding: clamp(5px, 2.2vh, 5px) 44px;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.6vh, 1rem);
  letter-spacing: 0.02em;
  /* Animación de entrada y pulso DESACTIVADAS por pedido: queda estático.
     Solo se conserva la transición del hover (es una respuesta directa
     a la acción del usuario, no una animación "ambiental"). */
  transition: background 0.25s ease, color 0.25s ease;
}
.btn--pill:hover {
  background: #fff;
  color: var(--navy);
}

/* =============== Movimiento reducido =============== */
/* Nota: el texto del hero, el botón "Saber Más" y la imagen del producto
   ya no tienen animación por defecto (se quitó por pedido), así que no
   necesitan nada especial aquí. Esto solo cubre lo que SIGUE animado:
   el watermark, las manchas del fondo y (si la reactivas) la flotación
   del producto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-bg__blob,
  .hero__watermark,
  .hero__products img { animation: none !important; }
  .hero__watermark-word,
  .hero__products img {
    transition-duration: 0.25s !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* El fade-in de "Nosotros" y el colapsable "Ver más" siguen funcionando,
     solo sin el movimiento: aparecen/cambian de forma instantánea. */
  .reveal {
    transition-duration: 0.01s !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .about__extra {
    transition-duration: 0.01s !important;
    transform: none !important;
  }
  .about__toggle-icon { transition: none !important; }

  /* La insignia "+20" usa "transform" para su POSICIÓN (no para una
     animación) — el "transform: none" genérico de ".reveal" de arriba
     se la quitaría por completo y la insignia terminaría mal ubicada
     (tapando el texto) para cualquiera con "movimiento reducido"
     activado. Aquí se restaura esa posición. (En celular, el media
     query de 900px la vuelve a poner "static" con su propio
     "!important", así que sigue sin flotar sobre el texto ahí.) */
  .about__badge,
  .about__badge.reveal,
  .about__badge.reveal.is-visible {
    transform: translate(-50%, var(--badge-lift)) !important;
  }

  /* Las tarjetas de Equipos ya no dependen de hover/tap (ver más abajo),
     así que aquí solo hace falta apagar la transición del "Ver más". */
  .product-card__text-wrap { transition-duration: 0.01s !important; }

  /* Cuadrículas de Equipos (en celular) y Productos: se quedan quietas
     (sin cascada de entrada), y el colapsable "Ver más" del texto y su
     flecha siguen funcionando, solo sin la animación de expandir/rotar. */
  .product-card__text-wrap,
  .product-card__toggle-icon,
  .catalog-card,
  .catalog-card__text-wrap,
  .catalog-card__toggle-icon { transition-duration: 0.01s !important; }

  /* Botón "play" del video: sin el anillo pulsante, pero sigue
     funcionando igual al hacer click. */
  .video-feature__play::before { animation: none !important; }

  /* Galería y visor: sin zoom en hover ni animaciones de transición,
     pero el visor sigue abriendo/cerrando igual. */
  .gallery__tile,
  .gallery__tile img,
  .gallery__tile::after,
  .gallery__play,
  .lightbox__play { transition-duration: 0.01s !important; }
  .gallery__tile:hover img,
  .gallery__tile:focus-visible img { transform: none !important; }

  /* Botón flotante de WhatsApp: sin el anillo pulsante. */
  .whatsapp-float::before { animation: none !important; display: none; }
}

/* =============== Nosotros =============== */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.section-eyebrow::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}

.about {
  /* Variable de ajuste: separa "Nosotros" de "Inicio" (se veía muy
     pegada justo debajo del hero). Cambia SOLO este número —en % o en
     px, lo que prefieras— para subir o bajar la separación. */
  --about-offset-top: 7%;

  position: relative;
  margin-top: var(--about-offset-top);
  padding-top: clamp(56px, 9vh, 110px);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(260px, 440px) 1fr;
  /* "stretch" (en vez de "center"): así la columna de la imagen siempre
     ocupa el mismo alto que la columna de texto. Cuando el texto crece
     (al abrir "Ver más"), esta fila del grid crece con él y la imagen
     —que mide height:100%— crece exactamente al mismo ritmo. */
  align-items: stretch;
  gap: clamp(36px, 6vw, 84px);
  padding-bottom: clamp(84px, 13vh, 150px);
}

.about__media {
  /* Alto base (antes de expandirse): aproxima la proporción 9:10 que
     tenía la imagen, pero ahora es solo un mínimo, no un límite. */
  display: flex;
  min-height: clamp(320px, 42vw, 500px);
}

.about__media img {
  width: 100%;
  /* height:100% (en vez de aspect-ratio fijo) es lo que permite que la
     imagen "se estire" junto con el contenedor cuando la columna de
     texto se hace más alta. */
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
}

.about__heading-row {
  /* Ancla de posición para la insignia "+20", que ahora se coloca de
     forma absoluta (ver .about__badge) justo arriba de la "r" de
     "TechnoCard" — la calcula js/script.js en tiempo real. */
  position: relative;
  margin-bottom: clamp(20px, 3vh, 30px);
}

.about__heading {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 4.3rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}

/* Insignia circular "+20 Años Experiencia".
   Se posiciona SOLA (position: absolute) justo arriba de la "r" de
   "TechnoCard" dentro del encabezado — js/script.js mide en tiempo real
   dónde cae esa letra (con la fuente/tamaño/salto de línea reales de
   cada pantalla) y coloca aquí --badge-x/--badge-y. Solo hace falta
   tocar --badge-lift si quieres que quede más o menos "encima" del
   texto. Apariencia tipo "vidrio esmerilado": semitransparente y con
   desenfoque, para que se funda con el fondo en vez de tapar el texto
   con un círculo sólido. */
.about__badge {
  --badge-lift: -135%;

  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, var(--badge-lift));
  width: clamp(80px, 8vw, 106px);
  height: clamp(80px, 8vw, 106px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: linear-gradient(155deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 18px 40px rgba(18, 32, 44, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* Es decorativo y flota sobre el texto: que nunca robe clics/hover. */
  pointer-events: none;
  z-index: 4;
}
.about__badge-number {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(12, 22, 32, 0.35);
  /* Ancho fijo con tabular-nums para que el círculo no "tiemble"
     mientras el contador anima del 1 al 20. */
  font-variant-numeric: tabular-nums;
}
.about__badge-plus { margin-right: 1px; font-size: 0.65em; color: rgba(255, 255, 255, 0.85); }
.about__badge-count { min-width: 1.3ch; text-align: left; }
.about__badge-label {
  display: flex;
  flex-direction: column;
  margin-top: 3px;
  line-height: 1.15;
}
.about__badge-label-main {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.about__badge-label-sub {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.about__text {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.98rem, 1.05vw, 2.08rem);
  line-height: 1.75;
}
.about__text p { margin: 0 0 18px; }

/* Párrafo extra: colapsado por defecto, se expande con la clase .is-open
   (la agrega js/script.js al hacer click en "Ver más"). */
.about__extra {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.45s var(--ease-out), opacity 0.4s ease, transform 0.4s ease;
}
.about__extra.is-open {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}
.about__extra-inner p { margin: 0 0 8px; }

.about__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s ease;
}
.about__toggle:hover { border-color: #fff; }
.about__toggle-icon { transition: transform 0.3s var(--ease-out); }
.about__toggle[aria-expanded="true"] .about__toggle-icon { transform: rotate(180deg); }

/* Curva blanca de transición hacia la siguiente sección */
.about__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 9vh, 110px);
  display: block;
}

/* Animaciones de entrada "fade in" al hacer scroll.
   JS (script.js) agrega .is-visible vía IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.about__media.reveal { transition-delay: 0s; }
.about__heading-col.reveal { transition-delay: 0.1s; }
.about__text.reveal { transition-delay: 0.3s; }

/* La insignia ya usa "transform" para su propia posición (arriba de la
   "r"), así que su fade-in NO puede reutilizar el translateY genérico
   de ".reveal" (se pisarían los dos transforms). Aquí solo anima la
   opacidad y mantiene su posición fija en todo momento. */
.about__badge.reveal,
.about__badge.reveal.is-visible {
  transform: translate(-50%, var(--badge-lift));
}
.about__badge.reveal {
  transition: opacity 0.7s var(--ease-out) 0.2s;
}

/* =============== Productos / Equipos =============== */
.products {
  position: relative;
  /* La curva blanca de "Nosotros" termina aquí, así que esta sección
     necesita su propio fondo sólido (blanco) para continuar el remate;
     si no, se vería el degradado azul detrás de la curva. */
  background: #fff;
  padding: clamp(64px, 10vh, 120px) 0 clamp(70px, 11vh, 130px);
}

.products__intro {
  max-width: 1000px;
  margin: 0 auto clamp(40px, 6vh, 64px);
  text-align: center;
}
.products__heading {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.4vw, 3.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--sky-500);
}
.products__subtitle {
  margin: 0;
  color: #006a99;
  opacity: 0.72;
  font-size: clamp(0.98rem, 1.1vw, 2.08rem);
  line-height: 1.7;
}

/* --- Cuadrícula "portada + 3" ---
   Antes esto era un acordeón que se abría con hover/tap (probamos varias
   versiones: cubría la foto, luego el revert...). Ahora, a pedido, la
   primera tarjeta (el producto estrella) es una "portada" a todo el
   ancho, tipo portada de Facebook, y las otras tres quedan parejas
   debajo, cada una con su propio div. La foto y el texto ya no dependen
   de hover ni de tap: quedan siempre visibles (foto arriba, texto
   debajo, en flujo normal) — solo el texto largo se colapsa con
   "Ver más/Ver menos" para que la tarjeta no crezca de más. */
.products__accordion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(18, 32, 44, 0.08);
}

/* La portada ocupa toda la fila de arriba, con una foto más ancha/alta
   que las otras tres. */
.product-card--cover { grid-column: 1 / -1; }
.product-card--cover .product-card__img {
  height: clamp(220px, 30vw, 360px);
}

.product-card__img {
  display: block;
  width: 100%;
  height: clamp(190px, 22vw, 240px);
  object-fit: cover;
}

/* Panel de texto: ahora en flujo normal (ya no flota sobre la foto),
   con fondo blanco como el resto de las tarjetas del sitio.
   --panel-fade fija el color al que se difumina el texto colapsado
   (ver ".product-card__text-wrap::after" abajo). */
.product-card__panel {
  --panel-fade: #fff;

  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 26px);
  flex: 1;
}

.product-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  color: #006a99;
}

/* Texto colapsable: mismo mecanismo que ".catalog-card__text-wrap"
   (máximo alto + degradado, se expande con la clase .is-expanded).
   Cuando SÍ está expandido, se limita a un alto máximo con scroll
   propio — la tarjeta del acordeón tiene un alto fijo, así que un
   equipo con 13 puntos no puede simplemente "empujar" la tarjeta hacia
   abajo como en una cuadrícula normal. */
.product-card__text-wrap {
  position: relative;
  max-height: 5.4em;
  overflow: hidden;
}
.product-card__text-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.2em;
  background: linear-gradient(180deg, rgba(100, 186, 235, 0) 0%, var(--panel-fade) 90%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.product-card__text-wrap.is-expanded {
  max-height: 42vh;
  overflow-y: auto;
}
.product-card__text-wrap.is-expanded::after { opacity: 0; }

/* Botón de cerrar: solo se usa en el modal centrado de escritorio (ver
   media query 901px más abajo). En móvil el texto se expande en el
   mismo lugar de la tarjeta, así que este botón permanece oculto. */
.product-card__modal-close { display: none; }

/* Fondo oscuro detrás del modal de "Ver más" de Equipos (escritorio).
   Se crea una sola vez por JS y se reutiliza para las 4 tarjetas. */
.product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.product-modal-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.product-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #006a99;
}
.product-card__list li { position: relative; padding-left: 14px; }
.product-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #006a99;
}

.product-card__placeholder-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #006a99;
}

/* Botón "Ver más / Ver menos": mismo mecanismo que el de "Productos",
   solo con colores que se leen bien sobre el panel celeste. */
.product-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #006a99;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s ease;
}
.product-card__toggle:hover,
.product-card__toggle:focus-visible { color: #003f5c; }
.product-card__toggle-icon { transition: transform 0.3s var(--ease-out); }
.product-card__toggle[aria-expanded="true"] .product-card__toggle-icon { transform: rotate(180deg); }

/* "Cotizar" y "Ficha PDF" (la ficha técnica en PDF, movida aquí desde
   "Productos" a pedido) van uno al lado del otro. */
.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: #006a99;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.product-card__cta:hover {
  background: #fff;
  color: #006a99;
}

/* "Ficha PDF": versión secundaria (contorno), para que "Cotizar" siga
   siendo la acción principal. */
.product-card__cta--ghost {
  padding: 10px 20px;
  background: transparent;
  border-color: #006a99;
  color: #006a99;
}
.product-card__cta--ghost:hover {
  background: #006a99;
  border-color: #006a99;
  color: #fff;
}

/* ---------------------------------------------------------------------
   "Equipos" completo, visible sin desplazar la página en computadora:
   la tarjeta pasa a foto-izquierda/texto-derecha (mucho más compacta en
   alto que foto-arriba/texto-abajo) y toda la sección se ajusta a un
   presupuesto de alto pensado para cerrar dentro de 100vh. En celular
   (donde no aplica esta exigencia) se queda con el formato apilado de
   arriba, más cómodo de leer en una pantalla angosta. */
@media (min-width: 901px) {
  .products {
    padding: clamp(30px, 4.6vh, 44px) 0 clamp(34px, 4.8vh, 48px);
  }
  .products__intro { margin: 0 auto clamp(24px, 3.2vh, 32px); }

  .products__accordion {
    grid-template-rows: clamp(190px, 28vh, 260px) clamp(225px, 33vh, 310px);
    gap: clamp(14px, 1.6vw, 20px);
  }

  /* La tarjeta ya no recorta su contenido (overflow visible, en vez de
     hidden): así "Ver más" puede abrirse como una solapa flotante sin
     necesitar que la tarjeta crezca y sin romper el alto fijo de la
     fila (ver ".product-card__text-wrap.is-expanded" más abajo). El
     redondeado de las esquinas ahora lo pone la propia foto. */
  .product-card { flex-direction: row; height: 100%; overflow: visible; }

  .product-card__img,
  .product-card--cover .product-card__img {
    width: 38%;
    height: 100%;
    flex-shrink: 0;
    border-radius: 22px 0 0 22px;
  }

  .product-card__panel {
    position: relative;
    justify-content: center;
    gap: 9px;
    padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 28px);
  }
  .product-card__title { font-size: clamp(1.08rem, 1.25vw, 1.3rem); }
  .product-card--cover .product-card__title { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
  .product-card__text-wrap { max-height: 3.6em; }
  .product-card--cover .product-card__text-wrap { max-height: 5em; }
  .product-card__list { font-size: 0.85rem; gap: 4px; }
  .product-card__toggle { font-size: 0.8rem; }
  .product-card__actions { margin-top: 3px; gap: 8px; flex-wrap: nowrap; }
  .product-card__cta { padding: 8px 18px; font-size: 0.78rem; white-space: nowrap; }
  .product-card__cta--ghost { padding: 8px 14px; }

  /* "Ver más" abre un modal centrado en la pantalla (JS lo traslada a
     <body>) en vez de una solapa pegada a la tarjeta: la fila tiene alto
     fijo y, según qué tan abajo quede la tarjeta, no siempre hay espacio
     debajo para una solapa flotante completa (se veía cortada). Centrado
     y fijo a la ventana, el texto siempre se ve completo sin importar el
     scroll ni la posición de la tarjeta. */
  .product-card__text-wrap.is-expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 90vw);
    max-height: min(76vh, 560px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(18, 32, 44, 0.35);
    padding: 16px clamp(20px, 2.4vw, 30px) 24px;
    z-index: 999;
  }
  .product-card__text-wrap.is-expanded .product-card__modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin: -4px -6px 8px auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(28, 43, 58, 0.08);
    color: #1c2b3a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .product-card__text-wrap.is-expanded .product-card__modal-close:hover {
    background: rgba(28, 43, 58, 0.16);
  }
}


/* =============== Productos (catálogo) =============== */
.catalog {
  position: relative;
  background: #fff;
  padding: clamp(64px, 10vh, 120px) 0 clamp(80px, 12vh, 140px);
  overflow: hidden;
}
.catalog .container { position: relative; z-index: 1; }

.catalog__intro {
  max-width: 1000px;
  margin: 0 auto clamp(44px, 6vh, 68px);
  text-align: center;
}

/* Separador con hexágonos y línea punteada, como en la referencia. */
.catalog__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
  max-width: 420px;
}
.catalog__dash {
  flex: 1;
  height: 2px;
  background-image: linear-gradient(90deg, var(--sky-400) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}
.catalog__hex {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--coral);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.catalog__hex--sm {
  width: 20px;
  height: 20px;
  background: var(--sky-500);
}

.catalog__heading {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.4vw, 3.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--sky-500);
}
.catalog__subtitle {
  margin: 0;
  color: #006a99;
  font-size: clamp(0.98rem, 1.1vw, 2.08rem);
  line-height: 1.7;
}

/* --- Cuadrícula de tarjetas (4 columnas x 2 filas en escritorio) --- */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.catalog-card {
  /*
    El "lift" del hover y el desplazamiento/escala de la entrada .reveal
    conviven en la MISMA propiedad transform. Para que el hover nunca
    pierda contra .reveal.is-visible (que por tener más clases ganaría
    la pelea de especificidad si cada estado escribiera su propio
    "transform"), aquí solo se declara transform UNA vez, armado a
    partir de estas variables — :hover y .reveal/.is-visible solo
    actualizan las variables, nunca compiten entre sí.
  */
  --lift: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;

  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28, 43, 58, 0.07);
  box-shadow: 0 8px 22px rgba(18, 32, 44, 0.07);
  transform: translateY(calc(var(--reveal-y) + var(--lift))) scale(var(--reveal-scale));
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.catalog-card:hover,
.catalog-card:focus-within {
  --lift: -6px;
  box-shadow: 0 18px 34px rgba(18, 32, 44, 0.14);
}

/* Escalonado de entrada: las 8 tarjetas aparecen en cascada al hacer
   scroll (reutiliza el sistema genérico .reveal, solo agrega una
   pequeña escala y un retraso distinto por tarjeta). */
.catalog-card.reveal {
  --reveal-y: 30px;
  --reveal-scale: 0.94;
  /*
    El genérico ".reveal.is-visible" (más abajo en el archivo, para las
    demás secciones) también fija "transform" con la misma especificidad
    que ".catalog-card.reveal". Para que el "--lift" del hover nunca
    pierda esa pelea, repetimos aquí la fórmula completa (en vez de
    dejar que la escriba solo la regla base ".catalog-card").
  */
  transform: translateY(calc(var(--reveal-y) + var(--lift))) scale(var(--reveal-scale));
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.catalog-card.reveal.is-visible {
  --reveal-y: 0px;
  --reveal-scale: 1;
  transform: translateY(calc(var(--reveal-y) + var(--lift))) scale(var(--reveal-scale));
}
.catalog__grid .catalog-card:nth-child(1) { transition-delay: 0s; }
.catalog__grid .catalog-card:nth-child(2) { transition-delay: 0.08s; }
.catalog__grid .catalog-card:nth-child(3) { transition-delay: 0.16s; }
.catalog__grid .catalog-card:nth-child(4) { transition-delay: 0.24s; }
.catalog__grid .catalog-card:nth-child(5) { transition-delay: 0.08s; }
.catalog__grid .catalog-card:nth-child(6) { transition-delay: 0.16s; }
.catalog__grid .catalog-card:nth-child(7) { transition-delay: 0.24s; }
.catalog__grid .catalog-card:nth-child(8) { transition-delay: 0.32s; }

/* Foto del producto: reemplaza al ícono hexagonal. Fondo blanco liso
   (las fotos ya vienen sobre fondo blanco) y "object-fit: contain" para
   que ninguna se recorte, sin importar su proporción original. */
.catalog-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(130px, 15vw, 170px);
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid rgba(28, 43, 58, 0.06);
}
.catalog-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Estado sin foto todavía (tarjeta "Kit ECG"): un patrón discreto en
   vez de dejar la caja vacía o de foto rota. */
.catalog-card__media--empty {
  flex-direction: column;
  gap: 6px;
  color: rgba(28, 43, 58, 0.32);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: repeating-linear-gradient(135deg, rgba(28, 43, 58, 0.035) 0 10px, rgba(28, 43, 58, 0.07) 10px 20px);
}

.catalog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 22px 24px;
  flex: 1;
}

.catalog-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  color: #006a99;
}

/* Texto colapsable: se recorta a una altura fija con un degradado que
   lo "desvanece" al final, y el botón "Ver más" lo expande del todo. */
.catalog-card__text-wrap {
  position: relative;
  max-height: 6.4em;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out);
}
.catalog-card__text-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.catalog-card__text-wrap.is-expanded {
  max-height: 900px;
}
.catalog-card__text-wrap.is-expanded::after { opacity: 0; }

.catalog-card__list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #006a99;
}
.catalog-card__list + .catalog-card__note,
.catalog-card__note + .catalog-card__list {
  margin-top: 10px;
}
.catalog-card__list li + li { margin-top: 4px; }

.catalog-card__note {
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #33475a;
}

.catalog-card__placeholder-text {
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  color: rgba(51, 71, 90, 0.7);
}

.catalog-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--sky-500);
  cursor: pointer;
  transition: color 0.2s ease;
}
.catalog-card__toggle:hover,
.catalog-card__toggle:focus-visible { color: #006a99; }
.catalog-card__toggle-icon { transition: transform 0.3s var(--ease-out); }
.catalog-card__toggle[aria-expanded="true"] .catalog-card__toggle-icon { transform: rotate(180deg); }

.catalog-card__cta {
  /* Mismo azul oscuro (#006a99) que usaste en las tarjetas de "Equipos":
     da mejor contraste con el texto blanco que --sky-500. */
  margin-top: auto;
  padding: 8px 22px;
  border-radius: 999px;
  background: #006a99;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}
.catalog-card__cta:hover {
  background: var(--sky-500);
  color: #fff;
}

/* =============== Video ============ */
.video-feature {
  position: relative;
  background: #fff;
}

.video-feature__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 42vw, 560px);
  overflow: hidden;
}

.video-feature__bg,
.video-feature__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-feature__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 22, 32, 0.5) 0%, rgba(12, 22, 32, 0.28) 45%, rgba(12, 22, 32, 0.55) 100%);
}

/* El <video> real queda invisible y sin recibir clics hasta que se
   presiona "play" — antes de eso, lo que se ve es la imagen de fondo
   (.video-feature__bg) + la capa oscura (.video-feature__overlay). */
.video-feature__player {
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-feature.is-playing .video-feature__player {
  opacity: 1;
  pointer-events: auto;
}
.video-feature.is-playing .video-feature__bg,
.video-feature.is-playing .video-feature__overlay,
.video-feature.is-playing .video-feature__play {
  opacity: 0;
  pointer-events: none;
}

/* Botón circular "play", con un anillo que pulsa suavemente para llamar
   la atención (se apaga con "movimiento reducido"). */
.video-feature__play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease-out), background 0.2s ease;
}
.video-feature__play svg { margin-left: 4px; } /* centrado óptico del triángulo */
.video-feature__play:hover,
.video-feature__play:focus-visible { transform: scale(1.08); background: #fff; }

.video-feature__play::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.65);
  animation: video-play-pulse 2.4s ease-out infinite;
}
@keyframes video-play-pulse {
  0% { transform: scale(0.88); opacity: 0.9; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}

/* Aviso breve: aparece si tocan "play" antes de que exista un video real. */
.video-feature__pending-note {
  position: absolute;
  z-index: 2;
  bottom: clamp(14%, 16vw, 18%);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  max-width: min(88%, 420px);
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(12, 22, 32, 0.82);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.video-feature.is-pending .video-feature__pending-note {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.video-feature__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 9vh, 110px);
  z-index: 1;
}

/* --- OPCIÓN 1 (activa): mismo espacio de la imagen, formato banner ---
   Ancho completo (100%), pero con la mitad de alto que un 16:9 normal
   (proporción 32:9): como el video de fondo es 16:9, se recorta un
   poco arriba/abajo (con object-fit: cover) para verse como una
   franja de banner más delgada. Si luego quieres el alto completo sin
   recortar, cambia 32/9 por 16/9 en la siguiente línea. */
.video-feature__media--wide {
  height: auto;
  aspect-ratio: 32 / 9;
}

/* --- OPCIÓN 2 (comentada por defecto): recuadro/caja disparadora ---
   Mismo look que la caja de siempre (imagen + botón "play"), pero al
   presionar "play" no revela un <video> aquí mismo: abre el modal de
   abajo. Por eso no incluye <video> ni el aviso "pendiente" propios. */
.video-feature__media--modal-trigger { cursor: pointer; }

/* =============== Modal de video (OPCIÓN 2) =============== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 22, 32, 0.88);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.video-modal__player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}

.video-modal__pending-note {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  max-width: min(88%, 380px);
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(12, 22, 32, 0.85);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.video-modal.is-pending .video-modal__pending-note {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =============== Galería ============ */
.gallery {
  position: relative;
  background: #fff;
  padding: clamp(56px, 9vh, 100px) 0 clamp(70px, 11vh, 120px);
}

.gallery__intro {
  margin: 0 auto clamp(28px, 4.5vh, 46px);
}
.gallery__heading {
  margin: 0;
  font-family: var(--font-heading);
}
.gallery__heading-line {
  display: block;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #006a99;
}
.gallery__heading-line:last-child { color: #006a99; }
.gallery__question {
  display: inline-block;
  margin-left: 14px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.4em;
  letter-spacing: 0;
  text-transform: none;
  color: #006a99;
  vertical-align: middle;
}

/* --- Cuadrícula "bento" (desnivel de tamaños, como tu referencia) --- */
.gallery__grid {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 3fr 2fr 2fr 2fr;
  grid-template-rows: 1fr 1fr 0.5fr 1fr 1fr;
  grid-template-areas:
    "na    ch    he    do   laptop  kit      kit"
    "na    chest hero  mock laptop  kit      kit"
    "na    chest hero  mock dog     biomedic bio"
    "video video video mock dog     biomedic  bio"
    "video video video mock dog     biom       bio";

  gap: clamp(12px, 1.6vw, 20px);
  height: clamp(560px, 58vw, 760px);
}
.gallery__item { min-width: 0; min-height: 0; }

.gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(18, 32, 44, 0.1);
  transition: box-shadow 0.35s var(--ease-out);
}
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.gallery__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 22, 32, 0) 55%, rgba(12, 22, 32, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery__tile:hover,
.gallery__tile:focus-visible {
  box-shadow: 0 18px 36px rgba(18, 32, 44, 0.22);
}
.gallery__tile:hover img,
.gallery__tile:focus-visible img { transform: scale(1.06); }
.gallery__tile:hover::after,
.gallery__tile:focus-visible::after { opacity: 1; }

.gallery__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 4.2vw, 58px);
  height: clamp(44px, 4.2vw, 58px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  transition: transform 0.3s var(--ease-out), background 0.2s ease;
}
.gallery__play svg { margin-left: 2px; }
.gallery__tile--video:hover .gallery__play,
.gallery__tile--video:focus-visible .gallery__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

/* --- Visor en grande (lightbox) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 20, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  max-width: min(960px, 94vw);
  max-height: 88vh;
}

.lightbox__close {
  position: absolute;
  top: clamp(-52px, -6vw, -40px);
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.3); }

.lightbox__nav {
  flex: 0 0 auto;
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.3); }

.lightbox__figure {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__img,
.lightbox__video {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  border-radius: 14px;
  object-fit: contain;
  background: #0c1620;
}
.lightbox__img[hidden],
.lightbox__video[hidden] { display: none; }
.lightbox__caption {
  margin: 14px 0 0;
  color: #fff;
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.85;
}

.lightbox__play[hidden] { display: none; } /* el "display:flex" de abajo, al ser CSS de autor, gana sobre la regla [hidden] del navegador si no se repite aquí */
.lightbox__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-out), background 0.2s ease;
}
.lightbox__play svg { margin-left: 3px; }
.lightbox__play:hover,
.lightbox__play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

.lightbox__pending-note {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  max-width: min(88%, 380px);
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(12, 22, 32, 0.85);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.lightbox.is-pending .lightbox__pending-note {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =============== Contacto =============== */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vh, 120px) 0;
}

.contact__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact__overlay {
  position: absolute;
  inset: 0;
  /* Capa translúcida azul, como en tu referencia: dominan los tonos
     "sky" del sitio en vez del navy oscuro de otras secciones. */
  background: linear-gradient(160deg, rgba(74, 166, 210, 0.82) 0%, rgba(56, 128, 168, 0.86) 55%, rgba(28, 43, 58, 0.82) 100%);
}

.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.contact__panel .section-eyebrow { color: rgba(255, 255, 255, 0.85); }

.contact__heading {
  margin: 0 0 clamp(24px, 4vh, 40px);
  max-width: 14ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact__field { min-width: 0; }

.contact__form input,
.contact__form textarea {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  resize: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.contact__form textarea { min-height: 150px; }
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.contact__form input:hover,
.contact__form textarea:hover { background: rgba(255, 255, 255, 0.28); }
.contact__form input:focus-visible,
.contact__form textarea:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.contact__submit {
  align-self: flex-start;
  margin-top: 8px;
  cursor: pointer;
}

.contact__form-note {
  margin: 6px 0 0;
  min-height: 1.4em;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.contact__form-note.is-visible { opacity: 1; transform: translateY(0); }

.contact__map-col {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
}

.contact__map-frame {
  position: relative;
  width: 100%;
  height: clamp(320px, 34vw, 480px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(12, 22, 32, 0.35);
}
.contact__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.contact__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}
.contact__meta-item svg { flex-shrink: 0; margin-top: 2px; }
.contact__meta-item a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__meta-item a:hover { color: var(--sky-100); }

/* =============== Botón flotante de WhatsApp =============== */
.whatsapp-float {
  position: fixed;
  right: clamp(18px, 4vw, 32px);
  bottom: clamp(18px, 4vw, 32px);
  z-index: 900;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(18, 32, 44, 0.35);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: whatsapp-ping 2.4s ease-out infinite;
}
@keyframes whatsapp-ping {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(18, 32, 44, 0.45);
}

/* =============== Responsive =============== */
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav-menu {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 32px 28px;
    box-shadow: 0 12px 24px rgba(28, 43, 58, 0.12);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-menu.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav-links a { color: var(--navy); }
  .social-icons a { background: rgba(28,43,58,0.08); color: var(--navy); }
  .nav-toggle { display: flex; }

  /* El texto grande decorativo ya no queda tan pegado al header en
     pantallas angostas (ver también el bloque de tipografía del hero
     más abajo, en el media query de 640px). */
  .hero__watermark { top: 10%; }

  .about__inner {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .about__media { max-width: 360px; margin: 0 auto; }
  .about__heading { max-width: none; }

  /* La insignia "+20" se posiciona sola (JS) justo arriba de la "r" de
     "TechnoCard", pensada para cuando ese texto cabe en una sola línea.
     En pantallas angostas el encabezado pasa a dos líneas y esa misma
     insignia terminaba tapando la primera línea ("¿Qué es"). Aquí se
     desactiva su posición flotante: pasa a fluir normal, debajo del
     encabezado, sin taparlo nunca. */
  .about__heading-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .about__badge,
  .about__badge.reveal,
  .about__badge.reveal.is-visible {
    /* !important: gana incluso combinado con "movimiento reducido" (ver
       ese media query más arriba, que también restaura esta misma
       propiedad con !important para cuando SÍ flota sobre el texto). */
    position: static !important;
    transform: none !important;
  }

  /* Equipos en pantallas angostas: las 3 tarjetas de abajo pasan de 3 a
     2 columnas (la portada sigue ocupando toda la fila de arriba). */
  .products__accordion { grid-template-columns: repeat(2, 1fr); }
  .product-card--cover .product-card__img { height: clamp(190px, 46vw, 260px); }

  .catalog__grid { grid-template-columns: repeat(2, 1fr); }

  /* La cuadrícula "bento" (con recuadros de tamaños distintos) no cabe en
     una pantalla angosta, así que aquí se apila: una columna, cada
     recuadro con su propio alto fijo, en el mismo orden que en el HTML. */
  .gallery__grid {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .gallery__item { width: 100%; }
  .gallery__tile { height: clamp(220px, 60vw, 320px); }

  .contact__inner { grid-template-columns: 1fr; }
  .contact__heading { max-width: none; }
  .contact__form { max-width: none; }
}

@media (max-width: 560px) {
  .catalog__grid { grid-template-columns: 1fr; }
  .products__accordion { grid-template-columns: 1fr; }

  /* En pantallas muy angostas, achica un poco más las flechas y la
     imagen para que las tres columnas (prev / imagen / next) quepan
     cómodas sin apretarse. */
  .lightbox__nav { width: 34px; height: 34px; }
  .lightbox__img,
  .lightbox__video { max-height: 62vh; }
}

@media (max-width: 480px) {
  .btn--pill { padding: clamp(10px, 2vh, 14px) 34px; }

  /* Insignia un poco más chica en móvil, para no verse enorme junto al
     encabezado (ya no flota sobre el texto en esta pantalla — ver el
     media query de 900px — así que esto solo la achica un poco). */
  .about__badge {
    width: clamp(60px, 19vw, 78px);
    height: clamp(60px, 19vw, 78px);
  }
  .about__badge-number { font-size: clamp(1.1rem, 4.6vw, 1.35rem); }
}

/* Pantallas de altura media (laptops de 720p-768p) */
@media (max-height: 760px) {
  .hero__slider-track { height: calc(clamp(180px, 40vh, 380px) * var(--product-scale)); }
}

/* Viewports muy bajos (celular en horizontal, laptops chicas) */
@media (max-height: 620px) {
  .hero__slider-track { height: calc(clamp(140px, 34vh, 260px) * var(--product-scale)); }
  .hero__heading { margin: 2px 0 clamp(8px, 2vh, 16px); }
}

/* =====================================================
   INICIO / HERO — celulares angostos
   El texto grande ("EQUIPAMIENTO PROFESIONAL") y el texto de fondo
   ("BIOMEDIC ECG") usaban tamaños pensados para pantallas anchas: en
   celulares (390-430px) el "clamp()" caía siempre en su tope mínimo,
   que resultaba demasiado grande para el ancho real. Eso hacía que las
   letras se salieran/encimaran y que el texto de fondo quedara pegado
   al header. Aquí se les da un tamaño y una posición pensados
   específicamente para este ancho.
   ===================================================== */
@media (max-width: 640px) {
  .hero__watermark {
    top: 12%;
    font-size: clamp(2rem, 15vw, 3.2rem);
    letter-spacing: 0.005em;
  }
  .hero__watermark-word { letter-spacing: 0.14em; }

  .hero__stroke-text {
    font-size: clamp(1.9rem, 9.5vw, 2.6rem);
    line-height: 1.05;
  }
  .hero__subline {
    gap: 10px;
    font-size: clamp(1.1rem, 6vw, 1.6rem);
  }
  .hero__heading { margin: 4px 0 clamp(10px, 2.4vh, 20px); }

  /* Video banner: la proporción 32:9 ("franja panorámica") se pensó
     para pantallas anchas; en un celular angosto esa misma proporción
     da una tira demasiado delgada para verse bien. Aquí se usa una
     proporción más alta (16:9) solo en celulares, para que el video se
     vea más grande y cómodo sin perder el formato panorámico. */
  .video-feature__media--wide {
    aspect-ratio: 16 / 9;
  }
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(48px, 8vh, 76px) 0 clamp(36px, 6vh, 56px);
}

.footer__col--brand .footer__logo { margin-bottom: 14px; }
.footer__col--brand .logo__text { color: #fff; }

.footer__tagline {
  margin: 0 0 20px;
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.footer__social a { background: rgba(255, 255, 255, 0.12); color: #fff; }
.footer__social a:hover { background: var(--sky-500); color: #fff; }

.footer__col-title {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer__links a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer__contact-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.footer__contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--sky-400); }
.footer__contact-item a { color: rgba(255, 255, 255, 0.78); }
.footer__contact-item a:hover { color: #fff; }

.footer__cta { padding: 12px 30px; font-size: 0.85rem; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); }

.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal a { color: rgba(255, 255, 255, 0.6); }
.footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Portada por categoría: Humano / Veterinario ===== */
.tc-home{position:relative;min-height:calc(100svh - var(--header-h));background:#102b3c;color:white;font-family:var(--font-heading);overflow:hidden}
.tc-chooser{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--header-h))}
.tc-choice{position:relative;display:block;min-height:560px;padding:0;overflow:hidden;text-align:left;color:white;background:#17364a;isolation:isolate}
.tc-choice img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .8s var(--ease-out)}
.tc-choice:hover img,.tc-choice:focus-visible img{transform:scale(1.055)}
.tc-choice:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,34,.08) 20%,rgba(10,24,34,.2) 52%,rgba(10,24,34,.82) 100%)}
.tc-choice__copy{position:absolute;z-index:1;bottom:9%;left:10%;right:7%;display:flex;flex-direction:column;align-items:flex-start}
.tc-choice__copy strong{font-size:clamp(2rem,3.5vw,3.5rem);font-weight:800;letter-spacing:.055em;line-height:1.12}
.tc-choice__copy small{font-size:clamp(.85rem,1.15vw,1rem);color:#b8e1f0;margin-top:8px}
.tc-choice__copy em{font-style:normal;font-size:.75rem;font-weight:800;letter-spacing:.12em;border-bottom:2px solid var(--coral);padding-bottom:8px;margin-top:22px}
.tc-slider{position:relative;min-height:calc(100svh - var(--header-h));background:#0e293c}
.tc-slider[hidden]{display:none!important}
.tc-slides{position:absolute;inset:0}
.tc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease}
.tc-slide.is-active{opacity:1;visibility:visible}
.tc-slide img{width:100%;height:100%;max-width:none;object-fit:cover}
.tc-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,30,.88),rgba(6,20,30,.22) 80%)}
.tc-slide__info{position:absolute;z-index:1;top:50%;left:10%;transform:translateY(-50%);max-width:550px}
.tc-slide__info span{color:#a8e0f5;font-size:.78rem;font-weight:700;letter-spacing:.18em}
.tc-slide__info h2{font-size:clamp(2rem,4vw,3.75rem);line-height:1.1;margin:16px 0;color:#fff}
.tc-slide__info p{font-size:1rem;line-height:1.7;color:#e3f0f6}
.tc-back{position:absolute;z-index:4;top:26px;left:5%;background:rgba(23,62,84,.84);color:#fff;border:1px solid #ffffff55;border-radius:40px;padding:12px 20px;font-weight:600}
.tc-controls{position:absolute;z-index:4;bottom:7%;right:5%;display:flex;align-items:center;gap:14px;color:#fff}
.tc-controls button{width:46px;height:46px;border:1px solid #ffffff88;border-radius:50%;background:rgba(23,62,84,.84);color:white;font-size:1.5rem}
.tc-back:hover,.tc-controls button:hover{background:#24627f}
@media(max-width:700px){.tc-chooser{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.tc-choice{min-height:42svh}.tc-choice__copy{left:7%;bottom:9%}.tc-choice__copy strong{font-size:1.8rem}.tc-choice__copy em{margin-top:12px}.tc-slider{min-height:calc(100svh - var(--header-h))}.tc-slide__info{top:auto;bottom:18%;left:7%;right:7%;transform:none}.tc-slide__info h2{font-size:2rem}.tc-back{top:14px;left:7%}.tc-controls{bottom:4%}}
@media(prefers-reduced-motion:reduce){.tc-choice img,.tc-slide{transition:none}}

/* Ajustes exclusivos de Home: selección sin separación y controles accesibles */
.tc-chooser[hidden]{display:none!important}
.tc-chooser{gap:0}
.tc-choice{border-radius:0}
.tc-choice__copy{left:7%;right:7%;align-items:center;text-align:center}
.tc-slider{height:calc(100svh - var(--header-h));min-height:560px}
.tc-slide{pointer-events:none}
.tc-slide.is-active{pointer-events:auto}
.tc-slide img{object-fit:contain;object-position:70% center;padding:clamp(55px,7vw,100px);background:radial-gradient(circle at 75% 45%,#d3ecf7 0%,#79b5d1 43%,#17394f 100%)}
.tc-slide:after{background:linear-gradient(90deg,rgba(6,20,30,.93) 0%,rgba(6,20,30,.70) 38%,rgba(6,20,30,0) 76%);pointer-events:none}
.tc-controls{bottom:6%}
.tc-dots{display:flex;gap:9px;align-items:center}
.tc-dot{height:9px;width:9px;border-radius:50%;padding:0;background:#ffffff77;border:0;transition:transform .2s,background .2s}
.tc-dot.is-active{background:#fff;transform:scale(1.3)}
.tc-controls .tc-dot{width:9px;height:9px;background:#ffffff77;border:0}
.tc-controls .tc-dot.is-active{background:#fff}
.tc-choice:focus-visible,.tc-back:focus-visible,.tc-controls button:focus-visible{outline:3px solid #3fd8c2;outline-offset:-3px}
@media(max-width:700px){.tc-choice__copy{align-items:center;left:5%;right:5%}.tc-slider{min-height:calc(100svh - var(--header-h))}.tc-slide img{object-position:center 35%;padding:65px 18px 40%;}.tc-slide:after{background:linear-gradient(0deg,rgba(6,20,30,.95),rgba(6,20,30,.2) 70%)}.tc-slide__info{bottom:16%}.tc-controls{bottom:3%;right:7%}.tc-dots{gap:5px}}


/* =====================================================
   NOSOTROS — Edición premium 2026 (solo esta sección)
   ===================================================== */
.about { isolation: isolate; --about-offset-top: 5%; padding-top: clamp(64px, 10vh, 124px); }
.about::before { content:""; position:absolute; width:min(52vw,740px); aspect-ratio:1; right:-16%; top:0; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%); pointer-events:none; }
.about__inner { grid-template-columns:minmax(290px,.95fr) minmax(0,1.05fr); gap:clamp(38px,6vw,100px); align-items:center; padding-bottom:clamp(100px,14vh,168px); }
.about__media { position:relative; min-height:clamp(360px,42vw,540px); align-self:stretch; padding:20px; border:1px solid rgba(255,255,255,.42); border-radius:36px; background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04)); box-shadow:0 28px 80px rgba(9,63,93,.18),inset 0 1px rgba(255,255,255,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.about__media::before,.about__media::after { content:""; position:absolute; width:76px; height:76px; pointer-events:none; z-index:2; }
.about__media::before { left:8px; top:8px; border-top:2px solid rgba(255,255,255,.9); border-left:2px solid rgba(255,255,255,.9); border-radius:25px 0 0 0; }
.about__media::after { right:8px; bottom:8px; border-right:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9); border-radius:0 0 25px 0; }
.about__media img { position:relative; z-index:1; width:100%; height:100%; min-height:320px; object-fit:contain; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(12,77,116,.10)); }
.about__media-orbit { position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.42); border-radius:50%; right:-28px; top:-35px; z-index:0; box-shadow:0 0 0 24px rgba(255,255,255,.055),0 0 0 48px rgba(255,255,255,.035); }
.about__media-label { position:absolute; left:36px; bottom:36px; z-index:3; display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(13,65,98,.86); color:white; font-size:.63rem; font-weight:700; letter-spacing:.13em; box-shadow:0 10px 25px rgba(6,35,58,.18); }
.about__live-dot { width:7px; height:7px; flex:none; border-radius:50%; background:#58e5ce; box-shadow:0 0 0 4px rgba(88,229,206,.16); }
.about__content { position:relative; padding:18px 0; }
.about__topline { display:flex; align-items:center; gap:14px; margin-bottom:24px; color:rgba(255,255,255,.85); font-size:.65rem; font-weight:700; letter-spacing:.16em; }
.about__topline span:first-child { width:46px; height:2px; flex:none; background:#fff; }
.about__heading-row { margin-bottom:26px; }
.about__heading { max-width:none; font-size:clamp(2.5rem,4.5vw,5.1rem); letter-spacing:-.055em; line-height:1; text-shadow:0 8px 30px rgba(16,83,117,.10); }
.about__heading-period { color:#67f1df; }
.about__statement { max-width:19ch; margin:22px 0 0; color:white; font-weight:650; font-size:clamp(1.3rem,2.1vw,2.15rem); line-height:1.23; letter-spacing:-.035em; }
.about__text { max-width:590px; font-size:clamp(.96rem,1.05vw,1.1rem); line-height:1.8; color:rgba(255,255,255,.89); }
.about__text > p:first-child { padding-left:20px; border-left:2px solid rgba(255,255,255,.65); }
.about__features { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 22px; }
.about__features span { display:inline-flex; padding:7px 12px; border:1px solid rgba(255,255,255,.36); border-radius:999px; background:rgba(255,255,255,.11); color:white; font-size:.7rem; font-weight:600; letter-spacing:.015em; }
.about__toggle { border:1px solid rgba(255,255,255,.72); border-radius:999px; padding:11px 20px; font-size:.76rem; background:rgba(255,255,255,.08); transition:background .25s ease,border-color .25s ease; }
.about__toggle:hover { background:rgba(255,255,255,.22); border-color:#fff; }
@media (max-width:900px) {
 .about__inner { grid-template-columns:1fr; gap:36px; }
 .about__media { min-height:340px; max-width:650px; width:100%; margin:0 auto; }
 .about__content { padding:0 2px; }
 .about__heading { font-size:clamp(2.5rem,9vw,4.5rem); }
}
@media (max-width:540px) {
 .about { padding-top:64px; }
 .about__media { min-height:290px; padding:12px; border-radius:25px; }
 .about__media img { min-height:260px; }
 .about__media-label { left:22px; bottom:22px; font-size:.53rem; padding:9px 12px; }
 .about__topline { font-size:.53rem; letter-spacing:.09em; }
 .about__heading { font-size:clamp(2.2rem,10vw,3.2rem); }
 .about__statement { font-size:1.45rem; }
 .about__features { gap:7px; }
 .about__features span { font-size:.65rem; }
}
@media (prefers-reduced-motion:reduce) { .about__media, .about__features { animation:none; } }

/* NOSOTROS — prueba visual: inversión de cristales y lectura destacada */
.about__media {
  background:linear-gradient(145deg,rgba(14,115,177,.58),rgba(0,86,147,.36) 58%,rgba(16,120,173,.23));
  border:1px solid rgba(183,237,255,.67);
  box-shadow:0 28px 80px rgba(5,54,96,.23),inset 0 1px 0 rgba(255,255,255,.48);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.about__media img {background:linear-gradient(145deg,rgba(29,145,207,.25),rgba(8,78,137,.23));}
.about__media-label {
  background:rgba(245,252,255,.79);color:#064b73;
  border:1px solid rgba(255,255,255,.91);
  box-shadow:0 12px 30px rgba(8,61,101,.15);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.about__live-dot {background:#0a8ab6;box-shadow:0 0 0 4px rgba(10,138,182,.15);}
.about__content {
  padding:clamp(25px,3.4vw,48px);
  border:1px solid rgba(255,255,255,.37);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(10,70,112,.53),rgba(19,104,150,.31) 65%,rgba(12,66,107,.46));
  box-shadow:0 24px 64px rgba(8,58,93,.16),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
}
.about__heading {text-shadow:0 4px 24px rgba(0,35,65,.32);}
.about__statement {text-shadow:0 2px 12px rgba(0,36,66,.25);}
.about__text {color:rgba(255,255,255,.97);text-shadow:0 1px 5px rgba(0,37,64,.16);}
.about__text > p:first-child {border-left:3px solid #8ef2e4;padding-left:19px;}
.about__features span {background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.49);}
@media(max-width:540px){.about__content{padding:24px 20px;border-radius:23px}.about__heading{font-size:clamp(2.05rem,9.5vw,3.2rem)}}

/* NOSOTROS — integración fiel a la referencia aprobada, sin afectar otras secciones */
.about.about--editorial{margin-top:4%;padding:75px 0 0;overflow:hidden;background:radial-gradient(ellipse at 5% 65%,rgba(21,165,223,.42),transparent 52%),linear-gradient(125deg,#b8e5f9 0%,#d9f1fb 42%,#a8d7f3 100%);isolation:isolate}
.about--editorial:before{width:70%;height:100%;top:0;right:-20%;border-radius:0;background:linear-gradient(132deg,transparent 25%,rgba(255,255,255,.37) 26%,rgba(255,255,255,.10) 56%,transparent 57%);z-index:-1}
.about--editorial .about__inner{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(24px,3vw,55px);align-items:center;padding-bottom:130px;max-width:1380px}
.about--editorial .about__media{min-height:480px;align-self:center;padding:22px;border-radius:35px;background:linear-gradient(135deg,rgba(3,110,194,.88),rgba(18,151,215,.65) 55%,rgba(5,83,169,.8));border:1px solid rgba(255,255,255,.78);box-shadow:0 26px 55px rgba(11,86,147,.24),inset 0 2px 0 rgba(255,255,255,.65);transform:rotate(-1.3deg)}
.about--editorial .about__media:before{width:95%;height:90%;top:-15px;left:5%;border:2px solid rgba(255,255,255,.6);border-radius:35px;z-index:-1}
.about--editorial .about__media:after{width:95%;height:90%;bottom:-18px;right:4%;border:2px solid rgba(255,255,255,.5);border-radius:35px;z-index:-1}
.about--editorial .about__media img{min-height:440px;height:100%;object-fit:cover;object-position:center;border-radius:25px;transform:rotate(1.3deg);box-shadow:0 8px 30px rgba(3,65,121,.19)}
.about--editorial .about__media-orbit{display:none}
.about--editorial .about__media-label{left:4%;bottom:8%;right:7%;border-radius:22px;display:flex;gap:17px;align-items:center;padding:22px 20px;background:rgba(248,253,255,.78);border:1px solid rgba(255,255,255,.95);color:#103c6d;box-shadow:0 15px 40px rgba(3,64,112,.18);font-size:clamp(.65rem,.9vw,.85rem);letter-spacing:.025em;line-height:1.25;transform:rotate(1.3deg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.about--editorial .about__label-icon{font-size:2.8rem;color:#ff6256;line-height:1}
.about--editorial .about__label-detail{margin-left:auto;padding-left:18px;border-left:1px solid rgba(27,105,166,.35);font-weight:400;letter-spacing:0;color:#365978;font-size:.9em}
.about--editorial .about__content{padding:clamp(25px,3vw,46px);background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.75);border-radius:35px;box-shadow:0 22px 55px rgba(24,91,144,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.about--editorial .about__topline{color:#547ca8;font-size:.85rem;letter-spacing:.24em;margin-bottom:16px}
.about--editorial .about__topline span:first-child{background:#ff6457}
.about--editorial .about__heading-row{margin-bottom:22px}
.about--editorial .about__heading{font-size:clamp(2.8rem,5vw,5.5rem);color:#0c2e61;text-transform:none;letter-spacing:-.065em;line-height:1.04;text-shadow:none}
.about--editorial .about__heading span{color:#ff6156}
.about--editorial .about__statement{max-width:none;margin:16px 0 0;color:#113c70;font-size:clamp(1.25rem,1.9vw,1.85rem);letter-spacing:-.02em;line-height:1.3;text-shadow:none}
.about--editorial .about__text{max-width:none;color:#365477;text-shadow:none;font-size:clamp(.95rem,1.06vw,1.04rem);line-height:1.7}
.about--editorial .about__text>p:first-child{border:0;padding:0}
.about--editorial .about__features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.about--editorial .about__features span{display:flex;align-items:center;gap:9px;padding:13px 10px;border:1px solid rgba(255,255,255,.86);border-radius:18px;background:rgba(255,255,255,.55);color:#163c6b;font-size:clamp(.58rem,.73vw,.74rem);line-height:1.45;letter-spacing:0;box-shadow:0 6px 20px rgba(46,115,167,.07)}
.about--editorial .about__features b{font-size:1.8rem;color:#1179bf;font-weight:400}
.about--editorial .about__toggle{display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border-radius:50px;background:#ff5d50;border:0;color:#fff;font-size:.92rem;font-weight:700;box-shadow:0 12px 26px rgba(255,93,80,.23)}
.about--editorial .about__toggle:hover{background:#e84d42}
.about--editorial .about__extra-inner p{color:#365477}
@media(max-width:1000px){.about--editorial .about__inner{grid-template-columns:1fr;gap:38px;max-width:740px}.about--editorial .about__media{width:100%;max-width:none;min-height:380px}.about--editorial .about__media img{min-height:360px}.about--editorial .about__content{padding:32px}}
@media(max-width:540px){.about.about--editorial{padding-top:45px}.about--editorial .about__inner{padding-bottom:100px}.about--editorial .about__media{min-height:280px;padding:12px}.about--editorial .about__media img{min-height:290px}.about--editorial .about__media-label{left:3%;right:3%;bottom:6%;padding:12px;gap:8px;font-size:.58rem}.about--editorial .about__label-icon{font-size:1.8rem}.about--editorial .about__label-detail{padding-left:8px}.about--editorial .about__content{padding:25px 19px}.about--editorial .about__heading{font-size:clamp(2.7rem,12vw,4.2rem)}.about--editorial .about__features{gap:5px}.about--editorial .about__features span{padding:9px 6px;flex-direction:column;text-align:center;font-size:.53rem}.about--editorial .about__features b{font-size:1.5rem}}


/* Ajustes solicitados: imagen sin texto, contenido sin panel, iconos sin tarjetas */
.about--editorial .about__content{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:clamp(18px,2.5vw,36px) 0;
}
.about--editorial .about__features{gap:16px}
.about--editorial .about__features span{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:9px 0;
  gap:10px;
}
.about--editorial .about__features b{
  display:inline-flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
}
.about--editorial .about__features svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:540px){
 .about--editorial .about__content{padding:16px 0}
 .about--editorial .about__features span{padding:6px 0}
 .about--editorial .about__features b{width:29px;height:29px}
 .about--editorial .about__features svg{width:26px;height:26px}
}

/* Nosotros pegado al Inicio */
.about.about--editorial{margin-top:0!important;--about-offset-top:0;}

/* Refinamiento solicitado: un único contorno blanco, alineado al marco azul */
.about.about--editorial .about__media::before{
  content:none !important;
  display:none !important;
}
.about.about--editorial .about__media::after{
  content:"";
  display:block;
  position:absolute;
  inset:10px;
  width:auto;
  height:auto;
  top:10px;
  right:10px;
  bottom:10px;
  left:10px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:27px;
  box-shadow:0 0 0 1px rgba(20,125,190,.09);
  pointer-events:none;
  z-index:2;
}
@media(max-width:540px){
  .about.about--editorial .about__media::after{
    inset:6px;
    top:6px;right:6px;bottom:6px;left:6px;
    border-radius:30px;
  }
}

/* Nosotros: enlace de lectura arriba de los iconos, sin caja coral */
.about.about--editorial .about__toggle{
  display:inline-flex;align-items:center;gap:12px;
  margin:22px 0 10px;padding:5px 0;
  background:transparent!important;border:0!important;border-radius:0!important;
  color:#104f86!important;box-shadow:none!important;
  font-weight:700;font-size:1rem;line-height:1.5;
  text-decoration:none;transition:color .2s ease;
}
.about.about--editorial .about__toggle:hover,
.about.about--editorial .about__toggle:focus-visible{
  background:transparent!important;color:#087bbd!important;box-shadow:none!important;
}
.about.about--editorial .about__toggle span:last-child{
  font-size:1.35rem;transition:transform .2s ease;
}
.about.about--editorial .about__toggle:hover span:last-child{transform:translateX(5px)}
.about.about--editorial .about__features{margin-top:17px}


/* NOSOTROS: fondo continuo y remate geométrico en V */
.about.about--editorial {
  background: linear-gradient(180deg, #d6edf9 0%, #c5e6f7 48%, #a9d7ef 100%) !important;
  isolation: isolate;
}
.about.about--editorial::before {
  content: none !important;
  display: none !important;
}
.about.about--editorial .about__wave {
  height: clamp(65px, 8.5vw, 120px);
  bottom: -1px;
}

/* Ajuste solicitado: mayor respiración vertical solo en Nosotros */
.about.about--editorial { padding-top: 110px; }
.about.about--editorial .about__inner { padding-bottom: 182px; }
@media (max-width: 540px) {
  .about.about--editorial { padding-top: 68px; }
  .about.about--editorial .about__inner { padding-bottom: 138px; }
}

/* EQUIPOS: una tarjeta principal y cuatro secundarias. */
@media (min-width: 1101px) {
  .products__accordion { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .products__accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .product-card--cover { grid-column: 1 / -1; }
}


/* =============================================================
   EQUIPOS · refinamiento premium (misma portada + cuatro tarjetas)
   Cambios visuales aislados a esta sección; sin alterar contenido ni JS.
   ============================================================= */
.products {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfe 53%, #ffffff 100%);
}
.products__intro { margin-bottom: clamp(28px, 4vw, 52px); }
.products__heading { letter-spacing: -.025em; text-wrap: balance; }
.products__accordion { gap: clamp(16px, 1.7vw, 24px); align-items: stretch; }
.products .product-card {
  border: 1px solid rgba(24, 98, 144, .12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(12, 61, 97, .065), 0 2px 8px rgba(12, 61, 97, .035);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.products .product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 112, 172, .24);
  box-shadow: 0 20px 46px rgba(12, 61, 97, .12);
}
.products .product-card__img {
  background: #eaf5fb;
  object-fit: cover;
}
.products .product-card__panel { gap: 13px; padding: clamp(20px, 2vw, 30px); }
.products .product-card__title { color: #123e60; line-height: 1.28; letter-spacing: -.015em; }
.products .product-card__list { color: #46687e; line-height: 1.55; }
.products .product-card__list li::before { background: #28a4c7; }
.products .product-card__toggle { color: #08749f; width: fit-content; }
.products .product-card__actions { gap: 9px; margin-top: auto; padding-top: 10px; }
.products .product-card__cta {
  border-radius: 12px;
  background: #075f8b;
  box-shadow: 0 5px 12px rgba(0, 90, 139, .12);
}
.products .product-card__cta:hover { background: #08496e; color: white; }
.products .product-card__cta--ghost {
  background: #fff; color: #075f8b; border-color: rgba(7, 95, 139, .32);
  box-shadow: none;
}
.products .product-card__cta--ghost:hover { background: #eaf5fb; color: #075f8b; border-color: #075f8b; }
@media (min-width: 1101px) {
  .products__accordion { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
  .products .product-card:not(.product-card--cover) {
    flex-direction: column; height: auto; overflow: hidden;
  }
  .products .product-card:not(.product-card--cover) .product-card__img {
    width: 100%; height: clamp(145px, 14vw, 215px); border-radius: 23px 23px 0 0;
  }
  .products .product-card:not(.product-card--cover) .product-card__panel {
    justify-content: flex-start; min-height: 265px;
    padding: clamp(17px, 1.5vw, 23px); gap: 11px;
  }
  .products .product-card:not(.product-card--cover) .product-card__title {
    font-size: clamp(.98rem, 1.15vw, 1.15rem);
  }
  .products .product-card:not(.product-card--cover) .product-card__actions {
    flex-wrap: wrap;
  }
  .products .product-card--cover {
    min-height: 285px; height: auto; overflow: hidden;
    background: linear-gradient(115deg, #ffffff 45%, #f1f9fd 100%);
  }
  .products .product-card--cover .product-card__img {
    width: 43%; height: auto; min-height: 285px; border-radius: 23px 0 0 23px;
  }
  .products .product-card--cover .product-card__panel { padding: clamp(28px, 3vw, 48px); }
  .products .product-card--cover .product-card__title { font-size: clamp(1.35rem, 2vw, 1.9rem); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .products__accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .products .product-card:not(.product-card--cover) { flex-direction: column; height: auto; overflow: hidden; }
  .products .product-card:not(.product-card--cover) .product-card__img {
    width: 100%; height: 200px; border-radius: 23px 23px 0 0;
  }
  .products .product-card:not(.product-card--cover) .product-card__panel { justify-content: flex-start; }
  .products .product-card--cover { grid-column: 1 / -1; height: auto; overflow: hidden; }
  .products .product-card--cover .product-card__img { width: 42%; height: auto; min-height: 290px; }
}
@media (max-width: 768px) {
  .products .product-card { overflow: hidden; }
  .products .product-card__img { border-radius: 23px 23px 0 0; }
  .products .product-card__actions { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .products .product-card { transition: none; }
  .products .product-card:hover { transform: none; }
}

/* EQUIPO PRINCIPAL: formato compacto horizontal, sin alterar los cuatro secundarios */
@media (min-width: 769px) {
  .products .product-card--cover {
    height: 190px !important; min-height: 0 !important; max-height: 190px;
    display: flex; flex-direction: row; align-items: stretch; overflow: hidden;
  }
  .products .product-card--cover .product-card__img {
    width: 32% !important; flex: 0 0 32%; height: 190px !important;
    min-height: 0 !important; max-height: 190px; object-fit: cover;
  }
  .products .product-card--cover .product-card__panel {
    flex: 1; min-width: 0; padding: 12px 24px !important; gap: 5px; justify-content: center;
  }
  .products .product-card--cover .product-card__title {font-size: clamp(1.06rem,1.4vw,1.35rem) !important;line-height:1.22;}
  .products .product-card--cover .product-card__text-wrap {max-height: 2.4em;}
  .products .product-card--cover .product-card__actions {padding-top: 2px; margin-top: 0;}
}
@media (max-width: 768px) {
  .products .product-card--cover .product-card__img {
    height: 125px !important; min-height: 0 !important; max-height: 125px; width:100% !important; object-fit:cover;
  }
  .products .product-card--cover .product-card__panel {padding: 16px 19px !important;gap:8px;}
}

/* Equipos: expansión en el flujo de la página (sin pop-up ni scroll interno). */
.products__accordion { grid-auto-rows: auto; align-items: start; }
.product-card__text-wrap { transition: max-height .35s ease; }
.product-card__text-wrap.is-expanded { max-height: 1600px; overflow: visible; }
.product-modal-backdrop, .product-card__modal-close { display: none !important; }
@media (min-width: 901px) {
  .products__accordion { grid-template-rows: auto auto; align-items: stretch; }
  .product-card { height: auto; align-self: stretch; overflow: hidden; }
  .product-card__img, .product-card--cover .product-card__img {
    height: auto; min-height: 190px; max-height: 310px; align-self: flex-start;
  }
  .product-card__panel { justify-content: flex-start; }
  .product-card__text-wrap.is-expanded,
  .product-card--cover .product-card__text-wrap.is-expanded {
    position: relative; top: auto; left: auto; transform: none;
    width: auto; max-height: 1600px; overflow: visible;
    background: transparent; border-radius: 0; box-shadow: none;
    padding: 0; z-index: auto;
  }
}

/* CORRECCIÓN: al abrir Ver más, la tarjeta crece en el flujo normal,
   sin recortar las características ni modificar el tamaño de las fotos. */
.products .product-card.is-details-open {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.products .product-card.is-details-open .product-card__panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.products .product-card .product-card__text-wrap.is-expanded {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}
.products .product-card.is-details-open .product-card__list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}
/* El equipo principal conserva su imagen compacta; crece la ficha, no la foto. */
@media (min-width: 769px) {
  .products .product-card--cover.is-details-open .product-card__img {
    height: 190px !important;
    max-height: 190px !important;
    min-height: 0 !important;
    align-self: flex-start;
  }
}


/* ===== TECHNOCARD / EQUIPOS · CONCEPTO PREMIUM (prueba) ===== */
.products {
  background: radial-gradient(ellipse at 13% 9%, rgba(128,202,242,.28), transparent 45%),
              radial-gradient(ellipse at 90% 90%, rgba(178,222,245,.26), transparent 42%),
              linear-gradient(145deg,#f0f9ff 0%,#e8f5fc 55%,#f7fbff 100%);
  padding: 88px 0 110px;
}
.products__intro { margin-bottom: 34px; }
.premium-products__eyebrow { margin:0 0 15px; font-size:11px; letter-spacing:.43em; font-weight:800; color:#426783; }
.products .products__heading { color:#101e34; font-size:clamp(2rem,4.1vw,3.4rem); line-height:1.15; letter-spacing:-.045em; font-weight:800; }
.products .products__heading span { color:#f06461; }
.premium-products__subtitle { margin:13px auto 0; font-size:clamp(.88rem,1.35vw,1.05rem); color:#526981; max-width:660px; }
.products .products__accordion { gap:15px; align-items:start; grid-auto-rows:auto !important; grid-template-rows:auto !important; }
.products .product-card { position:relative; min-width:0; height:auto !important; align-self:start !important; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.95); border-radius:20px; box-shadow:0 16px 45px rgba(34,94,133,.10); overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.products .product-card:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(34,94,133,.16); }
.products .product-card__panel { --panel-fade:#fff; min-width:0; padding:18px 19px 21px; gap:10px; background:#fff; justify-content:flex-start; }
.products .premium-products__category { font-size:10px; font-weight:800; letter-spacing:.09em; line-height:1.5; color:#2676a9; margin:0; }
.products .product-card__title { font-size:clamp(1rem,1.32vw,1.22rem); line-height:1.36; color:#13243c; font-weight:800; letter-spacing:-.025em; }
.products .product-card__img { width:100%; height:165px !important; max-height:165px !important; min-height:0 !important; object-fit:contain; background:linear-gradient(140deg,#dbeef9,#f4f9fe); padding:8px; flex:none; }
.products .product-card__toggle { color:#f05e5a; font-weight:800; align-self:flex-start; }
.products .product-card__cta { border-radius:999px; font-size:.79rem; font-weight:800; }
.products .product-card__actions { margin-top:auto; flex-wrap:wrap; gap:9px; }
.products .product-card__text-wrap { min-height:0 !important; height:auto !important; max-height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; opacity:0; transition:max-height .4s ease, opacity .25s ease; }
.products .product-card__text-wrap:not(.is-expanded) .product-card__list { margin:0; }
.products .product-card__text-wrap.is-expanded { position:static !important; inset:auto !important; transform:none !important; width:auto !important; height:auto !important; max-height:3000px !important; overflow:visible !important; opacity:1; margin:5px 0 8px !important; }
.products .product-card__text-wrap::after { display:none !important; }
.products .product-card__list { padding:0 0 0 17px; list-style:disc; color:#51667b; font-size:.81rem; line-height:1.65; }
.products .product-card__list li { margin-bottom:6px; }
.products .product-card__modal-close,.product-modal-backdrop { display:none !important; }
.products .premium-products__featured { position:absolute; z-index:3; top:15px; left:15px; background:#f15f5c; color:white; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.08em; padding:10px 14px; box-shadow:0 5px 20px rgba(232,70,70,.24); }
@media(min-width:1101px) {
 .products .products__accordion { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
 .products .product-card--cover { grid-column:1/-1; display:grid !important; grid-template-columns: 46% minmax(0,1fr); min-height:0 !important; }
 .products .product-card--cover .product-card__img { width:100% !important; height:100% !important; max-height:none !important; min-height:0 !important; max-width:100% !important; align-self:stretch; object-fit:contain; padding:35px 24px; }
 .products .product-card--cover .product-card__panel { padding:28px 34px !important; }
 .products .product-card--cover .product-card__title { font-size:clamp(1.35rem,2.05vw,1.9rem) !important; }
 .products .product-card--cover .premium-products__category { font-size:11px; }
 .products .product-card--cover .product-card__actions { margin-top:8px; }
}
@media(min-width:769px) and (max-width:1100px) {
 .products .products__accordion { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 .products .product-card--cover { grid-column:1/-1; display:grid !important; grid-template-columns:42% 1fr; }
 .products .product-card--cover .product-card__img { height:100% !important; max-height:none !important; align-self:stretch; object-fit:contain; padding:25px; }
}
@media(max-width:768px) {
 .products { padding:66px 0 80px; }
 .products .products__accordion { grid-template-columns:1fr !important; }
 .products .product-card--cover { grid-column:auto; display:flex !important; }
 .products .product-card--cover .product-card__img { height:190px !important; max-height:190px !important; }
 .products .product-card--cover .product-card__panel { padding:21px !important; }
 .products .premium-products__featured { top:12px;left:12px; }
}
@media(prefers-reduced-motion:reduce){ .products .product-card { transition:none; } .products .product-card__text-wrap { transition:none; } }


/* ===== EQUIPOS: EDICIÓN PREMIUM — REFERENCIA VISUAL ===== */
.products {position:relative;isolation:isolate;background:radial-gradient(circle at 4% 16%,#c9e9fb 0,transparent 32%),radial-gradient(circle at 93% 18%,#c7e9fb 0,transparent 32%),linear-gradient(135deg,#eaf7ff 0%,#f5fbff 50%,#e8f5ff 100%)!important;padding:78px 0 105px!important;overflow:hidden}
.products::before {content:"";position:absolute;z-index:-1;top:-220px;left:-140px;width:650px;height:650px;border:70px solid rgba(132,199,238,.15);border-radius:50%;pointer-events:none}
.products .products__intro {text-align:center;margin-bottom:33px}
.products .premium-products__eyebrow {font-size:12px;letter-spacing:.48em;color:#48627b;font-weight:700}
.products .products__heading {font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.055em;color:#0c1b30}
.products .premium-products__subtitle {font-size:1rem;color:#566b80}
.products .products__accordion {gap:14px!important;align-items:start!important;grid-auto-rows:auto!important;grid-template-rows:auto!important}
.products .product-card {background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:19px!important;box-shadow:0 13px 38px rgba(55,118,160,.10)!important;overflow:hidden!important;min-width:0;align-self:start!important;height:auto!important;min-height:0!important;transition:transform .25s,box-shadow .25s}
.products .product-card:hover {transform:translateY(-3px);box-shadow:0 20px 45px rgba(55,118,160,.15)!important}
.products .product-card__img {height:166px!important;max-height:166px!important;min-height:0!important;width:100%!important;object-fit:contain!important;background:linear-gradient(130deg,#d9eefb,#eef8fe)!important;padding:12px!important;display:block}
.products .product-card__panel {padding:17px 18px 20px!important;gap:9px!important;background:#fff!important;min-width:0;overflow:visible!important;height:auto!important;max-height:none!important}
.products .premium-products__category {font-size:10px!important;font-weight:800;letter-spacing:.12em;color:#2b79ae!important;margin:0}
.products .product-card__title {color:#122139!important;font-size:clamp(1rem,1.25vw,1.2rem)!important;font-weight:800;line-height:1.35!important;letter-spacing:-.02em}
.products .product-card__text-wrap {max-height:0!important;height:0!important;opacity:0!important;overflow:hidden!important;padding:0!important;margin:0!important;transition:max-height .35s ease,opacity .25s ease!important;position:static!important;box-shadow:none!important;background:transparent!important}
.products .product-card__text-wrap.is-expanded {height:auto!important;max-height:none!important;opacity:1!important;overflow:visible!important;margin:8px 0!important}
.products .product-card__list {list-style:disc;padding-left:20px!important;margin:0;color:#4c6279;font-size:.82rem;line-height:1.65}
.products .product-card__list li {margin:0 0 7px}
.products .product-card__toggle {align-self:flex-start;color:#f15f5d!important;font-weight:800!important;padding:6px 0!important;margin:0!important}
.products .product-card__actions {display:flex;flex-wrap:wrap;gap:9px;margin-top:8px!important}
.products .product-card__cta {border-radius:999px!important;font-size:.8rem!important;padding:10px 16px!important}
.products .product-card__cta:not(.product-card__cta--ghost) {background:#f25f5d!important;border-color:#f25f5d!important;color:#fff!important}
.products .product-card__cta--ghost {background:#fff!important;border:1px solid #1a568d!important;color:#164d7c!important}
.products .product-card__modal-close,.product-modal-backdrop {display:none!important}
.products .premium-products__featured {position:absolute;z-index:2;top:17px;left:17px;background:#f05e5b;color:#fff;border-radius:999px;padding:9px 14px;font-size:10px;font-weight:800;letter-spacing:.05em;box-shadow:0 8px 19px rgba(242,95,93,.28)}
.products .premium-products__feature-line {color:#2e465d;font-weight:600;font-size:.95rem;margin:0}
.products .premium-products__highlights {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.products .premium-products__highlights span {display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;background:#eff8fe;color:#235b87;font-size:.72rem;font-weight:700}
.products .premium-products__highlights svg {width:16px;height:16px;flex:none;stroke:#178dd4}
@media(min-width:1101px){
 .products .products__accordion {grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .products .product-card--cover {grid-column:1/-1!important;display:grid!important;grid-template-columns:46% minmax(0,1fr)!important;align-items:start!important}
 .products .product-card--cover .product-card__img {height:270px!important;max-height:270px!important;min-height:0!important;align-self:start!important;padding:30px!important;object-fit:contain!important}
 .products .product-card--cover .product-card__panel {padding:26px 32px!important}
 .products .product-card--cover .product-card__title {font-size:clamp(1.45rem,2.1vw,1.95rem)!important}
 .products .product-card--cover .product-card__text-wrap.is-expanded {max-height:none!important}
}
@media(min-width:769px) and (max-width:1100px){
 .products .products__accordion {grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .products .product-card--cover {grid-column:1/-1!important;display:grid!important;grid-template-columns:42% 1fr!important;align-items:start!important}
 .products .product-card--cover .product-card__img {height:245px!important;max-height:245px!important;align-self:start!important;padding:20px!important}
}
@media(max-width:768px){
 .products {padding:64px 0 78px!important}
 .products .products__accordion {grid-template-columns:1fr!important}
 .products .product-card--cover {grid-column:auto!important;display:flex!important}
 .products .product-card--cover .product-card__img {height:200px!important;max-height:200px!important}
 .products .product-card--cover .product-card__panel {padding:21px!important}
 .products .premium-products__highlights {gap:6px}
}
@media(prefers-reduced-motion:reduce){.products .product-card,.products .product-card__text-wrap {transition:none!important}}


/* TRANSICIÓN NOSOTROS → EQUIPOS: pico de Nosotros por encima del fondo real de Equipos.
   La figura sale del bloque superior; no hay lienzo blanco entre secciones. */
.about.about--editorial { position: relative; z-index: 2; }
.about.about--editorial .about__wave {
  bottom: calc(-1 * clamp(65px, 8.5vw, 120px) + 1px) !important;
  height: clamp(65px, 8.5vw, 120px) !important;
  z-index: 5;
  pointer-events: none;
}
.products { position: relative; z-index: 1; margin-top: 0 !important; }
/* Espacio interno para que el pico no se superponga al título de Equipos. */
.products { padding-top: calc(78px + clamp(65px, 8.5vw, 120px)) !important; }
@media (max-width: 768px) {
  .products { padding-top: calc(64px + clamp(65px, 8.5vw, 120px)) !important; }
}

/* CAPAS DEFINITIVAS: Nosotros (con su punta en V) delante de Equipos.
   Equipos sube físicamente por detrás del remate, sin franja entre secciones. */
.about.about--editorial {
  position: relative !important;
  z-index: 20 !important;
}
.about.about--editorial .about__wave {
  position: absolute !important;
  z-index: 21 !important;
  bottom: calc(1px - clamp(65px, 8.5vw, 120px)) !important;
  height: clamp(65px, 8.5vw, 120px) !important;
  overflow: visible !important;
}
.products {
  position: relative !important;
  z-index: 1 !important;
  margin-top: calc(2px - clamp(65px, 8.5vw, 120px)) !important;
  padding-top: calc(78px + clamp(65px, 8.5vw, 120px)) !important;
}
@media (max-width: 768px) {
  .products { padding-top: calc(64px + clamp(65px, 8.5vw, 120px)) !important; }
}

/* FIX FINAL: el overflow:hidden del contenedor Nosotros estaba recortando
   el SVG triangular que sobresale. Permitir el desbordamiento y mantener
   Nosotros delante del fondo de Equipos. */
.about.about--editorial {
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
}
.about.about--editorial > .about__wave {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: clamp(65px, 8.5vw, 120px) !important;
  bottom: calc(1px - clamp(65px, 8.5vw, 120px)) !important;
  z-index: 21 !important;
  pointer-events: none;
}
.about.about--editorial + .products {
  position: relative !important;
  z-index: 1 !important;
  margin-top: calc(2px - clamp(65px, 8.5vw, 120px)) !important;
}

/* Separación del encabezado de Equipos respecto a la punta completa de Nosotros.
   El fondo sigue detrás de la V; únicamente baja el contenido, sin recortarlo. */
.about.about--editorial + .products {
  padding-top: calc(103.5px + clamp(58.5px, 7.65vw, 108px) + clamp(58.5px, 7.65vw, 108px)) !important;
}
@media (max-width: 768px) {
  .about.about--editorial + .products {
    padding-top: calc(85.5px + clamp(58.5px, 7.65vw, 108px) + clamp(58.5px, 7.65vw, 108px)) !important;
  }
}

/* Ajuste solicitado: 10% menos espacio inferior en Nosotros; conservar la V y la superposición. */
.about.about--editorial .about__inner { padding-bottom: 124.2px !important; }


/* IMÁGENES COMPLETAS — las fotos de equipos no se recortan por alturas fijas.
   Se conserva la estructura de 1 principal horizontal y 4 secundarios. */
.products .product-card__img,
.products .product-card--cover .product-card__img,
.products .product-card--cover.is-details-open .product-card__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  align-self: start !important;
}
/* Sin recortes del elemento ni del panel cuando la imagen es más alta. */
.products .product-card,
.products .product-card--cover {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
/* El principal mantiene su composición horizontal en escritorio y tablet. */
@media (min-width: 769px) {
  .products .product-card--cover .product-card__img,
  .products .product-card--cover.is-details-open .product-card__img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}


/* Ajuste de marcos: separación uniforme entre el fondo azul de cada foto
   y los bordes blancos de las cinco tarjetas. Sin recortar imágenes. */
.products .product-card > img.product-card__img,
.products .product-card--cover > img.product-card__img,
.products .product-card--cover.is-details-open > img.product-card__img {
  display: block !important;
  width: calc(100% - 28px) !important;
  max-width: calc(100% - 28px) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
  align-self: start !important;
}
/* La imagen principal ocupa su columna horizontal sin tocar sus bordes. */
@media (min-width: 769px) {
  .products .product-card--cover > img.product-card__img,
  .products .product-card--cover.is-details-open > img.product-card__img {
    justify-self: center !important;
  }
}

/* EQUIPOS — COMPOSICIÓN AJUSTADA A LA REFERENCIA ENVIADA.
   Una tarjeta horizontal destacada + cuatro tarjetas en fila.
   Las fotografías reales siempre se muestran completas. */
.products .products__intro { text-align:center !important; max-width:1100px !important; margin-left:auto !important; margin-right:auto !important; }
.products .products__accordion { gap:14px !important; align-items:stretch !important; }
.products .product-card { border-radius:20px !important; background:#fff !important; box-shadow:0 12px 36px rgba(31,95,146,.08) !important; overflow:hidden !important; }
.products .product-card__panel { background:#fff !important; min-width:0 !important; }
.products .product-card > img.product-card__img,
.products .product-card--cover > img.product-card__img,
.products .product-card--cover.is-details-open > img.product-card__img {
  display:block !important; width:calc(100% - 28px) !important;
  max-width:calc(100% - 28px) !important; margin:14px !important;
  padding:8px !important; box-sizing:border-box !important;
  height:260px !important; max-height:none !important; min-height:0 !important;
  object-fit:contain !important; object-position:center center !important;
  border-radius:14px !important; background:#e6f3fb !important;
  align-self:center !important;
}
.products .product-card:not(.product-card--cover) { display:flex !important; flex-direction:column !important; }
.products .product-card:not(.product-card--cover) .product-card__panel { flex:1 !important; display:flex !important; flex-direction:column !important; padding:8px 20px 22px !important; }
.products .product-card:not(.product-card--cover) .product-card__actions { margin-top:auto !important; padding-top:10px !important; }
.products .product-card:not(.product-card--cover) .product-card__toggle { margin-top:8px !important; }
.products .product-card__title { overflow-wrap:anywhere !important; }
.products .product-card--cover .product-card__panel { padding:24px 30px !important; }
.products .premium-products__featured { z-index:3 !important; }
@media(min-width:1101px) {
 .products .products__accordion { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
 .products .product-card--cover { grid-column:1/-1 !important; display:grid !important; grid-template-columns:46% minmax(0,1fr) !important; align-items:center !important; }
 .products .product-card--cover > img.product-card__img,
 .products .product-card--cover.is-details-open > img.product-card__img { height:340px !important; }
}
@media(min-width:769px) and (max-width:1100px) {
 .products .products__accordion { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 .products .product-card--cover { grid-column:1/-1 !important; display:grid !important; grid-template-columns:42% minmax(0,1fr) !important; align-items:center !important; }
 .products .product-card--cover > img.product-card__img,
 .products .product-card--cover.is-details-open > img.product-card__img { height:310px !important; }
}
@media(max-width:768px) {
 .products .products__accordion { display:grid !important; grid-template-columns:1fr !important; }
 .products .product-card--cover { display:flex !important; flex-direction:column !important; }
 .products .product-card--cover > img.product-card__img,
 .products .product-card--cover.is-details-open > img.product-card__img { height:280px !important; }
 .products .product-card--cover .product-card__panel { padding:14px 20px 22px !important; }
}

/* AJUSTE SOLICITADO: quitar únicamente el panel azul detrás de la fotografía
   del equipo principal; conservar la tarjeta blanca y las cuatro secundarias. */
.products .product-card--cover > img.product-card__img,
.products .product-card--cover.is-details-open > img.product-card__img {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* EQUIPOS: una sola viñeta negra por especificación; sin punto azul decorativo. */
.products .product-card__list { list-style-type: disc !important; }
.products .product-card__list li::before { content: none !important; display: none !important; }
.products .product-card__list li { padding-left: 0 !important; }
.products .product-card__list li::marker { color: #111111 !important; }

/* Prueba premium: fichas resumidas, sin acordeón de especificaciones. */
.products .product-card .premium-products__feature-line {
  display:block !important; position:static !important;
  margin:10px 0 20px !important; padding:0 !important;
  color:#526477 !important; font-size:0.96rem !important; line-height:1.55 !important;
  max-height:none !important; overflow:visible !important;
}
.products .product-card__panel { display:flex !important; flex-direction:column !important; }
.products .product-card__actions { margin-top:auto !important; padding-top:12px !important; }
.products .product-card--cover .product-card__actions { margin-top:12px !important; }
.products .product-card:not(.product-card--cover) .product-card__panel { flex:1 1 auto !important; }

/* Nosotros: texto completo siempre visible, sin control desplegable. */
.about .about__extra, .about--editorial .about__extra { max-height: none !important; height: auto !important; overflow: visible !important; opacity: 1 !important; transform: none !important; visibility: visible !important; }

/* TechnoCard: cuatro tarjetas secundarias de igual altura por fila.
   Mantener la foto, títulos y descripciones; alinear las acciones abajo. */
@media (min-width: 769px) {
  .products .products__accordion { align-items: stretch !important; }
  .products .product-card:not(.product-card--cover) {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .products .product-card:not(.product-card--cover) .product-card__panel {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .products .product-card:not(.product-card--cover) .product-card__actions {
    margin-top: auto !important;
  }
}

/* ===== Showroom cinematográfico TechnoCard — video vertical y horizontal ===== */
.showroom{background:linear-gradient(116deg,#07182d 0%,#133757 47%,#e8f0f8 100%);padding:clamp(68px,8vw,112px) 0 76px;color:#fff;overflow:hidden}
.showroom__shell{max-width:1400px}
.showroom__intro{display:grid;grid-template-columns:minmax(230px,.82fr) minmax(0,2.35fr);gap:clamp(48px,5vw,88px);align-items:stretch}
.showroom__intro-copy{display:flex;flex-direction:column;justify-content:center;padding:20px 0 36px}
.showroom__eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.25em;color:#b5dcf9;margin-bottom:24px}
.showroom__heading{font-family:var(--font-heading);font-size:clamp(2.5rem,4.4vw,4.8rem);line-height:1.06;letter-spacing:-.045em;margin:0 0 22px;color:#fff}
.showroom__heading em{font-style:normal;color:#a3d8ff}
.showroom__intro-copy>p{max-width:33ch;color:#d6e4f0;line-height:1.75;font-size:1rem;margin:0 0 36px}
.showroom__hint{border-top:2px solid #ff726d;padding-top:22px;max-width:240px;color:#c3d8e8;font-size:.85rem;line-height:1.6}
.showroom__gallery{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;min-height:520px;height:clamp(480px,43vw,650px)}
.showroom__gallery .showroom__card--featured{grid-row:span 2}
.showroom__card{min-width:0;min-height:0}
.showroom__media{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;border-radius:18px;background:#0b1d31;border:1px solid rgba(255,255,255,.15);box-shadow:0 14px 38px rgba(0,0,0,.19);cursor:pointer;text-align:left;isolation:isolate}
.showroom__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.showroom__card--portrait .showroom__media img{object-fit:contain;background:#122a40}
.showroom__gallery .showroom__card--portrait .showroom__media img{object-fit:contain}
.showroom__media:hover img,.showroom__media:focus-visible img{transform:scale(1.035)}
.showroom__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,15,28,.94) 100%);pointer-events:none}
.showroom__card-copy{position:absolute;z-index:2;bottom:22px;left:22px;right:65px;display:flex;flex-direction:column;gap:5px;color:white}
.showroom__card-copy strong{font-size:clamp(1rem,1.25vw,1.35rem);font-weight:700;line-height:1.25}
.showroom__card-copy small{font-size:.77rem;color:#d9e6ef;line-height:1.4}
.showroom__card-kicker{font-size:.62rem;letter-spacing:.2em;font-weight:700;color:#ff9994}
.showroom__play{position:absolute;right:18px;bottom:20px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.8);color:white;font-size:14px;padding-left:2px;backdrop-filter:blur(8px)}
.showroom__strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:16px}
.showroom__strip .showroom__card{height:clamp(200px,21vw,275px)}
.showroom__strip .showroom__card-copy{left:13px;right:12px;bottom:16px}
.showroom__strip .showroom__card-copy strong{font-size:.89rem}
.showroom__strip .showroom__card-copy small,.showroom__strip .showroom__card-kicker{display:none}
.showroom__strip .showroom__play{right:11px;top:12px;bottom:auto;width:30px;height:30px;font-size:11px}
.showroom__footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:30px;color:#d5e5f2;font-size:.72rem;letter-spacing:.12em}
.showroom__cta{display:inline-flex;align-items:center;gap:20px;background:#ff706b;color:#fff!important;padding:14px 22px;border-radius:999px;font-size:.84rem;font-weight:700;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.showroom__cta:hover{background:#e95351}
/* El lightbox existente conserva la proporción original del archivo de video. */
.showroom .lightbox__video{max-width:min(92vw,1100px);max-height:78vh;width:auto;height:auto;object-fit:contain}
@media(max-width:1000px){.showroom__intro{grid-template-columns:1fr}.showroom__intro-copy{padding:0}.showroom__intro-copy>p{max-width:65ch}.showroom__hint{display:none}.showroom__gallery{height:clamp(460px,65vw,620px)}.showroom__strip{grid-template-columns:repeat(5,minmax(0,1fr))}.showroom__strip .showroom__card{height:210px}}
@media(max-width:680px){.showroom{padding:64px 0}.showroom__heading{font-size:clamp(2.5rem,9vw,3.5rem)}.showroom__gallery{grid-template-columns:1fr 1fr;grid-template-rows:300px 235px;height:auto;min-height:0;gap:12px}.showroom__gallery .showroom__card--featured{grid-column:1/-1;grid-row:auto}.showroom__gallery .showroom__card:not(.showroom__card--featured){height:235px}.showroom__strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.showroom__strip .showroom__card{height:235px}.showroom__strip .showroom__card:last-child{grid-column:1/-1;height:240px}.showroom__card-copy{left:14px;bottom:14px;right:45px}.showroom__card-copy strong{font-size:.94rem}.showroom__card-copy small{display:none}.showroom__footer{align-items:flex-start;flex-direction:column}.showroom__footer>span{line-height:1.6}}
@media(prefers-reduced-motion:reduce){.showroom__media img{transition:none}.showroom__media:hover img{transform:none}}

/* Ajuste puntual: el showroom se coloca debajo de la V del video, sin franja blanca.
   Se mantiene intacto el video y la estructura de las demás secciones. */
.video-feature { z-index: 2; }
.video-feature__wave { z-index: 3; }
.video-feature__wave path { fill: #07182d; }
.gallery.showroom {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(50px, 9vh, 110px));
  padding-top: calc(clamp(68px, 8vw, 112px) + clamp(50px, 9vh, 110px) * .1);
}
@media (max-width: 680px) {
  .gallery.showroom { padding-top: calc(64px + clamp(50px, 9vh, 110px) * .1); }
}

/* Corrección de transición: el showroom REAL ocupa el espacio bajo la V.
   La V se recorta del propio video: no se dibuja una franja azul encima. */
.video-feature {
  --showroom-v: clamp(42px, 5.5vw, 76px);
  position: relative;
  z-index: 2;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--showroom-v)), 50% 100%, 0 calc(100% - var(--showroom-v)));
}
.video-feature__wave { display: none !important; }
.gallery.showroom {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(42px, 5.5vw, 76px)) !important;
  padding-top: clamp(42px, 5.5vw, 76px) !important;
}
@media (max-width: 680px) {
  .gallery.showroom { padding-top: clamp(42px, 5.5vw, 76px) !important; }
}

/* Video institucional antes del showroom: controles ocultos y play discreto. */
.video-feature .video-feature__play {
  opacity: .20;
  width: clamp(64px, 6vw, 84px);
  height: clamp(64px, 6vw, 84px);
  background: rgba(255,255,255,.75);
  box-shadow: none;
  cursor: pointer;
}
.video-feature .video-feature__play:hover,
.video-feature .video-feature__play:focus-visible { opacity: .38; }
.video-feature .video-feature__play::before { display: none !important; }
.video-feature .video-feature__player { cursor: pointer; }
.video-feature .video-feature__player::-webkit-media-controls,
.video-feature .video-feature__player::-webkit-media-controls-enclosure { display: none !important; }

/* Showroom: desplazar solo el contenido (textos y galeria), sin mover el fondo ni la seccion. */
.gallery.showroom > .showroom__shell { padding-top: 10vh; }

/* Contacto premium sin mapa: cambios limitados a la sección de contacto. */
.contact__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.contact__panel { min-width: 0; }
.contact__form { max-width: 100%; }
.contact__details { min-width: 0; padding: clamp(28px, 4vw, 52px); border: 1px solid rgba(255,255,255,.3); border-radius: 28px; background: linear-gradient(145deg, rgba(13,42,65,.77), rgba(17,62,90,.62)); box-shadow: 0 28px 75px rgba(5,25,45,.26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }
.contact__details-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(255,255,255,.12); font-size: 24px; color: #bce9fa; }
.contact__details-eyebrow { margin: 30px 0 12px; font-size: .73rem; font-weight: 800; letter-spacing: .18em; color: #bde7f8; }
.contact__details-title { margin: 0; max-width: 14ch; font-family: var(--font-heading); font-size: clamp(1.8rem, 2.8vw, 2.8rem); font-weight: 800; line-height: 1.14; }
.contact__details-copy { margin: 20px 0 0; max-width: 42ch; line-height: 1.7; color: rgba(255,255,255,.83); font-size: .98rem; }
.contact__details-divider { height: 1px; background: rgba(255,255,255,.23); margin: 30px 0; }
.contact__details .contact__meta { display: grid; gap: 24px; }
.contact__details .contact__meta-item { display: flex; align-items: center; gap: 16px; }
.contact__meta-icon { display: inline-grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: rgba(255,255,255,.12); color: #d5f2ff; }
.contact__meta-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact__meta-text strong { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.contact__meta-text a { font-size: 1.06rem; text-decoration: none; font-weight: 700; }
.contact__meta-text a:hover { text-decoration: underline; }
.contact__whatsapp-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding: 17px 22px; border-radius: 14px; background: #fff; color: #143c58; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.contact__whatsapp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.contact__whatsapp-cta span { font-size: 1.4rem; }
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; gap: 36px; } .contact__details { width: 100%; } }
@media (max-width: 560px) { .contact__details { padding: 26px 22px; border-radius: 22px; } .contact__row { grid-template-columns: 1fr; } }


/* Refinamiento premium del catálogo existente: exclusivamente ocho productos. */
#productos.catalog {background:linear-gradient(180deg,#f8fbff 0%,#ffffff 48%,#f4f8fe 100%);}
#productos .catalog__intro {padding-bottom:clamp(30px,4vw,54px);}
#productos .catalog__heading {font-size:clamp(2.7rem,5vw,4.8rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;color:#0d2c54;}
#productos .catalog__subtitle {max-width:690px;margin-left:auto;margin-right:auto;line-height:1.75;color:#586d86;font-size:clamp(.98rem,1.15vw,1.12rem);}
#productos .catalog__grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);align-items:stretch;}
#productos .catalog-card {position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid #dfe8f5;border-radius:22px;background:#fff;box-shadow:0 12px 35px rgba(13,48,94,.065);transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;}
#productos .catalog-card:hover {transform:translateY(-6px);box-shadow:0 24px 58px rgba(13,48,94,.13);border-color:#b8d2f2;}
#productos .catalog-card__media {height:clamp(205px,18vw,260px);padding:clamp(22px,2.5vw,35px);background:radial-gradient(ellipse at 75% 20%,#ffffff 0%,#f2f7fd 56%,#e9f2fc 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;}
#productos .catalog-card__media img {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(19,55,94,.11));transition:transform .4s ease;}
#productos .catalog-card:hover .catalog-card__media img {transform:scale(1.055);}
#productos .catalog-card__body {display:flex;flex:1;flex-direction:column;gap:13px;padding:clamp(20px,2vw,29px);}
#productos .catalog-card__title {color:#11365f;font-size:clamp(1rem,1.15vw,1.14rem);font-weight:750;line-height:1.42;letter-spacing:-.015em;}
#productos .catalog-card__cta {margin-top:auto;border-radius:999px;min-height:44px;transition:transform .2s ease,box-shadow .2s ease;}
#productos .catalog-card__cta:hover {transform:translateY(-2px);box-shadow:0 9px 20px rgba(12,65,129,.18);}
@media(max-width:1100px){#productos .catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}#productos .catalog-card__media{height:245px}}
@media(max-width:580px){#productos .catalog__grid{grid-template-columns:1fr;gap:20px}#productos .catalog-card__media{height:250px}#productos .catalog-card__body{padding:23px}}

/* MAQUETA PREMIUM · Botón de video por equipo (sin modificar el catálogo existente). */
.products .product-card { position: relative; }
.equipment-video__trigger { position:absolute; z-index:5; top:18px; right:18px; display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border:1px solid rgba(255,255,255,.85); border-radius:999px; color:#fff; background:rgba(4,28,66,.89); box-shadow:0 9px 28px rgba(5,28,65,.20); font:600 12px/1.2 inherit; font-family:inherit; font-size:12px; font-weight:650; letter-spacing:.025em; cursor:pointer; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.equipment-video__trigger:hover,.equipment-video__trigger:focus-visible { transform:translateY(-2px); background:#0757a8; box-shadow:0 13px 32px rgba(5,28,65,.30); }
.equipment-video__play { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#08467e; font-size:13px; padding-left:2px; }
.equipment-video-modal[hidden] {display:none!important}
.equipment-video-modal {position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:24px; }
.equipment-video-modal__scrim {position:absolute;inset:0;background:rgba(1,14,36,.82);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.equipment-video-modal__dialog {position:relative;z-index:1;width:min(840px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:24px;background:#fff;box-shadow:0 32px 100px rgba(0,0,0,.38);outline:none}
.equipment-video-modal__close {position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(3,20,46,.75);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.equipment-video-modal__visual {height:clamp(220px,43vw,430px);position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#f4faff,#d9e9f5)}
.equipment-video-modal__visual img {height:100%;width:100%;object-fit:contain;padding:26px;filter:brightness(.72)}
.equipment-video-modal__center {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 7px rgba(0,0,0,.65);letter-spacing:.06em;text-transform:uppercase}
.equipment-video-modal__play {display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:rgba(2,43,93,.87);border:1px solid rgba(255,255,255,.8);box-shadow:0 15px 40px rgba(0,0,0,.25);font-size:25px;padding-left:5px}
.equipment-video-modal__content {padding:26px 32px 32px}
.equipment-video-modal__eyebrow {color:#1a70b9;font-size:11px;font-weight:800;letter-spacing:.17em}
.equipment-video-modal__content h3 {color:#092a51;font-size:clamp(19px,2.8vw,27px);line-height:1.3;margin:8px 0 10px}
.equipment-video-modal__content p {color:#586c82;font-size:14px;line-height:1.7;margin:0 0 15px}
.equipment-video-modal__pending {display:inline-block;padding:8px 13px;border-radius:999px;background:#edf5fc;color:#276aa0;font-size:12px;font-weight:700}
body.equipment-video-open {overflow:hidden}
@media(max-width:640px){.equipment-video__trigger{top:12px;right:12px;padding:5px 11px 5px 5px;font-size:11px;gap:7px}.equipment-video__play{width:30px;height:30px}.equipment-video-modal{padding:12px}.equipment-video-modal__dialog{border-radius:16px}.equipment-video-modal__content{padding:20px}.equipment-video-modal__visual{height:270px}}

/* Botones Ver video reubicados exclusivamente en Conoce Nuestros Equipos. */
#equipos .equipment-video__trigger { position:static; inset:auto; flex:0 0 auto; align-self:stretch; justify-content:center; min-height:44px; margin:0; transform:none; }
#equipos .equipment-video__trigger:hover,#equipos .equipment-video__trigger:focus-visible {transform:translateY(-2px)}
#equipos .product-card__actions {align-items:center;}
#equipos .product-card:not(:first-child) .product-card__actions {display:flex; flex-direction:column; align-items:stretch;}
#equipos .product-card:not(:first-child) .equipment-video__trigger {width:100%; order:-1; margin-bottom:8px;}
#equipos .product-card:first-child .product-card__actions {flex-wrap:wrap;}
@media(max-width:640px){#equipos .product-card:first-child .equipment-video__trigger{min-height:42px}}

/* Equipos secundarios: video arriba, acciones originales Cotizar + Ficha PDF juntas. */
#equipos .product-card:not(:first-child) .product-card__actions {
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
}
#equipos .product-card:not(:first-child) .equipment-video__original-actions {
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  align-items:center !important; gap:9px !important; width:100%;
}
#equipos .product-card:not(:first-child) .equipment-video__original-actions > .product-card__cta {
  flex:0 1 auto !important; width:auto !important; margin:0 !important;
}
#equipos .product-card:not(:first-child) .equipment-video__trigger {
  width:100%; order:-1; margin-bottom:8px;
}

/* Ajuste solicitado: en las cuatro tarjetas secundarias, Ver video debajo de Cotizar y Ficha PDF. */
#equipos .product-card:not(:first-child) .equipment-video__original-actions { order: 0 !important; }
#equipos .product-card:not(:first-child) .equipment-video__trigger { order: 1 !important; margin-top: 8px !important; margin-bottom: 0 !important; }

/* Ajuste puntual: Ver video compacto bajo Cotizar y Ficha PDF, sin moverlos. */
#equipos .product-card:not(:first-child) .equipment-video__trigger {
  width: max-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  min-height: 40px !important;
  padding: 5px 14px 5px 6px !important;
  gap: 7px !important;
}
#equipos .product-card:not(:first-child) .equipment-video__trigger .equipment-video__play {
  width: 28px !important;
  height: 28px !important;
}

/* Galería premium de tres videos por equipo: solo afecta a la ventana flotante. */
.equipment-gallery{width:min(1040px,100%);background:#f9fbfe;overflow:auto}
.equipment-gallery__header{padding:29px 34px 22px;background:linear-gradient(110deg,#fff,#edf5fc);border-bottom:1px solid #dce9f4}
.equipment-gallery__header h3{font-size:clamp(20px,2.8vw,29px);color:#0b2e53;margin:9px 48px 7px 0;line-height:1.22}
.equipment-gallery__header p{margin:0;color:#647a90;font-size:14px}
.equipment-gallery__layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(255px,1fr);gap:0}
.equipment-gallery__stage{padding:26px 24px 28px 32px;min-width:0}
.equipment-gallery__screen{height:clamp(240px,31vw,385px);position:relative;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 40%,#f3f9ff,#d6e7f6);box-shadow:0 12px 38px rgba(11,48,83,.12)}
.equipment-gallery__screen img{width:100%;height:100%;object-fit:contain;padding:30px;filter:brightness(.83)}
.equipment-gallery__screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 64%,rgba(4,28,60,.30))}
.equipment-gallery__play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(5,53,106,.89);color:white;font-size:26px;cursor:pointer;box-shadow:0 12px 32px rgba(5,32,67,.28);transition:background .2s,transform .2s}
.equipment-gallery__play span{margin-left:5px}.equipment-gallery__play:hover,.equipment-gallery__play:focus-visible{background:#1172c6;transform:translate(-50%,-50%) scale(1.06)}
.equipment-gallery__play.is-pressed{background:#3577a9}
.equipment-gallery__number{position:absolute;z-index:1;bottom:15px;left:18px;font-size:11px;letter-spacing:.13em;font-weight:800;color:white}
.equipment-gallery__stage-info{padding:18px 2px 0}.equipment-gallery__stage-info strong{display:block;color:#0b2e53;font-size:17px;line-height:1.4}.equipment-gallery__stage-info p{font-size:13px;color:#5e7185;margin:7px 0 0;line-height:1.55}
.equipment-gallery__sidebar{padding:28px 28px 28px 22px;border-left:1px solid #e1ebf5;display:flex;flex-direction:column;gap:16px;background:#fff}
.equipment-gallery__sidebar-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.12em;color:#6081a1;font-weight:800}.equipment-gallery__sidebar-label small{font-size:11px;letter-spacing:0;color:#68819b}
.equipment-gallery__items{display:flex;flex-direction:column;gap:10px}
.equipment-gallery__item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:15px 12px;border:1px solid #e3ebf3;border-radius:13px;background:#f8fbfe;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.equipment-gallery__item:hover,.equipment-gallery__item:focus-visible{border-color:#70a9d9;background:#eff7ff}
.equipment-gallery__item.is-active{background:#eaf4fd;border-color:#6ba9dc;box-shadow:0 4px 18px rgba(25,104,172,.08)}
.equipment-gallery__item-icon{display:grid;place-items:center;width:33px;height:33px;flex:0 0 33px;border-radius:50%;background:#dbeaf7;color:#1b6eb1;font-size:12px;padding-left:2px}.equipment-gallery__item.is-active .equipment-gallery__item-icon{background:#0e5b9f;color:#fff}
.equipment-gallery__item-text{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.equipment-gallery__item-text strong{font-size:13px;color:#143d63;line-height:1.25}.equipment-gallery__item-text small{font-size:11px;color:#6c849a}.equipment-gallery__item-arrow{color:#7695b2;font-size:22px}
.equipment-gallery__note{margin-top:auto;padding:13px 14px;background:#f2f7fc;border-radius:12px;font-size:12px;line-height:1.6;color:#617c94}.equipment-gallery__note span{margin-right:6px;color:#246ea9}
@media(max-width:720px){.equipment-gallery__layout{grid-template-columns:1fr}.equipment-gallery__header{padding:24px 20px 18px}.equipment-gallery__stage{padding:18px 18px 16px}.equipment-gallery__screen{height:clamp(210px,57vw,320px)}.equipment-gallery__sidebar{padding:18px;border-left:0;border-top:1px solid #e1ebf5}.equipment-gallery__items{gap:8px}.equipment-gallery__item{padding:11px 12px}.equipment-gallery__note{margin-top:2px}.equipment-gallery__play{width:62px;height:62px}}

/* ============================================================
   Ajustes responsivos finales TechnoCard — octubre 2026.
   Solo correcciones para pantallas estrechas; sin alterar
   composiciones aprobadas en escritorio ni transiciones en V.
   ============================================================ */
@media (max-width: 1100px) {
  #equipos .product-card,
  #productos .catalog-card,
  #contacto .contact__form,
  #contacto .contact__details { min-width: 0; }
  #equipos .product-card__title,
  #productos .catalog-card__title,
  #contacto .contact__heading { overflow-wrap: break-word; }
  .equipment-gallery__layout > *,
  .equipment-gallery__stage,
  .equipment-gallery__sidebar { min-width: 0; }
}
@media (max-width: 768px) {
  /* Conservar acciones Cotizar y Ficha PDF lado a lado; video debajo. */
  #equipos .product-card:not(:first-child) .equipment-video__original-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    width: 100%;
  }
  #equipos .product-card:not(:first-child) .equipment-video__original-actions > a {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  #equipos .product-card:not(:first-child) .equipment-video__trigger {
    order: 1 !important;
    width: max-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
  }
  /* Galería de tres videos: desplazamiento accesible en teléfonos. */
  .equipment-video-modal__dialog.equipment-gallery {
    width: min(100%, 560px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .equipment-gallery__layout { grid-template-columns: minmax(0, 1fr); }
  .equipment-gallery__screen { max-width: 100%; }
  .equipment-gallery__screen img { max-width: 100%; }
  .equipment-gallery__item { min-width: 0; }
  .equipment-gallery__item-text { min-width: 0; }
  .equipment-gallery__item-text strong { overflow-wrap: anywhere; }
  /* Evitar que formularios y controles se salgan de sus columnas. */
  #contacto input, #contacto textarea, #contacto select,
  #contacto button { max-width: 100%; }
  #contacto input, #contacto textarea, #contacto select { min-width: 0; }
}
@media (max-width: 480px) {
  .equipment-gallery__header { padding: 22px 16px 16px; }
  .equipment-gallery__stage { padding: 14px 14px 16px; }
  .equipment-gallery__sidebar { padding: 14px; }
  .equipment-gallery__screen { height: clamp(190px, 60vw, 270px); }
  .equipment-gallery__screen img { padding: 16px; }
  .equipment-gallery__play { width: 56px; height: 56px; }
  .equipment-gallery__item { gap: 9px; }
  .equipment-gallery__stage-info strong { font-size: 15px; }
  /* Tipografía y botones cómodos para interacción táctil. */
  #equipos .equipment-video__trigger { max-width: 100%; }
  #contacto input, #contacto textarea { font-size: 16px; }
}
@media (max-width: 360px) {
  .equipment-gallery__header h3 { font-size: 19px; }
  .equipment-gallery__item { padding: 10px 9px; }
  .equipment-gallery__item-icon { width: 28px; height: 28px; flex-basis: 28px; }
  #equipos .product-card:not(:first-child) .equipment-video__original-actions { gap: 7px !important; }
}

/* Ajuste puntual de títulos solicitado: no alterar otros textos ni fondos. */
#equipos .products__heading { color:#0d2c54 !important; }
#equipos .products__heading span { color:#f06461 !important; }
#equipos .product-card__title { color:#0d2c54 !important; }
#productos .catalog__heading,
#productos .catalog-card__title { color:#0d2c54 !important; }
#contacto .contact__details-title,
.contact__details-title { color:#ffffff !important; }

/* Solo la o de TechnoCard en Nosotros: azul claro del logotipo */
#nosotrosHeading > .about__heading-o { color: #4AA6D2 !important; }

/* HOME SLIDER — Cinco fotografías, encuadre completo sin recortes (2026) */
.tc-slider { background: #102b3b; overflow: hidden; }
.tc-slide { background: #102b3b; }
.tc-slide img,
.tc-slider .tc-slide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  background: #102b3b !important;
}
.tc-slide:after,
.tc-slider .tc-slide:after { background: none !important; }
.tc-slider .tc-slide__info {
  position: absolute; z-index: 2;
  top: 5.5%; bottom: auto; left: 5%; right: auto;
  transform: none;
  width: max-content; max-width: min(36%, 380px);
  padding: 13px 18px;
  border-radius: 9px;
  background: rgba(6, 27, 43, .80);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  pointer-events: none;
}
.tc-slider .tc-slide__info span { font-size: .65rem; letter-spacing: .12em; }
.tc-slider .tc-slide__info h2 {
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  line-height: 1.2; margin: 5px 0 0;
}
@media (max-width: 767px) {
  .tc-slider .tc-slide__info {
    top: 65px; left: 4%; right: 4%;
    max-width: 78%; width: max-content;
    padding: 9px 12px;
  }
  .tc-slider .tc-slide__info h2 { font-size: clamp(.95rem, 4vw, 1.3rem); }
  .tc-slider .tc-slide__info span { font-size: .58rem; }
}

/* HOME: imágenes de los carruseles Humano y Veterinario a sangre completa.
   Corrige la regla anterior `object-fit: contain` que dejaba franjas laterales.
   No afecta al selector inicial ni a las fotografías de otras secciones. */
#inicio.tc-home,
#inicio .tc-slider,
#inicio .tc-slides,
#inicio .tc-slide {
  width: 100%;
}
#inicio .tc-slider .tc-slide > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Portada: titular sobre el selector Humano / Veterinario; no bloquea clics. */
#inicio .tc-chooser { position: relative; }
#inicio .tc-chooser__headline {
 position: absolute; z-index: 5; top: clamp(20px, 5vh, 60px);
 left: 50%; transform: translateX(-50%); margin: 0;
 width: min(92%, 920px); padding: 12px 20px;
 text-align: center; font-size: clamp(1.35rem, 3.1vw, 2.75rem);
 line-height: 1.15; font-weight: 800; color: #fff;
 text-shadow: 0 2px 14px rgba(0,0,0,.8); pointer-events: none;
}
@media (max-width:700px) {
 #inicio .tc-chooser__headline { top: 12px; width: 94%; font-size: clamp(1.2rem, 5vw, 1.7rem); padding: 10px 12px; background: rgba(6,27,43,.55); border-radius: 8px; }
}

/* HOME — Composición editorial de títulos, según referencia proporcionada. */
#inicio .tc-choice__copy { left: 7%; right: 7%; bottom: 10%; align-items: flex-start; text-align: left; }
#inicio .tc-choice__copy .tc-choice__eyebrow { color: #b9e4f5; font-size: clamp(.66rem,.85vw,.85rem); font-weight: 750; letter-spacing: .15em; margin: 0 0 14px; }
#inicio .tc-choice__copy strong { font-size: clamp(1.45rem,2.6vw,3.1rem); line-height: 1.12; letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; text-shadow: 0 3px 22px rgba(0,0,0,.45); }
#inicio .tc-choice__copy em { margin-top: 20px; }
#inicio .tc-slider .tc-slide::after { background: linear-gradient(90deg,rgba(7,23,37,.74) 0%,rgba(7,23,37,.36) 34%,transparent 67%) !important; }
#inicio .tc-slider .tc-slide__info {
  top: 50%; bottom: auto; left: 4.25%; right: auto;
  transform: translateY(-50%); width: auto; max-width: min(35%,560px);
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  pointer-events: none;
}
#inicio .tc-slider .tc-slide__info > span { font-size: clamp(.62rem,.75vw,.8rem); font-weight: 750; letter-spacing: .18em; color: #b7e2f6; }
#inicio .tc-slider .tc-slide__info .tc-slide__line { display: block; margin-top: 30px; font-size: clamp(.65rem,.8vw,.85rem); font-weight: 750; letter-spacing: .15em; color: #b7e2f6; }
#inicio .tc-slider .tc-slide__info h2 { margin: 14px 0 0; font-size: clamp(2rem,3.25vw,3.65rem); line-height: 1.08; font-weight: 800; letter-spacing: -.045em; color: white; text-wrap: balance; text-shadow: 0 3px 20px rgba(0,0,0,.22); }
@media(max-width:700px) {
  #inicio .tc-choice__copy { left: 7%; right: 7%; bottom: 8%; }
  #inicio .tc-choice__copy strong { font-size: clamp(1.45rem,5.1vw,2.1rem); max-width: 24ch; }
  #inicio .tc-choice__copy .tc-choice__eyebrow { font-size: .68rem; margin-bottom: 8px; }
  #inicio .tc-choice__copy em { margin-top: 12px; }
  #inicio .tc-slider .tc-slide::after { background: linear-gradient(0deg,rgba(7,23,37,.83) 0%,rgba(7,23,37,.3) 52%,transparent 80%) !important; }
  #inicio .tc-slider .tc-slide__info { top: auto; bottom: 15%; left: 7%; right: 7%; transform: none; max-width: 86%; }
  #inicio .tc-slider .tc-slide__info .tc-slide__line { margin-top: 12px; }
  #inicio .tc-slider .tc-slide__info h2 { font-size: clamp(1.8rem,7.4vw,2.7rem); }
}

/* Ajustes exclusivos: fondo de vídeo en Nosotros y rótulo NOSOTROS al doble. */
#nosotros.about--editorial { position: relative; isolation: isolate; }
#nosotros .about__background-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: -1;
  pointer-events: none; user-select: none;
}
/* Veladura translúcida para mantener legibilidad sin ocultar el vídeo. */
#nosotros.about--editorial::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: rgba(211,236,248,.26);
}
#nosotros .about__inner { position: relative; z-index: 1; }
#nosotros .about__topline { font-size: 1.7rem !important; line-height: 1.2; }
@media (max-width: 540px) {
  #nosotros .about__topline { font-size: 1.7rem !important; }
}

/* TECHNOCARD — Nosotros: vídeo continuo también en el remate en V.
   La geometría de la sección y la fotografía original permanecen intactas. */
#nosotros.about--editorial {
  --tc-video-v: clamp(65px, 8.5vw, 120px);
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}
#nosotros .about__background-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: calc(100% + var(--tc-video-v)) !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tc-video-v)), 50% 100%, 0 calc(100% - var(--tc-video-v)));
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Una veladura oscura sobre TODO el vídeo, incluida la punta, para leer el texto. */
#nosotros.about--editorial::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 calc(-1 * var(--tc-video-v)) 0 !important;
  background: linear-gradient(110deg, rgba(5,24,43,.42), rgba(5,26,47,.62)) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tc-video-v)), 50% 100%, 0 calc(100% - var(--tc-video-v)));
  z-index: 1 !important;
  pointer-events: none !important;
}
/* La V azul era un SVG con relleno sólido que tapaba el vídeo. */
#nosotros.about--editorial > .about__wave { display: none !important; }
#nosotros .about__inner { position: relative !important; z-index: 2 !important; }
#nosotros .about__topline,
#nosotros .about__heading,
#nosotros .about__heading span,
#nosotros #nosotrosHeading > .about__heading-o,
#nosotros .about__statement,
#nosotros .about__text,
#nosotros .about__text p,
#nosotros .about__extra-inner p,
#nosotros .about__features span,
#nosotros .about__features b,
#nosotros .about__features svg { color: #fff !important; }
#nosotros .about__topline,
#nosotros .about__heading,
#nosotros .about__statement,
#nosotros .about__text { text-shadow: 0 2px 14px rgba(0,12,25,.75) !important; }
#nosotros .about__text { font-weight: 500; }
#nosotros .about__features span { text-shadow: 0 2px 8px rgba(0,12,25,.8); }
#nosotros .about__features svg { stroke: #fff !important; }
@media (max-width: 768px) {
  #nosotros.about--editorial::after { background: rgba(3,20,38,.65) !important; }
}

/* TECHNOCARD: revisión responsiva integral, priorizando el equipo ECG visible. */
html, body { max-width:100%; }
img, video, iframe, svg { max-width:100%; }
.container, main > section, .about__inner, .about__content, .products__grid,
.catalog__grid, .contact__inner { min-width:0; }
#inicio .tc-chooser, #inicio .tc-slider { width:100%; max-width:100%; }
#inicio .tc-slider { height:clamp(560px,calc(100svh - var(--header-h,80px)),1000px); }
#inicio .tc-slider .tc-slide__backdrop { display:none; }
#inicio .tc-slider .tc-slide > img { object-position: 55% center !important; }
#inicio .tc-slider .tc-slide__info { max-width:min(38%,570px); }
#inicio .tc-slider .tc-slide__info h2 { overflow-wrap:normal; hyphens:none; }
#nosotros .about__content, #nosotros .about__text { min-width:0; }
#nosotros .about__heading { overflow-wrap:anywhere; }
#nosotros .about__background-video { max-width:none; }
@media (max-width: 1000px) {
  #nosotros .about__inner { grid-template-columns:minmax(0,1fr) !important; }
  #nosotros .about__media, #nosotros .about__content { min-width:0; max-width:100%; }
  #nosotros .about__content { padding:clamp(18px,4vw,32px); }
}
@media (max-width: 760px) {
  #inicio .tc-slider { height:calc(100svh - var(--header-h,70px)); min-height:560px; max-height:920px; }
  /* La foto principal se conserva ENTERA en el área visual superior.
     El fondo ampliado y difuminado llena el resto sin franjas laterales. */
  #inicio .tc-slider .tc-slide__backdrop {
    display:block; position:absolute; inset:-18px;
    background-size:cover; background-position: 60% center;
    filter:blur(22px) brightness(.58); transform:scale(1.05);
  }
  #inicio .tc-slider .tc-slide > img {
    top:clamp(72px,11%,105px) !important; bottom:auto !important;
    left:0 !important; right:0 !important;
    width:100% !important; height:60% !important;
    object-fit:contain !important; object-position:center center !important;
  }
  #inicio .tc-slider .tc-slide::after {
    background:linear-gradient(0deg,rgba(5,20,34,.94) 0%,rgba(5,20,34,.74) 20%,transparent 51%) !important;
  }
  #inicio .tc-slider .tc-slide__info {
    top:auto !important; bottom:clamp(76px,13%,112px) !important;
    left:6% !important; right:6% !important; transform:none !important;
    max-width:88% !important; width:auto !important;
  }
  #inicio .tc-slider .tc-slide__info .tc-slide__line { margin-top:0 !important; }
  #inicio .tc-slider .tc-slide__info h2 {
    font-size:clamp(1.45rem,6.5vw,2.55rem) !important;
    line-height:1.12 !important; margin-top:9px !important;
    overflow-wrap:break-word;
  }
  #inicio .tc-back { top:14px; left:5%; padding:10px 15px; font-size:.82rem; }
  #inicio .tc-controls { bottom:18px; right:5%; left:5%; justify-content:flex-end; gap:10px; }
  #inicio .tc-controls button { width:40px; height:40px; flex-shrink:0; }
  #inicio .tc-controls #tcCounter { margin-right:auto; font-size:.75rem; }
  #inicio .tc-dots { gap:5px; }
  #inicio .tc-choice__copy strong { font-size:clamp(1.3rem,5.4vw,2.1rem); }
  #inicio .tc-choice__copy { bottom:7%; }
  #nosotros.about--editorial { --tc-video-v:clamp(42px,12vw,78px); }
  #nosotros .about__topline { font-size:clamp(1.4rem,5.5vw,1.7rem) !important; }
  #nosotros .about__features { flex-wrap:wrap; }
  #nosotros .about__features span { min-width:0; }
}
@media (max-width: 390px) {
  #inicio .tc-slider .tc-slide > img { top:66px !important; height:57% !important; }
  #inicio .tc-slider .tc-slide__info { bottom:77px !important; }
  #inicio .tc-slider .tc-slide__info h2 { font-size:clamp(1.34rem,6.3vw,1.65rem) !important; }
  #inicio .tc-controls { gap:6px; }
  #inicio .tc-controls button { width:36px; height:36px; }
  #inicio .tc-choice__copy strong { font-size:clamp(1.2rem,5.2vw,1.55rem); }
  #nosotros .about__features span { font-size:.48rem; }
}
@media (max-height: 650px) and (max-width: 760px) {
  #inicio .tc-slider { min-height:520px; }
  #inicio .tc-slider .tc-slide > img { height:55% !important; }
}

/* FIX 2026-10-11: El slider móvil llena el 100% de su caja con fotografía real.
   La imagen se amplía con cover, sin franjas ni fondos difuminados. */
@media (max-width: 760px) {
  #inicio .tc-slider .tc-slide__backdrop { display: none !important; }
  #inicio .tc-slider .tc-slide > img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: 55% center !important;
    transform: none !important;
  }
  /* Priorizamos el equipo y el sujeto central en cada fotografía. */
  #inicio .tc-slider .tc-slide:nth-child(1) > img { object-position: 56% center !important; }
  #inicio .tc-slider .tc-slide:nth-child(2) > img { object-position: 57% center !important; }
  #inicio .tc-slider .tc-slide:nth-child(3) > img { object-position: 56% center !important; }
  #inicio .tc-slider .tc-slide::after {
    background: linear-gradient(0deg, rgba(5,20,34,.86) 0%, rgba(5,20,34,.52) 24%, transparent 58%) !important;
  }
  #inicio .tc-slider .tc-slide__info {
    z-index: 2;
    bottom: clamp(88px, 16%, 145px) !important;
  }
}

/* TechnoCard — dos propuestas móviles para conservar los equipos completos.
   Solo afecta al slider interior, no a las dos imágenes de selección. */
@media (max-width: 760px) {
 #inicio .tc-slider { position:relative !important; height:clamp(610px, calc(100svh - var(--header-h,70px)), 1000px) !important; min-height:610px !important; overflow:hidden !important; }
 #inicio .tc-slider .tc-slide {overflow:hidden !important;}
 #inicio .tc-slider .tc-slide > img {padding:0 !important; margin:0 !important; transform:none !important; max-width:none !important; }
 #inicio .tc-slider .tc-slide__info {top:auto !important; left:6% !important; right:6% !important; transform:none !important; max-width:88% !important; z-index:4 !important; }
 #inicio .tc-slider .tc-slide__info h2 {font-size:clamp(1.35rem,6vw,2.1rem) !important; line-height:1.12 !important; overflow-wrap:break-word !important;}
 #inicio .tc-slider .tc-slide__info .tc-slide__line {font-size:clamp(.65rem,2.6vw,.85rem) !important;}
 #inicio .tc-slider .tc-slide::after {pointer-events:none !important;}
}

/* OPCIÓN B: caja completa con foto extendida de fondo (sin desenfoque),
   fotografía íntegra delante. Los bordes adicionales son de la misma foto. */
@media (max-width: 760px) {
 #inicio .tc-slider .tc-slide__backdrop {
   display:block !important; position:absolute !important; inset:0 !important;
   background-size:cover !important; background-position:center center !important;
   filter:none !important; opacity:.72 !important; transform:none !important;
 }
 #inicio .tc-slider .tc-slide > img {
   position:absolute !important; top:clamp(90px,14%,120px) !important; left:0 !important; right:0 !important; bottom:auto !important;
   width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:1672/941 !important;
   object-fit:contain !important; object-position:center center !important; display:block !important;
   box-shadow:0 16px 38px rgba(0,0,0,.22) !important;
 }
 #inicio .tc-slider .tc-slide::after {background:linear-gradient(0deg,rgba(3,13,24,.96) 0%,rgba(3,13,24,.82) 28%,rgba(3,13,24,.2) 70%) !important;}
 #inicio .tc-slider .tc-slide__info {bottom:clamp(95px,15%,150px) !important;}
}

/* FIX FINAL MOBILE: fotografía REAL a sangre, focalización específica en el producto.
   El alto del slider se aproxima a la proporción de las fotos para evitar
   un recorte excesivo en pantallas estrechas. */
@media (max-width:760px) {
  #inicio .tc-slider {
    height:clamp(310px, 102vw, 490px) !important;
    min-height:0 !important; max-height:none !important;
    width:100% !important; overflow:hidden !important;
    background:transparent !important;
  }
  #inicio .tc-slider .tc-slide, #inicio .tc-slider .tc-slides {
    height:100% !important; min-height:0 !important; overflow:hidden !important;
  }
  #inicio .tc-slider .tc-slide__backdrop {display:none !important;}
  #inicio .tc-slider .tc-slide > img {
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    min-height:100% !important; max-width:none !important;
    aspect-ratio:auto !important; object-fit:cover !important;
    object-position:70% 50% !important;
    box-shadow:none !important; transform:none !important;
    padding:0 !important; margin:0 !important;
  }
  /* Prioridad al ECG, pinzas, electrodos y dispositivos veterinarios. */
  #inicio .tc-slider[data-category="humano"] .tc-slide:nth-child(1) > img {object-position:69% 54% !important;}
  #inicio .tc-slider[data-category="humano"] .tc-slide:nth-child(2) > img {object-position:86% 57% !important;}
  #inicio .tc-slider[data-category="humano"] .tc-slide:nth-child(3) > img {object-position:61% 50% !important;}
  #inicio .tc-slider[data-category="veterinario"] .tc-slide:nth-child(1) > img {object-position:72% 55% !important;}
  #inicio .tc-slider[data-category="veterinario"] .tc-slide:nth-child(2) > img {object-position:76% 50% !important;}
  #inicio .tc-slider .tc-slide::after {
    background:linear-gradient(0deg,rgba(5,18,31,.89) 0%,rgba(5,18,31,.56) 26%,transparent 57%) !important;
  }
  #inicio .tc-slider .tc-slide__info {
    top:auto !important; bottom:62px !important; left:5% !important; right:5% !important;
    max-width:90% !important; width:auto !important; z-index:3 !important;
  }
  #inicio .tc-slider .tc-slide__info h2 {font-size:clamp(1.28rem,5.6vw,2rem) !important;line-height:1.08 !important;}
  #inicio .tc-back {top:10px !important;left:4% !important;}
  #inicio .tc-controls {bottom:9px !important;left:4% !important;right:4% !important;}
}

/* MOBILE: quitar espacio residual entre el slider y Nosotros.
   La sección padre tenía min-height de pantalla completa mientras
   el carrusel interior se había reducido a ~102vw. */
@media (max-width: 760px) {
  #inicio.tc-home.tc-home--slider-active {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #inicio.tc-home.tc-home--slider-active #tcSlider {
    display: block;
    position: relative;
    height: clamp(310px, 102vw, 490px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #inicio.tc-home.tc-home--slider-active #tcSlides,
  #inicio.tc-home.tc-home--slider-active .tc-slide {
    height: 100% !important;
    min-height: 0 !important;
  }
  #inicio.tc-home.tc-home--slider-active + #nosotros {
    margin-top: 0 !important;
  }
}

/* Etiquetas de categoría de equipos: una sola línea y alineación uniforme. */
.products .premium-products__category {
  white-space: nowrap !important;
  font-size: clamp(7px, 1.65vw, 11px) !important;
  letter-spacing: .015em !important;
  line-height: 1.5 !important;
}