/* =============================================
   LUMA — Estilos globales
   Migrado de styles.css (one-page original).
   Variables en tokens.css.
   ============================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-cuerpo);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

/* ── HEADER ─────────────────────────────────── */

.main-header {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color-texto);
  padding: 5px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 10px 10px rgba(11, 8, 8, 0.2);
  backdrop-filter: blur(10px);
}

body > main > *:first-child,
body > section:first-of-type {
  padding-top: 110px;
}

.logo-container .logo-img {
  max-width: 100px;
  height: auto;
  display: block;
}

.main-nav {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  padding: 20px 0px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.main-nav ul li a {
  color: var(--color-texto);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  transition: color 0.3s;
  font-weight: 500;
}

.main-nav ul li a:hover {
  color: var(--color-principal);
}

.cta-header {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

/* El CTA duplicado dentro del <nav> solo existe en mobile: ahí el botón
   del header se esconde y este ocupa su lugar, al final de la lista. */
.nav-cta-mobile {
  display: none;
}

/* Dropdowns */
.dropdown {
  position: relative;
}

/* El panel nace del trigger: transform-origin arriba a la izquierda, que es
   donde está el ítem del menú. `visibility` en vez de `display` para poder animar. */
/* Especificidad: `.main-nav ul` también matchea este <ul> y lo pondría en
   fila. Antes quedaba tapado por el `display: none !important`. */
.main-nav .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-blanco);
  min-width: 250px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s;
}

.dropdown-toggle .arrow-down {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.dropdown:hover .arrow-down,
.dropdown:focus-within .arrow-down {
  transform: rotate(180deg);
}

.dropdown-menu li {
  text-align: left;
  padding: 0;
}

.dropdown-menu li a {
  padding: 10px 15px;
  color: var(--color-texto);
  font-weight: normal;
  font-size: 0.9em;
  display: flex;
  align-items: center;
}

.dropdown-menu li a:hover {
  background-color: var(--color-fondo);
  color: var(--color-principal);
}

.dropdown-menu .separator {
  border-top: 1px solid #ddd;
  margin: 5px 0;
  height: 1px;
}

/* ── HERO ────────────────────────────────────── */

.hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  min-height: 95vh;
  max-width: none;
  margin: 0;
  padding-top: 50px;
  /* ⚠️ Imagen de fondo placeholder — reemplazar por la definitiva del cliente */
  background-image:
    linear-gradient(
      to right,
      rgba(10, 41, 86, 0.92) 0%,
      rgba(10, 41, 86, 0.75) 40%,
      rgba(10, 41, 86, 0.35) 70%,
      rgba(10, 41, 86, 0.05) 100%
    ),
    url('/images/luma-premium/portada-luma-premium-black.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-content {
  flex: 1 1 50%;
  min-width: 0;
  padding-right: clamp(20px, 6vw, 105px);
  padding-left: 5%;
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
  text-align: left;
  z-index: 5;
  position: relative;
}

.hero-content h1,
.hero-content h2 {
  font-size: clamp(1.8em, 3.6vw, 4em);
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.05;
  color: var(--color-blanco);
}

.hero-content p {
  font-size: clamp(1em, 1.4vw, 1.3em);
  margin-bottom: 40px;
  color: var(--color-blanco);
}

.hero-content .cta-button {
  background-color: var(--color-blanco);
  color: var(--color-principal);
}

.hero-content .cta-button-light {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-blanco);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ── BOTONES / CTAs ──────────────────────────── */

.cta-button {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding: 15px 30px;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s;
}

.cta-button-light {
  background-color: rgba(37, 73, 99, 0.1);
  color: var(--color-principal);
  padding: 15px 30px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cta-button,
.cta-header,
.cta-button-light {
  position: relative;
  overflow: hidden;
  /* El hover levanta -2px: si el transform no se declara acá, el salto es seco. */
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cta-button:hover,
  .cta-header:hover {
    transform: translateY(-2px);
  }
}

.cta-button:active,
.cta-header:active,
.cta-button-light:active {
  transform: scale(0.97);
}

/* CTA doble (componente reutilizable) */
.cta-doble {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ── SECCIÓN NOSOTROS (home stub) ────────────── */

.nosotros-section {
  background-color: var(--color-fondo);
  padding: 50px 10% 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.nosotros-card {
  display: block;
  max-width: 700px;
  background-color: var(--color-fondo);
  padding: 10px;
  border-radius: 10px;
}

.nosotros-text h3 {
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--color-texto);
}

.logo-nosotros {
  max-width: 150px;
  height: auto;
  opacity: 1;
  margin-top: 1px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ── VALORES (franja azul) ───────────────────── */

.valores-azul {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding: 80px 5%;
  text-align: left;
}

.valores-azul h2 {
  color: var(--color-blanco);
  font-size: 2.5em;
  margin-bottom: 40px;
}

.valores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.valor-item {
  min-height: 400px;
  padding: 40px 15px;
  border-radius: 5px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .valor-item:hover {
    transform: translateY(-10px);
  }
}

/* Rutas absolutas: el CSS vive en /assets/css/, las imágenes en /images/ */
.valor-1 {
  background-image: linear-gradient(rgba(22, 40, 80, 0.75), rgba(22, 40, 80, 0.75)),
    url('/images/fondo 2.webp');
}
.valor-2 {
  background-image: linear-gradient(rgba(22, 40, 80, 0.75), rgba(22, 40, 80, 0.75)),
    url('/images/fondo 1.webp');
}
.valor-3 {
  background-image: linear-gradient(rgba(22, 40, 80, 0.75), rgba(22, 40, 80, 0.75)),
    url('/images/luma-premium/fondo 3.webp');
}

.valor-item p {
  color: #ffffff;
  font-size: 0.95em;
  line-height: 1.4;
  max-width: 100%;
}

/* El escalonado de entrada vive en la sección MOTION (--stagger).
   Acá era un transition-delay: retrasaba el hover hasta medio segundo. */

/* ── PRODUCTOS / FICHAS ──────────────────────── */

.productos {
  background-color: var(--color-fondo);
  padding: 80px 15% 20px;
  text-align: center;
}

.producto-ficha {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.producto-ficha.reverse {
  flex-direction: row-reverse;
}

.ficha-imagen {
  flex: 1;
  padding: 0;
  background-color: var(--color-principal);
  border-radius: 5px;
  overflow: hidden;
}

.ficha-imagen .camilla-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .producto-ficha:hover .camilla-img {
    transform: scale(1.03);
  }
}

.ficha-info {
  flex: 1.5;
  padding: 20px 0;
}

.ficha-info h3 {
  color: var(--color-texto);
}

.features-list {
  list-style: none;
  margin-top: 20px;
}

.features-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95em;
  text-align: left;
}

.features-list i {
  color: var(--color-principal);
  font-size: 1.1em;
  flex-shrink: 0;
}

/* ── CTA FINAL ───────────────────────────────── */

.cta-final {
  background-color: var(--color-fondo);
  padding: 70px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.cta-text {
  flex: 2;
}

.cta-text h2 {
  text-align: left;
  font-size: 2em;
  margin-bottom: 5px;
  color: var(--color-texto);
}

.cta-text p {
  text-align: left;
  font-size: 1.1em;
  color: var(--color-principal);
}

.cta-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 250px;
  width: 100%;
}

.cta-buttons .cta-button,
.cta-buttons .cta-button-light {
  display: block;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 15px 30px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

/* ── CONTACTO ────────────────────────────────── */

/* Bloque de contacto: vivia en la vieja pagina /contacto/, ahora es una
   seccion de /nosotros/. Se mantiene centrado a proposito (asi estaba
   diseñado); el wrapper interno lo deja del mismo ancho que el resto. */
.contacto-section {
  background-color: var(--color-blanco);
  padding: var(--space-lg) 5%;
  text-align: center;
}

.contacto-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-tag {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--color-principal);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.contact-methods {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.method-box {
  flex-basis: 30%;
  padding: 20px;
  background-color: var(--color-fondo);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.method-box h3 {
  color: var(--color-texto);
  font-size: 1.1em;
  margin-bottom: 5px;
}

.method-box a {
  color: var(--color-principal);
  text-decoration: none;
  font-weight: bold;
}

.icon {
  font-size: 2em;
  color: var(--color-principal);
  margin-bottom: 10px;
}

/* ── FOOTER ──────────────────────────────────── */

.main-footer {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding: var(--space-lg) 5% var(--space-md);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.5fr;
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-logo {
  max-width: 100px;
  height: auto;
  display: block;
  margin-bottom: var(--space-sm);
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: 0.9em;
  opacity: 0.8;
  font-style: italic;
}

.footer-nav {
  display: flex;
  gap: var(--space-md);
}

.footer-nav-col h4 {
  font-size: 0.75em;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.footer-nav-col ul {
  list-style: none;
}

.footer-nav-col ul li {
  margin-bottom: 0.4rem;
}

.footer-nav-col ul li a {
  color: var(--color-blanco);
  text-decoration: none;
  font-size: 0.9em;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.footer-nav-col ul li a:hover {
  opacity: 1;
}

.footer-contact h4 {
  font-size: 0.75em;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.footer-contact p {
  font-size: 0.9em;
  opacity: 0.85;
  margin-bottom: 0.3rem;
}

.footer-contact a {
  color: var(--color-blanco);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-contact-group {
  margin-top: var(--space-sm);
}

.placeholder-note {
  opacity: 0.5;
  font-size: 0.8em;
  font-style: italic;
}

.footer-legal {
  text-align: center;
  padding-top: var(--space-md);
  font-size: 0.8em;
  opacity: 0.6;
}

/* ── BLOQUES REUTILIZABLES ───────────────────── */

.bloque-garantia {
  background-color: var(--color-fondo);
  border-left: 4px solid var(--color-principal);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 5px 5px 0;
  margin: var(--space-md) 0;
}

.bloque-garantia p {
  font-size: 0.95em;
}

.bloque-garantia a {
  color: var(--color-principal);
  font-weight: 600;
}

.pdf-descarga-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-principal);
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: underline;
}

.pdf-descarga-link:hover {
  opacity: 0.8;
}

.bloque-reviews {
  padding: var(--space-lg) 5%;
  background-color: var(--color-blanco);
  text-align: center;
}

.review-card {
  background: var(--color-fondo);
  padding: var(--space-md);
  border-radius: 10px;
  text-align: left;
  height: 100%;
}

.review-card .review-stars {
  color: #f5b100;
  margin-bottom: 0.5rem;
}

.review-card .review-autor {
  font-weight: 600;
  margin-top: var(--space-sm);
  font-size: 0.9em;
}

.review-card .review-cargo {
  font-size: 0.8em;
  opacity: 0.7;
}

.bloque-showroom {
  padding: var(--space-lg) 5%;
  background-color: var(--color-fondo);
}

/* Mismo ancho y centrado que .nosotros-seccion-inner: asi el h2 del bloque
   queda alineado con los demas titulos de la pagina y no ~300px mas a la
   izquierda. */
.bloque-showroom-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bloque-showroom-bajada {
  max-width: 60ch;
}

.showroom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  /* Ocupa todo el contenedor: si se dejara en 900px las cards quedarian
     centradas y desalineadas respecto del titulo. */
  margin: var(--space-md) 0 0;
}

/* Columna: el body crece y empuja el CTA al piso, asi las dos cards
   terminan con el boton sobre la misma linea aunque el texto cambie. */
.showroom-card {
  background: var(--color-blanco);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(10, 41, 86, 0.07);
  /* La imagen sangra hasta el borde: overflow recorta contra el radio. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-ui) var(--ease-out);
}

/* Sin hover-lift a proposito, igual que .beneficio-card: la card entera no
   es clickeable, el unico target es el CTA. La sombra y el zoom alcanzan
   para que responda sin prometer un click que no existe. */
@media (hover: hover) and (pointer: fine) {
  .showroom-card:hover {
    box-shadow: 0 14px 34px rgba(10, 41, 86, 0.16);
  }
}

/* La foto y el nombre del barrio comparten caja: el titulo va montado sobre
   la imagen y el degradado navy le sostiene el contraste. */
.showroom-card-media {
  position: relative;
  overflow: hidden;
}

/* Las dos fotos de origen son 16:9 (1600x900) y usan todo el ancho del
   encuadre: la card respeta esa proporcion en vez de recortarlas a 4:3.
   object-fit: cover queda como red de seguridad si alguna foto futura
   entra con otra relacion. */
.showroom-card-imagen {
  display: block;
  width: 100%;
  /* `height: auto` es necesario: los atributos width/height del <img> actúan
     como presentational hint y fijan la altura, dejando el aspect-ratio sin
     efecto. Sin esto la card renderiza con la altura cruda de la imagen. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .showroom-card:hover .showroom-card-imagen {
    transform: scale(1.05);
  }
}

/* Degradado hasta 0.9 abajo: las dos fotos tienen pared clara justo donde
   cae el titulo, con menos opacidad el blanco no sostiene AA. Arranca en 45%
   para no ensuciar la mitad superior de la foto. */
.showroom-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 41, 86, 0) 45%,
    rgba(10, 41, 86, 0.90) 100%
  );
  pointer-events: none;
}

.showroom-card-titulo {
  position: absolute;
  z-index: 1;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 1.1rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--color-blanco);
  /* Los h3 del sitio no tienen regla global: heredan el 1.17em del browser,
     que sobre una foto de 4:3 se lee como una nota al pie. */
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.showroom-card-titulo i {
  font-size: 0.8em;
  color: var(--acero);
}

.showroom-card-zona {
  font-family: var(--font-cuerpo);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 2px;
  opacity: 0.75;
}

.showroom-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

/* Aviso de turno previo: chip circular + texto, mismo lenguaje que
   .beneficio-icono pero en escala de linea. */
.showroom-card-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  font-size: 0.95em;
  line-height: 1.55;
}

.showroom-card-nota i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  /* Alinea el circulo con la primera linea de texto, no con el bloque. */
  margin-top: -0.15rem;
}

.showroom-card-nota strong {
  color: var(--color-principal);
}

/* Navy pleno: el .cta-button-light que habia antes es navy al 10% y sobre la
   card blanca practicamente no se despegaba del fondo. */
.showroom-card-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

@media (hover: hover) and (pointer: fine) {
  .showroom-card-cta:hover {
    filter: brightness(1.2);
  }
}

/* ── BLOG ────────────────────────────────────── */

.blog-hub {
  padding: var(--space-lg) 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.blog-card {
  background: var(--color-blanco);
  border-radius: 10px;
  padding: var(--space-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.blog-card h2 {
  font-size: 1.1em;
  margin-bottom: 0.5rem;
}

.blog-card h2 a {
  color: var(--color-texto);
  text-decoration: none;
}

.blog-card h2 a:hover {
  color: var(--color-principal);
}

.blog-card time {
  font-size: 0.8em;
  opacity: 0.6;
  display: block;
  margin-top: 0.5rem;
}

.blog-empty {
  opacity: 0.5;
  font-style: italic;
  margin-top: var(--space-md);
}

.blog-post {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-lg) 5%;
}

.post-header {
  margin-bottom: var(--space-md);
}

.post-body {
  line-height: 1.8;
}

.post-body h2 { margin: var(--space-md) 0 var(--space-sm); }
.post-body p  { margin-bottom: var(--space-sm); }

/* ── COLOR SELECTOR (luminaria) ──────────────── */

.color-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 15px 0;
}

.color-dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    border-color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

.color-dot.black { background-color: #000; }
.color-dot.white { background-color: #fff; border: 1px solid #ddd; }

.color-dot.active {
  border-color: var(--color-principal);
  transform: scale(1.2);
}

/* ── GRACIAS ─────────────────────────────────── */

.gracias-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: var(--color-fondo);
}

.gracias-card {
  background: white;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  max-width: 500px;
}

.success-icon {
  font-size: 4em;
  color: #25d366;
  margin-bottom: 20px;
}

/* ── WHATSAPP FLOTANTE ───────────────────────── */

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.whatsapp-float::before {
  content: "¡Estamos en línea, escribinos!";
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background-color: #ffffff;
  color: var(--color-texto);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
  pointer-events: none;
}

.whatsapp-float::after {
  content: "";
  position: absolute;
  right: 63px;
  top: 50%;
  transform: translateY(-50%) translateX(12px);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #ffffff;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
  pointer-events: none;
}

/* El tooltip se desliza con transform, no animando `right` (layout en cada frame). */
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover::before,
  .whatsapp-float:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility 0s;
  }
}

/* ── MENU TOGGLE (mobile) ────────────────────── */

.menu-toggle {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
  color: var(--color-principal);
}

/* ── BACK TO TOP ─────────────────────────────── */

/* Visibilidad por clase (.is-visible), no por `display`: así puede animar.
   El estado lo maneja main.js con un listener de scroll pasivo + rAF. */
#backToTop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 95px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--color-principal);
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.9);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    visibility 0s linear var(--dur-fast);
}

#backToTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
  #backToTop.is-visible:hover {
    background-color: #1b3e78;
    transform: translateY(-4px);
  }
}

#backToTop.is-visible:active {
  transform: scale(0.94);
}

