/* =====================================================================
   ZERRO ABERTURAS — Website stylesheet
   Carpintería de Aluminio · La Plata, Buenos Aires
   Clean, dependency-free CSS. Drop-in for WordPress (Custom HTML block,
   page template, or theme). Fonts self-hosted from /fonts, logos in /assets.
   ===================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:"Bebas Neue";
  src:url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Design tokens ---------- */
:root{
  --brand:#1E9DC0;          /* turquoise — primary action */
  --brand-deep:#1888A8;     /* hover / pressed         */
  --brand-light:#5CC0E2;    /* light accent            */
  --navy:#0D3B52;           /* primary dark / petroleum */
  --navy-deep:#082B3D;
  --bg:#F7F6F2;             /* off-white / cream page bg */
  --surface:#ffffff;
  --ink:#13242E;            /* headings / dark text    */
  --body:#445158;           /* body text               */
  --muted:#7A8891;          /* captions / muted        */
  --border:#E3E8EB;
  --border-strong:#CCD5DA;
  --whatsapp:#25D366;
  --whatsapp-deep:#1eb456;

  --font-display:"Bebas Neue","Arial Narrow",sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --maxw:1200px;
  --radius:8px;
  --radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(13,47,74,.08),0 1px 2px rgba(13,47,74,.05);
  --shadow-md:0 8px 24px rgba(13,47,74,.10),0 2px 6px rgba(13,47,74,.06);
  --shadow-lg:0 22px 50px rgba(13,47,74,.16);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  margin:0;font-family:var(--font-sans);color:var(--body);
  background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.eyebrow{
  font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--brand-light);}
