/* ============================================================
   HÍPICA SIERRA DE MADRID — km 38,5 de la M-608

   QUÉ SOSTIENE ESTA PÁGINA
   No una foto: no tienen ninguna que aguante una portada (las suyas son
   instantáneas de hace años y en su ficha de Google hasta hay una foto de un
   vivero que no es suya). Lo que sí tienen, y no cuenta su web, son NÚMEROS:
   cinco pistas con medidas exactas, 56 boxes y dos generaciones.

   Así que la sostiene EL PLANO A ESCALA DE SUS CINCO PISTAS, dibujado en SVG
   con las medidas de verdad. De un vistazo se ve que la de competición
   (80 × 50) es más grande que las otras cuatro juntas. Ninguna hípica de la
   sierra tiene eso en su web, y no hace falta ninguna foto para hacerlo.

   COLOR — sale de sus fotos, no de una paleta de plantilla:
     arena  #e3d5b8  la tierra de las pistas
     hueso  #f6f3ec  el fondo, claro: esto es campo abierto, no un club de noche
     noche  #1e231b  el verde casi negro de las encinas a contraluz
     ocre   #b8791f  el amarillo de los muros de los establos
   Es CLARO a propósito. Las otras webs de Villalba salieron oscuras y aquí
   habría sido copiarse a uno mismo: un centro ecuestre se vende con luz.

   TIPOS: Fraunces en titulares (serif variable con eje «wonk», que le da un
   punto irregular y de oficio) y Karla en el texto.
   ============================================================ */

@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces.woff2') format('woff2');
  font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('fonts/karla.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; }

:root {
  --hueso: #f6f3ec;
  --arena: #e6d8bb;
  --arena2: #d3c19c;
  --noche: #1e231b;
  --encina: #333d2e;
  --tierra: #7d5c3a;
  --ocre: #a86d16;          /* sobre claro: 4,9:1 */
  --ocre-claro: #e0a13e;    /* sobre oscuro */
  --gris: #6b6558;
  --gris-claro: #a49d8d;
  --linea: rgba(30, 35, 27, 0.16);
  --linea-osc: rgba(246, 243, 236, 0.18);

  --display: 'Fraunces', Georgia, serif;
  --texto: 'Karla', system-ui, -apple-system, sans-serif;
  --ancho: 1440px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--hueso); color: var(--noche);
  font-family: var(--texto); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
picture { display: contents; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 3px; }

.env { width: min(100% - 2.6rem, var(--ancho)); margin-inline: auto; }
.salto { position: absolute; left: -9999px; top: 0; z-index: 99;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem;
  background: var(--noche); color: var(--hueso); font-weight: 700; text-decoration: none; }
.salto:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 600; line-height: 1.02;
  letter-spacing: -0.018em; margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 60;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); margin-bottom: 1.1rem; }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-variation-settings: 'opsz' 20; }
p { margin: 0 0 1rem; }
.guia { color: var(--gris); font-size: 1.06rem; max-width: 56ch; }
.osc .guia { color: var(--gris-claro); }

.rotulo {
  font-family: var(--texto); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre);
  margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.7rem;
}
.rotulo::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none; }
.osc .rotulo { color: var(--ocre-claro); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 54px; padding: 0 1.8rem; border: 1px solid var(--noche); border-radius: 999px;
  background: var(--noche); color: var(--hueso);
  font-family: var(--texto); font-size: 0.93rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--curva), background 0.25s ease, color 0.25s ease;
}
.boton:hover { transform: translateY(-2px); background: var(--encina); }
.boton--hueco { background: transparent; color: var(--noche); border-color: var(--linea); }
.boton--hueco:hover { background: transparent; border-color: var(--noche); }
.osc .boton { background: var(--ocre-claro); color: var(--noche); border-color: var(--ocre-claro); }
.osc .boton--hueco { background: transparent; color: var(--hueso); border-color: var(--linea-osc); }

/* ---------- cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 0.7rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--hueso) 92%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.cab--fija { border-bottom-color: var(--linea); }
.marca { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; }
.marca b { font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  font-variation-settings: 'WONK' 1, 'opsz' 30; letter-spacing: -0.02em; }
.marca span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 620px) { .marca span { display: none; } }
.cab__der { display: flex; align-items: center; gap: 0.6rem; }
.cab .boton { min-height: 44px; font-size: 0.84rem; padding: 0 1.2rem; }
.tel { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; font-variant-numeric: tabular-nums; }
.tel:hover { color: var(--ocre); }
@media (max-width: 860px) { .tel { display: none; } }

/* ---------- portada: foto entera, texto al lado, todo en una pantalla ---------- */
.portada { display: grid; grid-template-columns: 0.86fr 1.14fr;
  min-height: calc(100dvh - 5.2rem); background: var(--arena); }
