/* Página de colegios: recorrido inmersivo por escenas.
   Dos modos:
   - Lectura (por defecto): las escenas son secciones normales, una debajo de la otra.
     Es lo que ve quien tiene activado "reducir movimiento" en su dispositivo o si JavaScript no carga.
   - Inmersivo (html.sc-on): un escenario fijo de pantalla completa; el scroll controla una
     línea de tiempo con GSAP ScrollTrigger (scripts/colegios.js). */
.col-page {
    --ink: #050e1a;
    --ink-2: #0b1d33;
    --ink-3: #0e2a4a;
    --blue: #3b9eea;
    --orange: #f2a11f;
    --paper: #f1ede4;
    --soft: #c5d1df;
    --muted: #93a5bb;
    --line: rgba(255, 255, 255, 0.12);
    --display: 'Unbounded', 'Poppins', sans-serif;
    --body: 'Inter', sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --nav-h: 70px;

    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    overflow-x: clip;
}

.col-page ::selection { background: var(--orange); color: var(--ink); }
.col-page h1, .col-page h2, .col-page h3 { color: var(--paper); font-family: var(--display); letter-spacing: -0.02em; }
.col-page .is-accent { color: var(--orange); }

.sc-inner {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Piezas comunes ---------- */
.col-eyebrow, .sc-kicker, .sc-list-label, .sc-class-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.col-eyebrow { color: var(--orange); margin-bottom: 1.2rem; }
.sc-kicker { display: flex; gap: 0.7rem; color: var(--muted); margin-bottom: 1.2rem; }
.sc-kicker span:first-child { color: var(--orange); font-family: var(--display); letter-spacing: 0; }
.sc-list-label, .sc-class-label { color: var(--orange); margin-bottom: 0.7rem; }

.sc-title {
    font-size: clamp(2rem, min(4.9vw, 9vh), 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: 1.4rem;
}

.sc-title > span, .col-cta-title > span { display: block; }
.sc-line { display: block; overflow: hidden; padding-bottom: 0.06em; }

.sc-h2 { font-size: clamp(1.6rem, min(3.6vw, 6.5vh), 3.2rem); font-weight: 800; line-height: 1.05; margin-bottom: 1rem; }
.sc-lead, .sc-side, .sc-purpose { color: var(--soft); font-size: clamp(0.95rem, 1.9vh, 1.1rem); line-height: 1.6; }
.sc-lead strong { color: var(--paper); }

.col-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.6rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.4s var(--ease);
}

.col-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--paper);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease);
}

.col-btn:hover::before { transform: none; }
.col-btn-primary { background: var(--orange); color: var(--ink); }
.col-btn-primary:hover { color: var(--ink); }
.col-btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--paper); }
.col-btn-ghost:hover { color: var(--ink); }
.col-btn-big { padding: 1.2rem 2.1rem; font-size: 1.1rem; }

.col-page a:focus-visible,
.col-page button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* ---------- Escenas (modo lectura) ---------- */
.sc-scene { position: relative; padding: 5rem 0; }
.sc-scene:nth-of-type(even) { background: var(--ink-2); }
.sc-objetivo, .sc-testimonio { background: var(--orange) !important; color: var(--ink); }
.sc-objetivo .sc-kicker, .sc-objetivo .sc-side, .sc-testimonio footer { color: #3b2a07; }
.sc-objetivo .sc-kicker span:first-child { color: var(--ink); }

.sc-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
    pointer-events: none;
}

