* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --negro: #0e1116;
  --gris: #161b24;
  --blanco: #f5f6f8;
  --texto: #c7cdd6;
  --oro: #f2b04c;
  --oro-suave: #ffd27a;
  --rojo: #e0302e;
  --acento: #3aa6ff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--negro);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: 'Oswald', sans-serif; }

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

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10, 11, 16, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner { width: min(1100px, 92%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { color: var(--blanco); font-weight: 700; font-size: 1.6rem; letter-spacing: 1px; text-decoration: none; }
.brand { color: var(--oro); }

/* ---------- ICONOS PATÍN (SVG) ---------- */
.ico-skate { display: inline-block; width: 1em; height: 1em; color: var(--oro); }
.ico-skate { stroke: currentColor; }
.ico-titulo { width: 1.25em; height: 1em; margin-right: .5rem; color: var(--oro); vertical-align: -0.12em; }
.section-title.light .ico-titulo { color: var(--oro); }
.ico-hero { width: 1.6em; height: 1em; margin: 0 .35rem .3rem 0; color: var(--oro); vertical-align: baseline; }
.ico-footer { width: 1em; height: 0.8em; margin-right: .3rem; color: var(--oro); vertical-align: -0.12em; }
.hero h1 .ico-hero { filter: drop-shadow(0 0 12px rgba(242,176,76,.4)); }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { color: var(--texto); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--oro); }
.nav-toggle { display: none; background: none; border: none; color: var(--blanco); font-size: 1.8rem; cursor: pointer; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; padding: 6rem 1rem 4rem;
  background:
    radial-gradient(circle at 70% 20%, rgba(28, 60, 120, 0.55), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(180, 60, 40, 0.35), transparent 45%),
    linear-gradient(160deg, #0b0f16, #131a26 60%, #0b0f16);
}
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 30%, rgba(5,8,12,.7)); }
.hero-overlay::before {
  content: '';
  position: absolute; inset: 0; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='68' viewBox='0 0 56 34'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M14 13c.5 2 .5 4 0 6'/%3E%3Cpath d='M17 10q6 1 8 6l.5 5h9'/%3E%3Cline x1='17' y1='21' x2='34.5' y2='21'/%3E%3Cline x1='18' y1='25' x2='42' y2='25'/%3E%3Ccircle cx='18' cy='30' r='2.2'/%3E%3Ccircle cx='27' cy='30' r='2.2'/%3E%3Ccircle cx='36' cy='30' r='2.2'/%3E%3Ccircle cx='45' cy='30' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 0 0;
  background-size: 112px 68px;
  background-repeat: repeat;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-eyebrow { letter-spacing: .35em; text-transform: uppercase; font-size: .8rem; color: var(--acento); margin-bottom: 1.2rem; }
.hero h1 { font-size: clamp(3rem, 10vw, 6rem); font-weight: 700; line-height: .95; color: var(--blanco); text-transform: uppercase; }
.hero h1 span { color: var(--oro); }
.hero-sub { margin-top: 1rem; font-size: 1.1rem; color: var(--texto); }
.hero-badge {
  margin: 1.6rem auto 2rem; display: inline-block; padding: .9rem 1.6rem;
  border: 1px solid var(--oro); border-radius: 12px; background: rgba(242, 176, 76, 0.08);
}
.hero-badge strong { display: block; color: var(--oro-suave); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }
.hero-badge span { font-size: .85rem; color: var(--texto); }
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .85rem 1.8rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; border: none;
  font-family: 'Inter', sans-serif; transition: transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--oro); color: #201500; box-shadow: 0 8px 24px rgba(242, 176, 76, .25); }
.btn-ghost { background: transparent; color: var(--blanco); border: 1px solid rgba(255,255,255,.3); }
.btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-ghost:hover { border-color: var(--oro); color: var(--oro); }

/* ---------- DATOS ---------- */
.datos { background: var(--gris); border-block: 1px solid rgba(255,255,255,.05); }
.datos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2.2rem 0; text-align: center; }
.dato-val { display: block; font-family: 'Oswald', sans-serif; font-size: 2rem; color: var(--blanco); }
.dato-lbl { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto); }

