*{box-sizing:border-box}html,body{margin:0;background:#fff;font-family:Arial,sans-serif}
body{overflow-x:hidden}.page{display:none;position:relative;margin:0 auto;width:min(100vw,1512px)}
.page.active{display:block}.art{display:block;width:100%;height:auto}
button{position:absolute;padding:0;margin:0;border:0;outline:0;background:transparent;cursor:pointer}
.tall{aspect-ratio:1512/3072}.standard{aspect-ratio:1512/1024}.about{aspect-ratio:1512/1476}

/* Inicio: coordinates taken from the 1512×3072 Figma frame */
#search{position:absolute;left:36.3%;top:2.38%;width:50.6%;height:2.15%;border:0;outline:0;background:transparent;
font-size:clamp(12px,2vw,36px);color:#777}
.nav{left:0;width:6.8%;height:3.1%}.homeNav{top:7.7%}.contentsNav{top:11.7%}.aboutNav{top:15.7%}
.card{width:37.8%;height:9.2%;border-radius:45px}
#home .fq{left:8.6%;top:39.8%}#home .geo{left:51.7%;top:39.8%}
#home .hist{left:8.6%;top:53.0%}#home .math{left:51.5%;top:53.0%}
.contentCard:hover{box-shadow:0 0 22px 8px rgba(255,255,255,.96),0 0 58px 20px rgba(255,255,255,.55)}

/* Datos: exact frame in Inicio: x101 y2224, 1318×337 */
#facts{position:absolute;left:6.680%;top:72.396%;width:87.169%;aspect-ratio:1318/337}
.fact{position:absolute;inset:0;width:100%;height:100%;display:none}
.fact.active{display:block}
#factPrev,#factNext{top:0;width:11%;height:100%;z-index:4}
#factPrev{left:0}#factNext{right:0}

/* Contenidos */
#contents .back,.activity .back,.about .back{left:1.5%;top:4.4%;width:31%;height:14%}
.contentCard{width:37.9%;height:27.5%;border-radius:42px}
#contents .fq{left:4.75%;top:26.75%}#contents .geo{left:57.15%;top:26.75%}
#contents .hist{left:4.75%;top:59.4%}#contents .math{left:56.9%;top:59.4%}

/* Exact placement measured from the user's prototype video:
   external activity begins below the Figma title block and extends into the illustration,
   leaving the lower illustrated strip visible. */
.activity iframe{position:absolute;left:9.46%;top:24.12%;width:89.29%;height:65.04%;
border:0;outline:0;background:white;z-index:2}
.activity .back{z-index:5}
@media(max-width:700px){#search{font-size:14px}.card,.contentCard{border-radius:20px}}

/* Correcciones finales contrastadas con la grabación/prototipo. */
#home{background:#FCFAE4}


/* Franja móvil del prototipo. La capitalización se conserva exactamente. */
.marquee{position:absolute;left:0;top:26.37%;width:100%;height:4.55%;overflow:hidden;background:#fff;z-index:3;display:flex;align-items:center}
.marqueeTrack{display:flex;width:max-content;white-space:nowrap;will-change:transform;animation:randomMarquee 15s linear infinite;color:#F36B21;font:400 clamp(28px,5.4vw,82px)/1 Arial,sans-serif}
.marqueeTrack span{display:block;flex:none}
@keyframes randomMarquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* Un solo dato visible a la vez, incluso durante el cambio. */
#facts .fact{visibility:hidden;opacity:0;display:block;pointer-events:none}
#facts .fact.active{visibility:visible;opacity:1;z-index:2}

/* Actividades: debajo del título y hasta antes de la ilustración inferior. */
.activity iframe{left:0;top:18.0%;width:100%;height:64.0%;margin:0;border:0;outline:0;box-shadow:none;background:#fff;z-index:2}

/* Ajustes puntuales según la grabación y la captura del 01/10. */
/* La franja del SVG ocupa exactamente y=826..991: la cubrimos completa para que
   nunca se vea el texto estático por debajo del texto animado. */
.marquee{
  top:26.8880208333%;
  height:5.37109375%;
  background:#fff;
  overflow:hidden;
  align-items:center;
}
.marqueeTrack{
  min-width:max-content;
  font-size:clamp(30px,5.25vw,80px);
  line-height:1;
  animation-duration:16s;
}
.marqueeTrack span{padding:0 .12em}


/* Las cuatro actividades usan exactamente el mismo marco que Historia. */
.activity iframe{
  left:9.46%;
  top:24.12%;
  width:89.29%;
  height:65.04%;
  margin:0;
  border:0;
  outline:0;
  box-shadow:none;
  background:#fff;
}

/* ===== Tarjetas de Inicio =====
   Cada tarjeta es el SVG completo exportado de Figma (sin recrear). El brillo es
   Glow.png, detrás de la tarjeta. En el PNG el anillo de luz mide 509x243 px y está
   centrado en (280.5,140) dentro de 569x280; se escala proporcionalmente (x1.12) para
   que el anillo quede escondido justo en el borde de la tarjeta y sólo asome la luz
   difusa hacia afuera. Los bordes del PNG no llegan a alfa 0, así que se difuminan con
   una máscara para que no se vea el rectángulo de la imagen. */
#home .card{overflow:visible;border-radius:0;z-index:4;isolation:isolate}
#home .card::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  left:-5.21%;top:-6%;width:112%;height:112%;
  background:url("assets/Glow.png") 0 0/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-composite:intersect;
}
#home .card img{position:absolute;display:block;max-width:none;pointer-events:none;z-index:1}
/* Historia y Matemática: export 569x280 = tamaño exacto de la tarjeta. */
#home .hist img,#home .math img{left:0;top:0;width:100%;height:100%}
/* Fisicoquímica y Geografía: export 600x300; la tarjeta empieza 20 px más abajo. */
#home .fq img,#home .geo img{width:105.45%;height:auto;left:0;top:-7.14%}

/* Footer de Inicio: dos zonas independientes y sin solaparse, una por cada texto
   dibujado en inicio.svg (Actividades y=2939..2967, Sobre Random y=2988..3016). */
#home .footerLink{position:absolute;left:16.2%;width:18.85%;z-index:8;background:transparent}
#home .footerActivities{top:95.378%;height:1.497%}
#home .footerAbout{top:96.973%;height:1.465%}

/* Sobre Random: buscador alineado con el inicio del bloque de texto principal (x=270). */
#about #aboutSearch{
  position:absolute;left:17.857%;top:2.2%;width:72.222%;height:4.1%;
  border:0;outline:0;padding:0 2.2% 0 4.6%;z-index:5;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") 1.8% 50%/auto 52% no-repeat;
  border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18);
  font:400 clamp(14px,2vw,30px) Arial,sans-serif;color:#777;
}
/* Video: ocupa el lugar de la pieza original (la esfera de cristal del video coincide con
   el círculo c(477,1038) r140 del SVG). Empieza en y=886, debajo del último bloque de
   texto (termina en y=884). */
#about .aboutVideo{
  position:absolute;left:1.19%;top:60.03%;width:42.2%;height:auto;
  aspect-ratio:378/348;object-fit:contain;background:transparent;
  border:0;outline:0;display:block;z-index:2;
}

/* ===== Ajustes de pantalla =====
   1) Actividades: la página completa se escala para entrar en la altura de la ventana
      (las cuatro tarjetas quedan visibles sin scrollear). Se recorta sólo el borde inferior
      del fondo, que no tiene contenido. Los costados se completan con el color del fondo. */
html:has(#contents.active),body:has(#contents.active){height:100%;overflow:hidden}
body:has(#contents.active){
  --ah:calc(min(100vw,164vh,1512px)*1024/1512);
  background:
    linear-gradient(to bottom,#41cd7b 0,#46b45c calc(var(--ah)*.30),#b66efa calc(var(--ah)*.36),#9b70eb var(--ah)) left top/50% 100% no-repeat,
    linear-gradient(to bottom,#a770f2 0,#9971eb calc(var(--ah)*.28),#f49a53 calc(var(--ah)*.33),#f49a53 var(--ah)) right top/50% 100% no-repeat,
    #f49a53;
}
#contents{width:min(100vw,164vh,1512px)}
#contents .art{width:100%}

/* 2) Buscador de Inicio: el texto escrito empieza después de la lupa, usa la misma
      tipografía que el placeholder del diseño y, al escribir, tapa el texto dibujado. */
#search{
  height:1.9%;padding:0 3% 0 5.6%;font:400 clamp(14px,2.3vw,34px) Arial,sans-serif;color:#555;
  border-radius:999px;caret-color:#F36B21;
}
#search:focus,#search:not(:placeholder-shown){
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") 5.4% 50%/auto 58% no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}