/* ==================== RESET & VARIABLES ==================== */
:root{
  --color-bg:#0A0A0A;
  --color-bg-alt:#141414;
  --color-bg-card:#171717;
  --color-accent:#F5C400;
  --color-accent-dark:#C9A100;
  --color-white:#FFFFFF;
  --color-gray-light:#B8B8B8;
  --color-gray-mid:#7A7A7A;
  --color-border:#2A2A2A;
  --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --container:1280px;
  --radius:10px;
  --transition:0.25s ease;
  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:6rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }

:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--space-2);
  box-sizing:border-box;
}

.section{
  padding:var(--space-5) 0;
  position:relative;
  scroll-margin-top:72px;
}

.section-tag{
  display:inline-block;
  color:var(--color-accent);
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-size:0.75rem;
  margin-bottom:var(--space-1);
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 6vw, 3.2rem);
  letter-spacing:0.02em;
  line-height:1.05;
  margin-bottom:var(--space-2);
  text-transform:uppercase;
}

.section-subtitle{
  color:var(--color-gray-light);
  font-size:clamp(0.95rem, 1.5vw, 1.1rem);
  max-width:640px;
}

.section-head{
  text-align:center;
  margin:0 auto var(--space-4);
  max-width:720px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:0.85rem 1.75rem;
  border-radius:6px;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.02em;
  border:2px solid transparent;
  transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-accent);
  color:var(--color-bg);
}
.btn-primary:hover, .btn-primary:focus-visible{
  background:var(--color-accent-dark);
  transform:translateY(-2px);
}
.btn-outline{
  background:transparent;
  border-color:var(--color-accent);
  color:var(--color-accent);
}
.btn-outline:hover, .btn-outline:focus-visible{
  background:var(--color-accent);
  color:var(--color-bg);
  transform:translateY(-2px);
}
.btn-block{ width:100%; }

/* ==================== REVEAL ANIMATION ==================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==================== NAVBAR ==================== */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
}
.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo img{
  height:34px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  list-style:none;
}
.nav-links a{
  font-size:0.95rem;
  font-weight:600;
  color:var(--color-gray-light);
  transition:color var(--transition);
  position:relative;
  padding:0.25rem 0;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--color-white); }
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--color-accent);
  transition:width var(--transition);
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{ display:none; }

