/* styles.css - estilo corporativo rojo/blanco limpio */

:root{
  --red: #b30000;
  --dark: #222;
  --muted: #f5f5f5;
  --card-bg: #fff;
}

/* Reset básico */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: white;
  color: var(--dark);
  line-height: 1.4;
}

/* HEADER */
.site-header { background: white; border-bottom: 4px solid var(--red); }
.header-inner { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:16px 24px; max-width:1200px; margin:0 auto; }
.logo h1 { margin:0; font-size:1.25rem; color:var(--dark); }
.logo h2 { margin:0; font-size:1rem; color:var(--red); }
.logo h4 { margin:0; font-size:.9rem; color:var(--dark); opacity:.85; }

/* top nav - alineado a la derecha */
.top-nav { display:flex; gap:18px; align-items:center; }
.top-nav a {
  color: #fff; /* texto blanco sobre fondo rojo del header area? */
  background: var(--red);
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  position:relative;
}

/* Hover: linea gruesa (usamos ::after) */
.top-nav a::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:4px;
  width:0;
  background:var(--red);
  transition: width .25s ease;
}
.top-nav a:hover::after { width:100%; }

/* Banner principal */
.banner-wrapper { max-width:1800px; margin:18px auto; padding:0 12px; }
.carousel { position:relative; width:100%; height:700px; overflow:hidden; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.carousel .slide { position:absolute; inset:0; display:none; }
.carousel .slide.active { display:block; }
.carousel img { width:100%; height:100%; object-fit:cover; display:block; }

/* prev/next */
.prev, .next { position:absolute; top:50%; transform:translateY(-50%); z-index:20; background:rgba(0,0,0,0.45); border:none; color:#fff; font-size:22px; padding:10px; border-radius:50%; cursor:pointer; }
.prev { left:18px } .next { right:18px; }
.prev:hover, .next:hover { background:rgba(0,0,0,0.65); }

/* indicators */
.indicators { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:25; }
.indicators span { display:inline-block; width:12px; height:12px; background:#ddd; border-radius:50%; margin:0 6px; cursor:pointer; }
.indicators .active { background:var(--red); }

/* LAYOUT */
.content { display:grid; grid-template-columns: 8.5cm 1fr 300px; gap:18px; max-width:1200px; margin:20px auto; padding:0 12px; }

/* MENU lateral (col1) */
.menu { background:var(--muted); padding:14px; border-radius:8px; display:flex; flex-direction:column; gap:10px; }
.menu .menu-link, .menu-btn { display:block; text-align:center; text-decoration:none; color:#fff; background:var(--red); padding:14px 10px; border:none; border-radius:8px; font-weight:700; font-size:16px; }
.menu-btn { cursor:pointer; }
.menu-btn:hover, .menu .menu-link:hover { background:#8a0000; }

/* EXAMEN CTA */
.examen-cta { margin-top:12px; text-align:center; }
.inscripcion-link { display:inline-flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--red); }
.inscripcion-img { width:120px; height:auto; animation:inscripBlink 1.2s infinite; }
.blink { animation:blink 1s infinite; color:var(--red); font-weight:800; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes inscripBlink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* CARDS (col2) */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:var(--card-bg); border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.06); padding-bottom:12px; text-align:center; }
.card img { width:100%; height:140px; object-fit:cover; display:block; }
.card h3 { margin:12px 8px 6px; color:var(--red); }
.card p { margin:0 12px 10px; color:#444; }

/* RIGHT PANEL (col3) */
.right-panel { display:flex; flex-direction:column; gap:18px; }
.cap-img { width:100%; border-radius:8px; display:block; }
.institucional { text-align:center; }
.institucional h4 { margin:0 0 8px 0; color:var(--red); }
.capacitacion {
  text-align: center;
}

/* BANNER VERTICAL: las imágenes suben con animación (stagger via nth-child) */
.banner-vertical { width:250px; height:160px; margin:0 auto; position:relative; overflow:hidden; border-radius:8px; background:#fff; display:block; }
.banner-vertical img { position:absolute; left:0; width:100%; height:160px; object-fit:contain; opacity:0; transform:translateY(100%); }
.banner-vertical img:nth-child(1){ animation:slideUp 12s linear infinite 0s; }
.banner-vertical img:nth-child(2){ animation:slideUp 12s linear infinite 2s; }
.banner-vertical img:nth-child(3){ animation:slideUp 12s linear infinite 4s; }
.banner-vertical img:nth-child(4){ animation:slideUp 12s linear infinite 6s; }
.banner-vertical img:nth-child(5){ animation:slideUp 12s linear infinite 8s; }
.banner-vertical img:nth-child(6){ animation:slideUp 12s linear infinite 10s; }

@keyframes slideUp {
  0%   { transform:translateY(100%); opacity:0; }
  8%   { transform:translateY(0%);   opacity:1; }
  32%  { transform:translateY(0%);   opacity:1; }
  40%  { transform:translateY(-100%);opacity:0; }
  100% { transform:translateY(-100%);opacity:0; }
}

/* PRE-FOOTER 4 columnas */
.mapa-grid { max-width:1200px; margin:18px auto; padding:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mapa-grid .col { background:var(--card-bg); padding:12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.04); }
.social-link { color:var(--dark); text-decoration:none; }
.social-link i { margin-right:8px; color:var(--red); }

/* FOOTER */
footer { background:var(--red); color:white; text-align:center; padding:14px; margin-top:18px; }

/* LINKS: que no se pongan azules ni subrayados por defecto */
a { color:inherit; text-decoration:none; }
a:visited { color:inherit; }

/* Responsive */
@media (max-width:1000px){
  .content { grid-template-columns: 1fr; padding:8px; }
  .banner-wrapper{ padding:0 8px; }
  .carousel { height:320px; }
}