/* ==========================================================================
   Hormigones Express — hormigonesexpress.cl
   Hoja de estilos única. Tema mixto: base clara + hero/CTA/footer oscuros.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Marca */
  --accent:#f76500;
  --accent-soft:#ff8a33;
  --accent-deep:#d55400;
  --ink:#212530;
  --ink-2:#2c3140;
  --ink-3:#3a4052;

  /* Base clara */
  --bg:#ffffff;
  --bg-alt:#f5f6f8;
  --bg-alt-2:#eceef1;

  /* Texto */
  --text:#212530;
  --text-soft:#5a6070;
  --text-mute:#858c9c;
  --on-dark:#ffffff;
  --on-dark-soft:rgba(255,255,255,.72);
  --on-dark-mute:rgba(255,255,255,.55);

  /* Líneas */
  --line:#e2e5ea;
  --line-strong:#cfd4dc;
  --line-dark:rgba(255,255,255,.14);

  /* Formas */
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* Sombras */
  --sh-sm:0 1px 2px rgba(33,37,48,.06), 0 2px 6px rgba(33,37,48,.05);
  --sh:0 4px 12px rgba(33,37,48,.07), 0 12px 28px rgba(33,37,48,.06);
  --sh-lg:0 10px 24px rgba(33,37,48,.10), 0 28px 60px rgba(33,37,48,.10);

  /* Layout */
  --container:1200px;
  --gap:28px;
  --sec-y:clamp(64px,8vw,110px);
  --header-h:102px;

  /* Tipografía */
  --font-title:"Geist","Geist Fallback",system-ui,sans-serif;
  --font-body:"Barlow","Barlow Fallback",system-ui,sans-serif;

  /* Easing */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-title);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0;
}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ⚠️ El reset de arriba fija el color por ELEMENTO y gana sobre la herencia.
   Todo bloque de texto claro sobre fondo oscuro o imagen debe listarse aquí. */
.hero h1,.hero h2,.hero h3,.hero h4,
.page-hero h1,.page-hero h2,.page-hero h3,.page-hero h4,
.cta h1,.cta h2,.cta h3,.cta h4,
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,
.stats h1,.stats h2,.stats h3,.stats h4{color:#fff}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(48px,5.5vw,72px)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--dark p{color:var(--on-dark-soft)}

.section-head{max-width:720px;margin-bottom:clamp(36px,4vw,54px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:16px;color:var(--text-soft);font-size:1.06rem}
.section--dark .section-head p{color:var(--on-dark-soft)}

/* Eyebrow: SIEMPRE texto simple. Sin píldora, sin punto, sin raya. */
.eyebrow{
  display:block;
  font-family:var(--font-title);
  font-size:.775rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 7px;
}
.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta .eyebrow{color:var(--accent-soft)}
.section-head h2,
.hero h1,
.cta h2{margin-top:15px}

h1{font-size:clamp(2.05rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.7rem,3.1vw,2.5rem)}
h3{font-size:clamp(1.16rem,1.6vw,1.36rem)}

.lead{font-size:clamp(1.03rem,1.35vw,1.14rem);color:var(--text-soft)}
.section--dark .lead,.hero .lead,.page-hero .lead,.cta .lead{color:var(--on-dark-soft)}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;
  font-family:var(--font-title);
  font-size:.945rem;font-weight:600;letter-spacing:.005em;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Primario: fondo acento + texto blanco */
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-soft);color:#fff;border-color:var(--accent-soft);box-shadow:0 8px 20px rgba(247,101,0,.3)}

/* Fantasma: el color se adapta al fondo */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(33,37,48,.04)}
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta .btn--ghost,
.section--dark .btn--ghost,
.site-footer .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.btn--sm{padding:10px 20px;font-size:.885rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* Enlace con flecha */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-title);font-size:.925rem;font-weight:600;
  color:var(--accent-deep);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.link-arrow svg{flex:none;transition:transform .25s var(--ease)}
.link-arrow:hover{gap:12px;color:var(--accent)}
.section--dark .link-arrow,.cta .link-arrow{color:var(--accent-soft)}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
/* Cabecera blanca fija en todas las páginas */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),height .3s var(--ease);
}
/* 3 columnas: logo | menú centrado | CTA.
   Las laterales comparten ancho (1fr) para que el menú quede centrado
   respecto al contenedor, no respecto al ancho del logo. */