.hamburger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px; height:44px;
  background:transparent;
  border:none;
  z-index:1001;
}
.hamburger span{
  display:block;
  width:26px; height:2px;
  background:var(--color-white);
  transition:transform var(--transition), opacity var(--transition);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-menu{
  position:fixed;
  top:72px; left:0; right:0;
  background:var(--color-bg-alt);
  border-bottom:1px solid var(--color-border);
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.nav-menu.is-open{ max-height:420px; }
.nav-menu .nav-links{
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:var(--space-2) var(--space-2) var(--space-3);
}
.nav-menu .nav-links a{
  display:block;
  width:100%;
  padding:0.85rem 0;
  border-bottom:1px solid var(--color-border);
}
.nav-menu .nav-cta{
  display:block;
  margin-top:var(--space-2);
}

/* ==================== HERO ==================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:110px;
  padding-bottom:var(--space-5);
  overflow:hidden;
  isolation:isolate;
}
.hero-stripe{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(135deg, transparent 55%, rgba(245,196,0,0.12) 55.5%, rgba(245,196,0,0.12) 62%, transparent 62.5%),
    linear-gradient(135deg, transparent 70%, rgba(245,196,0,0.06) 70.5%, rgba(245,196,0,0.06) 84%, transparent 84.5%);
  pointer-events:none;
}
.hero-stripe::after{
  content:'';
  position:absolute;
  top:-10%; right:-30%;
  width:70%; height:130%;
  background:var(--color-accent);
  clip-path:polygon(60% 0, 100% 0, 40% 100%, 0% 100%);
  opacity:0.9;
  filter:blur(0px);
}
.hero-stripe::before{
  content:'';
  position:absolute;
  top:0; right:-45%;
  width:70%; height:100%;
  background:#fff;
  opacity:0.03;
  clip-path:polygon(60% 0, 100% 0, 40% 100%, 0% 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:680px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--color-accent);
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-size:0.75rem;
  margin-bottom:var(--space-2);
}
.hero-eyebrow::before{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:var(--color-accent);
  display:inline-block;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 8vw, 4.5rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin-bottom:var(--space-2);
}
.hero h1 em{
  color:var(--color-accent);
  font-style:normal;
}
.hero p{
  color:var(--color-gray-light);
  font-size:clamp(1rem, 2vw, 1.2rem);
  margin-bottom:var(--space-3);
  max-width:520px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:var(--space-4);
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  color:var(--color-gray-mid);
  font-size:0.85rem;
}
.hero-meta strong{ color:var(--color-white); }

/* ==================== SERVICIOS ==================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--space-3);
}
.service-card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-3);
  transition:transform var(--transition), border-color var(--transition), background var(--transition);
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--color-accent);
  background:#1c1c1c;
}
.service-icon{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(245,196,0,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-accent);
  margin-bottom:var(--space-2);
  transition:background var(--transition), transform var(--transition);
}
.service-card:hover .service-icon{
  background:var(--color-accent);
  color:var(--color-bg);
  transform:scale(1.08) rotate(-4deg);
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{
  font-family:var(--font-display);
  font-size:1.35rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.service-card p{
  color:var(--color-gray-light);
  font-size:0.92rem;
}

/* ==================== NOSOTROS / TIMELINE ==================== */
.about-intro{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.about-card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius);
  padding:var(--space-3);
}
.about-card h4{
  font-family:var(--font-display);
  letter-spacing:0.03em;
  color:var(--color-accent);
  font-size:1.1rem;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.about-card p{ color:var(--color-gray-light); font-size:0.92rem; }

.timeline{
  position:relative;
  padding-left:32px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:9px; top:0; bottom:0;
  width:2px;
  background:var(--color-border);
}
.timeline-item{
  position:relative;
  padding-bottom:var(--space-4);
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  left:-32px; top:2px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--color-bg);
  border:3px solid var(--color-accent);
}
.timeline-year{
  font-family:var(--font-display);
  color:var(--color-accent);
  font-size:1.6rem;
  letter-spacing:0.03em;
}
.timeline-item h4{
  font-size:1.05rem;
  font-weight:700;
  margin:0.25rem 0 0.4rem;
}
.timeline-item p{
  color:var(--color-gray-light);
  font-size:0.9rem;
  max-width:520px;
}

/* ==================== CLIENTES ==================== */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--space-2);
}
.client-logo{
  background:#ffffff;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-2);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
  text-align:center;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.client-logo:hover{
  border-color:var(--color-accent);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(245,196,0,0.15);
}
.client-logo--dark{
  background:#1a1a2e;
}
.client-logo img{
  max-height:64px;
  max-width:150px;
  width:auto;
  object-fit:contain;
  transition:transform var(--transition);
}
.client-logo:hover img{
  transform:scale(1.06);
}

/* ==================== ESTADISTICAS ==================== */
.stats-section{
  background:linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-3);
  text-align:center;
}
.stat-number{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 6vw, 3.5rem);
  color:var(--color-accent);
  line-height:1;
}
.stat-label{
  color:var(--color-gray-light);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:0.4rem;
}

