/* ================================================================
   LAYOUT — estructura de secciones
   ================================================================ */

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  background:rgba(13,13,13,.75);
  backdrop-filter:blur(12px) saturate(100%);
  -webkit-backdrop-filter:blur(12px) saturate(100%);
  border-bottom:1px solid var(--line-1);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-md);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:var(--header-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-0);
}

/* Video de fondo oscurecido */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.65;
  z-index:0;
}

/* Overlay oscuro para readabilidad + efecto premium */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    /* Degradado radial sutil desde arriba */
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0,0,0,.15) 0%, transparent 60%),
    /* Degradado lineal profundo para enfoque */
    linear-gradient(180deg,
      rgba(13,13,13,.35) 0%,      /* superior más claro para el hero */
      rgba(13,13,13,.65) 50%,      /* centro moderado */
      rgba(13,13,13,.85) 100%      /* inferior más oscuro */
    ),
    /* Degradado lateral sutil para dirección visual */
    linear-gradient(90deg,
      rgba(13,13,13,.25) 0%,
      transparent 30%,
      transparent 70%,
      rgba(13,13,13,.15) 100%
    );
  pointer-events:none;
}

/* Efecto vignette premium */
.hero-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 50%,
      transparent 0%,
      rgba(0,0,0,.25) 50%,
      rgba(0,0,0,.5) 100%
    ),
    /* Grano/ruido sutil para textura */
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.03) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0,0,0,.03) 3px
    );
  pointer-events:none;
}

.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.35;
  pointer-events:none;
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:10;
  padding-block:var(--sp-2xl) var(--sp-xl);
}
.hero-title{
  margin-top:var(--sp-md);
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  max-width:16ch;
}
.hero-lede{
  margin-top:var(--sp-md);
  max-width:46ch;
  font-size:clamp(1.02rem, 1.4vw, 1.2rem);
}
.hero-actions{
  margin-top:var(--sp-lg);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-sm);
}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:var(--sp-lg);
  transform:translateX(-50%);
  z-index:10;
  width:26px; height:42px;
  border:1.5px solid var(--line-2);
  border-radius:99px;
}
.scroll-hint span{
  position:absolute;
  top:8px; left:50%;
  width:4px; height:8px;
  margin-left:-2px;
  border-radius:99px;
  background:var(--laser);
  animation:scrollDot 1.8s var(--ease-out) infinite;
}

/* ---------- Secciones genéricas ---------- */
.section{
  padding-block:var(--sp-2xl);
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.section-head{
  max-width:640px;
  margin-bottom:var(--sp-xl);
  position:relative;
  z-index:10;
}

.section-taller .section-head{
  z-index:10;
}
.section-sub{ margin-top:var(--sp-sm); font-size:1.05rem; }

/* ---------- Servicios ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line-1);
  border:1px solid var(--line-1);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* ---------- Taller / Videos ---------- */
.section-taller{
  position:relative;
  background:var(--ink-1);
  overflow:hidden;
}

/* Video de fondo oscurecido en sección taller */
.taller-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.4;
  z-index:0;
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Overlay oscuro para readabilidad */
.taller-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0,0,0,.1) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(13,13,13,.25) 0%,
      rgba(13,13,13,.55) 50%,
      rgba(13,13,13,.8) 100%
    ),
    linear-gradient(90deg,
      rgba(13,13,13,.15) 0%,
      transparent 30%,
      transparent 70%,
      rgba(13,13,13,.1) 100%
    );
  pointer-events:none;
}

/* Efecto vignette */
.taller-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 40%,
      transparent 0%,
      rgba(0,0,0,.1) 30%,
      rgba(0,0,0,.35) 100%
    ),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.015) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0,0,0,.015) 3px
    );
  pointer-events:none;
  mix-blend-mode:multiply;
}
.section-taller .wrap{
  position:relative;
  z-index:10;
}