.site-header .container{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px;width:100%;
}
/* El hamburguesa comparte celda con el bloque de acciones: en escritorio está
   oculto, y en móvil son las acciones las que se ocultan. */
.site-header .container > .nav-toggle{grid-column:3;grid-row:1;justify-self:end}
.site-header .container > .header-actions{grid-column:3;grid-row:1}

.brand{display:flex;align-items:center;justify-self:start}
.brand img{height:80px;width:auto;transition:height .3s var(--ease)}
/* Sobre fondo blanco siempre va la variante oscura del logo */
.brand .logo-claro{display:none}
.brand .logo-oscuro{display:block}

/* Al hacer scroll solo se compacta y gana sombra */
.site-header.is-scrolled{
  box-shadow:var(--sh-sm);
  height:86px;
}
.site-header.is-scrolled .brand img{height:69px}

.nav{display:flex;align-items:center;gap:4px;justify-self:center}
.nav a{
  position:relative;
  padding:9px 15px;
  font-family:var(--font-title);
  font-size:.925rem;font-weight:500;
  color:var(--text-soft);
  border-radius:var(--r-sm);
  transition:color .22s var(--ease),background-color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink);font-weight:600}
/* El CTA dentro del menú NO hereda el color de los enlaces de navegación */
.nav a.btn--primary,.nav a.btn--primary:hover{color:#fff}
.nav a.btn::after{display:none}

/* Bloque derecho del header: redes + CTA */
.header-actions{
  display:flex;align-items:center;gap:16px;
  justify-self:end;
}
.header-socials{display:flex;align-items:center;gap:8px}
.header-socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  color:var(--text-soft);
  border:1px solid var(--line);border-radius:var(--r-pill);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease);
}
.header-socials svg{width:18px;height:18px}
.header-socials a:hover{color:#fff;background:var(--accent);border-color:var(--accent)}

/* Las redes del drawer solo existen en móvil (ver media query) */
.nav-socials{display:none}

.header-cta{flex:none}
.nav-drawer-cta{display:none}

.nav-toggle{
  display:none;justify-self:end;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.nav-toggle span{
  display:block;position:relative;
  width:19px;height:2px;background:var(--ink);border-radius:2px;
  transition:background-color .2s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),background-color .2s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle[aria-expanded="true"] span{background:transparent!important}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;z-index:98;
  background:rgba(20,23,30,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s var(--ease);
}
.nav-backdrop.is-open{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(90vh,760px);
  display:flex;align-items:center;
  padding-block:calc(var(--header-h) + 72px) 84px;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Velo: legibilidad garantizada sobre cualquier foto */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(20,23,30,.94) 0%,rgba(20,23,30,.84) 38%,rgba(20,23,30,.5) 70%,rgba(20,23,30,.42) 100%),
    linear-gradient(to top,rgba(20,23,30,.72) 0%,transparent 45%);
}
.hero-inner{max-width:660px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-top:20px;max-width:560px}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:34px;padding-top:26px;
  border-top:1px solid var(--line-dark);
}
.hero-badges li{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 12px;
  font-family:var(--font-title);font-size:.83rem;font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-dark);
  border-radius:var(--r-pill);
}
.hero-badges svg{flex:none;width:16px;height:16px;color:var(--accent)}

/* --------------------------------------------------------------------------
   7. Page hero (páginas interiores)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  padding-block:calc(var(--header-h) + 70px) 66px;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.page-hero-media{position:absolute;inset:0;z-index:-2}
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,rgba(20,23,30,.95) 0%,rgba(20,23,30,.86) 45%,rgba(20,23,30,.58) 100%),
    linear-gradient(to top,rgba(20,23,30,.7) 0%,transparent 55%);
}
.page-hero h1{color:#fff}
.page-hero .lead{margin-top:16px;max-width:620px}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:18px;
  font-size:.845rem;color:var(--on-dark-mute);
}
.breadcrumb a{color:var(--on-dark-soft);transition:color .22s var(--ease)}
.breadcrumb a:hover{color:var(--accent-soft)}
.breadcrumb span[aria-current]{color:var(--accent-soft)}
.breadcrumb svg{flex:none;width:13px;height:13px;opacity:.5}

/* --------------------------------------------------------------------------
   8. Tarjetas de servicio
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt-2)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px}
.card-body h3{margin-bottom:11px}
.card-body p{color:var(--text-soft);font-size:.965rem;flex:1}
.card-body .link-arrow{margin-top:20px;align-self:flex-start}

.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;margin-bottom:18px;
  color:var(--accent);
  background:rgba(247,101,0,.1);
  border-radius:var(--r);
}
.card-icon svg{width:26px;height:26px}
.section--dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.section--dark .card-body h3{color:#fff}
.section--dark .card-body p{color:var(--on-dark-soft)}

/* Tarjeta simple, sin imagen */
.card--plain .card-body{padding:30px 28px 32px}