/* ── PRODUCTO HERO (fichas internas) ─────────── */

.producto-hero {
  background-color: var(--color-blanco);
}

/* La columna de la foto se estira hasta el alto de la columna de texto
   (`stretch`), en vez de quedar clavada en un cuadrado más bajo que el
   bloque de copy. Antes, con `align-items: center` y el track en 1/1, la
   imagen medía lo mismo que su ancho y quedaba un hueco visible a los
   costados en las 8 fichas de producto.

   El texto se centra por su cuenta (`align-self` más abajo), así que si
   alguna vez la foto fuera la más alta de la fila, el copy no queda
   pegado arriba. El reparto de ancho también se invirtió: la foto pasó a
   ser la columna ancha. */
.producto-hero-inner {
  display: flex;
  gap: 3rem;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 5%;
}

.producto-hero-imagen {
  flex: 1.25;
  display: flex;
  background-color: var(--color-principal);
  border-radius: 8px;
  overflow: hidden;
}

/* El carrusel llena la columna para que el track tenga un alto definido
   contra el cual resolver su `height: 100%`. */
.producto-hero-imagen .carousel {
  flex: 1;
}

.producto-hero-imagen .camilla-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── COLOR PICKER (hero de producto) ──────────── */

.color-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

/* Nota al pie del selector de color. Nació en /camillas-electricas/premium/
   para desviar a quien busca el dorado hacia la línea Gold, que dejó de ser
   un color de la Premium. */
.producto-nota-color {
  font-size: 0.85em;
  opacity: 0.75;
  line-height: 1.5;
  margin: -0.75rem 0 1.5rem;
}

.color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--color-blanco);
  border-radius: 50%;
  background-color: var(--swatch-color, var(--gris-claro));
  box-shadow: 0 0 0 1px var(--gris-claro);
  cursor: pointer;
  transition:
    box-shadow var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .color-swatch:hover {
    transform: translateY(-2px);
  }
}

.color-swatch:active {
  transform: scale(0.94);
}

.color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--color-principal);
}

/* ── CARRUSEL DE PRODUCTO ─────────────────────── */