.display{
  font-family:var(--font-display);font-weight:400;line-height:.98;letter-spacing:.012em;
  color:var(--ink);text-transform:uppercase;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-weight:700;font-size:14.5px;letter-spacing:.01em;
  padding:14px 26px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:all .16s ease;white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn--lg{padding:17px 32px;font-size:15.5px;}
.btn--sm{padding:10px 18px;font-size:13.5px;}
.btn--primary{background:var(--brand);color:#fff;}
.btn--primary:hover{background:var(--brand-deep);}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);}
.btn--outline:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.btn--outline-dark{background:transparent;color:var(--brand);border-color:var(--brand);}
.btn--outline-dark:hover{background:var(--brand);color:#fff;}
.btn--whatsapp{background:var(--whatsapp);color:#fff;}
.btn--whatsapp:hover{background:var(--whatsapp-deep);}
.btn--block{width:100%;}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:74px;
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;transition:all .25s ease;
}
.nav__inner{display:flex;align-items:center;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;gap:30px;}
.nav__logo{height:34px;cursor:pointer;}
.nav__logo--dark{display:none;}
.nav__spacer{flex:1;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:.01em;transition:color .15s;}
.nav__burger{display:none;background:none;border:none;cursor:pointer;padding:4px;color:#fff;}
.nav__burger svg{width:28px;height:28px;}
.nav__mobile{display:none;}

/* scrolled state */
.nav.is-solid{
  background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav.is-solid .nav__logo--light{display:none;}
.nav.is-solid .nav__logo--dark{display:block;}
.nav.is-solid .nav__links a{color:var(--ink);}
.nav.is-solid .nav__links a:hover{color:var(--brand);}
.nav.is-solid .nav__burger{color:var(--ink);}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(120deg,#0D3B52 0%,#0f4866 45%,#1E9DC0 135%);
}
/* Replace the gradient above with your photo (e.g. portada_01.jpg):
   .hero{ background:linear-gradient(rgba(8,34,50,.64),rgba(8,34,50,.58)),
          url("assets/hero.jpg") center/cover no-repeat; } */
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,44,.55),rgba(8,28,44,.15));}
.hero__pattern{position:absolute;inset:0;opacity:.09;
  background-image:repeating-linear-gradient(120deg,#fff 0 1px,transparent 1px 66px);}
.hero__mark{position:absolute;right:-50px;bottom:-40px;height:420px;opacity:.06;pointer-events:none;}
.hero__inner{position:relative;z-index:2;max-width:760px;padding:120px 0 90px;}
.hero h1{
  font-family:var(--font-display);font-weight:400;color:#fff;text-transform:uppercase;
  font-size:clamp(56px,9vw,110px);line-height:.92;letter-spacing:.01em;margin:0;
}
.hero__sub{margin-top:20px;font-size:20px;line-height:1.55;color:#D7E4EC;max-width:560px;}
.hero__cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.75);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
.hero__scroll svg{width:22px;height:22px;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- Quiénes somos ---------- */
.about-section{position:relative;overflow:hidden;}
.about-section::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(13,59,82,.04) 0 1px,transparent 1px 88px),
                   repeating-linear-gradient(0deg,rgba(13,59,82,.04) 0 1px,transparent 1px 88px);}
/* For a real glass texture, set: .about-section{ background:url("assets/glass-texture.jpg") center/cover; } and remove ::before */
.about{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.about__col h3{font-family:var(--font-display);font-weight:400;font-size:34px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;}
.about__col p{font-size:16.5px;line-height:1.75;color:var(--body);}
.about__rule{width:54px;height:4px;background:var(--brand);margin-bottom:22px;border-radius:2px;}

/* ---------- Materiales band ---------- */
.band{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(135deg,#0D3B52 0%,#0c4763 60%,#0D3B52 100%);}
/* For a real showroom photo, set:
   .band{ background:linear-gradient(rgba(9,34,49,.82),rgba(9,34,49,.82)), url("assets/showroom.jpg") center/cover no-repeat; } */
.band__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:300px;opacity:.05;}
.band__inner{position:relative;max-width:880px;margin:0 auto;}
.band h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:.015em;margin-bottom:20px;}
.band p{font-size:clamp(17px,2.2vw,21px);line-height:1.6;font-weight:300;color:#D6E6EE;}
.band p strong{font-weight:600;color:#fff;}

/* ---------- Líneas ---------- */
.lines__head{text-align:center;max-width:640px;margin:0 auto 52px;}
.lines__head h2{font-size:clamp(40px,5.5vw,60px);}
.lines__head p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--body);}
.lines__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.line-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;transition:all .18s ease;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.line-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--brand-light);}
.line-card__img{height:200px;overflow:hidden;background:var(--navy);}
.line-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block;}
.line-card:hover .line-card__img img{transform:scale(1.05);}
.line-card__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.line-card__icon{
  width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#E9F6FB,#D2ECF6);color:var(--brand);margin-bottom:20px;
}
.line-card__icon svg{width:28px;height:28px;}
.line-card h3{font-family:var(--font-display);font-weight:400;font-size:30px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.line-card p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.line-card__link{
  margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:flex-start;
  font-size:13.5px;font-weight:700;color:var(--brand);
  padding:9px 18px;border:2px solid var(--brand);border-radius:var(--radius);transition:all .16s ease;
}
.line-card__link:hover{background:var(--brand);color:#fff;}
.line-card__link svg{width:16px;height:16px;transition:transform .16s ease;}
.line-card:hover .line-card__link svg{transform:translateX(3px);}

/* ---------- Por qué elegirnos ---------- */
.why{background:var(--brand);color:#fff;}
.why__head{text-align:center;margin-bottom:50px;}
.why__head h2{color:#fff;font-size:clamp(40px,5.5vw,58px);}
.why__head p{margin-top:12px;color:#E2F4FB;font-size:16.5px;}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:920px;margin:0 auto;}
.feature{display:flex;gap:20px;align-items:flex-start;}
.feature__icon{
  width:58px;height:58px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;
}
.feature__icon svg{width:28px;height:28px;}
.feature h3{font-size:19px;font-weight:700;color:#fff;font-family:var(--font-sans);}
.feature p{margin-top:6px;font-size:15px;line-height:1.6;color:#DCF1F9;}

/* ---------- Contacto (dark) ---------- */
.contact{background:var(--navy);color:#fff;}
.contact__head{text-align:center;max-width:820px;margin:0 auto 50px;}
.contact__head .eyebrow{color:var(--brand-light);}
.contact__head h2{color:#fff;font-size:clamp(28px,4vw,42px);line-height:1.12;}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}
.contact__brand{margin-bottom:28px;}
.contact__brand img{height:44px;}
.contact__brand p{margin-top:12px;font-size:14.5px;color:#AFC8D4;max-width:300px;}
.contact__info{display:flex;flex-direction:column;gap:16px;}
.info-row{display:flex;gap:15px;align-items:center;}
.info-row__icon{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--brand-light);}
.info-row__icon svg{width:20px;height:20px;}
.info-row b{display:block;color:#fff;font-size:14.5px;}
.info-row span{font-size:14.5px;color:#C4D6DF;}
.info-row a{color:#C4D6DF;transition:color .15s;}
.info-row a:hover{color:#fff;}
.map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-md);}
.map iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.2) contrast(1.05);}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:#AFC3CE;}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:40px;padding:64px 0 40px;}
.footer__logo{height:36px;margin-bottom:18px;}
.footer__about{font-size:14px;line-height:1.7;max-width:300px;}
.footer__social{display:flex;gap:10px;margin-top:20px;}
.footer__social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:background .15s;}
.footer__social a:hover{background:var(--brand);}
.footer__social img{width:18px;height:18px;}
.footer__h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.footer__links a{display:block;font-size:14px;padding:6px 0;transition:color .15s;}
.footer__links a:hover{color:#fff;}
.footer__contact .info-row__icon{background:rgba(255,255,255,.08);border:none;color:var(--brand-light);}
.footer__contact .info-row b{color:#fff;}
.footer__contact .info-row span{color:#AFC3CE;}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px;font-size:13px;}

/* ---------- WhatsApp FAB ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;
  background:var(--whatsapp);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .16s,background .16s;}
.fab:hover{background:var(--whatsapp-deep);transform:translateY(-3px);}
.fab img{width:30px;height:30px;}

/* ---------- Line detail sections ---------- */
.detail{padding:88px 0;border-top:1px solid var(--border);scroll-margin-top:80px;}
.detail--tint{background:#EEF4F6;}
.detail__top{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;}
.detail--rev .detail__text{order:2;}
.detail__eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:12px;}
.detail__text h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.012em;color:var(--ink);font-size:clamp(42px,5.5vw,64px);line-height:.96;margin-bottom:18px;}
.detail__text p.lead{font-size:16.5px;line-height:1.75;color:var(--body);margin-bottom:24px;}
.spec-list{display:grid;gap:12px;margin-bottom:30px;list-style:none;padding:0;}
.spec-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);font-weight:500;}
.spec-list svg{width:22px;height:22px;flex:none;color:var(--brand);margin-top:1px;}
.detail__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.detail__back{font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:color .15s;}
.detail__back:hover{color:var(--brand);}
.detail__feature{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.detail__feature img{width:100%;height:420px;object-fit:cover;display:block;}
.detail__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.detail__gallery img{width:100%;height:210px;object-fit:cover;border-radius:var(--radius);display:block;box-shadow:var(--shadow-sm);}

/* ---------- Nav dropdown ---------- */
.nav__item{position:relative;display:flex;align-items:center;}
.nav__toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;
  font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:inherit;padding:0;letter-spacing:.01em;}
.nav__toggle svg{width:15px;height:15px;transition:transform .2s ease;}
.nav__item:hover .nav__toggle svg{transform:rotate(180deg);}
.nav__dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:210px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transition:all .18s ease;z-index:70;}
.nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav__dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
.nav__dropdown a{display:block;padding:10px 14px;border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink);transition:all .14s;}
.nav__dropdown a:hover{background:#EEF4F6;color:var(--brand);}
.nav.is-solid .nav__toggle{color:var(--ink);}

/* mobile submenu */
.nav__mobile-sub{padding:2px 0 12px 14px;}
.nav__mobile-sub a{padding:11px 8px !important;font-size:15px !important;border:none !important;color:var(--body) !important;}
.nav__mobile-sub a:first-child{border-top:1px solid var(--border) !important;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .section{padding:70px 0;}
  .about{grid-template-columns:1fr;gap:34px;}
  .lines__grid{grid-template-columns:1fr 1fr;}
  .contact__grid{grid-template-columns:1fr;gap:32px;}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px;}
  .detail{padding:60px 0;}
  .detail__top{grid-template-columns:1fr;gap:30px;}
  .detail--rev .detail__text{order:0;}
  .detail__feature img{height:300px;}
}
@media(max-width:720px){
  .nav__links{display:none;}
  .nav__burger{display:block;}
  .nav.is-open .nav__mobile{display:block;background:#fff;border-top:1px solid var(--border);
    position:absolute;top:74px;left:0;right:0;padding:8px 0 18px;box-shadow:var(--shadow-md);}
  .nav.is-open{background:rgba(255,255,255,.98);backdrop-filter:saturate(180%) blur(10px);}
  .nav.is-open .nav__logo--light{display:none;}
  .nav.is-open .nav__logo--dark{display:block;}
  .nav.is-open .nav__burger{color:var(--ink);}
  .nav__mobile a{display:block;padding:14px 24px;font-size:17px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);}
  .nav__mobile .btn{margin:14px 24px 0;width:calc(100% - 48px);}
  .why__grid{grid-template-columns:1fr;gap:24px;}
  .lines__grid{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr;}
  .hero__cta{flex-direction:column;}
  .hero__cta .btn{width:100%;}
  .detail__gallery{grid-template-columns:1fr;}
  .detail__gallery img{height:240px;}
}