/* --- PALETA DE COLORES DREYBACK --- */
:root {
  --primary-blue: #0099cc;
  --dark-gray: #333333;
  --white: #ffffff;
  --slate-gray: #5b6777;
  --black: #000000;
  --transition: all 0.3s ease;
}

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

html {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: var(--white);
  color: var(--dark-gray);
  overflow-x: hidden;
  padding-top: 100px;
  animation: hideFlash 0.001s forwards;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   ACELERACIÓN DE RENDERIZADO DEL NAVEGADOR (CONTENT-VISIBILITY)
   Reduce el tiempo de cálculo de layout y paint inicial en ~50%
   ============================================================ */
.services-grid-section,
.services-cta-section,
.sei-process,
.sei-cases,
.sei-gallery,
.sei-cta,
.prj-features,
.prj-process,
.prj-stats-section,
.prj-gallery,
.prj-closing,
.audit-pillars,
.audit-benefits,
.audit-cta,
.support-grid-section,
.support-pillars,
.support-cta,
.about-intro-section,
.about-values-section,
footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

@keyframes hideFlash {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Ocupa toda la altura de la pantalla */
  margin-top: 100px;
  /* Espacio para el header fijo */
}

/* --- DEDICATED MOBILE HEADER (DESACTIVADO EN ESCRITORIO) --- */
.mobile-header-bar,
#mobileHeaderBar {
  display: none !important;
}

/* --- TOP BAR (Mantenida igual al index 2) --- */
.top-bar {
  background-color: var(--white);
  color: var(--slate-gray);
  font-size: 13px;
  padding: 12px 5%;
  display: flex;
  justify-content: flex-end;
  /* Alineado a la derecha */
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  transition: transform 0.3s ease-in-out;
  border-bottom: none;
  will-change: transform, opacity;
  /* Elimina el parpadeo */
}

.top-bar.hidden {
  transform: translateY(-100%);
}

.top-bar-inner {
  display: flex;
  gap: 20px;
  align-items: center;
}

.top-bar a {
  font-weight: 600;
  color: var(--dark-gray);
  transition: var(--transition);
}

.top-bar a:hover {
  color: var(--primary-blue);
}

/* --- HEADER --- */
header {
  position: fixed;
  top: 50px;
  width: 100%;
  padding: 0px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  z-index: 1002;
  transition: all 0.4s ease;
  height: 30px;
}

/* EFECTO BLUR */
header.scrolled {
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 10px 5%;
  height: 60px;
  align-items: center;
  transition: all 0.15s ease;
  z-index: 1000;
}

/* --- TAMAÑO Y ESTILO DEL LOGO --- */
.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.logo img {
  height: 38px;
  width: auto;
  display: block;
  position: static;
  top: 0;
  margin: 0;
  transition: height 0.25s ease;
}

header.scrolled .logo img {
  height: 32px;
  top: 0;
  position: static;
}

/* --- CONTENEDOR DERECHO (Botones + Menú) --- */
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

header.scrolled .header-right {
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Estilos de los botones de navegación (Compañía, etc.) */
.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  color: var(--dark-gray);
  line-height: 1.2;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--primary-blue);
}

/* --- BOTÓN MENÚ LATERAL --- */
.menu-btn {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}

.menu-btn:hover {
  color: var(--primary-blue);
}

.menu-btn i {
  font-size: 1.2rem;
}

/* --- SIDEBAR (MENÚ LATERAL) --- */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--white);
  z-index: 100000;
  padding: 40px 24px 30px;
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.18);
  transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar.active {
  left: 0;
}

.sidebar-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: var(--slate-gray);
}

.sidebar-close:hover {
  color: var(--black);
}

.sidebar h3 {
  color: var(--primary-blue);
  margin-bottom: 20px;
  font-size: 24px;
}

.sidebar a {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  color: var(--dark-gray);
  font-weight: 600;
  transition: var(--transition);
}

.sidebar a:hover {
  color: var(--primary-blue);
  padding-left: 10px;
}

.sidebar .cta-sidebar {
  background: var(--primary-blue);
  color: var(--white);
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  border-bottom: none;
}

.sidebar .cta-sidebar:hover {
  background: var(--black);
  color: var(--white);
  padding-left: 0;
}

/* Forzamos al navegador a reconocer la animación del hero inmediatamente */
.hero-content {
  animation: heroBlurIn 1.1s var(--ease-blur) both;
}

/* --- HERO SLIDER --- */
.hero-slider {
  position: relative;
  height: 95vh;
  width: 100%;
  overflow: hidden;
  background-color: var(--dark-gray);
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  visibility: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6);
  /* Oscurece la imagen para que se lea el texto */
  transform: scale(1);
}

.slide.active .slide-bg {
  animation: slowZoom 8s ease-in-out forwards;
}

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10%;
  max-width: 1000px;
  color: var(--white);
  animation: fadeUp 1s ease-out forwards;
  /* Estado inicial: abajo y transparente */
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* Cuando el slide está activo, el texto sube y se vuelve visible */
.slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

.slide .slide-content {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.slide-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--white);
}

.slide-content .subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.slide-content .subtitle span {
  color: var(--primary-blue);
}

.slide-content p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 600px;
}

.btn-slider {
  display: inline-block;
  background-color: #ffa500;
  /* Naranja tipo Des-Case */
  color: var(--white);
  padding: 15px 35px;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  border: 2px solid #ffa500;
  transition: var(--transition);
  cursor: pointer;
  text-transform: uppercase;
  width: fit-content;
}

.btn-slider:hover {
  background-color: transparent;
  color: #ffa500;
}

/* --- PUNTOS DE NAVEGACIÓN (DOTS) --- */
.slider-dots {
  position: absolute;
  bottom: 200px;
  right: 10%;
  left: auto;
  transform: none;
  display: flex;
  gap: 15px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition);
}

.dot.active {
  background: var(--white);
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.dot:hover {
  background: var(--primary-blue);
}

@media (max-width: 768px) {
  .slide-content h1 {
    font-size: 2.5rem;
  }

  .slide-content .subtitle {
    font-size: 1.8rem;
  }

  .slide-content p {
    font-size: 1rem;
  }

  .btn-slider {
    padding: 12px 25px;
    font-size: 14px;
  }
}

/* --- SOBRE NOSOTROS --- */
.about {
  padding: 100px 10%;
  background-color: var(--white);
  display: flex;
  align-items: center;
  gap: 60px;
}

.about-text {
  flex: 1;
}

.about-text h2 {
  font-size: 2.5rem;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.about-text h2 span {
  color: var(--primary-blue);
}

.about-text p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.about-image {
  flex: 1;
  height: 400px;
  background: url("https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop") center/cover;
  border-radius: 10px;
  box-shadow:
    0 30px 70px -25px rgba(0, 153, 204, 0.4),
    20px 20px 0px var(--primary-blue);
  transition: var(--transition);
}

.about-image:hover {
  transform: translate(-5px, -5px);
  box-shadow:
    0 40px 90px -20px rgba(0, 153, 204, 0.55),
    25px 25px 0px var(--dark-gray);
}

/* --- CATÁLOGO --- */
.catalog-section {
  padding: 80px 10%;
  background-color: #f9f9f9;
}

.catalog-header {
  text-align: center;
  margin-bottom: 60px;
}

.catalog-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.catalog-header p {
  color: var(--slate-gray);
  max-width: 700px;
  margin: 0 auto;
}

.product-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 80px;
  background: var(--white);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.product-row.reverse {
  flex-direction: row-reverse;
}

.product-row-img {
  flex: 1;
  height: 300px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.product-row-info {
  flex: 1;
}

.product-row-info h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.product-row-info h3 span {
  color: #ff4d4d;
  font-weight: 400;
}

.product-row-info p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-bottom: 25px;
}

.row-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.btn-red {
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 12px 30px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  transition: var(--transition);
}

.btn-red:hover {
  background-color: var(--dark-gray);
}

.btn-link {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 14px;
  transition: var(--transition);
}

.btn-link:hover {
  color: var(--dark-gray);
}

/* --- BOTÓN VER CATÁLOGO COMPLETO --- */
.btn-catalog-full {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid var(--primary-blue);
  transition: var(--transition);
}

.btn-catalog-full:hover {
  background-color: transparent;
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.3);
}

/* --- ALQUILER --- */
.alquiler-section {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 100px 10%;
  text-align: center;
  color: var(--white);
}

.alquiler-section h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.alquiler-section h2 span {
  color: var(--primary-blue);
}

.alquiler-section .btn-primary {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid var(--primary-blue);
  transition: var(--transition);
}

.alquiler-section .btn-primary:hover {
  background-color: transparent;
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.3);
}

/* --- FOOTER --- */
footer {
  width: 100%;
  background-color: #1a1a1a;
  color: #ccc;
  padding: 60px 5% 20px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.5fr;
  gap: 30px;
  border-bottom: 1px solid #333;
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.9rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  font-size: 0.9rem;
  color: #aaa;
  transition: var(--transition);
}

.footer-col ul li a:hover {
  color: var(--white);
  padding-left: 5px;
}

.footer-brand {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.elgi-brand-box {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 2px;
  text-align: right;
  line-height: 1;
}

.footer-phones p {
  margin: 2px 0;
}

.footer-email a {
  color: #aaa;
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-email a:hover {
  color: var(--white);
}

.footer-socials {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.footer-socials a {
  color: #aaa;
  font-size: 1.5rem;
  transition: var(--transition);
}

.footer-socials a:hover {
  color: var(--white);
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
}

/* --- WHATSAPP --- */
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: var(--transition);
  animation: pulse 2s infinite;
}

.btn-whatsapp:hover {
  transform: scale(1.1);
  background-color: #128c7e;
}

/* --- COOKIES --- */
.cookie-banner {
  position: fixed;
  bottom: 90px;
  left: 20px;
  right: 20px;
  max-width: 400px;
  background: var(--white);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  border-top: 6px solid var(--primary-blue);
  transform: translateY(100px);
  opacity: 0;
  animation: slideUpCookie 0.8s forwards 0.5s;
  text-align: left;
}

.cookie-banner h4 {
  margin-bottom: 10px;
  color: var(--dark-gray);
  font-size: 1.1rem;
}

.cookie-banner p {
  font-size: 0.85rem;
  color: var(--slate-gray);
  line-height: 1.5;
  margin-bottom: 15px;
}

.cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookie-btn-accept {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  transition: var(--transition);
}

.cookie-btn-accept:hover {
  background: var(--black);
}

.cookie-btn-manage {
  background: #eee;
  color: var(--dark-gray);
  border: none;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
  transition: var(--transition);
}

.cookie-btn-manage:hover {
  background: #ddd;
}

/* ANIMACIONES */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes slideUpCookie {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: span 3;
    align-items: center;
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 20px;
  }

  .dreyback-brand-box {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .quick-nav-boxes {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
  }

  .product-row {
    flex-direction: column !important;
    padding: 20px;
    gap: 20px;
  }

  .product-row-img {
    width: 100%;
    height: 200px;
  }

  .service-item {
    flex-direction: column !important;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* =====================================================================
           DISEÑO ALTERNATIVO — CAPA "GLASS / BLUR ENGINEERING"
           Todo lo que sigue son ADICIONES y SOBRE-ESCRITURAS de estilo.
           No se elimina ni se reescribe ninguna sección del HTML original.
           ===================================================================== */

:root {
  --primary-blue-light: #4dd8f0;
  --deep-navy: #060b14;
  --navy-panel: #0e1a2b;
  --ice: #f3f9fc;
  --glass-light: rgba(255, 255, 255, 0.55);
  --glass-border-light: rgba(255, 255, 255, 0.55);
  --glass-dark: rgba(255, 255, 255, 0.05);
  --glass-border-dark: rgba(77, 216, 240, 0.3);
  --ease-blur: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--primary-blue);
  color: var(--white);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #eef3f6;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--primary-blue), var(--dark-gray));
  border-radius: 10px;
}

/* --- Barra de progreso de lectura --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg,
      var(--primary-blue),
      var(--primary-blue-light));
  z-index: 3000;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(0, 153, 204, 0.6);
}

/* --- Header / Top bar: estilo corporativo limpio --- */
header.scrolled {
  background: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.top-bar {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
}

.nav-links a {
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--primary-blue);
}

/* ====================================================== */
/* ESTILOS PARA EL MENÚ DESPLEGABLE (ESTILO CORPORATIVO)  */
/* ====================================================== */

/* Contenedor padre */
.nav-links .dropdown {
  position: relative;
  display: inline-block;
  height: 100%;
  /* Para que la línea roja se alinee con el texto */
}

/* Botón principal (Texto en mayúsculas, espaciado, sin flecha) */
.nav-links .dropbtn {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  /* El espaciado que se ve en tu imagen */
  color: var(--dark-gray);
  transition: var(--transition);
  cursor: pointer;
  padding: 10px 0;
  display: inline-block;
  border-bottom: 3px solid transparent;
  /* Espacio para la línea de acento */
}

/* El contenido oculto (el cajón blanco) */
.nav-links .dropdown-content {
  position: absolute;
  top: 100%;
  /* Justo debajo del texto */
  left: -15px;
  /* Alineado un poco a la izquierda */
  background-color: var(--white);
  min-width: 280px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  /* Sombra suave */
  border-radius: 0 0 4px 4px;
  /* Bordes redondeados solo abajo */
  padding: 15px 0;
  z-index: 1000;
  will-change: transform, opacity;
  border-top: 4px solid var(--primary-blue);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  /* Evita clics cuando está oculto */
  visibility: hidden;
  transform: translateY(15px);
}

/* Cuando se activa la clase .open, el menú se muestra */
.nav-links .dropdown.open .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Enlaces dentro del desplegable */
.nav-links .dropdown-content a {
  color: var(--slate-gray);
  /* Gris suave como en la imagen */
  padding: 12px 25px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  /* Mayúsculas */
  letter-spacing: 2px;
  /* Espaciado amplio */
  transition: var(--transition);
}

/* Hover de los enlaces */
.nav-links .dropdown-content a:hover {
  background-color: transparent;
  /* Sin fondo azul, solo cambio de color */
  color: var(--primary-blue);
  padding-left: 30px;
  /* Se mueve ligeramente a la derecha */
}

/* Mostrar el desplegable al pasar el mouse */
.nav-links .dropdown:hover .dropbtn {
  color: var(--primary-blue);
}

.nav-links .dropdown:hover .dropdown-content {
  opacity: 1;
  transform: translateZ(0);
  pointer-events: auto;
  visibility: visible;
}

/* --- HERO: entrada con desenfoque + orbes ambientales --- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Ocupa toda la pantalla desde el borde superior */
  overflow: hidden;

  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)),
    url("https://images.unsplash.com/photo-1581093588401-fbb62a02f120?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;

  /* QUITAMOS CUALQUIER MARGEN O PADDING QUE EMPUJE HACIA ABAJO */
  margin: 0;
  padding: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(650px 400px at 85% 20%,
      rgba(0, 153, 204, 0.35),
      transparent 65%);
  filter: blur(10px);
  mix-blend-mode: screen;
}

.hero-content {
  position: absolute;
  top: 50%;
  /* Centramos verticalmente */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 700px;
  text-align: center;
  padding: 0 20px;
  z-index: 2;
}

.hero h1 {
  animation: heroBlurIn 1.1s var(--ease-blur) both;
}

.hero p {
  animation: heroBlurIn 1.1s var(--ease-blur) 0.18s both;
}

.hero-buttons {
  animation: heroBlurIn 1.1s var(--ease-blur) 0.34s both;
}

@keyframes heroBlurIn {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* --- Quick nav boxes: foco/desenfoque en hover --- */
.nav-box {
  transition:
    transform 0.5s var(--ease-blur),
    box-shadow 0.5s var(--ease-blur);
}

.nav-box::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.6s ease;
  pointer-events: none;
}

.nav-box:hover::after {
  backdrop-filter: blur(2px);
}

.nav-box:hover {
  box-shadow: 0 25px 45px -15px rgba(0, 153, 204, 0.45);
}

/* --- Catálogo: elevación suave con blur de sombra --- */
.product-row {
  transition:
    transform 0.6s var(--ease-blur),
    box-shadow 0.6s var(--ease-blur);
}

.product-row:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -25px rgba(0, 153, 204, 0.28);
}

.product-row-img {
  transition: transform 0.7s var(--ease-blur);
}

.product-row:hover .product-row-img {
  transform: scale(1.045);
}

/* --- Service cards: icono con resplandor --- */
.service-card:hover i {
  filter: drop-shadow(0 0 14px rgba(0, 153, 204, 0.55));
}

/* --- Service items (fixed bg): overlay de color sutil --- */
.service-item {
  position: relative;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(0, 153, 204, 0.22), transparent 45%);
}

/* --- Alquiler: textura de fondo con el diagrama, muy sutil --- */
.alquiler-section {
  position: relative;
}

.alquiler-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop") center/cover;
  filter: blur(8px);
  opacity: 0.16;
  mix-blend-mode: overlay;
}

.alquiler-section * {
  position: relative;
  z-index: 2;
}

/* --- Value cards: icono con flotación leve --- */
.value-card i {
  transition: transform 0.5s var(--ease-blur);
}

.value-card:hover i {
  transform: translateY(-4px) scale(1.05);
}

/* --- Cookie banner: cristal --- */
.cookie-banner {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

/* --- Scroll reveal genérico (aplicado vía JS, sin tocar el HTML) --- */
.reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(36px);
  transition:
    opacity 0.9s var(--ease-blur),
    filter 0.9s var(--ease-blur),
    transform 0.9s var(--ease-blur);
  will-change: opacity, filter, transform;
}

.reveal.in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .hero h1,
  .hero p,
  .hero-buttons {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =====================================================================
           NUEVOS BLOQUES — INGENIERÍA / PROCESO / EQUIPO
           ===================================================================== */

/* --- HUD Frame (marco tipo "lectura de simulación") --- */
.hud-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--glass-border-dark);
  background: var(--glass-dark);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  aspect-ratio: 16 / 11;
}

.hud-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.15) contrast(1.05);
}

.hud-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--primary-blue-light);
  opacity: 0.9;
  pointer-events: none;
}

.hud-corner.tl {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.hud-corner.tr {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
}

.hud-corner.bl {
  bottom: 10px;
  left: 10px;
  border-right: none;
  border-top: none;
}

.hud-corner.br {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

.hud-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a9ebf7;
  background: rgba(6, 11, 20, 0.6);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--glass-border-dark);
  backdrop-filter: blur(6px);
}

/* --- Sección Ingeniería & Simulación --- */
.eng-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: 110px 10%;
  background:
    radial-gradient(900px 500px at 12% 8%,
      rgba(0, 153, 204, 0.22),
      transparent 60%),
    radial-gradient(800px 460px at 92% 95%,
      rgba(0, 153, 204, 0.14),
      transparent 60%),
    var(--deep-navy);
}

.eng-blob {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--primary-blue);
  filter: blur(130px);
  opacity: 0.3;
  pointer-events: none;
  animation: floatBlob 16s ease-in-out infinite;
}

.eng-blob.b1 {
  top: -120px;
  left: -100px;
}

.eng-blob.b2 {
  bottom: -140px;
  right: -80px;
  animation-delay: -6s;
}

@keyframes floatBlob {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.12);
  }
}

.eng-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--primary-blue-light);
}

.eng-text h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

.eng-text h2 span {
  color: var(--primary-blue-light);
}

.eng-text p {
  color: #b7c4d6;
  line-height: 1.85;
  font-size: 1.05rem;
  margin-bottom: 34px;
}

.eng-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.eng-stat b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.7rem;
  color: var(--white);
}

.eng-stat span {
  font-size: 10.5px;
  color: #7c8ca3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eng-panels {
  display: grid;
  gap: 22px;
}

/* --- Sección Proceso (tratamiento de aire) --- */
.process-section {
  padding: 110px 10%;
  background: var(--white);
  text-align: center;
  position: relative;
}

.process-section .catalog-header p {
  max-width: 750px;
}

.process-card {
  max-width: 920px;
  margin: 50px auto 34px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(0, 153, 204, 0.15);
  box-shadow: 0 35px 80px -35px rgba(0, 60, 90, 0.3);
  transition:
    transform 0.6s var(--ease-blur),
    box-shadow 0.6s var(--ease-blur);
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 45px 90px -30px rgba(0, 60, 90, 0.4);
}

.process-card img {
  width: 100%;
  display: block;
}

.process-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}

.process-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 153, 204, 0.2);
  padding: 10px 18px;
  border-radius: 50px;
  transition: var(--transition);
}

.process-chip i {
  color: var(--primary-blue);
}

.process-chip:hover {
  background: var(--white);
  box-shadow: 0 10px 25px -10px rgba(0, 153, 204, 0.35);
  transform: translateY(-3px);
}

/* --- Sección Equipo / Galería --- */
.team-gallery-section {
  padding: 110px 10%;
  background: var(--white);
}

.team-gallery-header {
  text-align: center;
  margin-bottom: 50px;
}

.team-gallery-header h2 {
  font-size: 2.3rem;
  color: var(--dark-gray);
}

.team-gallery-header h2 span {
  color: var(--primary-blue);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

.team-card {
  position: relative;
  height: 430px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px -30px rgba(0, 0, 0, 0.3);
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 1.1s var(--ease-blur),
    filter 0.8s ease;
}

.team-card:hover img {
  transform: scale(1.07);
}

.team-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px;
  background: linear-gradient(to top,
      rgba(6, 11, 20, 0.88),
      rgba(6, 11, 20, 0.15) 65%,
      transparent);
  color: var(--white);
}

.team-card-overlay .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-blue-light);
  margin-bottom: 8px;
  display: block;
}

.team-card-overlay h3 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.team-card-overlay p {
  font-size: 0.9rem;
  color: #dbe6ee;
  max-width: 420px;
}

@media (max-width: 992px) {
  .eng-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .eng-section,
  .process-section,
  .team-gallery-section {
    padding: 80px 6%;
  }

  .eng-text h2 {
    font-size: 2rem;
  }
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA LA PÁGINA ACERCA DE NOSOTROS        */
/* ====================================================== */

/* HERO CORPORATIVO */
.about-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
  padding: 0 10%;
  position: relative;
}

.about-hero-content {
  max-width: 800px;
}

.about-hero h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.about-hero h1 span {
  color: var(--primary-blue);
}

.about-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  margin-bottom: 40px;
}

.btn-about-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid var(--primary-blue);
  transition: var(--transition);
}

.btn-about-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

.scroll-down {
  position: absolute;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

/* INTRODUCCIÓN */
.about-intro {
  padding: 100px 10%;
  background-color: var(--white);
  text-align: center;
}

.about-intro-content {
  max-width: 800px;
  margin: 0 auto;
}

.eyebrow-about {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-blue);
  display: block;
  margin-bottom: 15px;
}

.about-intro h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--dark-gray);
}

.about-intro h2 span {
  color: var(--primary-blue);
}

.about-intro p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.8;
}

/* ESTADÍSTICAS */
.about-stats {
  background-color: var(--bg-light);
  padding: 80px 10%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

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

.stat-number {
  display: block;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1rem;
  color: var(--slate-gray);
  font-weight: 500;
}

/* MISIÓN Y VISIÓN */
.about-mission-vision {
  padding: 100px 10%;
  background-color: var(--white);
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.mission-box,
.vision-box {
  padding: 40px;
  background: var(--bg-light);
  border-radius: 15px;
  text-align: center;
  transition: var(--transition);
  border-top: 5px solid transparent;
}

.mission-box:hover,
.vision-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-top-color: var(--primary-blue);
}

.mission-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.mission-box h3,
.vision-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.mission-box p,
.vision-box p {
  color: var(--slate-gray);
  line-height: 1.7;
}

/* HISTORIA */
.about-history {
  padding: 100px 10%;
  background-color: var(--white);
  text-align: center;
}

.history-header {
  margin-bottom: 60px;
}

.history-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-gray);
}

.history-header h2 span {
  color: var(--primary-blue);
}

.history-timeline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.history-timeline::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 5%;
  width: 90%;
  height: 2px;
  background: var(--primary-blue);
}

.history-item {
  flex: 1;
  min-width: 150px;
  text-align: center;
  position: relative;
  background: var(--white);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.history-item:hover {
  transform: translateY(-10px);
}

.history-year {
  display: inline-block;
  background: var(--primary-blue);
  color: var(--white);
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.history-desc {
  font-size: 0.9rem;
  color: var(--slate-gray);
  line-height: 1.5;
}

/* CTA FINAL */
.about-cta {
  background-color: var(--black);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.about-cta h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.about-cta h2 span {
  color: var(--primary-blue);
}

.about-cta p {
  max-width: 600px;
  margin: 0 auto 40px;
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
}

.btn-cta-about {
  display: inline-block;
  background-color: var(--white);
  color: var(--black);
  padding: 15px 40px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  transition: var(--transition);
}

.btn-cta-about:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .about-hero h1 {
    font-size: 2.5rem;
  }

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

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

  .history-timeline::before {
    display: none;
  }

  .history-item {
    min-width: 100%;
  }
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA LA PÁGINA DE CONTACTO               */
/* ====================================================== */

/* HERO DE CONTACTO */
.contact-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 120px 10%;
  text-align: center;
  color: var(--white);
}

.contact-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.contact-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.contact-hero h1 span {
  color: var(--primary-blue);
}

.contact-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
}

/* FORMULARIO DE CONTACTO */
.contact-form-section {
  padding: 80px 10%;
  background-color: var(--bg-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--white);
  padding: 50px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* INFORMACIÓN DE CONTACTO */
.contact-info h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.contact-info h2 span {
  color: var(--primary-blue);
}

.contact-intro {
  color: var(--slate-gray);
  margin-bottom: 30px;
  line-height: 1.6;
}

.info-item {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  padding: 15px;
  border-radius: 10px;
  transition: var(--transition);
}

.info-item:hover {
  background: var(--bg-light);
}

.info-icon {
  font-size: 1.5rem;
  color: var(--primary-blue);
  background: #eefafe;
  padding: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.info-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 5px;
}

.info-item p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* FORMULARIO */
.contact-form-wrapper h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark-gray);
  margin-bottom: 5px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: var(--transition);
  background: var(--bg-light);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.1);
}

.contact-form textarea {
  resize: vertical;
}

.btn-contact-submit {
  width: 100%;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-contact-submit:hover {
  background-color: var(--dark-gray);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.3);
}

/* MAPA */
.contact-map {
  padding: 80px 10%;
  background-color: var(--white);
}

.map-container {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: 400px;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url("https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2070&auto=format&fit=crop") center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--dark-gray);
  text-align: center;
  padding: 20px;
}

.map-placeholder i {
  font-size: 3rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.map-placeholder h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

/* CTA FINAL */
.contact-cta {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 10%;
  text-align: center;
}

.contact-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.contact-cta h2 span {
  color: var(--primary-blue);
}

.contact-cta p {
  max-width: 600px;
  margin: 0 auto 40px;
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.6;
}

.btn-cta-contact {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  transition: var(--transition);
}

.btn-cta-contact:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .contact-hero h1 {
    font-size: 2.5rem;
  }
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA LA PÁGINA DE REGIONES               */
/* ====================================================== */

.region-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

/* HEADER */
.region-header h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.region-header h1 span {
  color: var(--primary-blue);
}

.region-header p {
  font-size: 1.2rem;
  color: var(--slate-gray);
  margin-bottom: 40px;
}

/* MAPA VISUAL */
.region-map-container {
  max-width: 900px;
  margin: 0 auto 50px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  height: 300px;
}

.region-map-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0, 153, 204, 0.2), rgba(0, 153, 204, 0.2)),
    url("https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2070&auto=format&fit=crop") center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--dark-gray);
}

