/* ============================================================
   INDUSTRIAS DROT SRL — pages.css
   Secciones específicas de cada página
   ============================================================ */

/* ============================================================
   HOME — Hero slider
   ============================================================ */
.hero-home { height: 100vh; min-height: 45rem; }

/* Track horizontal: los slides van uno al lado del otro y se arrastran */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  will-change: transform;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
/* Copias del primero y del último que hacen posible el bucle */
.hero-slide.es-clon { pointer-events: none; }
.hero-slide__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}

.hero-home__texto {
  position: relative;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: center;
  height: 100%;
  padding-block-start: var(--nav-alto);
  text-align: center;
  color: var(--blanco);
}
.hero-home__titulo {
  /* 82rem alcanza para que "Soluciones personalizadas." entre en un renglón.
     Sin text-wrap:balance: los saltos los define el <br> del contenido. */
  max-width: 82rem;
  /* Alto reservado para dos renglones: así el botón no sube y baja
     según el largo del titular de cada slide. */
  min-height: 11.1rem;
  display: grid;
  align-content: center;
}
.hero-home__bajada {
  margin-block-start: 2.5rem;
  color: var(--gris-100);
  max-width: 45rem;
  min-height: 5.6rem;            /* dos renglones reservados */
  display: grid;
  align-content: start;
}
.hero-home__cta { margin-block-start: 5.5rem; }

/* Puntos del slider */
.hero-puntos {
  position: absolute;
  z-index: 7;
  inset-block-end: 5.5rem;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 1.875rem;
}
.hero-punto {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.hero-punto:hover { transform: scale(1.4); }
.hero-punto.esta-activo { background: var(--blanco); transform: scale(1.25); }

/* ============================================================
   HOME — Quienes Somos
   ============================================================ */
.home-nosotros { background: var(--gris-200); padding-block: 9.5rem; }
.home-nosotros__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34rem;
  gap: 6rem;
  align-items: center;
}
.home-nosotros__texto { max-width: 52rem; }
.home-nosotros__texto .t-seccion { margin-block-end: 3rem; }
.home-nosotros__texto .link-flecha { margin-block-start: 4rem; }

/* Marco de imagen con la esquina azul del motivo de marca */
.marco-esquina {
  position: relative;
  border-radius: 1.75rem 0 1.75rem 1.75rem;
  overflow: hidden;
  isolation: isolate;
}
/* Misma proporción que las cards de producto.
   La imagen va absoluta: si no, su alto natural manda y el aspect-ratio se ignora. */
.marco-esquina--retrato { aspect-ratio: 480 / 589; }
.marco-esquina--retrato img { position: absolute; inset: 0; }
.marco-esquina img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
/* Degradé que acompaña el despliegue de la imagen y se disuelve al final */
.marco-esquina__velo {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.95) 100%);
}

.marco-esquina__cuna {          /* cuña azul superior derecha */
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 4.5rem;
  height: 4.5rem;
  /* Cuadrado menos un cuarto de disco: la "O" del isologo. Escala con el rem. */
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
  transform-origin: right center;
}

/* ============================================================
   HOME — Productos
   ============================================================ */
.home-productos { position: relative; overflow: hidden; background: var(--negro); }
/* Se extiende por arriba y por abajo para tener recorrido: el parallax
   arranca mostrando la base de la foto y va descubriendo hacia arriba. */
.home-productos__fondo { position: absolute; inset: -34% 0; z-index: 0; }
.home-productos__fondo img { width: 100%; height: 100%; object-fit: cover; }
.home-productos__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
}
.home-productos__intro {
  position: relative;
  z-index: 3;
  /* Más corto que antes: así el encabezado se despega de las tarjetas en
     lugar de fundirse con ellas. La foto de fondo queda con más zoom. */
  padding-block: 7rem 5.5rem;
  text-align: center;
  color: var(--blanco);
}
.home-productos__intro .t-seccion { margin-block-end: 2.75rem; }
.home-productos__intro p {
  max-width: 45rem;
  margin-inline: auto;
  color: var(--blanco);
}

/* ============================================================
   HOME — Calculador
   ============================================================ */
.home-calculador { padding-block: 10.5rem; text-align: center; }
.home-calculador__encabezado { margin-block-end: 5.5rem; }
.home-calculador__bajada {
  max-width: 46rem;             /* dos renglones parejos, sin viuda */
  text-wrap: balance;
  margin-inline: auto;
  margin-block-start: 2rem;
  color: var(--gris-600);
}

/* Variante reducida: sólo el título y los dos accesos */
.home-calculador--compacto { padding-block: 9rem; }
.home-calculador--compacto .t-seccion { margin-block-end: 4.5rem; }
.home-calculador__botones {
  display: flex;
  justify-content: center;
  gap: 4.25rem;
  flex-wrap: wrap;
}

/* --- Las dos tarjetas --- */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  text-align: start;
}

