/* ============================================
   AUTO TUNING SHOP — tokens
   ============================================ */
:root{
  /* dark surfaces: header / hero / footer / dark bands — carbón, no negro puro */
  --ink:#26262A;
  --panel:#323236;
  --panel-2:#2C2C30;
  --stroke:#434347;
  --paper:#FFFFFF;
  --text:#F5F5F5;
  --text-dim:#B7B5B2;
  --chrome:#C7C7C7;
  --hazard:#FF374B;

  /* light surfaces: gris concreto, no blanco puro */
  --surface:#E9E9E6;
  --surface-alt:#DDDDD8;
  --card:#F1F1EE;
  --line:#C9C9C2;
  --ink-text:#262624;
  --ink-dim:#77766F;

  --accent:#DB2D2E;
  --accent-2:#FF374B;
  --accent-ink:#FFFFFF;

  --font-display:'Roboto', sans-serif;
  --font-body:'Open Sans', sans-serif;
  --font-mono:'Raleway', sans-serif;

  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink-text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* grano de concreto — textura uniforme sobre toda la página */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

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

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:900;
  margin:0;
}

.text-accent{ color:var(--accent); }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 14px;
}
.eyebrow-dark{ color:var(--ink-dim); }
.eyebrow-invert{ color:rgba(255,255,255,0.85); }