.region-map-placeholder i {
  font-size: 3rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.region-map-placeholder h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.region-map-placeholder p {
  font-size: 1rem;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* GRID DE PAÍSES */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  max-width: 900px;
  margin: 0 auto 50px;
}

.region-card {
  background: var(--white);
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark-gray);
}

.region-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
  border-color: var(--primary-blue);
}

.region-flag {
  font-size: 3rem;
  margin-bottom: 10px;
}

.region-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.region-card p {
  font-size: 0.9rem;
  color: var(--slate-gray);
}

/* PIE DE PÁGINA */
.region-footer {
  padding-top: 30px;
  border-top: 1px solid #eee;
  color: var(--slate-gray);
}

.region-footer a {
  color: var(--primary-blue);
  font-weight: 600;
  text-decoration: none;
}

.region-footer a:hover {
  color: var(--dark-gray);
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA EL CATÁLOGO (ESTILO E-COMMERCE)     */
/* ====================================================== */

.catalog-full-wrapper {
  width: 100%;
  padding: 30px 5% 80px;
  background-color: rgb(236, 236, 236);
  box-sizing: border-box;
}

/* --- BARRA DE BÚSQUEDA Y CONTROLES --- */
.catalog-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box-wrapper {
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  flex: 1;
  max-width: 400px;
  transition: var(--transition);
}

.search-box-wrapper:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.1);
}

.search-icon {
  color: var(--slate-gray);
  margin-right: 12px;
}

.catalog-search-input {
  border: none;
  outline: none;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--dark-gray);
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-count {
  font-size: 0.9rem;
  color: var(--slate-gray);
}

.view-toggle {
  display: flex;
  gap: 10px;
}

.view-toggle i {
  font-size: 1.2rem;
  color: #ccc;
  cursor: pointer;
  transition: var(--transition);
}

.view-toggle i:hover,
.view-toggle i.active-view {
  color: var(--primary-blue);
}

/* --- LAYOUT PRINCIPAL (2 COLUMNAS) --- */
.catalog-main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  /* Columna izquierda fija de 260px */
  gap: 40px;
}

/* --- FILTROS (IZQUIERDA) --- */
.catalog-filters-sidebar {
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  height: fit-content;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 0;
}

.clear-filters {
  font-size: 0.85rem;
  color: var(--primary-blue);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.clear-filters:hover {
  color: var(--dark-gray);
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.filter-group li {
  margin-bottom: 8px;
}

.filter-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--slate-gray);
  cursor: pointer;
  transition: var(--transition);
}

.filter-group label:hover {
  color: var(--primary-blue);
}

.filter-group input[type="checkbox"] {
  accent-color: var(--primary-blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* --- GRID DE PRODUCTOS (DERECHA) --- */
.catalog-product-area {
  width: 100%;
  flex: 1;
}

/* --- CONTENEDORES Y GRID DE CATÁLOGO A PANTALLA COMPLETA --- */
.catalog-section-wrapper {
  width: 100%;
  padding: 40px 4% 80px;
  background-color: #f8f9fa;
  box-sizing: border-box;
}

.catalog-center-wrapper {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.catalog-main-layout {
  width: 100%;
  display: block;
}

.product-card-full {
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}

.product-card-full:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 51, 102, 0.12);
  border-color: #b8d4f5;
}

.product-card-full:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
}

.product-card-full .prod-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.product-card-full:hover .prod-info h3 {
  color: var(--primary-blue);
}

.product-card-full a[onclick*="navigateTo"],
.product-card-full a[target="_blank"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.product-card-full:hover a[onclick*="navigateTo"],
.product-card-full:hover a[target="_blank"] {
  transform: translateX(4px);
  color: #003366 !important;
}

.prod-link {
  display: inline-block;
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
  align-self: flex-start;
  margin-top: auto;
}

.prod-link:hover {
  color: var(--dark-gray);
  transform: translateX(5px);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .catalog-main-layout {
    grid-template-columns: 1fr;
  }

  .catalog-filters-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .catalog-top-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box-wrapper {
    max-width: 100%;
  }

  .catalog-filters-sidebar {
    grid-template-columns: 1fr;
  }
}

/* --- ESTILO DE VISTA LISTA (IMAGEN IZQUIERDA, TEXTO DERECHA) --- */
.view-list .product-card-full {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 24px 30px !important;
  gap: 32px !important;
  width: 100% !important;
  min-width: unset !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  background: var(--white) !important;
  margin-bottom: 0 !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.view-list .product-card-full:hover {
  background: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px rgba(0, 51, 102, 0.08) !important;
  border-color: #b8d4f5 !important;
}

.view-list .prod-img {
  width: 260px !important;
  height: 180px !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 8px;
  background-color: #f8f9fa;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.view-list .prod-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
}

.view-list .prod-info h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.view-list .prod-desc {
  font-size: 1rem !important;
  color: var(--slate-gray) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

@media (max-width: 768px) {
  .view-list .product-card-full {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 15px !important;
  }

  .view-list .prod-img {
    width: 100% !important;
    height: 200px !important;
  }
}

.view-list .prod-link {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-top: 5px !important;
  color: var(--primary-blue) !important;
}

.view-list .prod-link:hover {
  color: var(--dark-gray) !important;
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA LA PÁGINA DE SERVICIOS              */
/* ====================================================== */

/* HERO DE SERVICIOS */
.services-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background:
    linear-gradient(rgba(6, 11, 20, 0.68), rgba(6, 11, 20, 0.78)),
    url("../imagenes/slide_5_main.png") center/cover no-repeat;
  padding: clamp(80px, 10vh, 130px) clamp(24px, 5vw, 80px);
  text-align: left;
  color: #ffffff;
  width: 100%;
}

.services-hero-content {
  width: 100%;
  max-width: 1080px;
}

.services-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: #ffffff;
}

.services-hero h1 span {
  color: #0099cc;
}

.services-hero p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}

.btn-services-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #0099cc;
  color: #ffffff;
  padding: 16px 36px;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 50px;
  border: 2px solid #0099cc;
  box-shadow: 0 8px 24px rgba(0, 153, 204, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-services-hero:hover {
  background-color: #0088b8;
  border-color: #0088b8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 153, 204, 0.45);
}

.btn-services-hero:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 153, 204, 0.25);
  transition: transform 0.1s ease-out;
}

/* GRID DE SERVICIOS */
.services-grid-section {
  padding: clamp(50px, 6vw, 90px) clamp(16px, 3.5vw, 60px);
  background-color: #f8fafc;
  text-align: center;
  width: 100%;
}

.services-grid-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 15px;
  color: var(--dark-gray);
}

.services-grid-header h2 span {
  color: #0099cc;
}

.services-grid-header p {
  color: var(--slate-gray);
  max-width: 760px;
  margin: 0 auto 55px;
  font-size: 1.1rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.services-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
}

.service-card-item {
  background: #ffffff;
  padding: 32px 28px;
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 153, 204, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.service-card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 153, 204, 0.12);
  border-color: rgba(0, 153, 204, 0.3);
}

.service-card-item:active {
  transform: scale(0.98);
  transition: transform 0.1s ease-out;
}

.service-icon {
  font-size: 2.5rem;
  color: #0099cc;
  margin-bottom: 15px;
}

.service-card-item h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.service-card-item p {
  color: var(--slate-gray);
  line-height: 1.65;
  font-size: 0.98rem;
  margin-bottom: 24px;
}

.btn-service-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0099cc;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.btn-service-card i {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-service-card:hover {
  color: #0077a3;
}

.btn-service-card:hover i {
  transform: translateX(4px);
}

.btn-service-card:active {
  transform: scale(0.96);
}

/* CTA FINAL CON CRISTAL TRASLÚCIDO APPLE */
.services-cta-section {
  background:
    linear-gradient(rgba(6, 11, 20, 0.75), rgba(6, 11, 20, 0.85)),
    url("../imagenes/banner_final.jpg") center/cover no-repeat;
  color: #ffffff;
  padding: 100px 10%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-cta-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.services-cta-section h2 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 20px;
  color: #ffffff;
}

.services-cta-section h2 span {
  color: #0099cc;
}

.services-cta-section p {
  max-width: 640px;
  margin: 0 auto 35px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  line-height: 1.6;
}

.btn-cta-services {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #0099cc;
  color: #ffffff;
  padding: 16px 38px;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 50px;
  border: 2px solid #0099cc;
  box-shadow: 0 8px 24px rgba(0, 153, 204, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}

.btn-cta-services:hover {
  background-color: #0088b8;
  border-color: #0088b8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 153, 204, 0.45);
}

.btn-cta-services:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 153, 204, 0.25);
  transition: transform 0.1s ease-out;
}

/* ====================================================== */
/* PÁGINA: MANUALES TÉCNICOS                              */
/* ====================================================== */

.manuales-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO DE DESCARGA --- */
.manuales-hero {
  background: linear-gradient(135deg, #f0f7fa 0%, #e2edf3 100%);
  padding: 100px 20px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 60px;
  border: 1px solid #e0e0e0;
}

.manuales-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.manuales-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 20px;
  line-height: 1.2;
}

.manuales-hero h1 span {
  color: var(--primary-blue);
}

.manuales-hero-desc {
  font-size: 1.2rem;
  color: var(--slate-gray);
  max-width: 650px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

.manuales-cta-box {
  display: inline-block;
  background: var(--white);
  padding: 30px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.btn-manual-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-blue);
}

.btn-manual-download:hover {
  background-color: transparent;
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 153, 204, 0.3);
}

.manuales-extra-info {
  margin-top: 15px;
  font-size: 0.85rem;
  color: var(--slate-gray);
}

/* --- CONTENIDO DEL MANUAL (GRID) --- */
.manuales-contenido {
  padding: 60px 20px;
  text-align: center;
}

.manuales-contenido-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.manuales-contenido-header h2 span {
  color: var(--primary-blue);
}

.manuales-contenido-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 50px;
  line-height: 1.6;
}

.manuales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.manual-item {
  background: var(--white);
  padding: 35px 25px;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-align: left;
  border-top: 4px solid transparent;
}

.manual-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.12);
  border-top-color: var(--primary-blue);
}

.manual-icon {
  font-size: 2rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.manual-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.manual-item p {
  color: var(--slate-gray);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* --- SECCIÓN DE VALOR --- */
.manuales-valor {
  background-color: var(--bg-light);
  padding: 80px 20px;
  text-align: center;
  border-radius: 20px;
}

.manuales-valor-content {
  max-width: 700px;
  margin: 0 auto;
}

.manuales-valor h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.manuales-valor h2 span {
  color: var(--primary-blue);
}

.manuales-valor p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.manuales-beneficios {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.manuales-beneficios li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--dark-gray);
  font-weight: 500;
}

.manuales-beneficios i {
  color: var(--primary-blue);
  font-size: 1.2rem;
}

/* --- CTA FINAL --- */
.manuales-cta-final {
  text-align: center;
  padding: 80px 20px;
}

.manuales-cta-final h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 30px;
}

.manuales-cta-final h2 span {
  color: var(--primary-blue);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .manuales-hero h1 {
    font-size: 2.2rem;
  }

  .manuales-hero-desc {
    font-size: 1rem;
  }

  .manuales-cta-box {
    padding: 20px 25px;
  }

  .btn-manual-download {
    padding: 14px 25px;
    font-size: 1rem;
  }

  .manuales-contenido-header h2 {
    font-size: 2rem;
  }

  .manuales-beneficios {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* PÁGINA: CALCULADORAS (Estilo Atlas Copco)              */
/* ====================================================== */

.calculadoras-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 100px;
}

/* HEADER DE LA PÁGINA */
.calc-header {
  text-align: center;
  margin-bottom: 50px;
}

.calc-header h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.calc-header p {
  font-size: 1.15rem;
  color: var(--slate-gray);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

/* GRID DE CALCULADORAS */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

/* TARJETA DE CALCULADORA */
.calc-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  height: 320px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.calc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 153, 204, 0.2);
}

.calc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  transition: filter 0.4s ease;
}

.calc-card:hover .calc-img {
  filter: brightness(0.45);
}

.calc-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.calc-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  line-height: 1.3;
  max-width: 80%;
}

.calc-arrow {
  background: var(--white);
  color: var(--dark-gray);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.calc-card:hover .calc-arrow {
  transform: translateX(4px);
}

/* CTA (Llamado a la acción) */
.calc-cta {
  text-align: center;
  margin: 40px 0 60px;
}

.btn-calc-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: var(--transition);
  text-decoration: none;
}

.btn-calc-cta:hover {
  background-color: var(--dark-gray);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* RECURSOS ADICIONALES */
.calc-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.resource-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  height: 180px;
  transition: transform 0.4s ease;
}

.resource-card:hover {
  transform: translateY(-5px);
}

.resource-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
}

.resource-content {
  position: absolute;
  bottom: 15px;
  left: 20px;
  right: 20px;
  z-index: 2;
}

.resource-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .calc-resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .calc-header h1 {
    font-size: 2.2rem;
  }

  .calc-grid {
    grid-template-columns: 1fr 1fr;
  }

  .calc-resources-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 1 (Landing Page)          */
/* ====================================================== */

.saber-mas-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
}

/* --- HERO --- */
.sm-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
    url("https://images.unsplash.com/photo-1581093588401-fbb62a02f120?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm-hero h1 span {
  color: var(--primary-blue);
}

.sm-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm-subtitle span {
  color: var(--primary-blue);
}

.sm-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- QUIÉNES SOMOS --- */
.sm-about {
  padding: 80px 10%;
}

.sm-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.sm-about-text h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.sm-about-text h2 span {
  color: var(--primary-blue);
}

.sm-about-text p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 25px;
}

.sm-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 30px;
}

.sm-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--dark-gray);
  font-weight: 600;
}

.sm-feature i {
  color: var(--primary-blue);
}

/* --- IMAGEN DE LA SECCIÓN --- */
.sm-about-image {
  display: flex;
  justify-content: center;
}

.sm-img-wrapper {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
}

.sm-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sm-img-wrapper:hover img {
  transform: scale(1.05);
}

/* --- VALORES --- */
.sm-values {
  padding: 80px 10%;
  background-color: var(--bg-light);
  text-align: center;
}

.sm-values-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 50px;
}

.sm-values-header h2 span {
  color: var(--primary-blue);
}

.sm-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.sm-value-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border-top: 4px solid transparent;
}

.sm-value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
  border-top-color: var(--primary-blue);
}

.sm-value-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm-value-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm-value-card p {
  color: var(--slate-gray);
  line-height: 1.7;
}

/* --- CTA FINAL --- */
.sm-cta {
  background-color: var(--black);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm-cta h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.sm-cta h2 span {
  color: var(--primary-blue);
}

.sm-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm-cta:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm-about-grid {
    grid-template-columns: 1fr;
  }

  .sm-values-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sm-hero h1 {
    font-size: 2.5rem;
  }

  .sm-subtitle {
    font-size: 1.8rem;
  }

  .sm-values-grid {
    grid-template-columns: 1fr;
  }

  .sm-features {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 2 (Ingeniería)            */
/* ====================================================== */

.saber-mas-wrapper-2 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO --- */
.sm2-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm2-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm2-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm2-hero h1 span {
  color: var(--primary-blue);
}

.sm2-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm2-subtitle span {
  color: var(--primary-blue);
}

.sm2-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm2-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm2-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- NUESTRO ENFOQUE (3 Pilares) --- */
.sm2-approach {
  padding: 80px 10%;
  background-color: var(--white);
  text-align: center;
}

.sm2-approach-header {
  margin-bottom: 60px;
}

.sm2-approach-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm2-approach-header h2 span {
  color: var(--primary-blue);
}

.sm2-approach-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm2-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.sm2-pillar {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 15px;
  background: #f9f9f9;
  transition: var(--transition);
  border-bottom: 4px solid transparent;
  position: relative;
}

.sm2-pillar:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
  border-bottom-color: var(--primary-blue);
}

.sm2-pillar-num {
  font-size: 3rem;
  font-weight: 800;
  color: rgba(0, 153, 204, 0.1);
  position: absolute;
  top: 10px;
  right: 20px;
}

.sm2-pillar-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm2-pillar h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm2-pillar p {
  color: var(--slate-gray);
  line-height: 1.7;
}

/* --- FLUJO DE TRABAJO --- */
.sm2-workflow {
  padding: 80px 10%;
  background-color: var(--bg-light);
}

.sm2-workflow-header {
  text-align: center;
  margin-bottom: 50px;
}

.sm2-workflow-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm2-workflow-header h2 span {
  color: var(--primary-blue);
}

.sm2-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.sm2-timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--primary-blue);
}

.sm2-step {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  position: relative;
  padding-left: 10px;
}

.sm2-step:last-child {
  margin-bottom: 0;
}

.sm2-step-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.sm2-step-content {
  background: var(--white);
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  flex: 1;
}

.sm2-step-content:hover {
  transform: translateX(5px);
  box-shadow: 0 10px 30px rgba(0, 153, 204, 0.1);
}

.sm2-step-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 5px;
}

.sm2-step-content p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --- ESTADÍSTICAS --- */
.sm2-stats {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 10%;
}

.sm2-stats-container {
  display: flex;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.sm2-stat-item {
  flex: 1;
}

.sm2-stat-num {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.sm2-stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: #aaa;
}

/* --- CTA FINAL --- */
.sm2-cta {
  background-color: var(--white);
  color: var(--dark-gray);
  padding: 100px 10%;
  text-align: center;
}

.sm2-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm2-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm2-cta h2 span {
  color: var(--primary-blue);
}

.sm2-cta p {
  color: var(--slate-gray);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm2-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm2-cta:hover {
  background-color: var(--dark-gray);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm2-pillars {
    grid-template-columns: 1fr 1fr;
  }

  .sm2-stats-container {
    flex-direction: column;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .sm2-hero h1 {
    font-size: 2.5rem;
  }

  .sm2-subtitle {
    font-size: 1.8rem;
  }

  .sm2-pillars {
    grid-template-columns: 1fr;
  }

  .sm2-stat-num {
    font-size: 3rem;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 3 (Suministro Tecnología) */
/* ====================================================== */

.saber-mas-wrapper-3 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO --- */
.sm3-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1581093588401-fbb62a02f120?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm3-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm3-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm3-hero h1 span {
  color: var(--primary-blue);
}

.sm3-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm3-subtitle span {
  color: var(--primary-blue);
}

.sm3-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm3-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm3-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- CATÁLOGO --- */
.sm3-catalog {
  padding: 80px 10%;
  background-color: var(--bg-light);
}

.sm3-catalog-header {
  text-align: center;
  margin-bottom: 50px;
}

.sm3-catalog-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm3-catalog-header h2 span {
  color: var(--primary-blue);
}

.sm3-catalog-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

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

.sm3-card {
  background: var(--white);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border-bottom: 4px solid transparent;
}

.sm3-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
  border-bottom-color: var(--primary-blue);
}

.sm3-card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.sm3-card-content {
  padding: 25px;
}

.sm3-card-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 10px;
}

.sm3-card-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm3-card-content p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.sm3-card-btn {
  display: inline-block;
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  transition: var(--transition);
}

.sm3-card-btn:hover {
  color: var(--dark-gray);
  transform: translateX(5px);
}

/* --- DISTRIBUIDOR ELGI --- */
.sm3-elgi {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 10%;
}

.sm3-elgi-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  gap: 50px;
}

.sm3-elgi-logo {
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--primary-blue);
  flex-shrink: 0;
}

.sm3-elgi-text h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.sm3-elgi-text h3 span {
  color: var(--primary-blue);
}

.sm3-elgi-text p {
  color: #ccc;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 25px;
}

.sm3-elgi-btn {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.sm3-elgi-btn:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
}

/* --- CTA FINAL --- */
.sm3-cta {
  background-color: var(--dark-gray);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm3-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm3-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm3-cta h2 span {
  color: var(--primary-blue);
}

.sm3-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm3-cta {
  display: inline-block;
  background-color: var(--white);
  color: var(--dark-gray);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm3-cta:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm3-elgi-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .sm3-hero h1 {
    font-size: 2.5rem;
  }

  .sm3-subtitle {
    font-size: 1.8rem;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 4 (Integración y Construcción) */
/* ====================================================== */

.saber-mas-wrapper-4 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO --- */
.sm4-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm4-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm4-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm4-hero h1 span {
  color: var(--primary-blue);
}

.sm4-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm4-subtitle span {
  color: var(--primary-blue);
}

.sm4-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm4-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm4-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- PROCESO EN 5 PASOS --- */
.sm4-steps {
  padding: 80px 10%;
  background-color: var(--bg-light);
  text-align: center;
}

.sm4-steps-header {
  margin-bottom: 50px;
}

.sm4-steps-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm4-steps-header h2 span {
  color: var(--primary-blue);
}

.sm4-steps-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm4-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.sm4-step-card {
  background: var(--white);
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid transparent;
}

.sm4-step-card:hover {
  transform: translateY(-10px);
  border-bottom-color: var(--primary-blue);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
}

.sm4-step-number {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(0, 153, 204, 0.1);
}

.sm4-step-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm4-step-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm4-step-card p {
  color: var(--slate-gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- SECCIÓN DIFERENCIAL --- */
.sm4-diff {
  padding: 80px 10%;
  background-color: var(--white);
  text-align: center;
}

.sm4-diff-header {
  margin-bottom: 50px;
}

.sm4-diff-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm4-diff-header h2 span {
  color: var(--primary-blue);
}

.sm4-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.sm4-diff-item {
  background: var(--bg-light);
  padding: 40px 30px;
  border-radius: 15px;
  transition: var(--transition);
  border-top: 4px solid transparent;
}

.sm4-diff-item:hover {
  border-top-color: var(--primary-blue);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sm4-diff-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm4-diff-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm4-diff-item p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- CTA FINAL --- */
.sm4-cta {
  background-color: var(--dark-gray);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm4-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm4-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm4-cta h2 span {
  color: var(--primary-blue);
}

.sm4-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm4-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm4-cta:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm4-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sm4-diff-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sm4-hero h1 {
    font-size: 2.5rem;
  }

  .sm4-subtitle {
    font-size: 1.8rem;
  }

  .sm4-steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sm4-diff-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 5 (Puesta en Marcha)      */
/* ====================================================== */

.saber-mas-wrapper-5 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO --- */
.sm5-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7)),
    url("https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm5-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm5-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm5-hero h1 span {
  color: var(--primary-blue);
}

.sm5-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm5-subtitle span {
  color: var(--primary-blue);
}

.sm5-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm5-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm5-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- PROCESO DE COMISIONAMIENTO --- */
.sm5-process {
  padding: 80px 10%;
  background-color: var(--bg-light);
}

.sm5-process-header {
  text-align: center;
  margin-bottom: 50px;
}

.sm5-process-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm5-process-header h2 span {
  color: var(--primary-blue);
}

.sm5-process-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm5-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.sm5-step {
  display: flex;
  gap: 25px;
  background: var(--white);
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border-left: 4px solid transparent;
  align-items: flex-start;
}

.sm5-step:hover {
  transform: translateX(10px);
  border-left-color: var(--primary-blue);
  box-shadow: 0 10px 30px rgba(0, 153, 204, 0.1);
}

.sm5-step-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-blue);
  min-width: 50px;
}

.sm5-step-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 5px;
}

.sm5-step-content p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --- CALIBRACIÓN --- */
.sm5-calibration {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 10%;
  text-align: center;
}

.sm5-calibration-content {
  max-width: 800px;
  margin: 0 auto;
}

.sm5-calibration h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm5-calibration h2 span {
  color: var(--primary-blue);
}

.sm5-calibration p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 40px;
}

.sm5-cal-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.sm5-cal-stat {
  text-align: center;
}

.sm5-cal-num {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.sm5-cal-label {
  font-size: 1rem;
  color: #aaa;
  font-weight: 500;
}

/* --- NUESTRA GARANTÍA --- */
.sm5-guarantee {
  background-color: var(--white);
  padding: 80px 10%;
  text-align: center;
}

.sm5-guarantee-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm5-guarantee h3 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.sm5-guarantee h3 span {
  color: var(--primary-blue);
}

.sm5-guarantee p {
  color: var(--slate-gray);
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.btn-sm5-guarantee {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm5-guarantee:hover {
  background-color: var(--dark-gray);
  color: var(--white);
  transform: translateY(-3px);
}

/* --- CTA FINAL --- */
.sm5-cta {
  background-color: var(--dark-gray);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm5-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm5-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm5-cta h2 span {
  color: var(--primary-blue);
}

.sm5-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm5-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm5-cta:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .sm5-hero h1 {
    font-size: 2.5rem;
  }

  .sm5-subtitle {
    font-size: 1.8rem;
  }

  .sm5-step-num {
    min-width: 30px;
  }

  .sm5-cal-stats {
    flex-direction: column;
    gap: 30px;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 6 (Soporte Técnico)       */
/* ====================================================== */

.saber-mas-wrapper-6 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO --- */
.sm6-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
    url("https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat fixed;
  padding: 150px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm6-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm6-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm6-hero h1 span {
  color: var(--primary-blue);
}

.sm6-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm6-subtitle span {
  color: var(--primary-blue);
}

.sm6-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm6-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm6-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- PILARES --- */
.sm6-pillars {
  padding: 80px 10%;
  background-color: var(--bg-light);
  text-align: center;
}

.sm6-pillars-header {
  margin-bottom: 50px;
}

.sm6-pillars-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm6-pillars-header h2 span {
  color: var(--primary-blue);
}

.sm6-pillars-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm6-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.sm6-pillar-item {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border-bottom: 4px solid transparent;
}

.sm6-pillar-item:hover {
  transform: translateY(-10px);
  border-bottom-color: var(--primary-blue);
  box-shadow: 0 15px 30px rgba(0, 153, 204, 0.15);
}

.sm6-pillar-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm6-pillar-item h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.sm6-pillar-item p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- HUD DE MONITOREO --- */
.sm6-hud {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 10%;
  text-align: center;
}

.sm6-hud-header {
  margin-bottom: 40px;
}

.sm6-hud-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 15px;
}

.sm6-hud-header h2 span {
  color: var(--primary-blue);
}

.sm6-hud-header p {
  color: #aaa;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm6-hud-container {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.sm6-hud-box {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(77, 216, 240, 0.3);
  border-radius: 14px;
  padding: 30px 30px 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.sm6-hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary-blue);
  opacity: 0.6;
}

.sm6-hud-corner.tl {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}

.sm6-hud-corner.tr {
  top: 8px;
  right: 8px;
  border-left: none;
  border-bottom: none;
}

.sm6-hud-corner.bl {
  bottom: 8px;
  left: 8px;
  border-right: none;
  border-top: none;
}

.sm6-hud-corner.br {
  bottom: 8px;
  right: 8px;
  border-left: none;
  border-top: none;
}

.sm6-hud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.sm6-hud-item {
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
}

.sm6-hud-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 5px;
}

.sm6-hud-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.sm6-hud-bar {
  height: 4px;
  background: var(--primary-blue);
  border-radius: 4px;
}

.sm6-hud-footer {
  text-align: right;
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: #555;
  font-family: "JetBrains Mono", monospace;
}

/* --- EQUIPO TÉCNICO --- */
.sm6-team {
  padding: 80px 10%;
  background-color: var(--white);
  text-align: center;
}

.sm6-team-header {
  margin-bottom: 40px;
}

.sm6-team-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm6-team-header h2 span {
  color: var(--primary-blue);
}

.sm6-team-header p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.sm6-team-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.sm6-team-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.sm6-team-feature i {
  color: var(--primary-blue);
  font-size: 1.5rem;
}

/* --- CTA FINAL --- */
.sm6-cta {
  background-color: var(--dark-gray);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm6-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm6-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm6-cta h2 span {
  color: var(--primary-blue);
}

.sm6-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm6-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm6-cta:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm6-pillars-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sm6-hero h1 {
    font-size: 2.5rem;
  }

  .sm6-subtitle {
    font-size: 1.8rem;
  }

  .sm6-pillars-grid {
    grid-template-columns: 1fr;
  }

  .sm6-hud-grid {
    grid-template-columns: 1fr;
  }

  .sm6-team-features {
    flex-direction: column;
    gap: 20px;
  }
}

/* ====================================================== */
/* PÁGINA: SABER MÁS DEL SLIDE 7 (Repuestos y Gestión)   */
/* ====================================================== */

.saber-mas-wrapper-7 {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO (Solo texto, sin imagen pesada) --- */
.sm7-hero {
  background: #0f172a;
  /* Azul muy oscuro, plano */
  padding: 140px 10% 100px;
  text-align: center;
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 60px;
}

.sm7-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 15px;
}

.sm7-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sm7-hero h1 span {
  color: var(--primary-blue);
}

.sm7-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm7-subtitle span {
  color: var(--primary-blue);
}

.sm7-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 40px;
}

.btn-sm7-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  border: 2px solid var(--primary-blue);
}

.btn-sm7-hero:hover {
  background-color: transparent;
  border-color: var(--white);
  transform: translateY(-3px);
}

/* --- ESTADÍSTICAS (Dashboard) --- */
.sm7-stats {
  padding: 60px 10%;
  background-color: var(--white);
}

.sm7-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.sm7-stat-card {
  background: #f8fafc;
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  border-left: 4px solid var(--primary-blue);
  transition: var(--transition);
}

.sm7-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.sm7-stat-number {
  display: block;
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.sm7-stat-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.sm7-stat-desc {
  color: var(--slate-gray);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* --- GESTIÓN DE ACTIVOS --- */
.sm7-assets {
  padding: 80px 10%;
  background-color: var(--bg-light);
}

.sm7-assets-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.sm7-assets-text h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm7-assets-text h2 span {
  color: var(--primary-blue);
}

.sm7-assets-text p {
  color: var(--slate-gray);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 25px;
}

.sm7-assets-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.sm7-assets-features div {
  background: var(--white);
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.sm7-assets-features i {
  color: var(--primary-blue);
  margin-right: 5px;
}

.sm7-assets-iconbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 60px 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.sm7-assets-iconbox i {
  font-size: 5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm7-assets-iconbox span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
}

/* --- FLUJO DE REPUESTOS --- */
.sm7-flow {
  padding: 80px 10%;
  background-color: var(--white);
  text-align: center;
}

.sm7-flow-header {
  margin-bottom: 50px;
}

.sm7-flow-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.sm7-flow-header h2 span {
  color: var(--primary-blue);
}

.sm7-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.sm7-flow-step {
  background: #f8fafc;
  padding: 30px 20px;
  border-radius: 12px;
  transition: var(--transition);
}

.sm7-flow-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background: var(--white);
}

.sm7-flow-icon {
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.sm7-flow-step h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.sm7-flow-step p {
  color: var(--slate-gray);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* --- CTA FINAL --- */
.sm7-cta {
  background-color: var(--dark-gray);
  color: var(--white);
  padding: 100px 10%;
  text-align: center;
}

.sm7-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.sm7-cta h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.sm7-cta h2 span {
  color: var(--primary-blue);
}

.sm7-cta p {
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn-sm7-cta {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-sm7-cta:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 153, 204, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .sm7-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .sm7-flow-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sm7-hero h1 {
    font-size: 2.5rem;
  }

  .sm7-subtitle {
    font-size: 1.8rem;
  }

  .sm7-stats-grid {
    grid-template-columns: 1fr;
  }

  .sm7-flow-grid {
    grid-template-columns: 1fr;
  }

  .sm7-assets-features {
    justify-content: center;
  }

  .sm7-assets-iconbox {
    padding: 40px 20px;
  }
}

/* ====================================================== */
/* PÁGINA: PRODUCTOS (HUB PRINCIPAL + CATÁLOGO)           */
/* ====================================================== */

.productos-wrapper {
  max-width: 100%;
  margin: 0 auto;
  background: var(--white);
}

/* --- HERO --- */
.prod-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
    url("/imagenes/product-landing-banner.png") center/cover no-repeat fixed;
  padding: 250px 10%;
  text-align: center;
  color: var(--white);
  border-bottom: 5px solid var(--primary-blue);
}

.prod-hero-content {
  max-width: 1800px;
  margin: 0 auto;
}

.prod-hero h1 {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 15px;
}

.prod-hero h1 span {
  color: var(--primary-blue);
}

.prod-hero p {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
}

/* --- MENÚ DE PESTAÑAS (TABS) --- */
.prod-tabs-container {
  background: var(--white);
  border-bottom: 2px solid #eee;
  padding: 0 10%;
}

.prod-tabs {
  display: flex;
  justify-content: center;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.prod-tab {
  padding: 20px 10px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--slate-gray);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  text-align: center;
  text-decoration: none;
  /* Quitar subrayado a los enlaces */
}

.prod-tab:hover {
  color: var(--dark-gray);
}

.prod-tab::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-blue);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.prod-tab.active {
  color: var(--dark-gray);
}

.prod-tab.active::after {
  transform: scaleX(1);
}

/* ====================================================== */
/* CSS EXCLUSIVO PARA EL GRID DE PRODUCTOS (ESTILO WEIR)  */
/* ====================================================== */

.catalog-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box-wrapper {
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  flex: 1;
  max-width: 400px;
  transition: var(--transition);
}

.search-box-wrapper:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.1);
}

.search-icon {
  color: var(--slate-gray);
  margin-right: 12px;
}

.catalog-search-input {
  border: none;
  outline: none;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--dark-gray);
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-count {
  font-size: 0.9rem;
  color: var(--slate-gray);
}

.view-toggle {
  display: flex;
  gap: 10px;
}

.view-toggle i {
  font-size: 1.2rem;
  color: #ccc;
  cursor: pointer;
  transition: var(--transition);
}

.view-toggle i:hover,
.view-toggle i.active-view {
  color: var(--primary-blue);
}

/* --- GRID DE PRODUCTOS (VISTA GRID Y VISTA LISTA) --- */
.product-grid-full {
  width: 100% !important;
  margin-bottom: 40px !important;
  transition: all 0.3s ease !important;
}

.product-grid-full.view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 30px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.product-grid-full.view-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* --- TARJETA DE PRODUCTO --- */
.product-card-full {
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Forzamos un ancho mínimo para que nunca se encojan */
  min-width: 300px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.product-card-full:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 51, 102, 0.12);
  border-color: #b8d4f5;
}

/* --- IMAGEN DEL PRODUCTO --- */
.prod-img {
  width: 100%;
  height: 200px;
  background-color: #fcfcfc;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: transform 0.5s ease;
}

.product-card-full:hover .prod-img {
  transform: scale(1.03);
}

.prod-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
  line-height: 1.3;
}

.prod-desc {
  font-size: 1rem;
  color: var(--slate-gray);
  line-height: 1.6;
  margin-bottom: 15px;
  flex: 1;
}

.prod-link {
  display: inline-block;
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
  align-self: flex-start;
  margin-top: auto;
}

.prod-link:hover {
  color: var(--dark-gray);
  transform: translateX(5px);
}

/* --- PAGINACIÓN --- */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.page-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--slate-gray);
  border: 1px solid #eee;
}