.calc-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.75rem;
  padding: 3.5rem 3.25rem 3rem;
  background: var(--gris-100);
  border: .0625rem solid var(--gris-300);
  border-radius: 2rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--gris-900);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              background var(--dur-media) var(--ease-suave);
}
.calc-card:hover,
.calc-card:focus-visible {
  transform: translateY(-.5rem);
  background: var(--blanco);
  border-color: var(--azul);
  box-shadow: 0 0 0 .375rem rgba(0, 93, 172, .14),
              0 1.25rem 3rem rgba(0, 93, 172, .32);
}

/* Cuña del isologo, de fondo, girando en hover */
.calc-card__cuna {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 11rem;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.4%, rgba(0, 93, 172, .09) 100%);
  transform-origin: center;
  transition: transform 1.1s var(--ease-suave), background var(--dur-media) var(--ease-suave);
}
.calc-card:hover .calc-card__cuna {
  transform: rotate(-90deg) scale(1.06);
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.4%, rgba(0, 93, 172, .16) 100%);
}

.calc-card > *:not(.calc-card__cuna) { position: relative; z-index: 1; }

.calc-card__icono {
  width: 5rem;
  height: 5rem;
  color: var(--azul);
  transition: transform var(--dur-media) var(--ease-suave);
}
.calc-card:hover .calc-card__icono { transform: translateY(-.25rem) scale(1.04); }

.calc-card__titulo {
  font-family: var(--f-titulo);
  font-size: 2.625rem;            /* 42px */
  font-weight: 400;
  line-height: 1.06;
  color: var(--gris-900);
}
.calc-card__titulo strong { font-weight: 700; }

.calc-card__texto { font-size: 1.5rem; line-height: 1.4; color: var(--gris-600); }

.calc-card__lista { display: grid; gap: .875rem; }
.calc-card__lista li {
  position: relative;
  padding-inline-start: 2.25rem;
  font-size: 1.4375rem;
  line-height: 1.35;
}
/* Viñeta con el mismo motivo de marca */
.calc-card__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .42em;
  width: .9375rem;
  height: .9375rem;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99%, var(--azul) 100%);
}

.calc-card__ejemplo {
  display: grid;
  gap: .5rem;
  margin-block-start: .5rem;
  padding-block-start: 1.75rem;
  border-block-start: .0625rem solid var(--gris-300);
}
.calc-card__etiqueta {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-600);        /* gris-500 sobre #F2F2F2 daba 2,9:1 */
}
.calc-card__cuenta {
  font-size: 1.5rem;
  color: var(--gris-900);
  line-height: 1.25;
}
/* Los números usan la misma tipografía que la tabla técnica */
.calc-card__cuenta b {
  font-family: var(--f-datos);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--azul);
  margin-inline-start: .375rem;
}

.calc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: .75rem;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--azul);
}
.calc-card__cta svg {
  width: 2.25rem;
  height: auto;
  transition: transform var(--dur-media) var(--ease-suave);
}
.calc-card:hover .calc-card__cta svg { transform: translateX(.5rem); }

@media (max-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   HOME — Cotización rápida
   ============================================================ */
.home-cotizacion { background: var(--gris-900); padding-block: 8rem 9rem; }
.home-cotizacion__encabezado { text-align: center; margin-block-end: 4.5rem; }
/* Mismo tratamiento que "Nosotros", "Productos" y "Calculador" */
.home-cotizacion__titulo {
  color: var(--blanco);
  margin-block-end: 1.75rem;
}
.home-cotizacion__encabezado p { color: var(--gris-100); }
.home-cotizacion__card {
  width: min(100%, 51.5rem);
  margin-inline: auto;
  background: var(--gris-700);
  padding: 4.5rem 4.25rem;
  display: grid;
  justify-items: center;
  gap: 3.5rem;
  /* Mismo radio y resplandor que la tarjeta del mapa */
  border-radius: 2rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 93, 172, .38);
}
.home-cotizacion__card .fila-campo { width: 100%; }

/* ============================================================
   HOME / CONTACTO — bloque de dirección + mapa
   ============================================================ */
/* Fondo plano, sin foto. Lo que lo saca de lo estático son dos capas muy
   tenues que se mueven despacio: una trama de hilos en diagonal —el
   trefilado, apenas insinuado— y un halo azul que respira. Ninguna de las
   dos aporta información, así que se apagan sin costo si el sistema pide
   menos movimiento. */
.bloque-contacto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(168deg, var(--blanco) 0%, var(--gris-100) 46%, #E9ECEF 100%);
}

/* Halo azul: dos manchas grandes que derivan en sentidos opuestos */
.bloque-contacto::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 16% 20%, rgba(0, 93, 172, .14), transparent 68%),
    radial-gradient(46rem 34rem at 86% 82%, rgba(0, 93, 172, .11), transparent 70%);
  animation: contacto-aura 27s var(--ease-suave) infinite alternate;
}
@keyframes contacto-aura {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1.02); }
  to   { transform: translate3d( 1.6%,  1.2%, 0) scale(1.07); }
}

/* Trama de hilos. El gradiente va a 120°, así que su eje es (sin120, -cos120)
   = (.866, .5): bajando 2 períodos el patrón vuelve a caer sobre sí mismo y
   el bucle no tiene salto. Período 1.75rem -> recorrido 3.5rem. */
