/* EntreGolf · capa de diseño: tipografía, colores, efectos y animaciones. Va después de estilo.css.
   Sin JavaScript todo se ve completo; app.js solo añade los efectos al desplazarse y al pasar el ratón.
   Con «reducir movimiento» activado en el móvil u ordenador, no se mueve nada. */

/* Fuentes libres (licencia SIL Open Font License, en /fonts): Outfit para títulos e Inter para el texto. */
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/outfit.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter.woff2") format("woff2"); }

:root {
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Outfit", "Inter", system-ui, sans-serif;
  --menta: #7ee2a8;
  --lima: #b8f171;
  --coral: #ff6b5e;
  --cielo: #38bdf8;
  --oro-claro: #ffe08a;
  --fondo: #f3f7f2;
  --grad-marca: linear-gradient(135deg, #0b3d2c 0%, #0f5a3f 45%, #128a52 100%);
  --grad-oro: linear-gradient(135deg, #ffe7a0 0%, #f2c94c 45%, #e9a92a 100%);
  --grad-brillo: linear-gradient(100deg, #ffe08a 0%, #fff3c4 25%, #9ef0c0 55%, #f2c94c 80%, #ffe08a 100%);
  --radio: 18px;
  --sombra: 0 1px 2px rgba(11, 61, 44, .05), 0 8px 28px rgba(11, 61, 44, .08);
  --sombra-alta: 0 2px 4px rgba(11, 61, 44, .06), 0 22px 48px rgba(11, 61, 44, .16);
  --muelle: cubic-bezier(.2, .8, .2, 1);
}
body { font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .marca, .plan-precio, .num-hoyo, .tt-fecha b { font-family: var(--fuente-titulos); }
h1 { letter-spacing: -.022em; word-spacing: .06em; font-weight: 800; text-wrap: balance; }
h2 { letter-spacing: -.008em; word-spacing: .06em; font-weight: 750; text-wrap: balance; }
h3 { word-spacing: .04em; }
h3 { letter-spacing: 0; font-weight: 650; }
::selection { background: var(--oro); color: var(--verde-osc); }
/* Enlaces del texto un poco más oscuros: se leen bien también en letra pequeña (contraste de 5,9 sobre blanco). */
a { color: #0f7346; }
html { scrollbar-color: #9cc9b0 transparent; }
input[type=checkbox], input[type=radio] { accent-color: var(--verde); }

/* ---------- Cabecera de cristal ---------- */
.cabecera { background: rgba(9, 52, 37, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .3s, background .3s; }
.cabecera.desplazada { background: rgba(9, 52, 37, .94); box-shadow: 0 10px 30px rgba(4, 30, 21, .28); }
.marca { font-weight: 800; letter-spacing: -.03em; }
.marca .icono-marca { transition: transform .5s var(--muelle); }
.marca:hover .icono-marca { transform: rotate(-12deg) scale(1.08); }
.menu a:not(.boton) { position: relative; background: none; }
.menu a:not(.boton)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad-oro); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--muelle); }
.menu a:not(.boton):hover::after, .menu a[aria-current=page]::after { transform: scaleX(1); }
.menu a[aria-current=page] { color: #fff; }
.progreso-lectura { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--oro), var(--menta), var(--cielo)); transform: scaleX(0); transform-origin: left; display: none; }
@supports (animation-timeline: scroll()) {
  .progreso-lectura { display: block; animation: progreso linear both; animation-timeline: scroll(root); }
}
@keyframes progreso { to { transform: scaleX(1); } }
/* Con «Campos» y «Organiza una partida privada» el menú ya no cabe en una línea en tabletas y portátiles pequeños:
   hasta 1199 px, menú desplegable (en estilo.css lo era hasta 860 px; aquí se repite lo mismo para el tramo de 861 a 1199).
   Desde 1200 px, enlaces algo más juntos para que quepan todos en una línea. */
@media (min-width: 1200px) {
  .menu { gap: 0; flex-wrap: nowrap; }
  .menu a { padding: 8px 6px; font-size: .88rem; white-space: nowrap; }
  .menu .boton { margin-left: 6px; }
}
@media (max-width: 1199px) {
  .boton-menu { display: block; }
  .menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 8px 16px 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); }
  .menu.abierto { display: flex; }
  .menu a, .menu .enlace { padding: 12px 8px; }
  .menu .boton { text-align: center; margin-top: 6px; }
}
@media (max-width: 1199px) {
  .menu { background: rgba(9, 52, 37, .98); border-radius: 0 0 20px 20px; }
  .menu.abierto { animation: bajar-menu .35s var(--muelle) both; }
  .menu.abierto > * { animation: subir .45s var(--muelle) both; }
  .menu.abierto > :nth-child(2) { animation-delay: .03s; } .menu.abierto > :nth-child(3) { animation-delay: .06s; }
  .menu.abierto > :nth-child(4) { animation-delay: .09s; } .menu.abierto > :nth-child(5) { animation-delay: .12s; }
  .menu.abierto > :nth-child(6) { animation-delay: .15s; } .menu.abierto > :nth-child(7) { animation-delay: .18s; }
  .menu a:not(.boton)::after { left: 8px; right: auto; width: 28px; bottom: 6px; }
}
@keyframes bajar-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Botones con brillo ---------- */
.boton { background: var(--grad-oro); position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--muelle), box-shadow .25s, background .2s, color .2s; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(233, 169, 42, .25); }
.boton:not(.claro):not(.peligro)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--muelle); }
.boton:not(.claro):not(.peligro):hover::after { transform: translateX(120%); }
.boton:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 26px rgba(233, 169, 42, .4); }
.boton:active { transform: translateY(0) scale(.98); }
.boton.claro { background: transparent; color: #0f7346; box-shadow: inset 0 0 0 2px currentColor; } /* verde más oscuro: se lee bien también sobre fondo verde claro */
.boton.claro:hover { box-shadow: inset 0 0 0 2px currentColor, 0 8px 20px rgba(11, 61, 44, .12); }
.boton.peligro { background: #fde8e8; box-shadow: none; }
.boton:disabled { transform: none; }
.boton:focus-visible, .puerta:focus-visible, .acceso:focus-visible, .tarjeta-torneo:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; }

/* ---------- Portadas: fondo vivo, entrada escalonada y título con brillo ---------- */
.heroe { background:
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(circle at 85% 20%, #1b6b4a 0, transparent 45%),
    linear-gradient(160deg, #082f22 0%, #0f5138 55%, #14704f 100%);
  isolation: isolate; }
/* El fondo vivo va en su propia capa (will-change): se pinta una vez y luego solo se mueve, sin repintar la página. */
.heroe::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(closest-side at 22% 30%, rgba(126, 226, 168, .38), transparent),
    radial-gradient(closest-side at 78% 22%, rgba(242, 201, 76, .26), transparent),
    radial-gradient(closest-side at 62% 82%, rgba(56, 189, 248, .2), transparent);
  animation: aurora 20s ease-in-out infinite alternate; }
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1); }
}
.heroe::after { z-index: 1; }
.heroe > .contenedor { position: relative; z-index: 2; }
.heroe-portada { padding: 64px 0 104px; }
.heroe-portada::after { display: none; } /* en la portada separa la cinta, no la curva */
.heroe h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.04; }
.heroe.pequeno h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
/* El brillo del título pasa tres veces y se queda quieto: moverlo siempre obliga a repintarlo sin parar. */
.heroe h1 span { color: var(--oro); background: var(--grad-brillo); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: brillo-texto 6s linear 3; }
@keyframes brillo-texto { to { background-position: -220% center; } }
.antetitulo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(126, 226, 168, .12); border: 1px solid rgba(126, 226, 168, .3); color: #b9f0cf; letter-spacing: .12em; }
.antetitulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 4px rgba(126, 226, 168, .2); }
.entradilla { color: #d9eee2; }
.heroe-grid > div:first-child > *, .heroe.pequeno > .contenedor > * { animation: subir .9s var(--muelle) both; }
.heroe-grid > div:first-child > :nth-child(2), .heroe.pequeno > .contenedor > :nth-child(2) { animation-delay: .08s; }
.heroe-grid > div:first-child > :nth-child(3), .heroe.pequeno > .contenedor > :nth-child(3) { animation-delay: .16s; }
.heroe-grid > div:first-child > :nth-child(4), .heroe.pequeno > .contenedor > :nth-child(4) { animation-delay: .24s; }
.heroe-grid > div:first-child > :nth-child(5), .heroe.pequeno > .contenedor > :nth-child(5) { animation-delay: .32s; }
.heroe-grid > div:first-child > :nth-child(6), .heroe.pequeno > .contenedor > :nth-child(6) { animation-delay: .4s; }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.aviso-gratis { border-radius: 18px; line-height: 1.5; background: rgba(242, 201, 76, .14); border: 1px solid rgba(242, 201, 76, .32); }

/* Las dos puertas (jugador / club): cristal, borde de color y flecha al pasar. */
.puerta { position: relative; overflow: hidden; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); padding: 20px 44px 20px 20px; border-radius: 20px; transition: transform .35s var(--muelle), background .3s, border-color .3s, box-shadow .35s; }
.puerta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(126, 226, 168, .22), transparent 60%); opacity: 0; transition: opacity .3s; }
.puerta::after { content: "→"; position: absolute; right: 18px; top: 18px; font-size: 1.3rem; color: var(--oro); opacity: .5; transform: translateX(-4px); transition: transform .35s var(--muelle), opacity .3s; }
.puerta:hover { background: rgba(255, 255, 255, .12); border-color: rgba(242, 201, 76, .55); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.puerta:hover::before { opacity: 1; }
.puerta:hover::after { opacity: 1; transform: translateX(2px); }
.puerta-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(242, 201, 76, .14); margin-bottom: 6px; transition: transform .4s var(--muelle); }
.puerta:hover .puerta-icono { transform: rotate(-8deg) scale(1.08); }
.enlace-organizar a { text-underline-offset: 3px; }