.carousel {
  position: relative;
  width: 100%;
}

/* `height: 100%` gana cuando el contenedor tiene alto definido — el hero
   de producto, donde la columna se estira al alto del texto. Cuando no lo
   tiene (mobile, donde el hero pasa a una sola columna), no resuelve y
   manda el `aspect-ratio`: el track vuelve a ser cuadrado. Las fotos son
   1:1 y van con `object-fit: cover`, así que el recorte al estirarse es
   de unos pocos puntos porcentuales a los costados. */
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

/* Transición direccional: la slide entrante llega desde el lado hacia el que
   se avanzó y la saliente se va al opuesto, así el movimiento tiene dirección.
   El desplazamiento lo escribe main.js en el style inline de cada slide. */
.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  pointer-events: none;
}

.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.carousel-arrow:hover {
  background: var(--color-blanco);
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: width 0.2s, border-radius 0.2s, background-color 0.2s;
}

.carousel-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--color-blanco);
}

/* ── BANNER DE PRODUCTO ──────────────────────── */

.producto-banner {
  position: relative;
  margin: 0;
}

.producto-banner-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.producto-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.producto-banner-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: var(--acero);
  box-shadow: 0 10px 26px rgba(10, 41, 86, 0.35);
  text-align: center;
  line-height: 1.15;
}

.producto-banner-badge-num {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--color-blanco);
  letter-spacing: 0.02em;
}

.producto-banner-badge-label {
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-blanco);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.producto-banner-caption {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: -2.5rem 0 0 2rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-principal);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(10, 41, 86, 0.28);
}

.producto-banner-caption p {
  margin: 0;
  color: var(--color-blanco);
  font-weight: 600;
  font-size: 1.05em;
}

.producto-galeria-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.producto-hero-placeholder {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fondo);
  border: 2px dashed var(--gris-claro);
  border-radius: 8px;
}

.producto-hero-info {
  flex: 1;
  align-self: center;
}

.producto-hero-info h1 {
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

/* Segunda línea del H1 de las fichas: la categoría con la que la gente
   busca. Vive DENTRO del H1 (Google lee el texto completo) pero pesa
   menos que el nombre del modelo. Fix H-04 de la auditoría SEO. */
.h1-categoria {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.45em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-texto);
  opacity: 0.75;
}

.modelo-tipo {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-principal);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.producto-bajada {
  font-size: 1.05em;
  margin: 1rem 0 1.5rem;
  line-height: 1.6;
}

.precio-box {
  margin-top: 1rem;
}

.precio-actual {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-texto);
}

.precio-anterior {
  font-weight: 400;
  font-size: 0.8em;
  text-decoration: line-through;
  opacity: 0.55;
  margin-left: 0.4em;
}

.precio-iva-nota {
  font-size: 0.8em;
  opacity: 0.6;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── MEDIOS DE PAGO + ENVIOS (hero de producto) ──
   Markup: _includes/components/bloque-pago-envio.njk
   Va debajo de .precio-box: mismo peso visual que .precio-iva-nota,
   no compite con el precio ni con los CTAs. */

.pago-envio {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-claro);
  display: grid;
  gap: 0.6rem;
}

.pago-envio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--color-texto);
  opacity: 0.85;
}

/* El icono alineado a la primera linea del texto, no centrado al bloque. */
.pago-envio-item i {
  color: var(--color-principal);
  flex-shrink: 0;
  width: 1em;
  margin-top: 0.25em;
  text-align: center;
}

.pago-envio-item strong {
  font-weight: 600;
  opacity: 1;
}

.producto-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.badge {
  background: var(--color-fondo);
  border: 1px solid var(--gris-claro);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.8em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge i {
  color: var(--color-principal);
}

/* ── SECCIONES DE PRODUCTO ───────────────────── */

.producto-seccion {
  padding: var(--space-lg) 5%;
}

.producto-seccion.bg-fondo {
  background-color: var(--color-fondo);
}

.producto-seccion-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.producto-seccion-inner h2 {
  margin-bottom: 1.5rem;
}

/* ── SEPARADOR DE SECCIÓN ─────────────────────── */

.seccion-separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.seccion-separador-linea {
  flex: 1;
  max-width: 220px;
  height: 1px;
  background-color: var(--gris-claro);
}

.seccion-separador-linea:first-child {
  background: linear-gradient(to right, transparent, var(--gris-claro));
}

.seccion-separador-linea:last-child {
  background: linear-gradient(to left, transparent, var(--gris-claro));
}

.seccion-separador-onda {
  flex-shrink: 0;
  font-family: var(--font-titulo);
  font-size: 1.4rem;
  color: var(--acero);
  line-height: 1;
}

.seccion-separador-onda::before {
  content: var(--onda);
}

/* ── PRODUCTOS RELACIONADOS ──────────────────── */

.relacionados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.relacionado-card {
  display: block;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-fondo);
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .relacionado-card:hover {
    transform: translateY(-4px);
  }
}

.relacionado-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-principal);
  display: block;
}

.relacionado-card span {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9em;
}

/* Segunda línea de la tarjeta: qué es el producto, no solo cómo se llama.
   Va dentro del <a> para que el texto del enlace sea descriptivo. H-05. */
.relacionado-card .relacionado-desc {
  padding: 0.25rem 0 0;
  font-weight: 400;
  font-size: 0.92em;
  line-height: 1.35;
  opacity: 0.7;
}

/* ── MIGAS DE PAN ─────────────────────────────
   Separador: la onda ~ del logo, que ya vive en tokens.css como --onda.
   No es texto: es un ::before decorativo entre ítem e ítem. H-08.

   Dos ubicaciones, un solo componente:
     fichas  adentro de .producto-hero, sobre su fondo blanco
     hubs    después del banner navy, sobre el fondo de la página
   ============================================= */

.migas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 5%;
  font-size: 0.82em;
}

/* En las fichas la ruta vive adentro de .producto-hero para tomar su fondo
   blanco. El despeje del header fijo ya lo pone la sección (regla global
   `body > main > *:first-child`), así que acá solo va el aire propio; el
   de abajo lo pone el padding del .producto-hero-inner. */
.producto-hero .migas {
  padding-top: 0.9rem;
  padding-bottom: 0;
}

/* En los hubs el 5% va afuera de la caja de 1200px, igual que en
   .hub-seccion, para que la ruta alinee con el contenido de abajo. */
.migas--hub {
  max-width: none;
}

.migas--hub .migas-lista {
  max-width: 1200px;
  margin: 0 auto;
}

.migas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
}

.migas-item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.migas-item + .migas-item::before {
  content: var(--onda);
  font-family: var(--font-titulo);
  font-size: 1.2em;
  line-height: 1;
  color: var(--acero);
  transform: translateY(-0.1em);
}

/* Subrayado que entra desde la izquierda, sin mover el texto. */
.migas a {
  color: var(--gris);
  text-decoration: none;
  background-image: linear-gradient(var(--color-principal), var(--color-principal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color var(--dur-fast) var(--ease-out),
              background-size var(--dur-fast) var(--ease-out);
}

.migas a:hover,
.migas a:focus-visible {
  color: var(--color-principal);
  background-size: 100% 1px;
}

/* La página actual no es un enlace: se marca con un trazo en degradé
   que se apaga hacia la derecha. */
.migas-actual {
  color: var(--color-principal);
  font-weight: 600;
  padding-bottom: 3px;
  background-image: linear-gradient(to right, var(--acero), rgba(113, 149, 169, 0));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

/* ── HUB HERO ────────────────────────────────── */

.hub-hero {
  padding-top: 80px;
  background-color: var(--color-principal);
  color: var(--color-blanco);
}

.hub-hero--camillas {
  background-image:
    linear-gradient(rgba(10, 41, 86, 0.75), rgba(10, 41, 86, 0.75)),
    url('/images/banner-camillas-electricas.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Variante genérica: la imagen y la opacidad del overlay se pasan por
   custom properties desde el template (mismo criterio que .cta-producto-cierre--imagen). */
.hub-hero--imagen {
  background-image:
    linear-gradient(135deg,
      rgba(10, 41, 86, var(--hero-overlay-op, 0.65)),
      rgba(10, 41, 86, calc(var(--hero-overlay-op, 0.65) - 0.15))),
    var(--hero-bg-imagen);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Más aire arriba y abajo para que se lea la foto de fondo. */
.hub-hero--imagen .hub-hero-inner {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.hub-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 8rem 5%;
  text-align: center;
}

.hub-hero-inner h1 {
  color: var(--color-blanco);
  font-size: clamp(1.8em, 3.5vw, 3em);
  margin-bottom: 1rem;
}

.hub-bajada {
  font-size: 1.05em;
  opacity: 0.9;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hub-hero .cta-doble {
  justify-content: center;
}

/* Sobre el overlay navy del banner, el navy del botón base se pierde.
   Mismo tratamiento que .cta-producto-cierre .cta-button. */
.hub-hero .cta-button {
  background-color: var(--color-blanco);
  color: var(--color-principal);
}

.hub-hero .cta-button-light {
  background: rgba(255,255,255,0.15);
  color: var(--color-blanco);
  border: 1px solid rgba(255,255,255,0.4);
}

/* ── HUB SECCIONES ───────────────────────────── */

.hub-seccion {
  padding: var(--space-lg) 5%;
}

.hub-seccion.bg-fondo {
  background-color: var(--color-fondo);
}

.hub-seccion-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.hub-seccion-inner h2 {
  margin-bottom: 1.5rem;
}

/* ── GRILLA DE PRODUCTOS EN HUB ──────────────── */

.hub-productos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Variante de 4 columnas: la usa /camillas-electricas/ desde que se sumó
   la línea Gold. Va acá y no en el breakpoint porque la regla de 2
   columnas del media query de tablet aparece más abajo en el archivo y,
   a igual especificidad, gana ella. El hub de carritos sigue en 3. */
.hub-productos-grid--cuatro {
  grid-template-columns: repeat(4, 1fr);
}

.hub-producto-card {
  background: var(--color-blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hub-producto-card:hover {
    transform: translateY(-6px);
  }
}

.hub-producto-card a {
  text-decoration: none;
  color: var(--color-texto);
  display: block;
}

.hub-producto-imagen {
  background: var(--color-principal);
  overflow: hidden;
}

.hub-producto-imagen img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hub-producto-card:hover .hub-producto-imagen img {
    transform: scale(1.04);
  }
}

.hub-producto-placeholder {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fondo);
  border: 2px dashed var(--gris-claro);
}

.hub-producto-info {
  padding: 1.25rem;
}

.hub-producto-info h3 {
  font-size: 1.1em;
  margin-bottom: 0.5rem;
  color: var(--color-texto);
}

.hub-producto-info p {
  font-size: 0.9em;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.hub-ver-detalle {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-principal);
}

/* ── COMPARADOR ──────────────────────────────── */

.comparador-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparador-tabla {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9em;
}

.comparador-tabla th,
.comparador-tabla td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gris-claro);
}

.comparador-tabla thead th {
  background: var(--color-principal);
  color: var(--color-blanco);
  font-weight: 600;
}

.comparador-tabla tbody tr:nth-child(even) {
  background: var(--color-fondo);
}

.comparador-tabla td:first-child {
  font-weight: 600;
  color: var(--color-texto);
}

.comparador-tabla .fa-check {
  color: var(--color-principal);
}

/* ── FICHA TÉCNICA DE PRODUCTO ───────────────── */

.tabla-specs-grupo {
  margin-bottom: 2rem;
}

.tabla-specs-grupo h3 {
  color: var(--color-texto);
  font-size: 1.05em;
  margin-bottom: 0.75rem;
}

.tabla-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.tabla-specs th,
.tabla-specs td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gris-claro);
}

.tabla-specs td:first-child {
  font-weight: 600;
  color: var(--color-texto);
  width: 55%;
}

.tabla-specs tbody tr:nth-child(even) {
  background: var(--color-fondo);
}

/* ── CUIDADO Y MANTENIMIENTO ─────────────────── */

.cuidado-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cuidado-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
}

.cuidado-card {
  background: var(--color-blanco);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
}

.cuidado-icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-principal);
  font-size: 1.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.cuidado-card h3 {
  font-size: 1em;
  margin-bottom: 0.4rem;
  color: var(--color-texto);
}