.page-arrow:hover:not(.disabled) {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

.page-arrow.disabled {
  opacity: 0.5;
  cursor: default;
}

.page-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 600;
  color: var(--slate-gray);
  cursor: pointer;
  transition: var(--transition);
}

.page-number:hover {
  color: var(--primary-blue);
}

.page-number.active {
  background: var(--primary-blue);
  color: var(--white);
}

/* ====================================================== */
/* CARRUSEL DE INDUSTRIAS CON DOTS                        */
/* ====================================================== */

.industry-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 60px;
  /* Espacio para los dots */
}

.industry-carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.industry-carousel-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.industry-slide {
  min-width: 20%;
  /* 3 imágenes visibles a la vez */
  height: 550px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.industry-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  aspect-ratio: 16 / 9;
}

.industry-slide:hover .industry-bg {
  transform: scale(1.08);
}

.industry-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: background 0.4s ease;
  color: var(--white);
}

.industry-slide:hover .industry-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.industry-overlay h3 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.industry-desc {
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.5;
  max-width: 300px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.industry-slide:hover .industry-desc {
  opacity: 1;
  transform: translateY(0);
}

.industry-link {
  color: #ff4d4d;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--transition);
}

.industry-link:hover {
  color: var(--white);
  transform: translateX(5px);
}

/* --- DOTS (Barritas de navegación) --- */
.industry-dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 10;
}

.industry-dots .dot {
  width: 55px;
  height: 6px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.industry-dots .dot.active {
  background: var(--primary-blue);
  width: 65px;
  box-shadow: 0 0 12px rgba(77, 139, 255, 0.5);
}

.industry-dots .dot:hover {
  background: var(--primary-blue);
  transform: scale(1.05);
}

/* --- VIDEO HERO --- */
.infra-section {
  background-color: #0f0f0f;
}

.video-wrapper {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.video-wrapper iframe {
  display: block;
  object-fit: cover;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .industry-slide {
    min-width: 50%;
    height: 300px;
  }

  .infra-section .col-lg-6 {
    min-height: 350px;
  }
}

@media (max-width: 768px) {
  .industry-slide {
    min-width: 100%;
    height: 250px;
  }

  .industry-dots .dot {
    width: 25px;
  }

  .infra-section .row {
    flex-direction: column-reverse;
  }

  .infra-section .col-lg-6 {
    padding: 30px !important;
    min-height: 300px;
  }

  .video-wrapper iframe {
    min-height: 300px;
  }
}

/* ====================================================== */
/* CTA FINAL - CSS PURO (MUEVE EL TEXTO A TU GUSTO)       */
/* ====================================================== */

/* --- Contenedor principal --- */
.cta-final-section {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  background-color: #0a0a0a;
}

/* --- Imagen de fondo --- */
.cta-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://images.unsplash.com/photo-1581093588401-fbb62a02f120?q=80&w=2070&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(0.4);
  z-index: 1;
}

/* --- Contenedor del texto --- */
.cta-content-box {
  position: absolute;
  z-index: 2;

  /* ================================================== */
  /* CAMBIA ESTOS NÚMEROS PARA MOVER EL TEXTO           */
  /* ================================================== */
  top: 50%;
  /* 50% = centro vertical. 40% = más arriba. 60% = más abajo */
  left: 7%;
  /* 5% = casi pegado a la izquierda. 20% = más al centro */
  /* ================================================== */

  transform: translateY(-50%);
  /* Mantiene el centrado vertical automático */
  max-width: 900px;
  color: #ffffff;
  padding: 20px;
}

/* --- Textos --- */
.cta-content-box h2 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-content-box h2 span {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
}

.cta-content-box p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #dddddd;
}

/* --- Botón --- */
.btn-cta-final {
  display: inline-block;
  background-color: #0099cc;
  color: #ffffff;
  padding: 16px 45px;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-cta-final:hover {
  background-color: #ffffff;
  color: #0099cc;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* --- Responsive para celulares --- */
@media (max-width: 768px) {
  .cta-content-box {
    left: 5%;
    width: 90%;
    max-width: 100%;
    top: 50%;
  }

  .cta-content-box h2 {
    font-size: 2rem;
  }
}

/* ====================================================== */
/* PÁGINA DE PRODUCTO: TORNILLO LUBRICADO                */
/* ====================================================== */

.prod-hero .btn-prod-hero {
  display: inline-block;
  background-color: rgb(255, 165, 0);
  color: var(--white);
  padding: 16px 45px;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  transition: var(--transition);
  text-decoration: none;
}

.prod-hero .btn-prod-hero:hover {
  background-color: var(--white);
  color: rgb(255, 165, 0);
}

.product-row-custom {
  background: var(--white);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.cta-producto .border-danger {
  border-color: #dc3545 !important;
}

/* ARTÍCULOS RELACIONADOS */
.related-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.related-card .card-body {
  background-color: #6c7a89 !important;
}

.related-products a {
  text-decoration: none;
}

/* =================================================================
   PRODUCTO — DETALLE
   Archivo: producto.css
   Depende de las variables definidas en style.css (--primary-blue,
   --dark-gray, --white, --slate-gray). Cárgalo DESPUÉS de style.css:
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/producto.css">
   ================================================================= */

.pdet-page {
  font-family: "Montserrat", sans-serif;
  color: var(--dark-gray);
  background-color: var(--white);
}

.pdet-page a {
  text-decoration: none;
}

/* ---------- BREADCRUMB ---------- */
.pdet-breadcrumb {
  padding: 20px 10%;
  border-bottom: 1px solid #eee;
}

.pdet-breadcrumb-inner {
  max-width: 1300px;
  margin: 0 auto;
  font-size: 0.85rem;
  color: var(--slate-gray);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdet-breadcrumb-inner a {
  color: var(--slate-gray);
  transition: var(--transition);
}

.pdet-breadcrumb-inner a:hover {
  color: var(--primary-blue);
}

.pdet-breadcrumb-inner strong {
  color: var(--dark-gray);
  font-weight: 600;
}

/* ---------- HERO DE PRODUCTO ---------- */
.pdet-hero {
  max-width: 1800px;
  margin: 0 auto;
  padding: 60px 10% 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.pdet-hero-info {
  flex: 1 1 420px;
}

.pdet-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 12px;
}

.pdet-hero-info h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.1;
  margin-bottom: 10px;
}

.pdet-subtitle {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 20px;
}

.pdet-hero-info p {
  color: var(--slate-gray);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 30px;
}

.pdet-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pdet-btn-primary,
.pdet-btn-dark,
.pdet-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 14px 32px;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.pdet-btn-primary:hover,
.pdet-btn-dark:hover,
.pdet-btn-download:hover {
  background-color: var(--dark-gray);
}

.pdet-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--dark-gray);
  padding: 14px 28px;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  border: 2px solid #ddd;
  transition: var(--transition);
}

.pdet-btn-outline:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.pdet-hero-image {
  flex: 1 1 420px;
  position: relative;
  display: flex;
  justify-content: center;
}

.pdet-hero-image img {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
}

.pdet-zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: none;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  color: var(--dark-gray);
  cursor: pointer;
  transition: var(--transition);
}

.pdet-zoom-btn:hover {
  background: var(--primary-blue);
  color: var(--white);
}

/* ---------- ESPECIFICACIONES RÁPIDAS ---------- */
.pdet-quickspecs {
  max-width: 1600px;
  margin: 0 auto;
  padding: 30px 10% 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.pdet-quickspec {
  flex: 1 1 220px;
  padding-left: 20px;
  border-left: 3px solid var(--primary-blue);
}

.pdet-quickspec h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 6px;
}

.pdet-quickspec p {
  color: var(--slate-gray);
  font-size: 1rem;
}

.pdet-quickspecs-link {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10% 60px;
}

.pdet-quickspecs-link a {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.pdet-quickspecs-link a:hover {
  gap: 10px;
}

/* ---------- LAYOUT: SIDEBAR + CONTENIDO ---------- */
.pdet-layout {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 10% 100px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  border-top: 1px solid #eee;
}

.pdet-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: 120px;
  padding-top: 50px;
}

.pdet-nav {
  display: flex;
  flex-direction: column;
  border-left: 2px solid #e5e5e5;
}

.pdet-nav a {
  padding: 10px 0 10px 20px;
  color: var(--slate-gray);
  font-weight: 600;
  font-size: 0.95rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: var(--transition);
}

.pdet-nav a:hover {
  color: var(--primary-blue);
}

.pdet-nav a.active {
  color: var(--primary-blue);
  border-left: 2px solid var(--primary-blue);
}

.pdet-contact-box {
  margin-top: 40px;
  background: var(--primary-blue);
  color: var(--white);
  padding: 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.pdet-contact-box:hover {
  background: var(--dark-gray);
}

.pdet-contact-box i {
  font-size: 1.3rem;
}

.pdet-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 50px;
}

/* ---------- SECCIONES GENERALES ---------- */
.pdet-section {
  padding-bottom: 90px;
  margin-bottom: 90px;
  border-bottom: 1px solid #eee;
  scroll-margin-top: 120px;
}

.pdet-section:last-child {
  border-bottom: none;
}

.pdet-section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-gray);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--primary-blue);
  display: inline-block;
  margin-bottom: 20px;
}

.pdet-section>h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 40px;
  max-width: 700px;
}

/* ---------- TEXTO + IMAGEN (Descripción) ---------- */
.pdet-text-image {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.pdet-text-image-text {
  flex: 1 1 280px;
}

.pdet-text-image-text p {
  color: var(--slate-gray);
  font-size: 1.05rem;
  line-height: 1.8;
}

.pdet-text-image-media {
  flex: 1 1 240px;
  text-align: center;
}

.pdet-text-image-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---------- GRID DE CARACTERÍSTICAS (4 checks con barra) ---------- */
.pdet-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 60px;
  margin-bottom: 60px;
}

.pdet-feature {
  position: relative;
  padding-left: 26px;
}

.pdet-feature i.fa-check-circle {
  position: absolute;
  top: 0;
  left: -14px;
  background: var(--white);
  color: var(--primary-blue);
  font-size: 1.6rem;
  z-index: 2;
}

.pdet-feature-bar {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--primary-blue);
  opacity: 0.35;
}

.pdet-feature h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 6px 0 14px;
}

.pdet-feature ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdet-feature li {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
  padding-left: 16px;
}

.pdet-feature li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-blue);
}

/* ---------- BANNER CTA ---------- */
.pdet-cta-banner {
  background: var(--slate-gray);
  color: var(--white);
  border-radius: 12px;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pdet-cta-banner p {
  font-size: 1.15rem;
  font-weight: 700;
  max-width: 500px;
}

.pdet-cta-banner .pdet-btn-dark {
  background: var(--primary-blue);
}

.pdet-cta-banner .pdet-btn-dark:hover {
  background: var(--white);
  color: var(--dark-gray);
}

/* ---------- VENTAJAS (intercalado) ---------- */
.pdet-advantage {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.pdet-advantage.reverse {
  flex-direction: row-reverse;
}

.pdet-advantage-text {
  flex: 1 1 280px;
  position: relative;
  padding-left: 26px;
}

.pdet-advantage-text .pdet-feature-bar {
  top: 10px;
}

.pdet-advantage-text h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.pdet-advantage-text h3 i {
  color: var(--primary-blue);
}

.pdet-advantage-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdet-advantage-text li {
  color: var(--slate-gray);
  font-size: 0.98rem;
  line-height: 1.6;
  position: relative;
  padding-left: 16px;
}

.pdet-advantage-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-blue);
}

.pdet-advantage-media {
  flex: 1 1 240px;
  text-align: center;
}

.pdet-advantage-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- ESPECIFICACIONES (tabla) ---------- */
.pdet-unit-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--slate-gray);
  margin-bottom: 30px;
}

.pdet-unit-toggle .active {
  color: var(--primary-blue);
}

.pdet-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.pdet-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pdet-slider {
  position: absolute;
  inset: 0;
  background: var(--primary-blue);
  border-radius: 34px;
  cursor: pointer;
  transition: var(--transition);
}

.pdet-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: var(--transition);
}

.pdet-switch input:checked+.pdet-slider::before {
  transform: translateX(20px);
}

.pdet-spec-table,
.pdet-download-table {
  width: 100%;
  border-collapse: collapse;
}

.pdet-spec-table th,
.pdet-download-table th {
  text-align: left;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-gray);
  padding: 14px 20px;
  border-bottom: 2px solid #eee;
}

.pdet-spec-table td,
.pdet-download-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  color: var(--dark-gray);
  font-size: 0.98rem;
}

.pdet-spec-table tr:nth-child(even) td,
.pdet-download-table tr:nth-child(even) td {
  background: #fafafa;
}

.pdet-btn-download {
  padding: 8px 20px;
  font-size: 0.85rem;
}

/* ---------- VISTA 3D ---------- */
.pdet-3d-viewer {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.2);
}

.pdet-3d-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  background: #f7f9fb;
  font-size: 0.9rem;
  color: var(--slate-gray);
}

.pdet-3d-toolbar strong {
  color: var(--dark-gray);
}

.pdet-3d-stage {
  position: relative;
  padding: 0px;
  text-align: center;
  background: var(--white);
}

.pdet-3d-stage img {
  max-width: 100%;
  height: auto;
}

.pdet-hotspot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 0 0 6px rgba(0, 153, 204, 0.2);
  cursor: pointer;
}

.pdet-3d-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--slate-gray);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
}

.pdet-3d-footer img {
  height: 26px;
}

/* ---------- TARJETAS (Relacionados) ---------- */
.pdet-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.pdet-card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.pdet-mini-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  position: relative;
  box-shadow: 0 15px 35px -20px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
  text-align: center;
}

.pdet-mini-card:hover {
  transform: translateY(-4px);
}

.pdet-mini-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  opacity: 0.85;
}

.pdet-mini-card span {
  display: block;
  padding: 20px;
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ---------- SERVICIOS---------- */
.pdet-mini-card-servicio {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  position: relative;
  box-shadow: 0 15px 35px -20px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
}

.pdet-mini-card-servicio:hover {
  transform: translateY(-4px);
}

.pdet-mini-card-servicio img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.pdet-mini-card-servicio span {
  display: block;
  padding: 20px;
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ---------- LECTURAS ADICIONALES (variante) ---------- */
.pdet-mini-card-lectura {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  position: relative;
  box-shadow: 0 15px 35px -20px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
}

.pdet-mini-card-lectura:hover {
  transform: translateY(-4px);
}

.pdet-mini-card-lectura img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  opacity: 0.85;
}

.pdet-mini-card-lectura span {
  display: block;
  padding: 20px;
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ---------- CONTÁCTENOS FINAL ---------- */
.pdet-contact-final {
  background: transparent;
  color: var(--white);
  text-align: center;
  padding: 100px 10%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.pdet-contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-image: url("../imagenes/banner_final.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
}

.pdet-contact-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Contenido */
.pdet-contact-final .pdet-content {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
}

/* Ajusta los estilos de texto */
.pdet-contact-final h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.pdet-contact-final p {
  max-width: 550px;
  margin: 0 auto 30px;
  opacity: 0.9;
}

.pdet-contact-final .pdet-btn-primary {
  background: var(--primary-blue);
  color: var(--white);
}

.pdet-contact-final .pdet-btn-primary:hover {
  background: var(--white);
  color: var(--primary-blue);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 992px) {
  .pdet-layout {
    flex-direction: column;
  }

  .pdet-sidebar {
    position: static;
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .pdet-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 10px;
    gap: 6px 20px;
  }

  .pdet-nav a {
    padding: 6px 0;
    border-left: none;
  }

  .pdet-nav a.active {
    border-left: none;
    border-bottom: 2px solid var(--primary-blue);
  }

  .pdet-contact-box {
    margin-top: 20px;
  }

  .pdet-content {
    padding-top: 30px;
  }

  .pdet-feature-grid {
    grid-template-columns: 1fr;
  }

  .pdet-advantage,
  .pdet-advantage.reverse {
    flex-direction: column;
  }

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

@media (max-width: 600px) {
  .pdet-hero-info h1 {
    font-size: 2.2rem;
  }

  .pdet-card-grid,
  .pdet-card-grid-4 {
    grid-template-columns: 1fr;
  }

  .pdet-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hotspots (si usas los nativos de model-viewer) */
.pdet-hotspot {
  display: block;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pdet-hotspot:hover {
  background: #0d6efd;
  transform: scale(1.1);
}

/* Asegurar que el contenedor tenga fondo blanco */
.pdet-3d-stage {
  background: #ffffff !important;
}

/* Modal de imagen */
.pdet-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.pdet-modal-content {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.5);
}

.pdet-modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.pdet-modal-close:hover {
  color: #bbb;
}

/* Fijar ancho de columnas para que no se desalineen */
.pdet-spec-table {
  table-layout: fixed;
  width: 100%;
}

.pdet-spec-table td:first-child {
  width: 40%;
}

.pdet-spec-table td:last-child {
  width: 60%;
}

/* =================================================================
   NUEVAS SECCIONES — VARIADOR DE FRECUENCIA (VFD) / DIAGRAMA DE
   FLUJO / CERTIFICACIONES Y PREMIOS
   ================================================================= */

/* ---------- VARIADOR DE FRECUENCIA (VFD) ---------- */
.pdet-vfd-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 50px;
  background: linear-gradient(135deg, #1a1d22 0%, #2b2f36 55%, #1a1d22 100%);
  border-radius: 18px;
  padding: 60px;
  overflow: hidden;
  isolation: isolate;
}

.pdet-vfd-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%,
      rgba(0, 153, 204, 0.35),
      transparent 55%),
    linear-gradient(100deg,
      transparent 40%,
      rgba(0, 153, 204, 0.12) 50%,
      transparent 60%);
  z-index: -1;
}

.pdet-vfd-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), transparent 70%);
}

.pdet-vfd-text {
  flex: 1 1 380px;
  color: var(--white);
  position: relative;
  z-index: 2;
}

.pdet-vfd-eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-blue-light, #4dd8f0);
  margin-bottom: 14px;
}

.pdet-vfd-text h3 {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 18px;
}

.pdet-vfd-text p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 26px;
}

.pdet-vfd-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
}

.pdet-vfd-badge i {
  color: var(--primary-blue);
}

.pdet-vfd-image {
  flex: 1 1 240px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.pdet-vfd-image img {
  max-width: 70%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

/* ---------- DIAGRAMA DE FLUJO ---------- */
.pdet-diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-bottom: 26px;
}

.pdet-diagram-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-gray);
}

.pdet-diagram-swatch {
  width: 22px;
  height: 10px;
  border-radius: 4px;
  display: inline-block;
}

.pdet-diagram-wrap {
  background: white;
  border-radius: 16px;
  padding: 20px;
  overflow-x: auto;
}

.pdet-diagram-wrap svg {
  width: 100%;
  height: auto;
  min-width: 720px;
  display: block;
  margin: 0 auto;
}

/* ---------- CERTIFICACIONES Y PREMIOS (franja de ancho completo) ---------- */
.pdet-trust-section {
  background: white;
  padding: 90px 10%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pdet-trust-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}

.pdet-trust-header .pdet-section-label {
  margin-left: auto;
  margin-right: auto;
}

.pdet-trust-header h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 14px;
}

.pdet-trust-header p {
  color: var(--slate-gray);
  font-size: 1rem;
  line-height: 1.7;
}

.pdet-cert-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto 60px;
}