.bloque-contacto__trama {
  position: absolute;
  inset: -4rem 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    120deg,
    rgba(0, 93, 172, .085) 0 .0625rem,
    transparent .0625rem 1.75rem);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 100%);
  animation: contacto-hilos 32s linear infinite;
}
@keyframes contacto-hilos {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -3.5rem, 0); }
}

/* Un filo azul arriba y abajo, del mismo tono que los separadores */
.bloque-contacto::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: 0;
  z-index: 2;
  pointer-events: none;
  border-block: .0625rem solid rgba(0, 93, 172, .16);
}

@media (prefers-reduced-motion: reduce) {
  .bloque-contacto::before,
  .bloque-contacto__trama { animation: none; }
}
.sin-anim .bloque-contacto::before,
.sin-anim .bloque-contacto__trama { animation: none; }

.bloque-contacto__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46rem;
  gap: 5rem;
  align-items: start;              /* el texto arranca a la altura del mapa */
  padding-block: 8.75rem;
}
.bloque-contacto__datos {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: start;
  gap: 1.5rem;
}
.bloque-contacto__datos svg { width: 1.75rem; margin-block-start: .55rem; fill: var(--azul); }
/* Cada dato en su renglón, con aire entre grupos: apelmazados no se leen */
.bloque-contacto__datos address {
  display: grid;
  gap: 1.25rem;
  font-size: 1.875rem;
  line-height: 1.45;
}
.bloque-contacto__datos address > .grupo { display: grid; gap: .25rem; }
.bloque-contacto__datos a { transition: color var(--dur-rapida) var(--ease-suave); }
.bloque-contacto__datos a:hover { color: var(--azul); }

/* Las fotos van fuera del bloque animado: GSAP le deja will-change:transform
   y eso crea bloque contenedor, con lo que la vista ampliada dejaría de ser
   relativa a la ventana. */
.bloque-contacto__col { display: grid; gap: 3rem; align-content: start; }

/* Galería compacta: la lámina grande sólo existe una vez ampliada, así que
   fuera de ese estado el bloque son las miniaturas y nada más. */
.galeria--compacta { position: static; top: auto; gap: 0; }
.galeria--compacta:not(.esta-ampliada) .galeria__marco { display: none; }
.galeria--compacta .galeria__miniaturas { gap: 1.5rem; }
.galeria--compacta:not(.esta-ampliada) .galeria__mini {
  aspect-ratio: 4 / 3;
  opacity: 1;
  border-radius: 1rem 0 1rem 1rem;   /* tres puntas redondas, como las fotos */
  cursor: zoom-in;
}
.galeria--compacta:not(.esta-ampliada) .galeria__mini::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
}
.galeria--compacta:not(.esta-ampliada) .galeria__mini:hover {
  transform: translateY(-.375rem);
  box-shadow: 0 1rem 2.5rem rgba(0, 93, 172, .32);
}

.mapa-card {
  display: block;
  position: relative;
  aspect-ratio: 750 / 605;
  border: .125rem solid var(--azul);
  border-radius: 2rem;
  overflow: hidden;
  /* Sólo el resplandor difuso: el aro duro engrosaba el trazo del borde */
  box-shadow: 0 1.25rem 3rem rgba(0, 93, 172, .38);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
/* El halo es permanente y nunca se apaga. La tarjeta entra por opacidad
   (ver animations.js, bloque 3a), que arrastra la sombra consigo; con la
   máscara de clip-path el halo quedaba recortado y aparecía de golpe. */
.mapa-card img { width: 100%; height: 100%; object-fit: cover; }
.mapa-card:hover {
  transform: translateY(-.5rem);
  box-shadow: 0 1.75rem 4rem rgba(0, 93, 172, .5);
}
/* La planta está en x 53,36% / y 50,63% de mapa-drot.jpg: ahí apoya la punta
   del pin. Los marcadores rojos que traía la captura se borraron de la imagen
   (tools/borrar_pines_mapa.py), así que este pin es el único que se ve. */
.mapa-card__pin {
  position: absolute;
  z-index: 3;
  inset-block-start: 50.63%;
  inset-inline-start: 53.36%;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}
.mapa-card__pin svg {
  width: 2.2rem;
  height: auto;
  filter: drop-shadow(0 .125rem .25rem rgba(0,0,0,.35));
}
.mapa-card__pin span {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin-block-start: .25rem;
  white-space: nowrap;
  font-family: var(--f-texto);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gris-900);
  background: rgba(255,255,255,.86);
  padding: .125rem .5rem;
  border-radius: .25rem;
}
.mapa-card__abrir {
  position: absolute;
  z-index: 4;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  background: var(--blanco);
  color: var(--azul);
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.125rem;
  padding: .625rem 1.25rem;
  border-radius: var(--radio-pill);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.2);
}

/* ============================================================
   NOSOTROS
   ============================================================ */
.nosotros-texto { padding-block: 9rem 6rem; }
.nosotros-texto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34rem;
  gap: 6rem;
  align-items: start;
}
.nosotros-texto__col { max-width: 52rem; }

