/* Rocky Distribución — hoja de estilos del sitio
   Sistema: ver /design/rocky-design-system.html */

@font-face{
  font-family:'Rocky Display'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/oswald-500.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/oswald-700.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/publicsans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/publicsans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/publicsans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/publicsans-700.woff2') format('woff2');
}
@font-face{
  font-family:'Rocky Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/plexmono-500.woff2') format('woff2');
}

:root{
  --bg:#E9EBE6;
  --surface:#F5F6F2;
  --surface-raised:#FFFFFF;
  --ink:#1A1D19;
  --ink-muted:#5E655C;
  --border:rgba(26,29,25,.14);
  --border-strong:rgba(26,29,25,.28);
  --accent:#C2410C;
  --accent-contrast:#FFF8F3;
  --accent-soft:rgba(194,65,12,.10);
  --accent2:#1F5A66;
  --accent2-contrast:#EAF4F5;
  --accent2-soft:rgba(31,90,102,.10);
  --shadow: 0 1px 2px rgba(26,29,25,.06), 0 8px 24px -12px rgba(26,29,25,.18);
  --maxw: 1160px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15170F;
    --surface:#1E2117;
    --surface-raised:#242817;
    --ink:#ECEEE8;
    --ink-muted:#A7ACA0;
    --border:rgba(236,238,232,.14);
    --border-strong:rgba(236,238,232,.28);
    --accent:#DE5B14;
    --accent-contrast:#1A0D06;
    --accent-soft:rgba(222,91,20,.16);
    --accent2:#4C93A0;
    --accent2-contrast:#06181A;
    --accent2-soft:rgba(76,147,160,.16);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Rocky Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--accent-contrast); }
a{ color:var(--accent2); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px; border-radius:2px;
}
h1,h2,h3,h4{ font-family:'Rocky Display', sans-serif; font-weight:700; margin:0; text-wrap:balance; letter-spacing:.01em; }
p{ margin:0; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,4vw,40px); }
.eyebrow{
  font-family:'Rocky Mono', monospace; font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.eyebrow.alt{ color:var(--accent2); }

.section{ padding-block: clamp(48px,7vw,96px); }
.section + .section{ border-top:1px solid var(--border); }
.section.on-surface{ background:var(--surface); }
.section-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(32px,4vw,48px); max-width:64ch; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.35rem); text-transform:uppercase; }
.section-head p{ color:var(--ink-muted); font-size:1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }

/* ---- header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px -14px rgba(0,0,0,.25); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; transition:padding-block .25s ease; }
.site-header.is-scrolled .wrap{ padding-block:10px; }
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brandmark svg{ flex:none; }
.brandmark-word{ font-family:'Rocky Display'; font-weight:700; font-size:1.2rem; letter-spacing:.02em; line-height:1; color:var(--ink); }
.brandmark-sub{ font-family:'Rocky Mono',monospace; font-size:.58rem; letter-spacing:.22em; color:var(--ink-muted); margin-top:3px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:500; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--border-strong); border-radius:4px;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ pointer-events:none; }

@media (max-width: 880px){
  .main-nav{
    position:fixed; inset:65px 0 0 0; background:var(--surface); flex-direction:column;
    align-items:flex-start; gap:0; padding:8px 0; border-top:1px solid var(--border);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ width:100%; padding:14px clamp(20px,4vw,40px); border-bottom:1px solid var(--border); font-size:1rem; }
  .nav-toggle{ display:inline-flex; }
  .header-actions .btn-secondary{ display:none; }
}

/* ---- buttons ---- */
.btn{
  font-family:'Rocky Sans'; font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:13px 22px; border-radius:4px; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; line-height:1;
  transition:filter .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:9px 16px; font-size:.85rem; }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn-on-accent2{ background:var(--accent2-contrast); color:var(--accent2); }
.btn-ghost{ background:transparent; color:var(--accent2); padding-inline:0; font-weight:600; }
.btn-ghost:hover{ filter:brightness(.85); }
.btn-block{ width:100%; }

/* ---- hero ---- */
.hero{ position:relative; overflow:hidden; background:var(--surface); }
.hero .wrap{ padding-block:clamp(48px,8vw,100px); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,56px); align-items:center; }
.hero h1{ font-size:clamp(2.3rem,5vw,3.9rem); line-height:.98; text-transform:uppercase; margin-top:14px; max-width:16ch; }
.hero .lede{ font-size:1.125rem; color:var(--ink-muted); max-width:52ch; margin-top:18px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.strata-panel{ position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/11; background:var(--bg); box-shadow:var(--shadow); }

.page-hero{ background:var(--surface); border-bottom:1px solid var(--border); }
.page-hero .wrap{ padding-block:clamp(36px,6vw,64px); }
.page-hero h1{ font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; margin-top:10px; max-width:22ch; }
.page-hero .lede{ color:var(--ink-muted); font-size:1.05rem; max-width:60ch; margin-top:14px; }

.breadcrumb{ font-family:'Rocky Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ink-muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }

/* ---- photo hero (full-bleed image + scrim + curve) ---- */
.hero-photo{
  position:relative; overflow:hidden; background-color:var(--ink); color:#F5F6F2;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
}
.hero-photo::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,15,10,.62) 0%, rgba(13,15,10,.32) 45%, rgba(9,11,7,.88) 100%);
}
.hero-photo .wrap{ position:relative; z-index:2; }
.hero-photo h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.hero-photo .lede{ color:rgba(245,246,242,.88); }
.hero-photo .eyebrow{ color:#F0A868; }
.hero-photo .breadcrumb, .hero-photo .breadcrumb a{ color:rgba(245,246,242,.72); }
.hero-photo .breadcrumb a:hover{ color:#fff; }
.hero-photo .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.42); }
.hero-photo .btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

