/* ============================================================================
   DOMINIO CYCLING CLUB — HOJA DE ESTILOS
   Cuauhtémoc, Chihuahua, México
   Mobile-first. Variables de marca + componentes reutilizables.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. VARIABLES DE MARCA
   --------------------------------------------------------------------------- */
:root{
  --bg:#050506;
  --surface:#0d0d12;
  --surface-light:#15151d;
  --purple:#8a19ff;
  --violet:#b026ff;
  --magenta:#e600ff;
  --pink:#ff21e6;
  --white:#ffffff;
  --muted:#a7a7b2;

  /* Relleno sólido (botones, fondos grandes): permanece siempre accesible
     con texto blanco. El magenta/rosa se reserva para texto, iconos,
     bordes y resplandores decorativos sobre fondo oscuro. */
  --gradient-brand: linear-gradient(135deg, var(--purple), var(--violet));
  --gradient-accent: linear-gradient(120deg, var(--violet), var(--magenta) 55%, var(--pink));

  --border: rgba(176,38,255,.22);
  --border-strong: rgba(176,38,255,.55);
  --glow-violet: 0 0 60px rgba(176,38,255,.35);
  --glow-magenta: 0 0 60px rgba(230,0,255,.28);
  --shadow-card: 0 20px 45px rgba(0,0,0,.45);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ff-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-script: 'Caveat', cursive;

  --container: 1200px;
  --transition: .35s cubic-bezier(.22,.8,.2,1);
  --header-h: 74px;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main{ display:block; overflow-x:hidden; }
img, svg, picture, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea{ font:inherit; }
h1,h2,h3,h4,p{ margin:0; }
svg{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--ff-heading);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.08;
}

::selection{ background:var(--magenta); color:var(--white); }

/* Barra de desplazamiento con acento de marca (navegadores compatibles) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-light); border-radius:var(--radius-pill); border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--purple); }

/* ---------------------------------------------------------------------------
   3. ACCESIBILIDAD
   --------------------------------------------------------------------------- */
.skip-link{
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:1000;
  background:var(--white);
  color:var(--bg);
  padding:.85rem 1.25rem;
  border-radius:var(--radius-sm);
  font-weight:700;
  transition:top .25s ease;
}
.skip-link:focus{ top:1rem; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:3px;
  border-radius:4px;
}

.sprite-sheet{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------------------------------------------------------------------------
   4. LAYOUT / UTILIDADES
   --------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}

.section{
  position:relative;
  padding-block:clamp(3.5rem, 8vw, 7rem);
}
.section--alt{ background:var(--surface); }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4rem); }

.section-head{
  max-width:680px;
  margin-bottom:clamp(2rem, 5vw, 3.5rem);
}
.section-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.72rem;
  font-weight:600;
  color:var(--violet);
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:'';
  width:1.6em;
  height:2px;
  background:var(--gradient-accent);
  display:inline-block;
  border-radius:2px;
}
.section-head--center .eyebrow{ justify-content:center; }

.section-title{
  font-size:clamp(1.9rem, 4.2vw, 3.1rem);
  margin-bottom:1rem;
}
.section-title .accent{
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.section-lead{
  color:var(--muted);
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  max-width:62ch;
}
.section-head--center .section-lead{ margin-inline:auto; }

.grid{ display:grid; gap:clamp(1.25rem, 3vw, 2rem); }

section[id]{ scroll-margin-top:var(--header-h); }

.split{
  display:grid;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--reverse .split-media{ order:2; }
}

/* ---------------------------------------------------------------------------
   5. BOTONES
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:1em 2.1em;
  font-family:var(--ff-heading);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn-primary{
  background:var(--gradient-brand);
  color:var(--white);
  box-shadow:0 12px 30px rgba(138,25,255,.35);
}
.btn-primary:hover{ box-shadow:0 16px 42px rgba(176,38,255,.5); }

.btn-outline{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.3);
  color:var(--white);
}
.btn-outline:hover{
  border-color:var(--violet);
  background:rgba(176,38,255,.12);
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

/* ---------------------------------------------------------------------------
   6. HEADER / NAVEGACIÓN
   --------------------------------------------------------------------------- */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:200;
  padding-block:1.4rem;
  transition:background var(--transition), padding var(--transition), box-shadow var(--transition), backdrop-filter var(--transition), border-color var(--transition);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:.85rem;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  border-color:var(--border);
}

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

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  flex-shrink:0;
}
.brand-mark{
  width:42px;
  height:42px;
  object-fit:contain;
  color:var(--violet);
  flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-family:var(--ff-heading);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.06em;
}
.brand-sub{
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--muted);
}