.nosotros-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  padding-block-end: 7rem;
}
.nosotros-galeria figure {
  position: relative;
  aspect-ratio: 273 / 253;
  overflow: hidden;
  isolation: isolate;
}
.nosotros-galeria img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 1s var(--ease-suave);
}
.nosotros-galeria figure:hover img { transform: scale(1.13); }
/* Cuñas azules del motivo de marca, en esquinas opuestas */
.nosotros-galeria figure::before,
.nosotros-galeria figure::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 3.75rem;
  height: 3.75rem;
}
.nosotros-galeria figure::before {
  inset-block-start: 0; inset-inline-end: 0;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
}
.nosotros-galeria figure::after {
  inset-block-end: 0; inset-inline-start: 0;
  background: radial-gradient(circle farthest-side at 100% 0,
              transparent 0 99.2%, var(--azul) 100%);
}

.nosotros-cierre { padding-block: 4rem 9rem; text-align: center; }
.nosotros-cierre p {
  max-width: 71rem;
  margin-inline: auto;
  font-size: 2.125rem;
  line-height: 1.42;
  color: var(--azul);
}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.ficha { padding-block: 7.5rem 6rem; }

.ficha__titulo {
  font-family: var(--f-titulo);
  font-size: 3.75rem;              /* 60px */
  font-weight: 400;
  line-height: 1.04;
  color: var(--gris-900);
  margin-block-end: 4rem;
}
.ficha__titulo strong { font-weight: 700; }

/* La galería a la izquierda y todo el texto a la derecha: así no queda
   un hueco grande debajo de la imagen. */
.ficha__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: 5rem;
  align-items: start;
}

.ficha__info { display: grid; gap: 3.5rem; }
.ficha__intro { font-size: 1.6875rem; line-height: 1.45; max-width: 56rem; }

.ficha__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem 3.5rem;
  align-items: start;
}
.spec__titulo { margin-block-end: .875rem; }
.spec p { font-size: 1.5rem; line-height: 1.4; }

.ficha__acciones { display: flex; gap: 1.75rem; flex-wrap: wrap; }

/* ============================================================
   GALERÍA DE LA FICHA
   ============================================================ */
.galeria {
  display: grid;
  gap: 1.25rem;
  position: sticky;
  top: 11rem;                      /* acompaña el scroll por debajo del navbar */
}

.galeria__marco {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  background: var(--negro);
  /* Tres esquinas redondeadas; arriba a la derecha va la cuña */
  border-radius: 2rem 0 2rem 2rem;
  cursor: grab;
  touch-action: pan-y;
}
.galeria__marco.esta-arrastrando { cursor: grabbing; user-select: none; }
.galeria__marco:focus { outline: none; }
.galeria__marco:focus-visible { outline: .1875rem solid var(--azul); outline-offset: .25rem; }

.galeria__laminas { position: absolute; inset: 0; }
.galeria__lamina {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.galeria__lamina.esta-activa { opacity: 1; visibility: visible; }
.galeria__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
/* Fotos verticales sobre negro: se muestran enteras, sin recorte */
.galeria--completa .galeria__lamina img { object-fit: contain; }

.galeria__cuna {
  position: absolute;
  z-index: 4;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 4.5rem;
  height: 4.5rem;
  pointer-events: none;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
}

/* --- HUD: flechas y contador --- */
.galeria__flecha {
  position: absolute;
  z-index: 5;
  inset-block-start: 50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--blanco);
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(.5rem);
  -webkit-backdrop-filter: blur(.5rem);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: .82;
  transition: opacity var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.galeria__flecha svg { width: 2.5rem; height: 2.5rem; }
.galeria__flecha--anterior  { inset-inline-start: 1.25rem; }
.galeria__flecha--siguiente { inset-inline-end: 1.25rem; }
.galeria__flecha--siguiente svg { transform: scaleX(-1); }
.galeria__flecha:hover {
  opacity: 1;
  background: var(--azul);
  transform: translateY(-50%) scale(1.06);
}
.galeria__flecha:disabled { opacity: .28; pointer-events: none; }

/* --- Miniaturas --- */
.galeria__miniaturas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.galeria__mini {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .875rem;
  background: var(--negro);
  opacity: .55;
  transition: opacity var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria--completa .galeria__mini img { object-fit: contain; }
.galeria__mini:hover { opacity: .85; transform: translateY(-.1875rem); }
.galeria__mini.esta-activa {
  opacity: 1;
  box-shadow: 0 0 0 .1875rem var(--azul);
}

/* ============================================================
   GALERÍA — VISTA AMPLIADA
   La misma galería pasa a pantalla completa: no se duplica el
   marcado, así el índice y la navegación siguen siendo los mismos.
   ============================================================ */
.galeria-velo {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(18, 18, 20, .55);
  backdrop-filter: blur(2.25rem) saturate(130%);
  -webkit-backdrop-filter: blur(2.25rem) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media) var(--ease-suave),
              visibility 0s var(--dur-media);
}
body.hay-ampliada .galeria-velo {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-media) var(--ease-suave), visibility 0s 0s;
}
body.hay-ampliada { overflow: hidden; }

