/* ==========================================================================
   Regleta · rocódromo y escuela de escalada
   Mundo: topo de vías. Muro de roca, presas codificadas por grado,
   cinta de balizamiento y franja de colchoneta.
   ========================================================================== */

:root{
  --roca:    #1c1512;
  --roca-2:  #251c17;
  --roca-3:  #2f231c;
  --hueso:   #e4dbc9;
  --hueso-2: #d3c8b2;
  --claro:   #f4ede1;
  --claro-2: #b9aa98;
  --linea:   rgba(244,237,225,.16);
  --linea-2: rgba(244,237,225,.08);
  --linea-o: rgba(28,21,18,.18);

  --via-1: #f2c230;
  --via-2: #63c04a;
  --via-3: #35c2d9;
  --via-4: #ea4a80;
  --via-5: #9070e6;

  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --marco: clamp(1.15rem, 5vw, 5rem);
  --paso: clamp(4rem, 8vw, 8rem);
  --max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }

body{
  margin:0;background:var(--roca);color:var(--claro);
  font-family:var(--sans);line-height:1.55;overflow-x:hidden;
}
h1,h2,h3{ margin:0 }
p{ margin:0 }
a{ color:inherit }
ul,ol{ margin:0;padding:0;list-style:none }

.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 }
.skip{ position:fixed;left:1rem;top:-4rem;z-index:99;background:var(--via-1);color:var(--roca);padding:.7rem 1.1rem;font-weight:700;text-decoration:none;transition:top .18s ease }
.skip:focus{ top:1rem }
:where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--via-1);outline-offset:3px }

.display{
  font-family:var(--display);font-weight:800;line-height:.84;letter-spacing:-.005em;
  text-transform:uppercase;font-size:clamp(2.9rem,7.4vw,6.4rem);text-wrap:balance;
}
.kicker{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--claro-2);
  margin-bottom:1.35rem;
}
.kicker--oscuro{ color:rgba(28,21,18,.6) }
.cinta{
  width:34px;height:11px;flex:0 0 auto;
  background:repeating-linear-gradient(115deg,var(--via-1) 0 6px,var(--roca) 6px 12px);
  border:1px solid var(--roca);
}
.kicker--oscuro .cinta{ border-color:rgba(28,21,18,.5) }
.parrafo{ font-size:1.03rem;line-height:1.65;color:var(--claro-2);max-width:56ch }
.seccion--clara .parrafo{ color:rgba(28,21,18,.72) }
.pie-nota{ margin-top:1.4rem;font-size:.8rem;color:var(--claro-2);opacity:.8;max-width:70ch }
.pie-nota--oscuro{ color:rgba(28,21,18,.55) }

/* ==========================================================================
   Barra
   ========================================================================== */
.barra{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1.6rem;
  padding:.7rem var(--marco);
  background:rgba(28,21,18,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea-2);
}
.logo{ display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;color:var(--claro) }
.logo__mark{ width:28px;height:28px }
.logo span{ font-family:var(--display);font-size:1.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1 }
.nav{ display:flex;gap:1.5rem }
.nav a{
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--claro-2);padding-block:.3rem;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{ color:var(--claro) }
.nav a[aria-current="true"]{ color:var(--via-1);border-color:var(--via-1) }

.burger{ display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--claro) }
.burger__bars,.burger__bars::before,.burger__bars::after{ display:block;width:22px;height:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease }
.burger__bars::before,.burger__bars::after{ content:"";position:relative }
.burger__bars::before{ top:-7px } .burger__bars::after{ top:5px }
.burger[aria-expanded="true"] .burger__bars{ transform:rotate(45deg) }
.burger[aria-expanded="true"] .burger__bars::before{ opacity:0 }
.burger[aria-expanded="true"] .burger__bars::after{ transform:rotate(-90deg) translateX(7px) }