.nav{ display:none; }
.nav-list{
  display:flex;
  align-items:center;
  gap:1.9rem;
}
.nav-link{
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--white);
  position:relative;
  padding-block:.3rem;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:2px;
  background:var(--gradient-accent);
  transition:right var(--transition);
  border-radius:2px;
}
.nav-link:hover::after, .nav-link:focus-visible::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.nav-cta{ display:none; }

.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:46px;
  height:46px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  flex-shrink:0;
}
.nav-toggle-bar{
  width:20px;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:190;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity var(--transition), visibility var(--transition), transform var(--transition);
}
.mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
}
.mobile-menu-inner{ text-align:center; padding:5.5rem 2rem 2.5rem; }
.mobile-menu-list{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-bottom:2rem;
}
.mobile-menu-link{
  font-family:var(--ff-heading);
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mobile-menu-link:hover, .mobile-menu-link:focus-visible{ color:var(--violet); }

@media (min-width:960px){
  .nav{ display:block; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none; }
}

/* ---------------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding-block-start:var(--header-h);
}

.hero-backdrop{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 60% 50% at 18% 20%, rgba(138,25,255,.45), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(230,0,255,.35), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(176,38,255,.3), transparent 65%),
    var(--bg);
}
.hero-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.25;
  background-image:
    linear-gradient(rgba(176,38,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,38,255,.18) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 10%, transparent 75%);
}
.hero-bike{
  position:absolute;
  right:-4%;
  bottom:-6%;
  width:min(46vw, 560px);
  height:auto;
  color:var(--violet);
  opacity:.14;
  z-index:-1;
  pointer-events:none;
}

.hero-content{ max-width:760px; }
.hero-layout{ display:grid; gap:2rem; align-items:center; }
.hero-logo{ display:none; width:100%; max-width:420px; height:auto; justify-self:center; filter:drop-shadow(0 0 40px rgba(176,38,255,.45)); }
@media (min-width:900px){
  .hero-layout{ grid-template-columns:1.3fr 1fr; }
  .hero-logo{ display:block; }
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.5em 1.1em;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  background:rgba(138,25,255,.1);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:1.5rem;
}
.hero-badge svg{ width:16px; height:16px; color:var(--magenta); }

.hero-title{
  font-size:clamp(2.6rem, 8.5vw, 5.6rem);
  margin-bottom:1.1rem;
  background:linear-gradient(135deg, #fff 40%, var(--violet) 85%, var(--magenta) 110%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-subtitle{
  color:var(--muted);
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  max-width:46ch;
  margin-bottom:2.2rem;
}
.hero-subtitle strong{ color:var(--white); font-weight:600; }

.hero-scrollcue{
  position:absolute;
  left:50%;
  bottom:2.2rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color:var(--muted);
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.hero-scrollcue svg{
  width:18px; height:18px;
  animation:bounce 2.2s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(8px); opacity:1; }
}

/* ---------------------------------------------------------------------------
   8. CENTRO OFICIAL SPINNING
   --------------------------------------------------------------------------- */
.badge-section{
  background:var(--surface);
  border-block:1px solid var(--border);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.badge-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 50% 100% at 50% 0%, rgba(230,0,255,.18), transparent 70%);
  pointer-events:none;
}
.badge-lockup{ position:relative; }
.badge-line{
  font-size:clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing:.5em;
  color:var(--muted);
  font-weight:500;
}
.badge-main{
  font-size:clamp(2.4rem, 7vw, 4.5rem);
  letter-spacing:.06em;
  margin-block:.15em;
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.badge-sub{
  color:var(--muted);
  max-width:56ch;
  margin-inline:auto;
  font-size:clamp(.95rem, 1.6vw, 1.05rem);
}
.badge-ring{
  width:84px; height:84px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  border:2px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--magenta);
  box-shadow:var(--glow-magenta);
}
.badge-ring svg{ width:38px; height:38px; }

