/* ═══════════════════════════════════════════════════════════
   Coming soon · 6º Torneo de Golf Grupo Anderson's (2026-09-17)
   La escena es el master del post separado en capas. Todo se coloca en «unidades de plano»:
   --pw / --ph son el ancho y alto del plano (la foto), y las capas van al 100 % de él.
   Vertical y tableta usan el plano cuadrado; desde 23:20 entra el plano ancho 16:9.
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --cielo-alto:#002672;        /* primera fila del cielo del master */
  --navy:#1A2043;
  --oliva-claro:#CFE0A6;
  --fuente:Axiforma,'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* plano cuadrado: centrado en la bola (47,2 % del ancho) y apoyado abajo */
  --pw:max(100vw, 90svh);
  --ph:var(--pw);
  --centro-bola:.4722;
  --plano-top:calc(100svh - var(--ph) * .98);
  /* bola con golfista dentro del plano (recorte de 360×485 en x 330, y 530 de 1080) */
  /* al 70 % del master, apoyada en el mismo punto (centro 510, base 1015) */
  --bola-x:35.556%;
  --bola-y:62.546%;
  --bola-w:23.333%;
}
@media (min-aspect-ratio:23/20){
  :root{
    --pw:max(100vw, 100svh * 1.7778);
    --ph:calc(var(--pw) * .5625);
    --centro-bola:.4844;
    /* si el plano es más alto que la ventana, se recorta sobre todo cielo */
    --plano-top:calc((100svh - var(--ph)) * .55);
    --bola-x:41.875%;
    --bola-w:13.125%;
  }
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--cielo-alto);
  color:#fff;font-family:var(--fuente);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
i,em{font-style:normal}
img{display:block;max-width:100%}

.cs__main{position:relative;height:100svh;min-height:480px;overflow:hidden}
.cs__oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Escena ── */
.escena{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,var(--cielo-alto) 0,#003080 40%,#0E5FB6 100%)}
.escena__plano{
  position:absolute;
  width:var(--pw);height:var(--ph);
  /* centrado en la bola, pero sin dejar hueco en los bordes cuando el plano mide lo mismo que la ventana */
  left:clamp(100vw - var(--pw), 50vw - var(--pw) * var(--centro-bola), 0px);
  top:var(--plano-top);
  transform-origin:50% 70%;
  transform:scale(1.04);   /* margen para el paralaje y la respiración: nunca asoma un borde */
  will-change:transform;
}
.capa{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;will-change:transform}
/* el cielo se estira hacia arriba con su primer color */
.capa--cielo{top:-60%;background:url(cielo.webp) bottom/100% 62.5% no-repeat,var(--cielo-alto)}
.capa--campo{background-image:url(campo.webp)}
.capa--nubes{
  inset:0 auto 0 0;width:calc(var(--pw) + var(--ph));
  background:url(nubes.webp) 0 0/var(--ph) var(--ph) repeat-x;
  animation:deriva 150s linear infinite;
}
.capa--nubes-lejos{
  top:-3%;width:calc(var(--pw) + var(--ph) * .72);
  background-size:calc(var(--ph) * .72) calc(var(--ph) * .72);
  background-position:calc(var(--ph) * -.3) 0;
  opacity:.5;filter:blur(.6px);
  animation:deriva-lejos 240s linear infinite;
}
@keyframes deriva{to{transform:translateX(calc(var(--ph) * -1))}}
@keyframes deriva-lejos{to{transform:translateX(calc(var(--ph) * -.72))}}

/* luz cálida que entra por la izquierda, como en la foto */
.capa--sol{
  background:radial-gradient(60% 45% at 8% 38%,rgba(255,236,200,.38),rgba(255,236,200,0) 70%);
  mix-blend-mode:screen;animation:respira 9s ease-in-out infinite alternate;
}
@keyframes respira{from{opacity:.55}to{opacity:1}}

/* brillo del agua: una banda de luz que cruza el lago, recortada con su máscara */
.capa--lago{
  -webkit-mask:url(lago.webp) 0 0/100% 100% no-repeat;mask:url(lago.webp) 0 0/100% 100% no-repeat;
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%) 0 0/60% 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 5px,rgba(255,255,255,.16) 6px,rgba(255,255,255,0) 8px);
  mix-blend-mode:soft-light;
  animation:agua 7s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes agua{
  0%{background-position:-70% 0,0 0}
  100%{background-position:230% 0,0 -24px}
}
@media (min-aspect-ratio:23/20){
  .capa--cielo{background-image:url(cielo-ancho.webp)}
  .capa--campo{background-image:url(campo-ancho.webp)}
  .capa--lago{-webkit-mask-image:url(lago-ancho.webp);mask-image:url(lago-ancho.webp)}
}

/* velo: sólo oscurece lo justo arriba para que el título se lea sobre las nubes */
.cs__velo{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 50% 50%,rgba(0,22,70,.32),rgba(0,22,70,0) 100%),
    linear-gradient(180deg,rgba(0,22,70,.3) 0,rgba(0,22,70,0) 35%)}

