/* Epic English — azul y oro.
   Paleta y ornamentos inspirados en el marco del certificado (azul con entrelazado dorado,
   sello de oro). Los ornamentos están dibujados de cero en SVG; la imagen del certificado no se usa. */

:root {
  --navy: #132a4c;
  --navy-2: #1b3a66;
  --navy-3: #0d1f3a;
  --gold: #d2ad5b;
  --gold-hi: #ecd08a;
  --gold-lo: #9a7633;
  --ivory: #f3ecdc;
  --ivory-2: #cfd6e2;
  --porcelain: #f5f6f9;
  --line: #d9cfb8;
  --ink: #14223a;
  --ink-2: #4a5870;
  --on-gold: #1d1406;

  --f-display: "Marcellus", "Trajan Pro", Georgia, serif;
  --f-caps: "Marcellus SC", "Marcellus", Georgia, serif;
  --f-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1240px;

  /* Sección "Por qué estudiar en Epic": es la única clara, la que cambia en modo oscuro */
  --why-bg: var(--porcelain);
  --why-head: var(--navy);
  --why-ink: var(--ink-2);
  --why-line: var(--line);
  --why-orn: var(--gold-lo);
  --why-tag: var(--gold-lo);
  --lead-bg: var(--navy);

  color-scheme: light;
  scrollbar-color: var(--gold-lo) var(--navy-3);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font: 400 1.0625rem/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold-hi); color: var(--on-gold); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--on-gold); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Banda con entrelazado dorado ---------- */

.band {
  height: 34px;
  background: var(--navy-2);
  border-block: 2px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.band::before { content: ""; position: absolute; inset: 3px 0; border-block: 1px solid var(--gold-lo); }
.band svg { position: absolute; top: 0; left: 0; width: calc(100% + 56px); max-width: none; height: 100%; }

/* ---------- Portada ---------- */

.hero {
  --hero-pad: clamp(28px, 4vw, 56px);
  position: relative;
  padding: var(--hero-pad) var(--gutter);
  background:
    radial-gradient(ellipse 70% 60% at 50% 36%, rgba(255, 210, 120, .13), transparent 70%),
    var(--navy);
}
.frame {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px) clamp(18px, 4vw, 64px) clamp(64px, 6.5vw, 104px);
}
/* Las líneas del marco no llegan a las esquinas: se cortan donde empieza la voluta (48 px),
   así nunca se ven cruzadas, ni siquiera mientras se abren en la animación */
.frame__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  --cut: 96px;
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--cut)) 100% no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - var(--cut)) no-repeat;
  mask: linear-gradient(#000 0 0) center / calc(100% - var(--cut)) 100% no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - var(--cut)) no-repeat;
}
.frame__lines rect { fill: var(--gold); }
.frame__lines .lo { fill: var(--gold-lo); }
.frame__lines .fl-mob { display: none; }
.corner { position: absolute; width: 140px; height: 140px; color: var(--gold); transform: var(--flip, none); }
.corner--tl { top: -30px; left: -30px; }
.corner--tr { top: -30px; right: -30px; --flip: scaleX(-1); }
.corner--bl { bottom: -30px; left: -30px; --flip: scaleY(-1); }
.corner--br { bottom: -30px; right: -30px; --flip: scale(-1, -1); }

