/* ========================================
   FUENTES EXTERNAS
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ========================================
   NAVBAR
======================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(10, 10, 10, 0.97);
  padding: 0 40px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--color-accent-primary);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.navbar-brand-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 1px;
  line-height: 1;
}

.navbar-brand-name span {
  color: var(--color-accent-primary);
}

.navbar-menu {
  display: flex;
  gap: 4px;
}

.navbar-menu a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.navbar-menu a:hover,
.navbar-menu a.active {
  color: var(--color-accent-secondary);
  background: rgba(245, 196, 0, 0.08);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: var(--color-text);
  border-radius: 2px;
  transition: background 0.2s;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;
  }

  .hamburger {
    display: flex;
  }

  .navbar-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 10, 10, 0.98);
    padding: 12px 0 20px;
    border-bottom: 2px solid var(--color-accent-primary);
    gap: 0;
  }

  .navbar-menu.active {
    display: flex;
  }

  .navbar-menu a {
    padding: 14px 28px;
    font-size: 1.5rem;
    border-radius: 0;
  }
}

/* ========================================
   HERO
======================================== */
.hero-container {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 64px);
  padding: 0 24px 48px;
  gap: 20px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  /* clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); */
}

/* Sin triángulo diagonal ni fondo propio: se apoya en .hero-overlay (radial,
   detrás de hero-bg) para el contraste. Si en pantalla el logo se ve poco
   legible, añadir aquí un radial-gradient oscuro sutil centrado detrás. */
.hero-container::before {
  content: '';
  position: absolute;
  top: clamp(24px, 2.5vw, 40px);
  left: clamp(24px, 2.5vw, 40px);
  width: clamp(92px, 9vw, 156px);
  height: clamp(70px, 6.8vw, 118px);
  background-image: url('../images/logo_servicios_express_sp.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

/* Mobile: el logo absoluto se solapaba con .hero-kicker en viewports angostos
   (~375px) porque el contenido del hero se centra verticalmente y su altura
   real varía. Lo sacamos del position:absolute para que entre al flujo normal
   como primer hijo de .hero-container (flex column) y empuje el resto hacia
   abajo en vez de superponerse. */
@media (max-width: 480px) {
  .hero-container::before {
    display: block;
    position: static;
    width: 130px;
    height: 100px;
    margin: 0 auto 12px;
  }
}

.hero-container> :not(.hero-bg):not(.hero-overlay) {
  position: relative;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.6) 45%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.1) 100%
  );
  z-index: -1;
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  border: 1px solid rgba(245, 196, 0, 0.4);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.hero-title {
  font-family: var(--font-display);
  max-width: min(96vw, 1100px);
  font-size: clamp(5rem, 7vw, 9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 1px;
  color: var(--color-text);
  text-wrap: balance;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-title em {
  font-style: normal;
  color: var(--color-accent-primary);
}

.hero-subtitle {
  max-width: 600px;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  line-height: 1.6;
  text-wrap: balance;
  color: var(--color-text-muted);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
}

.hero-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(251, 1, 2, 0.15);
  border: 1px solid rgba(251, 1, 2, 0.4);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  margin-top: 8px;
  font-size: 1.8rem;
  color: var(--color-text-muted);
}

.hero-price-badge strong {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--color-accent-secondary);
}

/* Barra de stats */
.hero-stats-bar {
  width: 100%;
  background: var(--color-accent-primary);

  /* Puntos en % (antes mezclaban px fijos calculados para ~1200px de ancho,
     lo que rompía la forma en viewports distintos al de escritorio). */
  clip-path: polygon(0% 0%,
      /* Punto 1: Esquina superior izquierda */
      81.5% 0%,
      /* Punto 2: Inicio del corte diagonal derecho */
      85% 50%,
      /* Punto 3: Quiebre medio de la diagonal */
      100% 50%,
      /* Punto 4: Extremo derecho superior */
      100% 100%,
      /* Punto 5: Esquina inferior derecha */
      20% 100%,
      /* Punto 6: Base, inicio de la muesca izquierda */
      15% 60%,
      /* Punto 7: Quiebre interno de la muesca */
      0% 60%
      /* Punto 8: Cierre en el borde izquierdo */
    );

  /* border-top: 1px solid var(--color-border-accent); */
  /* border-bottom: 1px solid var(--color-border-soft); */
  /* padding: 80px 40px 24px; */
  padding: 24px 80px;
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: -60px;
}