/* --------------------------------------------------------------------------
   9. Servicio detallado (media + lista)
   -------------------------------------------------------------------------- */
.feature{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:center;
}
.feature + .feature{margin-top:clamp(56px,7vw,96px)}
.feature--flip .feature-media{order:2}
.feature-media{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-alt-2);
  box-shadow:var(--sh);
}
/* 10/9 = 4/3 con un 20% más de altura */
.feature-media img{width:100%;aspect-ratio:10/9;object-fit:cover}
.feature-body h2{margin-bottom:16px}
.feature-body > p{color:var(--text-soft)}
.section--dark .feature-body > p{color:var(--on-dark-soft)}

.check-list{margin-top:24px;display:grid;gap:13px}
.check-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:.97rem;color:var(--text-soft);
}
.check-list svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--accent)}
.section--dark .check-list li{color:var(--on-dark-soft)}

/* --------------------------------------------------------------------------
   10. Pasos / proceso
   -------------------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:var(--gap)}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step{
  position:relative;
  padding:30px 26px 32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;
  font-family:var(--font-title);font-size:2.15rem;font-weight:800;
  line-height:1;letter-spacing:-.04em;
  color:var(--accent);
  opacity:.9;
  margin-bottom:16px;
}
.step h3{margin-bottom:10px}
.step p{color:var(--text-soft);font-size:.955rem}
.section--dark .step{background:var(--ink-2);border-color:var(--line-dark)}
.section--dark .step h3{color:#fff}
.section--dark .step p{color:var(--on-dark-soft)}

/* --------------------------------------------------------------------------
   11. Valores
   -------------------------------------------------------------------------- */