.hero__inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 22px; }
.logo-wrap { position: relative; width: min(640px, 88%); }
.hero__logo { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.rule { display: flex; align-items: center; gap: 14px; width: min(520px, 80%); color: var(--gold); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.rule svg { width: 22px; height: 22px; }
.hero h1 {
  font: 400 clamp(2.2rem, 4.4vw, 3.9rem)/1.08 var(--f-display);
  letter-spacing: .01em;
  max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--gold-hi); }
.lede { max-width: 52ch; color: var(--ivory-2); font-size: clamp(1.06rem, 1.2vw, 1.15rem); }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px;
  border: 1px solid var(--gold);
  color: var(--ivory);
  text-decoration: none;
  font: 600 1.02rem/1 var(--f-text);
  letter-spacing: .02em;
  transition: background-color .2s, color .2s;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--wa {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
  color: var(--on-gold);
  padding: 0 26px;
  font-size: 1.08rem;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--wa:hover { background: var(--gold-hi); }
.btn--line:hover { background: rgba(210, 173, 91, .16); }

/* ---------- Sello dorado ---------- */

/* Montado sobre el borde de abajo del marco, sin salirse del azul */
.seal { position: absolute; right: clamp(10px, 6vw, 90px); bottom: calc(10px - var(--hero-pad)); width: 168px; height: 168px; z-index: 3; transform: var(--seal-t, none); }
.seal__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe7a6 0%, #e2bd66 32%, #b98c38 70%, #8a6526 100%);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(120, 86, 26, .35), inset 0 0 0 9px rgba(255, 236, 170, .35);
}
.seal__ring { position: absolute; inset: 0; animation: turn 80s linear infinite; }
.seal__mid {
  position: absolute; inset: 34px; border-radius: 50%;
  border: 1.5px solid rgba(90, 62, 16, .55);
  display: grid; place-items: center; text-align: center; color: #4a3410;
}
.seal__mid span { display: block; font: 700 .62rem/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; }
.seal__mid b { display: block; font: 400 2.3rem/1 var(--f-display); }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- Por qué estudiar en Epic ---------- */

.why { background: var(--why-bg); color: var(--why-head); padding: clamp(64px, 7vw, 110px) var(--gutter); }
.why__head { max-width: var(--wrap); margin: 0 auto clamp(36px, 4vw, 56px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.why__head h2 { font: 400 clamp(2rem, 3.4vw, 3rem)/1.1 var(--f-display); color: var(--why-head); }
.why__head p { color: var(--why-ink); max-width: 46ch; }
.laurel { width: 190px; height: 52px; color: var(--why-orn); }

.list { max-width: var(--wrap); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gold); }
.item { padding: 30px clamp(18px, 2vw, 30px) 34px; border-bottom: 1px solid var(--why-line); }
.item:not(:nth-child(3n+1)) { border-left: 1px solid var(--why-line); }
.item svg { width: 30px; height: 30px; color: var(--why-orn); margin-bottom: 16px; }
.item h3 { font: 400 1.55rem/1.15 var(--f-display); color: var(--why-head); margin-bottom: 8px; }
.item p { color: var(--why-ink); }
.item p.item__tag { margin: -2px 0 10px; font: 400 .98rem/1.2 var(--f-caps); letter-spacing: .08em; color: var(--why-tag); }
.item--lead { background: var(--lead-bg); color: var(--ivory); }
.item--lead svg { color: var(--gold); }
.item--lead h3 { color: var(--gold-hi); }
.item--lead p { color: var(--ivory-2); }
.item--lead p.item__tag { color: var(--gold); }

/* ---------- Modo oscuro ----------
   Sigue al sistema (celular o compu en modo oscuro). ?tema=oscuro o ?tema=claro lo fuerzan,
   para verlo sin cambiar la configuración. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --why-bg: #0b1a31;
    --why-head: var(--ivory);
    --why-ink: var(--ivory-2);
    --why-line: rgba(210, 173, 91, .22);
    --why-orn: var(--gold);
    --why-tag: var(--gold);
    --lead-bg: var(--navy-2);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --why-bg: #0b1a31;
  --why-head: var(--ivory);
  --why-ink: var(--ivory-2);
  --why-line: rgba(210, 173, 91, .22);
  --why-orn: var(--gold);
  --why-tag: var(--gold);
  --lead-bg: var(--navy-2);
  color-scheme: dark;
}

/* ---------- Escribinos ---------- */

.talk {
  padding: clamp(56px, 7vw, 100px) var(--gutter);
  text-align: center;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 210, 120, .10), transparent 70%), var(--navy-3);
}
.talk h2 { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1.1 var(--f-display); }
.talk > p { color: var(--ivory-2); max-width: 46ch; margin: 14px auto 0; }
.channels { max-width: 980px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ch {
  position: relative;
  display: grid; justify-items: center; gap: 6px;
  padding: 26px 16px;
  border: 1px solid var(--gold);
  text-decoration: none;
  transition: background-color .2s;
}
.ch::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(210, 173, 91, .35); pointer-events: none; }
.ch svg { width: 34px; height: 34px; color: var(--gold); }
.ch b { font: 400 1.5rem/1.1 var(--f-display); }
.ch span { color: var(--ivory-2); font-size: .98rem; font-variant-numeric: tabular-nums; }
.ch:hover { background: rgba(210, 173, 91, .12); }
.ch--wa { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: var(--gold-hi); }
.ch--wa::before { border-color: rgba(70, 48, 10, .35); }
.ch--wa svg, .ch--wa b, .ch--wa span { color: var(--on-gold); }
.ch--wa:hover { background: var(--gold-hi); }
.hours { margin-top: 22px !important; font-size: .95rem; }