/* ── Texto ── */
.cs__arriba{
  /* centrado en la pantalla (Carlos, 17 sep) */
  position:absolute;inset:0;
  padding:max(20px, env(safe-area-inset-top) + 14px) 16px max(20px, env(safe-area-inset-bottom) + 14px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.cs__logo{position:relative;width:min(60vw, 22svh * 1.458, 340px);
  filter:drop-shadow(0 10px 24px rgba(0,12,40,.35))}
.cs__logo img{width:100%;height:auto}
/* reflejo que cruza el logo, recortado con la silueta del propio logo */
.cs__brillo{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(logo-6th-golf-tournament.webp) 0 0/100% 100% no-repeat;mask:url(logo-6th-golf-tournament.webp) 0 0/100% 100% no-repeat;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 58%) -150% 0/250% 100% no-repeat;
  mix-blend-mode:screen;
  animation:brillo 6.5s ease-in-out 3.2s infinite;
}
@keyframes brillo{0%{background-position:-150% 0}35%,100%{background-position:250% 0}}

.cs__titulo{
  margin:min(12px, 1.4svh) 0 0;
  font-weight:800;text-transform:uppercase;line-height:1;
  font-size:clamp(28px, min(9.4vw, 5.6svh), 46px);
  letter-spacing:.08em;padding-left:.08em;   /* compensa el tracking de la última letra */
  text-shadow:0 2px 18px rgba(0,16,56,.45);
}
.cs__pal{display:inline-block}

.cs__abajo{
  position:absolute;left:0;right:0;
  top:calc(max(20px, env(safe-area-inset-top) + 14px) + min(60vw, 22svh * 1.458, 340px) * .686 + clamp(28px, min(9.4vw, 5.6svh), 46px) + min(12px, 1.4svh) + min(14px, 1.8svh));
  display:flex;flex-direction:column;align-items:center;gap:min(14px, 1.8svh);
  padding:0 16px;text-align:center;
}
.cs__fecha{margin:0;display:flex;flex-direction:column;gap:2px;
  font-size:clamp(13px, min(3.8vw, 2.1svh), 17px);line-height:1.3;text-shadow:0 1px 10px rgba(0,16,56,.5)}
.cs__fecha-dia{font-weight:700}
.cs__fecha-lugar{font-weight:400;color:var(--oliva-claro)}

.cuenta{display:flex;gap:8px}
.cuenta__celda{
  min-width:clamp(60px, 17vw, 78px);
  padding:min(10px, 1.3svh) 8px min(8px, 1.1svh);
  border-radius:14px;
  background:rgba(4,22,66,.34);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.cuenta__celda b{
  display:block;font-weight:700;line-height:1;
  font-size:clamp(20px, min(6.4vw, 3.6svh), 30px);
  font-variant-numeric:tabular-nums;
}
.cuenta__celda span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85;padding-left:.14em}

/* ── Escritorio: título arriba como en el master; fecha y cuenta a los lados de la bola ── */
@media (min-aspect-ratio:23/20){
  .cs__logo{width:min(24svh * 1.458, 40vw, 460px)}
  .cs__titulo{font-size:clamp(30px, 5.2svh, 60px);margin-top:1.6svh}
  .cs__velo{background:
    radial-gradient(30% 36% at 50% 50%,rgba(0,22,70,.3),rgba(0,22,70,0) 100%),
    linear-gradient(180deg,rgba(0,22,70,.3) 0,rgba(0,22,70,0) 35%),
    linear-gradient(0deg,rgba(0,20,0,.22) 0,rgba(0,20,0,0) 30%)}
  .cs__abajo{
    top:auto;bottom:max(7svh, 36px);padding:0 clamp(20px, 3vw, 56px);
    display:grid;grid-template-columns:1fr max(22vw, 39.5svh) 1fr;align-items:end;gap:0;
  }
  .cs__fecha,.cuenta{
    padding:clamp(16px, 2.2svh, 24px) clamp(18px, 2vw, 30px);
    border-radius:20px;
    background:rgba(4,22,66,.4);
    border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  }
  .cs__fecha{grid-column:1;justify-self:end;text-align:left;font-size:clamp(15px, 2.1svh, 20px);gap:6px;text-shadow:none}
  .cs__fecha-dia{font-size:1.1em}
  .cuenta{grid-column:3;justify-self:start;gap:clamp(8px, 1.2vw, 18px)}
  .cuenta__celda{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;min-width:clamp(52px, 5vw, 76px)}
  .cuenta__celda b{font-size:clamp(26px, 4.2svh, 44px)}
}
/* escritorio estrecho (tableta horizontal): tarjetas más compactas a los lados de la bola */
@media (min-aspect-ratio:23/20) and (max-width:1100px){
  .cs__abajo{padding:0 16px;bottom:max(5svh, 24px)}
  .cs__fecha,.cuenta{padding:14px 16px;border-radius:16px}
  .cs__fecha{font-size:14px}
  .cuenta{gap:8px}
  .cuenta__celda{min-width:48px}
  .cuenta__celda b{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  .capa--nubes,.capa--sol,.capa--lago,.cs__brillo{animation:none}
}