/* =========================================================
   ASR CONSTRUCCIONES – STYLES (versión arena + logo grande)
   Archivo: styles.css
   ========================================================= */

/* ---------- Variables de color y base ---------- */
:root{
  --arena:#f3e9d2;        /* fondo general (arena suave) */
  --text:#1a1a1a;         /* texto base */
  --muted:#6b6f76;        /* texto secundario */
  --gold:#caa24a;         /* dorado principal */
  --gold-2:#efd488;       /* dorado claro para degradados */
  --line:#e0d7c7;         /* líneas / bordes */
  --wa:#25D366;           /* WhatsApp */
  --wa-dk:#128C7E;        /* WhatsApp oscuro */
  --danger:#b23636;       /* avisos */
}

/* ---------- Reset y tipografía ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
/* Tamaño base de texto más grande y adaptable */
html {
  font-size: 17px; /* tamaño general */
}

@media (min-width: 1024px) {
  html {
    font-size: 18px; /* aumenta un poco en pantallas grandes */
  }
}

body{
  margin:0;
  background:var(--arena);
  color:var(--text);
  font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.45;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
.container{ width:min(1200px, 92%); margin:0 auto }

/* =========================================================
   CABECERA (logo a la izquierda, menú a la derecha)
   ========================================================= */
.topbar{
  /* CAMBIO: fixed -> sticky para que no tape la portada */
  position:sticky; top:0; z-index:20;
  background:rgba(243,233,210,.88); /* arena translúcido */
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
  min-height:140px;            /* espacio para el logo grande */
  display:flex; align-items:center;
}
.header-inner{
  width:min(1200px,92%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:6px 0;
}

/* Logo grande y legible, alineado a la izquierda */
.brand{
  display:flex; align-items:center; gap:16px;
}
.brand-logo{
  height:500px; width:auto; max-height:none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.15));
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05 }
.brand-text strong{ font-weight:800; letter-spacing:.4px; color:var(--gold) }
.brand-text span{ font-size:.9rem; color:#6b6f76 }

/* Menú */
.site-nav{ display:flex; gap:26px; align-items:center }
.site-nav a{ font-size:18px; font-weight:600; color:#8a7633 }
.site-nav a:hover{ color:#4a4a37 }

/* Botones rápidos */
.btn{ padding:10px 14px; border-radius:8px; font-weight:700; display:inline-block; transition:.2s }
.btn-gold{ background:linear-gradient(145deg, var(--gold), var(--gold-2)); color:#ffffff; border:1px solid var(--gold) }
.btn-outline{ background:transparent; color:var(--gold); border:1px solid var(--gold) }
.btn:hover{ filter:brightness(1.05) }

/* Reservar espacio para la cabecera fija */
main{ padding-top:0; } /* CORREGIDO el ; (antes tenía coma) */

/* =========================================================
   HERO portada a ancho completo + overlay del mismo tamaño
   ========================================================= */
.hero{ position:relative }
.hero-media{
  position:relative;
  width:100vw; height:clamp(420px, 72vh, 820px);
  left:50%; margin-left:-50vw; /* Full-bleed desde container */
  /* QUITADO margin-top:140px; para no empujar doble y crear huecos */
  overflow:hidden; border-bottom:1px solid var(--line);
}
.hero-media .bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-media .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-content{
  position:absolute; inset:auto 0 28px 0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; color:#fff;
}

/* Eslogan (caligrafía dorada, una sola línea) */
.hero h1{
  font-family:'Great Vibes','Lucida Handwriting','Segoe Script',cursive;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  font-size:clamp(42px, 6.2vw, 90px);
  margin:0; line-height:1.02;
  color:var(--gold); text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.tagline{ margin:4px 0 8px; color:#f1e3bc; font-weight:600 }

/* CTA bajo el eslogan */
.cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }

/* =========================================================
   CONTACTOS (iconos originales + enlaces)
   ========================================================= */
.contacts{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-weight:600; color:#8a7633;
}
.contacts a{ display:inline-flex; align-items:center; gap:8px }
.contacts img{ width:20px; height:20px }

/* =========================================================
   SECCIÓN SERVICIOS (3 tarjetas en horizontal)
   ========================================================= */
.section{ padding:56px 0 }
.section-title{ font-size:28px; margin:0 0 18px; color:#8a7633 }
.services{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr));
  gap:18px;
}
.card{
  background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.card h3{ margin:0 0 10px; color:#8a7633 }
.card p{ margin:0; color:#555 }
.card .thumb{
  width:100%; height:210px; object-fit:cover;
  border-radius:10px; margin:0 0 12px; border:1px solid var(--line)
}

/* =========================================================
   GALERÍA (cuadrícula adaptable)
   ========================================================= */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:10px;
}
.gallery a{ position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#fff }
.gallery img{ width:100%; height:220px; object-fit:cover; transition:transform .25s }
.gallery a:hover img{ transform:scale(1.03) }

/* =========================================================
   PIE
   ========================================================= */
.footer{
  padding:22px 0; border-top:1px solid var(--line);
  background:#f6efe0; color:#6d6b65;
}
.footer .flex{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .brand-logo{ height:120px }
  main{ padding-top:0; } /* antes 128px: lo dejamos a 0 para no crear huecos */
}
@media (max-width:768px){
  .topbar{ min-height:110px }
  .brand-logo{ height:90px }
  .header-inner{ flex-direction:column; justify-content:center; gap:6px }
  .site-nav{ gap:16px; font-size:16px }
  main{ padding-top:0; } /* antes 118px: lo dejamos a 0 */
  .services{ grid-template-columns:1fr } /* tarjetas en columna en móvil */
  .hero-content{ inset:auto 0 18px 0 }
}

/* ==== FIX ICONOS CONTACTO (tamaño y color) ==== */
.contact-item { 
  display:flex; 
  align-items:center; 
  gap:8px; 
  white-space:nowrap;
  line-height:1;
}

/* Tamaño consistente para los SVG */
.contact-item .ico,
.contact-nav .ico,
.foot-links .ico {
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-block;
}

/* Asegura que el trazo/relleno sigan el color del texto */
.contact-item .ico path,
.contact-item .ico circle,
.contact-item .ico rect,
.contact-item .ico polygon,
.contact-item .ico g {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Colores de los contactos (cabecera y pie) */
.topbar .contact-item { color: var(--gold); }       /* dorado en cabecera */
.footer .contact-item { color: var(--gold); }       /* dorado en footer */

/* Evita reglas globales que inflen los SVG */
svg.ico { max-width:none !important; max-height:none !important; }