/* ==================== CONTACTO ==================== */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}
.contact-info h3{
  font-family:var(--font-display);
  font-size:1.6rem;
  text-transform:uppercase;
  margin-bottom:var(--space-2);
  color:var(--color-accent);
}
.contact-info ul{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.contact-info li{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  color:var(--color-gray-light);
  font-size:0.95rem;
}
.contact-info li svg{
  width:20px; height:20px;
  color:var(--color-accent);
  flex-shrink:0;
  margin-top:2px;
}

.contact-form{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-3);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-2);
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.form-field.full{ grid-column:1 / -1; }
.form-field label{
  font-size:0.8rem;
  font-weight:600;
  color:var(--color-gray-light);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.form-field input,
.form-field textarea{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:6px;
  padding:0.85rem 1rem;
  color:var(--color-white);
  font-size:0.95rem;
  width:100%;
  min-height:44px;
  transition:border-color var(--transition);
}
.form-field textarea{ min-height:110px; resize:vertical; }
.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--color-accent);
  outline:none;
}
.form-field input.error,
.form-field textarea.error{
  border-color:#e35555;
}
.field-error{
  font-size:0.78rem;
  color:#e35555;
  min-height:1em;
}
.form-success{
  display:none;
  align-items:center;
  gap:0.6rem;
  background:rgba(245,196,0,0.12);
  border:1px solid var(--color-accent);
  color:var(--color-accent);
  padding:0.9rem 1rem;
  border-radius:6px;
  margin-top:var(--space-2);
  font-size:0.9rem;
  font-weight:600;
}
.form-success.is-shown{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

/* ==================== FOOTER ==================== */
.footer{
  background:var(--color-bg-alt);
  border-top:1px solid var(--color-border);
  padding:var(--space-5) 0 var(--space-2);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.footer-brand .logo{ margin-bottom:0.75rem; }
.footer-brand p{
  color:var(--color-gray-mid);
  font-size:0.9rem;
  max-width:320px;
}
.footer-social{
  display:flex;
  gap:0.75rem;
  margin-top:var(--space-2);
}
.footer-social a{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-gray-light);
  transition:border-color var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover, .footer-social a:focus-visible{
  border-color:var(--color-accent);
  color:var(--color-accent);
  transform:translateY(-3px);
}
.footer-social svg{ width:18px; height:18px; }

.footer-col h5{
  font-family:var(--font-display);
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:1rem;
  color:var(--color-white);
  margin-bottom:var(--space-2);
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.footer-col a{
  color:var(--color-gray-mid);
  font-size:0.9rem;
  transition:color var(--transition);
}
.footer-col a:hover, .footer-col a:focus-visible{ color:var(--color-accent); }

.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  align-items:center;
  text-align:center;
  padding-top:var(--space-3);
  color:var(--color-gray-mid);
  font-size:0.8rem;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}
.footer-legal a{ color:var(--color-gray-mid); font-size:0.8rem; }
.footer-legal a:hover{ color:var(--color-accent); }

/* ==================== BREAKPOINTS ==================== */

/* Tablet: 768px */
@media (min-width:768px){
  .section{ padding:var(--space-6) 0; }
  .hero{ padding-top:130px; }
  .hero-actions{ flex-wrap:nowrap; }
  .about-intro{ grid-template-columns:repeat(3, 1fr); }
  .stats-grid{ grid-template-columns:repeat(4, 1fr); }
  .contact-form .form-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
}

/* Desktop: 1024px */
@media (min-width:1024px){
  .hamburger{ display:none; }
  .nav-menu{
    position:static;
    max-height:none;
    overflow:visible;
    background:transparent;
    border-bottom:none;
  }
  .nav-menu .nav-links{
    flex-direction:row;
    align-items:center;
    padding:0;
    gap:var(--space-4);
  }
  .nav-menu .nav-links a{
    width:auto;
    padding:0.25rem 0;
    border-bottom:none;
  }
  .nav-menu .nav-cta{ display:none; }
  .navbar .nav-cta.desktop-cta{ display:inline-flex; }

  .hero-content{ max-width:640px; }

  .contact-wrap{ grid-template-columns:0.8fr 1.2fr; }

  /* alternating timeline on desktop */
  .timeline{
    padding-left:0;
    max-width:900px;
    margin:0 auto;
  }
  .timeline::before{ left:50%; transform:translateX(-50%); }
  .timeline-item{
    width:50%;
    padding:0 var(--space-4) var(--space-4);
  }
  .timeline-item:nth-child(odd){
    margin-left:0;
    text-align:right;
  }
  .timeline-item:nth-child(even){
    margin-left:50%;
    text-align:left;
  }
  .timeline-dot{
    left:auto;
    top:2px;
  }
  .timeline-item:nth-child(odd) .timeline-dot{ right:-42px; left:auto; }
  .timeline-item:nth-child(even) .timeline-dot{ left:-42px; }
  .timeline-item:nth-child(odd) p{ margin-left:auto; }
}

/* Large desktop: 1280px */
@media (min-width:1280px){
  .hero h1{ font-size:clamp(3.2rem, 6vw, 4.75rem); }
  .services-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Small mobile tweak: 480px */
@media (max-width:480px){
  .hero-meta{ flex-direction:column; gap:0.5rem; }
  .btn{ width:100%; }
  .hero-actions{ flex-direction:column; }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:var(--space-2); }
}