.cuidado-card p {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.55;
  opacity: 0.85;
}

/* ── CARDS ÍCONO + TÍTULO + DESCRIPCIÓN (reutilizable en fichas de producto) ── */

.material-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ── BENEFICIOS (cards con ícono) ─────────────
   Sigue el lenguaje de .material-card: fondo blanco, badge circular en
   --color-fondo con el ícono en navy. Sin hover-lift a propósito: la card
   no es clickeable y un lift prometería un click que no existe. */

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  text-align: left;
}

.beneficio-card {
  background: var(--color-blanco);
  border: 1px solid var(--gris-claro);
  border-radius: 10px;
  padding: var(--space-md) 1.75rem;
}

.beneficio-icono {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-principal);
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.beneficio-card h3 {
  color: var(--color-principal);
  font-size: 1em;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}

.beneficio-card p {
  font-size: 0.95em;
  line-height: 1.65;
  margin: 0;
}

.material-card {
  background: var(--color-blanco);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
}

.material-card-icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-principal);
  font-size: 1.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.material-card h3,
.material-card h4 {
  font-size: 1em;
  margin-bottom: 0.4rem;
  color: var(--color-texto);
}

.material-card p {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.55;
  opacity: 0.85;
}

/* ── NOSOTROS HERO ───────────────────────────── */

.nosotros-hero {
  padding: 0px;
  /* El color queda como fallback: si la imagen no carga, el texto blanco
     sigue teniendo fondo navy y no se pierde sobre blanco. */
  background-color: var(--color-principal);
  color: var(--color-blanco);
  /* Overlay navy leve sobre la foto. Los valores no son arbitrarios: en el
     peor caso posible (un píxel blanco puro debajo, en el punto más claro
     del degradado) el blanco sobre el compuesto da 5.2:1, así que pasa
     AA aunque la foto sea muy luminosa. */
  background-image:
    linear-gradient(
      to bottom,
      rgba(10, 41, 86, 0.78) 0%,
      rgba(10, 41, 86, 0.68) 100%
    ),
    url('/images/fondo-4.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nosotros-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 10rem 5%;
  text-align: center;
}

.nosotros-hero-inner h1 {
  color: var(--color-blanco);
  font-size: clamp(1.8em, 3.5vw, 3em);
  margin-bottom: 1rem;
}

.nosotros-bajada {
  font-size: 1.05em;
  opacity: 0.9;
  line-height: 1.6;
}

/* ── NOSOTROS SECCIONES ──────────────────────── */

.nosotros-seccion {
  padding: var(--space-lg) 5%;
}

.nosotros-seccion.bg-fondo {
  background-color: var(--color-fondo);
}

.nosotros-seccion-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.nosotros-seccion-inner h2 {
  margin-bottom: 1.5rem;
}

/* ── HOME LÍNEAS DE PRODUCTO ─────────────────── */

.home-lineas {
  padding: var(--space-lg) 5%;
  background: var(--color-fondo);
}

.home-lineas-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-lineas-inner h2 {
  margin-bottom: var(--space-md);
  text-align: center;
}

.lineas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.linea-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .linea-card:hover {
    transform: translateY(-6px);
  }
}

.linea-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--color-principal);
  display: block;
}

.linea-card-body {
  padding: 1.25rem;
}

.linea-card-body h3 {
  font-size: 1.1em;
  margin-bottom: 0.5rem;
}

.linea-card-body p {
  font-size: 0.9em;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.linea-link {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-principal);
}

.linea-card-titulo {
  color: inherit;
  text-decoration: none;
}

.linea-card-titulo::after {
  content: "";
  position: absolute;
  inset: 0;
}

.linea-card-body p a {
  position: relative;
  z-index: 1;
  color: var(--color-principal);
  font-weight: 600;
  text-decoration: none;
}

.linea-card-body p a:hover,
.linea-card-body p a:focus-visible {
  text-decoration: underline;
}

/* ── HOME SHOWROOM ───────────────────────────── */

.home-showroom {
  /* Foto del stand + overlay navy. El fondo navy plano queda como fallback
     si la imagen no carga, asi el texto blanco nunca se queda sin contraste.
     La foto tiene zonas muy claras (pared beige), por eso el overlay va en
     0.72 -> 0.62: es el minimo que sostiene AA con texto blanco. */
  background-color: var(--color-principal);
  background-image:
    linear-gradient(
      to bottom,
      rgba(10, 41, 86, 0.72) 0%,
      rgba(10, 41, 86, 0.62) 100%
    ),
    url('/images/fondo-5.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-blanco);
  padding: var(--space-xl) 5%;
}

.home-showroom-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.home-showroom-inner h2 {
  color: var(--color-blanco);
  margin-bottom: 1rem;
}

.home-showroom-inner p {
  opacity: 0.9;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.home-showroom .cta-button {
  background-color: var(--color-blanco);
  color: var(--color-principal);
}

.home-showroom .cta-button-light {
  background: rgba(255,255,255,0.15);
  color: var(--color-blanco);
  border: 1px solid rgba(255,255,255,0.4);
}

/* ── FAQ ─────────────────────────────────────── */

.faq-seccion {
  padding: var(--space-lg) 5%;
}

.faq-seccion.bg-fondo {
  background-color: var(--color-fondo);
}

.faq-inner {
  max-width: 860px;
  margin: 0 auto;
}

.faq-inner h2 {
  margin-bottom: var(--space-md);
}

.faq-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: var(--color-blanco);
  border: 1px solid var(--gris-claro);
  border-radius: 8px;
  overflow: hidden;
}

.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.95em;
  color: var(--color-texto);
  transition: background 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.4em;
  font-weight: 300;
  color: var(--color-principal);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  background: var(--color-fondo);
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--gris-claro);
  color: var(--color-principal);
}

.faq-respuesta {
  padding: 1rem 1.25rem;
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--color-texto);
}

.faq-respuesta a {
  color: var(--color-principal);
  font-weight: 600;
}

.post-faq {
  margin-top: var(--space-lg);
  border-radius: 10px;
}

/* ── TESTIMONIO CONTEXTUAL (producto) ────────── */

.testimonio-producto {
  padding: var(--space-lg) 5%;
  background: var(--color-principal);
}

.testimonio-producto-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.testimonio-producto h2 {
  color: var(--color-blanco);
  text-align: center;
  margin-bottom: var(--space-md);
}

/* ── CARRUSEL DE TESTIMONIOS (loop infinito, reutilizable) ── */

.testimonio-carousel {
  position: relative;
  max-width: 1100px;
  margin: var(--space-md) auto 0;
  padding: 0 48px;
}

.testimonio-carousel-viewport {
  overflow: hidden;
}

.testimonio-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.testimonio-slide {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 0 10px;
}

.testimonio-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--color-blanco);
  color: var(--color-principal);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.testimonio-carousel-nav:hover {
  background: var(--color-fondo);
}

.testimonio-carousel-prev {
  left: 0;
}

.testimonio-carousel-next {
  right: 0;
}

.testimonio-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: var(--space-md);
  color: var(--color-blanco);
  height: 100%;
}