.portada__caja { align-self: center; padding: clamp(2rem, 4vw, 3.6rem) clamp(1.6rem, 3.4vw, 3.6rem); }
.portada__foto { position: relative; overflow: hidden; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.portada h1 em { font-style: normal; color: var(--tierra); }
.portada__bajada { color: var(--noche); font-size: clamp(1rem, 1.1vw, 1.12rem); max-width: 34ch; margin: 1.2rem 0 0; }
.portada__acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.nota { display: flex; align-items: baseline; gap: 0.55rem; margin: 1.4rem 0 0;
  padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.nota b { font-family: var(--display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--tierra); }
.nota span { font-size: 0.88rem; color: var(--gris); }
/* El titular escalaba SOLO con el ancho, asi que en un portatil ancho y bajo
   (1440x800 es de los mas comunes) se salia por 12 px. El tope por alto lo
   resuelve sin tocar como se ve en una pantalla grande. */
@media (min-width: 1000px) { .portada h1 { font-size: clamp(2.4rem, min(5.2vw, 8.6vh), 5rem); } }
@media (max-height: 820px) and (min-width: 1000px) {
  .portada h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
  .portada__bajada { margin-top: 0.9rem; }
  .portada__acciones { margin-top: 1.2rem; }
  .nota { margin-top: 1rem; padding-top: 0.9rem; } .nota b { font-size: 1.8rem; }
}
/* Apilada, la foto iba casi cuadrada (1300/1208) y empujaba los botones 145 px
   por debajo de la primera pantalla de un movil. Recortada a 3/2 —y a 16/10 en
   el movil— la foto sigue leyendose y el boton de reservar entra sin scroll. */
@media (max-width: 1000px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { aspect-ratio: 3 / 2; order: -1; }
  .portada__foto img { object-position: 50% 46%; }
  .portada__caja { padding: 1.5rem clamp(1.2rem, 4vw, 2rem) 2rem; }
  .portada__bajada { margin-top: 0.9rem; }
  .portada__acciones { margin-top: 1.2rem; }
  .nota { margin-top: 1rem; padding-top: 0.9rem; }
}
@media (max-width: 620px) {
  .portada__foto { aspect-ratio: 16 / 10; }
  .portada h1 { font-size: clamp(2.1rem, 8.6vw, 2.8rem); }
  .portada__acciones .boton { flex: 1 1 100%; }
}

/* ============================================================
   LAS CINCO PISTAS — la pieza firma.
   Dibujadas a la MISMA escala, con sus medidas de verdad. Así se ve de un
   vistazo que la de competición es más grande que las otras cuatro juntas,
   que es exactamente lo que las diferencia y lo que su web no contaba.
   ============================================================ */
.pistas { padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--arena); }
.pistas__cab { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.plano { width: 100%; height: auto; display: block; }
.plano .cuerda { fill: var(--arena2); stroke: var(--noche); stroke-width: 1.6; }
.plano .cuerda--grande { fill: var(--tierra); fill-opacity: 0.22; }
.plano text { font-family: var(--texto); fill: var(--noche); }
.plano .nom { font-weight: 700; font-size: 13px; }
.plano .med { font-size: 11.5px; fill: var(--gris); font-variant-numeric: tabular-nums; }
.plano .esc { font-size: 10.5px; fill: var(--gris); letter-spacing: 0.12em; text-transform: uppercase; }
.plano .barra { stroke: var(--gris); stroke-width: 1.4; }
.pistas__pie { display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.cifra b { display: block; font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700; line-height: 1; font-variation-settings: 'WONK' 1; }
.cifra span { font-size: 0.86rem; color: var(--gris); }

/* ============================================================
   QUÉ SE PUEDE HACER — los tres públicos, cada uno con lo suyo
   ============================================================ */
.hacer { padding-block: clamp(3rem, 7vw, 5.5rem); }
.grupos { display: grid; gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); margin-top: 2.4rem; }
.grupo { background: var(--hueso); padding: clamp(1.6rem, 3vw, 2.4rem); }
.grupo__cab { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1rem; }
.grupo__n { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--ocre); }
.grupo ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.9rem; }
.grupo li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: baseline; }
.grupo li::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ocre); margin-top: 0.55rem; }
.grupo li b { display: block; font-weight: 700; }
.grupo li span { color: var(--gris); font-size: 0.95rem; }
@media (min-width: 900px) { .grupos { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   INSTALACIONES — los 56 boxes, dibujados de uno en uno
   ============================================================ */
.insta { background: var(--noche); color: var(--hueso); padding-block: clamp(3rem, 7vw, 5.5rem); }
.insta__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 940px) { .insta__rejilla { grid-template-columns: 1fr; } }
.insta h2 { color: var(--hueso); }
.boxes { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin-top: 1.6rem; }
/* En reposo los boxes ya se VEN. Antes eran verde sobre verde y solo
   aparecían al encenderse: si el JS no llegaba a dispararse, la sección se
   quedaba en un rectángulo vacío. Lo que se ve sin JavaScript tiene que
   funcionar; el encendido escalonado es el premio, no el requisito. */
.boxes i { display: block; aspect-ratio: 3 / 4; background: transparent;
  border: 1px solid rgba(224, 161, 62, 0.45); border-radius: 2px;
  transition: background 0.4s ease, border-color 0.4s ease; }
.boxes i.on { background: var(--ocre-claro); border-color: var(--ocre-claro); }
.lista-insta { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.7rem; }
.lista-insta li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--gris-claro); }
.lista-insta li::before { content: '—'; color: var(--ocre-claro); }

