/* ==========================================================================
   V1 CARPINTERÍA INTEGRAL — Design tokens
   Paleta: negro profundo + blanco + latón/dorado como acento de marca
   Tipografía: Big Shoulders Display (titulares, condensada e industrial)
                + Work Sans (texto, cálida y legible)
   ========================================================================== */

:root{
  --black:        #0a0a09;
  --black-2:      #131311;
  --black-3:      #1c1c19;
  --white:        #ffffff;
  --bone:         #f3f1ec;
  --stone:        #b9b6ad;
  --stone-dim:    #86837a;
  --gold:         #c99a3d;
  --gold-light:   #e3c07c;
  --gold-dim:     #8a6b2c;
  --line-dark:    rgba(255,255,255,.14);
  --line-light:   rgba(10,10,9,.12);

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body:    "Work Sans", sans-serif;

  --container: 1240px;
  --gutter: 1.5rem;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold); color:var(--black); }

:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.96;
  margin:0;
}

p{ margin:0; }

.container-v1{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
@media (max-width:560px){
  :root{ --gutter: 1.1rem; }
}

/* Section rhythm ---------------------------------------------------------- */
.section{
  position:relative;
  padding:7rem 0;
}
.section--tight{ padding:4.5rem 0; }
.section--bone{
  background:var(--bone);
  color:var(--black);
}
.section--bone h1,.section--bone h2,.section--bone h3,.section--bone h4{ color:var(--black); }
.section--bone .eyebrow{ color:var(--gold-dim); }
.section--black2{ background:var(--black-2); }

@media (max-width:900px){
  .section{ padding:5rem 0; }
  .section--tight{ padding:3.5rem 0; }
}
@media (max-width:560px){
  .section{ padding:3.75rem 0; }
  .section--tight{ padding:3rem 0; }
}

.kicker{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:1.1rem;
  flex-wrap:wrap;
}
.kicker__num{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--gold);
  letter-spacing:.06em;
}
.kicker__label{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stone);
}
.section--bone .kicker__label{ color:var(--stone-dim); }

.heading-xl{
  font-size:clamp(2.2rem, 9vw, 5.2rem);
}
.heading-lg{
  font-size:clamp(1.9rem, 6vw, 3.6rem);
}
.heading-md{
  font-size:clamp(1.4rem, 4vw, 2.1rem);
}