.testimonio-card p {
  font-size: 1.05em;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.testimonio-card footer {
  font-size: 0.85em;
  opacity: 0.8;
}

.testimonio-stars {
  font-size: 1.2em;
  color: #f5b100;
  margin-bottom: 0.75rem;
}

/* ── CTA CIERRE DE PRODUCTO ──────────────────── */

.cta-producto-cierre {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #123566 60%, var(--acero) 160%);
  padding: var(--cta-pad-y, 7rem) 5%;
}

.cta-producto-cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.10), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.08), transparent 45%);
  pointer-events: none;
}

.cta-producto-cierre--imagen {
  background-image:
    linear-gradient(135deg,
      rgba(10, 41, 86, var(--cta-overlay-op, 0.88)),
      rgba(10, 41, 86, calc(var(--cta-overlay-op, 0.88) - 0.20))),
    var(--cta-bg-imagen);
  background-size: cover;
  background-position: center;
}

.cta-producto-cierre--imagen::before {
  display: none;
}

.cta-producto-cierre-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.cta-producto-cierre-inner h2 {
  color: var(--color-blanco);
  margin-bottom: 0;
}

.cta-producto-cierre-inner h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 1rem auto 0;
  background-color: var(--acero);
  border-radius: 2px;
}

.cta-producto-cierre-inner p {
  color: var(--color-blanco);
  opacity: 0.85;
  margin-top: 1rem;
  margin-bottom: var(--space-md);
}

.cta-producto-cierre .cta-doble {
  justify-content: center;
}

.cta-producto-cierre .cta-button {
  background-color: var(--color-blanco);
  color: var(--color-principal);
}

.cta-producto-cierre .cta-button-light {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-blanco);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ── PRUEBA SOCIAL (Nosotros) ─────────────────── */

.prueba-social-card {
  background: var(--color-blanco);
  padding: var(--space-md);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  height: 100%;
}

.prueba-social-card blockquote {
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0.5rem 0;
}

.testimonio-autor {
  font-weight: 600;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.testimonio-ubicacion {
  font-size: 0.8em;
  opacity: 0.7;
}

/* ── BLOG POST SCAFFOLD ──────────────────────── */

.post-meta {
  margin-bottom: 0.5rem;
}

.post-categoria {
  display: inline-block;
  background: var(--color-principal);
  color: var(--color-blanco);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}

.post-fecha {
  display: block;
  font-size: 0.85em;
  opacity: 0.6;
  margin: 0.5rem 0 1rem;
}

.post-descripcion {
  font-size: 1.1em;
  opacity: 0.8;
  line-height: 1.6;
  border-left: 3px solid var(--color-principal);
  padding-left: 1rem;
  margin: 1rem 0 var(--space-md);
}

.post-autor {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gris-claro);
  font-size: 0.85em;
  opacity: 0.6;
}

.post-cta {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-fondo);
  border-radius: 10px;
  text-align: center;
}

.post-cta h2 {
  margin-bottom: 0.5rem;
  font-size: 1.4em;
}

.post-cta p {
  opacity: 0.75;
  margin-bottom: var(--space-md);
}

.post-cta .cta-doble {
  justify-content: center;
}

/* ── ANIMACIONES DE ENTRADA ──────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.reveal.active {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.reveal-left.active {
  opacity: 1;
  transform: none;
}

/* ── RESPONSIVE ──────────────────────────────── */

@media (max-width: 1024px) {
  .hero-content {
    padding-right: 30px;
  }
  .valores-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hub-productos-grid,
  .lineas-grid,
  .relacionados-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .producto-ficha,
  .producto-ficha.reverse {
    flex-direction: column;
    padding: 20px 5%;
    gap: 20px;
    text-align: center;
  }
  .ficha-info {
    text-align: left;
    width: 100%;
  }
  .ficha-imagen {
    width: 100%;
  }
  .testimonio-slide {
    flex-basis: 50%;
  }
  .testimonio-carousel {
    padding: 0 40px;
  }
  .showroom-grid {
    grid-template-columns: 1fr;
  }
  .showroom-card-titulo {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 0.9rem;
    font-size: 1.35rem;
  }
  .showroom-card-body {
    padding: 1.5rem;
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .main-header {
    padding: 10px 15px;
  }
  .logo-img {
    max-width: 60px !important;
  }
  .cta-header {
    padding: 5px 12px;
    font-size: 0.8em;
  }
  .hero {
    padding-top: 70px !important;
    min-height: 70vh !important;
    background-image:
      linear-gradient(
        to bottom,
        rgba(10, 41, 86, 0.85) 0%,
        rgba(10, 41, 86, 0.75) 100%
      ),
      url('/images/luma-premium/portada-luma-premium-black.webp') !important;
  }
  .hero-content {
    flex: 1 1 100% !important;
    padding: 20px 5% 40px !important;
    text-align: center !important;
  }
  .hero-content h1,
  .hero-content h2 {
    font-size: 2em !important;
    line-height: 1.2;
  }
  .valores-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .producto-ficha,
  .producto-ficha.reverse {
    flex-direction: column !important;
    padding: 20px 15px !important;
    gap: 20px !important;
  }
  .ficha-imagen {
    width: 100% !important;
  }
  .ficha-info {
    width: 100% !important;
    text-align: left !important;
  }
  .camilla-img {
    margin: 0 auto;
  }
  .producto-banner-badge {
    top: 1rem;
    right: 1rem;
    width: 68px;
    height: 68px;
  }
  .producto-banner-badge-num {
    font-size: 0.85rem;
  }
  .producto-banner-badge-label {
    font-size: 0.5rem;
  }
  .producto-banner-caption {
    max-width: none;
    margin: -2rem 1rem 0;
    padding: 1rem 1.25rem;
  }
  .cta-final {
    flex-direction: column !important;
    text-align: center !important;
    padding: 60px 5% !important;
  }
  .cta-text h2,
  .cta-text p {
    text-align: center !important;
  }
  .cta-buttons {
    max-width: 100% !important;
  }
  .contact-methods {
    flex-direction: column !important;
  }
  .method-box {
    flex-basis: 100% !important;
  }
  .producto-hero-inner {
    flex-direction: column !important;
    padding: 2rem 5% !important;
  }
  .producto-hero-imagen,
  .producto-hero-info {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .h1-categoria {
    font-size: 0.52em;
  }
  .hub-productos-grid,
  .lineas-grid,
  .relacionados-grid,
  .cuidado-grid,
  .material-cards-grid,
  .beneficios-grid,
  .producto-galeria-doble {
    grid-template-columns: 1fr !important;
  }
  .hub-hero-inner h1 {
    font-size: 1.8em !important;
  }
  .nosotros-hero-inner h1 {
    font-size: 1.8em !important;
  }
  .testimonio-slide {
    flex-basis: 100% !important;
  }
  .testimonio-carousel {
    padding: 0 44px !important;
  }
  .testimonio-carousel-nav {
    width: 32px;
    height: 32px;
  }
  .cta-producto-cierre .cta-doble {
    flex-direction: column;
    align-items: center;
  }
  /* Se despliega desde el header en vez de aparecer de golpe.
     `visibility` diferida al cierre para que no siga siendo clickeable. */
  .main-nav {
    display: flex !important;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column !important;
    padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transform-origin: top center;
    transition:
      opacity var(--dur-ui) var(--ease-out),
      transform var(--dur-ui) var(--ease-out),
      visibility 0s linear var(--dur-ui);
  }
  .main-nav.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--dur-ui) var(--ease-out),
      transform var(--dur-ui) var(--ease-out),
      visibility 0s;
  }
  .main-nav ul {
    flex-direction: column !important;
    align-items: center;
  }
  .main-nav ul li {
    margin: 15px 0;
  }
  /* Dentro del menú mobile el panel es estático: si quedara oculto con
     `visibility` seguiría ocupando lugar. Acá se mantiene el display toggle. */
  .main-nav .dropdown-menu {
    position: static;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    text-align: center;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .main-nav .dropdown:hover .dropdown-menu,
  .main-nav .dropdown:focus-within .dropdown-menu {
    display: block;
    transform: none;
  }
  .dropdown-menu li a {
    justify-content: center;
  }
  .menu-toggle {
    display: block !important;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .footer-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .whatsapp-float::before,
  .whatsapp-float::after {
    display: none !important;
  }
  #backToTop {
    bottom: 90px;
    right: 32px;
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 400px) {
  .hero-content h1,
  .hero-content h2 {
    font-size: 1.6em;
  }
  .cta-header {
    padding: 5px 10px;
    font-size: 0.75em;
  }
  .nosotros-card {
    padding: 5px;
  }
  .valor-item {
    min-height: 320px;
    padding: 30px 15px;
  }
}

/* ─── 404 ─── */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 6rem 0;
  text-align: center;
}
.error-404__content {
  max-width: 560px;
  margin: 0 auto;
}
.error-404__code {
  font-size: 7rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.error-404__titulo {
  font-size: 2rem;
  color: var(--color-navy);
  margin-bottom: 1rem;
}
.error-404__texto {
  color: var(--color-gris);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.error-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* =============================================
   MOTION
   Todo el movimiento nuevo vive acá, en un solo lugar.
   Curvas y duraciones: tokens.css (--ease-out, --dur-*).
   Reglas: solo transform/opacity, UI por debajo de 300ms,
   hover gateado por puntero fino, reduced-motion al final.
   ============================================= */

/* ── Feedback de click ────────────────────────
   Confirma que la interfaz escuchó. scale() arrastra
   íconos y label, que es lo que lo hace leer como un botón físico. */

.carousel-arrow,
.carousel-dot,
.testimonio-carousel-nav,
.color-dot,
.menu-toggle,
.faq-item summary,
.pdf-descarga-link {
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

/* La shorthand `transition` del bloque de arriba reemplaza la lista entera,
   no se suma: sin volver a declararla acá, el dot activo pasaba de círculo
   de 8px a píldora de 22px de golpe, en cada click y cada 5s de autoplay.
   `width` es una propiedad de layout y el playbook la desaconseja, pero acá
   se acepta a conciencia: es un elemento de 8px dentro de un overlay
   `position: absolute`, y la transición corre una vez por cambio de slide.
   Es la misma excepción acotada que ya se documenta para el logo del header
   y para la altura del acordeón. */
.carousel-dot {
  transition:
    width var(--dur-fast) var(--ease-out),
    border-radius var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

.carousel-arrow:active,
.testimonio-carousel-nav:active,
.menu-toggle:active,
.pdf-descarga-link:active {
  transform: scale(0.94);
}

/* Las flechas del carrusel ya están centradas con translateY(-50%). */
.carousel-arrow:active,
.testimonio-carousel-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.carousel-dot:active,
.color-dot:active {
  transform: scale(0.85);
}

/* El dot activo ya crece: no se encoge por debajo de su estado. */
.color-dot.active:active {
  transform: scale(1.1);
}

/* ── FAQ / acordeón ───────────────────────────
   La altura la anima main.js con WAAPI (única excepción
   sancionada a animar height). Acá solo el marcador. */

.faq-item summary::after {
  transition: transform var(--dur-ui) var(--ease-out);
}

/* Durante el cierre el <details> sigue abierto hasta que termina la
   animación: sin esto el "+" volvería 200ms tarde, justo donde se clickeó. */
.faq-item[data-closing] summary::after {
  transform: none;
}

/* ── Entrada por scroll ───────────────────────
   Superficie de marketing, una sola vez por carga.
   Los atributos los pone main.js: sin JS, todo se ve normal.
   Los bloques ya visibles al cargar no se registran. */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado de grillas: decorativo, nunca bloquea el click
   (los hijos ya responden aunque la opacidad esté en curso). */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
[data-reveal-group].is-visible > *:nth-child(n + 6) { transition-delay: calc(var(--stagger) * 5); }

/* ── Reduced motion ───────────────────────────
   Menos movimiento y más suave, no cero: se conservan los
   fundidos y los cambios de color, se elimina el desplazamiento. */

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

  [data-reveal],
  [data-reveal-group] > *,
  .reveal,
  .reveal-left {
    transform: none;
    transition-delay: 0ms !important;
  }

  .valor-item:hover,
  .linea-card:hover,
  .hub-producto-card:hover,
  .hub-producto-card:hover .hub-producto-imagen img,
  .showroom-card:hover .showroom-card-imagen,
  .relacionado-card:hover,
  .producto-ficha:hover .camilla-img,
  .color-swatch:hover,
  .cta-button:hover,
  .cta-header:hover,
  #backToTop.is-visible:hover {
    transform: none;
  }

  .cta-button:active,
  .cta-header:active,
  .cta-button-light:active,
  .carousel-arrow:active,
  .testimonio-carousel-nav:active,
  .menu-toggle:active,
    .pdf-descarga-link:active,
  .carousel-dot:active,
  .color-dot:active {
    transform: none;
  }

  .carousel-arrow:active,
  .testimonio-carousel-nav:active {
    transform: translateY(-50%);
  }

  .main-nav,
  .dropdown-menu,
  #backToTop {
    transform: none !important;
  }

  .testimonio-carousel-track {
    transition: none !important;
  }

  /* Chevron del dropdown: la rotación es desplazamiento puro. */
  .dropdown:hover .arrow-down,
  .dropdown:focus-within .arrow-down {
    transform: none;
  }

  /* Tooltip del WhatsApp: se conserva el fundido, se elimina el deslizamiento.
     Se mantiene el translateY(-50%) porque no es animación: es el centrado. */
  .whatsapp-float::before,
  .whatsapp-float::after,
  .whatsapp-float:hover::before,
  .whatsapp-float:hover::after {
    transform: translateY(-50%);
  }

  /* El "+" girado a "×" indica que la FAQ está abierta: se conserva el estado
     final y se elimina solo la animación hacia él. */
  .faq-item summary::after {
    transition: none;
  }

  /* Igual con el dot de color: el scale(1.2) marca cuál está elegido. */
  .color-dot {
    transition: none;
  }

  /* (0,3,0) para ganarle a `.color-dot.active:active`, que por especificidad
     se saltea el `.color-dot:active` de más arriba en este mismo bloque. */
  .color-dot.active:active {
    transform: scale(1.2);
  }
}

/* =============================================
   MOTION AVANZADO
   Transiciones de página, header con estado de scroll,
   progreso de lectura y entrada del hero.
   Todo es mejora progresiva: donde el navegador no
   soporta algo, la página funciona igual que antes.
   ============================================= */

/* ── Transiciones entre páginas ───────────────
   El navegador morfea entre documentos en vez de pegar
   un flash blanco. Firefox lo ignora y navega normal. */

@view-transition {
  navigation: auto;
}

/* Elementos que persisten: en vez de desvanecerse con el resto
   de la página, se quedan quietos de un documento al otro. */
.main-header {
  view-transition-name: luma-header;
}

.whatsapp-float {
  view-transition-name: luma-whatsapp;
}

#backToTop {
  view-transition-name: luma-back-to-top;
}

/* La imagen del producto es la misma "cosa" en la grilla del hub y en la
   ficha: al compartir nombre, el navegador la mueve de una a la otra en vez
   de fundir dos imágenes sueltas. En el hub el nombre lo asigna main.js
   sobre la card clickeada (solo uno por documento puede llevarlo). */
.carousel-slide.is-active {
  view-transition-name: luma-producto-imagen;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-out);
}