.section-title{
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom:44px;
  position:relative;
  padding-bottom:20px;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:52px; height:4px;
  background:var(--accent);
}
.contact-intro-center .section-title::after,
.contact-intro-center .eyebrow::after{ left:50%; transform:translateX(-50%); }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:700;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 10px 22px rgba(219,45,46,0.28); transition:transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s ease, background .2s ease; }
.btn-accent:hover{ background:var(--accent-2); transform:scale(1.05) translateY(-3px); box-shadow:0 16px 30px rgba(255,55,75,0.4); }
.btn-outline{ border-color:var(--line); color:var(--ink-text); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-outline-invert{ border-color:rgba(255,255,255,0.45); color:#fff; }
.btn-outline-invert:hover{ border-color:#fff; background:rgba(255,255,255,0.1); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-sm{ padding:10px 20px; font-size:0.75rem; }

/* ============================================
   HEADER
   ============================================ */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled,
.site-header.is-solid{
  background:rgba(38,38,42,0.94);
  backdrop-filter:blur(8px);
  border-color:var(--stroke);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-logo{
  display:block;
  background:var(--paper);
  padding:6px 10px;
  border-radius:4px;
  line-height:0;
}
.brand-logo img{
  height:34px;
  width:auto;
  display:block;
}
.brand-logo-footer{ padding:8px 12px; }
.brand-logo-footer img{ height:40px; }

/* big transparent logo treatment (home header) */
.brand-logo-hero{
  background:none;
  padding:0;
}
.brand-logo-hero img{
  height:56px;
  width:auto;
  filter:drop-shadow(0 0 22px rgba(219,45,46,0.45));
  transition:height .25s ease, filter .25s ease;
}
.site-header.is-scrolled .brand-logo-hero img,
.site-header.is-solid .brand-logo-hero img{
  height:44px;
}
.main-nav{
  display:flex;
  gap:28px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.main-nav a{
  color:var(--text-dim);
  transition:color .2s ease;
}
.main-nav a:hover{ color:#fff; }

/* Servicios — menú desplegable */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:var(--text-dim);
  cursor:pointer;
  transition:color .2s ease;
}
.nav-dropdown-toggle:hover{ color:#fff; }
.nav-dropdown-toggle svg{ transition:transform .2s ease; }
.nav-dropdown.is-open .nav-dropdown-toggle svg{ transform:rotate(180deg); }
.nav-dropdown-menu{ display:none; flex-direction:column; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{ display:flex; }
@media (min-width:721px){
  .nav-dropdown-menu{
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%);
    margin-top:14px;
    background:var(--ink);
    border:1px solid var(--stroke);
    padding:6px 0;
    min-width:190px;
    box-shadow:0 16px 32px rgba(0,0,0,0.4);
    z-index:20;
  }
  .nav-dropdown-menu a{ padding:11px 18px; white-space:nowrap; }
  .nav-dropdown-menu a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
}

.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:transparent;
  border:1px solid var(--stroke);
  cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; background:#fff; margin:0 7px;
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  padding:170px 0 0;
  overflow:hidden;
  background:var(--ink);
}
.hero::before{
  /* mesh gradient — manchas de acento muy difuminadas detrás del grano */
  content:"";
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 45% at 20% 20%, rgba(219,45,46,0.5), transparent 60%),
    radial-gradient(35% 40% at 85% 10%, rgba(255,55,75,0.3), transparent 60%),
    radial-gradient(45% 50% at 60% 95%, rgba(120,30,32,0.45), transparent 65%);
  filter:blur(60px);
}
.hero-watermark{
  position:absolute;
  top:-8%;
  right:-10%;
  width:min(58vw, 880px);
  opacity:0.07;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.hero-badge{
  position:absolute;
  top:26px;
  right:6%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:118px; height:118px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,0.35);
  transform:rotate(-10deg);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#fff;
  padding:10px;
}
.hero-badge strong{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.5rem;
  color:#fff;
  line-height:1;
  margin-bottom:2px;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
  padding-bottom:80px;
}
.hero-title{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.02;
  margin:14px 0 22px;
  color:#fff;
}
.hero-title .text-outline{
  color:transparent;
  -webkit-text-stroke:1.5px #fff;
}
.hero-sub{
  max-width:46ch;
  color:var(--text-dim);
  font-size:1.05rem;
  margin:0 0 32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.hero-meta{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.82rem;
  color:var(--chrome);
  letter-spacing:0.03em;
}

.hero-visual{ position:relative; }
.hero-photo{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================
   CORNER-CUT — recorte diagonal de firma visual
   ============================================ */
.hero-photo,
.about-teaser-photo,
.team-inner,
.package-photo{
  position:relative;
}
.hero-photo img,
.about-teaser-photo img,
.team-inner img,
.package-photo img{
  clip-path:polygon(0 30px, 30px 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo::before,
.about-teaser-photo::before,
.team-inner::before,
.package-photo::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:38px; height:38px;
  background:var(--accent);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  z-index:2;
  pointer-events:none;
}
.hero-photo,
.about-teaser-photo,
.package-photo{ border-radius:0; }
.team-inner img{ border-radius:0; }
.photo-tag{
  position:absolute;
  left:14px; bottom:14px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(38,38,42,0.75);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;
  padding:7px 11px;
}

/* diagonal cuts between sections */
.cut{ display:none; }

/* ============================================
   AGENCY CORNER MARKS — marcas técnicas tipo grid
   ============================================ */
.gallery-card,
.coverage-card,
.package-callout{
  position:relative;
}
.gallery-card::after,
.coverage-card::after,
.package-callout::after{
  content:"";
  position:absolute;
  top:10px; right:10px;
  width:12px; height:12px;
  border-top:2px solid var(--line);
  border-right:2px solid var(--line);
  pointer-events:none;
  z-index:3;
}
.gallery-card::after{ border-color:rgba(255,255,255,0.55); }

/* ============================================
   STRIPE DIVIDER — franja diagonal roja/negra
   ============================================ */
.stripe-divider{
  height:10px;
  background:repeating-linear-gradient(-45deg, var(--accent) 0px, var(--accent) 14px, var(--ink) 14px, var(--ink) 28px);
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar{
  background:#000;
  padding:18px 0;
}
.trust-inner{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:var(--chrome);
  text-align:center;
}
.trust-inner .dot{ color:var(--stroke); }

/* ============================================
   MARQUEE — cinta urbana de servicios
   ============================================ */
.marquee{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:14px 0;
}
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:8px;
  background:repeating-linear-gradient(-45deg, var(--hazard) 0px, var(--hazard) 14px, var(--ink) 14px, var(--ink) 28px);
}
.marquee::before{ top:0; }
.marquee::after{ bottom:0; }
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 26s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}
.marquee-track span{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.02em;
  color:#fff;
  padding:0 28px;
  white-space:nowrap;
}
.marquee-track span::after{
  content:"✦";
  color:var(--accent-2);
  font-size:0.9rem;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================
   FEATURES
   ============================================ */
.features{
  background:var(--surface);
  padding:90px 0 40px;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.feature-card{ max-width:38ch; }
.feature-icon{
  width:56px; height:56px;
  padding:14px;
  box-sizing:border-box;
  border-radius:50%;
  background:var(--surface-alt);
  margin-bottom:18px;
  color:var(--ink-text);
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-card h3{
  font-size:1.05rem;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.feature-card p{
  color:var(--ink-dim);
  font-size:0.94rem;
  margin:12px 0 0;
}

/* ============================================
   GALLERY (trabajos)
   ============================================ */
.gallery{
  padding:90px 0 100px;
  background:var(--surface-alt);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.gallery-card{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.finish-chip{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:20px;
  background:rgba(38,38,42,0.82);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.66rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.finish-chip::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.finish-chip.finish-mate::before{ background:#B3B3B3; }
.finish-chip.finish-perlado::before{ background:#FF74A6; }
.gallery-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 16px 32px rgba(0,0,0,0.08);
}
.gallery-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-card:hover img{ transform:scale(1.04); }
.gallery-card figcaption{
  padding:16px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-top:3px solid var(--accent);
}
.gallery-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:0.02em;
  color:var(--ink-text);
  transition:color .2s ease;
}
.gallery-card:hover .gallery-title{ color:var(--accent); }
.gallery-desc{
  color:var(--ink-dim);
  font-size:0.88rem;
}

/* ============================================
   ABOUT TEASER (nosotros en home)
   ============================================ */
.about-teaser{
  background:var(--surface);
  padding:100px 0;
}
.about-teaser-inner{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:52px;
  align-items:center;
}
.about-teaser-photo{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.about-teaser-photo img{
  width:100%; height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}
.section-title-sm{
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:8px 0 20px;
  font-weight:900;
}
.about-teaser-copy p{
  color:var(--ink-dim);
  margin:0 0 16px;
}
.team-block{
  margin:28px 0 26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.team-block h3{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-text);
  margin-bottom:10px;
}

/* ============================================
   SERVICES
   ============================================ */
.services{
  position:relative;
  background:var(--surface-alt);
  padding:100px 0 110px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:170px 170px auto;
  gap:14px;
}
.service-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,0.1);
  z-index:2;
}

/* bento — Full Wrap como tile grande con foto */
.service-card:nth-child(1){
  grid-column:1/3; grid-row:1/3;
  justify-content:flex-end;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(38,38,42,0.1) 0%, rgba(38,38,42,0.92) 85%),
    url('../assets/wrap-huracan-verde.jpg') center/cover;
}
.service-card:nth-child(1) h3,
.service-card:nth-child(1) p{ color:#fff; }
.service-card:nth-child(1) .service-icon{ background:rgba(255,255,255,0.16); color:#fff; }
.service-card:nth-child(1)::after{ border-color:rgba(255,255,255,0.6); }

/* bento — PPF y Rotulación como tiles anchos */
.service-card:nth-child(2),
.service-card:nth-child(3){
  grid-column:3/5;
  justify-content:center;
}
.service-card:nth-child(2){ grid-row:1; background:var(--accent); color:#fff; }
.service-card:nth-child(2) h3,
.service-card:nth-child(2) p{ color:#fff; }
.service-card:nth-child(2) .service-link{ color:#fff; }
.service-card:nth-child(2)::after{ border-color:rgba(255,255,255,0.6); }
.service-card:nth-child(3){ grid-row:2; }
.service-card:nth-child(2) .service-icon,
.service-card:nth-child(3) .service-icon{ display:none; }
.service-card:nth-child(2) h3,
.service-card:nth-child(3) h3{ margin-top:0; }

/* bento — resto de servicios como tiles compactos */
.service-card:nth-child(4){ grid-column:1/2; grid-row:3; }
.service-card:nth-child(5){ grid-column:2/3; grid-row:3; }
.service-card:nth-child(6){ grid-column:3/4; grid-row:3; }
.service-card:nth-child(7){ grid-column:4/5; grid-row:3; }
.service-icon{
  width:60px; height:60px;
  padding:15px;
  box-sizing:border-box;
  border-radius:50%;
  background:var(--surface-alt);
  margin-bottom:18px;
  color:var(--ink-text);
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-card h3{
  font-size:1.05rem;
  margin-bottom:10px;
}
.service-card p{
  color:var(--ink-dim);
  font-size:0.92rem;
  margin:0;
}

/* ============================================
   SCHOOL BANNER
   ============================================ */
.school{
  position:relative;
  overflow:hidden;
  background:var(--accent);
  color:#fff;
  padding:70px 0;
}
.school-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.school-title{
  font-size:clamp(3rem, 7vw, 5.5rem);
  line-height:0.92;
  letter-spacing:-0.01em;
  margin:6px 0 14px;
  color:#fff;
}
.school-sub{
  max-width:52ch;
  margin:0;
  color:rgba(255,255,255,0.85);
}
.school-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ============================================
   OPINIONES (franja corta)
   ============================================ */
.opiniones-strip{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.opiniones-strip-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.opiniones-strip-inner p{
  margin:0;
  font-size:0.98rem;
  color:var(--ink-dim);
}
.opiniones-strip-inner strong{ color:var(--ink-text); }

/* ============================================
   CONTACT INTRO (dentro de .location)
   ============================================ */
.contact-intro{
  max-width:760px;
  margin:0 0 56px;
}
.contact-lead{
  color:var(--ink-dim);
  font-size:1.02rem;
  margin:0 0 14px;
}
.contact-lead a{ text-decoration:underline; text-underline-offset:3px; color:var(--ink-text); }

/* ============================================
   STOREFRONT (fachada)
   ============================================ */
.storefront{
  position:relative;
  height:400px;
  overflow:hidden;
}
.glass-stats{
  position:absolute;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.glass-stat{
  padding:16px 26px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.25);
}
.glass-stat:last-child{ border-right:none; }
.glass-stat strong{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.3rem;
  color:#fff;
}
.glass-stat span{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.85);
}
.storefront img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 54%;
}
.storefront-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 24px;
  background:linear-gradient(90deg, rgba(38,38,42,0.88) 0%, rgba(38,38,42,0.4) 55%, rgba(38,38,42,0.1) 100%);
}
.storefront-title{
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  max-width:var(--wrap);
  margin:6px auto 0;
  width:100%;
  color:#fff;
}
.storefront-overlay .eyebrow{ max-width:var(--wrap); margin:0 auto; width:100%; }

/* ============================================
   LOCATION
   ============================================ */
.location{
  background:var(--surface-alt);
  padding:100px 0 110px;
}
.location-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.info-list{
  margin:0 0 30px;
  display:grid;
  gap:20px;
}
.info-list dt{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-dim);
  margin-bottom:4px;
}
.info-list dd{
  margin:0;
  font-size:1.02rem;
}
.info-list a{ text-decoration:underline; text-underline-offset:3px; color:var(--ink-text); }

.location-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }

/* ============================================
   SOCIAL ICONS — botones circulares de redes
   ============================================ */
.social-icons{
  display:flex;
  gap:12px;
}
.social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-dim);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.social-icons a:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(219,45,46,0.3);
}
.social-icons svg{ width:18px; height:18px; }
.site-footer .social-icons a{ border-color:var(--stroke); color:var(--text-dim); }
.social-icons-lg a{ width:48px; height:48px; }
.social-icons-lg svg{ width:22px; height:22px; }

.location-map{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  min-height:340px;
}
.location-map iframe{
  width:100%; height:100%; min-height:340px; border:0;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--stroke);
  padding-top:56px;
}
.site-footer::before,
.school::before,
.cta-banner::before{
  content:"";
  position:absolute;
  right:-6%; bottom:-22%;
  width:340px; height:340px;
  background:url('../assets/logo-silhouette.png') no-repeat center / contain;
  opacity:0.07;
  pointer-events:none;
  z-index:0;
}
.site-footer .wrap{ position:relative; z-index:1; }
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  padding-bottom:36px;
}
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-brand p{
  margin:2px 0 0;
  color:var(--text-dim);
  font-size:0.9rem;
}
.footer-nav{ display:grid; gap:10px; align-content:start; }
.footer-nav a{ color:var(--text-dim); font-size:0.92rem; }
.footer-nav a:hover{ color:var(--accent-2); }
.footer-contact p{ margin:0 0 8px; color:var(--text-dim); font-size:0.92rem; }
.footer-contact a{ text-decoration:underline; text-underline-offset:3px; color:#fff; }

.footer-bottom{
  border-top:1px solid var(--stroke);
  padding:18px 0;
}
.footer-bottom p{
  margin:0;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-dim);
}

/* ============================================
   WHATSAPP FAB
   ============================================ */
.whatsapp-fab{
  position:fixed;
  right:20px; bottom:20px;
  width:56px; height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  z-index:90;
  transition:transform .15s ease;
}
.whatsapp-fab:hover{ transform:scale(1.06); }
.whatsapp-fab svg{ width:28px; height:28px; fill:#0B2E17; }
.whatsapp-fab .wa-glyph{ fill:#EAFBF1; }

/* ============================================
   PAGE HERO (páginas internas, ej. Nosotros)
   ============================================ */
.page-hero{
  position:relative;
  padding:160px 0 90px;
  overflow:hidden;
}
.page-hero img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 35%;
}
.page-hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(38,38,42,0.55) 0%, rgba(38,38,42,0.9) 100%);
}
.page-hero-inner{
  position:relative;
  z-index:1;
}
.page-hero-title{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin:10px 0 20px;
  color:#fff;
}
.page-hero-sub{
  max-width:62ch;
  color:var(--text-dim);
  font-size:1.05rem;
  margin:0;
}

/* ============================================
   WHY US (¿Por qué escogernos?)
   ============================================ */
.why-us{
  background:var(--surface-alt);
  padding:100px 0;
}
.why-us-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-top:44px;
}
.why-us-card{
  background:var(--surface);
  padding:32px 26px;
}
.why-us-number{
  font-family:var(--font-display);
  font-weight:900;
  color:var(--line);
  -webkit-text-stroke:1px var(--ink-text);
  font-size:2.4rem;
  line-height:1;
  margin-bottom:6px;
}
.why-us-card h3{
  font-size:1.05rem;
  margin-bottom:10px;
}
.why-us-card p{
  color:var(--ink-dim);
  font-size:0.92rem;
  margin:0;
}
.why-us-lead{
  max-width:70ch;
  color:var(--ink-dim);
  margin:0;
}

/* ============================================
   LOGROS (stats)
   ============================================ */
.stats{
  background:var(--surface);
  padding:100px 0;
}
.stats-lead{
  max-width:70ch;
  color:var(--ink-dim);
  margin:0 0 44px;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.stat-card{
  text-align:center;
  padding:34px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-alt);
}
.stat-icon{
  width:52px; height:52px;
  padding:13px;
  box-sizing:border-box;
  border-radius:50%;
  background:var(--surface);
  margin:0 auto 16px;
  color:var(--ink-text);
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.stat-number{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem, 5vw, 3.4rem);
  color:var(--ink-text);
  line-height:1;
}
.stat-label{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-dim);
}

/* ============================================
   EQUIPO (página Nosotros)
   ============================================ */
.team-section{
  background:var(--surface-alt);
  padding:100px 0;
}
.team-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
}
.team-inner img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:8px;
  display:block;
}
.team-inner p{
  color:var(--ink-dim);
  margin:0;
}

/* ============================================
   TESTIMONIOS (con nombre)
   ============================================ */
.testimonials{
  background:var(--surface);
  padding:100px 0 120px;
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
}
.testimonial-card{
  margin:0;
  padding:28px 24px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:8px;
}
.stars{
  color:var(--ink-text);
  letter-spacing:2px;
  font-size:0.9rem;
}
.testimonial-card blockquote{
  margin:14px 0 20px;
  font-size:1.02rem;
  line-height:1.5;
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.author-initial{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  flex-shrink:0;
}
.author-name{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.82rem;
  color:var(--ink-dim);
}

/* ============================================
   CTA BANNER (página Nosotros)
   ============================================ */
.cta-banner{
  position:relative;
  overflow:hidden;
  background:var(--accent);
  color:#fff;
  padding:64px 0;
  text-align:center;
}
.cta-banner .wrap{ position:relative; z-index:1; }
.cta-banner h2{
  font-size:clamp(1.7rem, 3.6vw, 2.4rem);
  color:#fff;
  margin-bottom:22px;
}

/* reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* revelado de texto palabra por palabra */
.reveal-words span{
  display:inline-block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal-words.is-visible span{ opacity:1; transform:none; }

/* ============================================
   SERVICE LINK (dentro de service-card)
   ============================================ */
.service-link{
  display:inline-block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:var(--ink-text);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.service-link:hover{ border-color:var(--accent); }

/* ============================================
   WHY US — variante de 6 columnas + cita
   ============================================ */
.why-us-grid-6{
  grid-template-columns:repeat(3, 1fr);
}
.why-us-quote{
  max-width:70ch;
  margin:44px 0 0;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-alt);
  font-style:italic;
  color:var(--ink-dim);
}

/* ============================================
   PACKAGES (paquetes de rotulación)
   ============================================ */
.packages{
  background:var(--surface);
  padding:100px 0 40px;
}
.package-block{
  border-top:1px solid var(--line);
  padding:64px 0;
}
.package-photo{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:36px;
}
.package-photo img{
  width:100%;
  display:block;
}
.package-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.package-title{
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  margin-top:6px;
}
.package-price{ text-align:right; }
.price-amount{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.6rem;
  color:var(--ink-text);
}
.price-note{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.package-desc{
  max-width:80ch;
  color:var(--ink-dim);
  margin:0 0 34px;
}
.package-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  padding-top:26px;
  border-top:1px solid var(--line);
  margin-bottom:34px;
}
.package-col-label{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  margin:0 0 16px;
}
.package-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.package-list li{
  padding-left:16px;
  position:relative;
  color:var(--ink-dim);
  font-size:0.94rem;
}
.package-list li::before{
  content:"▸";
  position:absolute;
  left:0;
  color:var(--ink-dim);
}
.package-col-text{
  color:var(--ink-dim);
  margin:0 0 18px;
}
.package-callout{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 18px;
  font-size:0.9rem;
  color:var(--ink-dim);
  margin:0;
}
.package-callout strong{ color:var(--ink-text); }
.package-callout-wide{ max-width:none; margin-bottom:34px; }
.package-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  background:var(--surface-alt);
  padding:18px 22px;
}
.package-contact p{
  margin:0;
  max-width:52ch;
  color:var(--ink-dim);
  font-size:0.92rem;
}
.package-contact strong{ color:var(--ink-text); }
.package-contact a{
  text-align:right;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--ink-text);
  white-space:nowrap;
}
.package-contact a span{
  display:block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.03em;
}

/* ============================================
   PRICING REFERENCE
   ============================================ */
.pricing-ref{
  background:var(--surface-alt);
  padding:100px 0;
}
.pricing-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:30px;
}
.pricing-table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}
.pricing-table th, .pricing-table td{
  text-align:left;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
}
.pricing-table th{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  background:var(--surface);
}
.pricing-table td{ background:var(--surface); }
.pricing-table tr:last-child td{ border-bottom:none; }
.pricing-fineprint{
  max-width:80ch;
  margin:18px 0 0;
  font-size:0.82rem;
  color:var(--ink-dim);
}
.pricing-fineprint-center{ margin:26px auto 0; text-align:center; }

.budget-banner{
  margin:44px 0;
  padding:24px 26px;
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  background:var(--surface);
}
.budget-banner p{ margin:0; color:var(--ink-dim); }
.budget-banner strong{ color:var(--ink-text); }

.fleet-block h3{
  font-size:1.1rem;
  margin-bottom:12px;
}
.fleet-block p{
  color:var(--ink-dim);
  max-width:70ch;
  margin:0 0 18px;
}
.fleet-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.fleet-tags span{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
}

/* ============================================
   PROCESO
   ============================================ */
.process{
  background:var(--surface);
  padding:100px 0;
}
.process-list{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.process-list li{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.process-list li:last-child{ border-bottom:1px solid var(--line); }
.process-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.6rem;
  color:var(--ink-text);
}
.process-list h3{
  font-size:1rem;
  margin-bottom:6px;
}
.process-list p{
  margin:0;
  color:var(--ink-dim);
  font-size:0.92rem;
}

/* ============================================
   ROTULACIÓN — CONTACTO
   ============================================ */
.contact-intro-center{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.contact-intro-center .section-title,
.contact-intro-center .eyebrow{ text-align:center; }
.contact-icons-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:900px;
  margin:50px auto 0;
}
.contact-icon-card{
  text-align:center;
  padding:30px 20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
.contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--accent);
  margin-bottom:16px;
}
.contact-icon svg{
  width:22px; height:22px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-icon-label{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  margin:0 0 8px;
}
.contact-icon-card p:not(.contact-icon-label){
  margin:0;
  color:var(--ink-dim);
  font-size:0.92rem;
}
.contact-icon-card a{ color:var(--ink-text); text-decoration:underline; text-underline-offset:3px; }

/* ============================================
   GALLERY EXTRAS (botón "ver más" / galería completa)
   ============================================ */
.gallery-more{
  text-align:center;
  margin-top:44px;
}
.gallery-full{
  padding:100px 0 120px;
}
.gallery-grid-wide{
  grid-template-columns:repeat(3, 1fr);
}

/* ============================================
   WHY US — variante de 5 columnas (auto-fit)
   ============================================ */
.why-us-grid-5{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

/* ============================================
   WRAP TYPES (completo / parcial)
   ============================================ */
.wrap-types{
  background:var(--surface-alt);
  padding:100px 0;
}
.wrap-types-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-top:36px;
}
.wrap-type-card{
  background:var(--surface);
  padding:34px 30px;
}
.wrap-type-card p:not(.package-col-label){
  color:var(--ink-dim);
  margin:0;
  font-size:1rem;
}

/* ============================================
   CTA BANNER — subtítulo
   ============================================ */
.cta-banner-sub{
  max-width:56ch;
  margin:0 auto 24px;
  color:rgba(255,255,255,0.85);
}

/* ============================================
   PALETA DE COLORES Y ACABADOS
   ============================================ */
.palette{
  background:var(--surface);
  padding:100px 0;
}
.palette-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:18px;
  margin-top:44px;
}
.palette-chip{
  margin:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-alt);
  overflow:hidden;
}
.palette-chip img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.palette-chip figcaption{
  padding:10px 12px;
  font-size:0.8rem;
  color:var(--ink-dim);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.palette-code{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--ink-dim);
}
.palette-note{
  margin:44px 0 0;
  color:var(--ink-dim);
  font-size:0.92rem;
}
.palette .btn{
  margin-top:22px;
}

/* ============================================
   PPF — COBERTURAS
   ============================================ */
.coverage-grid{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-top:44px;
}
.coverage-card{
  background:var(--surface);
  padding:30px 28px;
  border-left:3px solid var(--accent);
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
  align-items:start;
}
.coverage-head h3{
  font-size:1.2rem;
  margin:4px 0 6px;
}
.coverage-head .eyebrow{ margin-bottom:0; }
.coverage-sub{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-dim);
}
.coverage-body p{
  color:var(--ink-dim);
  margin:0 0 16px;
  max-width:70ch;
}
.coverage-items{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.coverage-items span{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
}
.coverage-photo{
  margin-top:16px;
}
.coverage-photo img{
  width:100%;
  max-width:280px;
  display:block;
  border:1px solid var(--line);
  border-radius:8px;
}
@media (max-width:760px){
  .coverage-card{ grid-template-columns:1fr; }
}

/* ============================================
   PPF — MARCAS / DURABILIDAD
   ============================================ */
.brands-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-top:44px;
}
.brand-card{
  background:var(--surface);
  padding:36px 26px;
  text-align:center;
}
.brand-card h3{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.04em;
  margin-bottom:12px;
}
.brand-card p{
  color:var(--ink-dim);
  font-size:0.9rem;
  margin:0;
}
.durability-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:24px;
}
.durability-card{
  text-align:center;
  padding:36px 20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
.durability-number{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem, 5vw, 3.2rem);
  color:var(--ink-text);
  line-height:1;
}
.durability-suffix{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  margin-top:8px;
}
.durability-card p{
  margin:14px 0 0;
  color:var(--ink-dim);
  font-size:0.88rem;
}
@media (max-width:640px){
  .brands-grid{ grid-template-columns:1fr; }
  .durability-grid{ grid-template-columns:1fr; }
}

