:root{
  --vino:#800020;
  --vino-600:#6a001a;
  --gris-100:#f6f7f9;
  --gris-200:#eef0f3;
  --gris-600:#5a5f6d;
  --negro:#1b1b1f;
  --acento:#0c83e7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--negro);
  background:#fff;
  line-height:1.45;
}
img{max-width:100%;height:auto;display:block}

.container{width:min(1100px,92%);margin-inline:auto}

.flex-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Top header */
/* --- Top Header --- */
.top-header {
  background: var(--vino);
  color: #fff;
  font-size: .95rem;
}

.top-header a {
  color: #fff;
  text-decoration: none;
}

.top-header .container {
  display: flex;                  /* convierte en flex */
  justify-content: space-between; /* reparte izquierda/derecha */
  align-items: center;            /* centra vertical */
  flex-wrap: wrap;                /* permite salto en pantallas pequeñas */
}

.top-header-left {
  display: flex;
  gap: 1.5rem; /* espacio entre correo y teléfono */
}

.top-header .social-list {
  display: flex;
  justify-content: space-around; /* reparte los íconos dentro de su bloque */
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-list a {
  color: #fff;
  font-size: 1.15rem;
}

/* Main header */
.main-header {
  background: #fff;
  border-bottom: 1px solid var(--gris-200);
  position: relative;
  z-index: 1000;
}

.logo-wrap img {
  height: 50px;
}

.nav-desktop {
  position: relative;
}

.menu-list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list a {
  display: inline-block;
  padding: .6rem .6rem;
  text-decoration: none;
  color: var(--negro);
  font-weight: 500;
  border-radius: .6rem;
}

.menu-list a.active,
.menu-list a:hover {
  color: #fff;
  background: var(--vino);
}

/* Botón hamburguesa (oculto en desktop) */
.nav-toggle {
  display: none;       /* oculto en escritorio */
  font-size: 1.8rem;
  background: none;
  border: 0;
  color: var(--negro);
  cursor: pointer;
  margin-left: auto;   /* lo manda al extremo derecho */
}


/* Responsive: en pantallas chicas */
@media (max-width: 768px) {
  .nav-toggle {
    display: block; /* aparece solo en móvil */
  }

  .menu-list {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 60px;
    right: 20px; /* lo mantiene pegado a la derecha */
    padding: 1rem;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .menu-list.show {
    display: flex;
  }
}



/* Hero */
.hero{background:linear-gradient(180deg,#fff,var(--gris-100));padding:2.5rem 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-copy h1{font-size:clamp(1.6rem,2.5vw,2.4rem);margin:.2rem 0 1rem}
.hero-copy p{color:var(--gris-600);margin:.2rem 0 1.4rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;border-radius:.7rem;padding:.8rem 1rem;text-decoration:none;font-weight:600}
.btn.primary{background:var(--vino);color:#fff}
.btn.outline{border:2px solid var(--vino);color:var(--vino)}
.btn.small{padding:.55rem .8rem;font-size:.95rem}
.hero-media .hero-placeholder{min-height:220px;border-radius:1rem;background:#eee;display:grid;place-items:center;font-weight:800;color:#999}

/* Requisitos */
.requirements{padding:2.5rem 0;background:#fff}
.requirements h2{margin:0 0 1rem}
.cols-2{columns:2;column-gap:2rem;margin:0;padding:0;list-style:none}
.cols-2 li{break-inside:avoid;margin:0 0 .5rem}
.note{margin-top:1rem;color:var(--negro);background:#fff3f5;border-left:4px solid var(--vino);padding:.8rem;border-radius:.5rem}

/* Galería uniforme */
.gallery{padding:2.5rem 0;background:var(--gris-100)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.g-item{aspect-ratio:4/3;border-radius:12px;background:#ddd}

/* Cursos vigentes */
.cursos-container{display:flex;gap:20px;padding:2rem 0}
.menu-especialidades{flex:0 0 250px;background:#fafafa;border:1px solid var(--gris-200);border-radius:10px;padding:14px;height:fit-content;position:sticky;top:84px}
.menu-especialidades h2{margin:.4rem 0 10px;color:var(--vino)}
.menu-especialidades ul{list-style:none;padding:0;margin:0}
.menu-especialidades a{display:block;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--negro)}
.menu-especialidades a:hover{background:var(--vino);color:#fff}
.sidebar-specialties{max-height:80vh;overflow:auto;padding-right:.4rem}
.sidebar-specialties::-webkit-scrollbar{width:6px}
.sidebar-specialties::-webkit-scrollbar-thumb{background:var(--acento);border-radius:3px}

.cursos-content{flex:1;min-width:0}
.page-header h1,.intro-cursos h1{margin:0 0 .4rem}
.intro-cursos{margin-bottom:1rem}

.bloque-especialidad{margin:2rem 0}
.bloque-especialidad h2{display:flex;align-items:center;gap:.6rem;color:var(--vino);margin:0 0 .7rem}
.grid-cursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.curso-card{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:16px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.06);transition:transform .2s}
.curso-card:hover{transform:translateY(-4px)}
.icono-curso{font-size:38px;color:var(--vino)}
.curso-card h3{margin:.4rem 0 .4rem}
.curso-card p{margin:.2rem 0 .6rem;color:var(--gris-600)}
.btn-curso{display:inline-block;padding:.55rem .9rem;border-radius:8px;background:var(--vino);color:#fff;text-decoration:none;font-weight:600}
.back-to-top{display:inline-block;margin-top:.6rem;color:var(--acento);text-decoration:none}

/* Especialidades grid */
.grid-especialidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:1.4rem 0}
.esp-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;padding:16px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.esp-icon{font-size:36px;color:var(--vino);margin-bottom:.4rem}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;padding:1rem 0}
.about-card{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:16px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:1rem 0}
.contact-form label{display:block;margin-bottom:.7rem;font-weight:500}
.contact-form input,.contact-form textarea{width:100%;padding:.7rem;border:1px solid var(--gris-200);border-radius:10px;font:inherit}
.contact-form button{margin-top:.4rem}
.contact-info p{margin:.4rem 0}
.map-embed{border-radius:12px;overflow:hidden}
.map-embed iframe{width:100%;height:300px;border:0}

/* Tabla Bolsa */
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:10px}
.tabla-bolsa{border-collapse:collapse;width:100%;min-width:720px}
.tabla-bolsa th,.tabla-bolsa td{border:1px solid #ccc;padding:8px;text-align:center;white-space:nowrap}
.tabla-bolsa thead th{background:#f3f4f6}

/* Footer */
.page-footer{background:var(--vino);color:#fff;margin-top:2rem}
.footer-first-section{padding:1.6rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 2fr;gap:20px}
.page-footer a{color:#fff}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:.3rem 0}
.footer-social{margin-top:.6rem}
.footer-last{background:var(--vino-600);padding:.6rem 0;text-align:center}

/* Responsive */
@media (max-width: 992px){
  .hero-inner{grid-template-columns:1fr}
  .menu-especialidades{position:relative;top:auto}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .cols-2{columns:1}
  .menu-list{display:none;flex-direction:column;gap:0;background:#fff;position:absolute;right:0;top:100%;border:1px solid var(--gris-200);padding:.4rem;border-radius:.8rem;min-width:230px}
  .nav-toggle{display:inline-grid;place-items:center}
  .menu-list.open{display:flex}
  .footer-grid{grid-template-columns:1fr}
}



/* === ADICIONES: Banner y Carrusel de Especialidades (añadido por ChatGPT) === */
/* Banner único - reemplazar imagen images/banner.jpg por tu imagen 1980x430 */
.main-banner{padding:16px 0}
.main-banner img{width:100%;height:auto;border-radius:10px;display:block}

/* Carrusel de especialidades (horiz. scroll con flechas)*/
/* Carrusel de especialidades (horiz. scroll con flechas) */
.carrusel-wrapper {
  padding: 28px 0;
  position: relative; /* necesario para posicionar flechas */
}

.carrusel-wrapper h2 {
  text-align: center;
  color: var(--vino);
  margin-bottom: 12px;
}

.carrusel-container {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /* efecto de encaje */
}

.card-espec {
  flex: 0 0 300px; /* ancho de cada tarjeta */
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  scroll-snap-align: start;
}

.card-espec h3 {
  color: var(--vino);
  margin: .6rem 0;
}

.carrusel-controls {
  text-align: center;
  margin-bottom: 8px;
}

.carrusel-controls .btn {
  margin: 0 .25rem;
  padding: .45rem .7rem;
  border-radius: .45rem;
}

/* Flechas flotantes a los lados */
.carrusel-prev, 
.carrusel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(128, 0, 32, 0.9); /* vino con opacidad */
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  border: none;
  font-size: 22px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.carrusel-prev:hover,
.carrusel-next:hover {
  background: rgba(128, 0, 32, 1); /* más intenso al pasar mouse */
}

.carrusel-prev { left: 10px; }
.carrusel-next { right: 10px; }

/* Quitar barra fea en móviles */
.carrusel-container::-webkit-scrollbar {
  display: none;
}

/* Responsivo */
@media (max-width: 720px) {
  .card-espec {
    flex: 0 0 85%; /* ocupa casi toda la pantalla */
    max-width: 420px;
  }
}

/* === FIN ADICIONES === */