::view-transition-group(luma-producto-imagen) {
  animation-duration: 380ms;
  animation-timing-function: var(--ease-in-out); /* se mueve en pantalla, no entra ni sale */
}

/* ── Header con estado de scroll ──────────────
   Recupera alto vertical en las fichas largas. El estado lo pone
   main.js observando un centinela de 1px, sin listener de scroll. */

.header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.main-header {
  transition:
    padding var(--dur-ui) var(--ease-in-out),
    background-color var(--dur-ui) ease,
    box-shadow var(--dur-ui) var(--ease-in-out);
}

/* El logo manda la altura del header. Se anima `max-width` y no `transform`
   porque scale() no achica el layout: con transform el header seguía
   reservando los 100px y no se recuperaba nada de alto. Es una sola
   transición puntual al cruzar el umbral, no una por frame de scroll. */
.logo-container .logo-img {
  transition: max-width var(--dur-ui) var(--ease-in-out);
}

:root[data-scrolled] .main-header {
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(11, 8, 8, 0.12);
}

:root[data-scrolled] .logo-container .logo-img {
  max-width: 68px;
}

/* ── Dropdowns instantáneos entre vecinos ─────
   Con un menú ya abierto, pasar al de al lado abre sin animación:
   animar de nuevo haría sentir lento al header entero. */

:root[data-menu-instantaneo] .main-nav .dropdown-menu,
:root[data-menu-instantaneo] .dropdown-toggle .arrow-down {
  transition-duration: 0ms;
  transition-delay: 0ms;
}

/* ── Progreso de lectura (post del blog) ──────
   Animación ligada al scroll: corre fuera del hilo principal, cero JS.
   `linear` es lo correcto — el progreso no debe tener easing. */

.post-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  pointer-events: none;
}