.pdet-cert-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px 24px;
  min-width: 200px;
  transition: var(--transition);
}

.pdet-cert-chip:hover {
  border-color: var(--primary-blue);
  transform: translateY(-3px);
}

.pdet-cert-chip i {
  font-size: 1.5rem;
  color: var(--primary-blue);
  flex-shrink: 0;
}

.pdet-cert-chip-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--dark-gray);
  font-weight: 700;
}

.pdet-cert-chip-text span {
  font-size: 0.78rem;
  color: var(--slate-gray);
}

.pdet-award-card {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.18);
  flex-wrap: wrap;
}

.pdet-award-media {
  flex: 0 0 140px;
  text-align: center;
}

.pdet-award-media img {
  width: 100%;
  max-width: 140px;
  height: auto;
}

.pdet-award-text {
  flex: 1 1 320px;
}

.pdet-award-year {
  display: block;
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}

.pdet-award-text h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.pdet-award-text p {
  color: var(--slate-gray);
  line-height: 1.75;
  font-size: 0.98rem;
}

/* ---------- RESPONSIVE (nuevas secciones) ---------- */
@media (max-width: 768px) {
  .pdet-vfd-banner {
    flex-direction: column;
    padding: 40px 24px;
    text-align: center;
  }

  .pdet-vfd-text p {
    margin-left: auto;
    margin-right: auto;
  }

  .pdet-award-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .pdet-cert-chip {
    min-width: 100%;
  }
}

/* ============================================================
   PRODUCTO — TORNILLO OIL-FREE (estructura similar a lubricado)
   Basado en el diseño de producto-tornillo-lubricado
   ============================================================ */
/* ---------- BREADCRUMB (propio de oil-free) ---------- */
.pcat-breadcrumb {
  padding: 20px 10%;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
}

.pcat-breadcrumb-inner {
  max-width: 1300px;
  margin: 0 auto;
  font-size: 0.85rem;
  color: var(--slate-gray);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pcat-breadcrumb-inner a {
  color: var(--slate-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pcat-breadcrumb-inner a:hover {
  color: var(--primary-blue);
}

.pcat-breadcrumb-inner strong {
  color: var(--dark-gray);
  font-weight: 600;
}

.pcat-breadcrumb-inner span {
  color: var(--slate-gray);
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 600px) {
  .pcat-breadcrumb {
    padding: 12px 5%;
  }

  .pcat-breadcrumb-inner {
    font-size: 0.75rem;
    gap: 6px;
  }
}

/* ---------- HERO CON IMAGEN DE FONDO ---------- */
.pcat-hero {
  position: relative;
  padding: 40px 10%;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #dee2e6;
}

/* Overlay oscuro */
.pcat-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Contenido del hero (por encima del overlay) */
.pcat-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  color: var(--white);
}

.pcat-hero-content .pdet-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 12px;
}

.pcat-hero-content h1 {
  font-size: 3.8rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
}

.pcat-hero-content h1 span {
  color: #90caf9;
}

.pcat-hero-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 30px;
}

.pcat-hero-content .pdet-btn-primary {
  display: inline-block;
  background: var(--primary-blue);
  color: var(--white);
  padding: 14px 40px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.pcat-hero-content .pdet-btn-primary:hover {
  background: transparent;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
  .pcat-hero {
    padding: 60px 5%;
    min-height: 400px;
  }

  .pcat-hero-content h1 {
    font-size: 2rem;
  }
}

/* ---------- 2. SUB-MENÚ DE NAVEGACIÓN ---------- */
.pcat-tabs-wrap {
  background: var(--white);
  border-bottom: 1px solid #dee2e6;
}

.pcat-tabs {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.pcat-tab {
  flex: 1;
  text-align: center;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--slate-gray);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: none;
  font-size: 1.1rem;
}

.pcat-tab:hover {
  color: inherit;
  border-bottom-color: transparent;
  background: transparent;
  cursor: pointer;
}

.pcat-tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

/* ---------- 3. PRODUCTOS EN LISTA ALTERNADA ---------- */
.pcat-products {
  max-width: 2000px;
  margin: 0 auto;
  padding: 100px 10% 60px;
}

.pcat-product-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 70px;
  flex-wrap: wrap;
}

.pcat-product-row.reverse {
  flex-direction: row-reverse;
}

.pcat-product-media {
  flex: 1 1 300px;
  text-align: center;
}

.pcat-product-media img {
  max-width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}

.pcat-product-info {
  flex: 1 1 400px;
}

.pcat-product-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 8px;
}

.pcat-product-info h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 16px;
}

.pcat-product-info p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.pcat-product-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pcat-product-actions .pdet-btn-primary {
  background: var(--primary-blue);
  color: var(--white);
  padding: 10px 28px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  border: 2px solid transparent;
}

.pcat-product-actions .pdet-btn-primary:hover {
  background: transparent;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: none;
}

.pcat-link-contact {
  color: var(--primary-blue);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.pcat-link-contact:hover {
  text-decoration: underline;
}

/* ---------- 4. ¿POR QUÉ COMPRAR? (texto + imagen) ---------- */
.pcat-why {
  max-width: 1800px;
  margin: 0 auto;
  padding: 40px 10% 60px;
  border-top: 1px solid #dee2e6;
}

.pcat-why .pdet-text-image {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.pcat-why .pdet-text-image-text {
  flex: 1 1 400px;
}

.pcat-why .pdet-text-image-text .pdet-section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-gray);
  border-bottom: 3px solid var(--primary-blue);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.pcat-why-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.pcat-why .pdet-text-image-text p {
  color: var(--slate-gray);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.pcat-why .pdet-text-image-media {
  flex: 1 1 300px;
  text-align: center;
}

.pcat-why .pdet-text-image-media img {
  max-width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: contain;
}

/* ---------- CTA (estilo similar a lubricado) ---------- */
.pcat-cta-wrap {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 10%;
}

.pcat-cta-wrap .container {
  max-width: 100%;
  padding: 0;
}

.pcat-cta-wrap .border-primary {
  border-color: var(--primary-blue) !important;
}

.pcat-cta-wrap .text-primary {
  color: var(--primary-blue) !important;
}

/* Estilo base del botón con pdet-btn-primary */
.pcat-cta-wrap .pdet-btn-primary {
  background: var(--primary-blue);
  color: var(--white);
  border: 2px solid var(--primary-blue);
  padding: 14px 40px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Hover transparente con borde y texto celeste */
.pcat-cta-wrap .pdet-btn-primary:hover {
  background: transparent !important;
  color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

/* ---------- 6. ARTÍCULOS RELACIONADOS ---------- */
.pcat-related {
  max-width: 2000px;
  margin: 0 auto;
  padding: 40px 10% 80px;
  border-top: 1px solid #dee2e6;
}

.pcat-related .pdet-section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-gray);
  border-bottom: 3px solid var(--primary-blue);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 50px;
}

.pcat-related-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 30px;
}

.pcat-related .pdet-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pcat-related .pdet-mini-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 15px 35px -20px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
  text-decoration: none;
}

.pcat-related .pdet-mini-card:hover {
  transform: translateY(-4px);
}

.pcat-related .pdet-mini-card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  opacity: 0.85;
}

.pcat-related .pdet-mini-card span {
  display: block;
  padding: 20px;
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .pcat-hero h1 {
    font-size: 2.2rem;
  }

  .pcat-product-row {
    flex-direction: column;
    gap: 30px;
  }

  .pcat-product-row.reverse {
    flex-direction: column;
  }

  .pcat-why .pdet-text-image {
    flex-direction: column;
  }

  .pcat-why .pdet-text-image-media {
    order: -1;
  }

  .pcat-related .pdet-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pcat-cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .pcat-hero h1 {
    font-size: 1.8rem;
  }

  .pcat-hero {
    padding: 40px 5%;
  }

  .pcat-products {
    padding: 20px 5%;
  }

  .pcat-why {
    padding: 20px 5%;
  }

  .pcat-cta-wrap {
    padding: 0 5% 40px;
  }

  .pcat-related {
    padding: 20px 5% 40px;
  }

  .pcat-related .pdet-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   ESTILOS PÁGINA DE INGENIERÍA
   Rediseño con CSS Grid / Flexbox
   Archivo: css/servicio-ingenieria.css
   Requiere las variables globales de style.css
   (--primary-blue, --dark-gray, --slate-gray, etc.)
   ============================================= */

.engineering-page {
  font-family: "Montserrat", sans-serif;
  background: var(--white);
}

/* ---------- HERO ---------- */
.eng-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
  background-image: url("../imagenes/hero_ingenieria.webp");
  background-size: cover;
  background-position: center;
}

.eng-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.5) 55%,
      rgba(0, 0, 0, 0.3) 100%);
}

.eng-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: #ffffff;
}

.eng-hero-content .pdet-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 14px;
}

.eng-hero-content h1 {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.eng-hero-content h1 span {
  color: #90caf9;
}

.eng-hero-content p {
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 620px;
  margin-bottom: 32px;
}

.eng-hero-content .pdet-btn-primary {
  background: #ffffff;
  color: var(--dark-gray);
  padding: 16px 44px;
  font-weight: 700;
  border-radius: 50px;
  display: inline-block;
}

/* ---------- INTRO ---------- */
.eng-intro {
  padding: 90px 10%;
  background: #f8fafc;
}

.eng-intro-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.eng-intro-content .pdet-section-label {
  display: inline-block;
  border-bottom-color: var(--primary-blue);
}

.eng-intro-content h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin: 18px 0 28px;
  line-height: 1.25;
}

.eng-intro-content h2 span {
  color: var(--primary-blue);
}

/* Grid de 2 columnas para los párrafos de la filosofía: rompe la
   monotonía de un solo bloque de texto centrado */
.eng-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}

.eng-intro-grid p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--slate-gray);
  margin: 0;
}

/* ---------- PROYECTOS (contenedor general) ---------- */
.eng-project {
  padding: 90px 10%;
}

.eng-project--alt {
  background: #f8fafc;
}

.eng-project-inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* --- Encabezado del caso: GRID [número | texto] --- */
.eng-project-head {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  column-gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e5e9ee;
}

.eng-project-number {
  font-size: 5.2rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.16;
  line-height: 0.85;
}

.eng-project-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0f172a;
  background: #e2e8f0;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.eng-project-head-text h2 {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 14px;
  line-height: 1.25;
  max-width: 780px;
}

.eng-project-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--slate-gray);
  max-width: 720px;
  margin-bottom: 18px;
}

/* ---------- ENLACE AUTODESK ---------- */
.eng-autodesk-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: 1px solid #cbd5e1;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
}

.eng-autodesk-link:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.eng-autodesk-link::before {
  content: "\f1b3";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary-blue);
}

/* --- Cuerpo del caso: GRID [reto | soluciones] --- */
.eng-project-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 50px;
  align-items: start;
  margin-bottom: 56px;
}

.eng-challenge {
  background: #f1f5f9;
  padding: 30px 32px;
  border-radius: 12px;
  border-left: 4px solid var(--primary-blue);
}

.eng-challenge-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 8px;
}

.eng-challenge p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate-gray);
  margin: 0;
}

/* Soluciones en grid 2x2 (o 2x1 cuando hay solo 2 elementos) */
.eng-solutions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}

.eng-solution {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: start;
}

.eng-solution-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.eng-solution h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 0 0 6px 0;
}

.eng-solution p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--slate-gray);
  margin: 0;
}

/* --- Galería: GRID asimétrico de 2 imágenes --- */
.eng-gallery {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}

.eng-gallery-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.25);
}

.eng-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

/* ---------- CTA ---------- */
.eng-cta {
  padding: 90px 10%;
  background: #0f172a;
  color: #ffffff;
  text-align: center;
}

.eng-cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.eng-cta-content h2 {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}

.eng-cta-content h2 span {
  color: #90caf9;
}

.eng-cta-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 30px;
}

.eng-cta-content .pdet-btn-primary {
  background: #ffffff;
  color: #0f172a;
  padding: 16px 48px;
  font-weight: 700;
  border-radius: 50px;
  display: inline-block;
  font-size: 1.05rem;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 992px) {
  .eng-hero-content h1 {
    font-size: 2.6rem;
  }

  .eng-hero-content p {
    font-size: 1.05rem;
  }

  .eng-project-head {
    grid-template-columns: 70px 1fr;
    column-gap: 20px;
  }

  .eng-project-number {
    font-size: 3.4rem;
  }

  .eng-project-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .eng-solutions {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .eng-gallery {
    grid-template-columns: 1fr;
  }

  .eng-gallery-item img {
    min-height: 220px;
  }
}

@media (max-width: 650px) {
  .eng-hero {
    min-height: 70vh;
    padding: 0 6%;
  }

  .eng-hero-content h1 {
    font-size: 2.1rem;
  }

  .eng-hero-content p {
    font-size: 1rem;
  }

  .eng-intro,
  .eng-project,
  .eng-cta {
    padding: 56px 6%;
  }

  .eng-intro-content h2 {
    font-size: 1.9rem;
  }

  .eng-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eng-project-head {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .eng-project-number {
    font-size: 2.4rem;
    opacity: 0.25;
  }

  .eng-project-head-text h2 {
    font-size: 1.6rem;
  }

  .eng-challenge {
    padding: 22px;
  }

  .eng-cta-content h2 {
    font-size: 1.9rem;
  }
}

/* ================================================================ */
/* ESTILOS – DISEÑO RADICAL CON GRIDS, FLEXBOX, BLOQUES DE COLOR   */
/* ================================================================ */

/* ================================================================ */
/* PROYECTOS LLAVE EN MANO – DISEÑO TÉCNICO DE ALTA PRECISIÓN       */
/* Layout bento, galerías proporcionales, métricas y visor lightbox */
/* ================================================================ */

/* ---------- HERO PROYECTOS ---------- */
.prj-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 130px 8% 90px;
  background: #070d17;
  overflow: hidden;
}

.prj-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../imagenes/hero_proyectos.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.85);
}

.prj-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 23, 0.9) 0%, rgba(7, 13, 23, 0.75) 100%);
  z-index: 2;
}

.prj-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.prj-hero-kicker {
  display: none !important;
}

.prj-hero-kicker i {
  font-size: 0.85rem;
}

.prj-hero-title {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 900;
  line-height: 1.08;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
  max-width: 900px;
}

.prj-hero-title span {
  color: var(--primary-blue-light, #4dd8f0);
  background: linear-gradient(135deg, #ffffff 30%, #4dd8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prj-hero-desc {
  font-size: 1.18rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  max-width: 720px;
  margin-bottom: 34px;
}

.prj-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.prj-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-blue, #0099cc);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: var(--transition, all 0.3s ease);
  box-shadow: 0 10px 25px -6px rgba(0, 153, 204, 0.5);
}

.prj-btn-primary:hover {
  background: #0088b6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -6px rgba(0, 153, 204, 0.6);
}

.prj-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: var(--transition, all 0.3s ease);
  backdrop-filter: blur(6px);
}

.prj-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

.prj-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 950px;
}

.prj-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prj-hero-stat-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary-blue-light, #4dd8f0);
  line-height: 1;
}

.prj-hero-stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ---------- ESTRUCTURA DE CADA PROYECTO ---------- */
.prj-section {
  padding: clamp(45px, 5vw, 85px) clamp(16px, 3.5vw, 60px);
  background: #ffffff;
  width: 100%;
}

.prj-section--alt {
  background: #f8fafc;
}

.prj-inner {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
}

/* Encabezado del proyecto */
.prj-header {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 46px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 34px;
}

.prj-section--alt .prj-header {
  border-bottom-color: #cbd5e1;
}

.prj-number {
  font-family: "JetBrains Mono", monospace;
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--primary-blue, #0099cc);
  opacity: 0.14;
  line-height: 0.8;
  letter-spacing: -0.05em;
  user-select: none;
}

.prj-header-info {
  display: flex;
  flex-direction: column;
}

.prj-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.prj-sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue, #0099cc);
  background: rgba(0, 153, 204, 0.1);
  border: 1px solid rgba(0, 153, 204, 0.25);
  padding: 4px 14px;
  border-radius: 50px;
}

.prj-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}

.prj-location-chip i {
  color: #ef4444;
}

.prj-title {
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  font-weight: 800;
  color: var(--dark-gray, #0f172a);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.prj-subtitle {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #64748b;
  max-width: 850px;
  margin: 0;
}

/* Resumen Ejecutivo: 2 Columnas (Desafío vs Solución y Métricas) */
.prj-overview-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) 1.25fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-bottom: 50px;
}

/* Columna Izquierda: El Desafío */
.prj-challenge-card {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-left: 5px solid #e11d48;
  border-radius: 16px;
  padding: 32px 28px;
}

.prj-section--alt .prj-challenge-card {
  background: #ffffff;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.06);
}

.prj-card-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e11d48;
  margin-bottom: 14px;
}

.prj-challenge-desc {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 22px;
}

.prj-issue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prj-issue-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

.prj-issue-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: #e11d48;
  background: rgba(225, 29, 72, 0.1);
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.prj-issue-item strong {
  color: #0f172a;
}

/* Columna Derecha: Solución & Métricas */
.prj-solution-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Tarjetas de Métricas KPI */
.prj-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.prj-kpi-box {
  background: linear-gradient(145deg, #0f172a, #1e293b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prj-kpi-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--primary-blue-light, #4dd8f0);
  line-height: 1;
  margin-bottom: 6px;
}

.prj-kpi-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

/* Bloque de Soluciones Técnicas */
.prj-sol-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid var(--primary-blue, #0099cc);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.06);
}

.prj-section--alt .prj-sol-box {
  background: #ffffff;
}

.prj-sol-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue, #0099cc);
  margin-bottom: 18px;
}

.prj-sol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 26px;
}

.prj-sol-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

.prj-sol-item i {
  color: var(--primary-blue, #0099cc);
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.prj-sol-item strong {
  display: block;
  color: #0f172a;
  margin-bottom: 2px;
}

/* Pills de Alcance */
.prj-scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.prj-scope-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-right: 6px;
}

.prj-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
}

.prj-scope-pill i {
  color: var(--primary-blue, #0099cc);
  font-size: 0.78rem;
}

/* ================================================================ */
/* GALERÍAS FOTOGRÁFICAS BENTO Y TARJETAS INTERACTIVAS               */
/* ================================================================ */

.prj-gallery-block {
  margin-top: 40px;
}

.prj-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 16px;
}

.prj-gallery-title-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prj-gallery-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-blue, #0099cc);
}

.prj-gallery-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--dark-gray, #0f172a);
  margin: 0;
  letter-spacing: -0.015em;
}

.prj-gallery-hint {
  font-size: 0.84rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prj-gallery-hint i {
  color: var(--primary-blue, #0099cc);
}

/* Tarjeta individual de imagen */
.prj-img-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.22);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}

.prj-img-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px -14px rgba(0, 153, 204, 0.35);
}

.prj-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.prj-img-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.prj-img-card:hover img {
  transform: scale(1.05);
}

/* Overlay permanente inferior para proteger legibilidad */
.prj-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(6, 11, 20, 0.94) 0%,
      rgba(6, 11, 20, 0.5) 36%,
      rgba(6, 11, 20, 0.08) 65%,
      transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
  transition: background 0.35s ease;
}

.prj-img-card:hover .prj-card-overlay {
  background: linear-gradient(to top,
      rgba(6, 11, 20, 0.97) 0%,
      rgba(6, 11, 20, 0.6) 42%,
      rgba(6, 11, 20, 0.15) 75%,
      transparent 100%);
}

.prj-card-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 153, 204, 0.85);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 7px;
  backdrop-filter: blur(4px);
}

.prj-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.prj-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-blue-light, #4dd8f0);
  opacity: 0.9;
  transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.prj-img-card:hover .prj-card-action {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------- */
/* CUADRÍCULAS ESPECÍFICAS SEGÚN LAS PROPORCIONES DE CADA PROYECTO */
/* ------------------------------------------------------------- */

/* PROYECTO 1: HAYDUK (4 fotos: 1 panorámica + 3 equilibradas) */
.prj-grid-p1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.prj-grid-p1 .prj-span-2 {
  grid-column: span 2;
  height: 380px;
}

.prj-grid-p1 .prj-card-p1-compresor {
  grid-column: span 1;
  height: 380px;
}

.prj-grid-p1 .prj-card-p1-manifold {
  grid-column: span 1;
  height: 340px;
}

.prj-grid-p1 .prj-card-p1-caseta {
  grid-column: span 2;
  height: 340px;
}

/* PROYECTO 2: HAUG (6 fotos: 3 equipos arriba + 3 infraestructura abajo) */
.prj-grid-p2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.prj-grid-p2 .prj-img-card {
  height: 340px;
}

/* PROYECTO 3: NALTECH (6 fotos verticales 3:4 / 9:16) */
/* Cero recortes: altura generosa para capturar el 100% de los equipos verticales */
.prj-grid-p3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.prj-grid-p3 .prj-img-card {
  height: 420px;
}

/* PROYECTO 4: INTERPERÚ (5 fotos: 3 arriba + 1 panorámica 16:9 y 1 vertical abajo) */
.prj-grid-p4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.prj-grid-p4 .prj-card-p4-top {
  height: 370px;
}

.prj-grid-p4 .prj-card-p4-manifold {
  grid-column: span 2;
  height: 350px;
}

.prj-grid-p4 .prj-card-p4-taller {
  grid-column: span 1;
  height: 350px;
}

/* ================================================================ */
/* CIERRE: PROYECTOS LLAVE EN MANO                                  */
/* ================================================================ */
.prj-closing {
  padding: 110px 8%;
  background: radial-gradient(circle at 50% 20%, #152238 0%, #080f1a 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.prj-closing::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 153, 204, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.prj-closing-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.prj-closing-badge {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-blue-light, #4dd8f0);
  background: rgba(77, 216, 240, 0.12);
  border: 1px solid rgba(77, 216, 240, 0.28);
  padding: 6px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.prj-closing h2 {
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.prj-closing h2 span {
  color: var(--primary-blue-light, #4dd8f0);
}

.prj-closing-desc {
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto 40px;
  max-width: 720px;
}

.prj-closing-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 46px;
}

.prj-closing-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.prj-closing-step i {
  color: var(--primary-blue-light, #4dd8f0);
  font-size: 0.85rem;
}

.prj-closing-arrow {
  color: var(--primary-blue-light, #4dd8f0);
  font-size: 1.2rem;
  opacity: 0.8;
}

.prj-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ================================================================ */
/* VISOR LIGHTBOX INTERACTIVO                                       */
/* ================================================================ */
.prj-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(5, 10, 18, 0.95);
  backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.prj-lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.prj-lightbox-container {
  position: relative;
  max-width: 1100px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: prjZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes prjZoomIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.prj-lightbox-img-holder {
  position: relative;
  max-width: 100%;
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000000;
}

.prj-lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.prj-lightbox-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #ffffff;
}

.prj-lightbox-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prj-lightbox-project {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-blue-light, #4dd8f0);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.prj-lightbox-caption {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.prj-lightbox-counter {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

/* Botones de navegación y cierre */
.prj-lightbox-close {
  position: absolute;
  top: -45px;
  right: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.prj-lightbox-close:hover {
  background: #e11d48;
  border-color: #e11d48;
  transform: rotate(90deg);
}

.prj-lightbox-btn-prev,
.prj-lightbox-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.prj-lightbox-btn-prev {
  left: -65px;
}

.prj-lightbox-btn-next {
  right: -65px;
}

.prj-lightbox-btn-prev:hover,
.prj-lightbox-btn-next:hover {
  background: var(--primary-blue, #0099cc);
  border-color: var(--primary-blue, #0099cc);
  transform: translateY(-50%) scale(1.1);
}

/* ================================================================ */
/* COMPATIBILIDAD CON CLASES ANTERIORES                             */
/* ================================================================ */
.project {
  padding: 100px 8%;
  background: #ffffff;
}

.project--alt {
  background: #f8fafc;
}

.project-inner {
  max-width: 1360px;
  margin: 0 auto;
}

/* ================================================================ */
/* RESPONSIVE DESIGN                                                */
/* ================================================================ */
@media (max-width: 1200px) {
  .prj-grid-p3 .prj-img-card {
    height: 380px;
  }

  .prj-lightbox-btn-prev {
    left: 10px;
  }

  .prj-lightbox-btn-next {
    right: 10px;
  }
}

@media (max-width: 992px) {
  .prj-hero {
    padding: 120px 6% 70px;
  }

  .prj-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .prj-section {
    padding: 70px 6%;
  }

  .prj-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .prj-number {
    font-size: 3.8rem;
  }

  .prj-overview-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .prj-sol-grid {
    grid-template-columns: 1fr;
  }

  /* Bento Grids a 2 columnas en tablets */
  .prj-grid-p1 {
    grid-template-columns: repeat(2, 1fr);
  }

  .prj-grid-p1 .prj-span-2 {
    grid-column: span 2;
    height: 320px;
  }

  .prj-grid-p1 .prj-card-p1-compresor {
    grid-column: span 1;
    height: 300px;
  }

  .prj-grid-p1 .prj-card-p1-manifold {
    grid-column: span 1;
    height: 300px;
  }

  .prj-grid-p1 .prj-card-p1-caseta {
    grid-column: span 2;
    height: 300px;
  }

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

  .prj-grid-p2 .prj-img-card {
    height: 300px;
  }

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

  .prj-grid-p3 .prj-img-card {
    height: 360px;
  }

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

  .prj-grid-p4 .prj-card-p4-top {
    height: 320px;
  }

  .prj-grid-p4 .prj-card-p4-manifold {
    grid-column: span 2;
    height: 300px;
  }

  .prj-grid-p4 .prj-card-p4-taller {
    grid-column: span 2;
    height: 300px;
  }
}

@media (max-width: 650px) {
  .prj-hero {
    min-height: auto;
    padding: 100px 5% 60px;
  }

  .prj-hero-title {
    font-size: 2.3rem;
  }

  .prj-hero-desc {
    font-size: 1rem;
  }

  .prj-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .prj-hero-stat-num {
    font-size: 1.8rem;
  }

  .prj-section {
    padding: 50px 5%;
  }

  .prj-kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .prj-closing {
    padding: 70px 5%;
  }

  .prj-closing-steps {
    flex-direction: column;
    gap: 10px;
  }

  .prj-closing-arrow {
    transform: rotate(90deg);
  }

  /* Bento Grids a 1 columna en smartphones */
  .prj-grid-p1,
  .prj-grid-p2,
  .prj-grid-p3,
  .prj-grid-p4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .prj-grid-p1 .prj-span-2,
  .prj-grid-p1 .prj-card-p1-compresor,
  .prj-grid-p1 .prj-card-p1-manifold,
  .prj-grid-p1 .prj-card-p1-caseta,
  .prj-grid-p2 .prj-img-card,
  .prj-grid-p3 .prj-img-card,
  .prj-grid-p4 .prj-card-p4-top,
  .prj-grid-p4 .prj-card-p4-manifold,
  .prj-grid-p4 .prj-card-p4-taller {
    grid-column: span 1;
    height: 280px;
  }

  .prj-grid-p3 .prj-img-card {
    height: 360px;
    /* Mantener altura adecuada para equipos verticales */
  }

  .prj-lightbox-modal {
    padding: 15px;
  }

  .prj-lightbox-btn-prev,
  .prj-lightbox-btn-next {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .prj-lightbox-close {
    top: -38px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .prj-lightbox-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ================================================================ */
/* AUDITORÍA – ESTILOS RADICALES                                   */
/* Grids, flexbox, asimetría, imágenes grandes, sin símbolos      */
/* ================================================================ */

/* ---------- HERO ---------- */
.audit-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
  background-image: url("../imagenes/auditoria_hero.png");
  background-size: cover;
  background-position: center;
}

.audit-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.audit-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.audit-hero-content {
  max-width: 700px;
  color: #fff;
}

.audit-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 12px;
}

.audit-hero-content h1 {
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.audit-hero-content h1 span {
  color: #90caf9;
}

.audit-hero-content p {
  font-size: 1.3rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 600px;
  margin-bottom: 2rem;
}

.audit-hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.audit-stat {
  display: flex;
  flex-direction: column;
}

.audit-stat span:first-child {
  font-size: 2.4rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.02em;
}

.audit-stat span:last-child {
  font-size: 0.85rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.audit-hero-quote {
  max-width: 280px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  border-right: 4px solid #90caf9;
  padding-right: 24px;
}

/* ---------- COSTOS OCULTOS ---------- */
.audit-costs {
  padding: 80px 10%;
  background: #f8fafc;
}

.audit-costs-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.audit-costs-text {
  flex: 1 1 500px;
}

.audit-section-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.audit-costs-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.audit-costs-text h2 span {
  color: var(--primary-blue);
  font-size: 3.2rem;
}

.audit-costs-text p {
  font-size: 0.95rem;
  color: var(--slate-gray);
  font-style: italic;
}

.audit-costs-image {
  flex: 1 1 500px;
}

.audit-costs-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

/* ---------- PILARES – GRID ---------- */
.audit-pillars {
  padding: 80px 10%;
}

.audit-pillars-header {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.audit-pillars-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-top: 8px;
}

.audit-pillars-header h2 span {
  color: var(--primary-blue);
}

.audit-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.audit-pillar {
  padding: 40px 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, 0.08);
  border-top: 6px solid var(--primary-blue);
  transition: transform 0.3s ease;
}

.audit-pillar:hover {
  transform: translateY(-6px);
}

.audit-pillar--alt {
  border-top-color: #0f172a;
}

.audit-pillar-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 12px;
}

.audit-pillar h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.audit-pillar p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate-gray);
  margin-bottom: 20px;
}

.audit-pillar-line {
  width: 40px;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 2px;
}

/* ---------- BLOQUES ASIMÉTRICOS ---------- */
.audit-block {
  padding: 80px 10%;
}

.audit-block--alt {
  background: #f8fafc;
}

.audit-block-inner {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  flex-wrap: wrap;
}

.audit-block-inner--reverse {
  flex-direction: row-reverse;
}

.audit-block-image {
  flex: 1 1 500px;
}

.audit-block-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

.audit-block-text {
  flex: 1 1 500px;
}

.audit-block-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  background: rgba(13, 110, 253, 0.08);
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.audit-block-text h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.audit-block-text h2 span {
  color: var(--primary-blue);
}

.audit-block-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--slate-gray);
  margin-bottom: 16px;
}

.audit-block-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.audit-block-text ul li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-gray);
  border-bottom: 1px solid #f1f5f9;
}

.audit-block-text ul li:last-child {
  border-bottom: none;
}

.audit-block-text ul li span {
  font-weight: 600;
  color: var(--dark-gray);
}

.audit-block-data {
  display: flex;
  gap: 40px 60px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 2px solid #e2e8f0;
}

.audit-data-item {
  display: flex;
  flex-direction: column;
}

.audit-data-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary-blue);
  letter-spacing: -0.03em;
  line-height: 1;
}

.audit-data-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-gray);
  margin-top: 4px;
}

/* ---------- IMPACTO ---------- */
.audit-impact {
  padding: 80px 10%;
  background: #0f172a;
  color: #fff;
}

.audit-impact-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.audit-impact-text {
  flex: 1 1 500px;
}

.audit-impact-text .audit-section-label {
  color: #90caf9;
  border-bottom-color: #90caf9;
}

.audit-impact-text h2 {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.1;
}

.audit-impact-text h2 span {
  color: #90caf9;
}

.audit-impact-text p {
  font-size: 1.15rem;
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: 30px;
}

.audit-impact-highlight {
  display: inline-block;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.audit-impact-number {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.03em;
}

.audit-impact-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.audit-impact-image {
  flex: 1 1 500px;
}

.audit-impact-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
}

/* ---------- CTA ---------- */
.audit-cta {
  padding: 80px 10%;
  background: var(--primary-blue);
  color: #fff;
  text-align: center;
}

.audit-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.audit-cta-inner h2 {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.1;
}

.audit-cta-inner h2 span {
  color: #90caf9;
}

.audit-cta-inner p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.audit-cta-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: 30px;
}