/* Portada */
.sc-intro-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.sc-intro-visual { position: relative; width: 100%; max-width: 520px; justify-self: end; }
.sc-chart { width: 100%; height: auto; overflow: visible; }
.sc-bar { fill: #12365c; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-bar:nth-child(2) { fill: #1a4d80; }
.sc-bar:nth-child(3) { fill: #2a6fae; }
.sc-bar.is-accent { fill: var(--orange); }
.sc-trend { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.sc-coin circle { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }
.sc-coin text { fill: var(--ink); font: 800 16px var(--display); }
.sc-intro .sc-coin { display: none; }

.sc-chip {
    position: absolute;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

.sc-chip.is-accent { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.sc-hint { display: none; }

/* Objetivo */
.sc-manifesto {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, min(3.6vw, 6.4vh), 3rem);
    line-height: 1.2;
    max-width: 24ch;
    margin-bottom: 2rem;
    color: var(--ink);
}

.sc-objetivo .sc-side { max-width: 40rem; margin-left: auto; }

/* Charla */
.sc-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }

.sc-letter {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(4rem, 12vh, 8rem);
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 2px var(--orange);
    margin-bottom: 0.5rem;
}

.sc-facts { display: grid; gap: 0.8rem; margin: 1.5rem 0 0; }
.sc-facts div { padding-left: 1rem; border-left: 2px solid var(--orange); }
.sc-facts dt { color: var(--orange); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.sc-facts dd { margin: 0; color: var(--soft); font-size: 0.95rem; }

.sc-counter { display: none; }
.sc-deck-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.sc-topic {
    position: relative;
    padding: 1.8rem 2rem;
    border-radius: 26px;
    background: var(--ink-3);
    border: 1px solid var(--line);
}

.sc-topic > span {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px currentColor;
    margin-bottom: 0.8rem;
}

.sc-topic h3 { font-size: clamp(1.2rem, 3.2vh, 1.8rem); font-weight: 700; margin-bottom: 0.6rem; }
.sc-topic p { margin: 0; color: var(--soft); line-height: 1.55; }
.sc-topic.is-accent { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sc-topic.is-accent h3 { color: var(--ink); }
.sc-topic.is-accent p { color: #3b2a07; }

/* Taller */
.sc-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.sc-specs span { padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 600; }
.sc-road { display: none; }
.sc-classes { display: grid; gap: 1rem; margin-top: 2rem; }

.sc-class {
    padding: 2rem;
    border-radius: 26px;
    background: var(--ink-3);
    border: 1px solid var(--line);
}

.sc-class h3 { font-size: clamp(1.25rem, 3.2vh, 1.9rem); font-weight: 700; margin-bottom: 0.9rem; }
.sc-class ul { list-style: none; padding: 0; margin: 0 0 1rem; }

.sc-class li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-bottom: 1px solid var(--line);
    color: var(--soft);
    font-size: 0.95rem;
}

.sc-class li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
}

.sc-activity {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(242, 161, 31, 0.1);
    border-left: 3px solid var(--orange);
    font-size: 0.93rem;
}

.sc-activity span { display: block; color: var(--orange); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

/* Dónde estuvimos */
.sc-lugares-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.sc-photos { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0.8rem; align-items: center; }
.sc-photo { position: relative; margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 4; }
.sc-photo.is-main { aspect-ratio: 3 / 4.6; }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; }

.sc-photo figcaption {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--orange);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.sc-schools { list-style: none; padding: 0; margin: 0 0 1.4rem; }

.sc-schools li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(0.95rem, 2.2vh, 1.25rem);
}

.sc-schools em {
    flex-shrink: 0;
    font: 700 0.75rem var(--body);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
}

.sc-schools em.is-accent { color: var(--orange); border-color: rgba(242, 161, 31, 0.5); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.sc-chips span { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; }

/* Testimonio */
.sc-quote-mark { display: block; font: 800 8rem/0.6 var(--display); height: 3.5rem; color: var(--ink); }
.sc-testimonio blockquote { margin: 0; }

.sc-testimonio blockquote p {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.3rem, min(3vw, 5.2vh), 2.5rem);
    line-height: 1.25;
    margin-bottom: 1.6rem;
    color: var(--ink);
}

.sc-testimonio footer strong { color: var(--ink); }

/* Equipo */
.sc-equipo-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.sc-big-text { font: 700 clamp(1.3rem, min(2.8vw, 5vh), 2.3rem)/1.25 var(--display); margin-bottom: 1.4rem; }

.sc-coord {
    padding: 2.2rem;
    border-radius: 26px;
    background: linear-gradient(135deg, #12365c, var(--ink-2));
    border: 1px solid var(--line);
}

.sc-coord p:last-child { margin: 0; font-size: 1.05rem; line-height: 1.6; }

/* Qué se llevan */
.sc-checks { list-style: none; padding: 0; margin: 0; }

.sc-checks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: center;
    padding: clamp(0.8rem, 2.4vh, 1.5rem) 0;
    border-bottom: 1px solid var(--line);
    font: 700 clamp(1.05rem, min(2.6vw, 4.4vh), 2rem)/1.25 var(--display);
}

.sc-checks svg { width: 2.6rem; height: 2.6rem; padding: 0.35rem; border-radius: 50%; background: rgba(242, 161, 31, 0.12); }
.sc-checks path { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* Condiciones */
.sc-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; perspective: 1200px; }

.sc-term {
    padding: 2rem;
    border-radius: 26px;
    background: var(--ink-3);
    border: 1px solid var(--line);
    transform-style: preserve-3d;
}

.sc-term-big { display: block; font: 800 3rem/1 var(--display); color: var(--orange); margin-bottom: 1.2rem; transform: translateZ(40px); }
.sc-term h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.7rem; transform: translateZ(25px); }
.sc-term p { margin: 0; color: var(--soft); font-size: 0.95rem; transform: translateZ(15px); }

/* Contacto (siempre página normal) */
.col-cta {
    position: relative;
    padding: 8rem 0 9rem;
    overflow: hidden;
    background: radial-gradient(ellipse at 80% 100%, #12365c, var(--ink) 60%);
}

.col-cta-bars { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 14px; height: 70%; opacity: 0.25; pointer-events: none; }
.col-cta-bars i { width: 46px; border-radius: 10px 10px 0 0; background: var(--blue); height: calc(15% + var(--n, 0) * 12%); transform-origin: bottom; }
.col-cta-bars i:last-child { background: var(--orange); }
.col-cta-title { position: relative; font-size: clamp(2rem, 6.4vw, 5.4rem); font-weight: 800; line-height: 1; margin-bottom: 2rem; }
.col-cta-text { position: relative; max-width: 36rem; color: var(--soft); font-size: 1.15rem; margin-bottom: 2.5rem; }
.col-cta-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.col-cta-mail small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.col-cta-mail a { color: var(--paper); font-weight: 600; font-size: 1.05rem; word-break: break-word; }
.col-cta-mail a:hover { color: var(--orange); }

/* Piezas que solo existen en el modo inmersivo */
.col-progress, .col-cursor, .sc-dots, .sc-morph, .sc-shape { display: none; }

/* ---------- Modo inmersivo ---------- */
.sc-on .col-progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1100; pointer-events: none; }
.sc-on .col-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); transform: scaleX(0); transform-origin: left; }