.lede{
  font-size:clamp(1rem, 2.4vw, 1.25rem);
  color:var(--stone);
  max-width:640px;
  font-weight:400;
}
.section--bone .lede{ color:#4a4840; }

.body-copy{
  color:var(--stone);
  max-width:56ch;
  font-size:.98rem;
}
.section--bone .body-copy{ color:#3d3b34; }

.rule{
  height:1px;
  width:100%;
  background:var(--line-dark);
  border:0;
  margin:0;
}
.section--bone .rule{ background:var(--line-light); }

/* Buttons ------------------------------------------------------------------ */
.btn-v1{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.9rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn-v1--gold{
  background:var(--gold);
  color:var(--black);
}
.btn-v1--gold:hover{ background:var(--gold-light); }
.btn-v1--ghost-dark{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.35);
}
.btn-v1--ghost-dark:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }
.btn-v1--ghost-light{
  background:transparent;
  color:var(--black);
  border-color:rgba(10,10,9,.3);
}
.btn-v1--ghost-light:hover{ border-color:var(--black); background:rgba(10,10,9,.05); }
.btn-v1--sm{ padding:.68rem 1.35rem; font-size:.82rem; }

.icon-wa{ width:18px; height:18px; flex:0 0 auto; }

@media (max-width:480px){
  .btn-v1{ padding:.85rem 1.4rem; font-size:.88rem; width:100%; }
  .hero__actions .btn-v1,
  .hero__actions a.btn-v1{ width:100%; }
  .hero__actions{ width:100%; }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav-v1{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:1.15rem 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav-v1.is-scrolled{
  background:rgba(10,10,9,.92);
  backdrop-filter:blur(10px);
  padding:.75rem 0;
  border-bottom-color:var(--line-dark);
}
.nav-v1__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.nav-v1__brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}
.nav-v1__brand img{ height:40px; width:auto; transition:height .4s var(--ease); flex:0 0 auto; }
.nav-v1.is-scrolled .nav-v1__brand img{ height:34px; }
.nav-v1__brandtext{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-v1__brandtext span{ display:block; font-family:var(--font-body); font-size:.58rem; letter-spacing:.18em; color:var(--stone); text-transform:uppercase; font-weight:500; margin-top:.2rem; }

@media (max-width:420px){
  .nav-v1__brandtext span{ display:none; }
  .nav-v1__brand img{ height:32px; }
}

.nav-v1__links{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  margin:0; padding:0;
}
.nav-v1__links a{
  font-size:.83rem;
  letter-spacing:.03em;
  color:var(--bone);
  position:relative;
  padding:.3rem 0;
}
.nav-v1__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-v1__links a:hover::after{ width:100%; }

.nav-v1__cta{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }

.nav-toggle{
  display:none;
  width:26px; height:20px;
  position:relative;
  background:none; border:0;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.is-open span:nth-child(1){ top:9px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

@media (max-width: 991px){
  .nav-v1__links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    height:100dvh;
    width:min(80vw, 360px);
    background:var(--black-2);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.6rem;
    padding:2rem 2.4rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid var(--line-dark);
    overflow-y:auto;
  }
  .nav-v1__links.is-open{ transform:translateX(0); }
  .nav-v1__links a{ font-size:1.15rem; }
  .nav-toggle{ display:block; z-index:1200; }
  .nav-v1__cta .btn-v1--sm span.btn-label{ display:none; }
  .nav-v1__cta .btn-v1--sm{ padding:.6rem .8rem; }
}
@media (max-width:340px){
  .nav-v1__cta .btn-v1--sm{ display:none; }
}

/* Backdrop for mobile menu */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  z-index:999;
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:linear-gradient(160deg,#151412 0%, #0a0a09 60%);
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.62;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(10,10,9,.96) 0%, rgba(10,10,9,.55) 42%, rgba(10,10,9,.35) 100%),
    linear-gradient(100deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 45%);
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:8rem 0 3rem;
}
.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--gold-light);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero__eyebrow::before{
  content:"";
  width:34px; height:1px; background:var(--gold);
  flex:0 0 auto;
}
.hero__title{
  font-size:clamp(2.4rem, 9vw, 6.4rem);
  color:var(--white);
  max-width:16ch;
}
.hero__title em{
  font-style:normal;
  color:var(--gold);
}
.hero__row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-top:2rem;
}
.hero__sub{
  max-width:34ch;
  color:var(--stone);
  font-size:1rem;
}
.hero__actions{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.hero__stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.5rem;
  margin-top:3rem;
  padding-top:1.8rem;
  border-top:1px solid var(--line-dark);
}
.hero__stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--white);
  line-height:1;
}
.hero__stat span{
  display:block;
  margin-top:.4rem;
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--stone);
}
.hero__scroll{
  position:absolute;
  right:var(--gutter);
  bottom:2rem;
  z-index:2;
  writing-mode:vertical-rl;
  display:flex; align-items:center; gap:.8rem;
  color:var(--stone);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero__scroll::after{
  content:"";
  width:1px; height:46px;
  background:linear-gradient(var(--gold), transparent);
}
@media (max-width: 767px){
  .hero__scroll{ display:none; }
}
@media (max-width:640px){
  .hero__content{ padding:7rem 0 2.4rem; }
  .hero__stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem 1rem; }
  .hero__row{ align-items:flex-start; }
  .hero__actions{ width:100%; }
}
@media (min-width:641px) and (max-width:900px){
  .hero__stats{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.2rem; }
}

/* ==========================================================================
   TRUST / MARQUEE STRIP
   ========================================================================== */
.strip{
  background:var(--black-2);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:1.5rem 0;
  overflow:hidden;
}
.strip__track{
  display:flex;
  gap:3.5rem;
  white-space:nowrap;
  animation:marquee 32s linear infinite;
  width:max-content;
}
.strip__track span{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.05em;
  color:var(--stone);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:3.5rem;
}
.strip__track span i{ color:var(--gold); font-style:normal; margin-right:3.5rem; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .strip{ padding:1.1rem 0; }
  .strip__track span{ font-size:.85rem; gap:2rem; }
  .strip__track span i{ margin-right:2rem; }
  .strip__track{ gap:2rem; animation-duration:22s; }
}

/* ==========================================================================
   PRIORITY SECTION HEADER (used per product category)
   ========================================================================== */