.value{padding:4px 0}
.value-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:18px;
  color:var(--accent);
  background:rgba(247,101,0,.12);
  border-radius:var(--r);
}
.value-icon svg{width:27px;height:27px}
.section--dark .value-icon{background:rgba(247,101,0,.16)}
.value h3{margin-bottom:10px}
.value p{color:var(--text-soft);font-size:.965rem}
.section--dark .value h3{color:#fff}
.section--dark .value p{color:var(--on-dark-soft)}

/* --------------------------------------------------------------------------
   12. Estadísticas
   -------------------------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.stat{text-align:center;padding:8px 12px}
.stat-num{
  display:block;
  font-family:var(--font-title);
  font-size:clamp(2.15rem,3.6vw,2.95rem);font-weight:800;
  line-height:1;letter-spacing:-.035em;
  color:var(--accent);
}
.stat-label{
  display:block;margin-top:11px;
  font-size:.905rem;line-height:1.5;
  color:var(--on-dark-soft);
}
.section:not(.section--dark) .stat-label{color:var(--text-soft)}

/* --------------------------------------------------------------------------
   13. Cita destacada
   -------------------------------------------------------------------------- */
.quote{
  position:relative;
  max-width:860px;margin-inline:auto;text-align:center;
  padding:0 clamp(0px,3vw,40px);
}
.quote blockquote{
  margin:0;
  font-family:var(--font-title);
  font-size:clamp(1.28rem,2.5vw,1.85rem);
  font-weight:500;line-height:1.42;letter-spacing:-.018em;
  color:#fff;
}
.quote blockquote em{font-style:normal;color:var(--accent)}
.quote-mark{
  display:block;width:40px;height:40px;margin:0 auto 22px;
  color:var(--accent);opacity:.85;
}
.quote cite{
  display:block;margin-top:24px;
  font-style:normal;font-size:.9rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   14. CTA sobre el footer
   -------------------------------------------------------------------------- */
.cta{
  position:relative;
  padding-block:clamp(72px,8.5vw,112px);
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.cta-media{position:absolute;inset:0;z-index:-2}
.cta-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(rgba(20,23,30,.9),rgba(20,23,30,.9)),
    radial-gradient(120% 100% at 50% 0%,rgba(247,101,0,.2) 0%,transparent 62%);
}
.cta-inner{max-width:700px;margin-inline:auto}
.cta h2{color:#fff}
.cta .lead{margin-top:16px}
.cta .btn-row{justify-content:center}

/* El CTA es el último bloque: toca el footer sin margen ni radio */
.cta{margin-bottom:0;border-radius:0}

/* --------------------------------------------------------------------------
   15. Contacto
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:start;
}

/* Datos de contacto: SIEMPRE con ícono alineado a la línea */
.contact-list{display:grid;gap:22px;margin-top:28px}
.contact-item{display:flex;align-items:flex-start;gap:14px}
.contact-item > svg{
  flex:none;width:20px;height:20px;margin-top:4px;
  color:var(--accent);
}
.contact-item-body{min-width:0}
.contact-item .label{
  display:block;
  font-family:var(--font-title);
  font-size:.775rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:3px;
}
.contact-item .value,
.contact-item a{
  font-size:1.02rem;color:var(--text);
  transition:color .22s var(--ease);
  overflow-wrap:anywhere;
}
.contact-item a:hover{color:var(--accent-deep)}
.section--dark .contact-item .value,
.section--dark .contact-item a{color:#fff}
.section--dark .contact-item .label{color:var(--on-dark-mute)}

.socials{display:flex;gap:12px;margin-top:30px}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  color:var(--text-soft);
  border:1px solid var(--line);border-radius:var(--r-pill);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease),transform .25s var(--ease);
}
.socials svg{width:19px;height:19px}
.socials a:hover{color:#fff;background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* Formulario */
.form-card{
  padding:clamp(26px,3.2vw,40px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--font-title);
  font-size:.845rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);
}
.field input,.field textarea{
  width:100%;
  padding:12px 15px;
  font-size:.97rem;
  background:var(--bg-alt);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  transition:border-color .22s var(--ease),background-color .22s var(--ease),
             box-shadow .22s var(--ease);
}
.field textarea{resize:vertical;min-height:132px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute)}
.field input:focus,.field textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(247,101,0,.14);
}
.form-card .btn{margin-top:24px;width:100%}

/* Aviso de envío (lo controla main.js leyendo ?ok / ?err) */
.form-alert{
  display:none;
  align-items:flex-start;gap:11px;
  margin-bottom:22px;padding:14px 17px;
  font-size:.945rem;line-height:1.55;
  border:1px solid;border-radius:var(--r);
}
.form-alert.is-visible{display:flex}
.form-alert svg{flex:none;width:19px;height:19px;margin-top:2px}
.form-alert--ok{color:#166534;background:#f0fdf4;border-color:#bbf7d0}
.form-alert--err{color:#991b1b;background:#fef2f2;border-color:#fecaca}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:var(--on-dark-soft);
  padding-block:clamp(52px,6vw,74px) 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.5vw,48px);
}
.footer-brand img{height:56px;width:auto;margin-bottom:20px}
.footer-brand p{font-size:.945rem;color:var(--on-dark-soft);max-width:330px}
.site-footer h4{
  font-family:var(--font-title);
  font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;
}
.footer-links{display:grid;gap:11px}
.footer-links a{
  font-size:.945rem;color:var(--on-dark-soft);
  transition:color .22s var(--ease);
}
.footer-links a:hover{color:var(--accent-soft)}