/* .hero-stats-bar {
  mask: url(/assets/images/homepage-stripe.svg) no-repeat center / 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
} */

.hero-stat-item {
  text-align: center;
}

.hero-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
}

.hero-stat-label {
  display: block;
  margin-top: 2px;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ========================================
   HERO STATS BAR: APILADO VERTICAL
======================================== */
@media (max-width: 768px) {
  .hero-stats-bar {
    /* 1. Quitamos el clip-path de escritorio que rompe la pantalla */
    clip-path: none !important;

    /* 2. Cambiamos a un Grid de 2 columnas centrado */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;

    /* 3. Ajustes de espacio */
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 16px !important;
    margin-top: 0 !important;
    /* Quitamos el margin negativo para que no tape los botones */
    box-sizing: border-box;

    /* 4. Estilo limpio con un borde superior/inferior discreto */
    background: var(--color-accent-primary, #FB0102);
    border-top: 2px solid var(--color-accent-secondary, #f5c400);
    border-bottom: 2px solid var(--color-accent-secondary, #f5c400);
  }

  .hero-stat-item {
    text-align: center;
    padding: 4px;
  }

  .hero-stat-number {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 6px;
  }

  .hero-stat-label {
    font-size: 0.85rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
  }
}

/* CRITICAL_CSS_BOUNDARY */

/* ========================================
   SERVICIOS
======================================== */
#servicios {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 170px;
}

#servicios::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.72)),
    url('../images/chker-4.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 96%, 0 82%); */
  z-index: 0;
}

#servicios::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(255, 68, 68, 0.72); */
  /* clip-path: polygon(0 82%, 50% 96%, 100% 82%, 100% 82.45%, 50% 96.45%, 0 82.45%); */
  z-index: 1;
  pointer-events: none;
}

#servicios>* {
  position: relative;
  z-index: 2;
}

#servicios>.section-kicker {
  color: var(--color-accent-secondary);
  margin-top: 0;
}

#servicios>.section-title {
  color: var(--color-text);
}

#servicios>.section-title-line {
  background: var(--color-accent-primary);
}

#servicios>.section-intro {
  max-width: 780px;
  color: var(--color-text-muted);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 34px auto 0;
}

@media (max-width: 768px) {
  #servicios {
    padding-top: 84px;
    padding-bottom: 130px;
  }

  #servicios::before {
    /* clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 97%, 0 84%); */
  }

  #servicios::after {
    /* clip-path: polygon(0 84%, 50% 97%, 100% 84%, 100% 84.5%, 50% 97.5%, 0 84.5%); */
  }

  .services-grid {
    margin-top: 26px;
  }
}

.service-card {
  background: var(--color-surface);
  /* background: #ebeeee; */
  /* background-color: rgba(129, 47, 6, 0.801); */
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-card);
  padding: 28px 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: var(--shadow-card);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-red);
  border-color: var(--color-accent-primary);
}

.service-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
}

.service-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.service-desc {
  font-size: 1.4rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.service-card.featured {
  border-color: var(--color-accent-secondary);
  background: linear-gradient(135deg, rgba(245, 196, 0, 0.06), var(--color-surface));
}

.service-card.featured .service-icon {
  color: var(--color-accent-secondary);
}

/* ========================================
   MARCAS — carrusel infinito
======================================== */
#marcas {
  background: var(--color-bg);
}

