/* ElDaactar — sistema de diseño una sola fuente para todas las páginas. cambia aquí y cambia en todas. */ /* ══════════ TEMA CLARO ══════════ */ :root{ --sup0:#E8EDF2; /* fondo */ --sup1:#F3F6F9; --sup2:#FBFCFD; --sup3:#FFFFFF; /* lo más elevado */ --sup-b:#DCE4EB; /* hundido */ --az1:#3E8FC4; --az2:#1E6BA0; --az3:#0F4B7A; --az4:#0A3457; --az5:#06223A; --az6:#031423; --hie:#7FD4F5; --hie2:#B8E9FC; --t1:#0A2436; --t2:#2E4E63; --t3:#5F7E92; --t4:#94ABBC; --ac:var(--az2); --acS:var(--az1); --ln:rgba(10,36,54,.09); --ln2:rgba(10,36,54,.17); --lnAc:rgba(30,107,160,.3); --shC:10,36,54; /* color de sombra */ --sh1:0 1px 1px rgba(var(--shC),.05), 0 2px 5px rgba(var(--shC),.05), 0 5px 11px rgba(var(--shC),.045); --sh2:0 1px 2px rgba(var(--shC),.06), 0 3px 7px rgba(var(--shC),.06), 0 9px 18px rgba(var(--shC),.055), 0 19px 38px rgba(var(--shC),.045), 0 36px 68px rgba(var(--shC),.035); --sh3:0 2px 4px rgba(var(--shC),.08), 0 6px 13px rgba(var(--shC),.075), 0 14px 30px rgba(var(--shC),.07), 0 29px 58px rgba(var(--shC),.06), 0 56px 106px rgba(var(--shC),.05), 0 96px 172px rgba(var(--shC),.04); --shX:0 4px 8px rgba(6,34,58,.17), 0 10px 22px rgba(6,34,58,.16), 0 22px 46px rgba(6,34,58,.15), 0 44px 88px rgba(6,34,58,.13), 0 84px 156px rgba(6,34,58,.11), 0 140px 250px rgba(6,34,58,.08); --bri:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(var(--shC),.05); --briD:inset 0 1px 0 rgba(184,233,252,.2), inset 0 -1px 0 rgba(0,0,0,.4); --grano:.045; --canvasR:30; --canvasG:107; --canvasB:160; --pulsoR:127; --pulsoG:212; --pulsoB:245; --canvasOp:1; } /* ══════════ TEMA OSCURO ══════════ ocho escalones de negro, cada uno con un poco más de azul y un poco más de luz. la clave es que se distingan por 3-4%. */ :root[data-tema="oscuro"]{ --n0:#030405; /* el vacío */ --n1:#06080A; /* fondo de página */ --n2:#0A0D11; /* superficie base */ --n3:#0E1217; /* tarjeta */ --n4:#13181F; /* tarjeta elevada */ --n5:#1A2028; /* elevada + hover */ --n6:#222933; /* borde iluminado */ --n7:#2C3540; /* lo más alto */ --sup0:var(--n1); --sup1:var(--n2); --sup2:var(--n3); --sup3:var(--n4); --sup-b:var(--n0); --t1:#E9F1F7; --t2:#A9C0D0; --t3:#6E8698; --t4:#48596A; --ac:#4FA3D8; --acS:#7FD4F5; --ln:rgba(180,220,245,.07); --ln2:rgba(180,220,245,.13); --lnAc:rgba(127,212,245,.24); --shC:0,0,0; --sh1:0 1px 1px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.42), 0 5px 11px rgba(0,0,0,.34); --sh2:0 1px 2px rgba(0,0,0,.56), 0 3px 7px rgba(0,0,0,.5), 0 9px 18px rgba(0,0,0,.44), 0 19px 38px rgba(0,0,0,.36), 0 36px 68px rgba(0,0,0,.28); --sh3:0 2px 4px rgba(0,0,0,.62), 0 6px 13px rgba(0,0,0,.56), 0 14px 30px rgba(0,0,0,.5), 0 29px 58px rgba(0,0,0,.44), 0 56px 106px rgba(0,0,0,.36), 0 96px 172px rgba(0,0,0,.28); --shX:0 4px 8px rgba(0,0,0,.66), 0 10px 22px rgba(0,0,0,.6), 0 22px 46px rgba(0,0,0,.54), 0 44px 88px rgba(0,0,0,.46), 0 84px 156px rgba(0,0,0,.38), 0 140px 250px rgba(0,0,0,.3); --bri:inset 0 1px 0 rgba(190,228,250,.09), inset 0 -1px 0 rgba(0,0,0,.5); --briD:inset 0 1px 0 rgba(190,228,250,.13), inset 0 -1px 0 rgba(0,0,0,.6); --grano:.06; --canvasR:64; --canvasG:150; --canvasB:200; --pulsoR:150; --pulsoG:225; --pulsoB:255; --canvasOp:.85; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--sup0);color:var(--t1);font-family:var(--s); font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .55s cubic-bezier(.4,0,.2,1), color .55s cubic-bezier(.4,0,.2,1)} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--grano); transition:opacity .55s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")} /* viñeta solo en oscuro: hunde las orillas */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity .55s; background:radial-gradient(ellipse 118% 88% at 50% 38%, transparent 40%, rgba(0,0,0,.6) 100%)} :root[data-tema="oscuro"] body::before{opacity:1} #tela{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--canvasOp);transition:opacity .55s} .shell{position:relative;z-index:1} a{color:inherit;text-decoration:none} .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,54px)} h1{font-family:var(--d);font-weight:600;font-size:clamp(41px,7vw,88px);line-height:.99;letter-spacing:-.032em} h1 em{font-style:italic;font-weight:400;color:var(--ac)} h2{font-family:var(--d);font-weight:600;font-size:clamp(28px,4.5vw,52px);line-height:1.06;letter-spacing:-.026em} h3{font-family:var(--d);font-weight:600;font-size:clamp(23px,2.7vw,32px);line-height:1.15;letter-spacing:-.015em} .eyebrow{font-family:var(--m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ac)} .lead{font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.8;color:var(--t2);font-weight:200} /* ── nav ── */ .nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(24px) saturate(160%); background:color-mix(in srgb, var(--sup2) 88%, transparent); border-bottom:1px solid var(--ln); box-shadow:0 1px 0 var(--ln), 0 7px 22px rgba(var(--shC),.07), 0 18px 50px rgba(var(--shC),.05); transition:background .55s, border-color .55s} .nav-in{max-width:1560px;margin:0 auto;padding:14px clamp(20px,3.4vw,64px);display:flex;align-items:center;gap:clamp(16px,3vw,42px)} .mark{font-family:'Pinyon Script',cursive;font-size:26px;font-weight:400;letter-spacing:.01em;line-height:1} .mark i{font-family:inherit;font-style:normal;font-size:1em;color:inherit;margin-left:.06em} .foot .mark{font-size:21px} .links{display:flex;gap:clamp(13px,2vw,28px)} .links a{font-size:13.5px;color:var(--t3);padding:5px 0;position:relative;transition:color .28s} .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px; background:linear-gradient(90deg,var(--ac),var(--acS));transition:right .34s cubic-bezier(.2,.7,.3,1)} .links a:hover,.links a.on{color:var(--t1)} .links a:hover::after,.links a.on::after{right:0} /* interruptor de tema */ .tema{width:52px;height:27px;border-radius:99px;border:1px solid var(--ln2);cursor:pointer;position:relative; background:var(--sup-b);box-shadow:inset 0 2px 5px rgba(var(--shC),.16);transition:background .45s, border-color .45s; flex-shrink:0;margin-left:6px} .tema i{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%; background:linear-gradient(180deg,var(--sup3),var(--sup1)); box-shadow:var(--sh1), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .45s cubic-bezier(.5,1.6,.5,1), background .45s; display:flex;align-items:center;justify-content:center} .tema i::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ac);opacity:.85; box-shadow:0 0 8px var(--ac);transition:all .45s} :root[data-tema="oscuro"] .tema i{transform:translateX(25px)} :root[data-tema="oscuro"] .tema i::before{width:8px;height:8px;box-shadow:0 0 12px var(--acS);background:var(--acS)} .nav-cta{font-size:13px;font-weight:500;padding:9px 19px;border-radius:2px;color:#F2F9FD;white-space:nowrap; background:linear-gradient(180deg,var(--az2),var(--az3) 56%,var(--az4)); box-shadow:var(--sh1), inset 0 1px 0 rgba(184,233,252,.32), inset 0 -1px 0 rgba(0,0,0,.28); transition:transform .24s, box-shadow .24s} .nav-cta:hover{transform:translateY(-2px);box-shadow:var(--sh2), inset 0 1px 0 rgba(184,233,252,.48)} .burger{display:none;background:none;border:1px solid var(--ln2);border-radius:2px;padding:7px;cursor:pointer} .burger svg{width:19px;height:19px;fill:none;stroke:var(--t2);stroke-width:1.5} /* ── hero ── */ .hero{padding:clamp(30px,4vw,58px) 0 clamp(52px,6.5vw,104px)} .hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,80px);align-items:center} .hero h1{margin-top:22px} .hero .lead{margin-top:26px;max-width:44ch} .acciones{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap} .btn{font-size:14px;font-weight:500;padding:16px 30px;border-radius:2px;display:inline-block; transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, background .45s, color .45s} .btn.fill{color:#F2F9FD;background:linear-gradient(180deg,var(--az2),var(--az3) 54%,var(--az4)); box-shadow:var(--sh2), inset 0 1px 0 rgba(184,233,252,.36), inset 0 -1px 0 rgba(0,0,0,.3)} .btn.fill:hover{transform:translateY(-3px);box-shadow:var(--sh3), inset 0 1px 0 rgba(184,233,252,.54)} .btn.ghost{color:var(--t2);border:1px solid var(--ln2); background:linear-gradient(180deg,var(--sup2),var(--sup1));box-shadow:var(--sh1), var(--bri)} .btn.ghost:hover{transform:translateY(-3px);color:var(--t1);border-color:var(--lnAc);box-shadow:var(--sh2), var(--bri)} /* ── EL BLOQUE ── */ .blq-w{position:relative;perspective:1900px} .blq{position:relative;aspect-ratio:3/3.8;border-radius:4px; background: linear-gradient(178deg, rgba(3,12,22,.72) 0%, rgba(3,12,22,.22) 26%, rgba(3,12,22,.1) 52%, rgba(3,12,22,.55) 82%, rgba(3,12,22,.86) 100%), linear-gradient(96deg, rgba(3,12,22,.5), transparent 38%), url('lamina.jpg') center/cover no-repeat, linear-gradient(163deg,var(--az3) 0%,var(--az4) 38%,var(--az5) 70%,var(--az6) 100%); box-shadow:var(--shX), var(--briD);overflow:hidden; transform:rotateY(-7deg) rotateX(3deg); transition:transform .18s cubic-bezier(.25,.6,.3,1)} :root[data-tema="oscuro"] .blq{ background: linear-gradient(178deg, rgba(2,7,13,.78) 0%, rgba(2,7,13,.28) 26%, rgba(2,7,13,.14) 52%, rgba(2,7,13,.6) 82%, rgba(2,7,13,.9) 100%), linear-gradient(96deg, rgba(2,7,13,.55), transparent 38%), url('lamina-oscuro.jpg') center/cover no-repeat, linear-gradient(163deg,var(--n5) 0%,var(--n3) 40%,var(--n1) 74%,var(--n0) 100%)} .blq::before{content:"";position:absolute;inset:0; background:radial-gradient(ellipse 72% 52% at 34% 16%, rgba(127,212,245,.3), rgba(62,143,196,.09) 42%, transparent 70%)} .blq::after{content:"";position:absolute;left:-50%;top:0;width:50%;height:100%; background:linear-gradient(103deg,transparent,rgba(184,233,252,.1) 42%,rgba(184,233,252,.19) 51%,rgba(184,233,252,.07) 60%,transparent); animation:barrido 9s cubic-bezier(.5,0,.5,1) infinite;pointer-events:none} @keyframes barrido{0%{left:-52%}54%{left:104%}100%{left:104%}} .rejilla{position:absolute;inset:0;opacity:.4; background-image:linear-gradient(rgba(184,233,252,.1) 1px,transparent 1px), linear-gradient(90deg,rgba(184,233,252,.1) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 30%, #000, transparent 72%); mask-image:radial-gradient(ellipse 80% 70% at 40% 30%, #000, transparent 72%)} .marco{position:absolute;inset:16px;border:1px solid rgba(184,233,252,.22);border-radius:2px; box-shadow:inset 0 0 90px rgba(0,0,0,.52)} .marco span{position:absolute;width:13px;height:13px;border:1.5px solid var(--hie);opacity:.8} .marco span:nth-child(1){left:-1px;top:-1px;border-right:0;border-bottom:0} .marco span:nth-child(2){right:-1px;top:-1px;border-left:0;border-bottom:0} .marco span:nth-child(3){left:-1px;bottom:-1px;border-right:0;border-top:0} .marco span:nth-child(4){right:-1px;bottom:-1px;border-left:0;border-top:0} .placa{position:absolute;inset:16px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;text-align:center;padding:24px} .placa b{font-family:var(--d);font-size:clamp(58px,8.4vw,100px);font-weight:500;line-height:1; color:var(--hie2);opacity:.24;text-shadow:0 0 60px rgba(127,212,245,.5)} .placa span{font-family:var(--m);font-size:9.5px;letter-spacing:.36em;color:rgba(184,233,252,.5)} .cap{position:absolute;left:18px;bottom:18px;font-family:var(--m);font-size:9px; letter-spacing:.26em;color:var(--hie);text-transform:uppercase;opacity:.78} .idr{position:absolute;right:18px;top:18px;font-family:var(--m);font-size:8.5px; letter-spacing:.22em;color:rgba(184,233,252,.4)} .call{position:absolute;right:-18px;display:flex;align-items:center;gap:12px; background:linear-gradient(180deg,var(--sup3),var(--sup1)); border:1px solid var(--ln);border-left:2px solid var(--ac);border-radius:2px;padding:11px 17px; box-shadow:var(--sh3), var(--bri);z-index:3;transition:background .55s, border-color .55s} .call .n{font-family:var(--m);font-size:10px;color:var(--ac);letter-spacing:.14em} .call .r{height:1px;width:30px;background:linear-gradient(90deg,var(--acS),transparent)} .call .t{font-size:12px;color:var(--t2);white-space:nowrap;font-weight:300} /* ── cifras ── */ .data{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln); background:linear-gradient(180deg,var(--sup2),color-mix(in srgb, var(--sup0) 55%, transparent)); box-shadow:inset 0 1px 0 var(--ln), inset 0 -18px 38px rgba(var(--shC),.04);transition:background .55s} .data-in{max-width:1280px;margin:0 auto;padding:clamp(32px,4.2vw,56px) clamp(20px,4vw,54px); display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)} .stat{position:relative;padding-left:21px} .stat::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--acS),transparent)} .stat .k{font-family:var(--d);font-size:clamp(34px,4.9vw,58px);font-weight:600;line-height:1; letter-spacing:-.03em;color:var(--t1)} .stat .k sup{font-size:.4em;vertical-align:super;color:var(--ac);font-weight:400} .stat .l{margin-top:12px;font-family:var(--m);font-size:10.5px;line-height:1.9;color:var(--t3);letter-spacing:.04em} .sec{padding-block:clamp(60px,8.5vw,126px)} .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)} .sec-h h2{margin-top:14px} /* ── tarjetas ── */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)} .tile{position:relative;padding:clamp(28px,3.2vw,42px) clamp(22px,2.6vw,32px) clamp(24px,2.8vw,32px); border-radius:3px;border:1px solid var(--ln); background:linear-gradient(160deg,var(--sup3),var(--sup2) 60%,var(--sup1)); box-shadow:var(--sh2), var(--bri); transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s, background .55s; overflow:hidden;display:block} .tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--ac),var(--acS));transform:scaleX(0);transform-origin:left; transition:transform .48s cubic-bezier(.2,.7,.3,1)} .tile::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s; background:radial-gradient(ellipse 100% 64% at 50% 0%, rgba(62,143,196,.1), transparent 60%)} .tile:hover{transform:translateY(-11px);border-color:var(--lnAc);box-shadow:var(--sh3), var(--bri)} .tile:hover::before{transform:scaleX(1)} .tile:hover::after{opacity:1} .tile > *{position:relative} .tile h3{margin-top:16px} .tile p{margin-top:14px;font-size:14.5px;line-height:1.78;color:var(--t3);font-weight:200} .go{margin-top:26px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ac);transition:gap .32s} .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .tile:hover .go{gap:16px} /* ── docentes ── */ .docs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)} .doc{border-radius:3px;overflow:hidden;border:1px solid var(--ln);background:var(--sup2); box-shadow:var(--sh2), var(--bri); transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, background .55s} .doc:hover{transform:translateY(-10px);box-shadow:var(--sh3), var(--bri)} .doc .rt{aspect-ratio:1/1;position:relative; background:linear-gradient(160deg,var(--az3),var(--az5) 62%,var(--az6)); box-shadow:inset 0 0 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(184,233,252,.15)} :root[data-tema="oscuro"] .doc .rt{background:linear-gradient(160deg,var(--n5),var(--n1) 64%,var(--n0))} .doc .rt::after{content:"";position:absolute;inset:0; background:radial-gradient(ellipse 66% 56% at 50% 24%, rgba(127,212,245,.15), transparent 64%)} .doc .rt span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--m);font-size:9px;letter-spacing:.3em;color:rgba(184,233,252,.28)} .doc .info{padding:21px 23px 25px} .doc h4{font-family:var(--d);font-weight:600;font-size:21px;letter-spacing:-.012em} .doc .meta{margin-top:10px;font-family:var(--m);font-size:10.5px;line-height:2;color:var(--t3);letter-spacing:.03em} .doc .meta b{color:var(--ac);font-weight:400} /* ── registro ── */ .reg{padding:clamp(60px,8.5vw,126px) 0} .reg-card{position:relative;border-radius:4px;padding:clamp(34px,4.8vw,68px); background:linear-gradient(158deg,var(--az3),var(--az4) 44%,var(--az5) 78%,var(--az6)); box-shadow:var(--shX), var(--briD);overflow:hidden;color:#EAF4FA; border:1px solid transparent;transition:background .55s, border-color .55s} :root[data-tema="oscuro"] .reg-card{ background:linear-gradient(158deg,var(--n5),var(--n3) 46%,var(--n1) 80%,var(--n0)); border-color:var(--ln2)} .reg-card::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 58% at 16% 0%, rgba(127,212,245,.2), transparent 58%)} .reg-card::after{content:"";position:absolute;inset:0;opacity:.28;pointer-events:none; background-image:linear-gradient(rgba(184,233,252,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(184,233,252,.09) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 20% 10%, #000, transparent 70%); mask-image:radial-gradient(ellipse 70% 80% at 20% 10%, #000, transparent 70%)} .reg-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4.6vw,68px);align-items:start} .reg-card .eyebrow{color:var(--hie)} .reg-card h2{color:#F0F8FC} .reg-card .lead{color:rgba(234,244,250,.7)} .campo{margin-bottom:15px} .campo label{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:rgba(184,233,252,.52);margin-bottom:8px} .campo input,.campo select{width:100%;height:50px;border-radius:2px;padding:0 15px; font-family:var(--s);font-size:15px;color:#EAF4FA; background:rgba(3,10,18,.55);border:1px solid rgba(184,233,252,.18);outline:none; box-shadow:inset 0 3px 10px rgba(0,0,0,.45);transition:border-color .26s, box-shadow .26s} .campo input::placeholder{color:rgba(184,233,252,.32)} .campo input:focus,.campo select:focus{border-color:var(--hie); box-shadow:inset 0 3px 10px rgba(0,0,0,.45), 0 0 0 3px rgba(127,212,245,.13)} .campo select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237FD4F5' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:34px} .r2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .reg .btn.fill{width:100%;text-align:center;margin-top:10px;padding:17px; background:linear-gradient(180deg,var(--hie2),var(--hie) 55%,#4FB4DC);color:#031423; box-shadow:var(--sh2), inset 0 1px 0 rgba(255,255,255,.5), 0 0 44px rgba(127,212,245,.28)} .reg .btn.fill:hover{box-shadow:var(--sh3), inset 0 1px 0 rgba(255,255,255,.64), 0 0 72px rgba(127,212,245,.44)} .fine{margin-top:15px;font-family:var(--m);font-size:10px;line-height:1.95; color:rgba(184,233,252,.44);letter-spacing:.03em} /* ── foot ── */ .foot{border-top:1px solid var(--ln);padding:clamp(40px,5vw,68px) 0 clamp(28px,3.5vw,46px); transition:border-color .55s} .foot-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start} .foot p{font-size:13.5px;color:var(--t3);max-width:36ch;font-weight:200;line-height:1.8} .foot .cols{display:flex;gap:clamp(28px,5vw,72px)} .foot .col a{display:block;font-size:13px;color:var(--t3);margin-bottom:10px;transition:color .26s} .foot .col a:hover{color:var(--ac)} .foot .col .t{font-family:var(--m);font-size:9px;letter-spacing:.26em;text-transform:uppercase; color:var(--ac);margin-bottom:16px} .legal{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--ln); font-family:var(--m);font-size:10px;color:var(--t4);letter-spacing:.05em} /* ── entrada ── */ .en{opacity:0;transform:translateY(34px)} .on-load .en{animation:sube 1.15s cubic-bezier(.16,.84,.3,1) forwards} .on-load .d1{animation-delay:.1s}.on-load .d2{animation-delay:.24s} .on-load .d3{animation-delay:.38s}.on-load .d4{animation-delay:.5s}.on-load .d5{animation-delay:.16s} @keyframes sube{to{opacity:1;transform:none}} .blq-w.en{transform:translateY(46px) scale(.965)} .on-load .blq-w.en{animation:sube 1.5s cubic-bezier(.16,.84,.3,1) .3s forwards} .call{opacity:0} .on-load .call{animation:sube .9s cubic-bezier(.16,.84,.3,1) forwards} .on-load .call:nth-of-type(1){animation-delay:1.1s} .on-load .call:nth-of-type(2){animation-delay:1.25s} .on-load .call:nth-of-type(3){animation-delay:1.4s} .rv{opacity:0;transform:translateY(32px);transition:opacity 1.05s cubic-bezier(.2,.7,.3,1), transform 1.05s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .rv,.en,.call{opacity:1;transform:none}.blq{transform:none}#tela{display:none} } @media(max-width:900px){ .hero-in,.reg-grid{grid-template-columns:1fr} .tiles,.docs{grid-template-columns:1fr} .data-in{grid-template-columns:1fr 1fr;gap:26px} .links,.nav-cta{display:none} .burger{display:block} .tema{margin-left:auto} .call{right:8px} .blq{aspect-ratio:3/3.2;margin-top:0;transform:none!important} } /* ══════════════════════════════════════════════════ COMPONENTES DE PÁGINAS INTERIORES (wikimed, medtest, cursos) ══════════════════════════════════════════════════ */ /* encabezado de página interior */ .phead{padding-block:clamp(40px,5.5vw,78px) clamp(26px,3.4vw,44px);border-bottom:1px solid var(--ln)} .phead h1{font-size:clamp(34px,5.4vw,62px);margin-top:16px} .phead .lead{margin-top:20px;max-width:52ch} .phead .migas{display:flex;align-items:center;gap:9px;font-family:var(--m); font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)} .phead .migas a{color:var(--ac)} .phead .migas i{font-style:normal;opacity:.5} /* dos columnas con barra lateral */ .dos{display:grid;grid-template-columns:1fr 316px;gap:clamp(22px,3.4vw,46px);align-items:start} .lado{position:sticky;top:88px;border-radius:4px;border:1px solid var(--ln);overflow:hidden; background:linear-gradient(160deg,var(--sup3),var(--sup2));box-shadow:var(--sh2), var(--bri); transition:background .55s} .lado .lh{padding:16px 20px;border-bottom:1px solid var(--ln); font-family:var(--m);font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:var(--t3)} .lado .lb{padding:16px 20px} /* buscador */ .busca{position:relative;margin-bottom:14px} .busca input{width:100%;height:46px;border-radius:3px;padding:0 15px 0 42px; font-family:var(--s);font-size:14.5px;color:var(--t1); background:var(--sup1);border:1px solid var(--ln2);outline:none; box-shadow:inset 0 2px 6px rgba(var(--shC),.06);transition:border-color .26s, box-shadow .26s} .busca input::placeholder{color:var(--t4)} .busca input:focus{border-color:var(--ac);box-shadow:inset 0 2px 6px rgba(var(--shC),.06), 0 0 0 3px rgba(30,107,160,.1)} .busca svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px; fill:none;stroke:var(--t4);stroke-width:1.7;pointer-events:none} /* filtros */ .filtros{display:flex;gap:7px;flex-wrap:wrap} .f{font-family:var(--s);font-size:12px;font-weight:500;padding:7px 14px;border-radius:99px; border:1px solid var(--ln2);background:var(--sup1);color:var(--t3);cursor:pointer; box-shadow:var(--sh1);transition:all .24s} .f:hover{border-color:var(--lnAc);color:var(--t1)} .f.on{background:linear-gradient(180deg,var(--az2),var(--az4));border-color:transparent;color:#F2F9FD; box-shadow:var(--sh2), inset 0 1px 0 rgba(184,233,252,.3)} /* lista de escuelas */ .escuelas{display:grid;gap:10px} .esc-i{position:relative;border-radius:3px;padding:18px 22px;border:1px solid var(--ln); background:linear-gradient(160deg,var(--sup3),var(--sup2) 64%,var(--sup1)); box-shadow:var(--sh1), var(--bri);display:flex;align-items:center;gap:17px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s, background .55s} .esc-i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--ac),var(--acS));transform:scaleY(0);transform-origin:top; transition:transform .34s cubic-bezier(.2,.7,.3,1)} .esc-i:hover{transform:translateX(5px);border-color:var(--lnAc);box-shadow:var(--sh2), var(--bri)} .esc-i:hover::before{transform:scaleY(1)} .esc-i .tx{flex:1;min-width:0} .esc-i .tx b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35} .esc-i .tx .met{margin-top:6px;font-family:var(--m);font-size:10px; letter-spacing:.08em;color:var(--t4);display:flex;gap:9px;flex-wrap:wrap} .pill{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;padding:4px 11px; border-radius:99px;border:1px solid currentColor;white-space:nowrap} .pill.pub{color:var(--ac)} .pill.pri{color:var(--t3)} .esc-i .ir{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center; justify-content:center;border:1px solid var(--ln);background:var(--sup1);color:var(--ac); box-shadow:var(--sh1);transition:transform .3s} .esc-i .ir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8} .esc-i:hover .ir{transform:translateX(3px)} /* estado del mapa */ .estado{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--ln)} .estado h2{font-size:clamp(24px,3.2vw,36px)} .estado .cnt2{margin-top:8px;font-family:var(--m);font-size:11px; letter-spacing:.12em;color:var(--t4)} /* mapa */ .mapa{border-radius:4px;border:1px solid var(--ln);overflow:hidden;padding:20px; background:linear-gradient(160deg,var(--sup3),var(--sup1));box-shadow:var(--sh2), var(--bri); transition:background .55s} .mapa svg{width:100%;height:auto;display:block} .mapa path{fill:var(--sup1);stroke:var(--ln2);stroke-width:.7; transition:fill .26s, stroke .26s;cursor:pointer} .mapa path:hover{fill:color-mix(in srgb, var(--ac) 26%, var(--sup1));stroke:var(--ac)} .mapa path.on{fill:var(--ac);stroke:var(--acS)} .mapa path.vacio{cursor:default;opacity:.42} .mapa path.vacio:hover{fill:var(--sup1);stroke:var(--ln2)} /* tabla de datos */ .tabla{width:100%;border-collapse:collapse;font-size:14px} .tabla th{text-align:left;font-family:var(--m);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--t4);font-weight:400;padding:12px 14px; border-bottom:1.5px solid var(--ln2)} .tabla td{padding:14px;border-bottom:1px solid var(--ln);color:var(--t2)} .tabla tr:last-child td{border-bottom:none} .tabla tbody tr{transition:background .22s} .tabla tbody tr:hover{background:var(--sup1)} .tabla td b{color:var(--t1);font-weight:600} /* reactivo de examen */ .react{border-radius:4px;border:1px solid var(--ln);padding:clamp(24px,3vw,36px); background:linear-gradient(160deg,var(--sup3),var(--sup2));box-shadow:var(--sh2), var(--bri); transition:background .55s} .react .num{font-family:var(--m);font-size:10px;letter-spacing:.24em;color:var(--t4)} .react .q{font-size:clamp(17px,2vw,20px);font-weight:600;line-height:1.6;margin:14px 0 26px;letter-spacing:-.008em} .opc{display:flex;align-items:flex-start;gap:14px;border:1.5px solid var(--ln);border-radius:3px; padding:15px 18px;margin-bottom:10px;cursor:pointer;background:var(--sup1); transition:border-color .22s, background .22s, transform .22s} .opc:hover{border-color:var(--lnAc);transform:translateX(3px)} .opc.sel{border-color:var(--ac);background:color-mix(in srgb, var(--ac) 7%, var(--sup1)); box-shadow:0 0 0 3px rgba(30,107,160,.08)} .opc .letra{width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center; font-family:var(--m);font-size:13px;background:var(--sup3);color:var(--t3); border:1px solid var(--ln);flex-shrink:0;box-shadow:var(--sh1)} .opc.sel .letra{background:linear-gradient(180deg,var(--az2),var(--az4));color:#F2F9FD;border-color:transparent} .opc .txt{flex:1;font-size:15px;line-height:1.6;padding-top:3px} /* progreso */ .prog-b{height:5px;border-radius:99px;background:var(--sup-b);overflow:hidden; box-shadow:inset 0 1px 3px rgba(var(--shC),.1)} .prog-b i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--ac),var(--acS));transition:width .5s cubic-bezier(.2,.7,.3,1)} /* aviso */ .aviso{border-radius:4px;padding:18px 22px;border:1px solid var(--ln);display:flex;gap:14px; align-items:flex-start;box-shadow:var(--sh1)} .aviso svg{width:17px;height:17px;fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px} .aviso b{display:block;font-size:13.5px;margin-bottom:4px} .aviso p{font-size:13px;color:var(--t3);line-height:1.7} .aviso.info{background:color-mix(in srgb, var(--ac) 7%, transparent)} .aviso.info svg,.aviso.info b{stroke:var(--ac);color:var(--ac)} @media(max-width:900px){ .dos{grid-template-columns:1fr} .lado{position:static} } /* ══════════════════════════════════════════════════ COMPATIBILIDAD — variables del sistema viejo usadas todavía por wikimed y medtest. TEMPORAL: limpiar cuando esas dos se reescriban. ══════════════════════════════════════════════════ */ :root, [data-tema="oscuro"]{ --s1:var(--sup2); --band:var(--t1); --bTxt:var(--t1); --bTxt2:var(--t2); --bTxt3:var(--t3); --bLn:var(--ln); --bLn2:var(--ln); --bLn3:var(--ln2); --txt2:var(--t2); --txt3:var(--t3); --acM:var(--ac); --acBg:var(--lnAc); --ln3:var(--ln2); --d:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif; --s:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif; --m:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace; } /* mapa de WikiMed — único lugar con escala propia */ :root{ --mapa:#C6D6E1; --mapaH:#8FAEC4; --ok:#1F8A5F; --mal:#B04B4B; } [data-tema="oscuro"]{ --mapa:#3A5C7A; --mapaH:#5A8BB5; --ok:#9FE6C9; --mal:#FFB4B4; } :root, [data-tema="oscuro"]{ --verde:var(--ok); } /* ── formulario de registro (wikimed, medtest) ── */ .reg-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start; background:var(--sup3);border:1px solid var(--ln);border-radius:4px; padding:clamp(28px,4vw,62px);box-shadow:var(--sh2),var(--bri);transition:background .55s} .fila{display:grid;grid-template-columns:1fr 1fr;gap:14px} .reg-nota{margin-top:22px;font-family:var(--m);font-size:12px; line-height:1.9;letter-spacing:.05em;color:var(--t3); border-left:2px solid var(--ac);padding-left:13px} .campo .lab{display:block;font-family:var(--m);font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:9px} .chip2{font-family:var(--s);font-size:13.5px;color:var(--t2); background:var(--sup1);border:1px solid var(--ln2);border-radius:3px; padding:9px 15px;cursor:pointer;transition:.2s} .chip2:hover{border-color:var(--lnAc);color:var(--t1)} .chip2.on{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:var(--sh1)} @media(max-width:860px){.reg-in,.fila{grid-template-columns:1fr}} /* ── encabezado de pagina interior a dos columnas ── */ .phead-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:end} .buscar{position:relative;display:flex;align-items:center} .buscar svg{position:absolute;left:16px;width:18px;height:18px;fill:none; stroke:var(--t3);stroke-width:1.7;pointer-events:none} .buscar input{width:100%;height:54px;border-radius:3px;padding:0 16px 0 46px; font-family:var(--s);font-size:15px;color:var(--t1); background:var(--sup3);border:1px solid var(--ln2); box-shadow:var(--sh1),var(--bri);outline:none;transition:.25s} .buscar input::placeholder{color:var(--t4)} .buscar input:focus{border-color:var(--ac);box-shadow:var(--sh2),0 0 0 3px var(--lnAc)} .cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px} .cifras>div{border-top:1px solid var(--ln2);padding-top:12px} .cifras b{display:block;font-family:var(--d);font-weight:500; font-size:clamp(23px,2.4vw,32px);color:var(--t1);line-height:1} .cifras span{display:block;margin-top:6px;font-family:var(--m); font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--t3);line-height:1.55} @media(max-width:900px){.phead-in{grid-template-columns:1fr}.cifras{grid-template-columns:repeat(2,1fr)}} /* ── tarjetas de curso ── */ .cursos{display:grid;gap:14px} .curso{background:var(--sup3);border:1px solid var(--ln);border-radius:4px; padding:clamp(22px,2.6vw,34px);box-shadow:var(--sh1),var(--bri); cursor:pointer;transition:.28s cubic-bezier(.2,.7,.3,1)} .curso:hover{transform:translateY(-3px);border-color:var(--lnAc);box-shadow:var(--sh2),var(--bri)} .curso[hidden]{display:none} .c-top{display:flex;align-items:center;gap:14px;font-family:var(--m); font-size:10px;letter-spacing:.2em;text-transform:uppercase} .c-n{color:var(--ac)} .c-tag{color:var(--t4);padding-left:14px;border-left:1px solid var(--ln2)} .curso h3{margin-top:14px;font-family:var(--d);font-weight:700; font-size:clamp(24px,2.5vw,33px);color:var(--t1);line-height:1.1} .curso h3 em{font-style:italic;color:var(--ac)} .curso p{margin-top:11px;font-size:15px;color:var(--t2);max-width:64ch;line-height:1.7} .c-pie{display:flex;align-items:center;justify-content:space-between;gap:18px; margin-top:20px;padding-top:16px;border-top:1px solid var(--ln);flex-wrap:wrap} .c-meta{font-family:var(--m);font-size:11px;letter-spacing:.1em;color:var(--t3)} .c-go{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ac);font-weight:500} .c-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s} .curso:hover .c-go svg{transform:translateX(4px)} /* ── filtros ── */ .filtros{display:flex;flex-wrap:wrap;gap:8px} .fl{font-family:var(--m);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--t3);background:var(--sup1); border:1px solid var(--ln2);border-radius:3px;padding:10px 16px;cursor:pointer;transition:.2s} .fl:hover{color:var(--t1);border-color:var(--lnAc)} .fl.on{color:#fff;background:var(--ac);border-color:var(--ac);box-shadow:var(--sh1)} /* ── pie: columnas contenidas, no a los extremos ── */ .foot{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(28px,3.4vw,48px); margin-top:clamp(40px,6vw,90px);border-top:1px solid var(--ln)} .foot-in{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,80px);align-items:start} .foot .cols{justify-content:flex-start;gap:clamp(30px,5vw,72px)} .foot .col .t{font-family:var(--m);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--t4);margin-bottom:14px} .foot .legal{max-width:none;margin-top:clamp(30px,4vw,54px);padding-top:20px; border-top:1px solid var(--ln);font-family:var(--m); font-size:11px;letter-spacing:.08em;color:var(--t4);white-space:normal} @media(max-width:760px){.foot-in{grid-template-columns:1fr}} /* ── el boton no debe estirarse dentro de un grid ── */ .btn{display:inline-flex;align-items:center;justify-content:center;width:auto} .reg-in .btn{align-self:start} /* ══════════════════════════════════════════════ INTERIOR DEL BLOQUE DE REGISTRO la tarjeta es profunda: todo adentro se invierte ══════════════════════════════════════════════ */ .reg-card{position:relative;overflow:hidden} .reg-card::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 62% 48% at 22% 34%, rgba(160,215,250,.13), transparent 68%)} .reg-card > *{position:relative;z-index:1} .reg-card .eyebrow{color:rgba(184,233,252,.62)} .reg-card h2{color:#F2F8FC} .reg-card .lead{color:rgba(200,224,240,.74)} .reg-card .fine{color:rgba(184,233,252,.42)} /* cifras que llenan la columna izquierda */ .reg-datos{display:flex;gap:clamp(20px,3vw,44px);margin-top:clamp(30px,4vw,56px); padding-top:26px;border-top:1px solid rgba(184,233,252,.14)} .reg-datos b{display:block;font-family:var(--d);font-weight:500; font-size:clamp(26px,2.7vw,36px);color:rgba(240,250,255,.92);line-height:1} .reg-datos span{display:block;margin-top:8px;font-family:var(--m); font-size:9px;letter-spacing:.15em;text-transform:uppercase; color:rgba(184,233,252,.46);line-height:1.7} /* etiquetas e inputs sobre superficie profunda */ .reg-card label,.reg-card .lab{color:rgba(184,233,252,.56)} .reg-card input,.reg-card select{ background:rgba(255,255,255,.045);border:1px solid rgba(184,233,252,.15); color:#EAF4FA;box-shadow:inset 0 1px 0 rgba(190,228,250,.07)} .reg-card input::placeholder{color:rgba(184,233,252,.3)} .reg-card input:focus,.reg-card select:focus{ border-color:rgba(127,212,245,.5);background:rgba(255,255,255,.075); box-shadow:0 0 0 3px rgba(127,212,245,.13)} /* chips: translúcidos, no bloques blancos */ .reg-card .chip2{background:rgba(255,255,255,.05);border:1px solid rgba(184,233,252,.15); color:rgba(214,234,246,.8)} .reg-card .chip2:hover{background:rgba(255,255,255,.09);border-color:rgba(127,212,245,.36); color:#EAF4FA} .reg-card .chip2.on{background:rgba(184,233,252,.94);border-color:rgba(184,233,252,.94); color:#0A2436;box-shadow:0 2px 12px rgba(127,212,245,.26)} /* el CTA: blanco pesa más que azul sobre navy */ .reg-card .btn.fill{width:100%;background:#F4FAFD;color:#0A2436;border:0; box-shadow:0 2px 6px rgba(0,0,0,.22), 0 10px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.9)} .reg-card .btn.fill:hover{background:#fff;transform:translateY(-3px); box-shadow:0 4px 10px rgba(0,0,0,.26), 0 18px 42px rgba(0,0,0,.26), 0 0 62px rgba(184,233,252,.24), inset 0 1px 0 rgba(255,255,255,.95)} /* ── fichas de curso ── */ .fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px} .fi{background:var(--sup3);border:1px solid var(--ln);border-radius:4px;overflow:hidden; box-shadow:var(--sh1),var(--bri);cursor:pointer;display:flex;flex-direction:column; transition:.28s cubic-bezier(.2,.7,.3,1)} .fi:hover{transform:translateY(-4px);box-shadow:var(--sh3),var(--bri)} .fi[hidden]{display:none} .fi-top{display:flex;align-items:stretch;border-bottom:1px solid var(--ln)} .fi-marca{flex:0 0 auto;display:grid;place-items:center;padding:20px 16px;min-width:84px; background:var(--sup1);border-right:1px solid var(--ln);transition:background .28s} .fi:hover .fi-marca{background:var(--ac)} .fi-marca b{font-family:var(--d);font-weight:500;font-size:27px; letter-spacing:.02em;color:var(--t2);transition:color .28s} .fi:hover .fi-marca b{color:#fff} .fi-tit{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 22px} .fi-tag{font-family:var(--m);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--ac)} .fi-tit h3{margin-top:5px;font-family:var(--d);font-weight:700; font-size:clamp(23px,2.2vw,27px);line-height:1.05;color:var(--t1)} .fi-tit h3 em{font-style:italic;color:var(--ac)} .fi-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px} .fi-body p{font-size:14.5px;color:var(--t2);line-height:1.7} .fi-pie{margin-top:auto;padding-top:18px;display:flex;align-items:center; justify-content:space-between;gap:14px;flex-wrap:wrap} .fi-mod{font-family:var(--m);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--t3);border:1px solid var(--ln2);border-radius:2px;padding:5px 9px} .fi-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ac);font-weight:500} .fi-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s} .fi:hover .fi-go svg{transform:translateX(4px)} /* ── fichas de curso ── */ .fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px} .fi{background:var(--sup3);border:1px solid var(--ln);border-radius:4px;overflow:hidden; box-shadow:var(--sh1),var(--bri);cursor:pointer;display:flex;flex-direction:column; transition:.28s cubic-bezier(.2,.7,.3,1)} .fi:hover{transform:translateY(-4px);box-shadow:var(--sh3),var(--bri)} .fi[hidden]{display:none} .fi-top{display:flex;align-items:stretch;border-bottom:1px solid var(--ln)} .fi-marca{flex:0 0 auto;display:grid;place-items:center;padding:20px 16px;min-width:84px; background:var(--sup1);border-right:1px solid var(--ln);transition:background .28s} .fi:hover .fi-marca{background:var(--ac)} .fi-marca b{font-family:var(--d);font-weight:500;font-size:27px; letter-spacing:.02em;color:var(--t2);transition:color .28s} .fi:hover .fi-marca b{color:#fff} .fi-tit{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 22px} .fi-tag{font-family:var(--m);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--ac)} .fi-tit h3{margin-top:5px;font-family:var(--d);font-weight:700; font-size:clamp(23px,2.2vw,27px);line-height:1.05;color:var(--t1)} .fi-tit h3 em{font-style:italic;color:var(--ac)} .fi-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px} .fi-body p{font-size:14.5px;color:var(--t2);line-height:1.7} .fi-pie{margin-top:auto;padding-top:18px;display:flex;align-items:center; justify-content:space-between;gap:14px;flex-wrap:wrap} .fi-mod{font-family:var(--m);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--t3);border:1px solid var(--ln2);border-radius:2px;padding:5px 9px} .fi-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ac);font-weight:500} .fi-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s} .fi:hover .fi-go svg{transform:translateX(4px)} /* ── encabezado compacto de cursos ── */ .phead-tight{padding-bottom:clamp(22px,2.6vw,34px)} .phead-tight .phead-in{align-items:end} /* ── la ficha ancla: objeto profundo sobre superficie clara ── */ .fichas{grid-auto-flow:dense} .fi-ancla{grid-column:span 2;background:linear-gradient(152deg,var(--az4),var(--az5) 62%,#04182B); border-color:rgba(184,233,252,.16);box-shadow:var(--shX);position:relative;overflow:hidden} .fi-ancla::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 58% 62% at 16% 22%, rgba(160,215,250,.16), transparent 66%)} .fi-ancla > *{position:relative;z-index:1} .fi-ancla:hover{box-shadow:var(--shX),0 0 90px rgba(30,120,185,.24)} .fi-ancla .fi-top{border-bottom-color:rgba(184,233,252,.14)} .fi-ancla .fi-marca{background:rgba(255,255,255,.05);border-right-color:rgba(184,233,252,.14)} .fi-ancla .fi-marca b{color:rgba(200,232,250,.7)} .fi-ancla:hover .fi-marca{background:rgba(184,233,252,.92)} .fi-ancla:hover .fi-marca b{color:var(--az5)} .fi-ancla .fi-tag{color:rgba(127,212,245,.82)} .fi-ancla .fi-tit h3{color:#F2F8FC;font-size:clamp(28px,3vw,40px)} .fi-ancla .fi-tit h3 em{color:var(--hie)} .fi-ancla .fi-body p{color:rgba(200,224,240,.78);font-size:16px;max-width:52ch} .fi-ancla .fi-mod{color:rgba(184,233,252,.6);border-color:rgba(184,233,252,.2)} .fi-ancla .fi-go{color:var(--hie)} @media(max-width:760px){.fi-ancla{grid-column:span 1}} /* ── proporción del encabezado de cursos ── */ .phead-tight{padding-top:clamp(26px,3vw,44px);padding-bottom:clamp(20px,2.4vw,30px)} .phead-tight h1{font-size:clamp(28px,3.4vw,44px)!important;line-height:1.06} .phead-tight .phead-in{grid-template-columns:1fr auto;align-items:end;gap:clamp(24px,4vw,70px)} .phead-tight .lead{font-size:15.5px;line-height:1.7;font-weight:350;color:var(--t1)} .phead-tight .filtros{justify-content:flex-end} /* el ancla manda: más alta y más ancha que las demás */ .fi-ancla{min-height:clamp(280px,26vw,360px)} .fi-ancla .fi-marca{min-width:104px} .fi-ancla .fi-body{padding:26px 28px 28px} .fi-ancla .fi-tit{padding:22px 28px} /* ── el titulo pesa lo que debe y las tarjetas suben ── */ .phead-tight{padding-top:clamp(44px,4.4vw,72px);padding-bottom:clamp(16px,1.8vw,24px);border-bottom:0} .phead-tight h1{font-size:clamp(34px,4.6vw,60px)!important;line-height:1.02;letter-spacing:-.015em} .phead-tight .phead-in{align-items:end;gap:clamp(24px,4vw,64px)} .phead-tight .lead{margin-bottom:2px} .phead-tight + .sec{padding-top:clamp(18px,2vw,28px)} /* ── dos anclas de ancho completo ── */ .fichas{grid-template-columns:repeat(3,1fr)} .fi-ancla{grid-column:1 / -1;min-height:auto} .fi-ancla .fi-body{padding:24px 28px 26px} .fi-ancla .fi-body p{max-width:62ch;font-size:16.5px} .fi-ancla .fi-tit h3{font-size:clamp(30px,3.4vw,44px)} .fi-ancla .fi-marca{min-width:120px} .fi-ancla .fi-marca b{font-size:32px} /* ── las cuatro chicas: color por etapa en el bloque de siglas ── */ .fi[data-c="admision"] .fi-marca{background:rgba(30,107,160,.09)} .fi[data-c="admision"] .fi-marca b{color:var(--az2)} .fi[data-c="basicos"] .fi-marca{background:rgba(15,75,122,.1)} .fi[data-c="basicos"] .fi-marca b{color:var(--az3)} .fi[data-c="internado"] .fi-marca{background:rgba(10,52,87,.11)} .fi[data-c="internado"] .fi-marca b{color:var(--az4)} .fi:hover .fi-marca{background:var(--ac)} .fi:hover .fi-marca b{color:#fff} /* el ancla conserva su tratamiento profundo */ .fi-ancla .fi-marca{background:rgba(255,255,255,.05)} .fi-ancla .fi-marca b{color:rgba(200,232,250,.7)} .fi-ancla:hover .fi-marca{background:rgba(184,233,252,.92)} .fi-ancla:hover .fi-marca b{color:var(--az5)} @media(max-width:980px){.fichas{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.fichas{grid-template-columns:1fr}} /* ── 2 columnas: anclas completas, chicas 2 y 2 ── */ .fichas{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){.fichas{grid-template-columns:1fr}} /* ══════════════════════════════════════════════ PROFUNDIDAD DE LAS FICHAS ══════════════════════════════════════════════ */ .fi{box-shadow:var(--sh2),var(--bri); transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s cubic-bezier(.2,.7,.3,1), border-color .3s} .fi:hover{transform:translateY(-6px);box-shadow:var(--sh3),var(--bri);border-color:var(--lnAc)} /* el bloque de siglas se hunde: da grosor a la tarjeta */ .fi-marca{box-shadow:inset -1px 0 0 rgba(var(--shC),.05), inset 0 2px 6px rgba(var(--shC),.055)} /* separación real entre cabecera y cuerpo, no solo una línea */ .fi-top{box-shadow:0 1px 0 rgba(255,255,255,.9)} .fi-body{background:linear-gradient(180deg,var(--sup3),var(--sup2))} /* las anclas: el objeto más profundo de la página */ .fi-ancla{box-shadow:var(--shX)} .fi-ancla:hover{transform:translateY(-7px); box-shadow:var(--shX), 0 0 110px rgba(30,120,185,.3)} .fi-ancla .fi-body{background:none} .fi-ancla .fi-top{box-shadow:0 1px 0 rgba(184,233,252,.07)} .fi-ancla .fi-marca{box-shadow:inset -1px 0 0 rgba(184,233,252,.1), inset 0 2px 10px rgba(0,0,0,.3)} /* borde iluminado arriba: el canto que atrapa la luz */ .fi::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 22%, rgba(255,255,255,.95) 78%,transparent);pointer-events:none;z-index:2} .fi{position:relative} .fi-ancla::after{background:linear-gradient(90deg,transparent,rgba(184,233,252,.24) 22%, rgba(184,233,252,.24) 78%,transparent)} /* en oscuro las sombras son negro puro */ [data-tema="oscuro"] .fi-body{background:linear-gradient(180deg,var(--sup3),var(--sup2))} [data-tema="oscuro"] .fi-top{box-shadow:0 1px 0 rgba(190,228,250,.05)} [data-tema="oscuro"] .fi::after{background:linear-gradient(90deg,transparent, rgba(190,228,250,.12) 22%,rgba(190,228,250,.12) 78%,transparent)} /* ══════════════════════════════════════════════ PROFUNDIDAD GLOBAL sombras más agresivas + superficie hundida ══════════════════════════════════════════════ */ :root{ --sup0:#DFE6EC; --sh1:0 1px 2px rgba(var(--shC),.09), 0 3px 7px rgba(var(--shC),.085), 0 7px 16px rgba(var(--shC),.075); --sh2:0 2px 3px rgba(var(--shC),.1), 0 5px 11px rgba(var(--shC),.095), 0 13px 26px rgba(var(--shC),.09), 0 26px 52px rgba(var(--shC),.075), 0 48px 92px rgba(var(--shC),.06); --sh3:0 3px 5px rgba(var(--shC),.13), 0 8px 17px rgba(var(--shC),.12), 0 18px 38px rgba(var(--shC),.115), 0 36px 74px rgba(var(--shC),.1), 0 70px 132px rgba(var(--shC),.085), 0 120px 215px rgba(var(--shC),.07); --shX:0 4px 9px rgba(6,34,58,.26), 0 11px 25px rgba(6,34,58,.24), 0 25px 54px rgba(6,34,58,.22), 0 50px 102px rgba(6,34,58,.19), 0 96px 180px rgba(6,34,58,.16), 0 160px 290px rgba(6,34,58,.12); } [data-tema="oscuro"]{ --sh1:0 1px 2px rgba(0,0,0,.62), 0 3px 7px rgba(0,0,0,.54), 0 7px 16px rgba(0,0,0,.44); --sh2:0 2px 3px rgba(0,0,0,.68), 0 5px 11px rgba(0,0,0,.62), 0 13px 26px rgba(0,0,0,.54), 0 26px 52px rgba(0,0,0,.44), 0 48px 92px rgba(0,0,0,.34); --sh3:0 3px 5px rgba(0,0,0,.74), 0 8px 17px rgba(0,0,0,.68), 0 18px 38px rgba(0,0,0,.6), 0 36px 74px rgba(0,0,0,.52), 0 70px 132px rgba(0,0,0,.42), 0 120px 215px rgba(0,0,0,.32); --shX:0 4px 9px rgba(0,0,0,.8), 0 11px 25px rgba(0,0,0,.74), 0 25px 54px rgba(0,0,0,.66), 0 50px 102px rgba(0,0,0,.56), 0 96px 180px rgba(0,0,0,.46), 0 160px 290px rgba(0,0,0,.34); } /* viñeta: hunde las orillas y el centro se siente iluminado */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(ellipse 92% 76% at 50% 42%, transparent 34%, rgba(10,36,54,.05) 68%, rgba(10,36,54,.13) 100%)} [data-tema="oscuro"] body::before{ background:radial-gradient(ellipse 92% 76% at 50% 42%, transparent 30%, rgba(0,0,0,.36) 66%, rgba(0,0,0,.66) 100%)} /* toda superficie elevada se levanta un escalón */ .curso,.lado,.side,.demo,.test,.reg-card,.idx,.mapbox,.op{box-shadow:var(--sh2),var(--bri)} .curso:hover,.test:hover{transform:translateY(-5px);box-shadow:var(--sh3),var(--bri)} .reg-card{box-shadow:var(--shX)} .mapbox,.side{box-shadow:var(--sh2),var(--bri)} /* el nav flota sobre el contenido, no está pegado */ .nav{box-shadow:0 1px 2px rgba(var(--shC),.06), 0 6px 18px rgba(var(--shC),.07), 0 16px 44px rgba(var(--shC),.05)} [data-tema="oscuro"] .nav{box-shadow:0 1px 2px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.38)} /* más grano: sin textura los degradados grandes se ven planos */ :root{--grano:.058} [data-tema="oscuro"]{--grano:.075} /* ── un solo ancho para todo el sitio ── */ .wrap{max-width:1560px;margin-left:auto;margin-right:auto;padding:0 clamp(20px,3.4vw,64px)} /* ══════════════════════════════════════════════ PROFUNDIDAD DEL MAPA Y EL PANEL ══════════════════════════════════════════════ */ /* la caja del mapa se hunde: es una bandeja, no una tarjeta */ .mapbox{background:linear-gradient(168deg,var(--sup1),var(--sup-b)); box-shadow:inset 0 2px 14px rgba(var(--shC),.09), inset 0 -1px 0 rgba(255,255,255,.7), var(--sh2)} [data-tema="oscuro"] .mapbox{background:linear-gradient(168deg,var(--n2),var(--n0)); box-shadow:inset 0 2px 20px rgba(0,0,0,.7), var(--sh2)} /* el país entero proyecta sombra sobre la bandeja */ .mapbox svg{filter:drop-shadow(0 2px 3px rgba(10,36,54,.16)) drop-shadow(0 9px 20px rgba(10,36,54,.14)) drop-shadow(0 24px 52px rgba(10,36,54,.1))} [data-tema="oscuro"] .mapbox svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 10px 24px rgba(0,0,0,.6)) drop-shadow(0 28px 60px rgba(0,0,0,.45))} /* cada estado como pieza: relleno con luz arriba */ .estado{stroke-width:1;stroke:rgba(255,255,255,.65)} [data-tema="oscuro"] .estado{stroke:rgba(190,228,250,.09)} .estado:hover{filter:brightness(1.1) drop-shadow(0 3px 8px rgba(10,36,54,.3))} .estado.active{filter:drop-shadow(0 3px 7px rgba(30,107,160,.5)) drop-shadow(0 10px 26px rgba(30,107,160,.36))} /* el panel lateral se levanta sobre el mapa */ .side{box-shadow:var(--sh3),var(--bri);position:relative;z-index:2} .shead{background:linear-gradient(180deg,var(--sup3),var(--sup2)); box-shadow:0 1px 0 rgba(255,255,255,.9)} /* filas de universidad: separadores con relieve */ .esc-i,.ulist > *{box-shadow:0 1px 0 rgba(255,255,255,.85)} .ulist > *:hover{background:var(--sup1); box-shadow:inset 0 1px 3px rgba(var(--shC),.05), 0 1px 0 rgba(255,255,255,.9)} /* el buscador se hunde, no flota: es un campo */ .buscar input{box-shadow:inset 0 2px 6px rgba(var(--shC),.075), inset 0 -1px 0 rgba(255,255,255,.8), var(--sh1)} .buscar input:focus{box-shadow:inset 0 2px 8px rgba(var(--shC),.09), 0 0 0 3px var(--lnAc), var(--sh2)} /* las cifras con barra de relieve */ .cifras>div{border-top-width:2px; box-shadow:0 -1px 0 rgba(255,255,255,.9)} /* ══════════════════════════════════════════════ AIRE Y SEPARACIÓN — WIKIMED ══════════════════════════════════════════════ */ /* el encabezado suelta el contenido */ .phead{padding-bottom:clamp(30px,4vw,54px)} .phead + .sec,.phead + .data,.phead + section{padding-top:clamp(30px,4vw,58px)} /* mapa y panel dejan de ser una sola pieza */ .wm{gap:clamp(20px,2.6vw,38px);align-items:start} .mapbox{padding:clamp(26px,3.4vw,52px);border-radius:5px} .side{border-radius:5px;overflow:hidden;border:1px solid var(--ln)} /* el mapa respira dentro de su bandeja */ .mapbox svg{max-height:none} .maphint{left:clamp(26px,3.4vw,52px);bottom:clamp(26px,3.4vw,52px)} /* el panel por dentro: aire entre filas */ .shead{padding:clamp(24px,2.8vw,34px) clamp(22px,2.4vw,30px) clamp(18px,2vw,24px)} .chips{padding:clamp(16px,1.9vw,22px) clamp(22px,2.4vw,30px)} .ulist{padding:6px 0} .ulist > *{padding:clamp(15px,1.8vw,21px) clamp(22px,2.4vw,30px)} .sfoot{padding:clamp(18px,2.2vw,26px) clamp(22px,2.4vw,30px)} /* separación entre secciones en todo el sitio */ .sec{padding-block:clamp(38px,5vw,78px)} .sec + .sec{padding-top:0} /* ── y más profundidad donde ahora sí se lee ── */ .mapbox{box-shadow:inset 0 3px 20px rgba(var(--shC),.12), inset 0 -1px 0 rgba(255,255,255,.75), var(--sh3)} .side{box-shadow:var(--shX)} [data-tema="oscuro"] .mapbox{box-shadow:inset 0 3px 26px rgba(0,0,0,.78), var(--sh3)} .mapbox svg{filter:drop-shadow(0 3px 5px rgba(10,36,54,.2)) drop-shadow(0 12px 26px rgba(10,36,54,.17)) drop-shadow(0 32px 68px rgba(10,36,54,.13))} /* ══════════════════════════════════════════════ EL MAPA COMO OBJETO FÍSICO ══════════════════════════════════════════════ */ /* la bandeja se hunde de verdad */ .mapbox{background:radial-gradient(ellipse 78% 68% at 50% 38%, var(--sup3) 0%, var(--sup1) 46%, var(--sup-b) 100%); box-shadow:inset 0 4px 28px rgba(var(--shC),.16), inset 0 -2px 0 rgba(255,255,255,.8), inset 2px 0 6px rgba(var(--shC),.06), inset -2px 0 6px rgba(var(--shC),.06), var(--sh3)} [data-tema="oscuro"] .mapbox{ background:radial-gradient(ellipse 78% 68% at 50% 38%, var(--n3) 0%, var(--n1) 48%, var(--n0) 100%); box-shadow:inset 0 4px 34px rgba(0,0,0,.85), inset 0 -1px 0 rgba(190,228,250,.05), var(--sh3)} /* el país se levanta de la bandeja */ .mapbox svg{filter: drop-shadow(0 1px 1px rgba(10,36,54,.28)) drop-shadow(0 4px 6px rgba(10,36,54,.22)) drop-shadow(0 12px 22px rgba(10,36,54,.2)) drop-shadow(0 28px 52px rgba(10,36,54,.16)) drop-shadow(0 58px 104px rgba(10,36,54,.12)); transition:filter .5s} [data-tema="oscuro"] .mapbox svg{filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 5px 9px rgba(0,0,0,.75)) drop-shadow(0 15px 30px rgba(0,0,0,.65)) drop-shadow(0 36px 70px rgba(0,0,0,.5)) drop-shadow(0 72px 130px rgba(0,0,0,.35))} /* cada estado biselado: luz arriba, corte limpio */ .estado{stroke:rgba(255,255,255,.85);stroke-width:1.1;stroke-linejoin:round; transition:fill .2s, filter .2s} [data-tema="oscuro"] .estado{stroke:rgba(190,228,250,.11)} /* volumen: el norte recibe luz, el sur se hunde */ .mapbox::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(168deg, rgba(255,255,255,.5) 0%, transparent 34%, transparent 62%, rgba(10,36,54,.07) 100%);mix-blend-mode:normal} [data-tema="oscuro"] .mapbox::after{ background:linear-gradient(168deg, rgba(190,228,250,.045) 0%, transparent 36%, transparent 60%, rgba(0,0,0,.4) 100%)} /* el estado activo sale del plano */ .estado.active{filter: drop-shadow(0 2px 4px rgba(30,107,160,.55)) drop-shadow(0 8px 18px rgba(30,107,160,.42)) drop-shadow(0 20px 44px rgba(30,107,160,.3))} .estado:hover{filter:brightness(1.12) drop-shadow(0 2px 5px rgba(10,36,54,.42)) drop-shadow(0 8px 20px rgba(10,36,54,.3))} /* ══════════════════════════════════════════════ MAPA — misma profundidad, sin costo de GPU ══════════════════════════════════════════════ */ /* 5 drop-shadow → 2. El ojo no distingue las capas intermedias */ .mapbox svg{filter: drop-shadow(0 3px 6px rgba(10,36,54,.26)) drop-shadow(0 22px 44px rgba(10,36,54,.2)); transition:none; will-change:auto} [data-tema="oscuro"] .mapbox svg{filter: drop-shadow(0 3px 7px rgba(0,0,0,.8)) drop-shadow(0 26px 56px rgba(0,0,0,.6))} /* el hover ya no usa filter: solo cambia el relleno, que es barato */ .estado{transition:fill .16s} .estado:hover{filter:none;fill:var(--mapaH)} .estado.active{filter:none;fill:var(--acS)} /* el brillo del activo se hace con stroke, no con sombra */ .estado.active{stroke:var(--hie);stroke-width:2;paint-order:stroke} [data-tema="oscuro"] .estado.active{stroke:var(--hie)} /* ══════════════════════════════════════════════ TEMA OSCURO: el acento sube a hielo ══════════════════════════════════════════════ */ [data-tema="oscuro"]{ --ac:#7FD4F5; --acS:#B8E9FC; --lnAc:rgba(127,212,245,.34); } /* el logotipo: el navy no existe sobre negro */ [data-tema="oscuro"] .mark{color:#E9F1F7} [data-tema="oscuro"] .mark i{color:inherit} /* nav */ [data-tema="oscuro"] .links a{color:var(--t2)} [data-tema="oscuro"] .links a:hover{color:var(--t1)} [data-tema="oscuro"] .links a.on{color:var(--hie);border-bottom-color:var(--hie)} /* botones sólidos: fondo hielo, texto oscuro. Lo contrario del claro */ [data-tema="oscuro"] .nav-cta, [data-tema="oscuro"] .btn.fill{ background:linear-gradient(180deg,var(--hie2),var(--hie)); color:#052033;border:0; box-shadow:0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.4), 0 0 46px rgba(127,212,245,.24), inset 0 1px 0 rgba(255,255,255,.5)} [data-tema="oscuro"] .nav-cta:hover, [data-tema="oscuro"] .btn.fill:hover{ background:linear-gradient(180deg,#D6F3FE,var(--hie2)); box-shadow:0 4px 10px rgba(0,0,0,.55), 0 18px 42px rgba(0,0,0,.45), 0 0 78px rgba(127,212,245,.4), inset 0 1px 0 rgba(255,255,255,.65)} /* eyebrows, enlaces y flechas */ [data-tema="oscuro"] .eyebrow{color:rgba(127,212,245,.72)} [data-tema="oscuro"] .c-n, [data-tema="oscuro"] .fi-tag, [data-tema="oscuro"] .fi-go, [data-tema="oscuro"] .c-go, [data-tema="oscuro"] .migas a, [data-tema="oscuro"] .foot .col a:hover{color:var(--hie)} /* itálicas de acento en los títulos */ [data-tema="oscuro"] .fi-tit h3 em, [data-tema="oscuro"] .curso h3 em, [data-tema="oscuro"] h1 em, [data-tema="oscuro"] h2 em{color:var(--hie)} /* chips y filtros activos */ [data-tema="oscuro"] .fl.on, [data-tema="oscuro"] .chip.on, [data-tema="oscuro"] .chip2.on{background:var(--hie);border-color:var(--hie);color:#052033} /* el bloque de siglas al hover */ [data-tema="oscuro"] .fi:hover .fi-marca{background:var(--hie)} [data-tema="oscuro"] .fi:hover .fi-marca b{color:#052033} /* mapa: estado activo y buscador */ [data-tema="oscuro"] .estado.active{fill:var(--hie);stroke:var(--hie2)} [data-tema="oscuro"] .buscar input:focus{border-color:var(--hie)} /* ══════════════════════════════════════════════ OSCURO: las anclas se hunden, no se aclaran ══════════════════════════════════════════════ */ [data-tema="oscuro"] .fi-ancla{ background:linear-gradient(158deg,#0B1620,#050A10 58%,#02060B); border-color:rgba(127,212,245,.2)} [data-tema="oscuro"] .fi-ancla::before{ background:radial-gradient(ellipse 56% 60% at 15% 20%, rgba(127,212,245,.1), transparent 64%)} [data-tema="oscuro"] .fi-ancla:hover{border-color:rgba(127,212,245,.38); box-shadow:var(--shX), 0 0 120px rgba(127,212,245,.16)} /* el bloque de siglas de las anclas */ [data-tema="oscuro"] .fi-ancla .fi-marca{background:rgba(127,212,245,.07); border-right-color:rgba(127,212,245,.16)} [data-tema="oscuro"] .fi-ancla .fi-marca b{color:var(--hie)} [data-tema="oscuro"] .fi-ancla .fi-top{border-bottom-color:rgba(127,212,245,.16)} /* las chicas: siglas visibles */ [data-tema="oscuro"] .fi[data-c="admision"] .fi-marca, [data-tema="oscuro"] .fi[data-c="basicos"] .fi-marca, [data-tema="oscuro"] .fi[data-c="internado"] .fi-marca{ background:rgba(127,212,245,.06);border-right-color:var(--ln2)} [data-tema="oscuro"] .fi[data-c="admision"] .fi-marca b, [data-tema="oscuro"] .fi[data-c="basicos"] .fi-marca b, [data-tema="oscuro"] .fi[data-c="internado"] .fi-marca b{color:rgba(127,212,245,.62)} /* texto de las anclas al nivel del resto */ [data-tema="oscuro"] .fi-ancla .fi-tit h3{color:#EEF6FB} [data-tema="oscuro"] .fi-ancla .fi-body p{color:var(--t2)} [data-tema="oscuro"] .fi-ancla .fi-mod{color:var(--t3);border-color:var(--ln2)} [data-tema="oscuro"] .fi-ancla .fi-tag{color:var(--hie)} /* etiqueta de modalidad legible en las chicas */ [data-tema="oscuro"] .fi-mod{color:var(--t3);border-color:var(--ln2)} /* ── página de registro ── */ .nav-min .nav-in{justify-content:space-between} .reg-pasos{display:flex;gap:clamp(18px,2.6vw,38px);margin-top:clamp(30px,4vw,52px); padding-top:26px;border-top:1px solid rgba(184,233,252,.14)} .reg-pasos b{display:block;font-family:var(--m);font-size:11px; letter-spacing:.16em;color:rgba(127,212,245,.75)} .reg-pasos span{display:block;margin-top:9px;font-size:13px;line-height:1.6; color:rgba(200,224,240,.68)} .ok-in{max-width:62ch} .ok-marca{width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:rgba(34,168,130,.16);border:1px solid rgba(34,168,130,.4);margin-bottom:26px} .ok-marca svg{width:24px;height:24px;fill:none;stroke:#4FD1A5;stroke-width:2} .ok-cita{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3.4vw,42px); padding:22px 0;border-top:1px solid rgba(184,233,252,.14);border-bottom:1px solid rgba(184,233,252,.14)} .ok-cita span{display:block;font-family:var(--m);font-size:9.5px; letter-spacing:.18em;text-transform:uppercase;color:rgba(184,233,252,.5)} .ok-cita b{display:block;margin-top:7px;font-family:var(--d); font-weight:500;font-size:21px;color:#EDF5FA} .ok-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,38px)} .reg-card .btn.ghost{color:rgba(214,234,246,.85);border:1px solid rgba(184,233,252,.24); background:rgba(255,255,255,.04)} .reg-card .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(127,212,245,.4);color:#fff} /* ── bloque de cierre: lleva al registro ── */ .cierre{padding-block:clamp(46px,6vw,96px)} .cierre-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,70px); align-items:center;background:var(--sup3);border:1px solid var(--ln);border-radius:4px; padding:clamp(30px,4vw,64px);box-shadow:var(--sh3),var(--bri)} .cierre-cta{display:flex;flex-direction:column;gap:11px;align-items:stretch} .cierre-cta .btn{width:100%;justify-content:center} @media(max-width:820px){.cierre-in{grid-template-columns:1fr}} /* ── nav: entrar (alumno) + registrarme (prospecto) ── */ .nav-entrar{font-size:14px;color:var(--t2);font-weight:500; padding:10px 14px;border-radius:3px;transition:.2s;white-space:nowrap} .nav-entrar:hover{color:var(--t1);background:var(--sup1)} .nav-in{gap:clamp(10px,1.2vw,18px)} @media(max-width:900px){.nav-entrar{display:none}} /* ══════════════════════════════════════════════ TARJETAS DE HERRAMIENTA — separadas y profundas ══════════════════════════════════════════════ */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px); margin-top:clamp(28px,3.4vw,48px)} .tile{position:relative;display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(180deg,var(--sup3),var(--sup2)); border:1px solid var(--ln);border-radius:5px; padding:clamp(26px,3vw,42px);text-decoration:none; box-shadow:var(--sh2),var(--bri); transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s cubic-bezier(.2,.7,.3,1),border-color .3s} .tile::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 22%,rgba(255,255,255,.95) 78%,transparent)} [data-tema="oscuro"] .tile::after{background:linear-gradient(90deg,transparent,rgba(190,228,250,.14) 22%,rgba(190,228,250,.14) 78%,transparent)} .tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(ellipse 70% 60% at 24% 12%,rgba(30,107,160,.07),transparent 68%)} .tile:hover{transform:translateY(-7px);border-color:var(--lnAc);box-shadow:var(--sh3),var(--bri)} .tile:hover::before{opacity:1} .tile .eyebrow{color:var(--ac)} .tile h3{margin-top:14px;font-size:clamp(28px,3vw,40px);color:var(--t1)} .tile p{margin-top:14px;font-size:15px;line-height:1.75;color:var(--t2)} .tile .go{margin-top:auto;padding-top:clamp(22px,2.6vw,34px);display:inline-flex;align-items:center; gap:9px;font-size:14.5px;font-weight:500;color:var(--ac)} .tile .go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s} .tile:hover .go svg{transform:translateX(5px)} @media(max-width:900px){.tiles{grid-template-columns:1fr}} /* ══════════════════════════════════════════════ LAS CIFRAS — grabadas, no impresas ══════════════════════════════════════════════ */ .data{padding:clamp(38px,5vw,72px) 0;position:relative; background:linear-gradient(180deg,transparent,var(--hueco,rgba(10,36,54,.03)),transparent)} .data-in{max-width:1560px;margin:0 auto;padding:0 clamp(20px,3.4vw,64px); display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,46px)} .stat{position:relative;padding-left:clamp(18px,2vw,28px)} .stat::before{content:"";position:absolute;left:0;top:4px;bottom:8px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--ac),transparent); box-shadow:0 0 12px var(--lnAc)} .stat .k{font-family:var(--d);font-weight:500; font-size:clamp(44px,5.4vw,76px);line-height:.92;color:var(--t1);letter-spacing:-.02em; text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 3px rgba(var(--shC),.14), 0 6px 16px rgba(var(--shC),.1)} [data-tema="oscuro"] .stat .k{color:#F2F9FD; text-shadow:0 1px 0 rgba(0,0,0,.9), 0 3px 10px rgba(0,0,0,.7), 0 0 44px rgba(127,212,245,.18)} .stat .k sup{font-size:.38em;vertical-align:super;color:var(--ac); text-shadow:none;margin-left:2px} .stat .l{margin-top:14px;font-family:var(--m);font-size:11px; letter-spacing:.11em;line-height:1.85;color:var(--t3)} @media(max-width:820px){.data-in{grid-template-columns:repeat(2,1fr);gap:30px}} /* ══════════════════════════════════════════════ DOCENTES ══════════════════════════════════════════════ */ .docentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,26px);margin-top:clamp(28px,3.4vw,48px);max-width:940px} .doc{position:relative;overflow:hidden;border-radius:5px; background:linear-gradient(180deg,var(--sup3),var(--sup2)); border:1px solid var(--ln);box-shadow:var(--sh2),var(--bri); transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s cubic-bezier(.2,.7,.3,1),border-color .3s} .doc::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:3; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 22%,rgba(255,255,255,.95) 78%,transparent)} [data-tema="oscuro"] .doc::after{background:linear-gradient(90deg,transparent,rgba(190,228,250,.16) 22%,rgba(190,228,250,.16) 78%,transparent)} .doc:hover{transform:translateY(-7px);border-color:var(--lnAc);box-shadow:var(--sh3),var(--bri)} .doc-foto{position:relative;aspect-ratio:4/4.4;overflow:hidden; background:linear-gradient(158deg,var(--az4),var(--az5) 60%,#031423)} .doc-foto img{width:100%;height:100%;object-fit:cover;object-position:center 12%; filter:grayscale(.15) contrast(1.06);transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s} .doc:hover .doc-foto img{transform:scale(1.045);filter:grayscale(0) contrast(1.1)} .doc-foto::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(178deg,transparent 44%,rgba(3,12,22,.34) 78%,rgba(3,12,22,.72) 100%)} .doc-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 58% 52% at 26% 18%,rgba(127,212,245,.2),transparent 66%)} .doc-silueta{position:absolute;inset:0;display:grid;place-items:center;z-index:1} .doc-silueta svg{width:52%;height:auto;fill:rgba(127,212,245,.14); filter:drop-shadow(0 0 28px rgba(127,212,245,.28))} .doc-info{position:relative;z-index:3;padding:clamp(22px,2.4vw,30px)} .doc-info h3{font-family:var(--d);font-weight:700; font-size:clamp(21px,2.1vw,27px);color:var(--t1);line-height:1.1} .doc-rol{margin-top:11px;font-size:14px;color:var(--t2)} .doc-mat{margin-top:6px;font-size:14px;color:var(--t2)} .doc-mat b{font-weight:500;color:var(--ac)} .doc-ig{display:inline-block;margin-top:15px;font-family:var(--m); font-size:12px;letter-spacing:.06em;color:var(--t3);text-decoration:none; padding-top:13px;border-top:1px solid var(--ln);width:100%;transition:color .25s} .doc-ig:hover{color:var(--ac)} /* la tarjeta pendiente se lee como reservada, no como error */ .doc-pend .doc-info h3{color:var(--t2)} /* ── retratos: la foto se funde con la tarjeta ── */ .doc-foto{background:linear-gradient(168deg,#0F2B45,#071627 58%,#03101C)} .doc-foto img{filter:grayscale(.08) contrast(1.12) brightness(.94) saturate(.9); mix-blend-mode:luminosity;opacity:.92} [data-tema="oscuro"] .doc-foto img{opacity:.88} .doc:hover .doc-foto img{filter:grayscale(0) contrast(1.14) brightness(1) saturate(1);opacity:1} /* viñeta fuerte: hunde las orillas, deja el rostro */ .doc-foto::before{background: radial-gradient(ellipse 62% 54% at 42% 34%, transparent 24%, rgba(4,14,26,.5) 68%, rgba(4,14,26,.92) 100%), linear-gradient(178deg, rgba(4,14,26,.55) 0%, transparent 26%, transparent 58%, rgba(4,14,26,.88) 100%)} /* tinte azul que amarra con la marca */ .doc-foto::after{background: radial-gradient(ellipse 56% 50% at 30% 22%, rgba(127,212,245,.22), transparent 64%), linear-gradient(160deg, rgba(30,107,160,.28), transparent 52%)} /* filo de luz al pie del retrato */ .doc-foto{position:relative} .doc-info{position:relative} .doc-info::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px; background:linear-gradient(90deg,transparent,var(--ac),transparent);opacity:.5} /* la tarjeta completa gana resplandor al hover */ .doc:hover{box-shadow:var(--sh3),var(--bri),0 0 90px rgba(30,120,185,.22)} /* la silueta pendiente, más presente */ .doc-silueta svg{fill:rgba(127,212,245,.16); filter:drop-shadow(0 0 40px rgba(127,212,245,.35))} .doc-pend .doc-foto::after{background: radial-gradient(ellipse 60% 54% at 50% 38%, rgba(127,212,245,.26), transparent 66%)} .doc-tent{font-family:var(--m);font-size:11px;letter-spacing:.08em; color:var(--amb,#C08A2E);font-weight:400;white-space:nowrap} /* ── tres docentes en una sola fila ── */ .docentes{grid-template-columns:repeat(3,1fr);max-width:1180px} @media(max-width:980px){.docentes{grid-template-columns:repeat(2,1fr);max-width:760px}} @media(max-width:640px){.docentes{grid-template-columns:1fr;max-width:420px}} /* las fotos estaban muy apagadas: si no se ve la cara, no sirve la sección */ .doc-foto img{filter:grayscale(.06) contrast(1.06) brightness(1.12) saturate(.94); mix-blend-mode:normal;opacity:1} [data-tema="oscuro"] .doc-foto img{brightness:1.05;opacity:.96} .doc:hover .doc-foto img{filter:grayscale(0) contrast(1.08) brightness(1.18) saturate(1.02)} .doc-foto::before{background: radial-gradient(ellipse 70% 62% at 44% 32%, transparent 40%, rgba(4,14,26,.3) 76%, rgba(4,14,26,.7) 100%), linear-gradient(178deg, rgba(4,14,26,.3) 0%, transparent 22%, transparent 66%, rgba(4,14,26,.72) 100%)} .doc-foto::after{background: radial-gradient(ellipse 56% 50% at 30% 22%, rgba(127,212,245,.14), transparent 64%), linear-gradient(160deg, rgba(30,107,160,.16), transparent 54%)} /* ── centrar la rejilla ── */ .docentes{margin-left:auto;margin-right:auto} /* ── el azul de vuelta, sin matar la cara ── */ .doc-foto img{filter:contrast(1.05) brightness(1.06) saturate(.62) hue-rotate(-6deg)} .doc:hover .doc-foto img{filter:contrast(1.07) brightness(1.12) saturate(.9)} .doc-foto::after{background: radial-gradient(ellipse 58% 52% at 30% 22%, rgba(127,212,245,.3), transparent 62%), linear-gradient(158deg, rgba(30,107,160,.34), rgba(10,52,87,.2) 48%, transparent 78%); mix-blend-mode:soft-light} .doc-foto::before{background: radial-gradient(ellipse 72% 64% at 44% 32%, transparent 42%, rgba(6,20,36,.32) 76%, rgba(6,20,36,.76) 100%), linear-gradient(178deg, rgba(6,20,36,.34) 0%, transparent 24%, transparent 64%, rgba(6,20,36,.8) 100%)} .doc:hover .doc-foto::after{opacity:.55} .doc-foto::after{transition:opacity .5s} /* ── la tarjeta completa en navy, como el mockup ── */ .doc{background:linear-gradient(178deg,#0C2740,#071A2C 62%,#04101E); border-color:rgba(127,212,245,.18)} .doc-info{background:linear-gradient(180deg,rgba(10,34,56,.9),rgba(4,14,26,.96))} .doc-info h3{color:#F2F9FD} .doc-rol{color:rgba(200,224,240,.72)} .doc-mat{color:rgba(200,224,240,.72)} .doc-mat b{color:var(--hie)} .doc-ig{color:rgba(184,233,252,.48);border-top-color:rgba(184,233,252,.14)} .doc-ig:hover{color:var(--hie)} .doc-info::before{background:linear-gradient(90deg,transparent,rgba(127,212,245,.55),transparent);opacity:.7} .doc::after{background:linear-gradient(90deg,transparent,rgba(127,212,245,.32) 22%,rgba(127,212,245,.32) 78%,transparent)} .doc{box-shadow:var(--shX)} .doc:hover{border-color:rgba(127,212,245,.4); box-shadow:var(--shX),0 0 100px rgba(30,120,185,.3)} /* la foto ya no necesita el corte duro: se funde con el pie */ .doc-foto::before{background: radial-gradient(ellipse 72% 64% at 44% 32%, transparent 42%, rgba(6,20,36,.3) 74%, rgba(6,20,36,.72) 100%), linear-gradient(178deg, rgba(6,20,36,.32) 0%, transparent 24%, transparent 58%, rgba(7,26,44,.95) 100%)} /* ── en oscuro la tarjeta se aclara: contra el negro, el papel salta ── */ [data-tema="oscuro"] .doc{background:linear-gradient(178deg,#F7FAFC,#EDF2F6 62%,#E4EBF1); border-color:rgba(255,255,255,.14)} [data-tema="oscuro"] .doc-info{background:linear-gradient(180deg,#FBFCFD,#F1F5F8)} [data-tema="oscuro"] .doc-info h3{color:#0A2436} [data-tema="oscuro"] .doc-rol, [data-tema="oscuro"] .doc-mat{color:#2E4E63} [data-tema="oscuro"] .doc-mat b{color:#1E6BA0} [data-tema="oscuro"] .doc-ig{color:#5F7E92;border-top-color:rgba(10,36,54,.14)} [data-tema="oscuro"] .doc-ig:hover{color:#1E6BA0} [data-tema="oscuro"] .doc-info::before{background:linear-gradient(90deg,transparent,#1E6BA0,transparent);opacity:.4} [data-tema="oscuro"] .doc::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 22%,rgba(255,255,255,.9) 78%,transparent)} /* la foto se funde con el pie claro, no con navy */ [data-tema="oscuro"] .doc-foto::before{background: radial-gradient(ellipse 74% 66% at 44% 30%, transparent 46%, rgba(6,20,36,.24) 76%, rgba(6,20,36,.5) 100%), linear-gradient(178deg, rgba(6,20,36,.28) 0%, transparent 22%, transparent 62%, rgba(232,240,246,.92) 100%)} [data-tema="oscuro"] .doc-foto{background:linear-gradient(168deg,#12314C,#0A1F33)} /* y el resplandor que la despega del negro */ [data-tema="oscuro"] .doc{box-shadow:var(--shX),0 0 70px rgba(127,212,245,.1)} [data-tema="oscuro"] .doc:hover{border-color:rgba(255,255,255,.3); box-shadow:var(--shX),0 0 130px rgba(160,215,250,.24)} /* ── panel de WikiMed: semáforo y enlace a ficha ── */ .uni{display:flex;align-items:center;gap:14px;text-decoration:none;transition:.24s} .uni-on{cursor:pointer} .uni-on:hover{background:var(--sup1)} .uni-off{opacity:.62} .uinfo{flex:1;min-width:0} .uinfo b{display:block;font-size:15px;font-weight:500;color:var(--t1)} .ulogo{position:relative;flex:0 0 auto} .sem{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%; border:1.5px solid var(--sup3);z-index:2} .sem-alta{background:var(--ok,#147C54);box-shadow:0 0 8px rgba(20,124,84,.5)} .sem-media{background:var(--amb,#B8862B);box-shadow:0 0 8px rgba(184,134,43,.5)} .sem-baja{background:var(--mal,#A83A3A);box-shadow:0 0 8px rgba(168,58,58,.55)} [data-tema="oscuro"] .sem{border-color:var(--sup2)} .ucorte{font-family:var(--m);font-size:10px;letter-spacing:.08em; color:var(--ac);padding:3px 8px;border-radius:2px;background:rgba(30,107,160,.08); border:1px solid var(--lnAc)} .upend{font-family:var(--m);font-size:10px;letter-spacing:.08em;color:var(--t4)} .uflecha{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--t4);stroke-width:1.8; transition:.24s} .uni-on:hover .uflecha{stroke:var(--ac);transform:translateX(3px)} /* ══════════════════════════════════════════════ FICHA DENTRO DE WIKIMED — el mapa se va, la ficha entra ══════════════════════════════════════════════ */ .wm{transition:opacity .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1)} .wm-fuera{opacity:0;transform:translateY(-14px);pointer-events:none; height:0;overflow:hidden;margin:0;padding:0} .fk-cont{opacity:0;transform:translateY(20px);pointer-events:none; max-height:0;overflow:hidden; transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)} .fk-cont.on{opacity:1;transform:none;pointer-events:auto;max-height:none;overflow:visible} .fk{display:grid;gap:clamp(14px,1.8vw,24px)} .fk-volver{display:inline-flex;align-items:center;gap:9px;align-self:flex-start; font-family:var(--m);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--t3);background:none;border:0;cursor:pointer; padding:8px 0;transition:color .24s} .fk-volver:hover{color:var(--ac)} .fk-volver svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .24s} .fk-volver:hover svg{transform:translateX(-3px)} /* veredicto */ .ver-card{position:relative;overflow:hidden;border-radius:5px; background:linear-gradient(158deg,var(--az4),var(--az5) 60%,#031423); border:1px solid rgba(184,233,252,.18);box-shadow:var(--shX); padding:clamp(28px,3.4vw,50px)} .ver-card::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 54% 58% at 18% 16%,rgba(127,212,245,.2),transparent 66%)} .ver-card > *{position:relative;z-index:1} .ver-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap} .ver-top .eyebrow{color:var(--hie)} .ver-card h1{color:#F2F9FD;font-size:clamp(28px,3.4vw,46px);margin-top:11px;max-width:20ch; font-family:var(--d);font-weight:700;line-height:1.06} .ver-card .sede{margin-top:12px;font-size:14.5px;color:rgba(200,224,240,.7);max-width:52ch} .semaforo{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .sem-pill{font-family:var(--m);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;padding:10px 18px;border-radius:3px;font-weight:500;white-space:nowrap} .sem-pill.sem-baja{background:rgba(200,60,60,.16);color:#FF9E9E;border:1px solid rgba(200,60,60,.45); box-shadow:0 0 34px rgba(200,60,60,.2)} .sem-pill.sem-media{background:rgba(200,150,50,.16);color:#F0C05A;border:1px solid rgba(200,150,50,.45)} .sem-pill.sem-alta{background:rgba(50,180,120,.16);color:#6FE3B8;border:1px solid rgba(50,180,120,.45)} .sem-nota{font-family:var(--m);font-size:10px;letter-spacing:.1em;color:rgba(184,233,252,.5)} .ver-card .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(18px,2.6vw,44px);margin-top:clamp(26px,3.2vw,44px); padding-top:26px;border-top:1px solid rgba(184,233,252,.16)} .cif b{display:block;font-family:var(--d);font-weight:500; font-size:clamp(28px,3.4vw,44px);color:#F2F9FD;line-height:1} .cif b em{font-style:normal;font-size:.42em;color:var(--hie);margin-left:3px} .cif span{display:block;margin-top:9px;font-family:var(--m);font-size:9px; letter-spacing:.15em;text-transform:uppercase;color:rgba(184,233,252,.5);line-height:1.75} .cif.destaca b{color:var(--hie2);text-shadow:0 0 40px rgba(127,212,245,.4)} .barra-w{margin-top:clamp(26px,3vw,38px)} .barra-l{display:flex;justify-content:space-between;font-family:var(--m); font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(184,233,252,.5)} .barra{position:relative;height:9px;border-radius:99px;margin-top:14px; background:rgba(255,255,255,.07);box-shadow:inset 0 1px 4px rgba(0,0,0,.6)} .barra i{position:absolute;left:0;top:0;bottom:0;border-radius:99px; background:linear-gradient(90deg,var(--az2),var(--hie));box-shadow:0 0 24px rgba(127,212,245,.55)} .barra u{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--hie2); box-shadow:0 0 14px rgba(184,233,252,.9)} /* bloques numerados */ .fkb{background:var(--sup3);border:1px solid var(--ln);border-radius:5px; box-shadow:var(--sh2),var(--bri);overflow:hidden;position:relative; aspect-ratio:auto;transform:none;margin-top:0} .fkb-h{display:flex;align-items:center;gap:14px;padding:clamp(18px,2vw,26px) clamp(22px,2.6vw,34px); border-bottom:1px solid var(--ln);background:linear-gradient(180deg,var(--sup2),var(--sup1))} .fkb-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:var(--ac);color:#fff;font-family:var(--m);font-size:11px;font-weight:500; box-shadow:0 2px 10px rgba(30,107,160,.35)} .fkb-h h2{font-family:var(--d);font-weight:700; font-size:clamp(18px,1.9vw,24px);color:var(--t1)} .fkb-h p{margin-left:auto;font-family:var(--m);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--t4);text-align:right;line-height:1.6} .fkb-b{padding:clamp(20px,2.4vw,34px)} .dato{display:grid;grid-template-columns:180px 1fr;gap:clamp(16px,2vw,30px); padding:15px 0;border-bottom:1px solid var(--ln)} .dato:last-child{border-bottom:0;padding-bottom:0} .dato:first-child{padding-top:0} .dato dt{font-family:var(--m);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--t3);padding-top:3px} .dato dd{font-size:15px;line-height:1.75;color:var(--t2)} .dato dd b{color:var(--t1);font-weight:500} .dato dd .alerta{color:var(--mal)} .dato dd .bien{color:var(--ok)} .areas{display:grid;gap:11px;margin-top:24px} .area{display:grid;grid-template-columns:1fr 150px 66px;gap:18px;align-items:center} .area-n b{display:block;font-size:15px;font-weight:500;color:var(--t1)} .area-n span{display:block;margin-top:2px;font-family:var(--m); font-size:10px;letter-spacing:.09em;color:var(--t3)} .area-b{height:7px;border-radius:99px;background:var(--sup-b);overflow:hidden; box-shadow:inset 0 1px 3px rgba(var(--shC),.14)} .area-b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--az3),var(--az1))} .area.clave .area-b i{background:linear-gradient(90deg,var(--az2),var(--hie)); box-shadow:0 0 14px rgba(62,143,196,.5)} .area-p{font-family:var(--d);font-size:21px;text-align:right;color:var(--t2)} .area.clave .area-p{color:var(--ac)} .ruta{list-style:none;position:relative;padding-left:30px;margin:0} .ruta::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px; background:linear-gradient(180deg,var(--ac),rgba(30,107,160,.15))} .ruta li{position:relative;padding-bottom:20px} .ruta li:last-child{padding-bottom:0} .ruta i{position:absolute;left:-30px;top:4px;width:13px;height:13px;border-radius:50%; border:1px solid var(--lnAc);background:var(--sup3)} .ruta li:first-child i{background:var(--ac);border-color:var(--ac); box-shadow:0 0 0 4px rgba(30,107,160,.14)} .ruta b{display:block;font-size:15px;font-weight:500;color:var(--t1)} .ruta span{display:block;margin-top:2px;font-family:var(--m); font-size:10.5px;letter-spacing:.08em;color:var(--t3)} .planb{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;border-radius:4px; background:rgba(168,58,58,.05);border:1px solid rgba(168,58,58,.28)} .planb svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--mal);stroke-width:1.7;margin-top:2px} .planb > div > b:first-child{display:block;font-size:15px;font-weight:500;color:var(--mal)} .planb p{margin-top:5px;font-size:14.5px;line-height:1.7;color:var(--t2)} .fk-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3vw,48px);align-items:center; background:var(--sup3);border:1px solid var(--ln);border-radius:5px; padding:clamp(26px,3.2vw,46px);box-shadow:var(--sh3),var(--bri)} .fk-cta h3{font-family:var(--d);font-weight:700; font-size:clamp(21px,2.4vw,30px);color:var(--t1);line-height:1.1;margin-top:12px} .fk-cta h3 em{font-style:italic;color:var(--ac)} .fk-cta p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--t2);max-width:46ch} .fk-btns{display:flex;flex-direction:column;gap:11px} .fk-btns .btn{width:100%;justify-content:center} .fuente{margin-top:14px;font-family:var(--m);font-size:10px; letter-spacing:.06em;color:var(--t4)} .fuente a{color:var(--ac)} @media(max-width:820px){ .fk-cta{grid-template-columns:1fr} .dato{grid-template-columns:1fr;gap:6px} .area{grid-template-columns:1fr 60px}.area-b{display:none} } .fk-fuente{font-family:var(--m);font-size:10px;letter-spacing:.06em; color:var(--t4);text-align:right;padding:4px 2px} /* ── puente a Oriéntate MX en las fichas militares ── */ .fk-omx{display:block;text-decoration:none;border-radius:5px;padding:clamp(24px,2.8vw,38px); background:linear-gradient(152deg,#0B2A16,#05160C 62%,#020A05); border:1px solid rgba(120,220,160,.22);box-shadow:var(--shX); transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .3s} .fk-omx:hover{transform:translateY(-4px);border-color:rgba(120,220,160,.45); box-shadow:var(--shX),0 0 90px rgba(40,160,90,.22)} .fk-omx-t{display:block;font-family:var(--m);font-size:10px; letter-spacing:.2em;text-transform:uppercase;color:#6FE3A8} .fk-omx b{display:block;margin-top:11px;font-family:var(--d); font-weight:700;font-size:clamp(19px,2.1vw,26px);color:#EAFBF0;line-height:1.15} .fk-omx-c{display:block;margin-top:11px;font-size:14.5px;line-height:1.7; color:rgba(200,235,215,.72);max-width:52ch} .fk-omx-g{display:inline-block;margin-top:16px;font-family:var(--m); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6FE3A8;transition:.25s} .fk-omx:hover .fk-omx-g{letter-spacing:.18em} /* ── la etiqueta del marcador va abajo: arriba choca con .barra-l ── */ .barra{margin-bottom:26px} .barra u::after{content:attr(data-l);position:absolute;top:16px;left:50%; transform:translateX(-50%);font-family:var(--m);font-size:9px; letter-spacing:.1em;color:var(--hie2);white-space:nowrap} /* si el marcador va casi al final, la etiqueta se alinea a la derecha y no se sale */ .barra u[style*="left:100%"]::after, .barra u[style*="left:97%"]::after, .barra u[style*="left:95%"]::after, .barra u[style*="left:93%"]::after{left:auto;right:0;transform:none} /* ══════════════════════════════════════════════ FICHA EN MÓVIL solo lo que se rompe: el resto ya tenía regla. ══════════════════════════════════════════════ */ @media(max-width:760px){ .ver-top{flex-direction:column;gap:15px} .semaforo{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap} .semaforo .sem-nota{text-align:left} .ver-card .cifras{grid-template-columns:repeat(2,1fr);gap:20px 18px} .fkb-h{flex-wrap:wrap;gap:10px} .fkb-h p{margin-left:0;flex-basis:100%;text-align:left;line-height:1.5} .barra-l{font-size:8.5px;gap:14px;letter-spacing:.08em} .barra-l span{max-width:46%} .barra u::after{font-size:8.5px;letter-spacing:.06em} .planb{padding:16px 18px;gap:13px} .fk-fuente{text-align:left;line-height:1.7;padding:6px 2px} } @media(max-width:460px){ .cif b{font-size:25px} .cif span{font-size:8.5px;letter-spacing:.11em} .ruta{padding-left:24px} .ruta i{left:-24px} .fk-volver{font-size:10px} } /* ══════════════════════════════════════════════ MENÚ MÓVIL el panel lo inyecta nucleo.js clonando .links ══════════════════════════════════════════════ */ .menu-movil{display:none} @media(max-width:900px){ .nav{position:sticky} .menu-movil{position:absolute;left:0;right:0;top:100%; display:flex;flex-direction:column;gap:2px; padding:14px clamp(20px,4vw,54px) 22px; background:var(--sup2);border-bottom:1px solid var(--ln); box-shadow:var(--sh2); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .26s,transform .26s,visibility .26s} .nav.menu-on .menu-movil{opacity:1;visibility:visible;transform:none} .menu-movil a{font-size:17px;color:var(--t2);padding:13px 2px; border-bottom:1px solid var(--ln);transition:color .2s} .menu-movil a:last-of-type{border-bottom:0} .menu-movil a.on{color:var(--ac)} .menu-movil .mm-cta{margin-top:14px;text-align:center;border:0; padding:14px;border-radius:3px;color:#F2F9FD;font-weight:500; background:linear-gradient(180deg,var(--az2),var(--az3) 56%,var(--az4)); box-shadow:var(--sh1)} .burger{position:relative;z-index:2} /* cursos: el encabezado se apila y los filtros dejan la diagonal */ .phead-tight .phead-in{grid-template-columns:1fr;gap:18px} .phead-tight .filtros{justify-content:flex-start} .filtros{display:flex;flex-wrap:wrap;gap:8px} .filtros .fl{flex:0 0 auto} } [data-tema="oscuro"] .menu-movil{background:var(--sup3)} /* ── barra: logo izquierda · menú al centro · sesión a la derecha ── */ @media(min-width:901px){ .nav-in{position:relative;justify-content:space-between} .nav-in .links{position:absolute;left:50%;transform:translateX(-50%); white-space:nowrap} .nav-in .tema{margin-left:auto} } /* ── medtest-app: misma barra que el resto ── */ @media(min-width:901px){ .top-in{position:relative;justify-content:space-between} .top-in .links{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap} } /* ── estatus de acreditación en el panel ── */ .uacr{font-family:var(--m);font-size:9px;letter-spacing:.09em;text-transform:uppercase; padding:3px 7px;border-radius:2px;border:1px solid currentColor;white-space:nowrap} .uacr-ok{color:var(--verde,#1E8A6B)} .uacr-medio{color:var(--t3)} .uacr-mal{color:var(--mal,#A83A3A)} /* ── las negritas dentro del párrafo del plan B fluyen con el texto ── */ .planb p b{display:inline;font-size:inherit;font-weight:600;color:inherit} .planb p b.alerta{color:var(--mal)} .planb p b.bien{color:var(--ok)}