.sc-on .sc-stage {
    position: relative;
    height: calc(100svh - var(--nav-h));
    overflow: hidden;
    background: var(--ink);
}

.sc-on .sc-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    background: var(--ink);
    visibility: hidden;
}

.sc-on .sc-intro { visibility: visible; }
.sc-on .sc-scene:nth-of-type(even) { background: var(--ink-2); }
.sc-on .sc-testimonio, .sc-on .sc-objetivo { background: var(--orange); }

.sc-on .sc-hint {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.sc-on .sc-hint span { width: 22px; height: 34px; border: 2px solid var(--muted); border-radius: 12px; position: relative; }

.sc-on .sc-hint span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 4px;
    height: 7px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--orange);
    animation: sc-wheel 1.6s var(--ease) infinite;
}

@keyframes sc-wheel {
    0% { transform: translateY(0); opacity: 1; }
    80% { transform: translateY(10px); opacity: 0; }
    100% { opacity: 0; }
}

.sc-on .sc-intro .sc-coin { display: inline; }

/* Objeto que cambia de forma */
.sc-on .sc-morph {
    display: block;
    position: absolute;
    right: clamp(20px, 4vw, 56px);
    top: clamp(16px, 3vh, 32px);
    z-index: 30;
    width: clamp(44px, 6vh, 72px);
    height: clamp(44px, 6vh, 72px);
    pointer-events: none;
}

.sc-on .sc-morph #sc-morph-shape { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }

