X-API-KEY: #Coloca aquí tu token privado

* { box-sizing: border-box; }

:root {
    --card-bg: #ffffff;
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
	--color-btn: blue;
}

[data-theme="dark"] {
    --card-bg: #1e1e1e;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
	--color-btn: yellow
}

[data-theme="dark"] .curso-card {
    border: 1px solid rgba(255,255,255,0.12);
}


/* Reseteo básico */
body, html {
    margin: 0;
    padding: 0;
	width: 100%;
    height: 100%;
    /* Quitamos overflow: hidden para permitir el scroll en toda la página */
}

.main-header {
    position: relative;
    display: flex;
	flex-direction: column;
	gap: 20px;
    justify-content: center;
    /* align-items: flex-end; -- Esto ya estaba bien */
    align-items: center; 
    
    min-height: 100vh; /* El encabezado ocupa toda la altura visible inicial */
    /*width: 100vw;*/
	width: 100%;
    margin-bottom: 5px;
    background-image: url('/../img/Fdo_atenuado.jpg'); /* Dirección relativa a .css */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Propiedad clave para la adaptabilidad */

    /* CAMBIO CLAVE: Usamos fixed para garantizar 100vh */
    /* position: fixed; */
    top: 0; 
    left: 0; /* Asegura que empiece desde la esquina superior izquierda */
    z-index: 10; /* Asegura que esté por encima del contenido que se desplaza */
}

/* 
 * AHORA ESTO ES FUNDAMENTAL: 
 * Como el header está "fixed" y fuera del flujo normal, 
 * necesitas un "espaciador" para que el main no empiece arriba del todo, 
 * sino debajo del área ocupada por el header.
 */
.spacer {
    height: 100vh; /* Ocupa exactamente el mismo alto que el header */
}


/* Estilo para el contenido dentro del header */
.content {
    color: rgb(10,17,97);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    text-align: center;
    padding: 10px;
    background-color: rgba(230, 230, 230, 0.8); /* paño semitransparente bajo las letras */
    border-radius: 10px; /* Bordes redondeados */
    /* Añadir márgenes si se desea separación de bordes, como hablamos antes */
    width: 80%;
    max-width: 900px;
    min-width: 280px;
    word-wrap: break-word;
    margin-bottom: 30px;
}

/* Estilo para el contenido principal desplazable */
.scroll-content {
	color: rgb(0,0,0);
	text-align: center;
    position: relative;
    /*display: flex; */
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    /* background-color: #f0f0f0; /* Fondo para que se note el scroll sobre el header */
	background-color: rgba(230, 230, 230, 0.4);    
	padding: 20px 20px;
    z-index: 5;
	gap: 20px;
	margin: 20px;
    /*width: auto;*/
}
.image-section {
    margin: 40px 0;
    text-align: center;
}

.image-section img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.img-curso {
	width: 150px;
}