/* ---------------------------------------------------------------------------
   9. TARJETAS GENÉRICAS
   --------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:clamp(1.5rem, 3vw, 2.1rem);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
  background:var(--surface-light);
}

.card-icon{
  width:52px; height:52px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(138,25,255,.14);
  color:var(--violet);
  margin-bottom:1.1rem;
}
.card-icon svg{ width:26px; height:26px; }

.card-title{
  font-size:1.05rem;
  margin-bottom:.5rem;
}
.card-desc{ color:var(--muted); font-size:.92rem; }

/* ---------------------------------------------------------------------------
   10. SOBRE DOMINIO
   --------------------------------------------------------------------------- */
.feature-grid{
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}

.values-strip{
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  padding-top:clamp(2rem, 4vw, 2.6rem);
  border-top:1px solid var(--border);
}
.values-title{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.3rem;
  text-align:center;
}
.values-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem;
}
.value-chip{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.65em 1.2em;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--white);
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}
.value-chip:hover{
  border-color:var(--border-strong);
  background:rgba(176,38,255,.1);
  transform:translateY(-2px);
}
.value-chip svg{ width:16px; height:16px; color:var(--magenta); }

/* ---------------------------------------------------------------------------
   11. MARCADOR DE POSICIÓN DE MEDIA (fotografías)
   --------------------------------------------------------------------------- */
.media-slot{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 20% 15%, rgba(138,25,255,.35), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 90%, rgba(230,0,255,.3), transparent 60%),
    var(--surface-light);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.6rem;
  color:var(--muted);
}
.media-slot img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.media-slot:hover img{ transform:scale(1.045); }
.media-slot-icon{
  width:44px; height:44px;
  color:var(--violet);
  opacity:.8;
}
.media-slot-caption{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  padding-inline:1rem;
}
.media-slot--tall{ aspect-ratio:3/4; }
.media-slot--wide{ aspect-ratio:16/9; }
.media-slot--square{ aspect-ratio:1/1; }
.media-slot--fill{ aspect-ratio:auto; width:100%; height:100%; }
.media-slot--poster{ aspect-ratio:auto; }
.media-slot--poster img{ position:static; height:auto; object-fit:contain; }
.media-slot--poster:hover img{ transform:none; }

/* ---------------------------------------------------------------------------
   12. SPINNING / CYCLING
   --------------------------------------------------------------------------- */
.cycling-grid{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  margin-top:1.8rem;
}
.cycling-card{ text-align:left; }

/* ---------------------------------------------------------------------------
   13. INSTALACIONES
   --------------------------------------------------------------------------- */