.hero.hero-photo{ min-height:min(84vh,680px); display:flex; align-items:center; }
.hero.hero-photo .wrap{ padding-block:clamp(90px,14vw,140px) clamp(64px,9vw,96px); }
.page-hero.hero-photo{ min-height:380px; display:flex; align-items:center; }
.page-hero.hero-photo .wrap{ padding-block:clamp(72px,10vw,108px) clamp(56px,7vw,80px); border-bottom:none; }

.hero-curve{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:3; pointer-events:none; }
.hero-curve svg{ width:100%; height:clamp(28px,5vw,60px); display:block; }

/* ---- motion: hero entrance + slow photo drift ---- */
@media (prefers-reduced-motion: no-preference){
  .hero-bg{ animation:heroDrift 22s ease-in-out infinite alternate; }
  @keyframes heroDrift{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.1) translate3d(0,-1.2%,0); } }

  .hero-photo .wrap > *{ opacity:0; animation:heroRise .7s cubic-bezier(.22,.61,.36,1) forwards; }
  .hero-photo .wrap > *:nth-child(1){ animation-delay:.05s; }
  .hero-photo .wrap > *:nth-child(2){ animation-delay:.16s; }
  .hero-photo .wrap > *:nth-child(3){ animation-delay:.27s; }
  .hero-photo .wrap > *:nth-child(4){ animation-delay:.38s; }
  .hero-photo .wrap > *:nth-child(5){ animation-delay:.48s; }
  @keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo .wrap > *{ opacity:1; }
}

/* ---- motion: scroll reveal ---- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  .js .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .js .reveal.is-visible:nth-child(1){ transition-delay:0ms; }
  .js .reveal.is-visible:nth-child(2){ transition-delay:90ms; }
  .js .reveal.is-visible:nth-child(3){ transition-delay:180ms; }
  .js .reveal.is-visible:nth-child(4){ transition-delay:270ms; }
}

/* ---- badges ---- */
.badge{
  font-family:'Rocky Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; display:inline-flex; align-items:center; gap:6px; font-weight:500;
}
.badge-accent2{ background:var(--accent2-soft); color:var(--accent2); }
.badge-accent{ background:var(--accent-soft); color:var(--accent); }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ---- cards ---- */
.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.svc-card{
  background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; padding:24px;
  display:flex; flex-direction:column; gap:14px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.svc-card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(0,0,0,.32); }
.svc-card svg{ color:var(--accent); filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.svc-card h3{ font-family:'Rocky Display'; font-size:1.05rem; text-transform:uppercase; letter-spacing:.01em; }
.svc-card p{ font-size:.9rem; color:var(--ink-muted); line-height:1.55; flex:1; }
.svc-card .card-link{ font-family:'Rocky Mono',monospace; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent2); }

.diffstrip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.diff-item{ background:var(--surface-raised); padding:24px; display:flex; flex-direction:column; gap:10px; transition:transform .18s ease; }
.diff-item:hover{ transform:translateY(-3px); }
.diff-item svg{ color:var(--accent2); filter:drop-shadow(0 3px 6px rgba(0,0,0,.16)); }
.diff-item h3{ font-family:'Rocky Display'; font-size:1rem; text-transform:uppercase; }
.diff-item p{ font-size:.88rem; color:var(--ink-muted); }

/* ---- process steps ---- */
.steps{ display:flex; flex-direction:column; gap:0; max-width:70ch; }
.step{ display:flex; gap:20px; padding-block:22px; border-top:1px solid var(--border); }
.step:first-child{ border-top:none; padding-top:0; }
.step-num{ font-family:'Rocky Display'; font-weight:700; font-size:1.6rem; color:var(--accent); flex:none; width:2.4ch; line-height:1; }
.step h3{ font-family:'Rocky Sans'; font-weight:600; font-size:1.05rem; }
.step p{ font-size:.92rem; color:var(--ink-muted); margin-top:6px; }

/* ---- scope list (qué incluye) ---- */
.scopelist{ display:flex; flex-direction:column; gap:0; max-width:64ch; }
.scopelist li{ list-style:none; display:flex; gap:14px; padding-block:14px; border-top:1px solid var(--border); font-size:.98rem; }
.scopelist li:first-child{ border-top:none; }
.scopelist svg{ flex:none; margin-top:3px; color:var(--accent2); }

