/* Colores tomados de https://zastalent.myjob.solutions/ */
:root{
  --azul:#1e3a5f;       /* azul principal (barra, bandas, títulos) */
  --azul2:#2563a8;      /* azul secundario (botones, acentos) */
  --hero:#0f2544;       /* fondo de la portada */
  --footer:#0b2545;     /* fondo del pie de página */
  --verde:#059669;      /* verde de confirmación */
  --bg:#eef2f7;         /* fondos suaves */
  --gris:#f1f5f9;
  --texto:#1e293b;
  --suave:#64748b;
  --borde:#e2e8f0;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--texto);background:#fff}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--azul)}
h4,h5{font-weight:700;color:var(--azul)}
h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.muted{color:var(--suave)}

/* Botón */
.btn-brand{background:var(--azul2);color:#fff;border:0;border-radius:999px;font-weight:600;padding:.6rem 1.4rem}
.btn-brand:hover{background:var(--azul);color:#fff}
.btn-lg.btn-brand{padding:.85rem 1.9rem}

.btn-outline-brand{background:transparent;color:var(--azul2);border:2px solid var(--azul2);border-radius:999px;font-weight:600;padding:.55rem 1.4rem}
.btn-outline-brand:hover{background:var(--azul2);color:#fff}
.btn-outline-pill{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);border-radius:999px;font-weight:600}
.btn-outline-pill:hover{background:#fff;color:var(--azul)}
.btn-light-pill{background:#fff;color:var(--azul);border:0;border-radius:999px;font-weight:600;padding:.7rem 1.6rem}
.btn-light-pill:hover{background:var(--bg);color:var(--azul)}
.step-link{display:inline-block;margin-top:12px;font-weight:600;color:var(--azul2);text-decoration:none}
.step-link:hover{color:var(--azul);text-decoration:underline}

/* Logo superior */
.logobar{background:var(--azul);padding:12px 0}
.logo-img{height:46px;width:auto;display:block}

/* Hero */
.hero{background:var(--hero);color:#fff;padding:80px 0}
.hero h1{color:#fff;font-size:clamp(2rem,4vw,3.1rem);line-height:1.15;margin-bottom:20px}
.lead-text{font-size:1.1rem;color:#cbd5e1;max-width:520px;margin-bottom:28px}
.mock-wrap{position:relative;max-width:440px;margin:0 auto;padding:20px}
.payslip{background:#fff;color:var(--texto);border-radius:16px;padding:26px;box-shadow:0 14px 36px rgba(0,0,0,.3)}
.pill{font-size:.72rem;padding:3px 10px;border-radius:50px;background:var(--bg);color:var(--azul2);font-weight:600}
.line{height:9px;border-radius:6px;background:var(--borde);margin-bottom:8px}
.payslip hr{opacity:.12;margin:16px 0}
.row-item{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;padding:7px 0}
.bar{display:block;width:90px;height:9px;border-radius:6px;background:#d5dde8}
.bar.short{width:55px}.bar.mid{width:72px}
.bar.blue{background:var(--azul2);width:100px}
.row-item.total{font-weight:700}
.chip-float{position:absolute;background:#fff;color:var(--texto);border-radius:10px;padding:8px 14px;font-size:.8rem;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.25);display:flex;gap:6px;align-items:center}
.chip-float i{color:var(--verde)}
.c1{top:0;right:-6px}.c2{bottom:0;left:-6px}

/* Banda */
.band{background:var(--azul);color:#fff;padding:60px 0}
.band h2{color:#fff;margin-bottom:34px}
.band-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 34px}
.band-icons div{width:120px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.85rem}
.band-icons i{font-size:1.8rem;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}

/* Bloques */
.block{padding:80px 0}
.block.tint{background:var(--bg)}
.narrow{max-width:760px}

/* El proyecto / Cómo surge: dos textos separados por una línea vertical */
.split{display:grid;grid-template-columns:1fr 2px 1fr;gap:48px;align-items:stretch}
.split-line{background:var(--azul2);opacity:.35;border-radius:2px}
.split-col h2{margin-bottom:16px}
@media(max-width:768px){
  .split{grid-template-columns:1fr;gap:28px}
  .split-line{height:2px;width:100%}
}

/* Funcionamiento */
.feature{margin-bottom:60px}
.feature:last-child{margin-bottom:0}
.step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--azul2);color:#fff;font-weight:700;margin-bottom:12px}
.feature h3{font-size:1.5rem;margin-bottom:10px}
.visual{background:var(--bg);border-radius:20px;padding:36px;display:flex;align-items:center;gap:24px;min-height:200px}
.visual>i{font-size:3.4rem;color:var(--azul2)}
.visual ul{list-style:none;margin:0;padding:0}
.visual li{background:#fff;border-radius:10px;padding:9px 16px;margin:8px 0;font-size:.9rem;font-weight:500;box-shadow:0 3px 10px rgba(30,58,95,.08)}
.visual li i{color:var(--verde);margin-right:6px}

/* Por qué */
.why i{font-size:2.4rem;color:var(--azul2)}
.why h4{font-size:1.1rem;margin:12px 0 6px}
.why p{color:var(--suave);font-size:.92rem;margin:0}

/* Equipo */
/* Tarjetas del equipo: carnet de aprendiz */
.member{position:relative;overflow:hidden;text-align:center;border:1px solid var(--borde);border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(30,58,95,.14);transition:transform .35s ease,box-shadow .35s ease}
.id-top{position:relative;padding:34px 14px 62px;background:linear-gradient(135deg,var(--hero),var(--azul) 55%,var(--azul2))}
.id-slot{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:54px;height:11px;border-radius:99px;background:#fff;box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.id-brand{display:inline-flex;align-items:center;gap:8px;color:#fff}
.id-brand b{font-family:'Playfair Display',serif;font-weight:700;font-size:1.15rem}
.id-logo{height:26px;width:auto;background:#fff;border-radius:7px;padding:2px}
.avatar{position:relative;overflow:hidden;width:min(170px,78%);aspect-ratio:1;margin:-46px auto 0;border-radius:20px;background:var(--bg);display:grid;place-items:center;font-size:3.2rem;color:var(--azul2);border:5px solid #fff;box-shadow:0 10px 24px rgba(30,58,95,.28)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.member h5{font-family:'Playfair Display',serif;font-size:1.3rem;margin:18px 12px 0}
.member>span{display:inline-block;margin-top:10px;padding:5px 15px;border-radius:999px;background:var(--bg);color:var(--azul2);font-size:.8rem;font-weight:600}
.id-foot{margin:16px 20px 0;padding:14px 0 18px;border-top:2px dashed var(--borde);font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--suave)}
.id-bars{height:5px;background:repeating-linear-gradient(90deg,var(--azul) 0 3px,transparent 3px 6px,var(--azul2) 6px 8px,transparent 8px 12px)}
@media (min-width:992px){
  #equipo .row>div:nth-child(1) .member{transform:rotate(-2.2deg)}
  #equipo .row>div:nth-child(3) .member{transform:rotate(2.2deg)}
}
.member:hover,#equipo .row>div .member:hover{transform:rotate(0) translateY(-10px);box-shadow:0 22px 44px rgba(30,58,95,.24)}
@media (prefers-reduced-motion:reduce){.member{transition:none}}

/* Planes */
.plans-band{background:var(--azul);padding:80px 0}
.plan{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:26px 22px}
.plan.featured{border-top:5px solid var(--azul2)}
.badge-top{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--verde);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:1px;padding:5px 14px;border-radius:50px;white-space:nowrap}
.plan .seg{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--azul2)}
.plan h3{font-size:1.7rem;margin:2px 0 4px}
.plan .desc{color:var(--suave);font-size:.85rem;min-height:42px}
.old{text-decoration:line-through;color:var(--suave);font-size:.85rem}
.off{margin-left:6px;padding:2px 9px;border-radius:50px;font-size:.72rem;font-weight:700;background:#d1fae5;color:var(--verde)}
.price{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;line-height:1.15;color:var(--azul)}
.price small{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;color:var(--suave)}
.month{font-size:.8rem;color:var(--suave)}
.emp{display:flex;align-items:center;gap:8px;margin:14px 0 2px;padding:9px 12px;border-radius:10px;background:var(--bg);font-weight:600;font-size:.85rem;color:var(--azul2)}
.plan h6{margin:18px 0 4px;font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--azul)}
.plan ul{list-style:none;padding:0;margin:0}
.plan li{display:flex;gap:8px;padding:6px 0;font-size:.85rem;border-bottom:1px solid var(--borde)}
.plan li i{color:var(--verde);margin-top:2px}
.plan li.no{opacity:.45;text-decoration:line-through}
.plan li.no i{color:var(--suave)}
.plan .spacer{flex:1;min-height:20px}
.btn-plan{display:block;text-align:center;padding:11px;border-radius:999px;font-weight:600;text-decoration:none;background:var(--azul2);color:#fff}
.btn-plan:hover{background:var(--azul);color:#fff}

/* Footer (mismo estilo del sitio del proyecto) */
.footer-nuevo{background:var(--footer);color:#cbd5e1;padding:56px 0 24px}
.footer-cols{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.footer-cols{grid-template-columns:1.6fr 1fr 1fr 1.3fr}}
.footer-logo{height:42px;width:auto;display:block;margin-bottom:16px}
.footer-marca p{color:#94a3b8;font-size:.85rem;line-height:1.6;max-width:300px;margin-bottom:16px}
.footer-redes{display:flex;gap:10px}
.footer-redes a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.2s}
.footer-redes a:hover{background:var(--azul2)}
.footer-col h6{color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:16px}
.footer-col>a{display:block;color:#cbd5e1;font-size:.85rem;margin-bottom:10px;text-decoration:none}
.footer-col>a:hover{color:#fff;text-decoration:underline}
.footer-copy{color:#94a3b8;font-size:.8rem;text-align:center;padding-top:24px;margin-top:32px;border-top:1px solid rgba(255,255,255,.1)}

@media(max-width:768px){.hero{padding:50px 0}.block,.plans-band{padding:56px 0}.visual{padding:24px}}

/* Logo: imagen (img/logo.png) + texto en CSS */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand-icon{height:52px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text .b1{font-family:'Playfair Display',serif;font-weight:700;font-size:1.7rem;color:#fff}
.brand-text .b2{font-family:'Playfair Display',serif;font-weight:700;font-size:1.7rem;color:#5b9cf0;margin-top:2px}
.brand-footer{margin-bottom:16px}
.brand-footer .brand-icon{height:44px}
.brand-footer .brand-text .b1,.brand-footer .brand-text .b2{font-size:1.45rem}
@media (max-width:575px){.member h5{font-size:1.05rem}.id-brand b{font-size:1rem}.id-top{padding:32px 10px 58px}}