/* ads.css — landing de campaña de TVCA (tvca.mx): extiende publico.css, sin menú de navegación,
   enfocada en una sola conversión (cotizar por WhatsApp).
   Estilo "Editorial Industrial": reskin local de los tokens compartidos (carbón + óxido en vez de
   acero + ámbar) — solo afecta esta página, publico.css/inicio.html no se tocan. */

:root {
  --steel: #1c1a17; --steel-2: #241f1a; --steel-3: #2d2620;
  --on-steel: #f4f2ee; --on-steel-2: #b9b2a8;
  --accent: #c65a2e; --accent-ink: #a8451c; --on-accent: #fff6f0;
  --accent-soft: rgba(198, 90, 46, .16);
}

.ads-bar .wrap { justify-content: space-between; }
.cta-ghost.on-dark { border-color: rgba(244, 242, 238, .3); color: var(--on-steel); }
.cta-ghost.on-dark:hover { border-color: rgba(244, 242, 238, .55); }

/* ---------- hero editorial asimétrico ---------- */
.ed-hero { position: relative; background: var(--steel); color: var(--on-steel); overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.ed-hero-media { position: absolute; inset: 0 0 0 54%; }
.ed-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--steel) 0%, rgba(28, 26, 23, 0) 26%); }
.ed-hero-text { position: relative; z-index: 1; max-width: 620px; padding: 90px 20px 90px 6vw; }
.ed-hero-text .ed-num { color: var(--accent); }
.ed-hero-text h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: .98; letter-spacing: -.5px; max-width: 15ch; margin-top: 8px; }
.ed-hero-text .lead { margin-top: 18px; max-width: 42ch; font-size: clamp(16px, 1.4vw, 18px); color: var(--on-steel-2); }
@media (max-width: 900px) {
  .ed-hero { display: block; min-height: auto; }
  .ed-hero-media { position: relative; inset: auto; width: 100%; height: 280px; }
  .ed-hero-media::after { background: linear-gradient(180deg, rgba(28, 26, 23, 0) 55%, var(--steel) 100%); }
  .ed-hero-text { max-width: none; padding: 34px 20px 44px; }
}

/* ---------- iconos de apoyo visual (trust bar + value props) ---------- */
.trust-item .trust-icon { display: inline-block; width: 28px; height: 28px; color: var(--accent); margin: 0 auto 10px; }
.trust-icon svg { display: block; width: 100%; height: 100%; }

/* ---------- proyectos reales: fotos a sangre con ficha superpuesta ---------- */
.ed-proof { padding: 20px 0 10px; }
.ed-proof-head { margin-bottom: 20px; }
.ed-frame { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; margin-bottom: 14px; background: var(--surface-2); }
.ed-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-cap { position: absolute; max-width: 320px; background: rgba(28, 26, 23, .88); color: #fff; padding: 18px 20px; border-left: 4px solid var(--accent); }
.ed-cap-br { right: 24px; bottom: 24px; }
.ed-cap-tl { left: 24px; top: 24px; }
.ed-cap b { display: block; font-family: var(--font-cond); font-size: 19px; margin-bottom: 4px; }
.ed-cap span { font-size: 13.5px; color: #cfcac3; }
@media (max-width: 700px) {
  .ed-frame { aspect-ratio: 4 / 3; }
  .ed-cap { max-width: none; left: 12px; right: 12px; bottom: 12px; top: auto; }
}

.ver-todo { margin-top: 18px; text-align: center; }
.ver-todo a { font-weight: 700; color: var(--accent-ink); }

.closer { position: relative; overflow: hidden; color: var(--on-steel); padding: 72px 20px; text-align: center; }
.closer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 26, 23, .82), rgba(28, 26, 23, .92)); }
.closer .wrap { position: relative; z-index: 1; }
.closer h2 { font-size: clamp(26px, 3.4vw, 36px); }
.closer p { color: var(--on-steel-2); margin-top: 12px; font-size: 16px; }
.closer-ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.js-animate .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.js-animate .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-animate .reveal { transition: none; opacity: 1; transform: none; }
}