.facilities-grid{
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.facility-card{ padding:0; overflow:hidden; background:var(--surface); }
.facility-card .media-slot{ border-radius:0; border:0; border-bottom:1px solid var(--border); }
.facility-body{ padding:1.4rem 1.5rem 1.6rem; }

/* ---------------------------------------------------------------------------
   14. HORARIOS
   --------------------------------------------------------------------------- */
.schedule-wrap{ max-width:760px; margin-inline:auto; }
.schedule-list{ display:flex; flex-direction:column; gap:1rem; }
.schedule-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding:1.25rem 1.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.schedule-days{ font-family:var(--ff-heading); font-size:1.05rem; letter-spacing:.03em; }
.schedule-time{ color:var(--violet); font-weight:600; }
.schedule-note{ width:100%; color:var(--muted); font-size:.85rem; }

.schedule-empty{
  text-align:center;
  padding:clamp(2.5rem, 6vw, 3.5rem);
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
}
.schedule-empty-icon{
  width:50px; height:50px;
  margin:0 auto 1.2rem;
  color:var(--violet);
}
.schedule-empty-title{ font-size:1.3rem; margin-bottom:.6rem; }
.schedule-empty-text{ color:var(--muted); margin-bottom:1.6rem; }

/* ---------------------------------------------------------------------------
   15. INSTRUCTORES
   --------------------------------------------------------------------------- */
.instructors-grid{
  grid-template-columns:repeat(auto-fit, minmax(260px, 320px));
  justify-content:center;
}
.instructor-card{ text-align:center; }
.instructor-avatar{
  width:108px; height:108px;
  border-radius:50%;
  margin:0 auto 1.2rem;
  overflow:hidden;
  position:relative;
}
.instructor-name{ font-size:1.1rem; margin-bottom:.2rem; }
.instructor-role{
  color:var(--magenta);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.instructor-bio{ color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.instructor-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--border);
  color:var(--white);
  transition:border-color var(--transition), color var(--transition), transform var(--transition);
}
.instructor-social:hover{ border-color:var(--violet); color:var(--violet); transform:translateY(-2px); }
.instructor-social svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------------------
   16. GALERÍA + LIGHTBOX
   --------------------------------------------------------------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:1.25rem;
  align-items:start;
}
@media (min-width:640px){
  .gallery-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gallery-item:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 1.25rem) / 2);
  }
}
@media (min-width:980px){
  .gallery-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .gallery-item:last-child:nth-child(odd){ grid-column:auto; width:100%; }
  .gallery-item:last-child:nth-child(3n + 1){ grid-column:2; }
}

.gallery-item{
  display:block;
  width:100%;
  margin:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  position:relative;
  background:none;
  padding:0;
  text-align:left;
  transition:transform var(--transition), border-color var(--transition);
}
.gallery-item:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.gallery-item .media-slot{ border:0; border-radius:0; aspect-ratio:auto; background:var(--bg); }
.gallery-item .media-slot img{ position:static; height:auto; object-fit:contain; transition:none; }
.gallery-caption{
  display:block;
  padding:.7rem 1rem;
  background:var(--surface);
  font-size:.82rem;
  font-weight:500;
  text-align:left;
  opacity:1;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
  align-items:stretch;
}
@media (min-width:760px){ .cert-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1040px){ .cert-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.cert-item{
  display:flex;
  flex-direction:column;
  width:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  padding:0;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--transition), border-color var(--transition);
}
.cert-item:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.cert-item .media-slot{ border:0; border-radius:0; aspect-ratio:4/3; background:var(--bg); flex:1; }
.cert-item .media-slot img{ object-fit:cover; }
.cert-pdf{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  background:var(--bg);
  font-family:var(--ff-heading);
  font-size:2rem;
  letter-spacing:.1em;
  color:var(--violet);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--transition), visibility var(--transition);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,6,.93);
  backdrop-filter:blur(6px);
}
.lightbox-dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:720px;
}
.lightbox-dialog .media-slot{ aspect-ratio:auto; max-height:calc(100vh - 11rem); border-radius:var(--radius-lg); }
.lightbox-dialog .media-slot img{ position:static; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 11rem); object-fit:contain; transition:none; }
.lightbox-caption{
  text-align:center;
  margin-top:1rem;
  color:var(--muted);
  font-size:.9rem;
}
.lightbox-counter{
  text-align:center;
  margin-top:.3rem;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.1em;
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--white);
  transition:background var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink:0;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{
  background:rgba(176,38,255,.2);
  border-color:var(--border-strong);
}