/* Navegación por escenas */
.sc-on .sc-dots {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: fixed;
    right: clamp(10px, 1.6vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
}

.sc-dots button {
    position: relative;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid var(--muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}

.sc-dots button span {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: var(--ink-2);
    color: var(--paper);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.sc-dots button:hover span, .sc-dots button:focus-visible span { opacity: 1; }
.sc-dots button.is-active { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
.sc-dots.is-dark button:not(.is-active) { border-color: var(--ink); }

/* Charla: un mazo donde se ve una tarjeta por vez */
.sc-on .sc-counter { display: block; margin: 0 0 0.8rem; color: var(--muted); font-family: var(--display); font-size: 0.95rem; }
.sc-on .sc-counter b { color: var(--orange); font-size: 1.6rem; }
.sc-on .sc-deck-cards { display: grid; gap: 0; }
.sc-on .sc-topic { grid-area: 1 / 1; min-height: clamp(220px, 40vh, 340px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); transform-origin: 50% 100%; }

/* Taller: camino con la moneda y una clase por vez */
.sc-on .sc-taller-inner { display: grid; grid-template-rows: auto auto 1fr; height: 100%; padding-top: 0.5rem; }
.sc-on .sc-taller { align-items: stretch; }
.sc-on .sc-road { display: block; width: 100%; height: clamp(50px, 9vh, 100px); overflow: visible; margin: 1rem 0 0.5rem; }
.sc-road-base { fill: none; stroke: var(--line); stroke-width: 4; stroke-dasharray: 10 10; }
.sc-road-done { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; }
.sc-on .sc-classes { display: grid; margin: 0; align-self: start; }
.sc-on .sc-class { grid-area: 1 / 1; max-height: calc(100svh - var(--nav-h) - 17rem); overflow: auto; overscroll-behavior: contain; }

/* Cursor propio (solo con mouse) */
.sc-on .col-cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--orange);
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0;
    transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease);
}

.col-cursor.is-big { width: 60px; height: 60px; margin: -30px 0 0 -30px; }

@media (hover: none), (pointer: coarse) {
    .sc-on .col-cursor { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .sc-intro-inner, .sc-split, .sc-lugares-inner, .sc-equipo-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .sc-intro-visual { max-width: 380px; justify-self: start; }
    .sc-terms { grid-template-columns: 1fr; }

    /* En pantallas chicas cada escena muestra lo esencial y se compacta */
    .sc-on .sc-intro-visual { position: absolute; right: -10px; bottom: 6%; width: 46%; max-width: 220px; opacity: 0.35; }
    .sc-on .sc-intro .sc-lead { display: none; }
    .sc-on .sc-split { gap: 1rem; }
    .sc-on .sc-facts, .sc-on .sc-purpose { display: none; }
    .sc-on .sc-letter { font-size: 3.4rem; }
    .sc-on .sc-topic { min-height: 0; padding: 1.4rem; }
    .sc-on .sc-topic > span { font-size: 2rem; }
    .sc-on .sc-photos { grid-template-columns: 1fr 1.3fr 1fr; }
    .sc-on .sc-photo, .sc-on .sc-photo.is-main { aspect-ratio: 3 / 4; }
    .sc-on .sc-lugares .sc-chips, .sc-on .sc-lugares .sc-list-label:last-of-type { display: none; }
    .sc-on .sc-equipo .sc-side { display: none; }
    .sc-on .sc-terms { gap: 0.6rem; }
    .sc-on .sc-term { padding: 1.1rem 1.3rem; }
    .sc-on .sc-term-big { font-size: 1.8rem; margin-bottom: 0.4rem; }
    .sc-on .sc-term p { font-size: 0.85rem; }
    .sc-on .sc-dots { right: 6px; gap: 0.45rem; }
    .sc-on .sc-dots button { width: 10px; height: 10px; }
}

@media (max-width: 576px) {
    .sc-scene { padding: 3.5rem 0; }
    .sc-on .sc-scene { padding: 1.2rem 0; }
    .sc-on .sc-specs span:nth-child(n+3) { display: none; }
    .sc-on .sc-class { padding: 1.3rem; }
    .sc-on .sc-class li { font-size: 0.85rem; }
    .col-cta { padding: 6rem 0 7rem; }
    .col-cta-bars i { width: 24px; }
}

@media (max-width: 767px) {
    /* En el celular se avanza con el dedo: sin puntos, el ícono abajo y la portada sin gráfico */
    .sc-on .sc-dots { display: none; }
    .sc-on .sc-morph { top: auto; bottom: 18px; right: 18px; width: 40px; height: 40px; }
    .sc-on .sc-intro-visual { display: none; }
}