/* ==========================================================================
   FRISCO METALES — sitio (rebuild fiel del Wix). Limpio, mantenible, i18n.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#1a1a1a;
  --muted:#555;
  --red:#b01e28;
  --gray:#c9c9c9;
  --gray-bg:#c4c4c4;
  --line:#e6e6e6;
  --max:1180px;
  --nav:'Montserrat',-apple-system,'Segoe UI',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--nav);color:var(--ink);background:#fff;line-height:1.6;font-weight:400;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- Header / nav ---------- */
.site-header{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);}
.site-header .inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:14px 20px 10px;position:relative;}
.brand img{height:66px;width:auto;}
.nav{display:flex;gap:52px;margin-top:10px;}
.nav a{font-size:17px;font-weight:400;color:#2b2b2b;letter-spacing:.3px;padding:6px 2px;transition:color .15s;}
.nav a:hover,.nav a.active{color:var(--red);}
.lang{position:absolute;right:20px;top:50%;transform:translateY(-50%);}
.lang select{font-family:var(--nav);font-size:13px;padding:4px 8px;border:1px solid #bbb;background:#fff;color:#333;cursor:pointer;border-radius:2px;}

/* ---------- Home (logo grande centrado) ---------- */
.home-hero{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 20px;}
.home-hero img{width:min(230px,60vw);height:auto;margin-bottom:10px;}

/* ---------- Secciones genéricas ---------- */
.section{max-width:var(--max);margin:0 auto;padding:0;}
.hero-img{width:100%;height:clamp(320px,52vh,620px);object-fit:cover;}
.tagline{max-width:var(--max);margin:34px auto;padding:0 24px;font-size:clamp(20px,3vw,30px);font-weight:400;color:#222;}

/* alternante imagen | texto (About) */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.split .img{background:#000;min-height:300px;}
.split .img img{width:100%;height:100%;object-fit:cover;min-height:300px;}
.split .txt{padding:48px 56px;display:flex;flex-direction:column;justify-content:center;}
.split.reverse .img{order:2;}
.split.reverse .txt{order:1;}
.split .txt h2{font-size:22px;font-weight:500;margin-bottom:12px;color:#1a1a1a;}
.split .txt p{color:#3a3a3a;font-size:15px;}
.split .txt ul{margin:8px 0 0 18px;color:#3a3a3a;font-size:15px;}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;min-height:70vh;}
.contact .photo{background:#333 center/cover no-repeat;}
.contact .panel{background:var(--gray-bg);padding:56px 60px;}
.contact .panel h3{font-size:15px;font-weight:600;text-decoration:underline;margin:18px 0 8px;}
.contact .panel p{font-size:14px;color:#2b2b2b;margin-bottom:6px;}
.contact form{margin-top:26px;display:grid;gap:20px;}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.contact label{display:block;font-size:14px;color:#333;margin-bottom:6px;}
.contact input,.contact textarea{width:100%;border:none;border-bottom:1px solid #6b6b6b;background:transparent;padding:6px 2px;font-family:var(--nav);font-size:14px;outline:none;}
.contact textarea{min-height:60px;resize:vertical;}
.contact button{justify-self:start;background:#111;color:#fff;border:none;padding:12px 30px;font-family:var(--nav);font-size:14px;cursor:pointer;}

/* ---------- Page intro / títulos ---------- */
.page-intro{max-width:var(--max);margin:0 auto;padding:20px 24px 6px;}
.section-pad{padding:44px 24px;}

/* ---------- Materiales (Services) ---------- */
.materials{max-width:var(--max);margin:20px auto 10px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.materials .card{border:1px solid var(--line);border-top:3px solid var(--red);padding:24px 20px;background:#fff;}
.materials .card h3{font-size:18px;font-weight:600;color:var(--red);margin-bottom:8px;}
.materials .card p{font-size:14px;color:#3a3a3a;}

/* ---------- Certificaciones (About) ---------- */
.certs{max-width:var(--max);margin:0 auto;padding:40px 24px 10px;text-align:center;}
.certs h2{font-size:22px;font-weight:500;margin-bottom:8px;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:34px 20px;text-align:center;background:#fafafa;}
.site-footer img{height:52px;margin:0 auto 14px;}
.site-footer p{font-size:13px;color:#4a4a4a;margin:3px 0;}
.site-footer a{color:var(--red);}
.site-footer .copy{margin-top:12px;font-size:12px;color:#888;}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav{gap:26px;flex-wrap:wrap;justify-content:center;}
  .split,.contact{grid-template-columns:1fr;}
  .split.reverse .img{order:0;} .split.reverse .txt{order:0;}
  .split .txt{padding:32px 24px;}
  .materials{grid-template-columns:1fr 1fr;}
  .lang{position:static;transform:none;margin-top:8px;}
}
@media(max-width:520px){ .materials{grid-template-columns:1fr;} }