.post-progreso span {
  display: block;
  height: 100%;
  background-color: var(--color-principal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .post-progreso span {
    animation: luma-progreso-lectura linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes luma-progreso-lectura {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Entrada del hero (solo la home) ──────────
   Orquestación de tres tiempos. Va en CSS y no en JS para que arranque
   en el primer pintado, sin parpadeo.
   ⚠️ Costo asumido: el H1 nace en opacity 0, así que corre el LCP ~420ms. */

.hero .hero-content h1,
.hero .hero-content > p,
.hero .hero-content .cta-doble {
  animation: luma-hero-entrada 420ms var(--ease-out) both;
}

.hero .hero-content > p     { animation-delay: 70ms; }
.hero .hero-content .cta-doble { animation-delay: 140ms; }

@keyframes luma-hero-entrada {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ── Reduced motion ───────────────────────────
   Se conservan los fundidos y el progreso de lectura (informa, no decora);
   se elimina todo el desplazamiento. */

@media (prefers-reduced-motion: reduce) {
  /* El crossfade entre páginas es solo opacidad y se mantiene;
     el morfeo de posición de la imagen del producto no. */
  ::view-transition-group(luma-producto-imagen) {
    animation: none;
  }

  /* El header se compacta igual (es funcional), pero sin animar el cambio. */
  .logo-container .logo-img,
  .main-header {
    transition: none;
  }

  .carousel-slide {
    transform: none !important;
  }

  .hero .hero-content h1,
  .hero .hero-content > p,
  .hero .hero-content .cta-doble {
    animation: none;
  }

  /* Los grupos nombrados morfean posición y tamaño entre documentos.
     El crossfade de opacidad del root se conserva; el desplazamiento no. */
  ::view-transition-group(luma-header),
  ::view-transition-group(luma-whatsapp),
  ::view-transition-group(luma-back-to-top) {
    animation: none;
  }
}

/* ── BLOQUE REELS DE INSTAGRAM ────────────────
   Carrusel de embeds oficiales de Instagram.
   El iframe de IG casi no se puede estilar desde afuera: todo lo que
   sigue trabaja sobre el CONTENEDOR, no sobre el contenido del embed.
   ============================================= */

.reels-seccion {
  padding: var(--space-lg) 5%;
  background: var(--color-fondo);
}

.reels-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.reels-titulo {
  text-align: center;
  margin-bottom: 0.5rem;
}

.reels-bajada {
  text-align: center;
  color: var(--gris);
  margin-bottom: var(--space-md);
}

/* ── Cabecera de perfil ── */

.reels-perfil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.reels-perfil-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  padding: 3px;
  /* Anillo degradé de Instagram como marco del avatar. */
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  box-sizing: border-box;
}

.reels-perfil-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-blanco);
  border: 2px solid var(--color-fondo);
  box-sizing: border-box;
  display: block;
}

.reels-perfil-datos {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.reels-perfil-nombre {
  font-weight: 600;
  color: var(--color-principal);
}

.reels-perfil-handle {
  font-size: 0.9em;
  color: var(--gris);
  text-decoration: none;
}

a.reels-perfil-handle:hover {
  color: var(--color-principal);
  text-decoration: underline;
}

.reels-seguir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--color-principal);
  color: var(--color-blanco);
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}

a.reels-seguir:hover {
  background: var(--acero);
  transform: translateY(-1px);
}

/* Sin handle confirmado el botón existe pero no navega a ningún lado. */
.reels-seguir.is-pendiente {
  background: var(--gris-claro);
  color: var(--gris);
  cursor: not-allowed;
}

.reels-nota {
  text-align: center;
  margin-top: var(--space-sm);
}

/* ── Carrusel ── */

.reels-carousel {
  position: relative;
  padding: 0 48px;
}

.reels-viewport {
  overflow: hidden;
}

.reels-track {
  display: flex;
  align-items: flex-start;
}

.reels-slide {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 0 10px;
}

/* Deliberadamente NO es flex: embed.js deja el <blockquote> original como
   hermano del <iframe>, y como items flex los dos se reparten el ancho
   (el reel termina ocupando ~60% de su tarjeta). En bloque, el width:100%
   del iframe manda y ocupa toda la slide. */
.reel-card {
  width: 100%;
}

/* Recorte del embed de Instagram.

   El iframe viene de instagram.com: es otro origen, asi que su interior no se
   puede tocar ni con CSS ni con JS. Para mostrar unicamente el video y
   esconder el cromo de IG (header con avatar y "Ver perfil", link "Ver mas en
   Instagram", corazon/comentario/compartir, "N Me gusta" y la caja de
   comentarios) se recorta desde afuera: el marco tiene overflow hidden y el
   iframe se corre 58px hacia arriba.

   Medido sobre el embed real a 348px de ancho:
     0     -> 58px   header de Instagram
     58    -> 484px  area de video  (alto = ancho x 1.2241)
     484px en adelante: el resto del cromo

   Los dos numeros (--reel-header y la proporcion del marco) son empiricos: si
   Instagram cambia el alto de su header van a asomar unos pixeles de cromo.
   Es el precio de usar el embed oficial. */

.reel-card {
  --reel-header: 58px;
  width: 100%;
}

/* Modo seguro (por defecto): solo se recorta arriba y abajo. El video se ve
   completo sea cual sea su formato; si es 9:16 Instagram le pone bandas negras
   a los costados y se ven. Nunca corta contenido. */
.reel-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

/* Instagram mete el video 9:16 dentro de un area mas ancha y rellena los
   costados con negro (pillarbox). Esas bandas ocupan 14.37% del ancho del
   iframe cada una, o sea que el video real es el 71.26% del centro.

   Para que el video llene la tarjeta se agranda el iframe hasta que ese 71.26%
   coincida con el ancho del marco (100 / 71.26 = 140.32%) y se lo corre a la
   izquierda la mitad del excedente. Las bandas quedan fuera del marco.

   Va en porcentajes a proposito: son proporciones del iframe, asi que el
   recorte se sostiene con la tarjeta a cualquier ancho. El unico valor en px
   es el header, que Instagram dibuja con alto fijo. */
.reel-frame {
  position: absolute;
  top: calc(var(--reel-header) * -1);
  left: 0;
  width: 100%;
  /* Header + video + un margen extra que queda recortado, para que Instagram
     tenga lugar de dibujar el area de video completa. */
  height: calc(100% + var(--reel-header) + 40px);
  border: 0;
  display: block;
}

/* Modo full-bleed (opt-in con `reelsFullBleed`): el video llena la tarjeta.

   SOLO sirve si todos los videos de la pagina son verticales 9:16. Instagram
   los mete en un area mas ancha y rellena los costados con negro (pillarbox);
   esas bandas ocupan 14.37% del ancho del iframe cada una, o sea que el video
   real es el 71.26% del centro. Se agranda el iframe hasta que ese 71.26%
   coincide con el ancho del marco (100 / 71.26 = 140.32%) y se lo corre a la
   izquierda la mitad del excedente.

   Si un video es 4:5 o cuadrado, Instagram NO le pone bandas y este recorte le
   come los costados. Ahi hay que dejar el modo seguro. */
.reel-marco--full {
  aspect-ratio: 248 / 426;
}

.reel-marco--full .reel-frame {
  left: -20.16%;
  width: 140.32%;
}

/* Queda tapado por el iframe cuando Instagram carga bien. */
.reel-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  font-size: 0.9em;
  text-decoration: underline;
}

.reel-card--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  /* Misma proporcion que una tarjeta con reel real, para que el bloque no
     cambie de alto cuando se carguen las URLs. */
  aspect-ratio: 248 / 426;
  border: 2px dashed var(--gris-claro);
  border-radius: 12px;
  background: var(--color-blanco);
}

.reel-placeholder-icono {
  font-size: 2.5em;
  color: var(--gris-claro);
}

.reel-placeholder-texto {
  color: var(--gris);
  font-size: 0.9em;
  margin: 0;
}

.reels-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--color-blanco);
  color: var(--color-principal);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.reels-nav:hover {
  background: var(--color-fondo);
}

/* El carrusel de reels no hace loop (cada clon sería otro iframe de IG
   cargando de nuevo): las flechas se apagan en los extremos. */
.reels-nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* Menos reels que columnas: sin flechas y centrado. */
.reels-carousel.sin-navegacion .reels-nav {
  display: none;
}

.reels-carousel.sin-navegacion .reels-track {
  justify-content: center;
}

.reels-prev {
  left: 0;
}

.reels-next {
  right: 0;
}

@media (max-width: 1024px) {
  .reels-slide {
    flex-basis: 50%;
  }
  .reels-carousel {
    padding: 0 40px;
  }
}

@media (max-width: 700px) {
  .reels-slide {
    flex-basis: 100%;
  }
  .reels-carousel {
    padding: 0 44px;
  }
  .reels-nav {
    width: 32px;
    height: 32px;
  }
  .reels-perfil {
    gap: 0.75rem;
  }
  .reels-perfil-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reels-track {
    transition: none !important;
  }
  a.reels-seguir:hover {
    transform: none;
  }
}

/* ── ¿POR QUE LUMA? — VARIANTE AZUL ───────────
   Solo la usa la home. Markup compartido con /nosotros/:
   _includes/components/bloque-por-que-luma.njk

   La version clara no tiene estilos propios: hereda .nosotros-seccion y
   .beneficio-card tal como estaban antes de extraer el componente. Todo lo
   que hay aca abajo es el override del modo azul, nada mas.
   ============================================= */

.por-que-luma--azul {
  /* Degradado sutil navy -> navy mas profundo. El segundo tono no es un
     token porque solo existe para este degradado; si entra al brand kit,
     mover a tokens.css. ⚠️ Depende de {{HEX_OFICIALES}}, igual que --navy. */
  background: linear-gradient(135deg, var(--navy) 0%, #071C3B 100%);
  color: var(--color-blanco);
}

.por-que-luma--azul h2 {
  color: var(--color-blanco);
}

/* El parrafo de bajada, no los de las cards (por eso el hijo directo). */
.por-que-luma--azul > .nosotros-seccion-inner > p {
  color: rgba(255, 255, 255, 0.85);
}

/* Las cards son blancas sobre fondo claro en /nosotros/. Sobre el azul eso
   queda como tres parches; pasan a vidrio para que el azul siga leyendose
   como una sola franja. */
.por-que-luma--azul .beneficio-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.por-que-luma--azul .beneficio-icono {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-blanco);
}

.por-que-luma--azul .beneficio-card h3 {
  color: var(--color-blanco);
}

.por-que-luma--azul .beneficio-card p {
  color: rgba(255, 255, 255, 0.85);
}

/* ── GARANTIA DESTACADA ───────────────────────
   Version destacada del bloque de garantia (3 cards + CTA).
   En uso en / y en /nosotros/#garantia.
   Markup: _includes/components/bloque-garantia-destacado.njk

   Las cards no tienen estilos propios: usan .cuidado-grid / .cuidado-card,
   las mismas que la fila de /garantia/. Aca solo va el contenedor.
   ============================================= */

.garantia-destacada {
  padding: var(--space-lg) 5%;
  background: var(--color-fondo);
}

.garantia-destacada-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.garantia-destacada-inner h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.garantia-destacada-bajada {
  text-align: center;
  color: var(--gris);
  max-width: 720px;
  margin: 0 auto;
}

/* .cuidado-grid ya trae margin-top: 1.5rem, asi que el aire entre la bajada
   y las cards lo pone la grilla y no hace falta duplicarlo aca. */

/* .cuidado-grid--2 trae max-width: 800px pero sin centrado, porque en
   /garantia/ la fila va alineada a la izquierda con el resto del texto.
   Aca el bloque es centrado, asi que el centrado se agrega solo en este
   contexto y no se toca el variant compartido. */
