/* ===========================
   Chilepavimentos — Estilos base (v1.3)
   Archivo: assets/css/style.css
   =========================== */

/* --- Variables y resets --- */
:root{
  --bg:#0f1115;
  --card:#151922;
  --text:#e7eaee;
  --muted:#9aa3ad;
  --brand:#e2aa00;
  --brand-ink:#b98a00;
  --border:#22262f;

  /* Altura visual del header (ajústala si cambias padding/tamaños) */
  --nav-h: 64px;

  /* Layout */
  --container: 1100px;
  --r: 16px;
  --shadow: 0 10px 28px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:10px;
}
:focus:not(:focus-visible){outline:none}

/* Reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* --- Utilidades --- */
.container{max-width:var(--container); margin:auto; padding:0 20px}
.section-head{margin:48px 0 18px}
.grid{display:grid; gap:18px}
.hidden{display:none !important}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}

/* --- Header / Nav --- */
header.site-head{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  background:transparent; border-bottom:none;
}
/* Cinta sticky de ancho completo detrás del header */
header.site-head::before{
  content:"";
  position:fixed; top:0; left:0;
  width:100vw; height:var(--nav-h);
  background:linear-gradient(90deg,#12151b 0%,#1b1f27 100%);
  border-bottom:1px solid #262a34;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  z-index:-1;
}
.brand{font-weight:800; font-size:1.1rem; letter-spacing:.2px}
.brand span{color:var(--brand)}
/* Contenedor de enlaces */
.nav{display:flex; align-items:center; gap:14px}
.nav a{margin:0 4px; opacity:.92; transition:opacity .15s ease}
.nav a:hover{opacity:1}
.nav a.btn{margin-left:8px; opacity:1}

/* Marca de link activo (usa aria-current="page" en el HTML) */
.nav a[aria-current="page"]{
  opacity:1; color:var(--brand);
  position:relative; font-weight:800;
}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--brand); border-radius:2px;
}

/* Botón hamburguesa */
.nav-toggle{
  display:none; margin-left:auto; font-size:22px;
  background:transparent; border:1px solid #2a2f37; color:#e7eaee;
  border-radius:12px; padding:6px 10px; line-height:1;
}

/* --- Botones --- */
.btn{
  background:var(--brand); color:#111;
  padding:.8rem 1.2rem; border-radius:12px;
  font-weight:800; display:inline-block; border:0; cursor:pointer;
  transition:transform .08s ease, background .15s ease;
  box-shadow:var(--shadow);
}
.btn:hover{background:var(--brand-ink); color:#0b0b0b}
.btn:active{transform:translateY(1px)}
.btn.outline{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.btn.outline:hover{border-color:#343a46}

/* --- HERO --- */
.hero-bg{position:relative; display:grid; place-items:center; text-align:center}
.hero-img{width:100%; height:520px; object-fit:cover; filter:brightness(.55)}
.hero-content{position:absolute; inset:0; display:grid; place-items:center}
.hero-inner{padding:0 16px; max-width:860px; margin-inline:auto}
.hero-inner h1{font-size:clamp(28px,5vw,46px); line-height:1.15; margin:0 0 10px}
.hero-actions{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px}
.hero-actions a.outline{padding:.8rem 1.1rem; border-radius:12px}

/* --- Tarjetas / Cards genéricas --- */
.cards{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column; min-height:100%;
}
.card .media{aspect-ratio:16/9; width:100%; overflow:hidden; background:#0b0e12}
.card .media img{width:100%; height:100%; object-fit:cover}
.card .card-body{padding:16px; display:flex; flex-direction:column; gap:.6rem}
.card h3{margin:0 0 .25rem 0}
.card p{margin:0}
.card ul{margin:.3rem 0 0 1rem; padding:0}
.card li{margin:.15rem 0}

/* --- Galería de trabajos --- */
.works{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
figure.work{
  margin:0; background:var(--card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
}
figure.work img{width:100%; height:200px; object-fit:cover; transition:transform .25s ease}
figure.work img:hover{transform:scale(1.03)}

/* ====== Servicios (grilla uniforme y elegante) ====== */
.svc-section{ margin:48px 0 18px }
.svc-section h2{ margin:0 0 16px; font-weight:800 }
.svc-section p{margin:0 0 16px; color:#9aa3ad}

.svc-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  align-items:stretch;
}

.svc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

/* Imágenes con altura consistente (recorte sutil) */
.svc-card img{
  width:100%;
  display:block;
  aspect-ratio: 4 / 3;       /* ALTO UNIFORME */
  object-fit: cover;         /* llena sin deformar la proporción */
  object-position: center;   /* centra el recorte */
  transition: transform .28s ease, filter .28s ease;
}

/* Hover sutil */
.svc-card:hover img{ transform: scale(1.03) }

/* --- Contacto --- */
.contact-grid{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); margin:28px 0 40px}
.card-body form{display:grid; gap:12px}
.field{display:grid; gap:6px}
input, textarea{
  background:#0b0e12; border:1px solid #2a2f37; border-radius:12px;
  padding:.8rem 1rem; color:#e7eaee;
}
input::placeholder, textarea::placeholder{color:#7f8893}
textarea{min-height:140px; resize:vertical}
.help{color:var(--muted); font-size:.9rem}

/* --- Mapa dentro del card de contacto --- */
.contact-map{margin-top:16px}
.contact-map iframe{width:100%; height:300px; border:0; border-radius:12px}

/* --- Footer --- */
footer.site-foot{
  padding:28px 0; color:var(--muted);
  border-top:1px solid var(--border); margin-top:48px;
}
footer.site-foot a{color:#cfc7a0}

/* --- Ajuste de anclas: que no queden bajo el navbar --- */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* --- Responsive global --- */
@media (max-width:1100px){
  .hero-img{height:460px}
}
@media (max-width:900px){
  :root{ --nav-h: 60px; }
  .hero-img{height:420px}
}
/* Menú móvil: colapsar enlaces y mostrar hamburguesa */
@media (max-width:720px){
  .nav{
    display:none; /* oculto por defecto en móvil */
    position:absolute; right:20px; top:calc(var(--nav-h) - 6px);
    background:#0a0d13; border:1px solid #1f2430; border-radius:12px;
    padding:10px; width:min(260px, 90vw); flex-direction:column; gap:10px;
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:8px 10px; border-radius:10px; background:transparent}
  .nav a:hover{background:#0f1219}
  .nav a.btn{text-align:center}

  .nav-toggle{display:block}

  .works{grid-template-columns:1fr}
  figure.work img{height:220px}

  /* Servicios en móvil: ancho mínimo menor y relación algo más panorámica */
  .svc-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
  .svc-card img{ aspect-ratio: 16 / 10 }
}

/* ===== Nosotros (About) ===== */
.about{padding:16px 0 32px}
.about h2{margin-bottom:12px}
.about p{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
  max-width:60ch;
  margin:0;
}

.about-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;   /* texto más ancho que el logo */
  gap:32px;
  align-items:center;
}

.about-logo{ justify-self:end }        /* alinea el logo al borde derecho */

.logo-frame{
  background:linear-gradient(180deg,#0e1219 0%, #0b0e13 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
  max-width:360px;
}
.logo-frame img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
}

/* Responsive (About) */
@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr; text-align:center}
  .about p{margin-inline:auto}
  .about-logo{justify-self:center}
  .logo-frame{max-width:280px; margin-inline:auto}
}