/* === Variables base === */
:root {
  --color-textN: #fff;
  --color-buttonN: #757b87;
  --color-subtleN: #98a1b0;
  --color-input-bgN: #6674a3;
  --color-bg-cardN: #1b2b5a;
  --color-bgN: #12142D;
  --color-accentN: #feac00;
  --color-accent-hoverN: #FFEA00;
  --mutedN: #FF0026;

  --color-text: #ffffff;
  --color-subtle: #98a1b0;
  --color-input-bg: #616f8c;
  --color-bg-card: #2e364d;
  --color-bg: #09101F;
  --color-accent: #feac00;
  --color-accent-hover: #ffed03;
  --muted:#fe2412;



  --glass: rgba(0,0,0,.35);
  --overlay: rgba(128,128,128,.7);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --gap: 18px;
}

/* === Base === */
* { box-sizing: border-box; }
html, body {

  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  justify-content: center;
  align-items: center;

}
h1, h2, h3 { color: var(--color-accent); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container, .course-container { max-width: 900px; margin: auto; padding: 2rem; }


.login-container {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 100%;
            max-width: 400px;
        }


.message {
            text-align: center;
            margin-bottom: 1rem;
            color: var(--muted);
        }

/* === Botones === */
button, .button, input[type="submit"] {
  background: var(--color-accent);
  color:var(--color-bg);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 1s;
}

button:hover, .button:hover, input[type="submit"]:hover { background: var(--color-accent-hover); }

/* === Formularios === */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: bold; }
input, select, textarea {
  width: 100%; padding: 0.5rem;
  border: none; border-radius: 6px;
  background: var(--color-input-bg); color: var(--color-text);
}

/* === Navegación / Progreso === */
.navigation { text-align: center; margin: 1rem 0; }
.progress { text-align: center; margin-bottom: 1rem; font-size: 1rem; color: #ccc; }
.module-selector { display: inline-block; justify-content: center; padding:0px; text-align:center;}
.module-selector button { margin:5px; justify-content: center; padding: 0.5rem 0.8rem; gap:0px;}
.module-selector button.active { background: var(--color-accent); margin:5px;}

/* === Slides === */
.slide {
  display: none;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 2rem; margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity 0.4s;
}
.slide.active { display: block; opacity: 1; }

.survey-container { opacity: 0; transition: opacity 0.4s; }
.survey-container.show { opacity: 1; }

/* === Timeline === */
.timeline { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 1rem; }
.timeline-item {
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 50%; background: #444; color: #fff;
  text-align: center; font-size: 0.8rem; cursor: pointer;
  transition: background 0.3s;
}
.timeline-item.completed { background: #28a745; }
.timeline-item.active { background: var(--color-accent); color: #000; }
.timeline-item:hover { background: #666; }

/* === Summary / Encuestas === */
.summary-container {
  max-width: 900px; margin: auto; padding: 2rem;
  background: rgba(255,255,255,0.05); border-radius: var(--radius);
}
.progress-bar { background: #333; border-radius: 8px; overflow: hidden; height: 20px; margin: 1rem 0; }
.progress-fill { background: var(--color-accent); height: 100%; transition: width 0.4s; }
.encuesta { background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.encuesta h3 { color: #00d4ff; margin-bottom: 0.5rem; }

/* === Catálogo / Bookstore === */
#bookstore-wrapper { display:block; overflow-y: visible; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; text-align:center;}
.section { min-width:100%; height:100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y: visible;}

/* Intro */
.intro { background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65)), url('img/bookstore_cover.jpg') center/cover no-repeat; }
.intro-inner { max-width:920px; text-align:center; padding:24px; backdrop-filter: blur(2px) saturate(140%); }
.intro h1 { font-size:clamp(28px,4.5vw,48px); margin-bottom: 12px; }
.intro p { color: var(--muted); font-size:clamp(15px,2.4vw,18px); margin-bottom: 20px; }
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--color-accent); color:#111; padding:12px 18px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); }

/* Catalog grid */
.catalog { background:linear-gradient(180deg,var(--color-bg),var(--color-bg-card) 60%); }
.catalog-inner { width:min(1200px,100%); margin:auto; padding:16px; overflow-y:visible; justify-items: center; }
.grid {
  display: grid;
  /* columnas que NO se estiran a 1fr; se limitan y permiten centrar el bloque */
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  gap: var(--gap);
  justify-content: center;   /* centra el conjunto de columnas */
  align-items: start;         /* opcional, evita estirado vertical */
}

.card {
  position:relative; border:1px solid var(--color-input-bg);
  border-radius: var(--radius); background: rgba(255,255,255,0.05);
  overflow:hidden; box-shadow: var(--shadow);
  width: 100%;
  max-width: 280px;   /* opcional: controla tamaño máximo */
}
.media { aspect-ratio:16/9; background:var(--color-bg-card) center/cover; position:relative; }
.media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55)); }

.badge { position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:999px; font-size:12px; background:rgba(0,0,0,.55); color:#fff; }
.badge.ok { background:rgba(38,194,129,.9); }

.title-wrap { position:absolute; left:0; right:0; bottom:0; padding:14px; display:flex; justify-content:space-between; }
.title { font-size:16px; font-weight:800; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }

.meta { display:flex; justify-content:space-between; padding:10px; color:var(--color-accent); font-size:12px; border-top:1px solid var(--color-input-bg); }

/* Responsive */
@media (max-width: 680px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .title { font-size:14px; }
  .badge { font-size:11px; padding:5px 9px; }
}


/* PayPal */
.price-line{display:flex;align-items:baseline;gap:.35rem;margin:.25rem 0 1rem}
.price-amt{font-size:2rem;font-weight:800;line-height:1}
.price-currency{color:#6b7280}