.lightbox-close, .lightbox-prev, .lightbox-next{ position:absolute; z-index:2; }
.lightbox-close{ top:-.5rem; right:-.5rem; }
@media (min-width:640px){ .lightbox-close{ top:-1.4rem; right:-1.4rem; } }
.lightbox-prev{ left:.5rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:.5rem; top:50%; transform:translateY(-50%); }
.lightbox-prev, .lightbox-next{
  width:52px; height:52px;
  background:rgba(5,5,6,.72);
  border-color:rgba(255,255,255,.4);
}
.lightbox-prev svg, .lightbox-next svg{ width:24px; height:24px; }
.lightbox-prev:hover, .lightbox-next:hover{ background:rgba(176,38,255,.55); }
#lightbox-media{ touch-action:pan-y; }

.lightbox-hint{ display:none; }
@media (min-width:640px) and (hover:hover){
  .lightbox-prev, .lightbox-next{ width:60px; height:60px; }
  .lightbox-prev svg, .lightbox-next svg{ width:28px; height:28px; }
  .lightbox-hint{
    display:block;
    text-align:center;
    margin-top:.5rem;
    color:var(--muted);
    font-size:.72rem;
    letter-spacing:.04em;
    opacity:.75;
  }
}
.lightbox-close-label{ display:none; }

/* En celular los controles van fijos abajo (no se mueven con el tamaño de la foto) y tocar el fondo no cierra */
@media (max-width:639px){
  .lightbox-backdrop{ pointer-events:none; }
  .lightbox-dialog .media-slot,
  .lightbox-dialog .media-slot img{ max-height:calc(100vh - 14rem); max-height:calc(100dvh - 14rem); }
  .lightbox-prev, .lightbox-next, .lightbox-close{
    position:fixed;
    top:auto;
    bottom:max(1rem, env(safe-area-inset-bottom));
    transform:none;
    z-index:3;
  }
  .lightbox-prev{ left:1rem; }
  .lightbox-next{ right:1rem; }
  .lightbox-close{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:auto;
    height:52px;
    padding:0 1.3rem;
    gap:.5rem;
    border-radius:999px;
    background:rgba(5,5,6,.72);
    border-color:rgba(255,255,255,.4);
    font-weight:600;
    font-size:.95rem;
  }
  .lightbox-close svg{ width:18px; height:18px; }
  .lightbox-close-label{ display:inline; }
}
/* ---------------------------------------------------------------------------
   16B. EVENTOS (LÍNEA DE TIEMPO)
   --------------------------------------------------------------------------- */
.timeline{
  position:relative;
  max-width:860px;
  margin:0 auto;
  padding:1.2rem 0 .5rem 2.6rem;
}
.timeline::before{
  content:'';
  position:absolute;
  left:8px;
  top:.4rem;
  bottom:1rem;
  width:2px;
  background:linear-gradient(180deg, var(--violet), var(--magenta) 55%, rgba(230,0,255,.05));
  opacity:.5;
}
.timeline-item{ position:relative; margin-bottom:2.6rem; }
.timeline-item:last-of-type{ margin-bottom:1.6rem; }
.timeline-dot{
  position:absolute;
  left:-2.6rem;
  top:1.55rem;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--bg);
  border:3px solid var(--violet);
  box-shadow:0 0 0 5px rgba(176,38,255,.14), 0 0 14px rgba(176,38,255,.5);
}
.timeline-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.timeline-media{ position:relative; aspect-ratio:16/10; background:var(--bg); }
.timeline-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.timeline-chip{
  position:absolute;
  top:.8rem; left:.8rem;
  padding:.32em .85em;
  border-radius:999px;
  background:rgba(5,5,6,.72);
  border:1px solid rgba(176,38,255,.5);
  color:var(--white);
  font-family:var(--ff-heading);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.timeline-body{ padding:1.25rem 1.35rem 1.5rem; }
.timeline-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-bottom:.6rem;
}
.timeline-date{
  font-family:var(--ff-heading);
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--violet);
  font-weight:600;
}
.timeline-tag{
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.22em .7em;
}
.timeline-title{
  font-family:var(--ff-heading);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:.5rem;
}
.timeline-excerpt{ color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:1.1rem; }
.timeline-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.timeline-btn{ font-size:.8rem; padding:.75em 1.5em; }
.timeline-videos{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.timeline-videos-title{
  margin-bottom:.85rem;
  font-family:var(--ff-heading);
  font-size:1rem;
  letter-spacing:.04em;
}
.timeline-video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:.9rem;
}
.timeline-video-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
}
.timeline-video-title{
  padding:.75rem .85rem .55rem;
  color:var(--muted);
  font-size:.8rem;
  font-weight:500;
}
.timeline-video-el{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  object-fit:contain;
}
.timeline-youtube-embed{
  width:100%;
  max-height:520px;
  aspect-ratio:9/16;
  background:#000;
}
.timeline-youtube-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.timeline-youtube-link{
  display:inline-block;
  margin:.7rem .85rem .85rem;
  color:var(--violet);
  font-size:.82rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.2em;
}
.timeline-youtube-link:hover{ color:var(--magenta); }
.timeline-video-error{
  padding:2rem 1.4rem;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
}
.timeline-cta{
  margin-top:2.2rem;
  text-align:center;
  padding:1.6rem 1.4rem;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
}
.timeline-cta-text{
  font-family:var(--ff-script);
  font-size:1.5rem;
  color:var(--white);
  margin-bottom:.9rem;
}