/* Dibujo del hoyo: marco, inclinación con el ratón y etiquetas que flotan. */
.heroe-visual { animation: aparecer 1.1s .25s var(--muelle) both; perspective: 1100px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
.ilus { position: relative; max-width: 470px; margin: 0 auto; }
.ilus-marco { border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 10px rgba(255, 255, 255, .05); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--muelle); }
.ilus-golf { display: block; width: 100%; height: auto; }
.chip-flota { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .88rem; font-weight: 650; color: #fff; white-space: nowrap; background: rgba(9, 52, 37, .55); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: flotar 6s ease-in-out infinite; }
.chip-flota .ico { width: 18px; height: 18px; color: var(--oro); }
.chip-1 { top: 7%; left: -6%; }
.chip-2 { top: 17%; right: -7%; animation-delay: -2s; }
.chip-3 { bottom: 8%; right: -6%; animation-delay: -4s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Partes del dibujo que se mueven (ciclo de 6 s: la bola sale, vuela y cae junto a la bandera). */
.ig-bandera { transform-box: fill-box; transform-origin: 0% 50%; animation: ondear 1.4s ease-in-out infinite alternate; }
@keyframes ondear { from { transform: skewY(-5deg) scaleX(.86); } to { transform: skewY(4deg) scaleX(1.04); } }
.ig-halo { transform-box: fill-box; transform-origin: center; animation: halo 5s ease-in-out infinite; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.ig-brillo { animation: titilar 3s ease-in-out infinite; }
.ig-b1 { animation-delay: -1s; } .ig-b2 { animation-delay: -2s; }
@keyframes titilar { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
.ig-nube { animation: nube 52s linear infinite; }
.ig-nube-1 { animation-delay: -18s; }
.ig-nube-2 { animation-duration: 76s; animation-delay: -50s; }
@keyframes nube { from { transform: translateX(-80px); } to { transform: translateX(640px); } }
.ig-pajaros { animation: pajaros 32s linear infinite; animation-delay: -8s; }
@keyframes pajaros { 0% { transform: translate(-60px, 0); } 50% { transform: translate(260px, -14px); } 100% { transform: translate(580px, 4px); } }
.ig-traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza 6s cubic-bezier(.3, .1, .45, 1) infinite; }
@keyframes traza { 0%, 12% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
.ig-vuelo { animation: vuelo 6s linear infinite; }
@keyframes vuelo { 0%, 84% { opacity: .9; } 94%, 100% { opacity: 0; } }
.ig-bola-vuela { animation: bola 6s linear infinite; }
@keyframes bola { 0% { opacity: 0; } 5%, 86% { opacity: 1; } 95%, 100% { opacity: 0; } }
.ig-bola-quieta { display: none; }
.ig-onda { opacity: 0; transform-box: fill-box; transform-origin: center; animation: onda 6s ease-out infinite; }
@keyframes onda { 0%, 41% { opacity: 0; transform: scale(.4); } 43% { opacity: .9; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(4.5); } }


/* El móvil de ejemplo cuando hay un torneo en directo. */
.movil-demo { animation: flotar 7s ease-in-out infinite; box-shadow: 0 40px 80px rgba(0, 0, 0, .38), 0 0 0 10px #0a2e22, 0 0 60px rgba(126, 226, 168, .25); }

/* ---------- Cinta con las modalidades ---------- */
.cinta-marco { position: relative; z-index: 3; overflow: hidden; margin: -60px 0 -30px; padding: 30px 0; pointer-events: none; }
.cinta { pointer-events: auto; }
.cinta { transform: rotate(-2deg); width: 106%; margin-left: -3%; background: var(--grad-marca); box-shadow: 0 14px 34px rgba(11, 61, 44, .25); border-block: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
.cinta-pista { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta-pista span { display: inline-flex; align-items: center; gap: 22px; padding: 14px 0 14px 22px; color: #eaf7ef; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; }
.cinta-pista span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 30%, #dfe9e3 60%, #b9c9bf 100%); box-shadow: 0 0 0 3px rgba(242, 201, 76, .35); }
.cinta-marco:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0; }
.seccion.clara { background: linear-gradient(180deg, #fff 0%, #fbfdfb 100%); }
.seccion > .contenedor > h2:not(.con-punto), .titulo-con-enlace h2 { position: relative; padding-bottom: 14px; }
.seccion > .contenedor > h2:not(.con-punto)::after, .titulo-con-enlace h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--verde), var(--menta), var(--oro)); }
.centrado > h2::after, .seccion > .contenedor.centrado > h2::after { left: 50%; margin-left: -28px; }
.seccion > .contenedor > h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 26px; }

/* Tarjetas de ventajas: luz que sigue al ratón, borde de color y el icono que gira. */
.ventaja, .seccion:not(.clara) .ventaja { position: relative; overflow: hidden; isolation: isolate; border: 1px solid transparent; border-radius: 22px; padding: 26px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--borde), var(--borde)) border-box; box-shadow: var(--sombra); }
.ventaja { transition: transform .4s var(--muelle), box-shadow .4s; }
.ventaja::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -20%), rgba(126, 226, 168, .2), transparent 60%); opacity: 0; transition: opacity .35s; }
.ventaja:hover, .seccion:not(.clara) .ventaja:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--verde), var(--menta) 50%, var(--oro)) border-box; }
.ventaja:hover::before { opacity: 1; }
.ventaja > span, .seccion:not(.clara) .ventaja > span { width: 56px; height: 56px; border-radius: 16px; background: var(--grad-marca); color: var(--oro); box-shadow: 0 10px 22px rgba(18, 138, 82, .28); transition: transform .5s var(--muelle); }
.ventaja:hover > span { transform: rotate(-8deg) scale(1.08); }
.ventaja h3 { font-size: 1.18rem; }