.cat-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.6rem;
  margin-bottom:3.2rem;
}
.cat-head__num{
  font-family:var(--font-display);
  font-size:5.5rem;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--line-dark);
}
.section--bone .cat-head__num{ -webkit-text-stroke:1px var(--line-light); }
@media (max-width:900px){
  .cat-head{ margin-bottom:2.4rem; }
}

/* ==========================================================================
   GALERÍAS — feature layout
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border:1px solid var(--line-dark);
}
.split__media{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__body{
  padding:3.2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.4rem;
  background:var(--black-2);
}
.split--reverse{ direction:rtl; }
.split--reverse > *{ direction:ltr; }

@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .split__media{ min-height:260px; }
  .split__body{ padding:2rem 1.6rem; }
}
@media (max-width:560px){
  .split__media{ min-height:220px; }
  .split__body{ padding:1.8rem 1.2rem; gap:1.1rem; }
}

.tag-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.2rem; }
.tag{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  border:1px solid var(--line-dark);
  color:var(--stone);
  display:inline-block;
}
.section--bone .tag{ border-color:var(--line-light); color:#4a4840; }

.check-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.check-list li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  color:var(--stone);
  font-size:.92rem;
}
.section--bone .check-list li{ color:#3d3b34; }
.check-list li::before{
  content:"";
  width:6px; height:6px;
  margin-top:.55rem;
  background:var(--gold);
  flex:0 0 auto;
}

/* Compare pair (ventajas/desventajas or option A/B) */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-top:1.5rem;
}
.compare__card{
  border:1px solid var(--line-dark);
  padding:1.6rem;
}
.section--bone .compare__card{ border-color:var(--line-light); }
.compare__card h4{
  font-size:1.05rem;
  margin-bottom:.9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.compare__card h4::before{
  content:"";
  width:8px; height:8px;
  background:var(--gold);
  flex:0 0 auto;
}
@media (max-width:640px){
  .compare{ grid-template-columns:1fr; gap:1.1rem; }
  .compare__card{ padding:1.3rem; }
}

/* ==========================================================================
   CAROUSEL (bootstrap carousel skin)
   ========================================================================== */
.v1-carousel{
  position:relative;
  border:1px solid var(--line-dark);
}
.v1-carousel .carousel-item{
  height:520px;
}
.v1-carousel .carousel-item img{
  width:100%; height:100%; object-fit:cover;
}
.v1-carousel .carousel-caption{
  text-align:left;
  left:0; right:0; bottom:0;
  padding:2rem 2.2rem;
  background:linear-gradient(0deg, rgba(10,10,9,.85), transparent);
}
.v1-carousel .carousel-caption h5{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.3rem;
  color:var(--white);
  margin-bottom:.2rem;
}
.v1-carousel .carousel-caption p{ font-size:.85rem; color:var(--stone); }
.v1-carousel .carousel-control-prev,
.v1-carousel .carousel-control-next{
  width:60px;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.v1-carousel:hover .carousel-control-prev,
.v1-carousel:hover .carousel-control-next{ opacity:1; }
.v1-carousel .carousel-control-prev-icon,
.v1-carousel .carousel-control-next-icon{
  width:2.2rem; height:2.2rem;
  background-color:rgba(10,10,9,.55);
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background-size:1rem;
  padding:1.1rem;
}
.v1-carousel .carousel-indicators{ margin-bottom:.4rem; }
.v1-carousel .carousel-indicators [data-bs-target]{
  width:26px; height:2px;
  background-color:rgba(255,255,255,.35);
  border:0; opacity:1;
}
.v1-carousel .carousel-indicators .active{ background-color:var(--gold); }
@media (max-width:640px){
  .v1-carousel .carousel-item{ height:280px; }
  .v1-carousel .carousel-caption{ padding:1.2rem 1.2rem 1.4rem; }
  .v1-carousel .carousel-caption h5{ font-size:1.05rem; }
  .v1-carousel .carousel-caption p{ font-size:.78rem; }
  .v1-carousel .carousel-control-prev,
  .v1-carousel .carousel-control-next{
    opacity:.85;
    width:44px;
  }
  .v1-carousel .carousel-control-prev-icon,
  .v1-carousel .carousel-control-next-icon{
    width:1.7rem; height:1.7rem; padding:.85rem;
  }
}
@media (min-width:641px) and (max-width:900px){
  .v1-carousel .carousel-item{ height:400px; }
}

/* ==========================================================================
   PRODUCT / CATALOG CARDS (muebles outdoor)
   ========================================================================== */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
@media (max-width:900px){ .catalog-grid{ grid-template-columns:1fr 1fr; gap:1.1rem; } }
@media (max-width:560px){ .catalog-grid{ grid-template-columns:1fr; gap:1.1rem; } }

.catalog-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-dark);
  background:var(--black-2);
}
.catalog-card__media{
  aspect-ratio:4/5;
  overflow:hidden;
}
.catalog-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.catalog-card:hover .catalog-card__media img{ transform:scale(1.06); }
.catalog-card__body{
  padding:1.4rem 1.5rem 1.6rem;
}
.catalog-card__body h4{
  font-size:1.25rem;
  margin-bottom:.5rem;
}
.catalog-card__body p{
  color:var(--stone);
  font-size:.88rem;
  margin-bottom:1rem;
}
.catalog-card__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--gold-light);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.catalog-card:hover .catalog-card__link{ border-color:var(--gold-light); }