@media (min-width:900px){
  .timeline{ max-width:1000px; padding:1.4rem 0 1rem; }
  .timeline::before{ left:calc(50% - 1px); top:.4rem; bottom:2rem; }
  .timeline-item{ width:calc(50% - 2.6rem); margin-bottom:3rem; }
  .timeline-item:nth-child(odd){ margin-left:0; }
  .timeline-item:nth-child(even){ margin-left:calc(50% + 2.6rem); }
  .timeline-dot{ top:1.8rem; }
  .timeline-item:nth-child(odd) .timeline-dot{ left:auto; right:calc(-2.6rem - 9px); }
  .timeline-item:nth-child(even) .timeline-dot{ left:calc(-2.6rem - 9px); }
}

/* ---------------------------------------------------------------------------
   17. FRASE DE MARCA
   --------------------------------------------------------------------------- */
.statement-section{
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--surface);
}
.statement-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(230,0,255,.22), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(138,25,255,.25), transparent 70%);
  pointer-events:none;
}
.statement-script{
  position:relative;
  font-family:var(--ff-script);
  font-weight:700;
  text-transform:none;
  letter-spacing:.01em;
  font-size:clamp(2.6rem, 9vw, 6rem);
  color:var(--white);
  margin-bottom:1.2rem;
  line-height:1;
}
.statement-script .accent{ color:var(--magenta); }
.statement-tags{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7em;
  font-family:var(--ff-heading);
  font-size:clamp(.8rem, 1.6vw, 1rem);
  letter-spacing:.18em;
  color:var(--muted);
}
.statement-tags span:not(.sep){ color:var(--white); }
.statement-tags .sep{ color:var(--violet); }

/* ---------------------------------------------------------------------------
   18. CTA
   --------------------------------------------------------------------------- */
.cta-section{ text-align:center; }
.cta-title{
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin-bottom:1rem;
}
.cta-text{
  color:var(--muted);
  max-width:56ch;
  margin-inline:auto;
  margin-bottom:2.2rem;
}
.cta-actions{ justify-content:center; }

/* ---------------------------------------------------------------------------
   19. CONTACTO
   --------------------------------------------------------------------------- */
.contact-grid{
  grid-template-columns:1fr;
}
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.contact-info{ display:flex; flex-direction:column; gap:1rem; }
.contact-row{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.1rem 1.3rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:border-color var(--transition), transform var(--transition);
}
a.contact-row:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.contact-row-icon{
  width:42px; height:42px;
  flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(138,25,255,.14);
  color:var(--violet);
}
.contact-row-icon svg{ width:20px; height:20px; }
.contact-row-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:.2rem; }
.contact-row-value{ font-weight:500; word-break:break-word; }