/* Botón de cerrar: sólo existe en la vista ampliada */
.galeria__cerrar {
  position: fixed;
  z-index: 210;
  inset-block-start: 2.5rem;
  inset-inline-end: 2.75rem;
  display: none;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--blanco);
  background: rgba(0, 0, 0, .42);
  border-radius: 50%;
  transition: background var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.galeria__cerrar svg { width: 2rem; height: 2rem; }
.galeria__cerrar:hover { background: var(--azul); transform: rotate(90deg); }
.galeria.esta-ampliada .galeria__cerrar { display: grid; }

/* --- La galería ocupando la pantalla --- */
.galeria.esta-ampliada {
  position: fixed;
  inset: 0;
  z-index: 200;
  top: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.75rem;
  padding: 6rem 5rem 3.5rem;
  margin: 0;
}
.galeria.esta-ampliada .galeria__marco {
  aspect-ratio: auto;
  height: 100%;
  background: rgba(0, 0, 0, .34);
  cursor: default;
}
/* Ampliada se ve la foto entera, sin recorte */
.galeria.esta-ampliada .galeria__lamina img { object-fit: contain; }

.galeria.esta-ampliada .galeria__flecha {
  width: 5.5rem;
  height: 5.5rem;
  background: rgba(0, 0, 0, .5);
}
.galeria.esta-ampliada .galeria__flecha svg { width: 3rem; height: 3rem; }
.galeria.esta-ampliada .galeria__flecha--anterior  { inset-inline-start: 2rem; }
.galeria.esta-ampliada .galeria__flecha--siguiente { inset-inline-end: 2rem; }

.galeria.esta-ampliada .galeria__miniaturas {
  justify-self: center;
  grid-auto-columns: 9rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: .25rem;
}
.galeria.esta-ampliada .galeria__miniaturas::-webkit-scrollbar { display: none; }
.galeria.esta-ampliada .galeria__mini { opacity: .5; }
.galeria.esta-ampliada .galeria__mini.esta-activa { opacity: 1; }

/* Da a entender que la imagen se puede ampliar */
.galeria:not(.esta-ampliada) .galeria__marco { cursor: zoom-in; }
.galeria:not(.esta-ampliada) .galeria__marco.esta-arrastrando { cursor: grabbing; }

@media (max-width: 1000px) {
  .galeria.esta-ampliada { padding: 5rem 1.5rem 2rem; }
  .galeria.esta-ampliada .galeria__flecha { width: 4rem; height: 4rem; }
}

/* ============================================================
   NAVEGADOR DE OTROS PRODUCTOS
   ============================================================ */
.nav-prod { padding-block: 4rem 9.5rem; }   /* aire antes del pie de página */

.nav-prod__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 2.5rem;
}
.nav-prod__titulo-seccion {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-900);
}
.nav-prod__hud { display: flex; gap: .875rem; }
/* Dentro del HUD las flechas dejan de estar posicionadas sobre la imagen */
.nav-prod__hud .galeria__flecha {
  position: static;
  transform: none;
  width: 4rem;
  height: 4rem;
  color: var(--azul);
  background: var(--gris-100);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}
.nav-prod__hud .galeria__flecha:hover {
  transform: scale(1.06);
  color: var(--blanco);
  background: var(--azul);
}
.nav-prod__hud .galeria__flecha:disabled { opacity: .3; }

.nav-prod__pista {
  display: grid;
  grid-auto-flow: column;
  /* Cuatro por vista; el resto se alcanza deslizando. Sin minmax(0,...)
     para que las columnas no se encojan hasta entrar todas. */
  grid-auto-columns: calc((100% - 3 * 1.75rem) / 4);
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: .5rem;
}
.nav-prod__pista::-webkit-scrollbar { display: none; }
.nav-prod__pista:focus { outline: none; }
.nav-prod__pista:focus-visible { outline: .1875rem solid var(--azul); outline-offset: .5rem; }

.nav-prod__item { scroll-snap-align: start; display: grid; gap: 1rem; }
.nav-prod__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--negro);
  border-radius: 1.25rem 0 1.25rem 1.25rem;
}
.nav-prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.02);
  transition: transform 1s var(--ease-suave);
}
.nav-prod__item:hover .nav-prod__media img { transform: scale(1.09); }
.nav-prod__cuna {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
}
.nav-prod__titulo {
  font-family: var(--f-titulo);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--gris-900);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.nav-prod__titulo strong { font-weight: 700; }
.nav-prod__item:hover .nav-prod__titulo { color: var(--azul); }

.nav-prod__barra {
  margin-block-start: 2rem;
  height: .125rem;
  background: var(--gris-300);
  overflow: hidden;
}
.nav-prod__barra span {
  display: block;
  height: 100%;
  background: var(--azul);
  transform-origin: left center;
  transform: scaleX(.18);
  transition: transform var(--dur-rapida) var(--ease-suave);
}

@media (max-width: 1000px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .galeria { position: static; }
  .nav-prod__pista { grid-auto-columns: calc((100% - 1.75rem) / 2); }
}

/* ============================================================
   DATOS TÉCNICOS
   ============================================================ */
.calculadora { padding-block: 7.5rem 3.5rem; text-align: center; }
.calculadora__titulo { margin-block-end: .875rem; }
.calculadora__titulo .and { color: var(--gris-900); font-weight: 400; }
.calculadora__bajada { color: var(--gris-900); font-size: 1.6875rem; margin-block-end: 4.5rem; }