.garantia-destacada .cuidado-grid--2 {
  margin-left: auto;
  margin-right: auto;
}

.garantia-destacada-cta {
  margin-top: var(--space-md);
  text-align: center;
}

/* ── CONGRESOS ────────────────────────────────
   Seccion de trayectoria en /nosotros/.
   Markup: _includes/components/bloque-congresos.njk
   Datos:  _data/congresos.js (enumera /images/<slug>/)
   ============================================= */

.congresos-seccion {
  padding: var(--space-lg) 5%;
  background: var(--color-fondo);
}

.congresos-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.congresos-titulo {
  text-align: center;
  margin-bottom: 0.5rem;
}

.congresos-bajada {
  text-align: center;
  color: var(--gris);
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}

/* Grilla de cuatro cards en una fila. Flex y no grid a proposito: hoy solo
   hay tres congresos con fotos cargadas (la carpeta del cuarto esta vacia)
   y con justify-content: center esas tres quedan centradas en vez de dejar
   un hueco a la derecha. Cuando entre la cuarta carpeta la fila se completa
   sola, sin tocar el CSS. */
.congresos-grid {
  --congresos-gap: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--congresos-gap);
}

.congreso-card {
  flex: 0 1 calc((100% - 3 * var(--congresos-gap)) / 4);
  display: flex;
  flex-direction: column;
  background: var(--color-blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ── Portada ── */

.congreso-portada {
  background: var(--gris-claro);
}

/* Las fotos vienen en 3:4, 9:16 y 4:3 mezcladas. Sin una relacion fija las
   cuatro cards arrancan con la foto a distinta altura y el texto queda
   escalonado; con cover se recorta al centro, que es donde esta el stand
   en todas. */
.congreso-portada-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Contenido ── */

/* Columna flexible para que el link al sitio del congreso caiga al pie de
   la card (`margin-top: auto` más abajo). Sin esto quedaría pegado al
   final de la descripción y, como las descripciones tienen largos
   distintos, los links de las cards no alinearían entre sí. */
.congreso-info {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.congreso-especialidad {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acero);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.congreso-nombre {
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.congreso-nombre-completo {
  color: var(--gris);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.congreso-descripcion {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-texto);
}

/* Link al sitio oficial del congreso (opcional, ver bloque-congresos.njk).
   `margin-top: auto` lo empuja al pie de la card; el `align-self` evita
   que el <a>, como item flex, se estire a todo el ancho y quede con un
   área clickeable mucho más grande que su texto. */
.congreso-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-principal);
  text-decoration: none;
  background-image: linear-gradient(var(--color-principal), var(--color-principal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .congreso-link:hover {
    background-size: 100% 1px;
  }
}

.congreso-link:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dos columnas antes de que la card quede demasiado angosta para el
   nombre completo de los congresos largos. */
@media (max-width: 1024px) {
  .congreso-card {
    flex-basis: calc((100% - var(--congresos-gap)) / 2);
  }
}

@media (max-width: 700px) {
  .congreso-card {
    flex-basis: 100%;
  }
  .congreso-portada-img {
    aspect-ratio: 16 / 10;
  }
}

/* =============================================
   CAPA MOBILE — correcciones de renderizado
   Va al final del archivo a propósito: son ajustes sobre reglas que ya
   existen más arriba, y desde acá ganan por orden de cascada sin
   necesidad de sumar más !important al bloque de 768px.
   ============================================= */

@media (max-width: 768px) {
  /* ── MENÚ: submenús que se abren con el dedo ──
     En touch no hay hover, así que tocar "Camillas" navegaba al hub y el
     submenú (Premium / One / Ginecológica) no se veía nunca, aunque el
     chevron prometiera lo contrario. La fuente de verdad pasa a ser la
     clase `.is-open` que pone el JS; las reglas de hover/focus de más
     arriba se apagan acá para que no queden dos estados peleando. */
  .main-nav .dropdown:hover > .dropdown-menu,
  .main-nav .dropdown:focus-within > .dropdown-menu {
    display: none;
  }

  .main-nav .dropdown.is-open > .dropdown-menu {
    display: block;
  }

  .main-nav .dropdown-toggle .arrow-down {
    transition: transform var(--dur-fast) var(--ease-out);
    margin-left: 8px;
  }

  .main-nav .dropdown.is-open > .dropdown-toggle .arrow-down {
    transform: rotate(180deg);
  }

  /* El submenú tiene que leerse como un nivel por debajo, no como otra
     lista suelta del mismo peso. */
  .main-nav .dropdown-menu {
    background: rgba(10, 41, 86, 0.04);
    border-radius: 6px;
    margin: 0.25rem 0.75rem;
    padding: 0.25rem 0;
    width: auto;
  }

  .main-nav .dropdown-menu li a {
    font-size: 0.95em;
  }

  /* ── ÁREAS DE TOQUE ──
     44px es el mínimo cómodo para un pulgar. Los links del menú medían
     20px de alto, los del footer también, y el CTA del header 29px. */
  .main-nav ul li {
    margin: 0;
  }

  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 15px;
  }

  .main-nav {
    padding: 8px 0 16px;
  }

  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* El CTA se mudó adentro del menú desplegable: en el header solo quedan
     el logo y la hamburguesa. El botón flotante de WhatsApp sigue siendo
     el canal de contacto siempre visible. */
  .cta-header {
    display: none;
  }

  .nav-cta-mobile {
    display: block;
    margin-top: 0.5rem;
    padding: 0 24px;
  }

  /* Gana sobre `.main-nav ul li a`, que pinta los links del menú con el
     color de texto y sin fondo. */
  .main-nav .nav-cta-mobile a {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border-radius: 5px;
    padding: 14px 20px;
    font-weight: bold;
  }

  .footer-nav-col ul li {
    margin-bottom: 0;
  }

  .footer-nav-col ul li a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* El teléfono y el mail del footer son los dos links más importantes del
     sitio en un celular — se tocan para llamar y para escribir — y medían
     20px de alto. */
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .reels-perfil-handle,
  .pdf-descarga-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Las tres cajas de contacto de /nosotros/ (mail, teléfono, showrooms)
     son acciones de conversión, no texto: 23px de alto era la mitad de lo
     que necesita un pulgar. */
  .method-box a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* La 404 es justo donde alguien perdido necesita acertarle al link. */
  .error-404__links .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Los links sueltos dentro de un párrafo quedan como están: estirarlos a
     44px rompería el interlineado del texto, y la propia norma (WCAG 2.5.8)
     exceptúa los links en línea dentro de una oración. */

  .carousel-arrow,
  .testimonio-carousel-nav,
  .reels-nav {
    width: 44px;
    height: 44px;
  }

  /* Los dots se dejan chicos a la vista pero se agrandan al tacto: el área
     crece a lo alto, que es espacio libre, y a lo ancho solo hasta el paso
     entre dots (16px) para no robarle el toque al vecino. */
  .carousel-dot {
    position: relative;
  }

  .carousel-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 44px;
  }

  .color-swatch {
    width: 40px;
    height: 40px;
  }

  /* ── BOTONES FLOTANTES ──
     Un botón fijo siempre tapa algo; lo que se puede hacer es que tape lo
     menos posible. Los dos se achican y se pegan a la esquina, en una sola
     columna a la derecha: el texto del sitio es todo alineado a izquierda,
     así que la esquina derecha es la que menos contenido tiene debajo.
     Antes ocupaban 60px y 50px arrancando a 95px del piso, y entre los dos
     barrían media pantalla de alto. */
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 26px;
    bottom: 16px;
    right: 16px;
    /* Por debajo del header (1000) para no flotar sobre el menú abierto. */
    z-index: 900;
  }

  #backToTop {
    width: 40px;
    height: 40px;
    bottom: 76px;
    right: 22px;
    font-size: 16px;
    z-index: 890;
  }

  /* Con el menú desplegado no hay contenido que consultar detrás: los
     flotantes solo estorban y tapan la última opción de la lista. */
  [data-menu-abierto] .whatsapp-float,
  [data-menu-abierto] #backToTop {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ── CTA DOBLE ──
     Era el defecto visual más repetido del sitio: los dos botones
     quedaban con anchos distintos y desalineados en el hero de la home,
     el del hub, la ficha de producto, el banner de showroom y el cierre.
     En una columna de 390px el par se lee como par solo si comparten
     ancho. */
  .cta-doble {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .cta-doble .cta-button,
  .cta-doble .cta-button-light {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 20px;
  }

  /* Estos dos declaran `align-items` con más especificidad más arriba:
     sin repetirlo acá, el par no estira. */
  .cta-producto-cierre .cta-doble,
  .hub-hero .cta-doble {
    align-items: stretch;
  }

  .cta-buttons {
    max-width: 100%;
  }

  /* ── TIPOGRAFÍA Y QUIEBRES ──
     El precio se partía en "USD 3.240 +" / "IVA antes USD 4.000 + IVA",
     con el tachado pegado al vigente. En su propia línea se entiende de
     una. */
  .precio-anterior {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 0.85em;
  }

  /* Mínimos legibles: el label del badge estaba en 8px. */
  .producto-banner-badge-label {
    font-size: 0.6rem;
  }

  .footer-nav-col h4,
  .footer-contact h4 {
    font-size: 0.8rem;
  }

  /* ── ENCUADRE DE FOTOS DE FONDO ──
     En una columna angosta la sección es mucho más alta que ancha y el
     `center` del desktop deja las caras fuera de cuadro: se ven torsos y
     piernas. Subir el foco recupera a las personas. */
  .nosotros-hero {
    padding: 56px 0;
    background-position: center 22%;
  }

  .home-showroom {
    padding: 4.5rem 5%;
  }
}