:root{
  --bg:#0b132b; --panel:#1c2541; --accent:#5bc0be; --accent-2:#6fffe9; --text:#e6edf3; --muted:#9aa4b2;
  --card-w: 220px; --card-h: 320px; --radius:16px; --gap:14px; --shadow:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,Arial; color:var(--text); background:radial-gradient(1100px 70% at 50% 0%, #15203b 0%, var(--bg) 45%) fixed;}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* header fijo */
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(11,19,43,.95), rgba(11,19,43,.8)); border-bottom:1px solid #223055; backdrop-filter:blur(6px)}
.header-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.brand-logo{width:100px;height:100px;object-fit:contain}
.brand-text{font-weight:700}

/* Ajuste responsivo para el logo en pantallas pequeñas */
@media (max-width:480px){
  .brand-logo{width:32px;height:32px}
}
.main-nav{display:flex;gap:16px}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.main-nav a:hover{border-color:#2a355a; background:#0f1a36}

/* hero */
.hero{position:relative;min-height:46vh;display:grid;place-items:center;border-bottom:1px solid #223055}
.hero-img{width:100%;height:46vh;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}
.hero-overlay h1{margin:0 0 8px 0;font-size:clamp(28px,5vw,42px)}
.hero-overlay p{margin:0;color:var(--muted)}

/* secciones */
.section{padding:40px 0}
.section-head{display:flex;gap:16px;align-items:end;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}
.section h2{margin:0 0 10px 0;font-size:24px}

/* botones */
.btn{appearance:none;cursor:pointer;border:1px solid #2a355a;background:#0f1a36;color:var(--text);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow) inset 0 0 0 transparent;transition:transform .15s ease, background-color .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:linear-gradient(180deg,#1aa3a0,#178f8c);border-color:#147f7c}

/* infinite stream */
.infinite-stream{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.card-note{background:var(--panel);border:1px solid #293457;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.card-note h3{margin:0 0 6px 0;font-size:16px}
.card-note p{margin:0;color:var(--muted)}
.stream-sentinel{height:1px}

/* grid mazo IA */
.grid-ia{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.flip{width:var(--card-w);height:var(--card-h);perspective:1000px;margin:auto}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}
.flip:hover .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;border:1px solid #1f2c4f;background:#0e1a33;box-shadow:var(--shadow);backface-visibility:hidden}
.flip-face.back{transform:rotateY(180deg);display:grid;grid-template-rows:auto 1fr;align-items:start}
.flip-face img{width:100%;height:100%;object-fit:cover}
.flip-meta{padding:10px}
.flip-meta h3{margin:0 0 6px 0;font-size:16px}
.flip-meta p{margin:0;color:var(--muted);font-size:14px}

/* mazo problemas */
.simulation-info{
  background:var(--panel);
  border:1px solid #293457;
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:20px;
  color:var(--muted);
  font-size:14px;
}
.simulation-info p{margin:0}

.prob-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start}
@media (max-width:900px){.prob-board{grid-template-columns:1fr}}
.pile h3{margin:0 0 8px 0;color:var(--muted);text-align:center}
.stack{position:relative;min-height:calc(var(--card-h) + 20px)}
.stack .card{position:absolute;left:0;top:0;transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0));}
.drawn{display:flex;flex-wrap:wrap;gap:10px;min-height:calc(var(--card-h) + 20px)}
.current{margin-top:10px;min-height:200px;display:flex;justify-content:center;align-items:center}

/* Estilos para cartas apiladas (una encima de otra) */
.drawn.stack-vertical{
  display:block;
  position:relative;
  width:140px;
  min-height:200px;
  margin:0 auto
}
.drawn.stack-vertical .card{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width:120px;
  height:auto;
  border-radius:10px
}
.drawn .card{transition:transform .28s ease, top .28s ease, left .28s ease, opacity .2s}
.moving-card{position:absolute;z-index:40;pointer-events:none;will-change:transform,top,left}

/* Overlay de texto sobre las cartas */
.card-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  padding: 10px 8px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  
  /* Centrado con flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}


.card-text-overlay-mini {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  padding: 4px 3px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  
  /* Centrado con flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Animación de carta girando */
@keyframes cardFlip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(90deg) scale(1.1); }
  100% { transform: rotateY(0deg) scale(1); }
}

.card--flip {
  animation: cardFlip 0.3s ease-in-out;
  border: 3px solid var(--accent);
  box-shadow: 0 0 20px rgba(91, 192, 190, 0.6), var(--shadow);
}

/* Carta seleccionada con efecto destacado */
.card-selected {
  border: 2px solid var(--accent-2) !important;
  box-shadow: 0 0 15px rgba(111, 255, 233, 0.7) !important;
  transform: scale(1.05) translateY(-4px) !important;
  z-index: 200 !important;
}

/* Carta elegida final */
.card-chosen {
  animation: cardChosen 0.5s ease-out;
  border: 3px solid var(--accent-2);
  box-shadow: 0 0 25px rgba(111, 255, 233, 0.8), var(--shadow);
}

@keyframes cardChosen {
  0% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* contenedor para la carta elegida (abajo, centrada) */
.chosen-container{
  margin-top:30px;
  text-align:center
}
.chosen-container h3{
  margin:0 0 12px 0;
  color:var(--accent-2);
  font-size:20px
}
.chosen{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(var(--card-h) + 20px)
}
.chosen .card{
  width:var(--card-w);
  height:var(--card-h);
  max-width:220px;
  position:relative
}
.chosen .card img{object-fit:cover}

/* carta base reutilizable */
.card{
  width:var(--card-w);
  height:var(--card-h);
  border-radius:16px;
  overflow:hidden;
  border:1px solid #1f2c4f;
  background:#0e1a33;
  box-shadow:var(--shadow);
  position:relative
}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card--mini{width:80px;height:120px;border-radius:10px}

.site-footer{
  border-top:1px solid #223055;
  color:var(--muted);
  padding:32px 0 24px 0;
  background:linear-gradient(180deg, transparent, rgba(11,19,43,0.5));
  margin-top:40px
}
.footer-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:20px;
  text-align:left
}
@media (max-width:768px){
  .footer-content{
    grid-template-columns:1fr;
    text-align:center;
    gap:24px
  }
}
.footer-auspicio{
  text-align:center;
  margin-bottom:16px;
  font-size:14px;
  background-color: #fff;
}







.footer-main p,
.footer-info p{
  margin:4px 0
}
.footer-brand{
  font-size:20px;
  font-weight:700;
  color:var(--accent-2);
  margin-bottom:8px !important
}
.footer-copyright{
  font-size:14px;
  color:var(--text)
}
.footer-info{
  text-align:right
}
@media (max-width:768px){
  .footer-info{text-align:center}
}
.footer-institution{
  font-weight:600;
  color:var(--accent);
  font-size:15px
}
.footer-program{
  font-size:14px;
  color:var(--text)
}
.footer-purpose{
  font-size:13px;
  color:var(--muted);
  font-style:italic
}
.footer-bottom{
  border-top:1px solid #1a2642;
  padding-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:12px
}

/* Botón de audio (esquina superior derecha) */
.audio-toggle{
  position:fixed;
  top:12px;
  right:16px;
  z-index:9999;
  background:rgba(255,255,255,0.95);
  border:1px solid #e1e6ef;
  color:#0b132b;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  box-shadow:0 6px 18px rgba(11,19,43,0.25);
}
.audio-toggle[aria-pressed="true"]{ background:linear-gradient(180deg,#f0f6ff,#e6eefb); }
.audio-toggle:focus{ outline:3px solid rgba(91,192,190,0.25); }


/* Marquee / continuous logos (adaptado al proyecto)
   This replaces the generic snippet previously appended. It only targets
   .scroll (legacy) and the project's slider elements (.slider-viewport, .slider-track).
   No HTML files are modified. Images keep their transparency (no background) and
   the viewport has a 70% fade at both edges toward the interior. */

.scroll,
.slider-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
  background: transparent; /* preserve PNG transparency */
}

/* Inner track: for legacy .scroll the inner element is expected to be a div; for the slider use .slider-track */
.scroll > div,
.slider-viewport > .slider-track {
  display: flex;
  gap: 18px;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

/* Animation: moves content left continuously. Duration can be tuned. */
.scroll > div { animation: marquee var(--marq-duration, 30s) linear infinite; }
.slider-viewport > .slider-track { animation: marquee var(--marq-duration, 24s) linear infinite; }

@keyframes marquee {
  0% { transform: translateX(0); }
  /* --marq-shift is set by JS to an exact negative pixel value (e.g. -1200px).
     Fallback to -50% when the variable is not available. */
  100% { transform: translateX(var(--marq-shift, -50%)); }
}

/* Pause on hover/focus to allow users to inspect logos */
.scroll:hover > div,
.slider-viewport:hover > .slider-track,
.slider-viewport:focus > .slider-track {
  animation-play-state: paused;
}

/* Images in these carousels: preserve transparency, do not apply grayscale */
.scroll img,
.slider-viewport img,
.slider-track img {
  height: 56px; /* consistent height */
  width: auto;
  display: block;
  filter: none;
  background: transparent;
}

/* If the track does not contain duplicated content to loop seamlessly,
   the animation still provides movement; duplicating nodes for infinite
   seamless loops requires HTML changes, which you requested to avoid. */

/* Fade overlays at the edges: 70% opacity -> transparent toward interior.
   We use pseudo-elements so the images underneath keep their transparency. */
.scroll::before, .slider-viewport::before,
.scroll::after, .slider-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
  z-index: 12;
}
.scroll::before, .slider-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 60%);
}
.scroll::after, .slider-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 60%);
}

/* Responsive tweak */
@media (max-width: 600px) {
  .scroll img, .slider-viewport img, .slider-track img { height: 42px; }
  .scroll::before, .slider-viewport::before, .scroll::after, .slider-viewport::after { width: 22%; }
}

/* End of marquee/slider CSS adaptation */