footer {
  background: var(--navy-3);
  border-top: 1px solid rgba(210, 173, 91, .35);
  color: var(--ivory-2);
  text-align: center;
  padding: 22px var(--gutter);
  font-size: .9rem;
}
footer p + p { margin-top: 6px; }
footer a { text-underline-offset: .2em; }
footer a + a { margin-left: 14px; }

/* ---------- Botón fijo de WhatsApp (celular) ---------- */

.dock { display: none; }

/* Entre 861 y 1240 px el sello caería sobre los botones (de 1200 para arriba hay lugar de sobra):
   en ese rango el marco deja abajo el lugar del sello (lo que entra en el marco + un respiro). */
@media (min-width: 861px) and (max-width: 1240px) {
  .frame { padding-bottom: calc(196px - var(--hero-pad)); }
}

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  .list { grid-template-columns: 1fr; }
  .item:not(:nth-child(3n+1)) { border-left: 0; }
  .channels { grid-template-columns: 1fr; }
  /* En celular la esquina va al 65 %: las líneas del marco se afinan igual para que empalmen sin salto */
  .corner { width: 91px; height: 91px; }
  .corner--tl { top: -19.5px; left: -19.5px; }
  .corner--tr { top: -19.5px; right: -19.5px; }
  .corner--bl { bottom: -19.5px; left: -19.5px; }
  .corner--br { bottom: -19.5px; right: -19.5px; }
  .frame__lines { --cut: 62.4px; }
  .frame__lines .fl-desk { display: none; }
  .frame__lines .fl-mob { display: inline; }
  .frame { padding-bottom: 118px; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; }
  .btn--wa { grid-column: 1 / -1; }
  .btn--line { padding: 0 12px; }
  .seal { width: 124px; height: 124px; bottom: calc(6px - var(--hero-pad)); right: 50%; --seal-t: translateX(50%); }
  .seal__mid { inset: 25px; }
  .seal__mid b { font-size: 1.65rem; }
  .seal__mid span { font-size: .5rem; }

  .dock {
    position: fixed; left: 12px; right: 12px; z-index: 20;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold));
    border: 1px solid var(--gold-hi);
    color: var(--on-gold);
    text-decoration: none;
    font: 600 1.06rem/1 var(--f-text);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
    visibility: hidden; opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  .dock svg { width: 24px; height: 24px; }
  .dock.is-on { visibility: visible; opacity: 1; }
  footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}


/* ======================================================================
   Motion. Todo vive bajo .motion, que se agrega solo si la persona no pidió
   reducir movimiento. Sin JS o con movimiento reducido, todo se ve quieto.
   ====================================================================== */

:root { --ease: cubic-bezier(.16, 1, .3, 1); }

/* La filigrana de las bandas se desliza despacio, sin parar */
@keyframes drift { to { transform: translateX(-56px); } }
@keyframes drift-rev { from { transform: translateX(-56px); } to { transform: none; } }
.motion .band svg { animation: drift 7s linear infinite; }
.motion .band--rev svg { animation-name: drift-rev; }

/* ---------- Portada: se arma como la entrega de un diploma ---------- */