.marcas-carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--space-intro);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.marcas-track {
  display: flex;
  width: max-content;
  animation: marcas-scroll 36s linear infinite;
}

.marcas-carousel:hover .marcas-track {
  animation-play-state: paused;
}

.marcas-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 28px;
  padding: 0 14px;
}

.marcas-group img {
  width: 130px;
  height: 76px;
  object-fit: contain;
  background: #f4f4f4;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-sizing: border-box;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.marcas-group img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-3px);
}

@keyframes marcas-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .marcas-group {
    gap: 18px;
  }

  .marcas-group img {
    width: 100px;
    height: 60px;
    padding: 10px 14px;
  }
}

/* ========================================
   NOSOTROS / POR QUÉ ELEGIRNOS
======================================== */
#nosotros {
  position: relative;
  /* margin-top: -118px; */
  padding-top: 190px;
  background:
    linear-gradient(rgba(245, 243, 243, 0.158), rgba(245, 243, 243, 0.034)),
    url('../images/tire-wracks-bg6-AdobeStock_552259016-1920w.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 100%, 0 100%); */
}

.nosotros-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  align-items: stretch;
}

.nosotros-img-wrap {
  position: relative;
  height: 100%;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.nosotros-img-wrap img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 30% 65%;
  display: block;
}

.nosotros-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-panel);
  pointer-events: none;
}

.nosotros-body {}

.nosotros-body p {
  font-size: 1.7rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  color: var(--color-text);
}

.check-list li::before {
  content: '✔';
  color: var(--color-accent-primary);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1.4rem;
}

/* ========================================
   NOSOTROS: INSTALACIONES
======================================== */
.instalaciones-block {
  margin-top: var(--space-section);
  padding-top: var(--space-intro);
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
}

.instalaciones-title {
  font-size: clamp(2.2rem, 3vw, 3rem);
}

.instalaciones-intro {
  margin-bottom: 0;
}

.instalaciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-card);
  max-width: 1100px;
  margin: var(--space-intro) auto 0;
}

.instalacion-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease;
}

/* Placeholder gris hasta que se reemplace por la foto real (ver TODO en el HTML).
   Es un div de altura fija, no una imagen, para poder swap-earlo sin tocar el grid. */
.instalacion-photo {
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333;
  background-size: cover;
  background-position: center;
  color: var(--color-text-soft);
  font-size: 1.3rem;
  padding: 12px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

/* Zoom sutil solo en dispositivos con mouse real (hover:hover) — evita el
   "hover pegado" típico en touch, donde un tap deja el :hover activo hasta
   el siguiente toque en otro lugar. .instalacion-card ya tiene overflow:hidden,
   así que el scale de la foto no se sale de las esquinas redondeadas. */
@media (hover: hover) and (pointer: fine) {
  .instalacion-card:hover {
    box-shadow: var(--shadow-red);
  }

  .instalacion-card:hover .instalacion-photo {
    transform: scale(1.05);
  }
}

.instalacion-name {
  padding: 14px 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
}

/* "Área de taller" (3ª tarjeta) queda sola en la 2ª fila con el grid de
   2 columnas — en vez de dejar un hueco vacío al lado, ocupa el ancho
   completo como banner horizontal protagonista, con menos altura que las
   otras dos (que son verticales) para no verse como un cuadro gigante. */
.instalacion-card:nth-child(3) {
  grid-column: 1 / -1;
}

.instalacion-card:nth-child(3) .instalacion-photo {
  height: 320px;
  background-position: center 60%;
}

.instalaciones-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.instalacion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-border-accent);
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.instalacion-badge-icon {
  color: var(--color-accent-primary);
  font-weight: 700;
}

