/* ===========================
   Paleta, tipografías y base
=========================== */
:root{
  --paper:#EFECD1;
  --green:#2A3A1C;
  --lime:#C2C057;
  --teal:#67B497;
  --orange:#F28C28;
  --ink:#0F1A10;
  --radius:14px;
  --radius-pill:999px;
  --levels-offset: 42px;   
  --levels-width:  420px;  
}

/* Fuentes*/
@font-face{
  font-family:"Gotham Black";
  src: local("Gotham Black"), local("Gotham-Black");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham Ultra";
  src: local("Gotham Ultra"), local("Gotham-Ultra"), local("Gotham Black");
  font-weight:900; font-style:normal; font-display:swap;
}

html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--teal);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

/* ===========================
   Layout 50/50 
=========================== */
.fxc{
  display:grid;
  grid-template-columns: 1fr 1fr;
  height:100svh; 
}

/* IZQUIERDA */
.fxc-left{
  position:relative;
  background:var(--paper);
  overflow:hidden;
}
.left-inner{
  height:100%;
  padding:clamp(14px,2.6vw,28px);
  display:grid;
  grid-template-rows:auto auto 1fr; 
  gap:clamp(12px,2vw,18px);
}

/* Hero SVG */
.fxc-hero-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

/* Acciones (Home / Ver todo) arriba-derecha */
.top-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}
.btn{
  --btn-font: clamp(13px,1.05vw,17px);
  font-family:"Gotham Black",system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
  border:0; cursor:pointer;
  padding:10px 16px;
  background:#ddd; color:#111;
  box-shadow:0 6px 0 rgba(0,0,0,.10);
  transition:transform .18s, box-shadow .18s, filter .18s, background-color .18s;
  font-size:var(--btn-font);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-square{ border-radius:0 }
.btn-cta{  background:var(--orange); color:#fff }
.btn-home{ background:var(--green);  color:#fff }
.btn:hover,.pill:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 10px 0 rgba(0,0,0,.12);
  filter:brightness(1.03);
}

/* Bloque inferior: tigre + columna de niveles */
.left-bottom{
  position:absolute;
  left:0; right:clamp(10px,2vw,24px);
  bottom:0;                    
  height:clamp(260px,40vh,460px);
}

/* Tigre pegado izq/abajo y grande */
.fxc-illustration{
  position:absolute;
  left:0; bottom:0;
  height:150%;           
  width:auto;
  max-height:none;
  pointer-events:none; user-select:none; z-index:1;
}

/* Columna vertical de niveles a la derecha del tigre */
.fxc-levels{
  position:absolute;
  right:0;
  bottom:var(--levels-offset); 
  display:flex; flex-direction:column; gap:14px;
  width:min(var(--levels-width),46%);
  z-index:2;
}

.pill{
  font-family:"Gotham Black",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(14px,1.1vw,18px);
  letter-spacing:.3px;
  display:flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:var(--radius-pill);
  border:2px solid rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .18s, filter .18s, background-color .18s;
  cursor:pointer;
}
.pill-infantil{  background:var(--lime);  color:#223 }
.pill-primaria{  background:var(--teal);  color:#0d2a20 }
.pill-secundaria{background:var(--green); color:#fff }

/* Estrellas + destellos */
.starfield{ position:absolute; inset:0; pointer-events:none }
.star{
  position:absolute; top:100%;
  font-size:18px; opacity:0;
  transform:translate3d(0,0,0) scale(var(--s,1)) rotate(var(--r,0deg));
  animation:rise var(--dur,4s) ease-out forwards;
  color:#FFD166; text-shadow:0 0 8px rgba(242,140,40,.45);
}
@keyframes rise{
  10%{opacity:1}
  100%{transform:translate3d(0,-120%,0) scale(var(--s,1)) rotate(var(--r,0deg)); opacity:0}
}

/* Sparkles SVG */
.sparkle{
  position:absolute;
  width: clamp(14px, 1.8vw, 24px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6) rotate(0deg);
  animation: sparkle-pop var(--t,1200ms) ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,215,100,.45));
}
@keyframes sparkle-pop{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.6) rotate(0deg) }
  20%  { opacity:1; transform: translate(-50%,-50%) scale(1)   rotate(8deg) }
  70%  { opacity:1 }
  100% { opacity:0; transform: translate(-50%,-50%) scale(1.25) rotate(-6deg) }
}

/* ===========================
   DERECHA
=========================== */
.fxc-right{
  position:relative;
  background:var(--teal);
  overflow:hidden; 
  padding:clamp(18px,3vw,36px);
}

#gallery{
  height:100%;
  overflow:auto;
  padding-right:52px;     
  scrollbar-width:none;  
}
#gallery::-webkit-scrollbar{ width:0; height:0 }

