/* ── modules/landing.css — landing público (rebrand "tero") ───────────────────
   Cargado por templates/landing.html. Standalone (no extiende base.html).
   Paleta tero: primary #1d69a0 · sky #78bedc · sage #94c782 · navy #244959
   · dark #16303b · texto #244959 · muted #6b8794 · gold #d99a3f. */

:root{
    --primary:#1d69a0; --primary-2:#78bedc; --sage:#94c782; --gold:#d99a3f;
    --grad:linear-gradient(310deg,#1d69a0,#78bedc);
    --navy:#244959; --dark:#16303b; --ink:#244959; --muted:#6b8794;
    --bg:#ffffff; --bg-soft:#f5f8fa; --border:rgba(36,73,89,.09); --accent:#78bedc;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Open Sans',system-ui,sans-serif;color:var(--ink);line-height:1.6;background:var(--bg);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.15;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
    color:var(--primary);background:rgba(29,105,160,.1);padding:.38rem .8rem;border-radius:999px}
.pill-light{color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(4px)}

/* NAV */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:9px}
.brand-logo-img{height:40px}
footer .brand-logo-img{filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:.92rem;color:var(--ink);font-weight:600}
.nav-links a:hover{color:var(--primary)}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;padding:.62rem 1.2rem;border-radius:.7rem;border:none;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-ghost{color:var(--ink);background:transparent}
.btn-ghost:hover{color:var(--primary)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 18px -6px rgba(29,105,160,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(29,105,160,.65)}
.btn-lg{padding:.9rem 1.7rem;font-size:1rem}

/* ══ HERO ══ */
.hero{position:relative;background:linear-gradient(150deg,#244959 0%,#1d69a0 55%,#2f86bd 100%);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(2px)}
.hero-bg .orb-1{width:520px;height:520px;right:-160px;top:-180px;background:radial-gradient(circle,rgba(120,190,220,.45),transparent 65%)}
.hero-bg .orb-2{width:420px;height:420px;left:-140px;bottom:-200px;background:radial-gradient(circle,rgba(148,199,130,.28),transparent 65%)}
.hero-bg .grid-lines{position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:46px 46px;mask-image:radial-gradient(circle at 70% 40%,#000,transparent 75%)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:92px 24px 104px}
.hero h1{color:#fff;font-size:3.4rem;line-height:1.06}
.hero h1 .hl{color:#bfe3f3;background:linear-gradient(90deg,#cfeaf7,#94c782);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{color:rgba(255,255,255,.92);font-size:1.16rem;margin:20px 0 32px;max-width:500px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(0,0,0,.3)}
.btn-outline-w{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-w:hover{background:rgba(255,255,255,.16)}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:.9rem;color:rgba(255,255,255,.8)}
.hero-trust b{color:#fff}
.avatars{display:flex}
.avatars span{width:30px;height:30px;border-radius:50%;border:2px solid #2a6a97;margin-left:-9px;
    background:linear-gradient(135deg,#78bedc,#94c782)}
.avatars span:first-child{margin-left:0;background:linear-gradient(135deg,#d99a3f,#e0b46b)}
.avatars span:nth-child(3){background:linear-gradient(135deg,#1d69a0,#78bedc)}

/* Composición de fotos del hero */
.hero-visual{position:relative;min-height:440px}
.hv-photo{position:absolute;border-radius:20px;overflow:hidden;box-shadow:0 34px 70px -24px rgba(0,20,40,.6);border:4px solid rgba(255,255,255,.85)}
.hv-photo img{width:100%;height:100%;object-fit:cover}
.hv-main{width:78%;height:340px;right:0;top:6px;transform:rotate(1.4deg)}
.hv-main .hv-tag{position:absolute;left:14px;top:14px;background:rgba(22,48,59,.72);backdrop-filter:blur(4px);color:#fff;font-size:.74rem;font-weight:700;padding:.32rem .7rem;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.hv-kids{width:150px;height:150px;left:0;bottom:0;transform:rotate(-3deg);z-index:2}
.hero-card{position:absolute;left:-6px;top:-14px;width:264px;z-index:3;background:#fff;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,20,40,.55);padding:18px 20px;color:var(--ink)}
.hero-card .hc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hero-card .hc-ic{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.hero-card .hc-sub{color:var(--muted);font-size:.8rem}
.hero-card .stat{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.88rem}
.hero-card .stat:last-child{border-bottom:none}
.hero-card .stat b{font-size:1.02rem}
.badge-ok{background:rgba(76,140,90,.15);color:#4c8c5a;font-weight:800;font-size:.72rem;padding:.2rem .6rem;border-radius:999px}
.badge-warn{background:rgba(217,154,63,.16);color:#c8862c;font-weight:800;font-size:.72rem;padding:.2rem .6rem;border-radius:999px}

/* LOGOS */
.logos{padding:26px 0;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.logos .wrap{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;color:var(--muted);font-weight:700;font-size:1.08rem}
.logos .logos-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7;font-weight:800}
.logos span:not(.logos-lbl){opacity:.65}
.logos i{font-size:1.4rem;vertical-align:middle;margin-right:6px;color:var(--primary)}

/* SECTION base */
section{padding:92px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 54px}
.sec-head h2{font-size:2.25rem;margin:14px 0 12px}
.sec-head p{color:var(--muted);font-size:1.06rem}

/* FEATURES */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:30px;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 46px -20px rgba(20,40,60,.28);border-color:transparent}
.card .ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.55rem;color:#fff;margin-bottom:16px;background:var(--grad);box-shadow:0 10px 20px -8px rgba(29,105,160,.5)}
.card h3{font-size:1.16rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem}
.ic-2{background:linear-gradient(310deg,#4c8c5a,#94c782)!important;box-shadow:0 10px 20px -8px rgba(76,140,90,.5)!important}
.ic-3{background:linear-gradient(310deg,#78bedc,#1d69a0)!important}
.ic-4{background:linear-gradient(310deg,#d99a3f,#e0b46b)!important;box-shadow:0 10px 20px -8px rgba(217,154,63,.5)!important}
.ic-5{background:linear-gradient(310deg,#d1584f,#e07a6f)!important;box-shadow:0 10px 20px -8px rgba(209,88,79,.5)!important}
.ic-6{background:linear-gradient(310deg,#244959,#1d69a0)!important}

/* SPLIT (foto + copy) */
.split{background:var(--bg-soft)}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-photo{position:relative}
.split-photo>img{width:100%;height:440px;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -24px rgba(20,40,60,.4)}
.split-badge{position:absolute;right:-18px;bottom:26px;background:#fff;border-radius:14px;padding:13px 16px;box-shadow:0 20px 44px -16px rgba(20,40,60,.4);display:flex;align-items:center;gap:11px}
.split-badge .sb-ic{width:40px;height:40px;border-radius:11px;background:linear-gradient(310deg,#d1584f,#e07a6f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.split-badge b{font-size:.95rem}
.split-badge .sb-sub{color:var(--muted);font-size:.8rem}
.split-copy h2{font-size:2.1rem;margin:14px 0 14px}
.split-lead{color:var(--muted);font-size:1.05rem;margin-bottom:22px}
.checks{list-style:none;margin:0 0 28px}
.checks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:1rem;color:var(--ink)}
.checks li i{color:var(--sage);font-size:1.25rem;margin-top:1px;flex-shrink:0}
.checks b{font-weight:700}

/* MOSAICO */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:220px 220px;gap:16px}
.mosaic figure{position:relative;overflow:hidden;border-radius:18px;margin:0}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaic figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(22,48,59,.72))}
.mosaic figure:hover img{transform:scale(1.06)}
.mosaic figcaption{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;font-weight:700;font-size:.98rem;display:flex;align-items:center;gap:7px}
.mosaic figcaption i{font-size:1.15rem}
.m-a{grid-column:1;grid-row:1/3}
.m-b{grid-column:2/4;grid-row:1}
.m-c{grid-column:4;grid-row:1}
.m-d{grid-column:2/5;grid-row:2}

/* BANDA OSCURA */
.band{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(120,190,220,.2),transparent 65%)}
.band .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:60px 24px;text-align:center}
.band .num{font-size:2.6rem;font-weight:800;background:linear-gradient(310deg,#fff,#94c782);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.band .lbl{color:rgba(255,255,255,.72);font-size:.9rem;margin-top:4px}

/* PRICING */
.pricing{background:var(--bg-soft)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--border);border-radius:18px;padding:34px 28px;display:flex;flex-direction:column;position:relative}
.plan.feat{background:linear-gradient(160deg,#244959,#16303b);color:#fff;transform:scale(1.045);box-shadow:0 28px 56px -20px rgba(28,58,71,.55)}
.plan-desc{color:var(--muted);font-size:.9rem}
.plan-desc-light{color:rgba(255,255,255,.72)}
.plan h3{font-size:1.12rem;margin-bottom:6px}
.plan.feat h3{color:#fff}
.plan .amt{font-size:2.5rem;font-weight:800;margin:8px 0}
.plan .amt span{font-size:.9rem;font-weight:600;color:var(--muted)}
.plan.feat .amt span{color:rgba(255,255,255,.7)}
.plan ul{list-style:none;margin:18px 0 26px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:.92rem;color:var(--muted)}
.plan.feat li{color:rgba(255,255,255,.88)}
.plan li i{color:var(--sage);margin-top:3px}
.plan .tag{position:absolute;top:-12px;right:22px;background:linear-gradient(310deg,#d99a3f,#e0b46b);color:#fff;font-size:.68rem;font-weight:800;padding:.3rem .8rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 8px 18px -6px rgba(217,154,63,.6)}

/* CTA FINAL */
.cta{position:relative;background:linear-gradient(150deg,#1d69a0,#78bedc);color:#fff;text-align:center;overflow:hidden}
.cta-bg{position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:44px 44px;mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%)}
.cta .wrap{position:relative;padding:84px 24px}
.cta h2{color:#fff;font-size:2.4rem;margin-bottom:14px}
.cta p{color:rgba(255,255,255,.92);font-size:1.12rem;margin-bottom:30px}

/* FOOTER */
footer{background:#16303b;color:rgba(255,255,255,.7);padding:42px 0}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .brand{color:#fff}
footer a{color:rgba(255,255,255,.7)}footer a:hover{color:#fff}

/* RESPONSIVE */
@media(max-width:980px){
    .hero-inner{grid-template-columns:1fr;gap:64px}
    .hero h1{font-size:2.6rem}
    .hero-visual{min-height:400px;max-width:460px}
    .split .wrap{grid-template-columns:1fr;gap:40px}
    .split-photo{order:-1}
}
@media(max-width:760px){
    .nav-links{display:none}
    .hero h1{font-size:2.15rem}
    .grid,.price-grid,.band .wrap{grid-template-columns:1fr}
    .plan.feat{transform:none}
    .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}
    .m-a,.m-b,.m-c,.m-d{grid-column:auto;grid-row:auto;height:170px}
    .split-photo>img{height:320px}
}