/* styles.css - Lean Canvas educativo */
* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; background:#f4f7fb; color:#222; }
header { background: #2d89ef; color:white; padding:18px 16px; position:relative; }
header h1 { margin:0; font-size:22px; }
.menu-toggle { display:none; position:absolute; right:16px; top:16px; font-size:24px; cursor:pointer; color:white; }
nav ul { list-style:none; margin:10px 0 0; padding:0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
nav a { color:white; text-decoration:none; background: #2d89ef; padding:8px 12px; border-radius:8px; font-weight:600; }
nav a:hover { background:#063e7a; }

main { padding:24px; max-width:1100px; margin:18px auto; }


.intro { text-align:left; background:white; padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(15,30,60,0.08); }
.intro h2 { margin-top:0; }
.intro p { line-height:1.6; }

/* parametros para la tabulación*/
pre { line-height:1.6; margin-top:0; font-size:15px; }
/* Ejemplo básico de CSS para la etiqueta pre */
pre {
  overflow-x: auto; /* Permite desplazar horizontalmente si el contenido es muy ancho */
  white-space: pre-wrap; /* Ajusta el texto a la siguiente línea si es necesario */
  word-wrap: break-word; /* Asegura que las palabras largas no desborden */
}

/* Carrusel */
.carrusel { margin-top:18px; position:relative; overflow:hidden; border-radius:10px; box-shadow:0 8px 22px rgba(10,20,40,0.08); }
.slides { display:flex; transition: transform 0.6s ease; }
.slide { min-width:100%; display:flex; align-items:center; justify-content:center; background:#000; color:white; padding:12px; }
.slide img, .slide video { width:100%; max-height:420px; object-fit:cover; border-radius:8px; }

.carrusel .prev, .carrusel .next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.45); border:none; color:white; padding:10px 14px; border-radius:50%; cursor:pointer; }
.carrusel .prev { left:12px; } .carrusel .next { right:12px; }

/* Page content cards */
.card { background:white; padding:18px; margin-top:18px; border-radius:10px; box-shadow:0 6px 18px rgba(10,20,40,0.06); }
.card h3 { margin-top:0; }
.card h1 { text-align: center; }    /* alinear texto tamaño h1   */
.actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.btn { background:#2d89ef; color:white; padding:10px 12px; border-radius:8px; text-decoration:none; font-weight:600; cursor:pointer; border:none; }
.btn:hover { background:#2d89ef; }

/* parametros para las imagenes en la pagina*/
img {
  display: block; /* Permite usar márgenes automáticos para centrarla */
  margin: 0 auto; /* Centra horizontalmente y elimina margen superior/inferior */
  max-width: 100%; /* Asegura que la imagen se reduzca si es más ancha que el contenedor */
  height: auto; /* Mantiene la proporción al ajustar el ancho */
}

.narrate { background:#24a148; }
.narrate:hover { background:#1d8f3d; }

/* Animations and transitions */
.fade-in { animation:fadeIn 0.8s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }

/* Intersection observer target */
section, .card, img, h2, p { opacity:0; transform:translateY(18px); transition: all 0.6s ease; }
.visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 820px) {
  .menu-toggle { display:block; }
  nav ul { display:none; flex-direction:column; gap:8px; background:transparent; margin-top:10px; }
  nav ul.show { display:flex; background:#2d89ef; padding:10px; border-radius:8px; }
  .slide img, .slide video { max-height:260px; }
  main { padding:14px; }
}