/* Rail tipo BioReyes (solo desktop) */
.fxc-rail{
  position:absolute;
  top:clamp(12px,2.2vw,18px);
  right:clamp(10px,2vw,16px);
  bottom:clamp(12px,2.2vw,18px);
  width:40px;
  background:#EFECD1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  display:grid;
  grid-template-rows:40px 1fr 40px;
  align-items:center; justify-items:center;
  z-index:5;
}
.fxc-rail__btn{
  width:40px; height:40px; background:#EFECD1;
  border:0; border-radius:0; cursor:pointer; position:relative;
}
.fxc-rail__btn::before{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
}
.fxc-rail__btn--up::before   { border-bottom:14px solid #2A3A1C }
.fxc-rail__btn--down::before { border-top:   14px solid #2A3A1C }
.fxc-rail__track{
  position:relative; width:14px; height:100%; margin:6px auto; background:#EFECD1;
}
.fxc-rail__thumb{
  position:absolute; left:50%; transform:translateX(-50%);
  width:12px; min-height:38px; background:#C2C057; border-radius:0;
  cursor:grab;
}
.fxc-rail__thumb:active{ cursor:grabbing }

/* ===========================
   TARJETAS
=========================== */
.gallery{
  max-width: 780px;                        
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 3.4vw, 32px);
}
.card{
  display: grid;
  grid-template-columns: 60px 1fr;         
  align-items: stretch;
}
.curso-label{
  background:#2A3A1C;
  color:#EFECD1;
  display:flex; align-items:center; justify-content:center;
  border-radius:0;                
  padding:10px 0;
  font-family:"Gotham Ultra","Gotham Black",system-ui,sans-serif;
  font-weight:900;
  writing-mode:vertical-rl; text-orientation:mixed;
  letter-spacing: .5px;
  font-size: clamp(16px, 1.35vw, 20px);
}
.card-media{
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.card-media img{
  display: block;
  width: 100%;                              
  height: auto;
  aspect-ratio: 636 / 400;
  object-fit: cover;
}

/* ===========================
   Responsive
=========================== */

/* 900px*/
@media (max-width: 900px){
  .fxc{ grid-template-columns:1fr; height:auto }
  .left-bottom{
    position:relative; left:0; right:0;
    bottom:auto; height:auto; margin-top:10px;
  }
  .fxc-illustration{ display:none }      
  .fxc-levels{ position:relative; right:auto; bottom:auto; width:100%; gap:12px }

  /* Galería: carrusel horizontal */
  #gallery{
    height:auto;
    overflow-x:auto; overflow-y:hidden;
    padding-right:0; padding-bottom:16px;
    scrollbar-width:none;
  }
  #gallery::-webkit-scrollbar{ width:0; height:0 }

  .fxc-rail{ display:none }              

  .gallery{
    max-width:none;
    display:flex; gap: clamp(14px, 3vw, 22px);
    padding: 6px 12px;
  }
  .card{
    min-width: 86vw;                      
    grid-template-columns: 50px 1fr;
  }
  .curso-label{ font-size: clamp(14px, 3.5vw, 18px) }
}

/* 600px y abajo */
@media (max-width: 600px){
  .card{ min-width: 92vw; }
}