.calculadora__campos {
  display: flex;
  justify-content: center;
  gap: 3.25rem;
  flex-wrap: wrap;
  margin-block-end: 4rem;
}
.campo-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* evita que el input imponga su ancho intrínseco */
  gap: 1rem;
  width: 16rem;
}
.campo-calc__label {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .01em;
  color: var(--gris-900);
}
.campo-calc__caja {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.75rem;
  background: var(--gris-100);
  border: .0625rem solid transparent;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}
/* Al enfocar, lo único que cambia es la placa de la unidad: se pinta de azul.
   Nada de mover bordes ni fondos, que competían con el cursor. */
.campo-calc input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding-inline: 1.25rem;
  font-size: 1.4375rem;
  color: var(--gris-900);
  background: transparent;
  -moz-appearance: textfield;
}
.campo-calc input::-webkit-outer-spin-button,
.campo-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-calc input::placeholder { color: var(--gris-500); }
/* Placa de unidad: gris, pegada al borde derecho de la caja */
.campo-calc__unidad {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 4.25rem;
  padding-inline: .75rem;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--gris-600);
  background: var(--gris-300);
  flex-shrink: 0;
  transition: background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.campo-calc__caja:focus-within .campo-calc__unidad { background: var(--azul); color: var(--blanco); }
.campo-calc.es-resultado .campo-calc__unidad { background: var(--azul); color: var(--blanco); }
.campo-calc.es-resultado .campo-calc__caja { background: var(--azul-tenue); border-color: var(--azul); }
.campo-calc.es-resultado input { color: var(--azul); font-weight: 700; }

/* La reserva equivale exactamente a una línea de texto: el bloque mide lo
   mismo con resultado y sin él, así no salta nada al calcular. */
.calculadora__resultado {
  margin-block-start: 2rem;
  font-family: var(--f-texto);
  font-size: 1.5rem;
  color: var(--gris-600);
  line-height: 1.35;
  min-height: 1.35em;
}

/* ============================================================
   SEPARADORES DE HAZ
   Misma familia que las líneas entre filas de productos: un
   trazo azul fino con un halo que se arrastra. La variante con
   nodo invierte el sentido del halo y marca el centro, para que
   se lea distinta sin salirse del sistema.
   ============================================================ */
.separador-haz {
  position: relative;
  height: 8rem;
  width: min(100% - var(--gutter) * 2, 101.25rem);
  margin-inline: auto;
  pointer-events: none;
}
/* La línea va al centro exacto del bloque, no a un borde: el halo crece
   hacia un lado pero el trazo queda equidistante de las dos secciones. */
.separador-haz::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 50%;
  height: 4rem;
  opacity: .85;
  background:
    linear-gradient(0deg, rgba(0, 93, 172, .5) 0 .0625rem, transparent .0625rem),
    linear-gradient(to top, rgba(0, 93, 172, .13) 0%, rgba(0, 93, 172, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Variante: el haz cae hacia la tabla y un nodo marca el eje */
.separador-haz--nodo::before {
  inset-block-end: auto;
  inset-block-start: 50%;
  background:
    linear-gradient(180deg, rgba(0, 93, 172, .45) 0 .0625rem, transparent .0625rem),
    linear-gradient(to bottom, rgba(0, 93, 172, .12) 0%, rgba(0, 93, 172, 0) 100%);
}
.separador-haz--nodo::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 9rem;
  height: .1875rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radio-pill);
  background: var(--azul);
  box-shadow: 0 0 1.75rem rgba(0, 93, 172, .5);
}

/* Descarga de la tabla */
.tabla-iswg__descarga {
  display: flex;
  justify-content: center;
  margin-block-start: 5rem;
}

/* Tabla ISWG */
.tabla-iswg { padding-block: 7.5rem 9rem; }
.tabla-iswg__titulo { text-align: center; margin-block-end: 1rem; }
.tabla-iswg__bajada {
  text-align: center;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--azul);
  margin-block-end: 4rem;
}

/* Escritorio muestra la de dos bloques; abajo de 1100 se cambia por la
   corrida (ver el bloque responsive). Sólo una está en el árbol por vez. */
.tabla-iswg__cols--doble {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6.25rem;
}
.tabla-iswg__cols--simple { display: none; }
/* separate en vez de collapse: con los bordes colapsados los <th> no admiten
   position: sticky, que es lo que usa la cabecera en tablet y teléfono. El
   dibujo es el mismo porque el espaciado va en cero. */