.audit-cta-divider {
  opacity: 0.3;
}

.audit-cta-inner .pdet-btn-primary {
  background: #fff;
  color: var(--primary-blue);
  padding: 16px 48px;
  font-weight: 700;
  border-radius: 50px;
  display: inline-block;
  font-size: 1.1rem;
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.3s;
}

.audit-cta-inner .pdet-btn-primary:hover {
  background: #e2e8f0;
  transform: scale(1.02);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .audit-hero-content h1 {
    font-size: 3.5rem;
  }

  .audit-hero-quote {
    display: none;
  }

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

  .audit-block-inner {
    flex-direction: column;
  }

  .audit-block-inner--reverse {
    flex-direction: column;
  }

  .audit-impact-inner {
    flex-direction: column;
  }

  .audit-costs-inner {
    flex-direction: column;
  }

  .audit-block-image img {
    height: 350px;
  }

  .audit-impact-image img {
    height: 300px;
  }
}

@media (max-width: 650px) {
  .audit-hero {
    min-height: 70vh;
    padding: 0 5%;
  }

  .audit-hero-content h1 {
    font-size: 2.6rem;
  }

  .audit-hero-content p {
    font-size: 1rem;
  }

  .audit-hero-stats {
    gap: 20px;
  }

  .audit-stat span:first-child {
    font-size: 1.8rem;
  }

  .audit-costs {
    padding: 40px 5%;
  }

  .audit-costs-text h2 {
    font-size: 2rem;
  }

  .audit-costs-text h2 span {
    font-size: 2.2rem;
  }

  .audit-costs-image img {
    height: 250px;
  }

  .audit-pillars {
    padding: 40px 5%;
  }

  .audit-pillars-grid {
    grid-template-columns: 1fr;
  }

  .audit-pillars-header h2 {
    font-size: 2rem;
  }

  .audit-block {
    padding: 40px 5%;
  }

  .audit-block-text h2 {
    font-size: 1.8rem;
  }

  .audit-block-image img {
    height: 250px;
  }

  .audit-data-number {
    font-size: 2rem;
  }

  .audit-impact {
    padding: 40px 5%;
  }

  .audit-impact-text h2 {
    font-size: 2.4rem;
  }

  .audit-impact-image img {
    height: 220px;
  }

  .audit-cta {
    padding: 40px 5%;
  }

  .audit-cta-inner h2 {
    font-size: 2.2rem;
  }

  .audit-cta-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ================================================================ */
/* SOPORTE 24/7 – ESTILOS RADICALES                                */
/* Grids, flexbox, asimetría, imágenes grandes, sin símbolos      */
/* ================================================================ */

/* ---------- HERO ---------- */
.support-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
  background-image: url("../imagenes/soporte_hero.jpg");
  background-size: cover;
  background-position: center;
}

.support-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.support-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.support-hero-content {
  max-width: 700px;
  color: #fff;
}

.support-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 12px;
}

.support-hero-content h1 {
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.support-hero-content h1 span {
  color: #90caf9;
}

.support-hero-content p {
  font-size: 1.3rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 600px;
  margin-bottom: 2rem;
}

.support-hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.support-stat {
  display: flex;
  flex-direction: column;
}

.support-stat span:first-child {
  font-size: 2.4rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.02em;
}

.support-stat span:last-child {
  font-size: 0.85rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.support-hero-quote {
  max-width: 280px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  border-right: 4px solid #90caf9;
  padding-right: 24px;
}

/* ---------- EL DESAFÍO ---------- */
.support-challenge {
  padding: 80px 10%;
  background: #f8fafc;
}

.support-challenge-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.support-challenge-text {
  flex: 1 1 500px;
}

.support-section-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.support-challenge-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.support-challenge-text h2 span {
  color: var(--primary-blue);
}

.support-challenge-text p {
  font-size: 1.05rem;
  color: var(--slate-gray);
}

.support-challenge-image {
  flex: 1 1 500px;
}

.support-challenge-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

/* ---------- PILARES – GRID ---------- */
.support-pillars {
  padding: 80px 10%;
}

.support-pillars-header {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.support-pillars-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-top: 8px;
}

.support-pillars-header h2 span {
  color: var(--primary-blue);
}

.support-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.support-pillar {
  padding: 40px 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, 0.08);
  border-top: 6px solid var(--primary-blue);
  transition: transform 0.3s ease;
}

.support-pillar:hover {
  transform: translateY(-6px);
}

.support-pillar--alt {
  border-top-color: #0f172a;
}

.support-pillar-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 12px;
}

.support-pillar h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.support-pillar p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate-gray);
  margin-bottom: 20px;
}

.support-pillar-line {
  width: 40px;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 2px;
}

/* ---------- BLOQUES ASIMÉTRICOS ---------- */
.support-block {
  padding: 80px 10%;
}

.support-block--alt {
  background: #f8fafc;
}

.support-block-inner {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  flex-wrap: wrap;
}

.support-block-inner--reverse {
  flex-direction: row-reverse;
}

.support-block-image {
  flex: 1 1 500px;
}

.support-block-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

.support-block-text {
  flex: 1 1 500px;
}

.support-block-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  background: rgba(13, 110, 253, 0.08);
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.support-block-text h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.support-block-text h2 span {
  color: var(--primary-blue);
}

.support-block-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--slate-gray);
  margin-bottom: 16px;
}

.support-block-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.support-block-text ul li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-gray);
  border-bottom: 1px solid #f1f5f9;
}

.support-block-text ul li:last-child {
  border-bottom: none;
}

.support-block-text ul li span {
  font-weight: 600;
  color: var(--dark-gray);
}

.support-block-data {
  display: flex;
  gap: 40px 60px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 2px solid #e2e8f0;
}

.support-data-item {
  display: flex;
  flex-direction: column;
}

.support-data-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary-blue);
  letter-spacing: -0.03em;
  line-height: 1;
}

.support-data-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-gray);
  margin-top: 4px;
}

/* ---------- MÉTRICAS – GRID ---------- */
.support-metrics {
  padding: 80px 10%;
  background: #0f172a;
  color: #fff;
  text-align: center;
}

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

.support-metrics-inner .support-section-label {
  color: #90caf9;
  border-bottom-color: #90caf9;
}

.support-metrics-inner h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 20px 0 50px;
}

.support-metrics-inner h2 span {
  color: #90caf9;
}

.support-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.support-metric {
  display: flex;
  flex-direction: column;
}

.support-metric-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.03em;
  line-height: 1;
}

.support-metric-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 8px;
}

/* ---------- CTA ---------- */
.support-cta {
  padding: 80px 10%;
  background: var(--primary-blue);
  color: #fff;
  text-align: center;
}

.support-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.support-cta-inner h2 {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.1;
}

.support-cta-inner h2 span {
  color: #90caf9;
}

.support-cta-inner p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.support-cta-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: 30px;
}

.support-cta-divider {
  opacity: 0.3;
}

.support-cta-inner .pdet-btn-primary {
  background: #fff;
  color: var(--primary-blue);
  padding: 16px 48px;
  font-weight: 700;
  border-radius: 50px;
  display: inline-block;
  font-size: 1.1rem;
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.3s;
}

.support-cta-inner .pdet-btn-primary:hover {
  background: #e2e8f0;
  transform: scale(1.02);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .support-hero-content h1 {
    font-size: 3.5rem;
  }

  .support-hero-quote {
    display: none;
  }

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

  .support-block-inner {
    flex-direction: column;
  }

  .support-block-inner--reverse {
    flex-direction: column;
  }

  .support-challenge-inner {
    flex-direction: column;
  }

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

  .support-block-image img {
    height: 350px;
  }
}

@media (max-width: 650px) {
  .support-hero {
    min-height: 70vh;
    padding: 0 5%;
  }

  .support-hero-content h1 {
    font-size: 2.6rem;
  }

  .support-hero-content p {
    font-size: 1rem;
  }

  .support-hero-stats {
    gap: 20px;
  }

  .support-stat span:first-child {
    font-size: 1.8rem;
  }

  .support-challenge {
    padding: 40px 5%;
  }

  .support-challenge-text h2 {
    font-size: 2rem;
  }

  .support-challenge-image img {
    height: 250px;
  }

  .support-pillars {
    padding: 40px 5%;
  }

  .support-pillars-grid {
    grid-template-columns: 1fr;
  }

  .support-pillars-header h2 {
    font-size: 2rem;
  }

  .support-block {
    padding: 40px 5%;
  }

  .support-block-text h2 {
    font-size: 1.8rem;
  }

  .support-block-image img {
    height: 250px;
  }

  .support-data-number {
    font-size: 2rem;
  }

  .support-metrics {
    padding: 40px 5%;
  }

  .support-metrics-inner h2 {
    font-size: 2rem;
  }

  .support-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .support-metric-number {
    font-size: 2.5rem;
  }

  .support-cta {
    padding: 40px 5%;
  }

  .support-cta-inner h2 {
    font-size: 2.2rem;
  }

  .support-cta-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ================================================================ */
/* RENTAL SOLUTIONS – ESTILOS RADICALES                            */
/* Grids, flexbox, asimetría, imágenes grandes, sin símbolos      */
/* ================================================================ */

/* ---------- HERO ---------- */
.rental-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
  background-image: url("https://images.unsplash.com/photo-1581093588401-fbb62a02f120?q=80&w=2070&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}

.rental-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.rental-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rental-hero-content {
  max-width: 700px;
  color: #fff;
}

.rental-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 12px;
}

.rental-hero-content h1 {
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.rental-hero-content h1 span {
  color: #90caf9;
}

.rental-hero-content p {
  font-size: 1.3rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 600px;
  margin-bottom: 2rem;
}

.rental-hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.rental-stat {
  display: flex;
  flex-direction: column;
}

.rental-stat span:first-child {
  font-size: 2.4rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.02em;
}

.rental-stat span:last-child {
  font-size: 0.85rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rental-hero-quote {
  max-width: 280px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  border-right: 4px solid #90caf9;
  padding-right: 24px;
}

/* ---------- FLEXIBILIDAD ---------- */
.rental-flexibility {
  padding: 80px 10%;
  background: #f8fafc;
}

.rental-flexibility-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.rental-flexibility-text {
  flex: 1 1 500px;
}

.rental-section-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.rental-flexibility-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.rental-flexibility-text h2 span {
  color: var(--primary-blue);
}

.rental-flexibility-text p {
  font-size: 1.05rem;
  color: var(--slate-gray);
}

.rental-flexibility-image {
  flex: 1 1 500px;
}

.rental-flexibility-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

/* ---------- VENTAJAS – GRID ---------- */
.rental-advantages {
  padding: 80px 10%;
}

.rental-advantages-header {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.rental-advantages-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-top: 8px;
}

.rental-advantages-header h2 span {
  color: var(--primary-blue);
}

.rental-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.rental-advantage {
  padding: 40px 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, 0.08);
  border-top: 6px solid var(--primary-blue);
  transition: transform 0.3s ease;
}

.rental-advantage:hover {
  transform: translateY(-6px);
}

.rental-advantage--alt {
  border-top-color: #0f172a;
}

.rental-advantage-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 12px;
}

.rental-advantage h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.rental-advantage p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate-gray);
  margin-bottom: 20px;
}

.rental-advantage-line {
  width: 40px;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 2px;
}

/* ---------- BLOQUE FLOTA ---------- */
.rental-block {
  padding: 80px 10%;
  background: #f8fafc;
}

.rental-block-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.rental-block-image {
  flex: 1 1 500px;
}

.rental-block-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25);
}

.rental-block-text {
  flex: 1 1 500px;
}

.rental-block-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  background: rgba(13, 110, 253, 0.08);
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.rental-block-text h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 16px;
}

.rental-block-text h2 span {
  color: var(--primary-blue);
}

.rental-block-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--slate-gray);
  margin-bottom: 16px;
}

.rental-block-data {
  display: flex;
  gap: 40px 60px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 2px solid #e2e8f0;
}

.rental-data-item {
  display: flex;
  flex-direction: column;
}

.rental-data-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary-blue);
  letter-spacing: -0.03em;
  line-height: 1;
}

.rental-data-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-gray);
  margin-top: 4px;
}

/* ---------- ESCENARIOS – GRID ---------- */
.rental-scenarios {
  padding: 80px 10%;
}

.rental-scenarios-header {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.rental-scenarios-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-top: 8px;
}

.rental-scenarios-header h2 span {
  color: var(--primary-blue);
}

.rental-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.rental-scenario {
  padding: 30px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, 0.08);
  border-bottom: 4px solid var(--primary-blue);
  transition: transform 0.3s ease;
}

.rental-scenario:hover {
  transform: translateY(-4px);
}

.rental-scenario--alt {
  border-bottom-color: #0f172a;
}

.rental-scenario-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.15;
  line-height: 1;
  margin-bottom: 8px;
}

.rental-scenario h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.rental-scenario p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--slate-gray);
  margin: 0;
}

/* ---------- GARANTÍA ---------- */
.rental-guarantee {
  padding: 80px 10%;
  background: #0f172a;
  color: #fff;
}

.rental-guarantee-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.rental-guarantee-text {
  flex: 1 1 500px;
}

.rental-guarantee-text .rental-section-label {
  color: #90caf9;
  border-bottom-color: #90caf9;
}

.rental-guarantee-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

.rental-guarantee-text h2 span {
  color: #90caf9;
}

.rental-guarantee-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: 30px;
}

.rental-guarantee-highlight {
  display: inline-block;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.rental-guarantee-number {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: #90caf9;
  letter-spacing: -0.03em;
}

.rental-guarantee-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.rental-guarantee-image {
  flex: 1 1 500px;
}

.rental-guarantee-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
}

/* ---------- CTA ---------- */
.rental-cta {
  padding: 80px 10%;
  background: var(--primary-blue);
  color: #fff;
  text-align: center;
}

.rental-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.rental-cta-inner h2 {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.1;
}

.rental-cta-inner h2 span {
  color: #90caf9;
}

.rental-cta-inner p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.rental-cta-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: 30px;
}

.rental-cta-divider {
  opacity: 0.3;
}

.rental-cta-inner .pdet-btn-primary {
  background: #fff;
  color: var(--primary-blue);
  padding: 16px 48px;
  font-weight: 700;
  border-radius: 50px;
  display: inline-block;
  font-size: 1.1rem;
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.3s;
}

.rental-cta-inner .pdet-btn-primary:hover {
  background: #e2e8f0;
  transform: scale(1.02);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .rental-hero-content h1 {
    font-size: 3.5rem;
  }

  .rental-hero-quote {
    display: none;
  }

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

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

  .rental-block-inner {
    flex-direction: column;
  }

  .rental-flexibility-inner {
    flex-direction: column;
  }

  .rental-guarantee-inner {
    flex-direction: column;
  }

  .rental-block-image img {
    height: 350px;
  }

  .rental-guarantee-image img {
    height: 300px;
  }
}

@media (max-width: 650px) {
  .rental-hero {
    min-height: 70vh;
    padding: 0 5%;
  }

  .rental-hero-content h1 {
    font-size: 2.6rem;
  }

  .rental-hero-content p {
    font-size: 1rem;
  }

  .rental-hero-stats {
    gap: 20px;
  }

  .rental-stat span:first-child {
    font-size: 1.8rem;
  }

  .rental-flexibility {
    padding: 40px 5%;
  }

  .rental-flexibility-text h2 {
    font-size: 2rem;
  }

  .rental-flexibility-image img {
    height: 250px;
  }

  .rental-advantages {
    padding: 40px 5%;
  }

  .rental-advantages-grid {
    grid-template-columns: 1fr;
  }

  .rental-advantages-header h2 {
    font-size: 2rem;
  }

  .rental-block {
    padding: 40px 5%;
  }

  .rental-block-text h2 {
    font-size: 1.8rem;
  }

  .rental-block-image img {
    height: 250px;
  }

  .rental-data-number {
    font-size: 2rem;
  }

  .rental-scenarios {
    padding: 40px 5%;
  }

  .rental-scenarios-grid {
    grid-template-columns: 1fr;
  }

  .rental-scenarios-header h2 {
    font-size: 2rem;
  }

  .rental-guarantee {
    padding: 40px 5%;
  }

  .rental-guarantee-text h2 {
    font-size: 2rem;
  }

  .rental-guarantee-image img {
    height: 220px;
  }

  .rental-cta {
    padding: 40px 5%;
  }

  .rental-cta-inner h2 {
    font-size: 2.2rem;
  }

  .rental-cta-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* =================================================================
   REDISEÑO — SOBRE NOSOTROS (grid intercalado)
   ================================================================= */
.about-grid-section {
  padding: 100px 10%;
  background-color: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 50px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

.about-media {
  grid-column: 1 / 7;
  position: relative;
}

.about-media-inner {
  height: 420px;
  background: url("../imagenes/about_me_main.png") center/cover;
  border-radius: 10px;
  box-shadow:
    0 30px 70px -25px rgba(0, 153, 204, 0.4),
    20px 20px 0px var(--primary-blue);
  transition: var(--transition);
}

.about-media-inner:hover {
  transform: translate(-5px, -5px);
  box-shadow:
    0 40px 90px -20px rgba(0, 153, 204, 0.55),
    25px 25px 0px var(--dark-gray);
}

.about-copy {
  grid-column: 7 / 13;
  margin-top: 90px;
}

.about-copy h2 {
  font-size: 2.5rem;
  color: var(--dark-gray);
}

.about-copy h2 span {
  color: var(--primary-blue);
}

.about-copy p {
  color: var(--slate-gray);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* =================================================================
   REDISEÑO — CATÁLOGO (grid intercalado / zigzag)
   ================================================================= */
.catalog-interleave {
  max-width: 1300px;
  margin: 0 auto;
}

.catalog-interleave-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 60px;
  align-items: start;
  margin-bottom: 110px;
}

.catalog-interleave-item:last-child {
  margin-bottom: 0;
}

.catalog-interleave-media {
  grid-column: 1 / 7;
  height: 380px;
  background-color: var(--white);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  box-shadow: 0 25px 55px -30px rgba(0, 0, 0, 0.18);
}

.catalog-interleave-info {
  grid-column: 7 / 13;
  margin-top: 70px;
}

/* Producto 2: se invierte el orden y el escalonado, generando el
   efecto de columnas intercaladas (zigzag) */
.catalog-interleave-item.reverse .catalog-interleave-media {
  grid-column: 7 / 13;
  margin-top: 70px;
}

.catalog-interleave-item.reverse .catalog-interleave-info {
  grid-column: 1 / 7;
  margin-top: 0;
}

.catalog-interleave-info h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--dark-gray);
}

.catalog-interleave-info p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-bottom: 25px;
}

/* =================================================================
   TESTIMONIOS
   ================================================================= */
.testimonials-section {
  padding: 100px 10%;
  background-color: #f9f9f9;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--white);
  border-radius: 14px;
  padding: 40px 34px;
  box-shadow: 0 20px 50px -35px rgba(0, 0, 0, 0.2);
}

.testimonial-quote-icon {
  font-size: 1.6rem;
  color: var(--primary-blue);
  opacity: 0.35;
  margin-bottom: 18px;
  display: block;
}

.testimonial-text {
  color: var(--dark-gray);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 22px;
  min-height: 130px;
}

.testimonial-stars {
  color: #f5a623;
  font-size: 0.85rem;
  margin-bottom: 22px;
  letter-spacing: 3px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-author-info strong {
  color: var(--dark-gray);
  font-size: 0.95rem;
}

.testimonial-author-info span {
  color: var(--slate-gray);
  font-size: 0.82rem;
}

/* =================================================================
   PREGUNTAS FRECUENTES (FAQ) — acordeón
   ================================================================= */
.faq-section {
  padding: 100px 10%;
  background-color: var(--white);
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #e5e5e5;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 26px 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--dark-gray);
}

.faq-question:hover {
  color: var(--primary-blue);
}

.faq-icon {
  flex-shrink: 0;
  color: var(--primary-blue);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  color: var(--slate-gray);
  font-size: 0.98rem;
  line-height: 1.75;
  padding: 0 4px 26px;
  max-width: 760px;
}

/* =================================================================
   RESPONSIVE — SOBRE NOSOTROS / CATÁLOGO / TESTIMONIOS / FAQ
   ================================================================= */
@media (max-width: 992px) {

  .about-grid,
  .catalog-interleave-item,
  .catalog-interleave-item.reverse {
    grid-template-columns: 1fr;
  }

  .about-media,
  .about-copy,
  .catalog-interleave-media,
  .catalog-interleave-info,
  .catalog-interleave-item.reverse .catalog-interleave-media,
  .catalog-interleave-item.reverse .catalog-interleave-info {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .about-copy {
    margin-top: 40px;
  }

  .catalog-interleave-item.reverse .catalog-interleave-info {
    order: 2;
    margin-top: 30px;
  }

  .catalog-interleave-item.reverse .catalog-interleave-media {
    order: 1;
  }

  .catalog-interleave-info {
    margin-top: 30px;
  }

  .catalog-interleave-item {
    margin-bottom: 70px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 650px) {

  .about-grid-section,
  .testimonials-section,
  .faq-section {
    padding: 60px 6%;
  }

  .about-media-inner {
    height: 280px;
  }

  .catalog-interleave-media {
    height: 240px;
  }

  .faq-question {
    font-size: 0.98rem;
  }
}

/* =================================================================
   REDISEÑO CORPORATIVO — MAIN (DREYBACK)
   Añadido por encima de los estilos base para dar look corporativo.
   Respeto total de textos e imágenes existentes.
   ================================================================= */

/* --- HERO: kicker superior de marca --- */
.hero-slider {
  position: relative;
}

.hero-kicker {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(6, 11, 20, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(77, 216, 240, 0.25);
  padding: 10px 26px;
  border-radius: 50px;
  color: var(--ice, #f3f9fc);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-kicker-line {
  width: 26px;
  height: 1px;
  background: var(--primary-blue-light, #4dd8f0);
}

/* --- HERO: etiqueta técnica flotante --- */
.hero-tag {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 153, 204, 0.92);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 20px 45px -15px rgba(0, 153, 204, 0.7);
}

.hero-tag i {
  font-size: 1.1rem;
}

.slide-content {
  position: relative;
}

/* --- HERO: botón con flecha --- */
.btn-slider {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-slider i {
  transition: transform 0.3s ease;
  font-size: 0.85em;
}

.btn-slider:hover i {
  transform: translateX(6px);
}

/* =================================================================
   SOBRE NOSOTROS — layout grid corporativo asimétrico
   ================================================================= */
.about-grid-section {
  padding: 110px 10%;
  background-color: var(--white);
  position: relative;
}

.about-corpo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 60px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}

.about-media-block {
  grid-column: 1 / 7;
  position: relative;
  z-index: 1;
}

.about-media-block::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 100%;
  height: 100%;
  background: var(--primary-blue);
  border-radius: 12px;
  z-index: 0;
}

.about-media-inner {
  position: relative;
  z-index: 1;
  height: 460px;
  background: url("../imagenes/about_me_main.png") center/cover;
  border-radius: 12px;
  box-shadow: 0 30px 70px -25px rgba(0, 153, 204, 0.4);
  transition: transform 0.6s var(--ease-blur, ease);
}

.about-media-block:hover .about-media-inner {
  transform: translateY(-10px);
}

.about-media-meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  background: var(--deep-navy, #060b14);
  color: var(--white);
  padding: 16px 24px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 25px 55px -20px rgba(0, 0, 0, 0.5);
}

.about-meta-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary-blue-light, #4dd8f0);
}

.about-meta-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.about-copy-block {
  grid-column: 7 / 13;
}

.about-copy-block h2 {
  font-size: 2.6rem;
  line-height: 1.15;
  color: var(--dark-gray);
  margin-bottom: 22px;
}

.about-copy-block h2 span {
  color: var(--primary-blue);
}

.about-copy-block p {
  color: var(--slate-gray);
  font-size: 1.08rem;
  line-height: 1.85;
  margin-bottom: 22px;
}

.about-brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(91, 103, 119, 0.25);
}

.about-logo {
  height: 38px;
  width: auto;
}

.about-brand-divider {
  width: 1px;
  height: 38px;
  background: rgba(91, 103, 119, 0.35);
}

.about-brand-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-gray);
}