/* ---------- SECTIONS ---------- */
.section { padding: 5rem 1rem; }
.section.alt { background: linear-gradient(180deg, #12161f, #0c1017); }
.section-title { font-size: clamp(2rem, 5vw, 2.8rem); text-transform: uppercase; color: var(--blanco); margin-bottom: .6rem; font-weight: 600; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--oro); margin-top: .5rem; border-radius: 2px; }
.section-intro { max-width: 760px; margin-bottom: 2rem; }
.subtitulo, .subtit { color: var(--texto); margin-bottom: 2.4rem; margin-top: -.2rem; }

/* ---------- HISTORIA ---------- */
.historia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.historia-card { background: var(--gris); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 1.6rem; }
.historia-card h3 { color: var(--oro); margin-bottom: .6rem; font-size: 1.15rem; }
.historia-card p { font-size: .95rem; }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; padding-left: 2rem; max-width: 720px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--oro), var(--rojo)); }
.tl-item { position: relative; margin-bottom: 2.4rem; }
.tl-dot {
  position: absolute; left: -2rem; top: .2rem; width: 22px; height: 22px; border-radius: 50%;
  background: var(--oro); display: grid; place-items: center; font-size: .45rem; font-weight: 700; color: #201500;
  border: 3px solid var(--negro); z-index: 2;
}
.tl-dot.gold { background: var(--oro); }
.tl-dot.bronze { background: #c08a4a; }
.tl-dot.star { background: var(--rojo); color: #fff; font-size: .8rem; }
.tl-body { background: var(--gris); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 1.3rem 1.5rem; }
.tl-body h3 { color: var(--blanco); font-size: 1.15rem; margin-bottom: .3rem; }
.tl-meta { color: var(--texto); font-size: .92rem; }
.tl-fecha { color: var(--oro-suave); font-size: .82rem; font-weight: 600; margin-top: .35rem; }
.tl-item.highlight .tl-body { border-color: var(--oro); background: rgba(242,176,76,0.07); }

/* ---------- CARRUSEL ---------- */
.carrusel { position: relative; overflow: hidden; border-radius: 16px; background: var(--gris); aspect-ratio: 16 / 9; }
.carrusel-track { display: flex; height: 100%; transition: transform .5s ease; }
.slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0c1017; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.carrusel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
  display: grid; place-items: center; transition: background .2s;
}
.carrusel-btn:hover { background: var(--oro); color: #201500; }
.carrusel-btn.prev { left: 12px; }
.carrusel-btn.next { right: 12px; }
.carrusel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; }
.carrusel-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.carrusel-dots .dot.active { background: var(--oro); }

/* ---------- GRIDS ---------- */
.grid-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-podio img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .25s, box-shadow .25s; }
.grid-podio img:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,.5); }

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cert-card { display: block; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); text-decoration: none; background: var(--gris); cursor: zoom-in; }
.cert-card img { width: 100%; height: 300px; object-fit: cover; display: block; }
.cert-card .cert-lbl { display: block; padding: .9rem 1rem; color: var(--blanco); font-weight: 600; font-size: .92rem; }
.cert-card .cert-lbl small { display: block; color: var(--texto); font-weight: 400; font-size: .78rem; margin-top: .2rem; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(5, 8, 12, 0.92); padding: 2rem; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90%; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb-caption { color: var(--texto); margin-top: 1rem; font-size: .92rem; text-align: center; }
.lb-close {
  position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: none;
  color: #fff; font-size: 3rem; cursor: pointer; line-height: 1;
}
.lb-close:hover { color: var(--oro); }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08);
  border: none; color: #fff; font-size: 2.4rem; width: 52px; height: 68px; cursor: pointer; border-radius: 10px;
  display: grid; place-items: center;
}
.lb-prev:hover, .lb-next:hover { background: var(--oro); color: #201500; }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
@media (max-width: 600px) { .lb-prev { left: .3rem; } .lb-next { right: .3rem; } }
@media print { .lightbox { display: none !important; } }

/* ---------- CONTACT ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1rem; }
.contact-card { background: var(--gris); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 2rem 1.4rem; text-align: center; text-decoration: none; color: var(--texto); transition: transform .2s, border-color .2s; }
.contact-card:hover { transform: translateY(-4px); border-color: var(--oro); }
.cc-ico { font-size: 1.8rem; display: block; color: var(--oro); margin-bottom: .6rem; }
.contact-card strong { display: block; color: var(--blanco); font-size: 1.1rem; }
.section-title.light { color: var(--blanco); }

/* ---------- FOOTER ---------- */
.footer { background: #070a0f; padding: 2rem 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--texto); }
.print-hint { display: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0; flex-direction: column;
    background: rgba(10,14,16,.97); padding: 1rem 2rem; gap: 1rem; display: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links.open { display: flex; }
  .datos-grid { grid-template-columns: repeat(2, 1fr); }
  .historia-grid, .grid-podio, .cert-grid, .contact-cards { grid-template-columns: 1fr; }
}

/* ---------- PRINT ---------- */
@media print {
  body { background: #fff; color: #111; }
  .ico-skate { color: #111 !important; }
  .hero-overlay::before { display: none; }
  .nav, .carrusel-btn, .carrusel-dots, .btn, .print-hint, .footer .btn { display: none !important; }
  .hero { min-height: auto; padding: 1rem; text-align: left; background: #fff !important; }
  .hero-content, .hero-badge, .hero-sub { color: #111; }
  .hero h1, .hero h1 span { color: #111 !important; }
  .hero-actions, .hero-eyebrow { display: none; }
  .datos-grid { grid-template-columns: repeat(4, 1fr); }
  .historia-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-podio { grid-template-columns: repeat(3, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .section, .datos { padding: 1rem 0; background: #fff !important; }
  .section-title, .tl-body h3, .historia-card h3, .contact-card strong { color: #111; }
  .tl-body, .historia-card, .contact-card { background: #f4f4f4 !important; border-color: #ddd; }
  .print-hint { display: block; text-align: center; color: #666; font-size: .75rem; margin-top: 1rem; }
  .carrusel { height: auto; page-break-inside: avoid; }
  .carrusel-track { flex-wrap: wrap; }
  .slide { min-width: 32%; height: auto; display: block; padding: .15rem; background: #fff; }
  .slide img { object-fit: cover; height: auto; }
  a { color: #111 !important; }
}