.tabla-iswg table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla-iswg thead th {
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .04em;
  padding: 1.125rem .75rem;
  text-align: center;
}
.tabla-iswg thead tr:first-child th:first-child { border-start-start-radius: var(--radio-pill); border-end-start-radius: var(--radio-pill); }
.tabla-iswg thead tr:first-child th:last-child  { border-start-end-radius: var(--radio-pill);  border-end-end-radius: var(--radio-pill); }
.tabla-iswg thead .sub th {
  background: transparent;
  color: var(--gris-900);
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0;
  padding-block: .75rem 1rem;
}
.tabla-iswg tbody td {
  font-family: var(--f-datos);
  font-size: 2.5625rem;          /* 41px */
  line-height: 1;
  color: var(--negro);
  padding: .5rem .75rem;
  text-align: center;
  transition: background var(--dur-rapida) var(--ease-suave);
}
.tabla-iswg tbody td:first-child { color: var(--azul); }
.tabla-iswg tbody tr:nth-child(odd) td { background: var(--gris-300); }
.tabla-iswg tbody tr:hover td { background: var(--azul); color: var(--blanco); }
.tabla-iswg tbody tr:hover td:first-child { color: var(--blanco); }
.tabla-iswg td + td { border-inline-start: .0625rem solid rgba(0,93,172,.25); }

/* ============================================================
   COTIZACIÓN
   ============================================================ */
.cotizacion { background: var(--gris-900); padding-block: 6rem 9rem; }
.cotizacion__form { width: min(100%, 67rem); margin-inline: auto; }

/* ============================================================
   CATÁLOGO — listado de productos en filas
   ============================================================ */
.catalogo { padding-block: 3rem 9rem; }
.catalogo__intro {
  max-width: 62rem;            /* ~70 caracteres por renglón */
  margin-inline: auto;
  margin-block-end: 3rem;
  text-align: center;
  color: var(--gris-600);
}

.fila-producto { position: relative; }

/* Separador: una línea fina y, saliendo de ella, un haz de luz azul que
   sube y se disuelve. El desvanecido lateral lo aporta la máscara. */
.fila-producto + .fila-producto::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;         /* el haz se apoya sobre la fila anterior */
  inset-inline: 0;
  height: 7rem;
  pointer-events: none;
  opacity: .85;
  background:
    linear-gradient(0deg, rgba(0, 93, 172, .5) 0 .0625rem, transparent .0625rem),
    linear-gradient(to top, rgba(0, 93, 172, .13) 0%, rgba(0, 93, 172, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  transition: opacity var(--dur-media) var(--ease-suave);
}
/* Al recorrer una fila se avivan los haces de sus dos bordes */
/* El último producto también cierra con línea, para no quedar pegado al pie */
.fila-producto:last-child::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  height: 7rem;
  pointer-events: none;
  opacity: .85;
  background:
    linear-gradient(180deg, rgba(0, 93, 172, .5) 0 .0625rem, transparent .0625rem),
    linear-gradient(to bottom, rgba(0, 93, 172, .13) 0%, rgba(0, 93, 172, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.fila-producto:hover::before,
.fila-producto:hover + .fila-producto::before { opacity: 1; }

.fila-producto__enlace {
  display: grid;
  grid-template-columns: 34rem minmax(0, 1fr);
  gap: 5.5rem;
  align-items: center;
  padding-block: 5rem;
  color: var(--gris-900);
}
/* La primera fila no necesita el aire de arriba: el encabezado ya lo da */
.fila-producto:first-child .fila-producto__enlace { padding-block-start: 2rem; }

/* --- Imagen --- */
.fila-producto__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--negro);
  /* Tres esquinas redondeadas; la superior derecha queda recta porque
     ahí se apoya la cuña del isologo. */
  border-radius: 2rem 0 2rem 2rem;
}
.fila-producto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos son verticales y el recuadro apaisado: anclando abajo se ve
     la base del producto (el pallet, el piso) en lugar de cortarla. */
  object-position: center bottom;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-suave);
}
/* El crudo ya queda bien encuadrado al centro */
.fila-producto--crudo .fila-producto__media img { object-position: center; }
.fila-producto__enlace:hover .fila-producto__media img { transform: scale(1.09); }

.fila-producto__cuna {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 4rem;
  height: 4rem;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
  transform-origin: right center;
  transition: transform var(--dur-media) var(--ease-suave);
}
.fila-producto__enlace:hover .fila-producto__cuna { transform: scale(1.18); }

/* --- Cuerpo --- */
.fila-producto__cuerpo { display: grid; gap: 1.5rem; align-content: center; }

.fila-producto__titulo {
  font-family: var(--f-titulo);
  font-size: 3.25rem;              /* 52px */
  font-weight: 400;
  line-height: 1.04;
  color: var(--gris-900);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.fila-producto__titulo strong { font-weight: 700; }
.fila-producto__enlace:hover .fila-producto__titulo { color: var(--azul); }

.fila-producto__resumen {
  max-width: 58rem;                /* mantiene el renglón en ~70 caracteres */
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--gris-600);
}

/* --- Datos destacados --- */
.fila-producto__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
  margin-block-start: .5rem;
}
.fila-producto__dato { display: grid; gap: .375rem; align-content: start; }
.fila-producto__dato dt {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-600);
}
.fila-producto__dato dd { font-size: 1.375rem; line-height: 1.3; color: var(--gris-900); }

.fila-producto__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.25rem;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.4375rem;
  letter-spacing: .09em;
  color: var(--azul);
}
/* El isologo gira igual que en las cards de la home */
.fila-producto__cta .card-producto__marca {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  transition: transform var(--dur-media) var(--ease-suave);
}
.fila-producto__enlace:hover .fila-producto__cta .card-producto__marca { transform: rotate(90deg); }