/* ============================================
   MOBILE CTA BAR — barra fija de cotización (solo móvil)
   ============================================ */
.mobile-cta-bar{ display:none; }
@media (max-width:720px){
  body{ padding-bottom:68px; }
  .mobile-cta-bar{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:95;
    gap:10px;
    padding:10px 14px;
    background:var(--ink);
    border-top:1px solid var(--stroke);
  }
  .mobile-cta-bar .btn{ flex:1; padding:12px 10px; font-size:0.78rem; }
  .whatsapp-fab{ display:none; }
}

/* ============================================
   ERROR PAGE (404)
   ============================================ */
.error-page{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  background:var(--ink);
  text-align:center;
  padding:170px 0 90px;
}
.error-code{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(5rem, 14vw, 9rem);
  color:#fff;
  line-height:1;
  margin-bottom:6px;
}
.error-page h1{
  color:#fff;
  font-size:clamp(1.6rem, 3.6vw, 2.4rem);
  margin:0 auto 18px;
}
.error-page p{
  color:var(--text-dim);
  max-width:52ch;
  margin:0 auto 32px;
}
.error-page .hero-actions{ justify-content:center; }

/* ============================================
   QUOTE FORM — cotización en línea vía WhatsApp
   ============================================ */
.quote-form{
  max-width:820px;
  margin-top:44px;
}
.quote-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.quote-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-dim);
}
.quote-form-full{ margin-bottom:26px; }
.quote-form input,
.quote-form select,
.quote-form textarea{
  font-family:var(--font-body);
  font-size:0.98rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  color:var(--ink-text);
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px 14px;
  resize:vertical;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.quote-form-note{
  margin:16px 0 0;
  font-size:0.82rem;
  color:var(--ink-dim);
}

/* ============================================
   FAQ — acordeón de preguntas frecuentes
   ============================================ */
.faq{
  background:var(--surface-alt);
  padding:100px 0;
}
.faq-list{
  max-width:820px;
  margin:44px 0 0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.faq-item{ background:var(--surface); }
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:22px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink-text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.4rem;
  color:var(--accent);
  flex-shrink:0;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
  margin:0;
  padding:0 26px 22px;
  color:var(--ink-dim);
  max-width:70ch;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-photo{ aspect-ratio:16/10; }
  .hero-badge{ width:88px; height:88px; top:18px; right:16px; font-size:0.58rem; }
  .hero-badge strong{ font-size:1.15rem; }
  .hero-watermark{ width:80vw; top:-4%; right:-24%; opacity:0.06; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .about-teaser-inner{ grid-template-columns:1fr; }
  .about-teaser-photo img{ aspect-ratio:16/9; }
  .features-grid{ grid-template-columns:1fr 1fr; }
  .services-grid{ grid-template-columns:repeat(2, 1fr); grid-template-rows:none; }
  .service-card{ grid-column:auto!important; grid-row:auto!important; }
  .service-card:nth-child(1){ grid-column:1/3!important; aspect-ratio:16/9; justify-content:flex-end; }
  .service-card:nth-child(2),
  .service-card:nth-child(3){ flex-direction:column; align-items:flex-start; }
  .reviews-grid{ grid-template-columns:1fr; }
  .location-inner{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .why-us-grid{ grid-template-columns:1fr; }
  .why-us-grid-6{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .team-inner{ grid-template-columns:1fr; }
  .testimonials-grid{ grid-template-columns:1fr; }
  .package-grid{ grid-template-columns:1fr; gap:28px; }
  .package-header{ align-items:flex-start; }
  .package-price{ text-align:left; }
  .contact-icons-grid{ grid-template-columns:1fr; }
  .gallery-grid-wide{ grid-template-columns:1fr 1fr; }
  .wrap-types-grid{ grid-template-columns:1fr; }
  .quote-form-grid{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--ink);
    border-bottom:1px solid var(--stroke);
    flex-direction:column;
    gap:0;
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{
    padding:16px 24px;
    border-top:1px solid var(--stroke);
  }
  .nav-toggle{ display:flex; }
  .header-actions .btn-sm{ display:none; }
  .nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:16px 24px;
    border-top:1px solid var(--stroke);
  }
  .nav-dropdown-menu{ background:rgba(255,255,255,0.03); }
  .nav-dropdown-menu a{ padding:14px 24px 14px 40px; border-top:1px solid var(--stroke); font-size:0.78rem; }
  .gallery-grid{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .service-card:nth-child(1){ grid-column:auto!important; aspect-ratio:4/3; }
  .school-inner{ flex-direction:column; align-items:flex-start; }
  .footer-inner{ grid-template-columns:1fr; }
  .storefront{ height:300px; }
  .glass-stats{ width:calc(100% - 32px); }
  .glass-stat{ flex:1; padding:12px 8px; }
  .glass-stat strong{ font-size:1.05rem; }
  .glass-stat span{ font-size:0.58rem; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .opiniones-strip-inner{ justify-content:flex-start; }
  .package-contact{ flex-direction:column; align-items:flex-start; }
  .package-contact a{ text-align:left; }
  .process-list li{ grid-template-columns:44px 1fr; }
  .gallery-grid-wide{ grid-template-columns:1fr; }
}