.menu-movil{
  position:sticky;top:53px;z-index:39;background:var(--roca-2);
  border-bottom:1px solid var(--linea-2);padding:.5rem var(--marco) 1.5rem;
}
.menu-movil a{ display:block;text-decoration:none;font-family:var(--display);font-size:1.6rem;
  font-weight:700;text-transform:uppercase;padding:.6rem 0;border-bottom:1px solid var(--linea-2) }
.menu-movil .btn{ margin-top:1.2rem;border-bottom:0 }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border:2px solid transparent;border-radius:2px;
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;background:transparent;color:var(--claro);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,border-color .2s;
}
.btn--via{ background:var(--via-1);color:#1c1512;border-color:var(--via-1) }
.btn--via:hover{ transform:translateY(-2px);background:#ffd54a;border-color:#ffd54a }
.btn--fantasma{ border-color:var(--linea) }
.btn--fantasma:hover{ border-color:var(--claro);transform:translateY(-2px) }
.btn--grande{ padding:1.05rem 1.9rem;font-size:1rem }
.btn--sm{ padding:.5rem 1rem;font-size:.8rem }
.btn--block{ width:100% }
.btn:active{ transform:none }

/* ==========================================================================
   Portada / muro
   ========================================================================== */
.muro{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--marco) clamp(3rem,7vw,6rem);
}
.muro__izq{ min-width:0 }
.muro__panel{ position:sticky;top:5rem }
.muro h1{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,6.6vw,5.6rem);line-height:.82;letter-spacing:-.01em;
}
.muro h1 span{ color:var(--via-1);display:block }
.entradilla{ margin-top:2rem;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;color:var(--claro-2);max-width:46ch }
.muro__acciones{ display:flex;flex-wrap:wrap;gap:.85rem;margin:2.4rem 0 1.4rem }
.micro{ font-size:.82rem;color:var(--claro-2);opacity:.8;max-width:44ch }

.panel{ position:relative }
.panel__svg{
  display:block;width:100%;height:auto;
  border:1px solid var(--linea);background:var(--roca-2);
}
.panel__pie{
  margin-top:.8rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--claro-2);opacity:.7;
}
/* presas y trazado de vía */
.presa{ transition:opacity .35s ease,transform .35s ease;transform-box:fill-box;transform-origin:center }
.trazo{ fill:none;stroke-width:2;stroke-dasharray:5 7;opacity:.5;transition:opacity .35s ease }
.via-g.apagada .presa{ opacity:.13 }
.via-g.apagada .trazo{ opacity:.06 }
.via-g.resaltada .presa{ transform:scale(1.25) }
.presa--num{ font-family:var(--sans);font-size:9px;font-weight:700;fill:var(--roca) }