/* ==========================================================================
   SYSTEM CARDS (barandas / mamparas)
   ========================================================================== */
.system-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
@media (max-width:991px){ .system-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .system-grid{ grid-template-columns:1fr; } }

.system-card{
  background:var(--black-2);
  padding:2rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
@media (max-width:560px){
  .system-card{ padding:1.6rem 1.3rem; }
}
.system-card__num{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--gold);
}
.system-card h4{ font-size:1.15rem; }
.system-card p{ color:var(--stone); font-size:.85rem; }
.system-card__meta{
  margin-top:auto;
  padding-top:.9rem;
  border-top:1px solid var(--line-dark);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--stone-dim);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.system-card__meta b{ color:var(--gold-light); font-weight:600; }

/* ==========================================================================
   FEATURE LIST (ventanas RPT — líneas / vidrios / colores)
   ========================================================================== */
.spec-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.2rem;
}
@media (max-width:900px){ .spec-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; } }
@media (max-width:560px){ .spec-grid{ grid-template-columns:1fr; gap:1.6rem; } }
.spec-grid__item h5{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.95rem;
  letter-spacing:.03em;
  color:var(--gold-light);
  margin-bottom:.8rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line-dark);
}
.spec-grid__item ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.spec-grid__item li{ color:var(--stone); font-size:.9rem; }

/* ==========================================================================
   ABOUT / NOSOTROS
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
  align-items:start;
}
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:2.5rem; } }

.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
  margin-top:2.2rem;
}
.about-stat{
  background:var(--bone);
  padding:1.6rem;
}
@media (max-width:480px){
  .about-stat{ padding:1.2rem; }
}
.about-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2.6rem;
  color:var(--black);
  line-height:1;
}
.about-stat span{ font-size:.78rem; color:#5a584f; letter-spacing:.02em; }

.pillar-list{
  display:flex;
  flex-direction:column;
}
.pillar{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:1.4rem;
  padding:1.7rem 0;
  border-bottom:1px solid var(--line-light);
}
.pillar:first-child{ padding-top:0; }
.pillar__num{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--gold-dim);
}
.pillar h4{ font-size:1.15rem; margin-bottom:.5rem; color:var(--black); }
.pillar p{ font-size:.92rem; color:#4a4840; max-width:52ch; }
@media (max-width:480px){
  .pillar{ grid-template-columns:44px 1fr; gap:1rem; padding:1.3rem 0; }
}

/* ==========================================================================
   PROCESO — steps
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  counter-reset:step;
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{
  padding:2rem 1.8rem 2rem 0;
  position:relative;
}
.step__num{
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--gold);
  line-height:1;
  margin-bottom:1rem;
  display:block;
}
.step h4{ font-size:1.05rem; margin-bottom:.6rem; }
.step p{ font-size:.87rem; color:var(--stone); }
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:2.6rem; right:0;
  width:1px; height:calc(100% - 4rem);
  background:var(--line-dark);
}
@media (max-width:900px){ .step:not(:last-child)::after{ display:none; } .step{ border-bottom:1px solid var(--line-dark); padding-bottom:1.6rem; } }
@media (max-width:560px){ .step{ padding:1.6rem 0; } }

/* ==========================================================================
   ZONA DE TRABAJO
   ========================================================================== */
