:root{
    --blue:#062658;
    --blue-2:#0b4f9b;
    --blue-3:#0b67d0;
    --sky:#3da2ff;
    --orange:#f7a81b;
    --orange-2:#ffbf47;
    --green:#1da851;
    --green-2:#128843;
    --cream:#f5f8fd;
    --ink:#16304d;
    --muted:#607792;
    --line:#dce6f3;
    --shadow:0 16px 40px rgba(8,39,82,.10);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#eef4fb 0,#f8fbff 180px,#f6f9fd 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.top{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 24px;
    background:rgba(6,38,88,.92);
    backdrop-filter:blur(14px);
    color:#fff;
    box-shadow:0 8px 22px rgba(5,18,42,.18);
}
.brand{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.brand b{display:block;font-size:15px;letter-spacing:.01em;text-transform:none}
.top nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top nav a,.linkbutton{
    color:#fff;background:transparent;border:0;cursor:pointer;
    padding:10px 12px;border-radius:12px;font-weight:600;transition:.2s ease;
}
.top nav a:hover,.linkbutton:hover{background:rgba(255,255,255,.12)}
.inline{display:inline-flex;margin:0}

.hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(5,28,61,.92) 0,rgba(6,38,88,.84) 38%,rgba(8,71,140,.52) 100%),
        url('../assets/afiche.jpg') center/cover no-repeat;
    min-height:720px;
}
.heroShade{
    position:absolute;inset:0;
    background:
        radial-gradient(circle at 78% 22%, rgba(255,197,75,.28), transparent 23%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.10), transparent 25%),
        linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 100%);
    pointer-events:none;
}
.heroFlightTrail{
    position:absolute;right:17%;top:16%;width:410px;height:210px;
    border:4px solid rgba(255,189,55,.85);
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-radius:50% 56% 42% 58%/58% 60% 40% 42%;
    transform:rotate(8deg);
    filter:drop-shadow(0 0 10px rgba(255,200,82,.25));
    opacity:.95;
}
.heroPlane{
    position:absolute;right:16%;top:17%;font-size:42px;transform:rotate(19deg);
    color:#ffca49;text-shadow:0 8px 16px rgba(0,0,0,.18);
}
.heroInner{
    position:relative;z-index:2;
    max-width:1250px;margin:auto;
    padding:96px 24px 84px;
    display:grid;grid-template-columns:1.1fr .82fr;gap:34px;align-items:center;
}
.heroCopy{max-width:660px}
.heroLogo{width:min(420px,80%);margin-bottom:12px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.18))}
.eyebrow{
    display:inline-block;background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.16);
    padding:10px 16px;border-radius:999px;font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase
}
.eyebrow.dark{background:#eff5ff;color:var(--blue);border-color:#d7e5f4}
.heroEyebrow{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffd98c;font-size:12px;margin:16px 0 14px}
.hero h1{font-size:clamp(3rem,6vw,5rem);line-height:.93;margin:10px 0 16px;letter-spacing:-.03em}
.hero h1 em{color:var(--orange-2);font-style:normal;text-shadow:0 10px 24px rgba(0,0,0,.18)}
.hero p{max-width:620px;color:#e6eef8;font-size:18px;line-height:1.65}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border:0;border-radius:16px;padding:14px 20px;font-weight:800;cursor:pointer;text-align:center;
    box-shadow:0 10px 20px rgba(8,39,82,.10);transition:transform .18s ease, box-shadow .18s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(8,39,82,.16)}
.btn.orange{background:linear-gradient(135deg,var(--orange),#ffcb57);color:#102a4a}
.btn.blue{background:linear-gradient(135deg,var(--blue-3),#388eff);color:#fff}
.btn.green{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff}
.btn.outline{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff}
.btn.ghost{background:#eef4fb;color:var(--blue)}
.btn.small{padding:9px 12px;font-size:12px;border-radius:12px}
.fullWidth{width:100%}

.heroPoster{justify-self:end;max-width:420px;transform:rotate(-6deg)}
.heroPoster img{border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.30);border:10px solid rgba(255,255,255,.85)}

.strip{
    max-width:1220px;margin:-36px auto 0;position:relative;z-index:5;
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-radius:26px;overflow:hidden;background:#fff;box-shadow:var(--shadow)
}
.strip>div{padding:24px 22px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip small{display:block;color:var(--muted);font-weight:800;letter-spacing:.12em;font-size:11px;margin-bottom:8px}
.strip strong{font-size:17px;color:var(--blue)}

.section{max-width:1240px;margin:auto;padding:76px 24px}
.sectionTitle{text-align:center;max-width:760px;margin:0 auto 34px}
.sectionTitle h2{font-size:clamp(2rem,4vw,3rem);margin:12px 0;color:var(--blue)}
.sectionTitle p{color:var(--muted);line-height:1.65}

.curriculumGrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.curriculumCard{
    background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 18px;
    box-shadow:0 8px 24px rgba(14,47,92,.06);
    min-height:132px;position:relative;overflow:hidden
}
.curriculumCard::after{
    content:"";position:absolute;right:-26px;bottom:-26px;width:90px;height:90px;border-radius:50%;
    background:linear-gradient(135deg,rgba(247,168,27,.18),rgba(11,103,208,.10));
}
.curriculumIcon{font-size:28px;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#eff6ff;margin-bottom:14px}
.curriculumCard h3{margin:0;font-size:17px;line-height:1.35;color:#173657;position:relative;z-index:1}

.infoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.infoCard{background:#fff;padding:22px;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(14,47,92,.06)}
.infoCard[open]{border-color:#f0c05f;box-shadow:0 10px 30px rgba(247,168,27,.12)}
.infoCard summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}
.infoCard summary::-webkit-details-marker{display:none}
.infoCard .emoji{font-size:28px}
.infoCard summary b{flex:1;font-size:15px}
.infoCard .plus{font-size:24px;color:#dd960f}
.infoCard p{font-size:14px;color:var(--muted);margin:14px 0 0;line-height:1.65}

.callout,.groupBlock{margin-top:28px;border-radius:26px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.callout{background:linear-gradient(110deg,#08244d,#0c4f9d 65%,#f7a81b);color:#fff}
.callout p{color:#d8e6f7}

.formShell,.dashboard{max-width:1220px;margin:54px auto 88px;padding:0 24px;min-height:50vh}
.formShell{max-width:980px}
.formShell.narrow{max-width:500px}
.paymentShell{max-width:1180px}
.formShell>p,.dashboard .heading p{color:var(--muted)}
.step{color:var(--blue);font-weight:900;letter-spacing:.14em;font-size:12px;display:flex;justify-content:space-between;margin-bottom:12px}
.step span{color:var(--orange)}
.panel{
    background:#fff;border:1px solid var(--line);padding:28px;border-radius:24px;box-shadow:var(--shadow)
}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.formGrid h3{margin:16px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--blue);font-size:17px}
.full{grid-column:1/-1}
label{display:block;font-weight:700;color:#27415f;font-size:13px}
input:not([type=checkbox]):not([type=file]),select,textarea{
    display:block;width:100%;margin:8px 0 12px;padding:13px 14px;border:1px solid #cad9ea;border-radius:14px;background:#f9fbff;color:var(--ink);outline:0
}
input:focus,select:focus,textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(19,127,210,.12)}
textarea{resize:vertical}
.checks{background:#f5f8fe;border-radius:18px;padding:18px;display:grid;gap:12px}
.checks label{font-weight:500;display:flex;gap:10px;align-items:flex-start}
.checks input{margin-top:4px;accent-color:var(--blue)}
input[type=file]{display:block;margin:12px 0;padding:10px;background:#f4f7fc;width:100%;border-radius:12px}

.payGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0}
.paymentGrid{align-items:start}
.paymentHero{
    display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;
    background:linear-gradient(135deg,#ffffff,#f2f8ff 45%,#eff4fb 100%)
}
.paymentIdentity h2{margin:8px 0 8px;font-size:28px;color:var(--blue)}
.paymentIdentity p{margin:0;color:var(--muted)}
.paymentBadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.paymentBadges span{display:inline-flex;background:#eff5ff;color:var(--blue);padding:9px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid #d9e6f5}
.groupBtn{white-space:nowrap}
.payCard{padding:0;overflow:hidden}
.payCardHead{
    display:flex;align-items:center;gap:14px;padding:22px 24px 10px;
    background:linear-gradient(180deg,#fbfdff,#f4f9ff)
}
.payCardHead small{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.payCardHead h2{margin:4px 0 0;color:var(--blue);font-size:24px}
.payIcon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#eef5ff,#fff0d4);font-size:28px}
.payCardQR .qrFrame{padding:16px 24px 0}
.qrFrame{
    display:grid;place-items:center;background:linear-gradient(180deg,#fff,#f4f8ff);
    border:1px solid #dae7f5;border-radius:24px;margin:0 24px;padding:18px;box-shadow:inset 0 0 0 6px #f7fbff
}
.qrImg{width:min(100%,320px);aspect-ratio:1;object-fit:contain;margin:auto}
.emptyQR{border:2px dashed #c5d8eb;background:#f5f8fc;border-radius:18px;padding:56px 20px;text-align:center;margin:22px 24px;color:var(--muted)}
.qrMini{width:140px;margin-top:12px;display:block}
.center{text-align:center}
.muted{color:var(--muted);font-size:13px;line-height:1.6}
.payCard .btn,.payCard p{margin:18px 24px 0}
.uploadDrop{
    display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;
    border:2px dashed #c5daf1;border-radius:22px;padding:38px 20px;margin:18px 24px;background:linear-gradient(180deg,#f7fbff,#ffffff);
    cursor:pointer;transition:.18s ease
}
.uploadDrop:hover{border-color:#7fb1eb;background:#f3f9ff}
.uploadTitle{font-size:17px;color:var(--blue);font-weight:800}
.uploadText{font-size:13px;color:var(--muted);max-width:360px;line-height:1.55}
.previewBox{margin:18px 24px 0;border:1px solid var(--line);border-radius:18px;background:#fbfdff;padding:14px}
.previewMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);margin-bottom:10px}
.preview{max-height:360px;max-width:100%;object-fit:contain;border:1px solid #dce8f5;border-radius:16px;margin:0 auto}
.recoverPanel{max-width:520px;margin:auto}
.paySupportGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.supportCard{border-radius:24px;padding:28px 28px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:var(--shadow)}
.groupSupport{background:linear-gradient(135deg,#e9fff1,#ffffff)}
.tesoSupport{background:linear-gradient(135deg,#eef5ff,#ffffff)}
.supportCard h3{margin:8px 0 8px;font-size:24px;color:var(--blue)}
.supportCard p{margin:0;color:var(--muted);line-height:1.6}

.alert{max-width:1140px;margin:16px auto;padding:15px 20px;border-radius:14px}
.alert.good{background:#dff6e8;color:#0e653f}
.alert.danger{background:#ffe3de;color:#8f261c}
.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.heading h1{margin:0 0 6px;color:var(--blue);font-size:clamp(2rem,3vw,3rem)}
.metrics{display:grid;gap:14px;margin:28px 0}
.metricsFive{grid-template-columns:repeat(5,1fr)}
.metricsSix{grid-template-columns:repeat(6,1fr)}
.metric{padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;min-height:118px;box-shadow:0 8px 24px rgba(14,47,92,.05)}
.metric small{color:var(--muted);font-weight:800;letter-spacing:.08em;font-size:11px}
.metric b{font-size:clamp(19px,2vw,31px);color:#082b5a;display:block;margin-top:13px}
.filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filters input{flex:1;margin:0!important}
.filters select{width:210px;margin:0}
.tableWrap{width:100%;overflow:auto;margin-top:18px}
table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}
th{background:#eff5fc;color:#425d7f;font-size:11px;letter-spacing:.05em}
td,th{padding:13px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
td small{display:block;color:var(--muted);margin-top:2px}
.status{display:inline-block;border-radius:999px;font-size:11px;font-weight:900;padding:6px 11px;background:#fff1cc;color:#a7680a}
.status.CONFIRMADO{background:#d4f4e2;color:#086e3c}
.status.EN_REVISION{background:#e0ecff;color:#19529b}
.status.RECHAZADO{background:#ffe0e0;color:#922828}
.receiptImg{max-width:100%;max-height:580px;object-fit:contain;border:1px solid var(--line);border-radius:18px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}

footer{text-align:center;background:#061a37;color:#d5e1f1;padding:42px 20px 110px;font-size:13px}
footer a{color:#ffcf69}
footer .subtle{display:inline-block;margin-top:12px;color:#8ca1b9}

.mobileAppNav{display:none}

@media (max-width:1100px){
    .curriculumGrid{grid-template-columns:repeat(3,1fr)}
    .infoGrid{grid-template-columns:repeat(2,1fr)}
    .metricsSix{grid-template-columns:repeat(3,1fr)}
    .metricsFive{grid-template-columns:repeat(3,1fr)}
    .heroInner{grid-template-columns:1fr .8fr;gap:24px}
}

@media (max-width:860px){
    .top{padding:10px 16px}
    .top nav{gap:10px}
    .heroInner{grid-template-columns:1fr;padding:82px 18px 64px}
    .heroPoster{justify-self:center;max-width:320px;transform:rotate(-7deg)}
    .heroFlightTrail{width:270px;height:140px;right:8%;top:11%}
    .heroPlane{right:8%;top:10%;font-size:32px}
    .strip{grid-template-columns:repeat(2,1fr);margin:-20px 14px 0}
    .curriculumGrid{grid-template-columns:repeat(2,1fr)}
    .payGrid,.paySupportGrid{grid-template-columns:1fr}
    .paymentHero{flex-direction:column;align-items:flex-start}
    .supportCard{flex-direction:column;align-items:flex-start}
}

@media (max-width:680px){
    .top{min-height:72px;flex-wrap:wrap;padding:8px 14px}
    .brand img{width:45px;height:45px}
    .brand{font-size:10px;gap:10px}
    .brand b{font-size:13px}
    .top nav{width:100%;justify-content:space-around;gap:4px;overflow:auto;padding-bottom:4px}
    .top nav a,.linkbutton{font-size:11px;padding:8px 10px;white-space:nowrap}

    .hero{min-height:auto}
    .heroLogo{width:min(300px,76%);margin-bottom:14px}
    .hero h1{font-size:3.2rem}
    .hero p{font-size:16px}
    .actions{gap:10px}
    .heroPoster{max-width:250px;transform:rotate(-8deg)}
    .strip{grid-template-columns:1fr 1fr;border-radius:22px}
    .strip>div{padding:16px 14px}
    .section{padding:58px 16px}
    .sectionTitle h2{font-size:2rem}
    .curriculumGrid,.infoGrid{grid-template-columns:1fr}
    .callout,.groupBlock{flex-direction:column;align-items:flex-start;padding:24px}
    .formShell,.dashboard{margin:28px auto 80px;padding:0 14px}
    .panel{padding:20px 16px}
    .formGrid,.payGrid{grid-template-columns:1fr;gap:14px}
    .metricsFive,.metricsSix{grid-template-columns:repeat(2,1fr);gap:10px}
    .heading{flex-direction:column;align-items:flex-start}
    .filters{align-items:stretch}
    .filters input,.filters select{width:100%;flex:1 1 100%}

    .mobileAppNav{
        position:fixed;left:0;right:0;bottom:0;z-index:60;
        display:grid;grid-template-columns:repeat(5,1fr);gap:0;
        background:rgba(6,38,88,.97);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.09);
        padding:10px 8px calc(10px + env(safe-area-inset-bottom));
        box-shadow:0 -10px 24px rgba(0,0,0,.18)
    }
    .mobileAppNav a{
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
        color:#dbe8f7;font-size:11px;font-weight:700;padding:5px 2px;border-radius:14px
    }
    .mobileAppNav a.active{color:#ffca49}
    .mobileAppNav a span{line-height:1.1}
    footer{padding-bottom:130px}
}

/* =========================================================
   YO VOY V3 · IDENTIDAD APP WEB
   Portada, navegación móvil, tarjetas y panel administrativo
   ========================================================= */
.missionPillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1170px;
    margin: -23px auto 25px;
    position: relative;
    z-index: 6;
    border-radius: 20px;
    background: #062658;
    box-shadow: 0 16px 36px rgba(0, 19, 52, .2);
    overflow: hidden;
}
.missionPillars div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 14px;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, .13);
}
.missionPillars div:last-child { border-right: 0; }
.missionPillars span { color: #fbbc36; font-size: 34px; }
.missionPillars b { font-size: 12px; line-height: 1.4; }
.appHeroCTA { display: none; }
.adminQuickLinks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.adminQuickLinks a {
    display: grid;
    gap: 6px;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #dce6f3;
    box-shadow: 0 8px 22px rgba(6, 38, 88, .08);
    transition: transform .18s ease, border-color .18s ease;
}
.adminQuickLinks a:hover { transform: translateY(-3px); border-color: #f7a81b; }
.adminQuickLinks a>span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 27px;
    color: #0b67d0;
    background: #edf5ff;
    border-radius: 15px;
}
.adminQuickLinks strong { color: #062658; font-size: 18px; }
.adminQuickLinks small { color: #607792; }
.paymentGrid .payCard { min-height: 440px; }
.payCardQR>.btn { width: calc(100% - 48px); }
.payCardUpload form>.btn { width: calc(100% - 48px); margin-bottom: 24px; }

@media (max-width: 860px) {
    .adminQuickLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .missionPillars { margin: -10px 20px 25px; }
}
@media (max-width: 680px) {
    body { background: #eef4fb; }
    .top { min-height: 65px; padding: 8px 14px; }
    .top nav { display: none; }
    .brand { flex: 1; min-width: 0; }
    .brand span { font-size: 10px; letter-spacing: 0; }
    .brand b { font-size: 12px; }
    .brand img { width: 51px; height: 51px; }
    .hero {
        min-height: 560px;
        background-position: 67% center;
        background-image: linear-gradient(180deg, rgba(1, 28, 70, .42), rgba(3, 27, 62, .68) 65%, #062658), url('../assets/afiche.jpg');
    }
    .heroInner { display: flex; flex-direction: column; gap: 0; padding: 28px 17px 55px; }
    .heroCopy { width: 100%; text-align: center; }
    .heroLogo { width: 168px; height: 145px; object-fit: contain; margin: 0 auto 7px; }
    .hero .eyebrow { font-size: 10px; letter-spacing: .09em; padding: 8px 11px; }
    .hero .heroEyebrow { display: none; }
    .hero h1 { font-size: 1.8rem; margin: 13px 0 4px; }
    .heroCopy>p:not(.heroEyebrow) { display: none; }
    .hero .actions { display: none; }
    .heroPoster { width: 62%; max-width: 230px; margin: 22px auto 0; transform: rotate(-8deg); }
    .heroPoster img { width: 100%; border: 5px solid rgba(255,255,255,.95); border-radius: 13px; }
    .heroFlightTrail { width: 185px; height: 130px; top: 67px; right: -18px; opacity: .75; }
    .heroPlane { top: 90px; right: 14px; font-size: 31px; }
    .missionPillars {
        margin: -17px 10px 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-radius: 17px;
    }
    .missionPillars div { flex-direction: column; gap: 6px; padding: 14px 5px; text-align: center; }
    .missionPillars span { font-size: 27px; }
    .missionPillars b { font-size: 8px; line-height: 1.3; }
    .appHeroCTA { display: block; margin: 12px 14px 22px; }
    .appHeroCTA .btn { border-radius: 13px; padding: 16px; }
    .strip { margin: 0 14px 12px; }
    .strip strong { font-size: 13px; overflow-wrap: anywhere; }
    .section { padding: 30px 14px; }
    .sectionTitle { margin-bottom: 19px; text-align: left; }
    .sectionTitle h2 { font-size: 24px; }
    .curriculumGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .curriculumCard { min-height: 109px; padding: 12px; border-radius: 14px; }
    .curriculumIcon { width: 35px; height: 35px; font-size: 20px; margin-bottom: 7px; border-radius: 10px; }
    .curriculumCard h3 { font-size: 12px; }
    .infoGrid { grid-template-columns: 1fr; }
    .paymentIdentity h2 { font-size: 21px; }
    .paymentHero { padding: 20px; }
    .paymentHero .btn { width: 100%; white-space: normal; }
    .payCardHead h2 { font-size: 19px; }
    .payCardHead { padding: 17px 17px 10px; }
    .payCardQR .qrFrame { margin: 0 16px; }
    .payCard .btn, .payCard p { margin-left: 16px; margin-right: 16px; }
    .payCardQR>.btn,.payCardUpload form>.btn { width: calc(100% - 32px); }
    .uploadDrop { margin: 14px 16px; }
    .supportCard { padding: 21px; }
    .supportCard .btn { width: 100%; }
    .mobileAppNav { padding-top: 7px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .mobileAppNav a { font-size: 10px; }
    .mobileAppNav .navSymbol { font-size: 24px; font-weight: 800; line-height: 1.15; }
    .dashboard { margin-top: 20px; }
    .adminQuickLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .adminQuickLinks a { padding: 14px; min-height: 126px; }
    .adminQuickLinks a>span { width: 42px; height: 42px; font-size: 22px; }
    .adminQuickLinks strong { font-size: 15px; }
    .adminQuickLinks small { font-size: 11px; }
    .metric { padding: 14px 12px; min-height: 96px; }
    .metric b { font-size: 18px; }
    .metric small { font-size: 9px; }
    .dashboard .panel { padding: 17px 12px; }
    .dashboard .tableWrap { border-radius: 12px; }
}


/* V4 · Portada de viaje sin repetir el afiche */
.heroJourney {
    position: relative;
    width: min(100%, 460px);
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-4deg);
    animation: journeyArrive 850ms ease both;
}
.heroJourney img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 28px rgba(0, 15, 40, .28));
}
.journeyCaption {
    display: inline-block;
    margin-top: -24px;
    position: relative;
    padding: 12px 19px;
    color: #062658;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .12em;
    border-radius: 999px;
    background: linear-gradient(120deg, #ffc74c, #fff0b0);
    box-shadow: 0 10px 22px rgba(0, 13, 46, .25);
}
@keyframes journeyArrive {
    from { opacity: 0; transform: translateY(16px) rotate(-8deg); }
    to { opacity: 1; transform: translateY(0) rotate(-4deg); }
}
@media (max-width: 860px) {
    .heroJourney { justify-self: center; width: min(78vw, 345px); }
}
@media (max-width: 680px) {
    .hero {
        background-image: linear-gradient(180deg, rgba(1, 28, 70, .47), rgba(3, 27, 62, .79) 65%, #062658), url('../assets/afiche.jpg');
    }
    .heroJourney {
        width: min(72vw, 295px);
        margin: 10px auto 0;
    }
    .heroJourney img { max-height: 270px; }
    .journeyCaption { margin-top: -8px; font-size: 9px; padding: 10px 12px; }
    .mobileAppNav:not(.adminAppNav) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .heroJourney { animation: none; }
}

/* La portada no reutiliza el afiche, ni como fondo. */
.hero {
    background-image:
        radial-gradient(ellipse at 76% 30%, rgba(255, 191, 77, .28), transparent 32%),
        radial-gradient(ellipse at 28% 15%, rgba(22, 147, 218, .54), transparent 44%),
        linear-gradient(135deg, #051a3f 0%, #063c78 49%, #09234e 100%);
    background-size: cover;
}
@media (max-width: 680px) {
    .hero {
        background-image:
            radial-gradient(ellipse at 60% 34%, rgba(255, 174, 64, .20), transparent 44%),
            radial-gradient(ellipse at 28% 0%, rgba(37, 127, 214, .44), transparent 58%),
            linear-gradient(160deg, #052b62, #061a3e 100%);
    }
}