@media (prefers-reduced-motion:no-preference){
  .panel__svg .via-g .presa{ animation:brota .5s cubic-bezier(.16,1,.3,1) backwards }
  @keyframes brota{ from{ opacity:0;transform:scale(.4) } }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.seccion{ padding:var(--paso) var(--marco) }
.seccion > *{ max-width:var(--max);margin-inline:auto }
.seccion--oscura{ background:var(--roca);border-top:1px solid var(--linea-2) }
.seccion--oscura + .seccion--oscura{ background:var(--roca-2) }

/* la lista de vías vive dentro de la retícula del muro */
.vias{ padding:clamp(3.5rem,6vw,5.5rem) 0 0;background:transparent }
.vias > *{ max-width:none;margin-inline:0 }
.display--medio{ font-size:clamp(2.4rem,3.9vw,3.4rem) }
.seccion--clara{ background:var(--hueso);color:var(--roca) }
.seccion--clara .display{ color:var(--roca) }

.seccion__cab{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.seccion__cab .parrafo{ margin-top:1.6rem }
.seccion__cab--split{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:end }
.seccion__cab--split .parrafo{ margin-top:0 }

/* ---------- Filtro de grados ---------- */
.grados{ display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem }
.grado{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1rem;border:1.5px solid var(--linea);background:transparent;color:var(--claro-2);
  font-family:var(--sans);font-size:.88rem;font-weight:600;cursor:pointer;border-radius:2px;
  transition:border-color .2s,color .2s,background-color .2s;
}
.grado i{ width:12px;height:12px;background:var(--c);border-radius:2px;display:block }
.grado:hover{ color:var(--claro);border-color:var(--claro-2) }
.grado[aria-pressed="true"]{ background:var(--claro);color:var(--roca);border-color:var(--claro) }
.grado--todo[aria-pressed="true"]{ background:var(--via-1);border-color:var(--via-1) }

/* ---------- Tablas ---------- */
.tabla-wrap{ overflow-x:auto }
table{ width:100%;border-collapse:collapse;text-align:left }
.sectores{ min-width:820px }
.horario{ min-width:900px }
thead th{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--claro-2);padding:.7rem .9rem .7rem 0;border-bottom:1.5px solid var(--linea);
}
.seccion--clara thead th{ color:rgba(28,21,18,.55);border-color:var(--linea-o) }
tbody th,tbody td{ padding:1.1rem .9rem 1.1rem 0;border-bottom:1px solid var(--linea-2);vertical-align:baseline }
.seccion--clara tbody th,.seccion--clara tbody td{ border-color:var(--linea-o) }
tbody th{ font-weight:700;font-size:1.06rem;letter-spacing:-.01em }
tbody td{ font-size:.92rem;color:var(--claro-2) }
.seccion--clara tbody td{ color:rgba(28,21,18,.72) }

/* ---------- Lista de vías ---------- */
.vias-lista{ border-top:1.5px solid var(--linea) }
.vias-lista li.oculta{ display:none }
.via-item{
  width:100%;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;
  gap:.1rem .9rem;align-items:baseline;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--linea-2);
  padding:.95rem .5rem .95rem 0;cursor:pointer;color:inherit;font-family:var(--sans);
  transition:background-color .2s ease,transform .2s ease;
}
.via-item:hover{ background:rgba(244,237,225,.05);transform:translateX(.4rem) }
.via-item[aria-pressed="true"]{ background:rgba(242,194,48,.12) }
.via-item__n{ font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--claro-2);grid-row:span 2 }
.via-item__nom{ font-size:1.06rem;font-weight:700;letter-spacing:-.01em }
.via-item__meta{ grid-column:2/-1;font-size:.82rem;color:var(--claro-2);opacity:.8;margin-top:.15rem }
.via-item__gr{
  font-family:var(--display);font-size:1.5rem;font-weight:800;white-space:nowrap;
  justify-self:end;grid-row:span 2;align-self:center;
}
.via-item__gr[data-c="1"]{ color:var(--via-1) }
.via-item__gr[data-c="2"]{ color:var(--via-2) }
.via-item__gr[data-c="3"]{ color:var(--via-3) }
.via-item__gr[data-c="4"]{ color:var(--via-4) }
.via-item__gr[data-c="5"]{ color:var(--via-5) }

.gr{
  font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:.01em;
  white-space:nowrap;
}
.gr[data-c="1"]{ color:var(--via-1) }
.gr[data-c="2"]{ color:var(--via-2) }
.gr[data-c="3"]{ color:var(--via-3) }
.gr[data-c="4"]{ color:var(--via-4) }
.gr[data-c="5"]{ color:var(--via-5) }
.sectores .cifra{ font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--claro) }
.sectores .gr{ font-size:1.15rem }

/* ---------- Horario ---------- */
.horario tbody th{ font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--roca);width:5.5rem }
.horario td{ padding-right:.8rem }
.horario td b{ display:block;font-size:.94rem;font-weight:700;color:var(--roca);letter-spacing:-.01em }
.horario td span{ display:block;font-size:.76rem;color:rgba(28,21,18,.55);margin-top:.15rem }
.horario td.vacio{ color:rgba(28,21,18,.28) }
.horario tbody tr:hover{ background:rgba(28,21,18,.045) }