.zone-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.6rem;
}
.zone-chip{
  padding:.6rem 1.15rem;
  border:1px solid var(--line-dark);
  font-size:.85rem;
  color:var(--bone);
  letter-spacing:.02em;
}
.zone-chip--dim{ color:var(--stone-dim); border-style:dashed; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:0;
  border:1px solid var(--line-dark);
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-panel{
  padding:3.4rem;
  background:var(--black-2);
}
@media (max-width:900px){ .contact-panel{ padding:2.4rem 1.8rem; } }
@media (max-width:480px){ .contact-panel{ padding:2rem 1.3rem; } }

.contact-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--line-dark);
}
.contact-item:last-child{ border-bottom:0; }
.contact-item dt{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone-dim);
}
.contact-item dd{
  margin:0;
  font-size:.98rem;
  color:var(--bone);
  word-break:break-word;
}
.contact-item a:hover{ color:var(--gold-light); }
@media (max-width:420px){
  .contact-item{ grid-template-columns:1fr; gap:.35rem; }
}

/* Contact form panel (WhatsApp) ------------------------------------------ */
.contact-panel--form{
  background:var(--gold);
  color:var(--black);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-panel--form h3{ color:var(--black); margin-bottom:.6rem; }
.contact-form__intro{
  color:rgba(10,10,9,.72);
  font-size:.92rem;
  margin-bottom:1.6rem;
  max-width:48ch;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.contact-form__row{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.contact-form__row label{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(10,10,9,.65);
}
.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--black);
  background:rgba(10,10,9,.06);
  border:1px solid rgba(10,10,9,.3);
  border-radius:2px;
  padding:.75rem .9rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.contact-form__row textarea{ resize:vertical; min-height:100px; }
.contact-form__row input::placeholder,
.contact-form__row textarea::placeholder{ color:rgba(10,10,9,.45); }
.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus{
  outline:none;
  border-color:var(--black);
  background:rgba(10,10,9,.1);
}
.contact-form__row select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a09' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:1rem;
  padding-right:2.4rem;
  cursor:pointer;
}
.contact-form__submit{
  margin-top:.4rem;
  background:var(--black);
  color:var(--white);
  border-color:var(--black);
  width:100%;
}
.contact-form__submit:hover{
  background:var(--black-2);
  border-color:var(--black-2);
}
.contact-form__submit .icon-wa{ color:#25D366; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-v1{
  background:var(--black);
  border-top:1px solid var(--line-dark);
  padding:4.5rem 0 2rem;
}
@media (max-width:900px){ .footer-v1{ padding:3.2rem 0 1.6rem; } }
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:2.5rem;
  padding-bottom:3rem;
}
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:2rem; padding-bottom:2.2rem; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; gap:2.2rem; } }

.footer-brand img{ height:52px; margin-bottom:1.1rem; }
.footer-brand p{ color:var(--stone); font-size:.88rem; max-width:32ch; }
.footer-social{ display:flex; gap:.9rem; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px;
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.footer-social a:hover{ border-color:var(--gold); background:rgba(201,154,61,.08); }
.footer-social svg{ width:16px; height:16px; }

.footer-col h5{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--stone);
  margin-bottom:1.1rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:var(--bone); font-size:.9rem; }
.footer-col a:hover{ color:var(--gold-light); }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding-top:2rem;
  border-top:1px solid var(--line-dark);
  font-size:.8rem;
  color:var(--stone-dim);
  text-align:center;
}
.footer-bottom a{ color:var(--stone); }
.footer-bottom a:hover{ color:var(--gold-light); }
@media (max-width:560px){
  .footer-bottom{ flex-direction:column; gap:.6rem; }
}

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  z-index:1100;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--gold);
  color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); background:var(--gold-light); }
.wa-float svg{ width:28px; height:28px; }
@media (max-width:560px){
  .wa-float{
    width:50px; height:50px;
    right:1rem;
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .wa-float svg{ width:24px; height:24px; }
}

/* ==========================================================================
   SCROLL REVEAL (single orchestrated moment per element)
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   MISSING-IMAGE PLACEHOLDER TREATMENT
   (developer handoff: makes it obvious which file to drop in)
   ========================================================================== */
.img-box{
  position:relative;
  width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#1c1c19, #0a0a09);
}
.img-box img{ width:100%; height:100%; object-fit:cover; }
.img-box.is-missing img{ opacity:0; }
.img-box__label{
  display:none;
  position:absolute; inset:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.4rem;
  text-align:center;
  padding:1rem;
}
.img-box.is-missing .img-box__label{ display:flex; }
.img-box__label span{
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stone-dim);
}
.img-box__label code{
  font-family:monospace;
  font-size:.72rem;
  color:var(--gold-light);
  background:rgba(255,255,255,.06);
  padding:.3rem .6rem;
  border:1px dashed var(--line-dark);
  word-break:break-all;
}