/* =================================================================
   INGENIERÍA — cabecera de fila + lead
   ================================================================= */
.eng-section {
  position: relative;
}

.eng-head-row {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto 56px;
  text-align: center;
}

.eng-head-row .eyebrow {
  justify-content: center;
}

.eng-head-row h2 {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 18px;
}

.eng-head-row h2 span {
  color: var(--primary-blue-light, #4dd8f0);
}

.eng-lead {
  color: #b7c4d6;
  line-height: 1.85;
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 820px;
}

/* =================================================================
   PROCESO — diagrama + panel lateral numerado
   ================================================================= */
.process-stage {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1480px;
  margin: 50px auto 40px;
  text-align: left;
}

.process-stage .process-card {
  margin: 0;
  max-width: none;
  width: 100%;
}

.process-stage .process-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.process-aside {
  position: relative;
  background: linear-gradient(160deg, var(--navy-panel, #0e1a2b), var(--deep-navy, #060b14));
  color: var(--white);
  border-radius: 16px;
  padding: 44px 36px;
  border: 1px solid rgba(77, 216, 240, 0.18);
  overflow: hidden;
}

.process-aside::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(0, 153, 204, 0.35), transparent 70%);
}

.process-aside-index {
  font-family: "JetBrains Mono", monospace;
  font-size: 4rem;
  font-weight: 800;
  color: rgba(77, 216, 240, 0.15);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.process-aside h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.process-aside p {
  color: #c3d1e2;
  line-height: 1.7;
  font-size: 0.98rem;
  margin-bottom: 24px;
}

.process-aside-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.process-aside-tags span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-blue-light, #4dd8f0);
  border: 1px solid rgba(77, 216, 240, 0.35);
  border-radius: 50px;
  padding: 7px 14px;
  background: rgba(77, 216, 240, 0.07);
}

/* =================================================================
   CATÁLOGO — etiqueta de ítem
   ================================================================= */
.catalog-item-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-blue);
  border: 1px solid rgba(0, 153, 204, 0.3);
  border-radius: 50px;
  padding: 6px 14px;
  margin-bottom: 16px;
  background: rgba(0, 153, 204, 0.06);
}

/* =================================================================
   CATÁLOGO — grid de columnas (tarjetas alineadas)
   ================================================================= */
.catalog-section {
  background-color: var(--white);
}

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: stretch;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(0, 153, 204, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -38px rgba(0, 60, 90, 0.3);
  transition:
    transform 0.6s var(--ease-blur, ease),
    box-shadow 0.6s var(--ease-blur, ease);
}

.catalog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 45px 90px -30px rgba(0, 60, 90, 0.4);
}

.catalog-card-media {
  position: relative;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(600px 300px at 50% 20%,
      rgba(77, 216, 240, 0.18),
      transparent 65%),
    linear-gradient(165deg, var(--ice, #f3f9fc), #e8f2f7);
  padding: 24px;
}

.catalog-card-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.catalog-card-index {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  background: var(--primary-blue);
  border-radius: 10px;
  padding: 6px 14px;
  box-shadow: 0 10px 25px -10px rgba(0, 153, 204, 0.7);
}

.catalog-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 34px;
}

.catalog-card-body .catalog-item-label {
  align-self: flex-start;
}

.catalog-card-body h3 {
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 15px;
}

.catalog-card-body p {
  color: var(--slate-gray);
  line-height: 1.7;
  font-size: 0.98rem;
  margin-bottom: 24px;
}

.catalog-card-body .row-actions {
  margin-top: auto;
}


/* =================================================================
   EQUIPO — índice de tarjeta
   ================================================================= */
.team-card-index {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  -webkit-text-stroke: 1px rgba(77, 216, 240, 0.5);
  user-select: none;
}

/* =================================================================
   ALQUILER — panel CTA corporativo
   ================================================================= */
.alquiler-section {
  background: rgb(13, 23, 40);
  background:
    linear-gradient(135deg, rgba(0, 153, 204, 0.18), transparent 60%),
    linear-gradient(160deg, var(--navy-panel, #0e1a2b), var(--deep-navy, #060b14));
  color: var(--white);
  text-align: left;
}

.alquiler-panel {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
}

.alquiler-copy h2 {
  font-size: 2.4rem;
  margin-bottom: 18px;
  color: var(--white);
}

.alquiler-copy h2 span {
  color: var(--primary-blue-light, #4dd8f0);
}

.alquiler-copy p {
  color: #b7c4d6;
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 640px;
}

.alquiler-perks {
  display: grid;
  gap: 20px;
}

.alquiler-perk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(77, 216, 240, 0.22);
  border-left: 4px solid var(--primary-blue);
  border-radius: 12px;
  padding: 22px 24px;
}

.alquiler-perk i {
  color: var(--primary-blue-light, #4dd8f0);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.alquiler-perk b {
  font-size: 1.1rem;
  color: var(--white);
}

.alquiler-perk span {
  font-size: 0.9rem;
  color: #8fa2ba;
}

/* =================================================================
   TESTIMONIOS — índice de tarjeta
   ================================================================= */
.testimonial-card {
  position: relative;
}

.testimonial-index {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(0, 153, 204, 0.12);
  -webkit-text-stroke: 1px rgba(0, 153, 204, 0.3);
  user-select: none;
}

/* =================================================================
   RESPONSIVE — nuevas estructuras corporativas
   ================================================================= */
@media (max-width: 992px) {
  .about-corpo {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .about-media-block,
  .about-copy-block {
    grid-column: 1 / -1;
  }

  .process-stage {
    grid-template-columns: 1fr;
  }

  .alquiler-panel {
    grid-template-columns: 1fr;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-tag {
    display: none;
  }
}

@media (max-width: 650px) {
  .hero-kicker {
    top: 18px;
    font-size: 9px;
    gap: 10px;
    padding: 8px 16px;
    letter-spacing: 0.14em;
  }

  .about-media-inner {
    height: 300px;
  }

  .catalog-card-media {
    height: 240px;
  }

  .catalog-card-body {
    padding: 24px 22px 28px;
  }

  .about-copy-block h2,
  .eng-head-row h2 {
    font-size: 2rem;
  }

  .about-media-meta {
    left: 12px;
    right: 12px;
    bottom: 14px;
  }
}

/* =================================================================
   AJUSTES — INGENIERÍA (más compacto) + HOVER SOBRE NOSOTROS
   ================================================================= */

/* --- Hacer la sección de Ingeniería menos ancha y menos alta --- */
.eng-section {
  padding: 80px 6%;
}

.eng-head-row {
  max-width: 560px;
  margin-bottom: 26px;
  text-align: left;
}

.eng-head-row .eyebrow {
  justify-content: flex-start;
}

.eng-head-row h2 {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.eng-grid {
  max-width: 1500px;
  margin: 0 auto;
  gap: 60px;
  grid-template-columns: 1fr 1.35fr;
}

.eng-text .eng-lead {
  max-width: 560px;
  font-size: 0.98rem;
  line-height: 1.75;
}

.eng-stats {
  gap: 26px;
}

.eng-panels {
  gap: 16px;
}

.eng-section .hud-frame {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  min-height: 420px;
}

/* --- Hover de la imagen de Sobre Nosotros (más limpio, sin efecto raro) --- */
.about-media-inner {
  transition: transform 0.5s ease;
}

.about-media-block:hover .about-media-inner,
.about-media-inner:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px -25px rgba(0, 153, 204, 0.4);
}

@media (max-width: 992px) {
  .eng-section {
    padding: 60px 6%;
  }
}

/* =================================================================
   SISTEMA COMPLETO — imagen del diagrama más grande
   ================================================================= */
@media (min-width: 1200px) {
  .process-section {
    padding-left: 6%;
    padding-right: 6%;
  }
}

.process-stage {
  grid-template-columns: 3fr 1fr;
  gap: 48px;
  max-width: 1500px;
}


/* =================================================================
   FOOTER - alineacion de columnas de atajos
   ================================================================= */
footer .footer-container {
  align-items: start;
}

footer .footer-col h4 {
  min-height: 2.2em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

footer .footer-col ul li a {
  white-space: nowrap;
}

footer .footer-col ul {
  margin: 0;
  padding: 0;
}

@media (max-width: 992px) {
  footer .footer-col h4 {
    white-space: normal;
    min-height: 0;
  }
}

/* =====================================================
   ACERCA DE NOSOTROS — REDISEÑO CORPORATIVO (about.html)
   ===================================================== */

/* ---------- HERO CORPORATIVO ---------- */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 8% 140px;
  color: var(--white);
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(6, 11, 20, 0.45), rgba(6, 11, 20, 0.85)),
    linear-gradient(90deg, rgba(6, 11, 20, 0.9) 0%, rgba(6, 11, 20, 0.35) 100%);
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-align: center;
}

.about-hero-kicker {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-blue-light);
  background: rgba(0, 153, 204, 0.15);
  border: 1px solid rgba(77, 216, 240, 0.35);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 26px;
}

.about-hero-content h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.about-hero-content h1 span {
  color: var(--primary-blue-light);
}

.about-hero-content p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto 36px;
}

.about-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-about-hero {
  display: inline-block;
  background: var(--primary-blue);
  color: var(--white);
  padding: 15px 34px;
  font-weight: 700;
  border-radius: 50px;
  transition: var(--transition);
  box-shadow: 0 10px 30px -8px rgba(0, 153, 204, 0.6);
}

.btn-about-hero:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
  transform: translateY(-3px);
}

.about-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--white);
  padding: 15px 34px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  transition: var(--transition);
}

.about-btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.about-hero-metrics {
  position: absolute;
  z-index: 2;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: min(760px, 90%);
  background: rgba(14, 26, 43, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(77, 216, 240, 0.25);
  border-radius: 16px;
  overflow: hidden;
}

.about-hero-metric {
  padding: 20px 12px;
  text-align: center;
  border-right: 1px solid rgba(77, 216, 240, 0.15);
}

.about-hero-metric:last-child {
  border-right: none;
}

.about-hero-metric b {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--primary-blue-light);
}

.about-hero-metric span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- INTRODUCCIÓN / QUIÉNES SOMOS ---------- */
.about-intro {
  padding: 110px 8%;
  background: var(--ice);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.about-intro-media {
  position: relative;
}

.about-intro-media img {
  width: 100%;
  border-radius: 18px;
  display: block;
  box-shadow: 0 30px 70px -25px rgba(0, 153, 204, 0.45);
}

/* cuadro azul decorativo estático */
.about-intro-media::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: var(--primary-blue);
  z-index: 0;
}

.about-intro-media img {
  position: relative;
  z-index: 1;
}

.about-intro-badge {
  position: absolute;
  z-index: 2;
  bottom: -22px;
  right: 24px;
  background: var(--deep-navy);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 40px -15px rgba(6, 11, 20, 0.5);
}

.about-intro-badge i {
  font-size: 1.6rem;
  color: var(--primary-blue-light);
}

.about-intro-badge span {
  font-size: 0.85rem;
  line-height: 1.4;
}

.about-intro-badge b {
  display: block;
  color: var(--primary-blue-light);
}

.about-intro-copy {
  text-align: left;
}

.about-intro-copy h2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.about-intro-copy h2 span {
  color: var(--primary-blue);
}

.about-intro-copy p {
  color: var(--slate-gray);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 26px;
}

.about-intro-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.about-intro-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--dark-gray);
}

.about-intro-points i {
  color: var(--primary-blue);
}

/* ---------- ESTADÍSTICAS ---------- */
.about-stats {
  background: var(--deep-navy);
  padding: 80px 8%;
}

.about-stats .stat-number {
  color: var(--primary-blue-light);
}

.about-stats .stat-label {
  color: rgba(255, 255, 255, 0.8);
}

.about-stats .stat-item {
  position: relative;
}

.about-stats .stat-item::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary-blue);
}

/* ---------- MISIÓN Y VISIÓN ---------- */
.about-mission-vision {
  padding: 110px 8%;
  background: var(--white);
}

.about-mv-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.about-mv-head h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark-gray);
}

.about-mv-head h2 span {
  color: var(--primary-blue);
}

.mission-vision-grid {
  max-width: 1080px;
  gap: 40px;
}

.mission-box,
.vision-box {
  padding: 50px 40px;
  background: var(--ice);
  border-radius: 18px;
  text-align: left;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--primary-blue);
  transition: var(--transition);
}

.mission-box:hover,
.vision-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 153, 204, 0.3);
}

.mission-box::after,
.vision-box::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(0, 153, 204, 0.08);
}

.mission-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: rgba(0, 153, 204, 0.12);
  color: var(--primary-blue);
  font-size: 1.6rem;
  margin-bottom: 22px;
}

.mission-box h3,
.vision-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

/* ---------- VALORES ---------- */
.about-values {
  padding: 110px 8%;
  background: var(--ice);
}

.about-values-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.about-values-head h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark-gray);
}

.about-values-head h2 span {
  color: var(--primary-blue);
}

.about-values-head p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-top: 16px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-value-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -25px rgba(6, 11, 20, 0.25);
  transition: var(--transition);
}

.about-value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(0, 153, 204, 0.35);
}

.about-value-media {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.about-value-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 11, 20, 0.05), rgba(6, 11, 20, 0.35));
}

.about-value-body {
  padding: 34px 28px 30px;
  position: relative;
  text-align: left;
}

.about-value-num {
  position: absolute;
  top: -26px;
  left: 26px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--white);
  background: var(--primary-blue);
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 20px -8px rgba(0, 153, 204, 0.6);
}

.about-value-body i {
  font-size: 1.6rem;
  color: var(--primary-blue);
  margin: 6px 0 14px;
  display: inline-block;
}

.about-value-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.about-value-body p {
  color: var(--slate-gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- HISTORIA / TIMELINE ---------- */
.about-history {
  background: var(--white);
  padding: 110px 8%;
  text-align: center;
}

.about-history-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.about-history-copy {
  margin-bottom: 20px;
}

.about-history-copy h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark-gray);
}

.about-history-copy h2 span {
  color: var(--primary-blue);
}

.about-history-copy p {
  color: var(--slate-gray);
  line-height: 1.7;
  max-width: 600px;
  margin: 18px auto 0;
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 70px;
  position: relative;
}

.about-timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 2%;
  right: 2%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-blue) 10%, var(--primary-blue) 90%, transparent);
}

.about-timeline .history-item {
  background: var(--ice);
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 20px 40px -25px rgba(6, 11, 20, 0.2);
  position: relative;
  z-index: 1;
}

.about-timeline .history-item::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.3);
}

.about-timeline .history-year {
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50px;
  padding: 8px 18px;
  font-weight: 800;
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 12px;
}

/* ---------- PROYECTOS DESTACADOS ---------- */
.about-projects {
  padding: 110px 8%;
  background: var(--ice);
}

.about-projects-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.about-projects-head h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark-gray);
}

.about-projects-head h2 span {
  color: var(--primary-blue);
}

.about-projects-head p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-top: 16px;
}

.about-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-project-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 340px;
}

.about-project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.about-project-card:hover img {
  transform: scale(1.08);
}

.about-project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  background: linear-gradient(rgba(6, 11, 20, 0) 30%, rgba(6, 11, 20, 0.85) 100%);
  color: var(--white);
}

.about-project-tag {
  align-self: flex-start;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--primary-blue);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.about-project-overlay h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.about-project-overlay p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- CERTIFICACIONES ---------- */
.about-certs {
  padding: 110px 8%;
  background: var(--white);
}

.about-certs-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.about-certs-head h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dark-gray);
}

.about-certs-head h2 span {
  color: var(--primary-blue);
}

.about-certs-head p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-top: 16px;
}

.about-certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.about-cert-card {
  background: var(--ice);
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid rgba(0, 153, 204, 0.15);
  transition: var(--transition);
}

.about-cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 153, 204, 0.3);
}

.about-cert-card img {
  height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
}

.about-cert-card span {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 6px;
}

.about-cert-card p {
  color: var(--slate-gray);
  font-size: 0.9rem;
}

/* ---------- CTA FINAL ---------- */
.about-cta {
  background: var(--deep-navy);
  position: relative;
  overflow: hidden;
  padding: 110px 8%;
  text-align: center;
}

.about-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 153, 204, 0.25), transparent 70%);
}

.about-cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.about-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
}

.about-cta p {
  max-width: 560px;
  margin: 18px auto 40px;
  color: rgba(255, 255, 255, 0.8);
}

.btn-cta-about {
  background: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-cta-about:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
  border-color: var(--primary-blue-light);
}

/* ---------- RESPONSIVE ACERCA ---------- */
@media (max-width: 992px) {
  .about-hero-metrics {
    bottom: 100px;
  }

  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .about-projects-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .about-certs-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 110px 6% 180px;
  }

  .about-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    bottom: 40px;
    width: 92%;
  }

  .about-hero-metric {
    border-right: none;
    border-bottom: 1px solid rgba(77, 216, 240, 0.15);
    padding: 14px 8px;
  }

  .about-hero-metric:nth-child(odd) {
    border-right: 1px solid rgba(77, 216, 240, 0.15);
  }

  .about-timeline {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-timeline::before {
    display: none;
  }

  .about-stats .stats-grid {
    gap: 44px;
  }
}

/* =====================================================
   CONTÁCTENOS — REDISEÑO CORPORATIVO (contact.html)
   ===================================================== */

/* ---------- HERO CORPORATIVO ---------- */
.contact-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 140px 8% 160px;
  color: var(--white);
  background: none;
  text-align: center;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}

.contact-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(6, 11, 20, 0.5), rgba(6, 11, 20, 0.82)),
    linear-gradient(90deg, rgba(6, 11, 20, 0.85) 0%, rgba(6, 11, 20, 0.4) 100%);
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.contact-hero-kicker {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-blue-light);
  background: rgba(0, 153, 204, 0.15);
  border: 1px solid rgba(77, 216, 240, 0.35);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 26px;
}

.contact-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 22px;
}

.contact-hero h1 span {
  color: var(--primary-blue-light);
}

.contact-hero p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto 36px;
}

.contact-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-hero-strip {
  position: absolute;
  z-index: 2;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: min(920px, 92%);
  background: rgba(14, 26, 43, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(77, 216, 240, 0.25);
  border-radius: 16px;
  overflow: hidden;
}

.contact-hero-strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-right: 1px solid rgba(77, 216, 240, 0.15);
  text-align: left;
}

.contact-hero-strip-item:last-child {
  border-right: none;
}

.contact-hero-strip-item i {
  font-size: 1.4rem;
  color: var(--primary-blue-light);
  flex-shrink: 0;
}

.contact-hero-strip-item span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.contact-hero-strip-item b {
  display: block;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 2px;
}

/* ---------- SECCIÓN FORMULARIO ---------- */
.contact-form-section {
  padding: 100px 8%;
  background: var(--ice);
}

.contact-grid {
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
  max-width: 1180px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.contact-info {
  background: var(--deep-navy);
  border-radius: 20px;
  padding: 48px 40px;
  color: var(--white);
}

.contact-info h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
}

.contact-info h2 span {
  color: var(--primary-blue-light);
}

.contact-intro {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.info-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.info-icon {
  font-size: 1.2rem;
  color: var(--primary-blue-light);
  background: rgba(0, 153, 204, 0.18);
  padding: 12px;
  border-radius: 12px;
  width: 46px;
  height: 46px;
}

.info-item h4 {
  color: var(--white);
  margin-bottom: 4px;
}

.info-item p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.info-item p.info-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.contact-social {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--primary-blue-light);
  font-size: 1rem;
  transition: var(--transition);
}

.contact-social a:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-3px);
}

/* ---------- FORMULARIO ---------- */
.contact-form-wrapper {
  background: var(--white);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: 0 30px 70px -30px rgba(6, 11, 20, 0.25);
}

.contact-form-wrapper h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 26px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form .form-group {
  margin-bottom: 18px;
}

.contact-form label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark-gray);
  margin-bottom: 7px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 13px 16px;
  border: 2px solid #e8eef3;
  border-radius: 10px;
  background: var(--ice);
  font-size: 0.98rem;
  transition: var(--transition);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.12);
}

.btn-contact-submit {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  padding: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-contact-submit:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(0, 153, 204, 0.7);
}

/* ---------- UBICACIÓN ---------- */
.contact-map {
  padding: 100px 8%;
  background: var(--white);
}

.map-container {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(6, 11, 20, 0.3);
  height: 480px;
  background-size: cover;
  background-position: center;
}

.map-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 11, 20, 0.8) 0%, rgba(6, 11, 20, 0.35) 55%, rgba(6, 11, 20, 0.15) 100%);
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--white);
  text-align: left;
  padding: 60px;
  position: relative;
}

.map-card {
  position: relative;
  max-width: 380px;
  background: rgba(14, 26, 43, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(77, 216, 240, 0.25);
  border-radius: 18px;
  padding: 34px 32px;
}

.map-card i {
  font-size: 2.6rem;
  color: var(--primary-blue-light);
  margin-bottom: 16px;
}

.map-card h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}

.map-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-blue);
  color: var(--white);
  padding: 12px 22px;
  font-weight: 700;
  border-radius: 50px;
  transition: var(--transition);
}

.map-btn:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
}

/* ---------- CTA FINAL ---------- */
.contact-cta {
  background: var(--deep-navy);
  position: relative;
  overflow: hidden;
  padding: 100px 8%;
  text-align: center;
}

.contact-cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.contact-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
}

.contact-cta h2 span {
  color: var(--primary-blue-light);
}

.contact-cta p {
  color: rgba(255, 255, 255, 0.8);
  margin: 18px auto 40px;
}

.btn-cta-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 800;
  border: 2px solid var(--primary-blue);
}

.btn-cta-contact:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
  border-color: var(--primary-blue-light);
}

/* ---------- RESPONSIVE CONTACTO ---------- */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-hero-strip {
    grid-template-columns: 1fr;
    width: 92%;
  }

  .contact-hero-strip-item {
    border-right: none;
    border-bottom: 1px solid rgba(77, 216, 240, 0.15);
  }

  .contact-hero-strip-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 120px 6% 340px;
  }

  .contact-form-wrapper {
    padding: 32px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .map-placeholder {
    padding: 30px 20px;
  }

  .map-card {
    padding: 26px 22px;
  }
}

/* ============================================================
   INGENIERÍA — PULIDO CORPORATIVO (servicio-ingenieria.html)
   Unifica la paleta de esta página con el resto del sitio
   (azul-cyan sobre navy). Respeta info e imágenes existentes.
   ============================================================ */

.engineering-page {
  --eng-cyan: var(--primary-blue-light);
  --eng-yellow: #ffd60a;
}

/* ---------- HERO ---------- */
.engineering-page .eng-hero {
  background-image: url("../imagenes/hero_ingenieria.webp");
  position: relative;
}

.engineering-page .eng-hero-overlay {
  background: linear-gradient(105deg,
      rgba(6, 11, 20, 0.88) 0%,
      rgba(6, 11, 20, 0.72) 45%,
      rgba(6, 11, 20, 0.4) 100%);
}

.engineering-page .eng-hero-content {
  padding-top: 40px;
}

.engineering-page .eng-hero-content .pdet-eyebrow {
  display: inline-block;
  color: var(--eng-cyan);
  background: rgba(0, 153, 204, 0.16);
  border: 1px solid rgba(77, 216, 240, 0.35);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
  font-size: 0.78rem;
}

.engineering-page .eng-hero-content h1 {
  color: #ffffff;
}

.engineering-page .eng-hero-content h1 span {
  color: var(--eng-cyan);
}

.engineering-page .eng-hero-content .pdet-btn-primary {
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 14px 34px -12px rgba(0, 153, 204, 0.8);
  transition: var(--transition);
}

.engineering-page .eng-hero-content .pdet-btn-primary:hover {
  background: var(--eng-cyan);
  color: var(--deep-navy);
  transform: translateY(-3px);
}

/* Fila de mini-stats del hero */
.engineering-page .eng-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0;
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(6, 11, 20, 0.45);
  backdrop-filter: blur(6px);
  width: fit-content;
}

.engineering-page .eng-hero-stat {
  padding: 16px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.engineering-page .eng-hero-stat:last-child {
  border-right: none;
}

.engineering-page .eng-hero-stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--eng-cyan);
  line-height: 1.1;
}

.engineering-page .eng-hero-stat span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- INTRO / FILOSOFÍA ---------- */
.engineering-page .eng-intro {
  background: var(--white);
}

.engineering-page .eng-intro-content .pdet-section-label {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

.engineering-page .eng-intro-content h2 span {
  color: var(--primary-blue);
}

/* ---------- PROYECTOS ---------- */
.engineering-page .eng-project--alt {
  background: var(--ice);
}

.engineering-page .eng-project-tag {
  background: rgba(0, 153, 204, 0.12);
  color: var(--primary-blue);
  border: 1px solid rgba(0, 153, 204, 0.25);
}

.engineering-page .eng-project-number {
  color: rgba(0, 153, 204, 0.22);
  opacity: 1;
}

/* Enlace Autodesk */
.engineering-page .eng-autodesk-link {
  border-color: rgba(0, 153, 204, 0.35);
  color: var(--primary-blue);
  font-weight: 700;
}

.engineering-page .eng-autodesk-link:hover {
  background: rgba(0, 153, 204, 0.1);
  border-color: var(--primary-blue);
  color: var(--deep-navy);
}

/* Desafío (El reto) */
.engineering-page .eng-challenge {
  background: var(--deep-navy);
  border-left: 5px solid var(--primary-blue);
  color: #ffffff;
}

.engineering-page .eng-challenge-label {
  color: var(--eng-cyan);
}

.engineering-page .eng-challenge p {
  color: rgba(255, 255, 255, 0.85);
}

/* Marcadores de solución */
.engineering-page .eng-solution-marker {
  background: linear-gradient(140deg, var(--primary-blue), var(--primary-blue-light));
  box-shadow: 0 6px 14px -6px rgba(0, 153, 204, 0.7);
}

.engineering-page .eng-solution h4 {
  color: var(--dark-gray);
}

.engineering-page .eng-solution p {
  color: var(--slate-gray);
}

/* ---------- GALERÍA: hover con zoom + caption ---------- */
.engineering-page .eng-gallery-item {
  position: relative;
  cursor: pointer;
}

.engineering-page .eng-gallery-item img {
  transition: transform 0.6s ease, filter 0.4s ease;
}

.engineering-page .eng-gallery-item:hover img {
  transform: scale(1.07);
}

.engineering-page .eng-gallery-item::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 14px;
  background: linear-gradient(rgba(6, 11, 20, 0), rgba(6, 11, 20, 0.75));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.engineering-page .eng-gallery-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CTA ---------- */
.engineering-page .eng-cta {
  background: var(--deep-navy);
  position: relative;
  overflow: hidden;
}

.engineering-page .eng-cta::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 153, 204, 0.28), transparent 70%);
}