/* ---------- Abonos ---------- */
.abonos{ border-top:1.5px solid var(--linea) }
.abonos li{
  display:grid;grid-template-columns:minmax(0,13rem) 7rem minmax(0,1fr) auto;
  gap:1.5rem;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--linea-2);
  transition:background-color .2s ease;
}
.abonos li:hover{ background:rgba(244,237,225,.04) }
.abonos__nom{ font-family:var(--display);font-size:1.85rem;font-weight:700;text-transform:uppercase;line-height:1 }
.abonos__nom b{
  display:inline-block;vertical-align:middle;margin-left:.5rem;
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--roca);background:var(--via-1);padding:.2rem .45rem;border-radius:2px;
}
.abonos__pre{ font-family:var(--display);font-size:2.3rem;font-weight:900;color:var(--via-1);line-height:1 }
.abonos__txt{ font-size:.92rem;color:var(--claro-2);line-height:1.55 }
.abonos--destacada{ background:rgba(242,194,48,.07) }

/* ---------- Local ---------- */
.local{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,6vw,5rem);align-items:start }
.local .parrafo{ margin-top:1.5rem }
.local__datos{ margin-top:2.6rem;border-top:1.5px solid var(--linea-o) }
.local__datos > div{ display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--linea-o) }
.local__datos dt{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(28,21,18,.55);padding-top:.2rem }
.local__datos dd{ margin:0;font-size:.94rem;line-height:1.55;color:rgba(28,21,18,.85) }

.cita{ margin:0;border-top:1px solid var(--linea-o);padding-top:clamp(1.5rem,2.5vw,2.25rem) }
.cita p{ font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.06;text-transform:uppercase;text-wrap:pretty }
.cita footer{ margin-top:1.6rem }
.cita footer b{ display:block;font-size:.95rem }
.cita footer span{ display:block;margin-top:.2rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(28,21,18,.5) }

/* ---------- Reserva ---------- */
.reserva{ display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5rem);align-items:start }
.contacto{ margin-top:2.4rem;border-top:1.5px solid var(--linea) }
.contacto li{ display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--linea-2);font-size:.92rem;color:var(--claro-2) }
.contacto span{ font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.7;padding-top:.25rem }
.contacto a{ text-decoration:none;border-bottom:1px solid var(--linea) }
.contacto a:hover{ color:var(--via-1);border-color:var(--via-1) }

.form{ display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.2rem;border:1px solid var(--linea);padding:clamp(1.4rem,3vw,2.4rem);background:rgba(244,237,225,.03) }
.campo{ display:grid;grid-column:span 2;border:0;margin:0;padding:0;min-width:0 }
.campo--mitad{ grid-column:span 1 }
.campo--full{ grid-column:span 2 }
.campo label,.campo legend{ font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--claro-2);margin-bottom:.55rem;padding:0 }
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--claro);
  background:transparent;border:0;border-bottom:1.5px solid var(--linea);padding:.6rem 0;border-radius:0;
  transition:border-color .2s;
}
.campo select{ padding:.6rem .4rem .6rem 0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--claro-2) 50%),linear-gradient(135deg,var(--claro-2) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat }
.campo select option{ background:var(--roca-2);color:var(--claro) }
.campo input[type="date"]{ color-scheme:dark }
.campo input:hover,.campo select:hover{ border-color:var(--claro-2) }
.campo input:focus,.campo select:focus{ outline:0;border-color:var(--via-1) }
.campo input[aria-invalid="true"]{ border-color:var(--via-4) }
.error{ font-size:.75rem;color:var(--via-4);margin-top:.4rem;min-height:1em }