@keyframes m-open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-corner { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-logo { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-spin { from { opacity: 0; transform: rotate(-180deg) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes m-stamp {
  0%   { opacity: 0; transform: var(--seal-t, none) scale(1.8) rotate(-28deg); }
  55%  { opacity: 1; transform: var(--seal-t, none) scale(.92) rotate(3deg); }
  75%  { transform: var(--seal-t, none) scale(1.04) rotate(-1deg); }
  100% { opacity: 1; transform: var(--seal-t, none) scale(1) rotate(0); }
}
@keyframes m-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.6); opacity: 0; } }
/* Brillo que pasa sobre el oro: barre y después espera, así se repite cada tanto */
@keyframes m-gleam { 0% { background-position: 160% 0; } 14%, 100% { background-position: -60% 0; } }
@keyframes m-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Antes de arrancar, todo lo de la portada espera escondido */
.motion .hero:not(.go) :is(.frame__lines, .corner, .logo-wrap, .rule, .hero h1, .lede, .actions .btn, .seal) { opacity: 0; }

.motion .hero.go .frame__lines { animation: m-open 1.1s var(--ease) both; }
/* Las esquinas aparecen (sin girar) mientras las líneas se abren hacia ellas */
.motion .hero.go .corner { animation: m-corner .9s ease-out both; animation-delay: .3s; }
.motion .hero.go .logo-wrap { animation: m-logo 1.2s var(--ease) .25s both; }

.logo-wrap::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 244, 214, .7) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 160% 0;
  -webkit-mask: url("../img/logo-1600.webp") center / 100% 100% no-repeat;
  mask: url("../img/logo-1600.webp") center / 100% 100% no-repeat;
  opacity: 0;
}
.motion .hero.go .logo-wrap::after { opacity: 1; animation: m-gleam 9s ease-in-out 1.3s infinite; }

.motion .hero.go .rule::before { transform-origin: right; animation: m-grow .9s var(--ease) .95s both; }
.motion .hero.go .rule::after { transform-origin: left; animation: m-grow .9s var(--ease) .95s both; }
.motion .hero.go .rule svg { animation: m-spin .9s var(--ease) 1s both; }

/* El titular sube palabra por palabra (el JS separa las palabras en .w) */
.motion .hero.go h1:not(.split) { animation: m-rise 1s var(--ease) 1s both; }
.motion .hero h1 .w { display: inline-block; }
.motion .hero.go h1 .w { animation: m-rise .9s var(--ease) both; animation-delay: calc(1s + var(--i) * .07s); }
.motion .hero.go .lede { animation: m-rise 1s var(--ease) 1.45s both; }
.motion .hero.go .actions .btn { animation: m-rise .9s var(--ease) both; animation-delay: 1.65s; }
.motion .hero.go .actions .btn:nth-child(2) { animation-delay: 1.73s; }
.motion .hero.go .actions .btn:nth-child(3) { animation-delay: 1.81s; }

/* El sello cae y se estampa; al apoyar, un anillo dorado se abre */
.motion .hero.go .seal { animation: m-stamp .95s cubic-bezier(.3, .7, .4, 1) 2.15s both; }
.seal::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-hi);
  opacity: 0;
  pointer-events: none;
}
.motion .hero.go .seal::after { animation: m-ring .9s ease-out 2.68s both; }

/* ---------- Brillo en los botones de WhatsApp ---------- */

.btn--wa, .ch--wa { position: relative; overflow: hidden; }
.btn--wa::after, .ch--wa::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-120%);
}
.motion .btn--wa:hover::after, .motion .ch--wa:hover::after { transform: translateX(120%); transition: transform .9s ease; }
.motion .hero.go .btn--wa::after { animation: m-sweep 1.2s ease-in-out 2.9s; }
.motion .ch--wa.in::after { animation: m-sweep 1.2s ease-in-out .7s; }

/* ---------- Al bajar: las cosas entran cuando llegan ---------- */

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.motion-ready [data-reveal].in { opacity: 1; transform: none; }

.motion-ready .why__head .laurel { transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.motion-ready .why__head.in .laurel { transform: none; }

.motion-ready .item svg { opacity: 0; transform: rotate(-150deg) scale(.4); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0s) + .2s); }
.motion-ready .item.in svg { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seal__ring { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}