.engineering-page .eng-cta-content {
  position: relative;
  z-index: 1;
}

.engineering-page .eng-cta-content h2 span {
  color: var(--eng-cyan);
}

.engineering-page .eng-cta-content .pdet-btn-primary {
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 14px 34px -12px rgba(0, 153, 204, 0.8);
  transition: var(--transition);
}

.engineering-page .eng-cta-content .pdet-btn-primary:hover {
  background: var(--eng-cyan);
  color: var(--deep-navy);
  transform: translateY(-3px);
}

/* ---------- RESPONSIVE puntual ---------- */
@media (max-width: 768px) {
  .engineering-page .eng-hero-stats {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .engineering-page .eng-hero-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 20px;
  }

  .engineering-page .eng-hero-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .engineering-page .eng-hero-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* ============================================================
   INGENIERÍA — REDISEÑO RADICAL (servicio-ingenieria.html)
   Clases nuevas .sei-* sobre el rediseño completo de la página.
   Usa únicamente la info y las imágenes existentes del proyecto.
   ============================================================ */

/* ---------- HERO ---------- */
.sei-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 130px 8% 150px;
  color: var(--white);
}

.sei-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
}

.sei-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 11, 20, 0.75) 0%, rgba(6, 11, 20, 0.88) 100%);
}

.sei-hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.sei-kicker {
  display: none !important;
}

.sei-hero-content h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 22px;
}

.sei-hero-content h1 span {
  color: var(--primary-blue-light);
}

.sei-hero-content p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #ffffff;
  max-width: 760px;
  margin-bottom: 36px;
}

.sei-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sei-btn-primary {
  display: inline-block;
  background: var(--primary-blue);
  color: #ffffff;
  padding: 15px 34px;
  font-weight: 700;
  border-radius: 50px;
  border: 2px solid var(--primary-blue);
  transition: var(--transition);
  box-shadow: 0 14px 34px -12px rgba(0, 153, 204, 0.8);
}

.sei-btn-primary:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
  transform: translateY(-3px);
}

.sei-btn-ghost {
  display: inline-block;
  color: #ffffff;
  padding: 15px 34px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50px;
  transition: var(--transition);
}

.sei-btn-ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.sei-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  max-width: 680px;
  background: rgba(14, 26, 43, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(77, 216, 240, 0.22);
  border-radius: 14px;
  overflow: hidden;
}

.sei-stat {
  padding: 16px 22px;
  border-right: none;
  text-align: left;
}

.sei-stat:last-child {
  border-right: none;
}

.sei-stat b {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary-blue-light);
  line-height: 1.1;
}

.sei-stat span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- FILOSOFÍA ---------- */
.sei-intro {
  padding: clamp(50px, 6vw, 100px) clamp(16px, 3.5vw, 60px);
  background: var(--white);
  width: 100%;
}

.sei-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
}

.sei-intro-media {
  position: relative;
}

.sei-intro-gif {
  width: 100%;
  border-radius: 18px;
  display: block;
  box-shadow: 0 30px 70px -25px rgba(0, 153, 204, 0.45);
}

.sei-intro-thumb {
  position: absolute;
  bottom: -30px;
  left: -20px;
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  border: 4px solid var(--white);
  box-shadow: 0 18px 40px -16px rgba(6, 11, 20, 0.4);
}

.sei-intro-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 11, 20, 0.72);
  backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(77, 216, 240, 0.3);
}

.sei-intro-badge i {
  color: var(--primary-blue-light);
}

.sei-intro-copy .sei-overline {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 16px;
}

.sei-intro-copy h2 {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--dark-gray);
  margin-bottom: 22px;
}

.sei-intro-copy h2 span {
  color: var(--primary-blue);
}

.sei-intro-copy p {
  color: var(--slate-gray);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.sei-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.sei-intro-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ice);
  border: 1px solid rgba(0, 153, 204, 0.2);
  color: var(--dark-gray);
  padding: 9px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}

.sei-intro-tags i {
  color: var(--primary-blue);
}

/* ---------- PROCESO ---------- */
.sei-process {
  padding: clamp(50px, 6vw, 100px) clamp(16px, 3.5vw, 60px);
  background: var(--deep-navy);
  color: #ffffff;
  width: 100%;
}

.sei-process-head,
.sei-cases-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px;
}

.sei-overline {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-blue-light);
  margin-bottom: 14px;
}

.sei-process-head h2,
.sei-cases-head h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}

.sei-process-head h2 span,
.sei-cases-head h2 span {
  color: var(--primary-blue-light);
}

.sei-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
}

.sei-step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(77, 216, 240, 0.16);
  border-radius: 18px;
  overflow: hidden;
  transition: var(--transition);
}

.sei-step:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 216, 240, 0.5);
  box-shadow: 0 30px 50px -20px rgba(0, 153, 204, 0.4);
}

.sei-step-media {
  height: 170px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.sei-step-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 11, 20, 0.15), rgba(6, 11, 20, 0.55));
}

.sei-step-num {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary-blue-light);
  margin: 22px 22px 8px;
}

.sei-step h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 22px 10px;
}

.sei-step p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  padding: 0 22px 24px;
}

/* ---------- CASOS ---------- */
.sei-cases {
  padding: clamp(45px, 5vw, 85px) clamp(16px, 3.5vw, 60px);
  background: var(--ice);
  width: 100%;
}

.sei-cases-head h2 {
  color: var(--dark-gray);
}

.sei-cases-head h2 span {
  color: var(--primary-blue);
}

.sei-cases-head .sei-overline {
  color: var(--primary-blue);
}

.sei-cases-head p {
  color: var(--slate-gray);
  line-height: 1.7;
  margin-top: 16px;
}

.sei-case {
  background: var(--white);
  border-radius: 22px;
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
  width: 100%;
  max-width: 1840px;
  margin: 0 auto 48px;
  box-shadow: 0 30px 70px -35px rgba(6, 11, 20, 0.3);
}

.sei-case--alt {
  background: var(--deep-navy);
}

.sei-case-top {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 30px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0, 153, 204, 0.18);
  margin-bottom: 44px;
}

.sei-case--alt .sei-case-top {
  border-bottom-color: rgba(77, 216, 240, 0.2);
}

.sei-case-num {
  font-size: 5rem;
  font-weight: 900;
  color: var(--primary-blue);
  opacity: 0.18;
  line-height: 0.85;
}

.sei-case--alt .sei-case-num {
  color: var(--primary-blue-light);
  opacity: 0.25;
}

.sei-case-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  background: rgba(0, 153, 204, 0.12);
  border: 1px solid rgba(0, 153, 204, 0.25);
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.sei-case--alt .sei-case-tag {
  color: var(--primary-blue-light);
  background: rgba(77, 216, 240, 0.12);
  border-color: rgba(77, 216, 240, 0.3);
}

.sei-case-head h3 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark-gray);
  margin-bottom: 14px;
}

.sei-case--alt .sei-case-head h3 {
  color: #ffffff;
}

.sei-case-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--slate-gray);
  max-width: 720px;
  margin-bottom: 20px;
}

.sei-case--alt .sei-case-desc {
  color: rgba(255, 255, 255, 0.8);
}

.sei-autodesk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  border: 1px solid rgba(0, 153, 204, 0.4);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-blue);
  text-decoration: none;
  transition: var(--transition);
}

.sei-autodesk i {
  font-size: 1rem;
}

.sei-autodesk:hover {
  background: var(--primary-blue);
  color: #ffffff;
  transform: translateY(-2px);
}

.sei-case--alt .sei-autodesk {
  color: var(--primary-blue-light);
  border-color: rgba(77, 216, 240, 0.4);
}

.sei-case--alt .sei-autodesk:hover {
  background: var(--primary-blue-light);
  color: var(--deep-navy);
}

/* Cuerpo del caso */
.sei-case-body {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) 1.25fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-bottom: 48px;
}

.sei-challenge {
  background: var(--ice);
  border-left: 5px solid var(--primary-blue);
  padding: 30px 28px;
  border-radius: 14px;
  position: sticky;
  top: 90px;
}

.sei-case--alt .sei-challenge {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--primary-blue-light);
  border: 1px solid rgba(77, 216, 240, 0.18);
  border-left: 5px solid var(--primary-blue-light);
}

.sei-challenge-icon {
  font-size: 1.5rem;
  color: var(--primary-blue);
  margin-bottom: 12px;
  display: inline-block;
}

.sei-case--alt .sei-challenge-icon {
  color: var(--primary-blue-light);
}

.sei-challenge-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.sei-case--alt .sei-challenge-label {
  color: var(--primary-blue-light);
}

.sei-challenge p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--slate-gray);
  margin: 0;
}

.sei-case--alt .sei-challenge p {
  color: rgba(255, 255, 255, 0.85);
}

.sei-solutions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.sei-solution {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
}

.sei-sol-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-blue), var(--primary-blue-light));
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sei-solution h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 0 0 7px;
}

.sei-case--alt .sei-solution h4 {
  color: #ffffff;
}

.sei-solution p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--slate-gray);
  margin: 0;
}

.sei-case--alt .sei-solution p {
  color: rgba(255, 255, 255, 0.78);
}

/* Galería */
.sei-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.sei-gallery-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 400px;
  box-shadow: 0 20px 45px -24px rgba(6, 11, 20, 0.35);
}

.sei-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sei-gallery-item:hover img {
  transform: scale(1.06);
}

.sei-gallery-item::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 42px 18px 14px;
  background: linear-gradient(rgba(6, 11, 20, 0), rgba(6, 11, 20, 0.78));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sei-gallery-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CTA ---------- */
.sei-cta {
  padding: 120px 8%;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 153, 204, 0.22), transparent 45%),
    var(--deep-navy);
  color: #ffffff;
  text-align: center;
}

.sei-cta-content {
  max-width: 720px;
  margin: 0 auto;
}

.sei-cta-content .sei-overline {
  color: var(--primary-blue-light);
}

.sei-cta-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.15;
}

.sei-cta-content h2 span {
  color: var(--primary-blue-light);
}

.sei-cta-content p {
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 36px;
}

.sei-btn-lg {
  padding: 16px 48px;
  font-size: 1.05rem;
}

/* ---------- RESPONSIVE INGENIERÍA ---------- */
@media (max-width: 992px) {
  .sei-intro-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .sei-process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sei-case-body {
    grid-template-columns: 1fr;
  }

  .sei-challenge {
    position: static;
  }

  .sei-hero {
    padding: 120px 6% 140px;
  }
}

@media (max-width: 768px) {
  .sei-hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .sei-stat {
    border-right: none;
    border-bottom: 1px solid rgba(77, 216, 240, 0.14);
  }

  .sei-stat:nth-child(odd) {
    border-right: 1px solid rgba(77, 216, 240, 0.14);
  }

  .sei-process-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .sei-case {
    padding: 32px 24px;
  }

  .sei-case-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sei-case-num {
    font-size: 3rem;
  }

  .sei-case-head h3 {
    font-size: 1.55rem;
  }

  .sei-solutions {
    grid-template-columns: 1fr;
  }

  .sei-gallery {
    grid-template-columns: 1fr;
  }

  .sei-gallery-item {
    height: 280px;
  }

  .sei-intro {
    padding: 80px 6%;
  }

  .sei-process,
  .sei-cases,
  .sei-cta {
    padding: 80px 6%;
  }
}

/* ============================================================
   BOTÓN DE CONTACTO FLOTANTE FIJO (hero-slider en main.html)
   ============================================================ */
.hero-contact-fixed {
  position: absolute;
  right: 4%;
  top: calc(50% + 62px);
  z-index: 13;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(140deg, var(--primary-blue), var(--primary-blue-light));
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 16px 40px -12px rgba(0, 153, 204, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-contact-fixed:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -14px rgba(0, 153, 204, 0.95);
}

.hero-contact-fixed i {
  font-size: 1.15rem;
}

/* En pantallas pequeñas, solo el ícono para no estorbar */
@media (max-width: 992px) {
  .hero-contact-fixed {
    right: 5%;
  }
}

@media (max-width: 768px) {
  .hero-contact-fixed {
    right: 6%;
    padding: 13px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
  }

  .hero-contact-fixed i {
    font-size: 1.3rem;
  }
}

/* ====================================================== */
/* FASE 1: ESTILOS SPA, LOADER DINÁMICO & ESTADOS DE ERROR */
/* ====================================================== */

/* OVERLAY DE CARGA DINÁMICO */
.page-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.page-loader-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 153, 204, 0.15);
  border-top-color: var(--primary-blue, #0099CC);
  border-radius: 50%;
  animation: spinLoader 0.75s linear infinite;
}

.loader-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--dark-gray, #333);
  text-transform: uppercase;
}

@keyframes spinLoader {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   TRANSICIÓN DE CONTENIDO PRINCIPAL & STICKY FOOTER ROBUSTO
   ============================================================ */
.spa-main-container,
#main-content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: calc(100vh - 100px);
  width: 100%;
}

.page-content-wrapper,
#page-content {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-content-wrapper.loading,
#page-content.loading {
  opacity: 0.5;
}

#footer-container {
  margin-top: auto;
  /* Empuja el footer al fondo absoluto de la ventana en páginas cortas */
  width: 100%;
  flex-shrink: 0;
}

/* VISTA DE ERROR SPA (RESILIENCIA EN CARGA DE SECCIONES) */
.spa-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
  min-height: 60vh;
}

.spa-error-card {
  max-width: 500px;
  background: var(--white, #fff);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.spa-error-icon {
  font-size: 3rem;
  color: var(--primary-blue, #0099CC);
  margin-bottom: 20px;
}

.spa-error-card h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark-gray, #333);
  margin-bottom: 10px;
}

.spa-error-card p {
  color: var(--slate-gray, #5B6777);
  font-size: 0.95rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.btn-retry {
  background: var(--primary-blue, #0099CC);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-retry:hover {
  background: var(--dark-gray, #333);
  transform: translateY(-2px);
}

/* MARCADOR DE ENLACE ACTIVO EN NAVEGACIÓN */
.nav-links a.active-link,
.dropdown-content a.active-link {
  color: var(--primary-blue, #0099CC) !important;
  font-weight: 700;
}

/* ====================================================== */
/* FASE 2: ESTILOS DE CALCULADORAS INTERACTIVAS & MODAL   */
/* ====================================================== */

.calc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 153, 204, 0.1);
  color: var(--primary-blue, #0099CC);
  padding: 8px 18px;
  border-radius: 50px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.calc-card {
  cursor: pointer;
}

.calc-card-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--primary-blue, #0099CC);
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* BACKDROP Y CONTENEDOR DEL MODAL */
.calc-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 20, 30, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.calc-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.calc-modal-container {
  background: #ffffff;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.calc-modal-backdrop.active .calc-modal-container {
  transform: scale(1) translateY(0);
}

/* HEADER MODAL */
.calc-modal-header {
  padding: 22px 30px;
  background: #0d1b2a;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-modal-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calc-modal-title i {
  font-size: 1.8rem;
  color: var(--primary-blue, #0099CC);
}

.calc-modal-title h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}

.calc-modal-title p {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 2px 0 0;
}

.calc-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.calc-modal-close:hover {
  background: var(--primary-blue, #0099CC);
  transform: rotate(90deg);
}

/* TABS DEL MODAL */
.calc-modal-tabs {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.calc-tab-btn {
  padding: 14px 22px;
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.25s ease;
  border-bottom: 3px solid transparent;
}

.calc-tab-btn:hover {
  color: var(--primary-blue, #0099CC);
  background: rgba(0, 153, 204, 0.05);
}

.calc-tab-btn.active {
  color: var(--primary-blue, #0099CC);
  background: #ffffff;
  border-bottom-color: var(--primary-blue, #0099CC);
}

/* CUERPO DEL MODAL */
.calc-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
}

.calc-panel {
  display: none;
}

.calc-panel.active {
  display: block;
  animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calc-panel-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: start;
}

.calc-form-side h4,
.calc-results-side h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}

/* GRUPOS DE CONTROL */
.calc-control-group {
  margin-bottom: 22px;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.calc-label-row label,
.calc-control-group label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  margin-bottom: 4px;
  display: block;
}

.calc-value-badge {
  background: #e0f2fe;
  color: #0284c7;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.calc-help-text {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 4px;
  display: block;
}

/* SLIDERS Y INPUTS */
.calc-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #cbd5e1;
  outline: none;
  margin: 8px 0;
  transition: background 0.2s ease;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-blue, #0099CC);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 153, 204, 0.4);
  transition: transform 0.15s ease;
}

.calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.calc-range-marks {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
}

.calc-select,
.calc-num-input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: #1e293b;
  outline: none;
  background: #f8fafc;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.calc-select:focus,
.calc-num-input:focus {
  border-color: var(--primary-blue, #0099CC);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15);
}

.calc-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* TARJETAS DE RESULTADOS (KPIS) */
.calc-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.calc-kpi-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #cbd5e1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-kpi-card.highlight {
  border-top-color: var(--primary-blue, #0099CC);
  background: linear-gradient(to bottom, #f0f9ff, #ffffff);
  box-shadow: 0 10px 25px -8px rgba(0, 153, 204, 0.2);
}

.kpi-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 4px;
}

.calc-kpi-card.highlight .kpi-value {
  color: var(--primary-blue, #0099CC);
}

.kpi-sub {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
}

/* COMPARADOR VISUAL DE BARRAS */
.calc-bar-wrapper {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
}

.calc-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 6px;
}

.calc-bar-track {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.calc-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.calc-bar-fill.fixed-bar {
  background: #94a3b8;
}

.calc-bar-fill.vsd-bar {
  background: linear-gradient(90deg, #0099CC, #38bdf8);
}

/* CAJA DE INFORMACIÓN TÉCNICA */
.calc-info-box {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  padding: 14px 18px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.calc-info-box i {
  font-size: 1.2rem;
  color: #22c55e;
  margin-top: 2px;
  flex-shrink: 0;
}

.calc-info-box p {
  font-size: 0.85rem;
  color: #166534;
  margin: 0;
  line-height: 1.5;
}

/* BADGES DE ESTADO (DIAGNÓSTICO CAÍDA DE PRESIÓN) */
.calc-status-badge {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.calc-status-badge.optimal {
  background: #eefdf5;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.calc-status-badge.warning {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}

.calc-status-badge.critical {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* BOTÓN DE ACCIÓN / COTIZACIÓN */
.calc-action-row {
  margin-top: 10px;
}

.btn-calc-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff !important;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4);
  transition: all 0.25s ease;
  text-align: center;
}

.btn-calc-action:hover {
  background: #1eb954;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(37, 211, 102, 0.55);
}

.btn-calc-action i {
  font-size: 1.25rem;
}

/* CONVERSOR DE UNIDADES */
.unit-converter-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.unit-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
}

.unit-box h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.unit-box h5 i {
  color: var(--primary-blue, #0099CC);
}

.unit-input-group {
  margin-bottom: 16px;
}

.unit-input-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 5px;
  display: block;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .calc-panel-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .unit-converter-container {
    grid-template-columns: 1fr;
  }

  .calc-modal-container {
    max-height: 96vh;
    border-radius: 15px;
  }

  .calc-modal-body {
    padding: 20px;
  }
}

/* ============================================================
   SECCIÓN: FUERA DE SERVICIO / NO DISPONIBLE (TEMA CLARO & LIMPIO)
   Inspirado en Emil Kowalski y Apple Design
   ============================================================ */
.fds-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 20px 110px;
  background: #f8fafc;
  color: #0f172a;
  overflow: hidden;
}

.fds-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 153, 204, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 153, 204, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.8;
  pointer-events: none;
}

.fds-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 153, 204, 0.08) 0%, rgba(0, 153, 204, 0) 70%);
  filter: blur(70px);
  pointer-events: none;
}

.fds-container {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Icono central pulido */
.fds-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.fds-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(0, 153, 204, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
}

.fds-main-icon {
  font-size: 2.2rem;
  color: #0099cc;
}

/* Título y descripción */
.fds-title {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.fds-description {
  font-size: 1.1rem;
  line-height: 1.75;
  color: #475569;
  max-width: 720px;
  margin: 0 auto 36px;
}

.fds-description strong {
  color: #0f172a;
  font-weight: 700;
}

/* Botones con respuesta activa instantánea (Emil Kowalski scale(0.97)) */
.fds-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.fds-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 12px;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease, background-color 160ms ease;
  cursor: pointer;
  text-decoration: none;
}

.fds-btn:active {
  transform: scale(0.97);
}

.fds-btn-primary {
  background: #0099cc;
  color: #ffffff;
  border: 1px solid rgba(0, 153, 204, 0.3);
  box-shadow: 0 6px 20px -2px rgba(0, 153, 204, 0.35);
}

.fds-btn-primary:hover {
  background: #0088bb;
  color: #ffffff;
  box-shadow: 0 10px 25px -2px rgba(0, 153, 204, 0.45);
}

.fds-btn-whatsapp {
  background: #16a34a;
  color: #ffffff;
  border: 1px solid rgba(22, 163, 74, 0.3);
  box-shadow: 0 6px 20px -2px rgba(22, 163, 74, 0.3);
}

.fds-btn-whatsapp:hover {
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 10px 25px -2px rgba(22, 163, 74, 0.45);
}

/* Recuadros / Grid de Tarjetas (Interfaz moderna y limpia) */
.fds-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 45px;
  text-align: left;
}

.fds-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 24px;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), border-color 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  text-decoration: none;
}

.fds-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 153, 204, 0.4);
  box-shadow: 0 20px 40px -4px rgba(0, 153, 204, 0.12), 0 6px 14px -2px rgba(15, 23, 42, 0.04);
}

.fds-card:active {
  transform: scale(0.98);
}

.fds-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 153, 204, 0.08);
  border: 1px solid rgba(0, 153, 204, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #0099cc;
  margin-bottom: 20px;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.fds-card:hover .fds-card-icon {
  background: #0099cc;
  color: #ffffff;
  transform: scale(1.05);
}

.fds-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.3;
}

.fds-card-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 22px;
  flex-grow: 1;
}

.fds-card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0099cc;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease;
}

.fds-card-link i {
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.fds-card:hover .fds-card-link i {
  transform: translateX(5px);
}

/* Panel de Asesores (Limpio, claro y profesional) */
.fds-advisors-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04);
}

.fds-advisors-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.fds-advisors-header i {
  color: #0099cc;
  font-size: 1.1rem;
}

.fds-advisors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.fds-advisor-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 24px;
  min-width: 290px;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.fds-advisor-card:hover {
  border-color: rgba(0, 153, 204, 0.3);
  background: #ffffff;
}

.fds-advisor-name {
  color: #0f172a;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.fds-advisor-role {
  font-size: 0.82rem;
  color: #0099cc;
  font-weight: 600;
  margin-bottom: 10px;
}

.fds-advisor-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #16a34a;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 4px;
  transition: transform 160ms ease;
}

.fds-advisor-phone:hover {
  color: #15803d;
  transform: translateX(2px);
}

.fds-advisor-phone:active {
  transform: scale(0.97);
}

.fds-advisor-email {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 160ms ease;
}

.fds-advisor-email:hover {
  color: #0099cc;
}

.fds-ruc-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 18px;
  border-radius: 50px;
  margin-top: 4px;
}

.fds-ruc-pill i {
  color: #0099cc;
  margin-right: 4px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .fds-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .fds-section {
    padding: 60px 16px 80px;
  }

  .fds-services-grid {
    grid-template-columns: 1fr;
  }

  .fds-actions {
    flex-direction: column;
    width: 100%;
  }

  .fds-btn {
    width: 100%;
    justify-content: center;
  }

  .fds-advisors-panel {
    padding: 24px 18px;
  }

  .fds-advisor-card {
    width: 100%;
    min-width: unset;
  }
}

/* --- SERVICIOS CTA FINAL SECTION --- */
.services-cta-section {
  position: relative;
  padding: 85px 5%;
  text-align: center;
  color: #ffffff;
  border-radius: 24px;
  margin: 60px 5% 80px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.services-cta-content {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.services-cta-section h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #ffffff;
  line-height: 1.25;
}

.services-cta-section h2 span {
  color: #0099cc;
}

.services-cta-section p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 32px;
}

.services-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-services {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: #ffffff;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-cta-brandon {
  background: #25d366;
}

.btn-cta-brandon:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.btn-cta-anthony {
  background: #0099cc;
}

.btn-cta-anthony:hover {
  background: #0088bb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 153, 204, 0.4);
}

.btn-cta-services:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .services-cta-section {
    padding: 55px 20px;
    margin: 40px 16px 60px;
    border-radius: 18px;
  }

  .services-cta-section h2 {
    font-size: 1.6rem;
  }

  .btn-cta-services {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   SECCIÓN: INGENIERÍA DE PRECISIÓN (APPLE DESIGN & EMIL KOWALSKI)
   .sei-* classes
   ============================================================ */

.sei-page {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: #0f172a;
  background-color: #ffffff;
  overflow-x: hidden;
}

/* KICKERS & OVERLINES */
.sei-kicker,
.sei-overline {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0099cc;
  margin-bottom: 12px;
}

/* HERO SECTION */
.sei-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding: 120px 5% 90px;
  color: #ffffff;
  overflow: hidden;
}

.sei-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: scale(1.02);
  transition: transform 10s ease-out;
}

.sei-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 11, 20, 0.88) 0%, rgba(6, 11, 20, 0.65) 100%);
  backdrop-filter: blur(2px);
  z-index: 2;
}

.sei-hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
}

.sei-hero h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 18px;
  color: #ffffff;
}

.sei-hero h1 span {
  color: #0099cc;
}

.sei-hero p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
  margin-bottom: 32px;
}

.sei-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 45px;
}

.sei-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #0099cc;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 153, 204, 0.35);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}

.sei-btn-primary:hover {
  background: #0088bb;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 153, 204, 0.45);
}

.sei-btn-primary:active {
  transform: scale(0.97);
}

.sei-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #0099cc !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 153, 204, 0.35);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}

.sei-btn-whatsapp:hover {
  background: #0088b8 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 153, 204, 0.45);
}

.sei-btn-whatsapp:active {
  transform: scale(0.97);
}

/* HERO STATS BAR (FROSTED GLASS) */
.sei-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  max-width: 820px;
}

.sei-stat {
  flex: 1;
  min-width: 140px;
}

.sei-stat b {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0099cc;
  line-height: 1.2;
}

.sei-stat span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* INTRO / FILOSOFÍA SECTION */
.sei-intro {
  padding: 100px 5%;
  background: #f8fafc;
}

