@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:#FAFAF6;
  --white:#FFFFFF;
  --forest:#1D4432;
  --forest-2:#122A20;
  --olive:#6B8E23;
  --olive-dark:#526F1A;
  --olive-tint:#EEF3E2;
  --ink:#15201B;
  --muted:#5C6960;
  --line:#E7E4DC;
  --line-2:#DEDBD2;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Open Sans',sans-serif;color:var(--ink);background:var(--paper);}
h1,h2,h3{font-family:'Roboto Condensed',sans-serif;margin:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

.wrap{width:100%;max-width:1440px;margin:0 auto;position:relative;}

.nav-link{position:relative;font-size:15px;font-weight:600;color:var(--ink);padding:8px 4px;}
.nav-link::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .18s;}
.nav-link:hover::after{transform:scaleX(1);}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--olive-dark);display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--olive);display:inline-block;}
.eyebrow-light{color:#E7F0DA;}
.eyebrow-light::before{background:#A8D25C;}
.h2{font-size:36px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--olive);color:#fff;font-size:15px;font-weight:700;padding:14px 26px;border-radius:10px;border:1px solid var(--olive);transition:background .15s;}
.btn-primary:hover{background:var(--olive-dark);}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);font-size:15px;font-weight:700;padding:14px 26px;border-radius:10px;border:1.5px solid var(--line-2);transition:border-color .15s,background .15s;}
.btn-outline:hover{border-color:var(--ink);background:var(--white);}
.btn-outline-light{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);color:#fff;font-size:15px;font-weight:700;padding:14px 26px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.55);transition:border-color .15s,background .15s;}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,0.16);}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;transition:box-shadow .18s,transform .18s,border-color .18s;}
.card:hover{box-shadow:0 22px 40px rgba(21,32,27,0.09);transform:translateY(-3px);border-color:var(--line-2);}
.icon-badge{width:46px;height:46px;border-radius:12px;background:var(--olive-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--olive-tint);border:1px solid #E3EEDA;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--olive-dark);font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:17px;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
label.field-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;display:block;}
input.field, textarea.field{width:100%;font-family:'Open Sans',sans-serif;font-size:16px;color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);}
input.field:focus, textarea.field:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive);}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);}
.contactanos-flex{display:flex;gap:80px;flex-wrap:wrap;}
.footer-link{font-size:14px;color:#CFE0D3;}
.footer-link:hover{color:#fff;}
/* La dirección usa su propia clase (no .footer-link, que también usan los
   ítems del menú del footer) para poder subrayarla y que se note que es un
   link real a Google Maps, sin afectar el estilo del menú. */
.footer-address-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,201,188,0.5);}
.footer-address-link:hover{color:#fff;text-decoration-color:#fff;}
.wa-fab{position:fixed;right:32px;bottom:32px;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,0.28);z-index:80;transition:transform .15s;}
.wa-fab:hover{transform:scale(1.06);}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,246,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;height:92px;padding:0 96px;-webkit-transform:translateZ(0);transform:translateZ(0);}
.site-header .nav-primary{display:flex;align-items:center;gap:32px;}
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;}
.menu-toggle-line{display:block;width:22px;height:2px;background:var(--olive);border-radius:2px;transition:transform .25s ease, opacity .2s ease;}
/* Con el menú abierto, las 3 líneas se transforman en una X de cerrar. */
.site-header.nav-open .menu-toggle-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header.nav-open .menu-toggle-line:nth-child(2){opacity:0;}
.site-header.nav-open .menu-toggle-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO */
.hero-wrap{position:relative;width:100%;height:640px;overflow:hidden;background:var(--forest-2);}
.hero-slide-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;display:block;}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.hero-slide.is-video{object-fit:cover;}
.hero-wrap.has-multi .hero-slide-base, .hero-wrap.has-multi .hero-slide{animation:heroFade var(--hero-cycle,18s) infinite;}
@keyframes heroFade{0%{opacity:0;}4%{opacity:1;}30%{opacity:1;}36%{opacity:0;}100%{opacity:0;}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(9,18,14,0.28) 0%, rgba(9,18,14,0.18) 38%, rgba(7,15,11,0.86) 100%);}
.hero-content{position:absolute;left:96px;right:340px;bottom:68px;display:flex;flex-direction:column;gap:22px;color:#fff;}
.hero-title{font-size:52px;line-height:1.1;color:#fff;font-weight:700;letter-spacing:-0.01em;max-width:640px;margin:0;}
.hero-desc{margin:0;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,0.86);max-width:480px;}
.hero-dots{position:absolute;right:96px;bottom:76px;display:flex;gap:10px;align-items:center;}
.hero-dot{height:8px;width:8px;border-radius:50px;background:rgba(255,255,255,0.45);animation:dotActive var(--hero-cycle,18s) infinite;cursor:pointer;}
.hero-wrap.js-ready .hero-slide-base,
.hero-wrap.js-ready .hero-slide{animation:none !important;transition:opacity .5s ease;}
.hero-wrap.js-ready .hero-dot{animation:none !important;transition:background .2s ease,width .2s ease;}
@keyframes dotActive{0%{background:rgba(255,255,255,0.45);width:8px;}4%{background:#fff;width:26px;}30%{background:#fff;width:26px;}36%{background:rgba(255,255,255,0.45);width:8px;}100%{background:rgba(255,255,255,0.45);width:8px;}}

/* CIFRAS */
.cifras-band{background:var(--olive-tint);border-top:1px solid #E3EEDA;border-bottom:1px solid #E3EEDA;}
.cifras-row{padding:52px 96px;display:flex;justify-content:center;align-items:flex-start;gap:96px;flex-wrap:wrap;}
.cifra-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.cifra-num{font-family:'Roboto Condensed',sans-serif;font-size:52px;font-weight:700;color:var(--ink);line-height:1;}
.cifra-label{color:var(--muted);}

/* SERVICIOS */
.servicios-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.service-card{overflow:hidden;padding:0;display:flex;flex-direction:column;}
.service-card img{width:100%;height:220px;object-fit:cover;display:block;}
.service-card .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px;}

/* SOBRE ASCOR */
.sobre-banner{position:relative;width:100%;height:420px;overflow:hidden;}
.sobre-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.sobre-banner .scrim{position:absolute;inset:0;background:linear-gradient(100deg, rgba(18,42,32,0.82) 0%, rgba(18,42,32,0.42) 48%, rgba(18,42,32,0.05) 78%);}
.sobre-banner .copy{position:absolute;left:96px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;max-width:460px;}
.cobertura-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.equipo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
.sobre-ascor-body{padding:64px 96px 0;box-sizing:border-box;display:flex;flex-direction:column;gap:56px;}
.cobertura-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:24px;flex-wrap:wrap;}
.cobertura-header p{margin:0;font-size:14px;color:var(--muted);max-width:380px;text-align:right;}

/* LOGOS CLIENTES */
.logo-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);}
.logo-track{display:flex;align-items:center;gap:76px;width:max-content;animation:marquee var(--marquee-speed,26s) linear infinite;}
.logo-track img{height:38px;width:auto;object-fit:contain;flex-shrink:0;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* REPRESENTACIONES */
.representaciones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.repr-card{padding:28px;display:flex;flex-direction:column;gap:16px;border-top:3px solid var(--olive);}
.repr-logo{height:44px;display:flex;align-items:center;}
.repr-logo img{max-height:100%;max-width:100%;object-fit:contain;}

/* CTA */
.cta-band{padding:88px 96px;}
.cta-inner{background:var(--forest);border-radius:28px;padding:64px 72px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}

/* FOOTER */
.site-footer{background:var(--forest-2);color:#DCE8DC;padding:64px 96px 40px;display:flex;flex-direction:column;gap:40px;}
.site-footer .footer-top{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;flex-wrap:wrap;}
.site-footer nav{display:flex;gap:36px;flex-wrap:wrap;}
.site-footer .bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;font-size:13px;color:#8FA69A;display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.nexsa-credit{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.nexsa-badge{display:inline-flex;align-items:center;line-height:0;opacity:.85;transition:opacity .15s ease;}
.nexsa-badge:hover{opacity:1;}
.nexsa-badge-logo{display:block;height:8px;width:auto;}

section{padding:96px 96px 110px;box-sizing:border-box;}
section.no-pad-top{padding-top:0;}
section.no-pad-bottom{padding-bottom:0;}
section.bg-white{background:var(--white);}
section#inicio{padding-left:0;padding-right:0;}
/* La foto de "Sobre Ascor" debe llegar a paño completo (igual que el hero);
   .sobre-ascor-body ya trae su propio padding lateral, así que anular el
   padding de la section no deja sin márgenes al resto del contenido. */
section#sobre-ascor{padding-left:0;padding-right:0;}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .35s ease, transform .35s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-group > *{opacity:0;transform:translateY(14px);transition:opacity .3s ease, transform .3s ease;}
.reveal-group.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-group.is-visible > *:nth-child(1){transition-delay:.01s;}
.reveal-group.is-visible > *:nth-child(2){transition-delay:.05s;}
.reveal-group.is-visible > *:nth-child(3){transition-delay:.09s;}
.reveal-group.is-visible > *:nth-child(4){transition-delay:.13s;}
.reveal-group.is-visible > *:nth-child(5){transition-delay:.17s;}
.reveal-group.is-visible > *:nth-child(6){transition-delay:.21s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ===== RESPONSIVE (básico) ===== */
@media (max-width: 960px){
  .site-header, section{padding-left:24px;padding-right:24px;}
  section#inicio{padding-left:0;padding-right:0;}
  section#sobre-ascor{padding-left:0;padding-right:0;}
  .site-header{height:auto;min-height:72px;flex-wrap:wrap;row-gap:0;}
  .hero-content{left:24px;right:24px;bottom:40px;gap:14px;}
  .hero-title{font-size:30px;line-height:1.18;max-width:none;}
  .hero-desc{font-size:14.5px;max-width:none;}
  .hero-wrap{height:520px;}
  .hero-dots{left:24px;right:24px;bottom:16px;justify-content:center;}
  .servicios-grid, .equipo-grid{grid-template-columns:1fr;}
  .site-footer{padding:48px 24px 32px;gap:28px;}
  .site-footer .footer-top{flex-direction:column;align-items:flex-start;gap:28px;}
  .site-footer .footer-top > div:first-child{max-width:none;}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;width:100%;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);}
  .site-footer .footer-top > div:last-child{padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);width:100%;}
  .cta-band{padding:56px 20px;}
  .cta-inner{padding:40px 32px;}
  #contactanos .contact-flex{flex-direction:column;}
  .contactanos-flex{gap:28px;}

  /* Sobre Ascor: el texto sobre la foto usaba un left:96px fijo (pensado
     para desktop) que en mobile quedaba mucho más adentro que el resto del
     contenido (gutter de 24px) — se alinea al mismo margen que todo lo demás. */
  .sobre-banner .copy{left:24px;right:24px;max-width:none;}

  /* Sobre Ascor: Cobertura + Equipo ocupan más ancho y quedan centrados */
  .sobre-ascor-body{padding:48px 24px 0;gap:40px;}
  .cobertura-header{flex-direction:column;align-items:center;text-align:center;gap:10px;}
  .cobertura-header p{text-align:center !important;max-width:none !important;}
  #sobre-ascor h3{text-align:center !important;font-size:19px !important;white-space:nowrap;}

  /* Menú móvil: logo a la izquierda, hamburguesa a la derecha */
  .menu-toggle{display:flex;order:2;z-index:61;position:relative;}
  .site-header .nav-primary{order:3;display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;}
  .nav-primary .nav-link{width:100%;padding:18px 4px;font-size:17px;border-bottom:1px solid var(--line);}
  .site-header > a.btn-primary{order:4;display:none;width:100%;justify-content:center;margin:16px 0 12px;}

  /* Menú móvil abierto: panel a pantalla completa (tapa todo bajo el header) */
  /* .site-header tiene transform:translateZ(0) Y backdrop-filter:blur(10px)
     (hacks/estilos para otros fines), y cualquiera de las dos propiedades
     convierte al header en el "contenedor" de cualquier position:fixed
     dentro de él — el panel quedaba atrapado dentro del alto del header
     en vez de cubrir toda la pantalla. Se anulan ambas solo mientras el
     menú está abierto para que el panel sí use el viewport completo. */
  .site-header.nav-open{transform:none;-webkit-transform:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .site-header.nav-open .nav-primary{
    display:flex;
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    margin:0;
    padding:8px 24px 100px;
    background:var(--paper);
    overflow-y:auto;
    z-index:60;
  }
  .site-header.nav-open > a.btn-primary{
    display:flex;
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    width:auto;
    margin:0;
    z-index:61;
    box-shadow:0 8px 24px rgba(21,32,27,0.18);
  }
  /* El panel del menú cubre toda la pantalla, pero el botón de WhatsApp
     tiene z-index propio más alto y quedaba flotando encima del botón
     "Cotizar ahora" — se oculta mientras el menú está abierto. */
  html.menu-open .wa-fab{display:none;}
  /* Bloquea el scroll del fondo mientras el menú está abierto */
  html.menu-open, html.menu-open body{overflow:hidden;height:100%;}
}