/* Pasos del día del torneo: números con degradado y una línea que los une. */
.pasos { position: relative; gap: 22px; }
.pasos li { border-radius: 22px; padding: 26px 24px 24px 82px; transition: transform .4s var(--muelle), box-shadow .4s; border: 1px solid var(--borde); }
.pasos li:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.pasos li::before { left: 22px; top: 22px; width: 44px; height: 44px; font-family: var(--fuente-titulos); font-size: 1.2rem; background: var(--grad-marca); box-shadow: 0 0 0 5px rgba(126, 226, 168, .18), 0 10px 20px rgba(11, 61, 44, .25); }
.pasos li b { font-family: var(--fuente-titulos); font-size: 1.12rem; }
@media (min-width: 900px) {
  .pasos::before { content: ""; position: absolute; left: 6%; right: 6%; top: 44px; height: 2px; z-index: 0; background: repeating-linear-gradient(90deg, rgba(18, 138, 82, .35) 0 8px, transparent 8px 16px); }
  .pasos li { z-index: 1; }
}

/* Tarjetas de torneos y accesos. */
.tarjeta-torneo, .acceso, .plan { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; transition: transform .4s var(--muelle), box-shadow .4s, border-color .3s; }
.tarjeta-torneo::before, .acceso::before, .plan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(126, 226, 168, .18), transparent 60%); opacity: 0; transition: opacity .35s; }
.tarjeta-torneo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--club), var(--menta), var(--oro)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--muelle); }
.tarjeta-torneo:hover, .acceso:hover, .plan:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.tarjeta-torneo:hover::before, .acceso:hover::before, .plan:hover::before { opacity: 1; }
.tarjeta-torneo:hover::after { transform: scaleX(1); }
.tt-fecha { background: var(--grad-marca); color: #fff; border-radius: 12px; padding: 6px 12px; }
.tt-fecha b { color: var(--oro); }
.acceso { border: 1px solid rgba(255, 255, 255, .5); }
.acceso b { font-family: var(--fuente-titulos); }
.plan.destacado { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--verde), var(--menta), var(--oro)) border-box; }
.plan-precio { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.etiqueta { letter-spacing: .01em; }
.etiqueta.vivo { background: linear-gradient(90deg, #ffe4e4, #ffd4d1); }

/* ---------- Campos de golf por provincia y preguntas frecuentes ---------- */
.indice-provincias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.indice-provincias a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); color: var(--verde-osc); font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .2s, border-color .2s, transform .25s var(--muelle); }
.indice-provincias a:hover { background: var(--verde-claro); border-color: #b8e0c8; transform: translateY(-2px); }
.indice-provincias small { color: var(--gris); font-weight: 500; }
.titulo-provincia { font-size: 1.3rem; margin: 30px 0 14px; scroll-margin-top: 84px; }
.tarjeta-campo .etiqueta { background: var(--verde-claro); color: var(--verde-osc); }
.preguntas { display: flex; flex-direction: column; gap: 10px; }
.preguntas details { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 4px 18px; box-shadow: var(--sombra); transition: box-shadow .3s; }
.preguntas details[open] { box-shadow: var(--sombra-alta); }
.preguntas summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; margin: 0; font-family: var(--fuente-titulos); font-size: 1.08rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-osc); font-weight: 700; transition: transform .3s var(--muelle); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 0 14px; color: var(--gris); }