.video-gauge-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-lg);
  justify-items:center;
}
.video-gauge{ width:100%; max-width:280px; text-align:center; }
.video-gauge-frame{
  position:relative;
  aspect-ratio:9/16;
  border-radius:28px;
  overflow:hidden;
  border:2px solid var(--line-2);
  box-shadow:var(--shadow-panel);
  background:var(--panel-1);
}
.video-gauge-frame video{
  width:100%; height:100%;
  object-fit:cover;
}
.video-gauge figcaption{
  margin-top:var(--sp-sm);
  color:var(--text-lo);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---------- Proceso ---------- */
.process-rail{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-lg);
  counter-reset:step;
  position:relative;
}
.process-rail::before{
  content:"";
  position:absolute;
  top:14px; left:5%; right:5%;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px);
}
.process-rail li{ position:relative; }

/* ---------- Nosotros ---------- */
.section-nosotros{ background:var(--ink-1); }
.nosotros-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:var(--sp-2xl);
  align-items:center;
}
.check-list{
  list-style:none;
  display:grid;
  gap:var(--sp-xs);
  margin:var(--sp-md) 0 var(--sp-lg);
}
.check-list li{
  padding-left:1.6rem;
  position:relative;
  color:var(--text-md);
  font-size:.95rem;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.3px;
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0; top:.45em;
  width:9px; height:9px;
  border:1.5px solid var(--laser);
  border-radius:2px;
  transform:rotate(45deg);
}
.stat-readout{
  display:grid;
  gap:var(--sp-md);
  padding:var(--sp-lg);
  border:1px solid var(--line-1);
  border-radius:var(--radius-lg);
  background:var(--panel-1);
}
.stat-readout > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-sm);
  padding-bottom:var(--sp-md);
  border-bottom:1px solid var(--line-1);
}
.stat-readout > div:last-child{ border-bottom:0; padding-bottom:0; }
.stat-readout dd{ font-size:1.9rem; color:var(--laser); font-weight:600; }
.stat-readout dt{ color:var(--text-lo); font-size:.85rem; }

/* ---------- CTA band ---------- */
.cta-band{
  padding-block:var(--sp-xl);
  background:linear-gradient(120deg, var(--deep), #3a0d10 55%, var(--ink-0));
  position:relative;
  overflow:hidden;
}
.cta-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-lg);
  flex-wrap:wrap;
}
.cta-band h2{ max-width:22ch; font-size:clamp(1.5rem, 3vw, 2.1rem); }

/* ---------- FAQ ---------- */
.faq-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:var(--sp-2xl);
  align-items:start;
}
.faq-list{ display:grid; gap:var(--sp-2xs); }

/* ---------- Contacto ---------- */
.section-contacto{ background:var(--ink-1); }
.contacto-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--sp-2xl);
  align-items:start;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-sm);
}
.contact-info{
  display:grid;
  gap:var(--sp-md);
  padding:var(--sp-lg);
  border:1px solid var(--line-1);
  border-radius:var(--radius-lg);
  background:var(--panel-1);
}
.info-block{ padding-bottom:var(--sp-md); border-bottom:1px solid var(--line-1); }
.info-block:last-child{ border-bottom:0; padding-bottom:0; }
.social-row{ display:flex; gap:var(--sp-xs); margin-top:var(--sp-2xs); }

/* ---------- Footer ---------- */
.site-footer{
  padding-block:var(--sp-lg);
  border-top:1px solid var(--line-1);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-sm);
}
.footer-inner p{ font-size:.82rem; color:var(--text-lo); }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .service-grid{ grid-template-columns:repeat(2, 1fr); }
  .video-gauge-row{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; }
  .process-rail{ grid-template-columns:1fr 1fr; row-gap:var(--sp-xl); }
  .process-rail::before{ display:none; }
  .nosotros-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  .contacto-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .service-grid{ grid-template-columns:1fr; }
  .process-rail{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .hero-title{ max-width:none; }
}