/* ========== Variables (paleta clara, sin modo oscuro) ========== */
:root{
  --brand:#F0B429;        /* Amarillo maquinaria */
  --brand-700:#D6980B;
  --brand-50:#FFF3CF;
  --sky:#8FB4CF;          /* Acento frío */
  --earth:#8B6A4E;        /* Acento cálido */
  --txt:#0B1220;
  --txt-weak:#475569;
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --border:#E5E7EB;
  --radius:14px;
  --container:1120px;
}

/* ========== Reset mínimo y utilidades ========== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,Arial,sans-serif;color:var(--txt);background:var(--bg)}
img{max-width:100%;display:block}
.container{width:min(100% - 2rem, var(--container));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ========== Navbar (mobile-first con sidebar) ========== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--surface);
  border-bottom:2px solid var(--brand);
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.5rem; padding:.6rem 1rem;
  transition: transform .3s ease, box-shadow .3s ease; /* autohide */
}
.site-header.hide{ transform: translateY(-100%); }

/* Botón hamburguesa (izquierda) */
.nav-toggle{
  font-size:1.25rem; line-height:1;
  background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:.45rem .6rem; color:var(--txt);
  justify-self:start;
}

/* Marca (centro en mobile) */
.brand{
  justify-self:center;
  text-decoration:none; color:var(--txt);
}
.brand-text{ font-weight:800; font-size:1.05rem; color:var(--txt); }

/* Logo placeholder (derecha en mobile) */
.brand-logo {
  justify-self: end;
  width: 64px;      /* tamaño más grande */
  height: auto;     /* mantiene proporción */
  border-radius: 0; /* elimina esquinas redondeadas */
  background: none; /* elimina el fondo amarillo */
  border: none;     /* sin borde */
  box-shadow: none; /* sin sombra */
}


/* Sidebar del menú en móvil */
.site-nav{
  position:fixed; inset:0 auto 0 0; width:min(78%, 320px);
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow: 8px 0 24px rgba(0,0,0,.08);
  padding: 5rem 1rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem;
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index:99; /* por encima del overlay */
}
.site-nav.open{ transform: translateX(0); }

.site-nav a{
  position:relative; /* para el subrayado animado */
  display:block;
  text-decoration:none; color:var(--txt);
  padding:.85rem 1rem; border-radius:10px;
  font-weight:700;
}
.site-nav a:hover, .site-nav a:focus{ background:var(--brand-50); }

/* Hover animado en links (subrayado desde el centro) */
.site-nav a::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0%; height:2px; background:var(--brand);
  transition: width .3s ease, left .3s ease;
}
.site-nav a:hover::after,
.site-nav a:focus::after{
  width:100%; left:0;
}

/* Overlay (click para cerrar) */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition: opacity .28s ease;
  z-index:98;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

/* ===== Desktop: marca (logo + texto) a la izquierda y menú a la derecha ===== */
@media (min-width:920px){
  .nav-toggle{ display:none; }

  /* Tres columnas: [logo][texto][nav] */
  .site-header{ grid-template-columns: auto auto 1fr; }

  /* Logo + texto juntos a la izquierda */
  .brand{
    display:flex; align-items:center; gap:.5rem;
    justify-self:start;
    order:2; /* aparece después del logo */
  }
  .brand-logo{
    justify-self:start;
    width:32px; height:32px;
    order:1; /* logo antes que el texto */
  }

  /* Menú horizontal a la derecha */
  .site-nav{
    position:static; transform:none; width:auto; height:auto;
    display:flex; flex-direction:row; align-items:center; gap:.25rem;
    background:transparent; border-right:0; box-shadow:none;
    padding:0; z-index:auto; justify-self:end;
    order:3;
  }
  /* El subrayado animado también funciona en desktop */
}

/* ========== Botones ========== */
.btn{display:inline-block;border-radius:999px;font-weight:700;text-decoration:none;
  padding:.85rem 1.1rem;border:1px solid transparent}
.btn-primary{background:var(--brand);color:#111827}
.btn-primary:hover{background:var(--brand-700)}

/* ========== Hero ========== */
.hero{position:relative;display:grid;place-items:center;min-height:72svh}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 85%);
  z-index:-1}
.hero-content{padding-block:5rem 3rem;text-align:center}
.hero h1{
  color:#fff; margin:0 0 .75rem;
  font-size:clamp(2.2rem,6vw,3.4rem); font-weight:800; letter-spacing:.3px;
  text-shadow:0 2px 6px rgba(0,0,0,.55);
}
.hero p{
  color:#f1f5f9; margin:0 0 1.2rem; max-width:62ch; margin-inline:auto;
  font-size:clamp(1rem,2vw,1.15rem); line-height:1.5;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ========== Footer (estética como navbar) ========== */
.site-footer{
  background: var(--surface);               /* blanco */
  border-top: 2px solid var(--brand);       /* línea amarilla sutil */
  box-shadow: 0 -3px 10px rgba(0,0,0,.05);  /* sombra suave superior */
  padding: 1.2rem 0;
  text-align: center;
}
.site-footer p{
  margin: 0;
  color: var(--txt);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .3px;
}

/* ===== Mejora visual del menú mobile (sin cambiar HTML) ===== */
@media (max-width: 919px){
  /* Título dentro del panel usando pseudo-elemento */
  .site-nav::before{
    content: "Menú";
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--txt);
    margin: 0 .5rem 1rem;
  }

  /* Más aire en los ítems y separadores sutiles */
  .site-nav a{ padding: 1rem 1rem; }
  .site-nav a + a{ border-top: 1px solid var(--border); }

  /* Feedback al tocar: borde izquierdo en hover/focus */
  .site-nav a:hover,
  .site-nav a:focus{
    background: color-mix(in srgb, var(--brand-50) 70%, #fff 30%);
    box-shadow: inset 4px 0 0 var(--brand);
  }
}