/* Datos de contacto del footer: cada dato con su ícono */
.footer-contact{display:grid;gap:14px}
.footer-contact li{display:flex}
.footer-contact a,.footer-contact .value{
  display:inline-flex;align-items:flex-start;gap:10px;
  font-size:.945rem;line-height:1.55;
  color:var(--on-dark-soft);
  transition:color .22s var(--ease);
  overflow-wrap:anywhere;
}
.footer-contact svg{
  flex:none;width:17px;height:17px;margin-top:3px;
  color:var(--accent);
}
.footer-contact a:hover{color:#fff}
.footer-socials{display:flex;gap:10px;margin-top:20px}
.footer-socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  color:var(--on-dark-soft);
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease);
}
.footer-socials svg{width:17px;height:17px}
.footer-socials a:hover{color:#fff;background:var(--accent);border-color:var(--accent)}

/* Crédito de autoría: única barra de cierre */
.footer-credit{
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  font-size:.8rem;
  color:rgba(255,255,255,.6);
}
.footer-credit a{color:var(--accent);text-decoration:none}
.footer-credit a:hover{color:color-mix(in srgb,var(--accent) 75%,#fff)}

/* --------------------------------------------------------------------------
   17. WhatsApp flotante
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;
  color:#fff;background:#25d366;
  border-radius:var(--r-pill);
  box-shadow:0 6px 18px rgba(37,211,102,.4);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:scale(1.07);box-shadow:0 10px 26px rgba(37,211,102,.5)}

/* --------------------------------------------------------------------------
   18. Animaciones de entrada
   -------------------------------------------------------------------------- */
/* Sin JS todo se ve: el ocultamiento depende de la clase .js que marca el propio
   script. Si el JS no carga, no hay .js y el contenido queda visible. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}
/* Salvavidas: si .js se marcó pero el observer nunca corrió, revela igual. */
.js .reveal{animation:reveal-failsafe 0s linear 3s forwards}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1;transform:none;transition:none;animation:none}
  .btn:hover,.wa-float:hover{transform:none}
}

/* --------------------------------------------------------------------------
   19. Transiciones de página (cross-fade nativo)
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.15s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  :root{--gap:22px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .nav a{padding:9px 12px;font-size:.9rem}
  .brand img{height:42px}
}

@media (max-width:880px){
  :root{--header-h:90px}

  /* El nav sale del flujo: 2 columnas (logo | botón) para que el
     hamburguesa quede pegado a la derecha. */
  .site-header .container{grid-template-columns:1fr auto}
  .brand img{height:71px}
  .site-header.is-scrolled{height:82px}
  .site-header.is-scrolled .brand img{height:64px}

  /* Menú móvil deslizante */
  .nav{
    position:fixed;top:0;right:0;bottom:0;z-index:99;
    width:min(84vw,330px);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:calc(var(--header-h) + 22px) 22px 30px;
    background:var(--ink);
    border-left:1px solid var(--line-dark);
    box-shadow:-12px 0 40px rgba(20,23,30,.35);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .38s var(--ease-out),visibility .38s var(--ease-out);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav a{
    padding:14px 12px;
    font-size:1.02rem;
    color:rgba(255,255,255,.85)!important;
    border-bottom:1px solid var(--line-dark);
    border-radius:0;
  }
  .nav a::after{display:none}
  .nav a.is-active{color:var(--accent)!important}
  .nav-toggle{display:inline-flex}

  /* Un solo CTA visible: el del drawer en móvil, el de escritorio oculto.
     Las redes del header pasan al drawer para no chocar con el hamburguesa. */
  .header-actions{display:none}
  .header-cta{display:none}
  .nav-socials{
    display:flex;justify-content:center;gap:12px;
    margin-top:26px;padding-top:22px;
    border-top:1px solid var(--line-dark);
  }
  .nav-socials a{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;
    color:rgba(255,255,255,.85);
    border:1px solid var(--line-dark);border-radius:var(--r-pill);
  }
  .nav-socials svg{width:19px;height:19px}
  .nav-socials a:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
  .nav-drawer-cta{display:inline-flex;margin-top:22px;justify-content:center}
  /* El CTA del drawer conserva su estilo de botón: blanco pleno, sin borde de lista */
  .nav a.btn--primary,
  .nav a.btn--primary.is-active{color:#fff!important;border-bottom:0}

  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .steps--4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .feature{grid-template-columns:1fr;gap:28px}
  .feature--flip .feature-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 62px) 66px}
  .hero-inner{max-width:none}
  .page-hero{padding-block:calc(var(--header-h) + 54px) 52px}
}

@media (max-width:560px){
  .container{padding-inline:18px}
  h1{font-size:clamp(1.82rem,7.4vw,2.3rem)}
  h2{font-size:clamp(1.48rem,5.6vw,1.85rem)}
  .btn{padding:12px 22px;font-size:.9rem}
  .btn-row{gap:11px}
  .btn-row .btn{flex:1 1 100%}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:1fr;gap:22px}
  .hero-badges{gap:8px}
  .hero-badges li{font-size:.79rem;padding:7px 13px 7px 11px}
  .wa-float{right:14px;bottom:14px;width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
}