@media (max-width: 768px) {
  .instalaciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .instalacion-photo {
    height: 400px;
  }

  .instalacion-card:nth-child(3) .instalacion-photo {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .instalaciones-grid {
    grid-template-columns: 1fr;
  }

  /* 1 columna = tarjetas a todo el ancho disponible; una foto más alta
     se ve mejor proporcionada que la misma altura reducida de tablet. */
  .instalacion-photo {
    height: 420px;
  }

  /* En 1 columna ya no hay hueco que llenar (todas miden el mismo ancho),
     pero mantenemos esta tarjeta como banner más bajo — sigue siendo la
     única foto horizontal (4:3) de las tres, y a esta altura casi no
     necesita recorte. */
  .instalacion-card:nth-child(3) .instalacion-photo {
    height: 260px;
    background-position: center;
  }
}

/* ========================================
   NOSOTROS: ADAPTACIÓN MÓVIL
======================================== */
@media (max-width: 768px) {
  #nosotros {
    /* Ajustamos padding para evitar huecos gigantes */
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 0;

    /* En móvil es mejor usar cover o un fondo oscuro plano para garantizar legibilidad */
    background-size: cover;
    background-position: center;
    clip-path: none !important;
    /* Si tenías clip-path, lo quitamos para evitar recortes */
  }

  .nosotros-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Ajuste del contenedor de la imagen */
  .nosotros-img-wrap {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .nosotros-img-wrap img {
    width: 100%;
    height: auto;
    min-height: 0;
    /* Dejamos que la altura sea proporcional */
    max-height: 280px;
    /* Limitamos la altura para que no ocupe toda la pantalla */
    object-fit: cover;
  }

  /* Si usaste el marco desfasado ::after */
  .nosotros-img-wrap::after {
    inset: -6px;
    /* Hacemos el marco más discreto en pantallas pequeñas */
  }

  /* Ajustes del texto */
  .nosotros-body {
    text-align: left;
    /* O center, según prefieras */
  }

  .nosotros-body p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* Lista de verificación */
  .check-list {
    gap: 10px;
  }

  .check-list li {
    font-size: 1.3rem;
    line-height: 1.4;
  }
}

/* ========================================
   GALERÍA
======================================== */
#galeria {
  background: var(--color-surface-deep);
}

.gallery-viewport {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px 0;
}

.gallery-track {
  position: relative;
  height: 380px;
}

.gallery-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 280px;
  height: 340px;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}

.gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.gallery-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-video-play:hover {
  background: var(--color-accent-primary);
  transform: scale(1.08);
}

.gallery-video-play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  margin-left: 3px;
}

.gallery-video-play.is-hidden {
  display: none;
}

.gallery-slide.is-center {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-red);
}

.gallery-slide.is-left-1 {
  transform: translateX(-160%) scale(0.85);
  opacity: 0.65;
  z-index: 4;
}

.gallery-slide.is-right-1 {
  transform: translateX(60%) scale(0.85);
  opacity: 0.65;
  z-index: 4;
}

.gallery-slide.is-left-2 {
  transform: translateX(-230%) scale(0.7);
  opacity: 0.35;
  z-index: 3;
}

.gallery-slide.is-right-2 {
  transform: translateX(130%) scale(0.7);
  opacity: 0.35;
  z-index: 3;
}

.gallery-slide.is-left-3,
.gallery-slide.is-right-3,
.gallery-slide.is-hidden-left,
.gallery-slide.is-hidden-right {
  opacity: 0;
  z-index: 1;
}

.gallery-nav-prev,
.gallery-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent-primary);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 2rem;
  cursor: pointer;
  z-index: 6;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-nav-prev:hover,
