/* site.css — corporate website UI kit styles. Needs colors_and_type.css + components.css */
.cw-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Header ---- */
.cw-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--white) 80%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color var(--dur), box-shadow var(--dur); }
.cw-header.is-scrolled{ border-color:var(--border); box-shadow:var(--shadow-sm); }
.cw-header__bar{ max-width:var(--container); margin-inline:auto; padding:.7rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem; }
.cw-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 1 auto; min-width:0; }
.cw-logo img{ flex:none; }
.cw-logo__word{ font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cw-logo__word b{ color:var(--brand-orange); font-weight:700; }
.cw-logo--light .cw-logo__word{ color:#fff; }
.cw-nav{ display:flex; gap:.3rem; margin-left:auto; }
.cw-nav__item{ position:relative; }
.cw-nav__item > a{ display:inline-flex; align-items:center; gap:.25rem; padding:.55rem .8rem; border-radius:var(--radius-sm);
  font-weight:500; font-size:.95rem; color:var(--ink-800); text-decoration:none; transition:background var(--dur),color var(--dur); }
.cw-nav__item > a:hover{ background:var(--orange-50); color:var(--orange-700); }
.cw-nav__item > a.is-current{ color:var(--orange-700); background:var(--orange-50); }
.cw-caret{ width:15px; height:15px; opacity:.6; }
.cw-nav__menu{ position:absolute; top:100%; left:0; min-width:210px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:.4rem;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all var(--dur) var(--ease-out); }
.cw-nav__item:hover .cw-nav__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.cw-nav__menu a{ padding:.55rem .7rem; border-radius:var(--radius-xs); font-size:.92rem; color:var(--ink-800);
  text-decoration:none; }
.cw-nav__menu a:hover{ background:var(--gray-50); color:var(--orange-700); }
.cw-header__cta{ flex:none; }
.cw-burger{ display:none; flex:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; margin-left:auto; }
.cw-burger span{ width:24px; height:2.5px; background:var(--ink-900); border-radius:2px; transition:.2s; }
.cw-mobile{ display:none; flex-direction:column; padding:0 var(--gutter); max-height:0; overflow:hidden;
  background:var(--white); border-bottom:1px solid var(--border); transition:max-height var(--dur) var(--ease-out); }
.cw-mobile.is-open{ max-height:420px; padding-block:.6rem 1.2rem; }
.cw-mobile a{ padding:.85rem .4rem; font-weight:500; color:var(--ink-800); text-decoration:none; border-bottom:1px solid var(--gray-100); }
.cw-mobile__cta{ margin-top:1rem; border-bottom:none; color:#fff; justify-content:center; }

/* ---- Hero ---- */
.cw-hero{ position:relative; overflow:hidden; padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,7vw,6rem); }
.cw-hero__glow{ position:absolute; inset:auto -10% 30% 40%; height:520px;
  background:radial-gradient(50% 50% at 60% 40%, color-mix(in srgb,var(--brand-mint) 70%,transparent), transparent 70%),
             radial-gradient(40% 40% at 30% 60%, color-mix(in srgb,var(--orange-200) 55%,transparent), transparent 70%);
  filter:blur(20px); z-index:0; pointer-events:none; }
.cw-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cw-hero__copy h1{ margin:1rem 0 1.1rem; }
.cw-hl{ color:var(--brand-orange); }
.cw-hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }
.cw-hero__trust{ display:flex; gap:2rem; margin-top:2.4rem; }
.cw-trust{ display:flex; flex-direction:column; }
.cw-trust strong{ font-size:1.9rem; font-weight:700; color:var(--ink-900); line-height:1; }
.cw-trust span{ font-size:.85rem; color:var(--fg-subtle); margin-top:.3rem; }
/* Héroe con foto de fondo (a sangre) + overlay oscuro y texto en blanco.
   Rutas relativas a site.css (raíz tanto en /new/ como en /static/).
   image-set negocia AVIF/WebP; el url() del shorthand es el fallback JPG. */
.cw-hero--photo{ background:var(--ink-900) url("assets/hero/hero-1400.jpg") center/cover no-repeat; }
.cw-hero--photo{ background-image:image-set(
    url("assets/hero/hero-1400.avif") type("image/avif"),
    url("assets/hero/hero-1400.webp") type("image/webp"),
    url("assets/hero/hero-1400.jpg") type("image/jpeg")); }
.cw-hero--photo::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,18,23,.82) 0%, rgba(18,18,23,.62) 48%, rgba(18,18,23,.30) 100%); }
.cw-hero--photo .cw-hero__copy h1{ color:#fff; }
.cw-hero--photo .cw-hero__copy .lead{ color:rgba(255,255,255,.86); }
.cw-hero--photo .cw-trust strong{ color:#fff; }
.cw-hero--photo .cw-trust span{ color:rgba(255,255,255,.78); }
.cw-hero--photo .btn--ghost{ --_fg:#fff; --_bd:rgba(255,255,255,.55); }
.cw-hero--photo .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
@media (max-width:760px){
  .cw-hero--photo{ background-image:image-set(
      url("assets/hero/hero-800.avif") type("image/avif"),
      url("assets/hero/hero-800.webp") type("image/webp")); }
  .cw-hero--photo::before{ background:linear-gradient(180deg, rgba(18,18,23,.78) 0%, rgba(18,18,23,.66) 100%); }
}
.cw-card-float{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:1.6rem; }
.cw-card-float__top{ display:flex; align-items:center; gap:.7rem; }
.cw-card-float__top strong{ display:block; font-size:.98rem; }
.cw-card-float__top span{ font-size:.8rem; color:var(--fg-subtle); }
.cw-card-float__price{ font-size:3rem; font-weight:700; margin:.8rem 0 .2rem; color:var(--ink-900); }
.cw-card-float__price small{ font-size:1.1rem; font-weight:400; color:var(--fg-subtle); }
.cw-tick{ list-style:none; padding:0; margin:.6rem 0 1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.cw-tick li{ display:flex; gap:.6rem; align-items:center; font-size:.92rem; color:var(--fg-muted); }
.cw-tick li svg{ color:var(--brand-green); flex:none; }
.cw-tick--light li{ color:var(--gray-200); }
.cw-tick--light li svg{ color:var(--brand-mint); }

/* ---- Sections ---- */
.cw-section{ padding:clamp(3rem,7vw,6rem) 0; }
.cw-section--alt{ background:var(--bg-subtle); }
.cw-head{ max-width:680px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.cw-head h2{ margin:.6rem 0 .8rem; }
.cw-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.cw-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.cw-service{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.cw-service__ico{ width:54px; height:54px; border-radius:14px; background:var(--orange-50); color:var(--orange-600);
  display:grid; place-items:center; margin-bottom:1rem; }
.cw-service__tag{ position:absolute; top:1.2rem; right:1.2rem; }
.cw-service h3{ margin-bottom:.5rem; }
.cw-service p{ margin-bottom:1rem; font-size:.95rem; }
.cw-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.92rem;
  color:var(--orange-700); text-decoration:none; } /* AA: orange-600 3.5:1 → orange-700 5.2:1 */
.cw-link:hover{ gap:.6rem; color:var(--orange-800); }
.cw-link svg{ transition:transform var(--dur); }

/* ---- Maintenance ---- */
.cw-maint{ background:var(--ink-900); }
.cw-maint__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cw-pricecard{ background:var(--white); border-radius:var(--radius-lg); padding:1.8rem; box-shadow:var(--shadow-lg); }
.cw-pricecard__amt{ font-size:3.4rem; font-weight:700; color:var(--ink-900); margin:.6rem 0 0; }
.cw-pricecard__amt small{ font-size:1.1rem; font-weight:400; color:var(--fg-subtle); }
.cw-pricecard__row{ display:flex; align-items:center; gap:.7rem; padding:.7rem 0; border-top:1px solid var(--border);
  color:var(--ink-800); font-weight:500; font-size:.95rem; }
.cw-pricecard__row svg{ color:var(--brand-orange); }

/* ---- Works ---- */
.cw-work__img{ aspect-ratio:4/3; border-radius:var(--radius-md); display:grid; place-items:center; margin-bottom:.8rem; }
.cw-work__img img{ opacity:.92; filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.cw-work h3{ margin-bottom:.2rem; font-size:1.05rem; }

/* ---- About ---- */
.cw-about{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cw-about__media{ aspect-ratio:1; border-radius:var(--radius-xl); background:radial-gradient(circle at 50% 40%,var(--brand-mint),var(--green-50));
  display:grid; place-items:center; }
.cw-about__media img{ width:58%; filter:drop-shadow(0 12px 28px rgba(0,0,0,.15)); }

/* ---- Contact ---- */
.cw-contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cw-contact__line{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; color:var(--ink-800);
  font-weight:500; text-decoration:none; }
.cw-contact__line svg{ color:var(--brand-orange); }
.cw-form{ display:flex; flex-direction:column; gap:1rem; }
.cw-sent{ text-align:center; padding:1.5rem 0; color:var(--brand-green); }
.cw-sent h3{ margin:.6rem 0 .3rem; color:var(--ink-900); }
.cw-sent p{ color:var(--fg-muted); }

/* ---- Footer ---- */
.cw-footer{ background:var(--ink-900); color:var(--gray-300); padding:clamp(2.5rem,5vw,4rem) 0 1.6rem; }
.cw-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.cw-footer__brand p{ margin:1rem 0; font-size:.9rem; color:var(--gray-400); max-width:34ch; }
.cw-footer__brand .cw-contact__line{ color:var(--gray-200); }
.cw-footer__brand .cw-contact__line svg{ color:var(--brand-gold); }
.cw-footer__col-title{ font-size:.95rem; font-weight:700; color:#fff; margin:0 0 .9rem; }
.cw-footer__col a{ display:block; padding:.3rem 0; font-size:.9rem; color:var(--gray-400); text-decoration:none; }
.cw-footer__col a:hover{ color:var(--brand-orange); }
.cw-footer__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:var(--gray-400); } /* AA: gray-500 3.8:1 → gray-400 ~7:1 sobre ink-900 */
@media (max-width:760px){
  .cw-footer__grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; }
  .cw-footer__brand{ grid-column:1 / -1; }
}

/* ---- Reveal animation (progressive enhancement, capture-safe) ----
   Base state is VISIBLE so content shows without JS and in static capture.
   JS adds .is-pre to below-the-fold elements, then .is-in on scroll. */
.cw-reveal{ transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:var(--d,0ms); }
.cw-reveal.is-pre{ opacity:0; transform:translateY(18px); }
.cw-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .cw-reveal, .cw-reveal.is-pre{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .cw-nav, .cw-header__cta{ display:none; }
  .cw-burger{ display:flex; }
  .cw-mobile{ display:flex; }
  .cw-hero__grid, .cw-maint__grid, .cw-about, .cw-contact{ grid-template-columns:1fr; }
  .cw-grid-3{ grid-template-columns:1fr 1fr; }
  .cw-grid-4{ grid-template-columns:1fr 1fr; }
  .cw-about__media{ max-width:340px; }
}
@media (max-width:560px){
  .cw-grid-3, .cw-grid-4{ grid-template-columns:1fr; }
  .cw-hero__trust{ gap:1.2rem; }
  .cw-header__bar{ gap:.5rem; padding-inline:1rem; }
  .cw-logo img{ width:34px; height:34px; }
  .cw-logo__word{ font-size:.92rem; }
}
@media (max-width:360px){
  .cw-logo__word{ font-size:.82rem; }
}