.chips{ display:flex;flex-wrap:wrap;gap:.5rem }
.chips label{ margin:0 }
.chips input{ position:absolute;opacity:0;width:0;height:0 }
.chips span{ display:block;padding:.5rem 1rem;border:1.5px solid var(--linea);cursor:pointer;font-size:.88rem;color:var(--claro-2);border-radius:2px;transition:all .18s ease }
.chips label:hover span{ border-color:var(--claro-2);color:var(--claro) }
.chips input:checked + span{ background:var(--claro);border-color:var(--claro);color:var(--roca);font-weight:700 }
.chips input:focus-visible + span{ outline:2px solid var(--via-1);outline-offset:3px }
.check{ display:flex!important;align-items:flex-start;gap:.7rem;font-size:.9rem!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--claro-2)!important;cursor:pointer;margin:0!important }
.check input{ width:18px;height:18px;flex:0 0 auto;margin-top:.1rem;accent-color:var(--via-1) }
.estado{ grid-column:span 2;font-size:.85rem;color:var(--via-1);min-height:1.2em }
.estado[data-tipo="error"]{ color:var(--via-4) }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie{ background:var(--roca-3);padding:clamp(3rem,5vw,4.5rem) var(--marco) 2rem;border-top:4px solid var(--via-1) }
.pie__grid{ max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--linea-2) }
.pie__marca{ font-family:var(--display);font-size:1.7rem;font-weight:900;text-transform:uppercase;margin-bottom:.7rem;line-height:1 }
.pie p{ font-size:.88rem;line-height:1.75;color:var(--claro-2) }
.pie nav{ display:grid;gap:.55rem;align-content:start }
.pie nav a{ font-size:.88rem;color:var(--claro-2);text-decoration:none }
.pie nav a:hover{ color:var(--via-1) }
.pie__legal{ max-width:var(--max);margin:1.4rem auto 0;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  font-size:.74rem;color:var(--claro-2);opacity:.65 }
.pie__legal a{ text-decoration:none;border-bottom:1px solid var(--linea) }

/* ==========================================================================
   Aparición
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .seccion__cab,.grados,.tabla-wrap,.vias-lista,.abonos,.local > *,.reserva > *{
    opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  }
  .visible .seccion__cab,.visible .grados,.visible .tabla-wrap,.visible .vias-lista,
  .visible .abonos,.visible .local > *,.visible .reserva > *{ opacity:1;transform:none }
  .visible .grados{ transition-delay:.06s }
  .visible .tabla-wrap,.visible .vias-lista,.visible .abonos{ transition-delay:.12s }
  .visible .local > *:nth-child(2),.visible .reserva > *:nth-child(2){ transition-delay:.1s }
}

/* ==========================================================================
   Adaptación
   ========================================================================== */
@media (max-width:1040px){
  .muro{ display:flex;flex-direction:column;gap:2.75rem }
  .muro__izq{ display:contents }
  .muro__texto{ order:1 }
  .muro__panel{ order:2;position:static;max-width:560px;width:100% }
  .vias{ order:3;padding-top:0 }
  .seccion__cab--split{ grid-template-columns:1fr;align-items:start }
  .local,.reserva{ grid-template-columns:1fr }
  .cita{ padding:1.5rem 0 0 }
  .abonos li{ grid-template-columns:minmax(0,11rem) 6rem minmax(0,1fr);gap:1rem 1.2rem }
  .abonos li .btn{ grid-column:2/-1;justify-self:start }
}
@media (max-width:820px){
  .nav,.barra > .btn{ display:none }
  .burger{ display:block }
  .pie__grid{ grid-template-columns:1fr;gap:2rem }
  .form{ grid-template-columns:1fr }
  .campo,.campo--mitad,.campo--full,.estado{ grid-column:span 1 }
  .abonos li{ grid-template-columns:1fr auto;gap:.35rem 1rem;padding:1.4rem 0 }
  .abonos__pre{ text-align:right }
  .abonos__txt{ grid-column:1/-1 }
  .abonos li .btn{ grid-column:1/-1;justify-self:start;margin-top:.5rem }
  .abonos__vacio{ display:none }
  .local__datos > div{ grid-template-columns:1fr;gap:.3rem }
}
@media (max-width:420px){
  .muro__acciones .btn{ width:100% }
  .grado{ font-size:.82rem;padding:.5rem .8rem }
}