/* Utility --------------------------------------------------------------- */
.mt-auto{ margin-top:auto; }
.text-gold{ color:var(--gold); }
.d-mobile-none{ }
@media (max-width:767px){ .d-mobile-none{ display:none !important; } }

/* Extra small screens: general tightening -------------------------------- */
@media (max-width:360px){
  .heading-xl{ font-size:2rem; }
  .heading-lg{ font-size:1.7rem; }
  .btn-v1{ font-size:.84rem; padding:.8rem 1.2rem; }
}



/* ==========================================================================
   AJUSTE DE IMÁGENES — evitar recortes forzados
   ========================================================================== */

/* Carrusel: alto fluido por aspect-ratio en vez de height fijo */
.v1-carousel .carousel-item{
  height:auto;
  aspect-ratio:16/9;
}
.v1-carousel .carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media (max-width:640px){
  .v1-carousel .carousel-item{ aspect-ratio:4/3; }
}
@media (min-width:641px) and (max-width:900px){
  .v1-carousel .carousel-item{ aspect-ratio:16/10; }
}

/* Catalog cards: aspect-ratio un poco más alto para fotos de producto completas */
.catalog-card__media{
  aspect-ratio:1/1;
}
.catalog-card__media img{
  object-position:center;
}

/* Split (galerías full-bleed): asegurar centrado correcto */
.split__media img{
  object-position:center;
}

/* Utilidades: agregar estas clases directo en el <img> cuando el recorte
   automático tape algo importante de la foto */
.obj-top{ object-position:top !important; }
.obj-bottom{ object-position:bottom !important; }
.obj-left{ object-position:left !important; }
.obj-right{ object-position:right !important; }

/* Si una imagen NO debe recortarse nunca (ej: planos, logos, catálogos con
   fondo), usar object-fit:contain + fondo para rellenar el espacio sobrante */
.obj-contain{
  object-fit:contain !important;
  background:var(--black-2);
}


/* ==========================================================================
   AJUSTE CATALOG-GRID — 5 en línea + fotos más anchas
   ========================================================================== */
.catalog-grid{
  grid-template-columns:repeat(5, 1fr);
  gap:1rem;
}
@media (max-width:1100px){
  .catalog-grid{ grid-template-columns:repeat(3, 1fr); gap:1.1rem; }
}
@media (max-width:700px){
  .catalog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  .catalog-grid{ grid-template-columns:1fr; }
}

.catalog-card__media{
  aspect-ratio:4/3;
}
.catalog-card__media img{
  object-fit:contain;
  background:var(--black-2);
}



/* ==========================================================================
   OPTIMIZACIONES DE RENDIMIENTO
   ========================================================================== */

/* content-visibility: el navegador se salta el layout/paint de las
   secciones que todavía no entraron en pantalla. Baja mucho el trabajo
   de renderizado inicial en páginas largas con muchas imágenes, sin
   cambiar absolutamente nada visualmente. contain-intrinsic-size evita
   saltos de scroll mientras el navegador no midió la sección todavía. */
.section{
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}
.hero{
  /* el hero siempre se ve de entrada, no se difiere */
  content-visibility: visible;
}

/* Contención de layout/estilo en grillas repetitivas: le dice al
   navegador que estos bloques no afectan el layout de sus hermanos,
   permitiendo pintarlos de forma más aislada y barata. */
.catalog-grid,
.system-grid,
.spec-grid,
.about-stats{
  contain: layout style;
}

/* Marquee: refuerza que la animación va por GPU (compositor), evitando
   repaint en cada frame. */
.strip__track{
  will-change: transform;
}

/* Los <img> lazy quedan con un área reservada por sus contenedores
   (.img-box, aspect-ratio en carousel/catalog-card), así no hay salto
   de layout (CLS) cuando cargan tarde. */
.img-box img,
.catalog-card__media img,
.v1-carousel .carousel-item img{
  content-visibility: auto;
}