@media (max-width: 1000px) {
  .fila-producto__enlace { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .fila-producto__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hero de Datos Técnicos: sin foto, fondo negro y patrón lateral */
body[data-pagina="datos-tecnicos"] .hero--interior { background: var(--negro); }
body[data-pagina="datos-tecnicos"] .patron--der { display: none; }

/* Hero arrastrable con el mouse / el dedo */
.hero-home.es-arrastrable { cursor: grab; touch-action: pan-y; }
.hero-home.esta-arrastrando { cursor: grabbing; user-select: none; }
.hero-home.esta-arrastrando * { user-select: none; }
.hero-home:focus { outline: none; }
.hero-home:focus-visible { outline: .1875rem solid var(--blanco); outline-offset: -.375rem; }
.hero-slide__img { -webkit-user-drag: none; user-select: none; }

/* ============================================================
   RESPONSIVE — secciones
   Mismos dos cortes que components.css: tablet y teléfono.
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .seccion { padding-block: 6rem; }

  .home-nosotros__grid,
  .nosotros-texto__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .nosotros-galeria { grid-template-columns: repeat(2, 1fr); }

  .bloque-contacto__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .bloque-contacto__grid .mapa-card { width: min(100%, 46rem); }

  .cotizacion { padding-block: 4rem 6rem; }
  .calculadora { padding-block: 5rem 3rem; }
  .separador-haz { height: 6rem; }
  .tabla-iswg { padding-block: 5rem 6rem; }
  /* Una sola tabla corrida de 36 filas, con la cabecera acompañando */
  .tabla-iswg__cols--doble { display: none; }
  .tabla-iswg__cols--simple { display: block; width: min(100%, 62rem); margin-inline: auto; }
  .tabla-iswg { --cab-top: 8rem; --cab-alto: 4.05rem; }
  .tabla-iswg thead th { position: sticky; z-index: 2; }
  .tabla-iswg thead tr:first-child th { inset-block-start: var(--cab-top); }
  .tabla-iswg thead .sub th {
    inset-block-start: calc(var(--cab-top) + var(--cab-alto));
    background: var(--blanco);
  }
  .tabla-iswg { --cab-top: 7rem; }

  .fila-producto__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Teléfono ---------- */
@media (max-width: 600px) {
  .hero-home { height: 100svh; min-height: 34rem; }

  /* El título ocupaba seis renglones de 60px y empujaba todo contra la
     píldora del navbar. Bajado, entra en tres o cuatro y queda aire. */
  .hero-home__titulo { font-size: 3.125rem; line-height: 1.1; }
  .hero-home__bajada { font-size: 1.5rem; margin-block-start: 1.5rem; }
  .hero-home__texto { padding-block-start: 11rem; }
  /* El bloque de texto tiene que terminar por encima de los puntos del
     slider: si no, el botón les cae encima. */
  .hero-home__texto { padding-block-end: 9rem; }
  .hero-puntos { inset-block-end: 3rem; }


  .nosotros-galeria { grid-template-columns: minmax(0, 1fr); }

  /* La foto de fondo cubría la sección entera, que apilada mide casi 7.000px:
     para taparla se agrandaba casi 5 veces y se veía deshecha. Acá cubre sólo
     el encabezado —que es lo que necesita respaldo— y se funde con el negro
     antes de las tarjetas. */
  .home-productos__fondo { inset: 0 0 auto; height: 42rem; }
  .home-productos__fondo::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .55) 55%,
                      var(--negro) 100%);
  }

  .home-cotizacion__card { padding: 2.75rem 1.75rem; gap: 2.5rem; }

  .bloque-contacto__grid { padding-block: 5rem; }

  /* Calculadoras: un campo por renglón y botón a ancho completo */
  .calculadora__campos { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .campo-calc { width: 100%; }
  .calculadora .btn { width: 100%; }
  .calculadora__resultado { min-height: 2.7em; }   /* dos renglones: acá envuelve */

  /* La tabla ISWG pasa a un solo bloque. Las cuatro columnas no entran en
     un teléfono, así que el bloque se lleva su propio scroll horizontal en
     vez de estirar la página. */
  .tabla-iswg table { min-width: 0; }
  .tabla-iswg tbody td { font-size: 1.625rem; padding-inline: .25rem; }
  .tabla-iswg thead th { font-size: 1.0625rem; padding-inline: .25rem; }
  .tabla-iswg thead .sub th { font-size: .9375rem; }
  .tabla-iswg__descarga .btn { width: 100%; }

  /* Fichas */
  .ficha__specs { grid-template-columns: minmax(0, 1fr); }
  .ficha__acciones { flex-direction: column; align-items: stretch; }
  .ficha__acciones .btn { width: 100%; }

  /* Miniaturas de galería: se van de scroll antes que achicarse a nada */
  .galeria__miniaturas {
    grid-auto-columns: 9rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: .25rem;
  }
  .galeria__miniaturas::-webkit-scrollbar { display: none; }

  .nav-prod__pista { grid-auto-columns: 82%; }
  .fila-producto__datos { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}