/* ==========================================================================
   base.css · fuentes, variables, reset, tipografía, botones y utilidades
   (lo que usa TODA la página; los estilos de cada sección están en sections.css)
   ========================================================================== */

/* Fuentes alojadas en el propio sitio (solo caracteres latinos, ~46 KB entre las dos) */
@font-face{font-family:'Bricolage Grotesque';src:url(../assets/fonts/bricolage.woff2) format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url(../assets/fonts/figtree.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* color */
  --ink:#0b2239;            /* texto principal */
  --ink-2:#3a566f;          /* texto secundario */
  --pool-950:#061a2c; --pool-900:#0a2b4a; --pool-800:#0d3d6b; --pool-600:#1065b8; --pool-500:#1a82e0;
  --aqua-400:#2fc7e6; --aqua-200:#bfeaf5; --aqua-100:#e4f6fb;
  --cream:#fff8ec; --sand:#f7ecd6;
  --sun:#ffc233; --sun-600:#f0a500; --coral:#ff6a4d;
  --wa:#0e7a3f;             /* verde de WhatsApp, oscurecido para que el texto blanco se lea bien */
  /* tipografía */
  --display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* formas y movimiento */
  --r-s:12px; --r-m:20px; --r-l:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* medidas */
  --gut:clamp(1.25rem,5vw,3rem);
  --section:clamp(4.5rem,10vw,8rem);
  --nav-h:68px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@supports (min-height:100svh){body{min-height:100svh}}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
a[href^="tel:"]{white-space:nowrap} /* un teléfono nunca se parte en dos renglones */
ul,ol{list-style:none;padding:0}
summary{cursor:pointer}
[hidden]{display:none!important}

/* ---------- accesibilidad ---------- */
:focus-visible{outline:3px solid var(--focus,var(--pool-500));outline-offset:3px;border-radius:4px}
.is-dark{--focus:var(--sun)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:2000;padding:.75rem 1.2rem;border-radius:var(--r-s);background:var(--ink);color:var(--cream);font-weight:700;text-decoration:none;transition:top .25s var(--ease)}
.skip:focus{top:1rem}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(2.25rem,5.6vw,4.1rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;line-height:1.1}
h2 em,h1 em{font-style:normal;color:var(--pool-600)}
p{text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pool-600)}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--sun)}
.lead{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:56ch}
.num{font-variant-numeric:tabular-nums lining-nums}
.eyebrow+h2{margin-top:1rem}
h2+.lead,h2+p{margin-top:1.2rem}

/* ---------- estructura ---------- */
.wrap{width:100%;max-width:calc(1200px + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--section)}
.head{max-width:46rem;margin-bottom:clamp(2rem,4.5vw,3.6rem)}
.head h2{margin-top:1rem}
.head .lead{margin-top:1.2rem}
.is-dark{color:var(--cream)}
.is-dark .eyebrow{color:var(--sun)}
.is-dark h2 em{color:var(--sun)}
.is-dark .lead{color:rgba(255,248,236,.78)}

/* ---------- iconos (los del <svg class="sprite"> y los inline) ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.i--fill{fill:currentColor;stroke:none}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;padding:.85rem 1.7rem;border-radius:999px;border:2px solid transparent;
  font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:.005em;text-decoration:none;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn .i{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn:hover .i-go{transform:translateX(4px)}
.btn--sun{background:var(--sun);color:var(--ink);box-shadow:0 12px 26px -10px rgba(240,165,0,.75)}
.btn--sun:hover{transform:translateY(-3px);background:#ffd05e;box-shadow:0 16px 30px -10px rgba(240,165,0,.85)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{transform:translateY(-3px);background:var(--pool-800)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 12px 26px -10px rgba(14,122,63,.7)}
.btn--wa:hover{transform:translateY(-3px);background:#0b6735}
.btn--ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn--ghost:hover{transform:translateY(-3px);background:var(--ink);border-color:var(--ink);color:var(--cream)}
.is-dark .btn--ghost{color:var(--cream)}
.is-dark .btn--ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--sm{min-height:44px;padding:.6rem 1.25rem;font-size:.92rem}
.link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--pool-600);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.1rem;transition:color .3s,gap .3s var(--ease)}
.link:hover{color:var(--ink);gap:.8rem}

/* ---------- cenefa griega (la de la pileta): se pinta con la máscara y se tiñe con --key-c ---------- */
.key{--key-h:33px;--key-p:calc(var(--key-h)*12/11);height:var(--key-h);background:var(--key-c,currentColor);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44' viewBox='0 0 48 44'%3E%3Cpath d='M1.5 40V4H36V36H12V16H28V24H20M36 40H48' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") 0 50%/auto 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44' viewBox='0 0 48 44'%3E%3Cpath d='M1.5 40V4H36V36H12V16H28V24H20M36 40H48' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") 0 50%/auto 100% repeat-x}
.key--sm{--key-h:22px}
.key-band{position:relative;overflow:hidden;pointer-events:none}
.key-band .key{width:calc(100% + var(--key-p))}

/* ---------- fotos con color de fondo mientras cargan ---------- */
.ph{background-color:var(--ph,#4d6c90)}