.responsive-img {
    max-width: 100%; /* La imagen se adapta al ancho de su contenedor */
    height: auto; /* Mantiene la proporción */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Sección de links */
.contact-info a, 
.contact-info a:hover, 
.contact-info a:visited {
    /* Subimos el mínimo de 12px a 18px para legibilidad en móvil */
    font-size: clamp(18px, 4vw, 36px); 
    line-height: 1.4; /* Un interlineado más cómodo */
    text-decoration: none;
    word-wrap: break-word;
	
    padding: 10px;
    width: 100%; /* Asegura que use todo el ancho disponible */
    box-sizing: border-box;
}

.contact-info a:hover {
    color: rgb(0,0,255);
    text-decoration: underline;
}

.contact-info a:visited {
    color: purple; /* Mantiene el color pero ya no cambia el tamaño */
}


h2, h3, p {
    margin-bottom: 1em;
}


/*--------------------  en lugar de Tabla, utilizo Section y Card --------------------*/
.cursos-grid {
    display: grid;
    width: 100%; 
    place-items: center; 
    gap: 20px;
    margin-top: 2rem;
}

.curso-card {
    display: grid;
    /* Definimos dos columnas: una de 200px para la imagen y el resto para info */
    /* O puedes usar 1fr 1fr para que sean iguales */
    /*grid-template-columns: 200px 1fr; */
	grid-template-columns: 2fr 1.5fr;  /* ≈ 20% más ancho para la imagen */
    background: #d1d1d1;
    width: 90%;
    max-width: 400px; /* Recomendado para que no sea infinita tenía 800*/
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s ease;
}

.curso-card.etapa-e1 { background: rgba(255, 255, 255, 0.06); }
.curso-card.etapa-e2 { background: rgba(0, 255, 120, 0.08); } /* ejemplo */

.curso-img {
  position: relative;
  padding: 10px;
  height: 220px;
  display: flex;
  align-items: center;
  background: #d1d1d1;     /* fondo visible con contain */
}

.curso-img img {
  width: 100%;
  height: 100%;           /* llena la altura de la columna */
  object-fit: contain;      /* Se ajusta a la columna sin recortes de la img */
  display: block;
  border-radius: 12px;     /* 👈 el redondeo va acá */
  justify-content: center;
  overflow: hidden;        /* 👈 esto es CLAVE */
  background: #d1d1d1;     /* fondo visible con contain */
}

.badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.4px;
  background:#111;
  color:#fff;
  opacity:.92;
}

.badge-e1 { background:#2b6cb0; } /* azul */
.badge-e2 { background:#2f855a; } /* verde */

.etapa-e1 { outline: 2px solid rgba(43,108,176,.25); }
.etapa-e2 { outline: 2px solid rgba(47,133,90,.25); }

/* Responsivo: Si la pantalla es menos de 640px, se apilan */
@media (max-width: 640px) {
    .curso-card {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
    }
	.curso-img img {
    height: auto;       /* vuelve a comportamiento natural en móvil */
	}
}

/* imagen del Flyer ampliada en un modal ------------*/
.hidden { display:none; }

.flyer-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}

.flyer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.flyer-panel{
  position:relative;
  width:min(980px, 100%);
  height:min(92vh, 900px);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.flyer-close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:rgba(0,0,0,.08);
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:22px;
  cursor:pointer;
}

.flyer-toolbar{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:14px;
}

.flyer-toolbar a{
  color:#1a56db;
  text-decoration:none;
}

.flyer-body{
  padding:14px;
  overflow:auto;              /* SCROLL */
  -webkit-overflow-scrolling: touch;
  height:100%;
  background:#fafafa;
}

#flyer-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

.curso-info {
  padding: 12px;              /* espacio interno en toda la columna derecha */
  display: flex;
  flex-direction: column;
  gap: 5px;                  /* separa texto */
  background: #d1d1d1;
}
.curso-info h3 { margin: 0 0 6px; }
.curso-info p  { margin: 0; line-height: 1.35; }  /* controla el interlineado */

.curso-info button.btn {
  margin-top: 12px;           /* separa del contenido anterior */
}

/*
.curso-info button.btn-primary {
  align-self: center;     /* o center si querés *//*
}
*/

.curso-info button.btn-primary {
  margin-top: auto;           /* empuja el botón al fondo */
  margin-bottom: 6px;         /* aire con el borde inferior */
  align-self: center;         /* o center si querés */
}



/* ---------------  BOTON -----------------------------------------*/
.btn-curso {
    margin-top: auto;
    text-align: center;
    padding: .6rem;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s ease;
}

.btn-curso:hover {
    background: var(--accent-hover);
}

.btn {
    padding: 6px 10px;
    text-decoration: none;
    color: var(--color-btn);
    border-radius: 4px;
	margin-bottom: 5px; /* Crea el espacio de 5px por fuera del botón */	
}

.btn btn-primary {
	background: #007bff;
    color: var(--color-btn);
}

.no-disponible {
    color: #999;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: #999;
    padding: 25px;
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

#modal-feedback {
    margin-top: 15px;
    font-weight: bold;
}