@import url('fonts-local.css');

:root {
  /* ACLIMIN Industrial Palette */
  --color-primary: #003B5C; /* Deep Navy */
  --color-primary-dark: #00263d;
  --color-secondary: #00A3C4; /* Industrial Cyan */
  --color-secondary-hover: #0088a3;
  --color-accent: #5b9ba4;
  --color-bg-light: #F4F7F9;
  --color-white: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #5a6a7a;
  
  /* Modern Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Roboto', sans-serif;
  
  /* Layered Shadows for Premium Feel */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-glass: 0 8px 32px 0 rgba(0, 59, 92, 0.1);
  
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg-light);
  margin: 0; padding: 0;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.2;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

/* --- PREMIUM GLASS HEADER --- */
.modern-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px 0;
  transition: var(--transition);
}

.modern-header.scrolled {
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}

.modern-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modern-header .logo img {
  max-height: 80px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
  transition: var(--transition);
}

.modern-header.scrolled .logo img { max-height: 60px; }

.modern-nav ul {
  list-style: none;
  display: flex;
  gap: 35px;
  margin: 0; padding: 0;
}

.modern-nav a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
  position: relative;
}

.modern-nav a::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0;
  width: 0; height: 2px;
  background: var(--color-secondary);
  transition: var(--transition);
}

.modern-nav a:hover::after, .modern-nav a.active::after { width: 100%; }
.modern-nav a:hover, .modern-nav a.active { color: var(--color-secondary); }

/* --- IMMERSIVE HERO --- */
.modern-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding: 140px 0 80px;
  color: var(--color-white);
}

.modern-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to right, rgba(0, 33, 71, 0.92) 0%, rgba(0, 33, 71, 0.70) 55%, rgba(0, 33, 71, 0.25) 100%);
  z-index: 1;
}

.modern-hero .container { position: relative; z-index: 2; }

.modern-hero h1 {
  color: white;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 25px;
}

.modern-hero p {
  font-size: 1.25rem;
  max-width: 700px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 40px;
  text-align: justify;
}

/* --- PREMIUM COMPONENTS --- */
.hero-glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-glass);
  max-width: 450px;
}

.hero-glass-card h3 { color: var(--color-secondary); margin-bottom: 12px; font-size: 1.2rem; }
.hero-glass-card p { color: white; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; text-align: justify; }

.modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  color: white !important;
  padding: 16px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 20px rgba(0, 163, 196, 0.3);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.modern-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 163, 196, 0.5);
  filter: brightness(1.1);
}

/* --- TRUST RIBBON --- */
.trust-ribbon {
  background: var(--color-primary-dark);
  padding: 80px 0;
  margin-top: -40px;
  position: relative;
  z-index: 5;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.trust-item { text-align: center; }
.trust-item h2 { font-size: 3.5rem; color: var(--color-secondary); margin-bottom: 10px; font-weight: 900; }
.trust-item p { color: rgba(255,255,255,0.7); font-size: 1.1rem; font-weight: 500; }

/* --- BENTO GRID SYSTEM --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin: 60px 0;
}

.bento-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  border: 1px solid rgba(0, 59, 92, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--color-secondary);
  opacity: 0; transition: var(--transition);
}

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.bento-card:hover::before { opacity: 1; }

.bento-card-large { grid-column: span 7; }
.bento-card-small { grid-column: span 5; }
.bento-card-third { grid-column: span 4; }

.bento-icon {
  width: 60px; height: 60px;
  background: rgba(0, 163, 196, 0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 25px;
  color: var(--color-secondary);
  transition: var(--transition);
}

.bento-card:hover .bento-icon {
  background: var(--color-secondary);
  color: white;
  transform: rotate(5deg) scale(1.1);
}

.bento-card h3 { font-size: 1.6rem; margin-bottom: 15px; }
.bento-card p { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; text-align: justify; }

/* --- PREMIUM FOOTER --- */
.modern-footer {
  background: #001a2c;
  color: white;
  padding: 60px 0 26px;
  position: relative;
}

.modern-footer .container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-col { text-align: center; }
.footer-col h4 { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--color-secondary); font-size: 1.05rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 12px; line-height: 1.6; }
.footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; transition: var(--transition); display: block; margin-bottom: 8px; font-size: 0.9rem; }
.footer-col a:hover { color: var(--color-secondary); }

.footer-bottom {
  text-align: center;
  padding-top: 22px; margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.8rem; color: rgba(255,255,255,0.4);
}

