/* sx-tema.css — Tema compartido "azul zafiro" para páginas interiores de sopmex.com.mx */
:root {
    --sx-noche:#0A1220; --sx-panel:#0E1A2E; --sx-carta:#12213A; --sx-linea:#22375A;
    --sx-texto:#EDF2FA; --sx-niebla:#93A5C0; --sx-azul:#2F6FE0; --sx-azul2:#7FB2FF; --sx-cian:#22D3EE;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:var(--sx-noche); color:var(--sx-texto); overflow-x:hidden; }
a { text-decoration:none; }
strong { color:var(--sx-texto); font-weight:600; }
.cond { font-family:'Barlow Condensed',sans-serif; }
.wrap { max-width:1240px; margin:0 auto; padding:0 5vw; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.on { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}

/* Hero de página interior */
.sx-hero-int { position:relative; padding:160px 0 90px; min-height:72vh; display:flex; align-items:center; overflow:hidden;
    background:var(--hero-img) center/cover no-repeat; }
/* Video de fondo con movimiento (LTX-Video) */
.sx-hero-int .hero-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* Velos de gradiente para legibilidad del texto (izquierda + base) */
.sx-hero-int::before { content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(10,18,32,0.92) 12%, rgba(10,18,32,0.5) 48%, rgba(10,18,32,0.15) 100%); }
.sx-hero-int::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(0deg, var(--sx-noche) 2%, rgba(10,18,32,0) 30%); }
.sx-hero-int .wrap { position:relative; z-index:2; }
.sx-hero-int .eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--sx-azul2); font-weight:600; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; padding:7px 14px; border:1px solid rgba(127,178,255,0.3); border-radius:30px; background:rgba(47,111,224,0.08); }
.sx-hero-int h1 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(38px,5.5vw,64px); line-height:1.03; text-transform:uppercase; letter-spacing:.5px; max-width:820px; }
.sx-hero-int h1 span { background:linear-gradient(100deg,var(--sx-azul2),var(--sx-cian)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.sx-hero-int p { color:#C3D0E4; font-size:18px; margin-top:14px; max-width:640px; }

section { padding:78px 0; }
.sx-alt { background:var(--sx-panel); border-top:1px solid var(--sx-linea); border-bottom:1px solid var(--sx-linea); }
.titulo-sec { text-align:center; margin-bottom:44px; }
.titulo-sec .eyebrow { color:var(--sx-azul2); font-weight:600; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.titulo-sec h2 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(30px,4vw,44px); text-transform:uppercase; margin-top:8px; }
.titulo-sec h2 span { background:linear-gradient(100deg,var(--sx-azul2),var(--sx-cian)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.intro-texto { max-width:820px; margin:0 auto; text-align:center; color:#C3D0E4; font-size:18px; line-height:1.7; }

/* Tarjetas de contenido */
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.tarjeta { background:var(--sx-carta); border:1px solid var(--sx-linea); border-radius:16px; padding:30px 26px; text-align:center; transition:transform .15s, border-color .15s; }
.tarjeta:hover { transform:translateY(-4px); border-color:var(--sx-azul); }
.tarjeta .ic { width:64px; height:64px; margin:0 auto 18px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(47,111,224,0.2),rgba(34,211,238,0.12)); overflow:hidden; }
.tarjeta .ic img { width:38px; height:38px; object-fit:contain; }
.tarjeta .ic i { color:var(--sx-cian); font-size:28px; }
.tarjeta h4 { font-size:19px; font-weight:600; margin-bottom:8px; }
.tarjeta p { color:var(--sx-niebla); font-size:14.5px; line-height:1.55; }

/* CTA final */
.cta-final { text-align:center; }
.cta-final .caja { background:linear-gradient(100deg, var(--sx-panel), rgba(47,111,224,0.14)); border:1px solid var(--sx-azul); border-radius:22px; padding:56px 40px; }
.cta-final h2 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(28px,4vw,42px); text-transform:uppercase; margin-bottom:12px; }
.cta-final p { color:var(--sx-niebla); font-size:16px; margin-bottom:26px; max-width:640px; margin-left:auto; margin-right:auto; }

.btn-sx { display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 28px; border-radius:12px; font-weight:600; font-size:16px; background:linear-gradient(100deg,var(--sx-azul2),var(--sx-azul)); color:#fff; transition:transform .13s, box-shadow .13s; box-shadow:0 12px 26px -8px rgba(47,111,224,0.6); }
.btn-sx:hover { transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(47,111,224,0.75); }

.sx-pie { border-top:1px solid var(--sx-linea); padding:40px 0; color:#5F7492; font-size:14px; }
.sx-pie .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
.sx-pie a { color:var(--sx-niebla); }
.sx-pie a:hover { color:#fff; }