/* ====== RESET SIMPLE ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ====== TIPOGRAFÍA Y COLORES ====== */
:root{
  --blue-1: #0057b8;
  --blue-2: #00a6ff;
  --navy: #003b72;
  --muted: #f4f4f6;
  --card: #ffffff;
  --text: #222;
}

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  background: var(--muted);
  color: var(--text);
}

/* ====== HEADER ====== */
.site-header {
  background: linear-gradient(90deg,var(--blue-1),var(--blue-2));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: sticky;
  top: 0;
  z-index: 60;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  gap: 12px;
}
.logo-wrap { display:flex; align-items:center; gap:12px; }
.logo.small { width:52px; height:52px; object-fit:contain; border-radius:8px; background: #fff2; padding:6px; }
.site-title { font-size:20px; font-weight:700; margin-left:6px; }

/* ====== NAV ====== */
.main-nav ul { list-style:none; display:flex; gap:22px; align-items:center; }
.main-nav a { color:#fff; text-decoration:none; font-weight:600; padding:8px 6px; }
.main-nav a:hover, .main-nav a.active { text-decoration: underline; }

/* BURGER (mobile) */
.burger { display:none; background:transparent; border:0; cursor:pointer; padding:6px; }
.burger span{ display:block; width:24px; height:3px; margin:4px 0; background:#fff; border-radius:3px; }

/* ====== HERO ====== */
.hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.0));
  padding: 48px 20px;
  text-align:center;
}
.small-hero { padding:28px 20px; background: linear-gradient(180deg,#e7f2ff, #f7fbff); }
.hero-inner { max-width:1000px; margin:0 auto; }
.hero h2 { font-size:30px; color:var(--navy); margin-bottom:8px; font-weight:700; }
.hero p { color: #333; opacity:0.9; }

/* ====== CONTENT SECTIONS ====== */
.content-section { max-width:1100px; margin:18px auto; padding:18px; background:transparent; }
.lead { font-size:16px; color:#333; margin-bottom:12px; text-align:justify; }

/* ====== CARDS / GRIDS ====== */
.cards-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cards-grid, .cards-row { max-width:1100px; margin:20px auto; }
.card {
  background:var(--card);
  border-radius:12px;
  padding:18px;
  min-width:220px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align:center;
}
.cards-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }

/* PERSON PHOTO */
.person-photo { width:100%; height:180px; object-fit:cover; border-radius:8px; }

/* TIMELINE */
.timeline { list-style:none; margin-top:12px; color:#444; }
.timeline li { margin:10px 0; }

/* ====== GALLERY / CARRUSEL ====== */
.carousel { display:flex; align-items:center; justify-content:center; gap:12px; max-width:820px; margin:12px auto; }
.carousel-window { overflow:hidden; border-radius:12px; flex:1; box-shadow: 0 6px 18px rgba(0,0,0,0.12); background:#000; }
.carousel-track { display:flex; transition:transform 0.45s ease-in-out; }
.carousel-item { min-width:100%; height:360px; object-fit:cover; display:block; }

/* carousel btns */
.carousel-btn {
  width:44px; height:44px; border-radius:50%; border:0; background:var(--navy); color:#fff;
  cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.carousel-btn:hover { transform:scale(1.04); background:var(--blue-1); }

/* dots */
.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.dot { width:10px; height:10px; border-radius:50%; background:#cfcfcf; cursor:pointer; transition:transform .2s; }
.dot.active { background:var(--navy); transform:scale(1.2); }

/* ====== SCENES CARDS ====== */
.scene { text-align:left; }

/* ====== FOOTER ====== */
.site-footer { background:var(--navy); color:#fff; padding:18px; text-align:center; margin-top:26px; }

/* ====== RESPONSIVE ====== */
@media (max-width:900px){
  .main-nav ul { display:none; }
  .burger { display:block; }
  .header-inner { gap:8px; }
  .carousel-item { height:240px; }
}
@media (max-width:520px){
  .hero h2 { font-size:20px; }
  .carousel-item { height:180px; }
}