.sei-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.sei-intro-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  background: #0f172a;
  border: 1px solid #e2e8f0;
  height: 100%;
  min-height: 360px;
}

.sei-intro-gif {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.sei-intro-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sei-intro-badge i {
  color: #0099cc;
  margin-right: 6px;
}

.sei-intro-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #0f172a;
  margin-bottom: 20px;
}

.sei-intro-copy h2 span {
  color: #0099cc;
}

.sei-intro-p1,
.sei-intro-p2 {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 16px;
}

.sei-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.sei-intro-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.sei-intro-tags span i {
  color: #0099cc;
}

/* PROCESO SECTION */
.sei-process {
  padding: 100px 5%;
  background: #ffffff;
}

.sei-process-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.sei-process-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
}

.sei-process-head h2 span {
  color: #0099cc;
}

.sei-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.sei-step {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms ease;
}

.sei-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 153, 204, 0.35);
  background: #ffffff;
}

.sei-step-media {
  height: 140px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  margin-bottom: 20px;
}

.sei-step-num {
  position: absolute;
  top: 34px;
  right: 34px;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0099cc;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px 12px;
  border-radius: 8px;
}

.sei-step h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.sei-step p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #64748b;
}

/* CASOS DE INGENIERÍA SECTION */
.sei-cases {
  padding: clamp(45px, 5vw, 85px) clamp(16px, 3.5vw, 60px);
  background: #f8fafc;
  width: 100%;
}

.sei-cases-head {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto 50px;
  text-align: left;
}

.sei-cases-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 14px;
}

.sei-cases-head h2 span {
  color: #0099cc;
}

.sei-cases-head p {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 850px;
  margin: 0;
}

.sei-case {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 44px) !important;
  margin-bottom: 45px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  max-width: 1840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #0f172a !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.sei-case--alt {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 35px rgba(0, 153, 204, 0.08) !important;
  color: #0f172a !important;
}

.sei-case:hover {
  border-color: rgba(0, 153, 204, 0.35) !important;
}

.sei-case-top {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
  align-items: flex-start;
}

.sei-case-num {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #0099cc !important;
  padding: 10px 22px !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 14px rgba(0, 153, 204, 0.3) !important;
}

.sei-case-head {
  flex: 1;
}

.sei-case-head h3 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

.sei-case-desc {
  font-size: 1rem !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

.sei-autodesk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}

.sei-autodesk:hover {
  background: #0099cc !important;
  transform: translateY(-2px);
}

.sei-autodesk:active {
  transform: scale(0.97);
}

.sei-case-body {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.75fr) 1.25fr !important;
  gap: clamp(24px, 3vw, 44px) !important;
  align-items: stretch !important;
  margin-bottom: 34px !important;
}

.sei-challenge {
  background: #fff5f5 !important;
  border: 1px solid #fed7d7 !important;
  border-radius: 18px !important;
  padding: 28px !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  color: #991b1b !important;
}

.sei-challenge-icon {
  color: #dc2626 !important;
  font-size: 1.1rem;
  margin-right: 8px;
}

.sei-challenge-label {
  font-weight: 800 !important;
  color: #991b1b !important;
  font-size: 0.95rem !important;
}

.sei-challenge p {
  color: #7f1d1d !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

.sei-solutions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 0;
}

.sei-solution {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 22px !important;
  display: flex;
  gap: 16px;
}

.sei-sol-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #0099cc !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem !important;
}

.sei-solution h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
}

.sei-solution p {
  font-size: 0.9rem !important;
  color: #475569 !important;
  line-height: 1.55 !important;
}

.sei-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 30px);
}

.sei-gallery-item {
  border-radius: 18px;
  overflow: hidden;
  height: clamp(300px, 25vw, 450px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sei-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.sei-gallery-item:hover img {
  transform: scale(1.03);
}

/* CTA FINAL SECTION */
.sei-cta {
  padding: 85px 5%;
  text-align: center;
  background: linear-gradient(rgba(6, 11, 20, 0.75), rgba(6, 11, 20, 0.85)), url('imagenes/banner_final.jpg') center/cover no-repeat;
  border-radius: 24px;
  margin: 60px 5% 90px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.sei-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.sei-cta h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 16px;
}

.sei-cta h2 span {
  color: #0099cc;
}

.sei-cta p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .sei-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sei-solutions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sei-intro-grid {
    grid-template-columns: 1fr;
  }

  .sei-process-grid {
    grid-template-columns: 1fr;
  }

  .sei-case-top {
    flex-direction: column;
  }

  .sei-gallery {
    grid-template-columns: 1fr;
  }

  .sei-hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .sei-cta {
    padding: 55px 20px;
    margin: 40px 16px 60px;
    border-radius: 18px;
  }
}

/* ============================================================
   ESTÁNDAR UNIFICADO DE HERO PARA TODAS LAS PÁGINAS DE SERVICIO
   Referencia: servicio-ingenieria.html (.sei-hero)
   ============================================================ */

.sei-hero,
.prj-hero,
.audit-hero,
.support-hero,
.rental-hero {
  position: relative !important;
  min-height: 75vh !important;
  display: flex !important;
  align-items: center !important;
  padding: 120px 5% 90px !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.services-hero {
  position: relative !important;
  min-height: 60vh !important;
  display: flex !important;
  align-items: center !important;
}

.sei-hero-content,
.prj-hero-inner,
.audit-hero-inner,
.audit-hero-content,
.support-hero-inner,
.support-hero-content,
.rental-hero-inner,
.rental-hero-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sei-hero h1,
.prj-hero-title,
.audit-hero h1,
.support-hero h1,
.rental-hero h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
  color: #ffffff !important;
}

.sei-hero h1 span,
.prj-hero-title span,
.audit-hero h1 span,
.support-hero h1 span,
.rental-hero h1 span {
  color: #0099cc !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.sei-hero p,
.sei-hero-content p,
.prj-hero-desc,
.audit-hero p,
.support-hero p,
.rental-hero p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  max-width: 720px !important;
  margin-bottom: 32px !important;
}

.sei-hero-stats,
.prj-hero-stats,
.audit-hero-stats,
.support-hero-stats,
.rental-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding: 20px 30px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  max-width: 820px !important;
  margin-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.sei-stat,
.prj-hero-stat,
.audit-stat,
.support-stat,
.rental-stat {
  flex: 1 !important;
  min-width: 140px !important;
}

.sei-stat b,
.prj-hero-stat-num,
.audit-stat span:first-child,
.support-stat span:first-child,
.rental-stat span:first-child {
  display: block !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0099cc !important;
  line-height: 1.2 !important;
}

.sei-stat span,
.prj-hero-stat-label,
.audit-stat span:last-child,
.support-stat span:last-child,
.rental-stat span:last-child {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500 !important;
}

/* ============================================================
   APPLE DESIGN & UNIFIED HIGH-CONTRAST LIGHT STYLES FOR ALL SERVICE PAGES
   (Auditoría, Soporte, Rental, Ingeniería, Proyecto)
   ============================================================ */

.audit-page h2,
.support-page h2,
.rental-page h2,
.audit-pillar h3,
.support-pillar h3,
.rental-advantage h3,
.rental-scenario h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.audit-page section:not(.sei-hero):not(.audit-hero):not(.sei-cta) p,
.support-page section:not(.sei-hero):not(.support-hero):not(.sei-cta) p,
.rental-page section:not(.sei-hero):not(.rental-hero):not(.sei-cta) p,
.audit-block-text ul li,
.support-block-text ul li {
  color: #334155 !important;
  line-height: 1.65 !important;
}

.audit-pillar-number,
.support-pillar-number,
.rental-advantage-number,
.rental-scenario-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #0099cc !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 153, 204, 0.25) !important;
}

.audit-pillar,
.support-pillar,
.rental-advantage,
.rental-scenario,
.service-card-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.audit-pillar:hover,
.support-pillar:hover,
.rental-advantage:hover,
.rental-scenario:hover,
.service-card-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 153, 204, 0.12) !important;
}

.audit-pillar:active,
.support-pillar:active,
.rental-advantage:active,
.rental-scenario:active,
.service-card-item:active {
  transform: scale(0.97) !important;
}

.sei-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #0099cc !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 16px 32px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 8px 24px rgba(0, 153, 204, 0.3) !important;
}

.sei-btn-primary:hover {
  background: #0088b8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0, 153, 204, 0.4) !important;
}

.sei-btn-primary:active {
  transform: scale(0.97) !important;
}

/* ============================================================
   BANNER FINAL CTA UNIFIED STYLES FOR ALL SERVICE PAGES
   ============================================================ */

.sei-cta,
.prj-closing,
.audit-cta,
.support-cta,
.rental-cta,
.services-cta-section {
  position: relative !important;
  padding: 80px 5% !important;
  text-align: center !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  margin: 50px auto 70px !important;
  max-width: 1240px !important;
  width: 92% !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18) !important;
}

.sei-cta-content,
.prj-closing-inner,
.audit-cta-content,
.support-cta-content,
.rental-cta-content,
.services-cta-content {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.sei-cta h2,
.prj-closing h2,
.audit-cta h2,
.support-cta h2,
.rental-cta h2,
.services-cta-section h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  line-height: 1.15 !important;
}

.sei-cta h2 span,
.prj-closing h2 span,
.audit-cta h2 span,
.support-cta h2 span,
.rental-cta h2 span,
.services-cta-section h2 span {
  color: #0099cc !important;
}

.sei-cta p,
.prj-closing-desc,
.audit-cta p,
.support-cta p,
.rental-cta p,
.services-cta-section p {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 720px !important;
  margin: 0 auto 30px !important;
  line-height: 1.6 !important;
}

.audit-cta-info,
.support-cta-info,
.rental-cta-info {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.95rem !important;
  margin-bottom: 28px !important;
}

/* ============================================================
   ULTRA-HIGH SPECIFICITY HERO TEXT OVERRIDES (PURE WHITE)
   ============================================================ */
.sei-hero p,
.sei-hero h1,
.sei-hero-content p,
.sei-hero-content h1,
.support-hero p,
.support-hero h1,
.audit-hero p,
.audit-hero h1,
.rental-hero p,
.rental-hero h1,
.prj-hero p,
.prj-hero h1,
.pdet-page .sei-hero p,
.pdet-page .sei-hero h1,
.support-page .sei-hero p,
.support-page .sei-hero h1,
.audit-page .sei-hero p,
.audit-page .sei-hero h1,
.rental-page .sei-hero p,
.rental-page .sei-hero h1,
.engineering-page .sei-hero p,
.engineering-page .sei-hero h1 {
  color: #ffffff !important;
  opacity: 1 !important;
}

.sei-hero h1 span,
.support-hero h1 span,
.audit-hero h1 span,
.rental-hero h1 span,
.prj-hero h1 span {
  color: #0099cc !important;
}

/* ============================================================
   MEDIA STYLES FOR SERVICE CARDS (REPLACING ICONS WITH IMAGES)
   ============================================================ */
.service-card-media,
.fds-card-media {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.service-card-item:hover .service-card-media,
.fds-card:hover .fds-card-media {
  transform: scale(1.03);
}

.service-card-media-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* ============================================================
   APPLE DESIGN ACCESSIBILITY (REDUCED MOTION)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .service-card-item,
  .btn-services-hero,
  .btn-cta-services,
  .btn-service-card,
  .service-card-media {
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
    transform: none !important;
  }
}

/* ============================================================
   PERFECT MOBILE HEADER & PAGE POSITIONING (ZERO SCROLL JUMP)
   ============================================================ */
@media (max-width: 992px) {

  /* 1. OCULTAR TOTALMENTE EL HEADER DE ESCRITORIO Y TOP BAR EN MÓVIL */
  #header-container .top-bar,
  #header-container #topBar,
  #topBar,
  .top-bar,
  #header-container header,
  #header-container #header,
  #header,
  header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    top: -9999px !important;
    pointer-events: none !important;
  }

  /* 2. DEDICATED MOBILE HEADER: FIJO EN TOP 0, ALTURA 60PX, FONDO BLANCO SÓLIDO */
  .mobile-header-bar,
  #mobileHeaderBar,
  #header-container .mobile-header-bar,
  #header-container #mobileHeaderBar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    z-index: 9990 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* 3. LOGO MÓVIL CENTRADO VERTICALMENTE EN LA BARRA DE 60PX */
  .mobile-logo,
  .mobile-logo a {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-logo img {
    height: 28px !important;
    max-height: 28px !important;
    max-width: 160px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    position: static !important;
    transform: none !important;
    object-fit: contain !important;
  }

  /* 4. BOTÓN MENÚ MÓVIL */
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #0099cc !important;
    color: #ffffff !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .mobile-menu-btn i {
    font-size: 0.95rem !important;
    color: #ffffff !important;
  }

  /* 5. ESPACIADO DEL CUERPO EN MÓVIL */
  body {
    padding-top: 60px !important;
    margin-top: 0 !important;
  }

  .page-wrapper,
  .spa-main-container,
  #main-content,
  .page-content-wrapper,
  #page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 6. HÉROES DE PÁGINAS MÓVILES */
  .services-hero,
  .sei-hero,
  .prj-hero,
  .audit-hero,
  .support-hero,
  .rental-hero,
  .about-hero,
  .contact-hero {
    margin-top: 0 !important;
    padding-top: 35px !important;
    padding-bottom: 45px !important;
  }

  /* 7. ELIMINAR RAYAS, LÍNEAS DE PROGRESO Y PATRONES DE MALA RECTIFICACIÓN EN MÓVIL */
  .scroll-progress,
  #scrollProgress {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .fds-bg-grid {
    display: none !important;
  }

  /* 8. ELIMINAR BORDES VERTICALES Y RAYAS QUE CORTAN LA PANTALLA EN MÓVIL */
  .sei-stat,
  .prj-hero-stat,
  .audit-stat,
  .support-stat,
  .rental-stat,
  .about-hero-metric,
  .stat-item,
  .pdet-feature-bar,
  .audit-pillar-line,
  .support-pillar-line {
    border-right: none !important;
    border-left: none !important;
  }

  /* 9. OPTIMIZACIÓN RESPONSIVA Y AUDITORÍA APPLE DESIGN PARA SERVICIOS (< 992px & < 768px) */
  .sei-hero-stats,
  .prj-hero-stats,
  .audit-hero-stats,
  .support-hero-stats,
  .rental-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 16px !important;
    padding: 16px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sei-stat,
  .prj-hero-stat,
  .audit-stat,
  .support-stat,
  .rental-stat {
    min-width: 0 !important;
    text-align: center !important;
    padding: 6px 4px !important;
  }

  .sei-stat b,
  .prj-hero-stat-num,
  .audit-stat span:first-child,
  .support-stat span:first-child,
  .rental-stat span:first-child {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  .sei-stat span,
  .prj-hero-stat-label,
  .audit-stat span:last-child,
  .support-stat span:last-child,
  .rental-stat span:last-child {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
  }

  /* SERVICIOS MAIN GRID (services.html) */
  .services-grid-section {
    padding: 45px 16px !important;
  }

  .services-grid-header h2 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }

  .services-grid-header p {
    font-size: 0.98rem !important;
    margin-bottom: 30px !important;
  }

  .services-grid-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  .service-card-item {
    padding: 24px 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  }

  .service-card-media {
    height: 180px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .service-card-item h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .service-card-item p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }

  .btn-service-card {
    min-height: 44px !important;
    align-items: center !important;
    font-size: 0.88rem !important;
  }

  /* INGENIERÍA (servicio-ingenieria.html) */
  .sei-process {
    padding: 45px 16px !important;
  }

  .sei-process-head h2 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }

  .sei-process-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sei-step {
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }

  .sei-step-media {
    height: 160px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .sei-cases {
    padding: 45px 16px !important;
  }

  .sei-cases-head h2 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }

  .sei-case {
    padding: 24px 18px !important;
    border-radius: 20px !important;
    margin-bottom: 28px !important;
  }

  .sei-case-num {
    font-size: 2.2rem !important;
  }

  .sei-autodesk {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
  }

  .sei-solutions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sei-gallery {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sei-gallery-item img {
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    width: 100% !important;
  }

  /* PROYECTOS LLAVE EN MANO (servicio-proyecto.html) */
  .prj-section {
    padding: 45px 16px !important;
  }

  .prj-number {
    font-size: 3.2rem !important;
    line-height: 1 !important;
  }

  .prj-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .prj-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .prj-challenge-card,
  .prj-solution-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .prj-kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .prj-kpi-value {
    font-size: 1.35rem !important;
  }

  .prj-kpi-label {
    font-size: 0.75rem !important;
  }

  .prj-scope-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .prj-grid-p1,
  .prj-grid-p2,
  .prj-grid-p3,
  .prj-grid-p4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .prj-grid-p1 .prj-span-2,
  .prj-grid-p1 .prj-card-p1-compresor,
  .prj-grid-p1 .prj-card-p1-manifold,
  .prj-grid-p1 .prj-card-p1-caseta,
  .prj-grid-p2 .prj-img-card,
  .prj-grid-p3 .prj-img-card,
  .prj-grid-p4 .prj-card-p4-top,
  .prj-grid-p4 .prj-card-p4-manifold,
  .prj-grid-p4 .prj-card-p4-taller {
    grid-column: span 1 !important;
    height: 240px !important;
  }

  .prj-grid-p3 .prj-img-card {
    height: 280px !important;
  }

  .prj-card-overlay {
    padding: 16px !important;
  }

  .prj-card-name {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  /* AUDITORÍA Y SOPORTE (servicio-auditoria.html, servicio-soporte.html) */
  .audit-pillars,
  .support-pillars {
    padding: 45px 16px !important;
  }

  .audit-pillars-header h2,
  .support-pillars-header h2 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }

  .audit-pillars-grid,
  .support-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .audit-pillar,
  .support-pillar {
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }

  .audit-block,
  .support-block {
    padding: 45px 16px !important;
  }

  .audit-block-inner,
  .support-block-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .audit-block-image img,
  .support-block-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .audit-block-text h2,
  .support-block-text h2 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .audit-block-data,
  .support-block-data {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* RENTAL (servicio-rental.html) */
  .fds-section {
    padding: 45px 16px !important;
  }

  .fds-container {
    max-width: 100% !important;
  }

  .fds-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .fds-description {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
  }

  .fds-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .fds-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .fds-services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .fds-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .fds-card-media {
    height: 170px !important;
    border-radius: 14px !important;
  }

  .fds-advisors-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .fds-advisor-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }

  .fds-advisor-phone,
  .fds-advisor-email {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .sei-cta,
  .prj-closing,
  .audit-cta,
  .support-cta,
  .rental-cta,
  .services-cta-section {
    padding: 50px 20px !important;
    border-radius: 16px !important;
    margin: 35px 16px 50px !important;
    width: auto !important;
  }

  .sei-cta h2,
  .prj-closing h2,
  .audit-cta h2,
  .support-cta h2,
  .rental-cta h2,
  .services-cta-section h2 {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .sei-cta p,
  .prj-closing-desc,
  .audit-cta p,
  .support-cta p,
  .rental-cta p,
  .services-cta-section p {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  .sei-btn-whatsapp,
  .sei-btn-primary,
  .btn-cta-services,
  .btn-services-hero {
    width: 100% !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
}

/* ============================================================
   MODAL DE REGISTRO DE LEAD (ODOO CRM INTEGRATION) - ESTILO IMAGEN 1
   ============================================================ */

.lead-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.lead-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.lead-modal-container {
  background: #ffffff;
  border-radius: 24px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.35);
  padding: 36px 40px;
  box-sizing: border-box;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-modal-backdrop.active .lead-modal-container {
  transform: scale(1) translateY(0);
}

.lead-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lead-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.05);
}

.lead-modal-header {
  margin-bottom: 28px;
  text-align: left;
  padding-right: 40px;
}

.lead-modal-header h3 {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  line-height: 1.2;
}

.lead-modal-header p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.lead-modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}

.lead-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.lead-form-group.lead-full-width {
  grid-column: span 2;
}

.lead-form-group label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
}

.required-star {
  color: #e11d48;
}

.lead-form-group input,
.lead-form-group select,
.lead-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lead-form-group input::placeholder,
.lead-form-group textarea::placeholder {
  color: #94a3b8;
}

.lead-form-group input:focus,
.lead-form-group select:focus,
.lead-form-group textarea:focus {
  outline: none;
  border-color: #0099cc;
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.15);
}

.lead-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.lead-privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #0d9488;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 4px;
}

.lead-privacy-note i {
  font-size: 0.95rem;
}

.lead-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0088b8;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 28px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 136, 184, 0.3);
  margin-top: 6px;
}

.lead-submit-btn:hover {
  background: #0077a3;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 136, 184, 0.4);
}

.lead-submit-btn:active {
  transform: scale(0.98);
}

.lead-form-status {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
}

.lead-form-status.success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lead-form-status.success i {
  font-size: 1.4rem;
  color: #16a34a;
  margin-top: 2px;
}

.lead-form-status.error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lead-form-status.error i {
  font-size: 1.4rem;
  color: #dc2626;
  margin-top: 2px;
}


/* RESPONSIVE LEAD MODAL */
@media (max-width: 680px) {
  .lead-modal-container {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lead-form-group.lead-full-width {
    grid-column: span 1;
  }

  .lead-modal-header h3 {
    font-size: 1.4rem;
  }
}

/* ============================================================
   COOKIE BANNER (DISEÑO IMAGEN 2) CON PERSISTENCIA LOCALSTORAGE
   ============================================================ */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 440px;
  width: calc(100% - 48px);
  background: #f8f6f0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  z-index: 999990;
  padding: 24px;
  box-sizing: border-box;
  color: #1e293b;
  text-align: left;
  font-family: inherit;
}

.cookie-content h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.cookie-content p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 12px 0;
}

.cookie-policy-link {
  display: inline-block;
  color: #0077a3;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  margin-bottom: 20px;
  transition: color 0.2s ease;
}

.cookie-policy-link:hover {
  color: #005575;
}

.cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookie-btn-accept {
  width: 100%;
  padding: 13px 20px;
  background: #006680;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.cookie-btn-accept:hover {
  background: #005066;
}

.cookie-btn-accept:active {
  transform: scale(0.98);
}

.cookie-btn-manage {
  width: 100%;
  padding: 12px 20px;
  background: #f8f6f0;
  color: #006680;
  border: 1.5px solid #006680;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cookie-btn-manage:hover {
  background: #eef5f8;
}

@media (max-width: 500px) {
  .cookie-banner {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    padding: 20px 18px;
    border-radius: 14px;
  }
}

/* MODAL DE ADMINISTRACIÓN DE COOKIES */
.cookie-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.cookie-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  padding: 30px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.cookie-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  border: none;
  background: #f1f5f9;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
}

.cookie-modal-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.cookie-modal-card p {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 20px;
}

.cookie-opt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.cookie-opt-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 14px 16px;
  border-radius: 12px;
}

.cookie-opt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.92rem;
  color: #1e293b;
}

.cookie-opt-item p {
  font-size: 0.84rem;
  color: #64748b;
  margin: 0;
}

.cookie-btn-save {
  width: 100%;
  padding: 13px;
  background: #0088b8;
  color: #ffffff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* ============================================================
   PÁGINA POLÍTICA DE COOKIES (politica-cookies.html)
   ============================================================ */

.cookies-body-section {
  padding: 60px 5%;
  background: #f8fafc;
}

.cookies-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cookies-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  text-align: left;
}

.cookies-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.cookies-icon {
  font-size: 1.5rem;
  color: #0099cc;
}

.cookies-card h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

.cookies-card p {
  font-size: 0.98rem;
  color: #334155;
  line-height: 1.65;
  margin: 0 0 14px 0;
}

.cookies-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.cookie-type-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
}

.cookie-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cookie-badge.essential {
  background: #dbeafe;
  color: #1e40af;
}

.cookie-badge.functional {
  background: #fef3c7;
  color: #92400e;
}

.cookie-badge.analytics {
  background: #dcfce7;
  color: #166534;
}

.cookie-type-box h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.cookie-type-box p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.cookies-list {
  padding-left: 20px;
  color: #334155;
  line-height: 1.7;
  margin: 0;
}

.cookies-browser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.browser-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.browser-item i {
  font-size: 1.6rem;
  color: #0099cc;
  margin-bottom: 4px;
}

.browser-item span {
  color: #64748b;
  font-size: 0.85rem;
}

.cookies-contact-box {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.cookies-email-link,
.cookies-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.cookies-email-link {
  background: #0f172a;
  color: #ffffff;
}

.cookies-wa-link {
  background: #25d366;
  color: #ffffff;
}

@media (max-width: 850px) {

  .cookies-types-grid,
  .cookies-browser-grid {
    grid-template-columns: 1fr;
  }

  .cookies-card {
    padding: 24px 20px;
  }
}

/* ============================================================
   ESTILOS POLÍTICA DE COOKIES (TEXTO PLANO CORRIDO, SIN HERO/BOXES/ICONOS)
   ============================================================ */

.politica-cookies-clean-page {
  background: #ffffff;
  padding: 70px 4% 120px;
  color: #1e293b;
}

.politica-cookies-container {
  max-width: 1140px;
  margin: 0 auto;
  text-align: left;
}

.politica-cookies-container h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.politica-cookies-container h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 36px;
  margin-bottom: 14px;
}

.politica-cookies-container p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 16px;
}

.politica-cookies-container ul {
  padding-left: 24px;
  margin-bottom: 24px;
}

.politica-cookies-container li {
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .politica-cookies-clean-page {
    padding: 40px 18px 60px;
  }

  .politica-cookies-container h1 {
    font-size: 1.75rem;
  }

  .politica-cookies-container h2 {
    font-size: 1.2rem;
  }
}

/* ============================================================
   MODAL DE SELECCIÓN DE ASESORES DE WHATSAPP (MULTI-ASESOR)
   ============================================================ */

.asesores-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.asesores-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.asesores-modal-container {
  background: #ffffff;
  border-radius: 24px;
  max-width: 620px;
  width: 100%;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.asesores-modal-backdrop.active .asesores-modal-container {
  transform: translateY(0);
}

.asesores-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.asesores-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.asesores-modal-header {
  margin-bottom: 28px;
}

.asesores-icon-badge {
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 14px;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.asesores-modal-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.asesores-modal-header p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}

.asesores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.asesor-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.asesor-card:hover {
  transform: translateY(-4px);
  border-color: #25d366;
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.15);
  background: #ffffff;
}

.asesor-avatar {
  width: 50px;
  height: 50px;
  background: #e0f2fe;
  color: #0284c7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.asesor-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.asesor-role {
  display: block;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 10px;
  min-height: 38px;
}

.asesor-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
}

.asesor-wa-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.1s ease;
}

.asesor-wa-btn.brandon {
  background: #25d366;
  color: #ffffff;
}

.asesor-wa-btn.brandon:hover {
  background: #1ebc57;
}

.asesor-wa-btn.anthony {
  background: #128c7e;
  color: #ffffff;
}

.asesor-wa-btn.anthony:hover {
  background: #0e7065;
}

.asesores-modal-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
}

.asesores-lead-link {
  background: transparent;
  border: none;
  color: #0088b8;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.asesores-lead-link:hover {
  color: #006680;
  text-decoration: underline;
}

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

  .asesores-modal-container {
    padding: 26px 20px;
  }

  .asesor-role {
    min-height: auto;
  }
}