/* ---------- Formularios ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { border-radius: 12px; border: 1.5px solid #cfdcd4; transition: border-color .2s, box-shadow .2s, background .2s; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):hover, select:hover, textarea:hover { border-color: #a9c7b6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(18, 138, 82, .16); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid rgba(18, 138, 82, .4); outline-offset: 2px; box-shadow: none; }
.tarjeta-form { position: relative; overflow: hidden; border-radius: 24px; padding: 30px; box-shadow: var(--sombra-alta); }
.tarjeta-form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--verde), var(--menta), var(--oro)); }
.formulario label { font-weight: 600; }
.exito { background: linear-gradient(90deg, #dcf7e7, #e9fbf0); border: 1px solid #b8e8cb; }
.error { border: 1px solid #f6c6c6; }
.aviso { border: 1px solid #f3e1a0; }

/* ---------- Torneo, cajas y tablas ---------- */
.cab-torneo { position: relative; overflow: hidden; isolation: isolate; }
.cab-torneo::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 80% 20%, rgba(242, 201, 76, .2), transparent), radial-gradient(closest-side at 15% 85%, rgba(126, 226, 168, .22), transparent), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 22px 22px; animation: aurora 24s ease-in-out infinite alternate; }
.caja { border-radius: 22px; }
.pestanas a { border-radius: 10px 10px 0 0; transition: color .2s, background .2s; }
.pestanas a:hover { background: var(--verde-claro); color: var(--verde-osc); }
.clasif tbody tr { transition: background .2s; }
.clasif tr:hover td { background: #f1f9f4; }
.tabla-panel { border-radius: 18px; }
.tabla-panel tbody tr:hover td { background: #f6fbf8; }

/* ---------- Panel del club ---------- */
.subnav { background: #fff; }
.subnav a { transition: color .2s; }
.subnav a:hover { color: var(--verde-osc); }
.subnav a.activa { border-image: linear-gradient(90deg, var(--verde), var(--menta), var(--oro)) 1; }

/* ---------- Pie ---------- */
.pie { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #0b3d2c 0%, #072a1e 100%); }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--verde), var(--menta), var(--oro), var(--menta), var(--verde)); }
.pie::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -260px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 226, 168, .12), transparent); }
.pie-cols a { transition: color .2s, transform .3s var(--muelle); width: fit-content; }
.pie-cols a:hover { transform: translateX(4px); }
.pie .marca { font-size: 1.35rem; }

/* ---------- Efectos al desplazarse (app.js marca .revelar solo lo que queda por debajo de la pantalla) ----------
   Al entrar en pantalla sube y aparece; al terminar, la tarjeta vuelve a su estilo normal (y a moverse al pasar el ratón). */
.revelar:not(.visto) { opacity: 0; transform: translateY(28px); }
.revelar.visto { animation: subir .9s var(--muelle) backwards; animation-delay: var(--retardo, 0s); }
@media print { .revelar:not(.visto) { opacity: 1 !important; transform: none !important; } .cinta-marco, .progreso-lectura { display: none !important; } }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .heroe-portada { padding: 40px 0 92px; }
  .heroe-grid { gap: 34px; }
  .heroe-visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .chip-1 { left: 0; top: -14px; }
  .chip-2 { right: 0; }
  .chip-3 { right: 0; }
  .seccion { padding: 48px 0; }
}
@media (max-width: 860px) {
}
@media (max-width: 480px) {
  .chip-flota { font-size: .78rem; padding: 7px 11px; }
  .chip-flota .ico { width: 15px; height: 15px; }
  .ilus-marco { border-radius: 24px; }
  .puerta { padding: 18px 42px 18px 18px; }
  .cinta-pista span { font-size: .95rem; padding: 12px 0 12px 18px; gap: 18px; }
  .ventaja, .seccion:not(.clara) .ventaja { padding: 22px; }
  .pasos li { padding: 22px 20px 20px 76px; }
}

