/* Web look for the student portal: the same finish as zonasmart.com.ar (tight titles, accent words in solid cyan,
   translucent cards that light up on hover, buttons with a cyan glow, soft halo in the background).
   Loads last, after portal-brand.css; it only restyles, it does not change any screen or function. */
:root{--brand-light:#7fe6f2;--text-muted:#a1a1aa;--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);--on-brand:#04191c;
 --card-glass:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
 --ease-soft:cubic-bezier(.33,1,.68,1);--dur-fast:.18s;--dur-mid:.45s;
 --glow-btn:0 8px 30px -10px rgba(38,198,218,.7);--glow-btn-hover:0 10px 40px -8px rgba(38,198,218,.85);
 --glow-card:0 20px 60px -30px rgba(38,198,218,.5);--border-hover:rgba(38,198,218,.4)}

body{background:var(--bg);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(38,198,218,.35);color:#fff}
/* Background halos, like the website's: one top right, one lower left */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px);background:radial-gradient(closest-side,rgba(38,198,218,.2),transparent)}
body::before{top:-25vh;right:-25vw;width:80vw;height:70vh}
body::after{bottom:-30vh;left:-30vw;width:70vw;height:60vh;opacity:.55}

/* Titles: bold, tight, accent word in plain cyan */
h1{font-size:clamp(2rem,1.3rem + 3vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
main.pt-lesson h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem)}
h2{letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
h3{letter-spacing:-.01em}
p{text-wrap:pretty}
h1 em,h2 em,.pt-welcome h1 em{font-style:normal;font-family:inherit;background:none;color:var(--brand)}
.pt-tag{letter-spacing:.14em}

/* Header: almost transparent, as on the website */
.pt-top{background:rgba(10,10,10,.72);border-bottom-color:rgba(255,255,255,.06)}

/* Translucent cards */
.pt-card,.pt-guide,.pt-course-card,.pt-continue,.pt-outline details{background:var(--card-glass);border:1px solid var(--border);border-radius:1.25rem;box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pt-continue{border-color:rgba(38,198,218,.22);box-shadow:var(--glow-card)}
.pt-class,.pt-tool,.pt-q{background:var(--card-glass);border-color:var(--border)}
.pt-course-card.locked{background:transparent}
.pt-class.current{background:var(--brand-soft);border-color:rgba(38,198,218,.55)}
:is(a.pt-course-card,.pt-continue,.pt-class,.pt-tool,a.pt-card){transition:border-color var(--dur-mid) var(--ease-soft),box-shadow var(--dur-mid) var(--ease-soft),transform var(--dur-mid) var(--ease-soft)}
:is(a.pt-course-card,.pt-continue,.pt-tool,a.pt-card):is(:hover,:focus-visible){border-color:var(--border-hover);box-shadow:var(--glow-card)}
.pt-class:hover{border-color:var(--border-hover)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(a.pt-course-card,.pt-continue,a.pt-card):hover{transform:translateY(-3px)}}

/* Buttons: pill with a cyan glow; lighter cyan on hover */
.pt-btn{min-height:48px;padding:.75rem 1.4rem;box-shadow:var(--glow-btn);transition:background-color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),box-shadow var(--dur-mid) var(--ease-soft),transform var(--dur-fast) var(--ease-soft);-webkit-tap-highlight-color:transparent}
.pt-btn:hover{background:var(--brand-light);filter:none;box-shadow:var(--glow-btn-hover)}
.pt-btn:active{transform:scale(.98)}
.pt-btn.secondary{background:rgba(255,255,255,.02);border-color:var(--border-strong);box-shadow:none}
.pt-btn.secondary:hover{background:rgba(38,198,218,.08);border-color:rgba(38,198,218,.6);box-shadow:none}
.pt-help:hover{background:rgba(38,198,218,.08)}

/* Fields */
.pt-form input,.pt-form select,.pt-form textarea,.pt-quote input,.pt-quote select,.pt-quote textarea,.pt-net-inputs input{background:rgba(255,255,255,.03);border-color:var(--border-strong);border-radius:12px}

/* Menu on the computer: the active section as a pill, like the website's buttons */
@media(min-width:960px){.pt-nav{background:rgba(10,10,10,.72);border-bottom-color:rgba(255,255,255,.06)}.pt-nav a{border-radius:var(--radius-pill)}}

@media (prefers-reduced-motion:reduce){.pt-btn,:is(a.pt-course-card,.pt-continue,.pt-class,.pt-tool,a.pt-card){transition:none}.pt-btn:active{transform:none}}
/* Crecimiento: certificado para compartir, próximo nivel, referidos, portafolio, proyectos y clases grabadas */
.pt-cert-row{display:grid;gap:8px;padding:12px 0}.pt-cert-row+.pt-cert-row{border-top:1px solid var(--border)}
.pt-cert-row .pt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
a.pt-course-card.pt-next{border-color:rgba(38,198,218,.45);background:radial-gradient(120% 90% at 100% 0%,rgba(38,198,218,.14),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.pt-next-off{color:var(--brand-light,var(--brand));font-weight:600}
.pt-copy-line{margin:0 0 12px;overflow-wrap:anywhere}.pt-copy-line code{display:block;padding:.6rem .8rem;border-radius:.7rem;border:1px solid var(--border-strong);background:rgba(255,255,255,.03);font-size:.9rem}
.pt-list{margin:0;padding-left:1.2rem;display:grid;gap:6px;line-height:1.45}
.pt-ok{color:var(--ok,#20bd88);font-weight:600}
.pt-pre{white-space:pre-line;line-height:1.55}
.pt-lead{font-size:1.1rem;color:var(--text-soft,var(--text-muted));margin:.3rem 0 0}
.pt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px 20px;margin:12px 0 0}
.pt-facts div{display:grid;gap:2px}.pt-facts dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.pt-facts dd{margin:0;line-height:1.4}
.pt-subhead{margin:18px 0 0;font-size:1.05rem;color:var(--text-muted)}
.pt-check-row{display:flex!important;gap:10px;align-items:flex-start;line-height:1.45}.pt-check-row input{margin-top:.2rem;width:1.2rem;height:1.2rem;flex:none}
.pt-live.past{opacity:.92}
.pt-rec summary{cursor:pointer;font-weight:600;color:var(--brand-light,var(--brand));padding:.4rem 0}
.pt-rec .pt-video{margin-top:10px}