/* ---------- galería ---------- */
.gal { padding-block: clamp(3rem, 7vw, 5rem); }
.gal__rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; grid-auto-rows: 11vw; margin-top: 2rem; }
@media (max-width: 900px) { .gal__rejilla { grid-auto-rows: 24vw; } }
.gal figure { margin: 0; overflow: hidden; position: relative; background: var(--arena2); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.gal figure:hover img { transform: scale(1.04); }
.gal figcaption { position: absolute; inset: auto 0 0 0; padding: 0.9rem 1rem;
  font-size: 0.82rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(30,35,27,.86));
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.35s var(--curva); }
.gal figure:hover figcaption, .gal figure:focus-within figcaption { opacity: 1; transform: none; }
/* teselan exacto: 7+5 y 5+7 */
.g1 { grid-column: span 7; grid-row: span 2; }
.g2 { grid-column: span 5; grid-row: span 2; }
.g3 { grid-column: span 5; grid-row: span 2; }
.g4 { grid-column: span 7; grid-row: span 2; }
@media (max-width: 900px) { .g1,.g2,.g3,.g4 { grid-column: span 12; grid-row: span 2; } }

/* ---------- llegar ---------- */
.llegar { background: var(--arena); padding-block: clamp(3rem, 7vw, 5rem); }
.llegar__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 940px) { .llegar__rejilla { grid-template-columns: 1fr; } }
.ficha { display: grid; gap: 1.1rem; margin: 1.4rem 0 0; }
.ficha > div { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 0.25rem; }
.ficha dd { margin: 0; font-size: 1.08rem; }
.ficha dd a { text-decoration: none; border-bottom: 2px solid var(--linea);
  display: inline-flex; align-items: center; min-height: 26px; }
.ficha dd a:hover { border-color: var(--ocre); color: var(--ocre); }
.mapa { min-height: 320px; border: 1px solid var(--linea); overflow: hidden; background: #fff; margin-top: 1.4rem; }
.mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }
.mapa__aviso { width: 100%; min-height: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem; border: 0;
  background: #fff; font-family: var(--texto); font-size: 0.9rem; color: var(--gris);
  text-align: center; cursor: pointer; }
.mapa__aviso:hover { background: var(--hueso); }
.mapa__aviso b { font-size: 1.08rem; color: var(--noche); }
.mapa__aviso svg { width: 26px; height: 26px; color: var(--ocre); }

/* ---------- cierre y pie ---------- */
.cierre { background: var(--noche); color: var(--hueso); padding-block: clamp(3rem, 7vw, 5rem); text-align: center; }
.cierre h2 { color: var(--hueso); max-width: 18ch; margin-inline: auto; }
.cierre .guia { margin: 0 auto 1.8rem; }
.cierre__acciones { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.pie { padding-block: 2.2rem 1.6rem; border-top: 1px solid var(--linea); }
.pie__rejilla { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.pie__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie__legal a { font-size: 0.86rem; color: var(--gris); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 26px; }
.pie__legal a:hover { color: var(--ocre); }
.pie__nota { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linea);
  font-size: 0.85rem; color: var(--gris); }

.wasap { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #05300f; box-shadow: 0 12px 28px -8px rgba(0,0,0,.35);
  transition: transform 0.25s var(--curva); }
.wasap:hover { transform: scale(1.07); }
/* Flotante de WhatsApp. Apunta al 617 41 74 50, NO al 636 57 50 07:
   ese no tiene WhatsApp y el boton dejaria al visitante en un
   «este numero no esta en WhatsApp», que es peor que no tener boton.
   En un movil caia justo encima del borde derecho del boton
   «Llamar» de la portada: dos llamadas a la accion distintas peleando por el
   mismo dedo. Ahora solo sale cuando ya has pasado la portada, que es cuando
   de verdad no tienes otro boton a mano. Sin JS se queda visible siempre, que
   es el comportamiento seguro. */
.js .wasap { opacity: 0; transform: translate3d(0, 14px, 0) scale(.9); pointer-events: none;
  transition: opacity 0.3s var(--curva), transform 0.3s var(--curva); }
.js .wasap.vista { opacity: 1; transform: none; pointer-events: auto; }
.js .wasap.vista:hover { transform: scale(1.07); }
.wasap svg { width: 28px; height: 28px; }

/* la ocultación inicial SOLO con JS: sin esta guarda, si el JS falla o tarda
   el contenido se queda invisible para siempre */
.js .sube { opacity: 0; transform: translate3d(0, 24px, 0); }
.js .sube.dentro { opacity: 1; transform: none;
  transition: opacity 0.75s var(--curva), transform 0.85s var(--curva); }

@media (prefers-reduced-motion: reduce) {
  .js .sube, .js .sube.dentro { opacity: 1; transform: none; transition: none; }
  .boton:hover, .wasap:hover, .gal figure:hover img { transform: none; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .rotulo { font-size: 0.8rem; }
  .ficha dt, .pie__legal a, .pie__nota { font-size: 0.86rem; }
  .boxes { grid-template-columns: repeat(8, 1fr); }
}