/* En el marcador del móvil y en el panel no hay efectos de portada: cuenta la rapidez. */
.pagina-marcador .boton:not(.claro):not(.peligro)::after { display: none; }

/* ---------- Quien pide menos movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .heroe::before, .cab-torneo::before, .heroe-grid > div:first-child > *, .heroe.pequeno > .contenedor > *, .heroe-visual, .menu.abierto, .menu.abierto > * { animation: none !important; }
  .ig-traza { animation: none !important; stroke-dashoffset: 0; }
  .ig-vuelo { animation: none !important; opacity: .9; }
  .ig-bola-vuela, .ig-onda { display: none; }
  .ig-bola-quieta { display: inline; }
  .cinta-pista { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .cinta-pista span:nth-child(n+15) { display: none; }
  .revelar:not(.visto) { opacity: 1; transform: none; }
}

/* Campos de golf de una provincia (/campos/<provincia>): una ficha por campo con su localidad y sus enlaces. */
.campos-prov { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.campos-prov li { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.campos-prov h3 { font-size: 1.05rem; margin: 0; }
.campos-prov .cp-lugar { color: var(--gris); font-size: .9rem; margin: -6px 0 0; }
.campos-prov .cp-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.campos-prov .con-guia { border-color: #b8e0c8; box-shadow: 0 6px 18px rgba(11, 61, 44, .07); }
.campos-prov h3 a { color: inherit; text-decoration: none; }
.campos-prov h3 a:hover { text-decoration: underline; }
/* Página de un campo del catálogo (/campos/<provincia>/<campo>). */
.heroe .cp-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.datos-campo { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 20px; }
.datos-campo dt { color: var(--gris); font-weight: 600; }
.datos-campo dd { margin: 0; overflow-wrap: anywhere; }
/* Guías de golf (/golf/<guia>): texto largo con tablas, fórmula y glosario. */
.articulo h2 { margin-top: 34px; }
.articulo h2:first-child { margin-top: 0; }
.articulo h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.articulo ul, .articulo ol { padding-left: 22px; }
.articulo li { margin-bottom: 6px; }
.tabla-guia { width: 100%; border-collapse: collapse; margin: 14px 0 18px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--borde); }
.tabla-guia th, .tabla-guia td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-guia th { background: var(--verde-claro); font-weight: 600; }
.tabla-guia tr:last-child td { border-bottom: 0; }
.formula { background: #fff; border-left: 4px solid var(--verde); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.glosario { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; }
.glosario dt { font-weight: 700; }
.glosario dd { margin: 0; }
.cta-guia { margin: 30px 0 10px; }
@media (max-width: 560px) { .glosario { grid-template-columns: 1fr; gap: 2px; } .glosario dd { margin-bottom: 10px; } }
.titulo-provincia a { color: inherit; text-decoration: none; }
.titulo-provincia a:hover { text-decoration: underline; }
.heroe .migas a { color: #cfe5d8; }
.heroe .migas { color: #9fbfae; margin-bottom: 6px; }