/* ---- CTA band ---- */
.ctaband{ background:var(--ink); color:var(--bg); border-radius:10px; padding:clamp(28px,5vw,48px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ctaband h2{ color:var(--bg); font-size:clamp(1.5rem,3vw,2rem); text-transform:uppercase; max-width:24ch; }
.ctaband p{ color:color-mix(in srgb, var(--bg) 70%, transparent); margin-top:8px; max-width:48ch; }
.ctaband .cta-row{ margin-top:0; }
.ctaband .btn-secondary{ color:var(--bg); border-color:color-mix(in srgb, var(--bg) 40%, transparent); }
.ctaband .btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- forms ---- */
.quoteblock{ display:grid; grid-template-columns:1.3fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.quoteform{ background:var(--surface-raised); padding:clamp(24px,4vw,36px); display:flex; flex-direction:column; gap:16px; }
.quoteform h2, .quoteform h3{ font-family:'Rocky Display'; text-transform:uppercase; font-size:1.2rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.8rem; font-weight:600; color:var(--ink-muted); }
.field input, .field select, .field textarea{
  font-family:'Rocky Sans'; font-size:.95rem; padding:11px 13px; border-radius:4px;
  border:1px solid var(--border-strong); background:var(--bg); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:90px; }
.field-note{ font-size:.78rem; color:var(--ink-muted); }
.form-status{ font-size:.85rem; padding:10px 12px; border-radius:4px; display:none; }
.form-status.is-visible{ display:block; }
.form-status.ok{ background:var(--accent2-soft); color:var(--accent2); }

.whatsappcell{ background:var(--accent2); color:var(--accent2-contrast); padding:clamp(24px,4vw,36px); display:flex; flex-direction:column; gap:14px; justify-content:center; }
.whatsappcell h2, .whatsappcell h3{ font-family:'Rocky Display'; text-transform:uppercase; font-size:1.15rem; }
.whatsappcell p{ font-size:.92rem; opacity:.9; }
.whatsappcell ul{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.whatsappcell li{ list-style:none; font-size:.88rem; opacity:.92; padding-left:16px; position:relative; }
.whatsappcell li::before{ content:''; position:absolute; left:0; top:.6em; width:5px; height:5px; background:currentColor; }

.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.contact-card{ background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); transition:transform .18s ease; }
.contact-card:hover{ transform:translateY(-3px); }
.contact-card svg{ color:var(--accent); filter:drop-shadow(0 3px 6px rgba(0,0,0,.16)); }
.contact-card h3{ font-family:'Rocky Display'; font-size:1rem; text-transform:uppercase; }
.contact-card p{ font-size:.9rem; color:var(--ink-muted); }
.contact-card a{ font-size:.92rem; font-weight:600; color:var(--accent2); text-decoration:none; }

/* ---- icon tiles ---- */
.icon-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.icon-tile{ background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; box-shadow:var(--shadow); transition:transform .18s ease; }
.icon-tile:hover{ transform:translateY(-3px); }
.icon-tile svg{ color:var(--accent); filter:drop-shadow(0 3px 6px rgba(0,0,0,.16)); }
.icon-tile span{ font-size:.82rem; color:var(--ink-muted); line-height:1.4; }

/* ---- footer ---- */
.site-footer{ background:var(--ink); color:var(--bg); }
.site-footer .wrap{ padding-block:clamp(40px,6vw,64px); display:flex; flex-direction:column; gap:36px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-top .brandmark-word{ color:var(--bg); }
.footer-top .brandmark-sub{ color:color-mix(in srgb, var(--bg) 60%, transparent); }
.footer-about{ color:color-mix(in srgb, var(--bg) 70%, transparent); font-size:.88rem; max-width:36ch; margin-top:12px; }
.footer-col h4{ font-family:'Rocky Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:color-mix(in srgb, var(--bg) 60%, transparent); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:color-mix(in srgb, var(--bg) 85%, transparent); text-decoration:none; font-size:.9rem; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid color-mix(in srgb, var(--bg) 15%, transparent); font-size:.8rem; color:color-mix(in srgb, var(--bg) 55%, transparent); }

/* ---- whatsapp floating button ---- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:50; width:56px; height:56px; border-radius:50%;
  background:var(--accent2); color:var(--accent2-contrast); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); text-decoration:none; transition:filter .15s ease, transform .15s ease;
}
.wa-float:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent2);
  z-index:-1; opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .wa-float::before{ animation:waPulse 2.6s ease-out 1.4s 3; }
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---- utility ---- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,40px); align-items:center; }
.body-lg{ font-size:1.1rem; color:var(--ink-muted); max-width:60ch; }
.mono-note{ font-family:'Rocky Mono',monospace; font-size:.78rem; color:var(--ink-muted); }

@media (max-width: 900px){
  .hero-grid, .grid-2{ grid-template-columns:1fr; }
  .quoteblock{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .field-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .ctaband{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:no-preference){
  .svc-card, .btn, .nav-toggle{ transition: border-color .15s ease, filter .15s ease; }
}