/* ========== Reset + Tokens ========== */
*{box-sizing:border-box} html,body{margin:0;padding:0}
:root{
  /* Layout */
  --maxw: 1200px;
  --radius: 12px;

  /* Spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem; --s-6:3rem; --s-7:4rem;

  /* Colors */
  --bg:#0c0d0f; --bg-2:#141519;
  --surface:#181a20; --surface-2:#101216;
  --text:#f2f3f5; --muted:#b6bac4;
  --brand:#ffcc00; --brand-contrast:#111;
  --divider:rgba(255,255,255,.06);

  /* Effects */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#0c0d0f; --bg-2:#141519;
    --surface:#181a20; --surface-2:#101216;
    --text:#f2f3f5; --muted:#b6bac4;
  }
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-3)}
.section-title{margin:0 0 var(--s-4); text-align:center; font-size:clamp(1.6rem,2.8vw,2.2rem)}
.subtle{color:var(--muted)}
a{color:inherit}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:.2px;
  text-decoration:none; border-radius:var(--radius); padding:.85rem 1.15rem; transition:transform .2s ease, filter .2s ease, background .2s ease}
.btn--primary{background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--divider); background:transparent}
.btn:hover{transform:translateY(-2px); filter:brightness(.98)}

/* Utilities */
.hidden{opacity:0; transform:translateY(24px); transition:all .6s ease-out}
.visible{opacity:1; transform:none}
.divider{height:1px; background:var(--divider); margin:var(--s-6) 0}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(24,26,32,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--divider);
}
.header-inner{
  min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand-logo{height:40px; width:auto; border-radius:10px}
.brand-name{font-weight:800; letter-spacing:.3px}

/* Desktop nav */
.nav-toggle{display:none}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; align-items:center; flex-wrap:nowrap}
.site-nav a{text-decoration:none; color:var(--text); font-weight:600; opacity:.9}
.site-nav a:hover{opacity:1; color:var(--brand)}
.site-nav a.is-active{color:var(--brand); text-decoration:underline; text-underline-offset:.18em}

/* ===== Mobile nav PERMANENTE (sin hamburguesa) ===== */
@media (max-width: 900px){
  /* Oculta el botón hamburguesa */
  .nav-toggle{ display: none !important; }

  /* El header puede envolver en 2 filas: logo arriba, nav abajo */
  .header-inner{
    flex-wrap: wrap;
    padding-block: .5rem;
  }

  /* El nav pasa a barra horizontal desplazable tipo "chips" */
  .site-nav{
    width:100%;
    order: 2;                  /* aparece bajo la marca */
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-nav ul{
    gap:.5rem;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .25rem; /* separa del borde para scroll-sombra */
  }

  .site-nav ul > li a{
    display:block;
    padding: .6rem .85rem;
    border:1px solid var(--divider);
    border-radius: 999px;                 /* chip */
    background: rgba(255,255,255,.03);
    white-space: nowrap;
  }

  .site-nav a.is-active{
    color: var(--brand);
    text-decoration: none; /* el chip ya indica estado */
    border-color: rgba(255,204,0,.35);
    background: rgba(255,204,0,.08);
  }
}

/* Asegurar capas correctas si existe .hero */
.hero{ position: relative; z-index: 0; }

/* ========== InFooter (band) ========== */
.infooter{background:linear-gradient(0deg, var(--bg-2), var(--surface)); padding:var(--s-6) var(--s-3)}
.infooter-grid{display:grid; gap:2rem; grid-template-columns:1.2fr 1fr 1fr 1fr}
.infooter h3,.infooter h4{margin:0 0 .7rem}
.infooter a{text-decoration:none}
.infooter a:hover{color:var(--brand)}

.infooter-brand{display:flex; align-items:flex-start; gap:1rem}
.infooter-brand .logo-img{height:58px; width:auto; border-radius:10px; object-fit:cover}
.infooter-brand p{color:var(--muted)}

.infooter-contacto ul,.infooter-links ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.infooter-servicios .chips{list-style:none; padding:0; margin:.5rem 0 1rem; display:flex; gap:.5rem; flex-wrap:wrap}
.infooter-servicios .chips li{background:#202228; border:1px solid var(--divider); padding:.4rem .7rem; border-radius:999px}

.infooter-servicios .social{display:flex; gap:.6rem}
.infooter-servicios .social a{width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#202228; border:1px solid var(--divider)}
.infooter-servicios .social a:hover{background:#242832}

/* ========== Footer ========== */
.site-footer{background:var(--surface-2); border-top:1px solid var(--divider); padding:1rem}
.site-footer-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-3); display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted)}
.to-top{background:var(--brand); color:var(--brand-contrast); border:0; border-radius:10px; font-weight:800; padding:.5rem .8rem; cursor:pointer}
.to-top:hover{filter:brightness(.95); transform:translateY(-1px)}

/* ========== Responsive footer band ========== */
@media (max-width: 992px){ .infooter-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 580px){
  .infooter-grid{grid-template-columns:1fr}
  .site-footer-inner{flex-direction:column; align-items:flex-start}
}

/* ===== Mobile & accesibilidad extra ===== */

/* Imágenes fluidas por defecto */
img, video { max-width: 100%; height: auto; display: block; }

/* Container con padding fluido en móviles */
.container { padding-inline: clamp(16px, 4vw, 24px); }

/* Botones y targets mínimos para dedo */
.btn, .to-top, .site-nav a { min-height: 44px; }

/* Tipografía un pelín más grande en móviles pequeños */
@media (max-width: 380px){
  :root{ --s-3: .9rem; }
}

/* Reduce motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Evitar “salto” por scrollbars en iOS/Android */
html { -webkit-text-size-adjust: 100%; }