.gallery-nav-next:hover {
  background: var(--color-accent-secondary);
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.gallery-nav-prev {
  left: 8px;
}

.gallery-nav-next {
  right: 8px;
}

/* En viewports angostos (~375px) el slide centrado de 280px deja solo
   ~47.5px libres a cada lado; los botones de 46px con left/right:8px
   invadían 6.5px el borde del slide. Se reducen y se acercan al borde
   para dejar ~9.5px de margen libre (ver cálculo de geometría en la
   auditoría). */
@media (max-width: 480px) {
  .gallery-nav-prev,
  .gallery-nav-next {
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
  }

  .gallery-nav-prev {
    left: 6px;
  }

  .gallery-nav-next {
    right: 6px;
  }
}

/* ========================================
   TESTIMONIOS
======================================== */
#testimonios {
  position: relative;
  background-image: url('../images/testimonios-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#testimonios::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.623);
}

#testimonios>* {
  position: relative;
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonial-card {
  background: rgba(22, 22, 22, 0.92);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-panel);
  padding: 28px;
  text-align: left;
  box-shadow: var(--shadow-panel);
}

.testimonial-stars {
  color: var(--color-accent-secondary);
  font-size: 1.8rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.testimonial-quote {
  font-size: 1.55rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
  font-style: italic;
}

.testimonial-author {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-text);
}

.testimonial-role {
  font-size: 1.2rem;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* ========================================
   CONTACTO
======================================== */
#contacto {
  background: var(--color-surface-deep);
}

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-card,
.map-card {
  background: var(--color-surface);
  border-radius: var(--radius-panel);
  padding: 32px;
  box-shadow: var(--shadow-panel);
  border: 1px solid var(--color-border-soft);
}

.form-card {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.map-card {
  padding: 0;
  overflow: hidden;
  height: 420px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1.5rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent-primary);
  outline: none;
}

.map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-panel);
  display: block;
}

.contact-info {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

.contact-info-item span:first-child {
  font-size: 2rem;
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
  background: #050505;

  /* Decoración puramente estética: franja delgada (~1290x234px real, aunque
     el archivo se llame .png es en realidad WebP) anclada al borde superior. */
  background-image: url('../images/footer-top-bg1-1.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  border-top: 3px solid var(--color-accent-primary);
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.3);
  padding: 72px 24px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  height: 56px;
  width: auto;
  margin-bottom: 14px;
}

.footer-desc {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a,
.footer-social a:link,
.footer-social a:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent-primary);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #ffffff;
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-col-title {
  font-size: var(--kicker-size);
  font-weight: 700;
  letter-spacing: var(--kicker-spacing);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: 16px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.footer-contact-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent-primary);
}

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

.footer-contact-item a:hover {
  color: var(--color-accent-primary);
}

.footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
}

.footer-copy {
  font-size: 1.2rem;
  color: #555;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .footer-col-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer {
    /* Decorativa y apenas visible en pantallas chicas: se quita para no
       sumar peso de carga sin beneficio real. */
    background-image: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-col-brand {
    align-items: center;
  }

  .footer-contact-item {
    justify-content: center;
  }
}

/* ========================================
   BOTÓN FLOTANTE DE WHATSAPP
======================================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 600px) {
  .whatsapp-float {
    bottom: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
  }
}

/* ========================================
   CARDS / UTILIDADES
======================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-card);
  max-width: 1200px;
  margin: 0 auto;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 15px 28px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

/* #D40101 en vez de var(--color-accent-primary) (#FB0102) a propósito:
   el rojo de marca puro no cumple WCAG AA (4.5:1) con texto blanco a este
   tamaño/peso; este tono ~10% más oscuro sí lo cumple (~5.3:1). No "corregir"
   a la variable base. */
.btn-primary {
  background: #D40101;
  color: #ffffff;
  box-shadow: var(--shadow-red);
}

.btn-primary:hover {
  background: #B30101;
  box-shadow: 0 12px 32px rgba(212, 1, 1, 0.5);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.btn-yellow {
  background: var(--color-accent-secondary);
  color: #000;
  box-shadow: 0 8px 24px rgba(245, 196, 0, 0.3);
}

.btn-yellow:hover {
  background: #e0b200;
  box-shadow: 0 12px 32px rgba(245, 196, 0, 0.45);
}