/* =========================================================
   BLOOM Learning Space — Portada / Landing
   Estilo premium: split verde / blanco, logo dorado central
   ========================================================= */

/* ---------- Tipografías locales (offline-ready) ---------- */
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Paleta y variables ---------- */
:root{
  --green:#159AB2;
  --green-2:#11879C;
  --green-deep:#0A5566;
  --gold:#B8895A;
  --gold-2:#C9A15A;
  --gold-deep:#9A6B3B;
  --lime:#e1de00;
  --cream:#FAF9F6;
  --cream-2:#F1EBE0;
  --ink:#22302B;
  --ink-soft:#516158;
  --cursor:url('../img/cursor-brain.png') 16 16, auto;
  --cursor-p:url('../img/cursor-brain.png') 16 16, pointer;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{cursor:var(--cursor);-webkit-text-size-adjust:100%}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--green-deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a,button,.btn-bloom,.panel{cursor:var(--cursor-p)}
img{max-width:100%;display:block}

/* ---------- Estructura general ---------- */
.stage{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}

/* Logo dorado — parte superior central (flota sobre la unión) */
.brand-top{
  position:absolute;top:26px;left:50%;
  transform:translateX(-50%) translateY(-14px);
  z-index:60;opacity:0;
  transition:opacity 1s ease .2s, transform 1s cubic-bezier(.2,.8,.2,1) .2s;
}
.is-loaded .brand-top{opacity:1;transform:translateX(-50%) translateY(0)}
.brand-top img{width:clamp(190px,21vw,270px);height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.18))}

/* ---------- Split ---------- */
.split{position:relative;flex:1;display:flex;min-height:0}
.split::before{ /* filo dorado en la unión */
  content:"";position:absolute;left:50%;top:8%;bottom:8%;width:1px;z-index:35;
  background:linear-gradient(180deg,transparent,var(--gold-2) 18%,var(--gold) 82%,transparent);
  opacity:.55;transform:translateX(-.5px);pointer-events:none;
}

.panel{
  position:relative;flex:1 1 50%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:clamp(120px,16vh,168px) 6% 64px;text-align:center;
  transition:flex-basis .6s ease;
}
.panel--idiomas{background:var(--cream)}
.panel--mindfulness{background:linear-gradient(158deg,var(--green) 0%,var(--green-2) 52%,var(--green-deep) 130%)}

/* Foto de fondo (oculta) + velo tintado (se revelan al hover) */
.panel__media{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.14);
  transition:opacity 1s ease, transform 1.8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
/* Encuadre de cada foto para que la persona quede visible en el panel angosto */
.panel--idiomas .panel__media{background-position:left center}
.panel--mindfulness .panel__media{background-position:center}

.panel__veil{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1s ease}
.panel--idiomas .panel__veil{background:linear-gradient(180deg,rgba(250,249,246,.80),rgba(247,242,232,.55))}
.panel--mindfulness .panel__veil{background:linear-gradient(180deg,rgba(10,85,102,.74),rgba(7,58,70,.55))}

.panel.is-active .panel__media,.panel:hover .panel__media{opacity:1;transform:scale(1)}
.panel.is-active .panel__veil,.panel:hover .panel__veil{opacity:1}

/* Contenido */
.panel__content{position:relative;z-index:3;max-width:460px;width:100%}
.panel__logo{width:clamp(70px,9vw,104px);height:auto;margin:0 auto 22px}
.panel__eyebrow{
  display:inline-block;font-weight:600;font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;margin-bottom:.7rem;
}
.panel--idiomas .panel__eyebrow{color:var(--gold-deep)}
.panel--mindfulness .panel__eyebrow{color:var(--lime)}
.panel__title{
  font-family:'Cormorant',Georgia,serif;font-weight:600;
  font-size:clamp(2.7rem,6vw,4.6rem);line-height:1;margin:0 0 .28em;letter-spacing:.01em;
}
.panel--idiomas .panel__title{color:var(--ink)}
.panel--mindfulness .panel__title{color:#fff}
.panel__text{
  font-weight:300;font-size:clamp(.95rem,1.25vw,1.08rem);line-height:1.75;margin:0 auto;
  max-width:36ch;
}
.panel--idiomas .panel__text{color:var(--ink-soft)}
.panel--mindfulness .panel__text{color:rgba(255,255,255,.9)}

/* Botón */
.btn-bloom{
  display:inline-block;margin-top:28px;padding:14px 36px;
  font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  border:1.5px solid;border-radius:50px;text-decoration:none;background:transparent;
  transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s ease;
}
.btn-bloom:hover{transform:translateY(-2px)}
.panel--idiomas .btn-bloom{color:var(--ink);border-color:var(--gold)}
.panel--idiomas .btn-bloom:hover{background:var(--gold);color:#fff}
.panel--mindfulness .btn-bloom{color:#fff;border-color:var(--lime)}
.panel--mindfulness .btn-bloom:hover{background:var(--lime);color:var(--green-deep);border-color:var(--lime)}

/* ---------- Footer ---------- */
.footer{
  position:relative;z-index:20;background:var(--green-deep);color:rgba(255,255,255,.82);
  padding:16px 22px;font-size:.78rem;font-weight:300;line-height:1.6;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;text-align:center;
}
.footer a{color:#fff;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px;transition:color .3s}
.footer a:hover{color:var(--gold-2)}
.footer .sep{opacity:.35}
.footer .footer__addr{opacity:.9}

/* ---------- Animación de entrada del contenido ---------- */
.panel__content>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.is-loaded .panel__content>*{opacity:1;transform:none}
.is-loaded .panel__content>*:nth-child(1){transition-delay:.25s}
.is-loaded .panel__content>*:nth-child(2){transition-delay:.38s}
.is-loaded .panel__content>*:nth-child(3){transition-delay:.5s}
.is-loaded .panel__content>*:nth-child(4){transition-delay:.62s}
.is-loaded .panel__content>*:nth-child(5){transition-delay:.74s}

/* ---------- Dispositivos táctiles: mostrar fotos tenues ---------- */
.is-touch .panel__media{opacity:.9;transform:scale(1)}
.is-touch .panel__veil{opacity:1}

/* ---------- Responsivo ---------- */
@media (max-width:768px){
  .split{flex-direction:column}
  .split::before{display:none}
  .panel{flex:1 1 auto;min-height:56vh;padding:118px 9% 52px}
  .panel--mindfulness{min-height:56vh}
  .brand-top{top:18px}
}
@media (max-width:768px){
  .panel--idiomas{padding-top:150px}
}
@media (max-width:420px){
  .panel__title{font-size:2.5rem}
  .footer{font-size:.72rem;gap:6px 14px}
  .brand-top img{width:168px}
}

/* Respeto por usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .panel__media{transform:none}
}