.contact-empty{
  padding:2rem;
  text-align:center;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  color:var(--muted);
}

.btn-whatsapp{ margin-top:1.2rem; gap:.6rem; }
.btn-whatsapp svg{ fill:currentColor; flex:none; }
.contact-social{ display:flex; gap:.8rem; margin-top:.5rem; }
.social-link{
  width:46px; height:46px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  color:var(--white);
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}
.social-link:hover{ border-color:var(--violet); background:rgba(176,38,255,.14); transform:translateY(-3px); }
.social-link svg{ width:20px; height:20px; }

.contact-map{
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  display:grid;
  grid-template-rows:auto 1fr;
}
@media (min-width:900px){
  .contact-map{ grid-template-rows:none; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
}
.contact-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9); }

/* Ficha de lugar (estilo Google Maps, con diseño propio) */
.place-map{ min-height:280px; }
@media (min-width:900px){ .place-map{ min-height:100%; } }

.place-card{
  display:flex;
  flex-direction:column;
  border-bottom:1px solid var(--border);
}
@media (min-width:900px){
  .place-card{ border-bottom:0; border-right:1px solid var(--border); }
}

.place-photos{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:repeat(2, 1fr);
  gap:2px;
  height:150px;
  background:var(--bg);
}
.place-photos img:first-child{ grid-row:1 / -1; }
.place-photos img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.place-body{ padding:1.1rem 1.25rem 1.3rem; }

.place-name{
  font-family:var(--ff-heading);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:.15rem;
}
.place-cat{
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:1rem;
}

.place-row{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.42rem 0;
  font-size:.86rem;
  color:var(--white);
  line-height:1.4;
}
a.place-row:hover{ color:var(--violet); }
.place-row-icon{
  width:17px; height:17px;
  flex-shrink:0;
  margin-top:.15rem;
  color:var(--violet);
}

.place-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.1rem;
}
.place-btn{
  padding:.7em 1.3em;
  font-size:.72rem;
  letter-spacing:.06em;
}
.contact-map-fallback{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem;
  color:var(--muted);
  text-align:center;
  padding:2rem;
}
.contact-map-fallback svg{ width:42px; height:42px; color:var(--violet); }

/* ---------------------------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------------------------- */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding-block:clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid{
  grid-template-columns:1fr;
  margin-bottom:2.5rem;
}
@media (min-width:640px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }

.footer-brand .brand{ margin-bottom:.9rem; }
.footer-tagline{ color:var(--muted); font-size:.9rem; max-width:32ch; }

.footer-title{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.1rem;
}
.footer-list{ display:flex; flex-direction:column; gap:.7rem; }
.footer-list a:hover{ color:var(--violet); }
.footer-social{ display:flex; gap:.7rem; margin-top:1rem; }
.footer-social .social-link{ width:40px; height:40px; }
.footer-social .social-link svg{ width:17px; height:17px; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  padding-top:1.8rem;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.82rem;
}

/* ---------------------------------------------------------------------------
   21. BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------- */
.whatsapp-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:150;
  width:60px; height:60px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-brand);
  color:var(--white);
  box-shadow:0 14px 34px rgba(138,25,255,.5);
  transition:transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 18px 42px rgba(230,0,255,.55); }
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   22. ANIMACIONES DE APARICIÓN
   --------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
   23. PREFERENCIA DE MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------------
   24. BLOQUEO DE SCROLL (menú / lightbox abiertos)
   --------------------------------------------------------------------------- */
body.no-scroll{ overflow-y:hidden; }

/* ---------------------------------------------------------------------------
   25. AJUSTES RESPONSIVE GENERALES
   --------------------------------------------------------------------------- */
@media (max-width:420px){
  .btn{ padding:.9em 1.6em; font-size:.78rem; }
  .hero-title{ font-size:clamp(2.2rem, 11vw, 3rem); }
}

@media (min-width:1200px){
  .container{ padding-inline:2.5rem; }
}