/* Banner de WhatsApp del pie de página: aparece solo cuando el botón flotante de
   WhatsApp se oculta al llegar al footer (mismo disparador, ver JS "OCULTAR WIDGET
   DE WHATSAPP AL LLEGAR AL PIE DE PÁGINA" en cada página), para no perder el acceso
   directo a WhatsApp mientras se ve el footer. */
.wa-footer-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #25D366 100%);
  color: white; text-decoration: none; font-weight: 700; font-size: 0.9rem;
  max-height: 0; overflow: hidden; opacity: 0; padding: 0 20px;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.wa-footer-banner svg { fill: white; flex-shrink: 0; }
.wa-footer-banner.show { max-height: 60px; opacity: 1; padding: 14px 20px; }

/* --- ANIMATIONS --- */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- HERO 2-COLUMN LAYOUT --- */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-aside .hero-glass-card {
  width: 100%;
  max-width: 420px;
}

/* --- RESPONSIVE --- */
/* --- HAMBURGER BUTTON --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-toggle.open span { background: #ffffff; }

/* Accesos rápidos del menú mobile (ocultos en desktop) */
.nav-mobile-extra { display: none; }

/* Header en modo menú abierto (mobile): se funde con el overlay */
body.nav-open .modern-header {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.nav-open .modern-header .logo { opacity: 0; pointer-events: none; }

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

/* El resto del layout del home solo se reacomoda por debajo de 768px, pero el texto
   centrado/justificado se ve mal antes de eso en tablets tipo iPad (810-820px) — este
   breakpoint más ancho solo corrige alineación de texto, sin tocar el layout general. */
@media (max-width: 900px) {
  .modern-hero p { text-align: center; }
}

@media (max-width: 768px) {
  .modern-header .logo img { max-height: 50px; }

  /* Hamburger visible */
  .nav-toggle { display: flex; }

  /* Nav → overlay de pantalla completa.
     Fondo SÓLIDO a propósito: rgba + backdrop-filter sobre fixed+transform
     no pinta el fondo en iOS/WebKit. */
  .modern-nav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #00213D;
    background-image: linear-gradient(165deg, #003B5C 0%, #00213D 55%, #001A30 100%);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modern-nav.open { opacity: 1; visibility: visible; }
  .modern-nav ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 95px 32px 0;
  }
  .modern-nav li {
    width: 100%;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .modern-nav.open li { opacity: 1; transform: translateY(0); }
  .modern-nav.open li:nth-child(1) { transition-delay: 0.08s; }
  .modern-nav.open li:nth-child(2) { transition-delay: 0.14s; }
  .modern-nav.open li:nth-child(3) { transition-delay: 0.20s; }
  .modern-nav.open li:nth-child(4) { transition-delay: 0.26s; }
  .modern-nav.open li:nth-child(5) { transition-delay: 0.32s; }
  .modern-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 19px 4px;
    color: #ffffff;
    font-size: 1.05rem;
    letter-spacing: 2px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .modern-nav a::after {
    content: '›';
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: var(--color-secondary);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
    transition: none;
  }
  .modern-nav a.active { color: var(--color-secondary); }
  .nav-mobile-extra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 26px 32px 40px;
    min-width: 0;
  }
  .nav-mobile-extra a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-mobile-extra a.wa {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  .modern-hero { min-height: 70vh; padding-top: 120px; }
  .modern-hero h1 { font-size: 2.2rem; text-align: center; }
  .modern-hero p { text-align: center; margin: 0 auto 30px; }
  .hero-layout { grid-template-columns: 1fr; gap: 36px; }
  .hero-content { align-items: center; text-align: center; }
  .hero-aside { justify-content: center; }
  .hero-aside .hero-glass-card { max-width: 100%; }
  .bento-card-large, .bento-card-small, .bento-card-third { grid-column: span 12; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .modern-footer { padding: 44px 0 20px; }
  .modern-footer .container { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { padding-top: 18px; margin-top: 28px; }
}

/* --- AVISO DE COOKIES / ALMACENAMIENTO LOCAL --- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2500;
  background: rgba(0, 33, 61, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.92);
  padding: 12px 24px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1; min-width: 260px; font-size: 0.82rem; line-height: 1.5; }
.cookie-banner-text strong { color: var(--color-secondary); }
.cookie-banner-text a { color: var(--color-secondary); font-weight: 700; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner-btn {
  padding: 9px 20px;
  border-radius: 50px;
  border: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.cookie-banner-btn.accept { background: var(--color-secondary); color: white; }
.cookie-banner-btn.accept:hover { background: var(--color-secondary-hover); }
@media (max-width: 640px) {
  .cookie-banner { padding: 12px 16px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
  .cookie-banner-actions { justify-content: center; }
}