/* ==========================================================================
   eg-ui.css | Estudio Graphica
   Sistema de diseño compartido por TODAS las páginas del sitio: tokens,
   tipografía, superficies, botones, navegación de vidrio, formularios,
   animaciones de entrada y el pie de página.

   Cómo se usa: cada página carga este archivo y, encima, su propio CSS
   (eg-home.css, eg-pages.css o blog/assets/style.css). Cualquier cambio de
   color, tipografía o animación base se hace AQUÍ una sola vez.

   Lo que hace el JS (assets/js/eg-ui.js) se apoya en estas clases:
   .rv (entrada al hacer scroll), .nav (vidrio claro/oscuro + progreso),
   .btn (botón magnético), [data-spot] (foco de luz), .shine (brillo de
   cristal), [data-par] (paralaje) y input[type=range] (relleno de la barra).
   ========================================================================== */

/* ---------- Tipografía: Izmir, alojada en el propio sitio ---------- */
@font-face{font-family:"Izmir";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/izmir-light.woff2") format("woff2"),url("/fonts/izmir-light.otf") format("opentype")}
@font-face{font-family:"Izmir";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/izmir-regular.woff2") format("woff2"),url("/fonts/izmir-regular.otf") format("opentype")}
@font-face{font-family:"Izmir";font-style:normal;font-weight:600 700;font-display:swap;src:url("/fonts/izmir-bold.woff2") format("woff2"),url("/fonts/izmir-bold.otf") format("opentype")}
@font-face{font-family:"Izmir";font-style:normal;font-weight:800 900;font-display:swap;src:url("/fonts/izmir-extrabold.woff2") format("woff2"),url("/fonts/izmir-extrabold.otf") format("opentype")}

/* ---------- Tokens ---------- */
:root{
  --y:#ffdd5a; --y-soft:#fff0ad; --y-deep:#e9c23a;
  --ink:#181818; --ink-2:#232220; --ink-3:#2f2d29;
  --paper:#f8f8f8; --muted:#5f5b50; --hair:#e3e0d4;
  --ok:#1f8a4c; --err:#b3392b;
  --f:"Izmir",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,5vw,72px);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scrollbar-color:#b9b39b var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f);letter-spacing:-.01em;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--ink);accent-color:var(--ink)}
::selection{background:var(--y);color:var(--ink)}
::-moz-selection{background:var(--y);color:var(--ink)}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;text-wrap:balance;line-height:1.06}
p{max-width:64ch;text-wrap:pretty}
ul,ol{padding:0}
:focus-visible{outline:3px solid var(--y-deep);outline-offset:3px;border-radius:6px}
.s-ink :focus-visible,.foot :focus-visible{outline-color:var(--y)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#c9c3aa;border-radius:8px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#b3ac8f}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Transición suave al navegar entre páginas (Chrome/Edge/Safari recientes; el resto navega normal) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--ease)}
.nav{view-transition-name:eg-nav}

/* ---------- Layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:880px}
.wrap--read{max-width:760px}
.pad{padding-block:clamp(84px,12vw,168px)}
section{position:relative;isolation:isolate;overflow:hidden;overflow:clip;scroll-margin-top:24px}
.lead{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--muted)}

/* ---------- Superficies ---------- */
.s-paper{background:var(--paper);color:var(--ink);--surface:var(--paper);--fg:var(--ink)}
.s-ink{background:var(--ink);color:var(--paper);--surface:var(--ink);--fg:var(--paper)}
.s-yellow{background:radial-gradient(900px 520px at 12% -10%,#fff3b8 0,transparent 62%),radial-gradient(800px 560px at 100% 110%,#e3b52a 0,transparent 60%),linear-gradient(160deg,#ffe36e,#ffd43b);color:var(--ink);--surface:var(--y);--fg:var(--ink)}
.s-ink .lead{color:rgba(248,248,248,.74)}
.s-yellow .lead{color:rgba(24,24,24,.8)}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.orb{position:absolute;pointer-events:none;border-radius:50%;z-index:-1;will-change:transform}
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px circle at var(--sx,70%) var(--sy,30%),rgba(255,221,90,.16),transparent 65%);opacity:var(--so,0);transition:opacity .6s}
.slab{position:absolute;z-index:-1;pointer-events:none;border-radius:84px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);will-change:transform}
.slab.dark{background:linear-gradient(145deg,rgba(24,24,24,.1),rgba(24,24,24,0) 70%);border-color:rgba(24,24,24,.08);box-shadow:none}

/* ---------- Énfasis dentro de títulos (los usa el panel: "Cursiva dorada" y "Resaltado dorado") ---------- */
.mark,.eg-accent,.eg-cursive,.h1-accent,.center h1 .cursive{font-style:normal;font-family:inherit;font-weight:inherit;position:relative;background:linear-gradient(var(--y),var(--y)) 0 90%/100% .4em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eg-cursive{background-size:100% .22em}
.eg-accent__line{display:none}
.s-ink .mark,.s-ink .eg-accent,.s-ink .eg-cursive,.s-ink .h1-accent{background:none;color:var(--y)}

/* ---------- Entrada al hacer scroll: visible por defecto, el JS lo arma ---------- */
.rv.is-armed{opacity:0;filter:blur(8px);transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms)}
.rv.is-armed.is-seen{opacity:1;filter:none;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.intro{animation:rise .9s var(--ease) backwards;animation-delay:var(--d,0ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}}
.w{display:inline-block;animation:wordIn 1s var(--ease) backwards;animation-delay:calc(var(--i,0)*65ms + 120ms)}
@keyframes mark{from{background-size:0% .4em}}
.page-title .mark,.page-title .eg-accent,.page-title .eg-cursive,.center h1 .h1-accent,.center h1 .cursive,.hero h1 .mark,.hero h1 .eg-accent,.hero h1 .eg-cursive{animation:mark 1.1s var(--ease) .9s both}
.rv.is-armed .ticks path,.rv.is-armed .way-list path,.rv.is-armed .incl path{stroke-dasharray:24;stroke-dashoffset:24}
.rv.is-armed.is-seen .ticks path,.rv.is-armed.is-seen .way-list path,.rv.is-armed.is-seen .incl path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) .5s}

/* ---------- Botones ---------- */
.btn{--bg:var(--y);--tx:var(--ink);--sw:var(--ink);--hv:var(--y);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border:2px solid var(--bg);border-radius:999px;background:var(--bg);color:var(--tx);font:600 16px/1.15 var(--f);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .35s var(--ease),transform .2s var(--ease),translate .3s var(--ease),border-color .35s var(--ease),opacity .25s}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--sw);transform:translateY(101%);border-radius:50% 50% 0 0/60% 60% 0 0;transition:transform .55s var(--ease),border-radius .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none;border-radius:0}
.btn:hover,.btn:focus-visible{color:var(--hv)}
.btn:active{transform:scale(.97)}
.btn{translate:var(--mx2,0px) var(--my2,0px)}
.btn svg{flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{min-height:44px;padding:0 20px;font-size:15px}
.btn--block{display:flex;width:100%}
.btn--ghost{--bg:transparent;--tx:var(--fg,var(--ink));--sw:var(--fg,var(--ink));--hv:var(--surface,var(--paper));border:1.5px solid currentColor}
.btn--ink{--bg:var(--ink);--tx:var(--paper);--sw:var(--y);--hv:var(--ink)}
.s-ink .btn:not(.btn--ghost){border-color:var(--y);--sw:var(--paper);--hv:var(--ink)}
.s-yellow .btn:not(.btn--ghost){--bg:var(--ink);--tx:var(--paper);--sw:var(--paper);--hv:var(--ink)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{pointer-events:none;opacity:.85;padding-right:56px}
.btn.is-loading::after{content:"";position:absolute;right:22px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:3px;text-underline-offset:5px;transition:text-decoration-color .3s,text-underline-offset .4s var(--ease)}
.link:hover{text-decoration-color:var(--ink);text-underline-offset:8px}
.s-ink .link:hover{text-decoration-color:var(--paper)}

/* ---------- Navegación de vidrio ---------- */
.nav{position:fixed;z-index:60;top:calc(14px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;width:min(840px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px 10px 24px;border-radius:999px;background:rgba(255,255,255,.52);color:var(--ink);-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);border:1px solid rgba(255,255,255,.6);box-shadow:0 16px 36px -18px rgba(24,24,24,.3),inset 0 1px 0 rgba(255,255,255,.85)}
.nav .brand{display:inline-flex;line-height:0;padding:0 6px}
.nav .brand img{height:24px;width:auto;transition:rotate .6s var(--ease)}
.nav .brand:hover img{rotate:-14deg}
.nav .lg-w{display:none}
.nav.on-dark .lg-b{display:none}
.nav.on-dark .lg-w{display:block}
.nav::after{content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:2px;border-radius:2px;background:var(--y);transform-origin:left;transform:scaleX(var(--sp,0));opacity:.95}
.nav-links{display:flex;gap:26px;margin-left:auto;margin-right:8px}
.nav-links a{font-size:14px;font-weight:500;text-decoration:none;color:rgba(24,24,24,.78);transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav,.nav a{transition:background .45s var(--ease),color .3s,border-color .45s var(--ease),box-shadow .45s}
.nav.on-dark{background:rgba(24,24,24,.66);border-color:rgba(255,255,255,.16);color:var(--paper);box-shadow:0 16px 36px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.nav.on-dark .nav-links a{color:rgba(248,248,248,.8)}
.nav.on-dark .nav-links a:hover,.nav.on-dark .nav-links a[aria-current]{color:var(--y)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font:600 15px/1 var(--f);letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:3px;text-underline-offset:6px;background:none;border:0;transition:text-decoration-color .3s,text-underline-offset .4s var(--ease)}
.nav-cta:hover{text-decoration-color:var(--ink);text-underline-offset:9px}
.nav-cta svg{transition:transform .45s var(--ease)}
.nav-cta:hover svg{transform:translateX(4px)}
.nav.on-dark .nav-cta{color:var(--paper)}
.nav.on-dark .nav-cta:hover{text-decoration-color:var(--paper)}
.nav-wa,.nav-back{display:none}
.nav-back{align-items:center;gap:8px;min-height:44px;padding:0 6px;font:500 14px/1 var(--f);text-decoration:none;color:rgba(24,24,24,.78)}
.nav-back svg{transition:transform .45s var(--ease)}
.nav-back:hover{color:var(--ink)}
.nav-back:hover svg{transform:translateX(-4px)}
.nav.on-dark .nav-back{color:rgba(248,248,248,.8)}
.nav--page .nav-back{display:inline-flex}
.nav--page .nav-links,.nav--page .nav-cta{display:none}
.dock{display:none}
@media(max-width:760px){
  .nav-links,.nav-cta{display:none}
  .nav{justify-content:space-between;padding:8px 8px 8px 22px}
  .nav-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--y);color:var(--ink);font:600 15px/1 var(--f);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s var(--ease)}
  .nav-wa:active{transform:scale(.96)}
  .nav--page .nav-wa{display:none}
  .dock{display:flex;position:fixed;z-index:60;left:50%;translate:-50% 0;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 32px));animation:dockIn .9s var(--ease) 1.4s backwards}
  @keyframes dockIn{from{opacity:0;transform:translateY(24px)}}
  .dock .btn{width:100%;min-height:58px;background:rgba(255,221,90,.78);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 14px 30px -12px rgba(120,92,0,.55),inset 0 1px 0 rgba(255,255,255,.7)}
}

/* ---------- Pie de página ---------- */
.foot{background:var(--ink);color:rgba(248,248,248,.6);padding:26px 0 calc(26px + env(safe-area-inset-bottom,0px));position:relative}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot img{height:22px;width:auto}
.foot p{font-size:13px;max-width:none}
.foot a{color:rgba(248,248,248,.82);text-underline-offset:3px;transition:color .25s}
.foot a:hover{color:var(--y)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
body.has-dock .foot{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media(min-width:761px){body.has-dock .foot{padding-bottom:26px}}

/* ---------- Íconos de lista (check dibujado) ---------- */
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.5}
.ticks svg{flex:none;width:26px;height:26px;padding:5px;border-radius:9px;background:var(--y);color:var(--ink);margin-top:-1px}
.s-ink .ticks svg{background:var(--y);color:var(--ink)}

/* ---------- Formularios ---------- */
.field{display:flex;flex-direction:column}
.field label{font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.field .hint{font-size:12px;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea,.whatsapp-row select{font-size:16px;padding:14px 16px;border-radius:16px;border:1.5px solid rgba(24,24,24,.14);background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s,background .25s;min-height:52px}
.field input::placeholder{color:rgba(24,24,24,.38)}
.field input:hover,.field select:hover{border-color:rgba(24,24,24,.32)}
.field input:focus,.field select:focus,.whatsapp-row select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,221,90,.55)}
.field input.invalid{border-color:var(--err);box-shadow:0 0 0 4px rgba(179,57,43,.12)}
.field-error{font-size:12.5px;color:var(--err);margin-top:6px;display:none}
.field.show-error .field-error{display:block;animation:rise .4s var(--ease)}
.field input[type=date]{font-family:var(--f)}

/* Casillas dibujadas (checkbox propio) */
.check-square{width:22px;height:22px;min-width:22px;border-radius:7px;border:1.5px solid rgba(24,24,24,.34);display:grid;place-items:center;color:var(--y);background:#fff;transition:background .25s var(--ease),border-color .25s,transform .35s var(--ease)}
.check-square svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .4s var(--ease)}
.check-square.active{background:var(--ink);border-color:var(--ink);transform:scale(1.06)}
.check-square.active svg{opacity:1;transform:none}

/* Barras deslizantes (el JS pone --rp con el porcentaje para pintar el relleno) */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--ink) var(--rp,50%),rgba(24,24,24,.14) var(--rp,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:6px solid var(--ink);box-shadow:0 8px 18px -6px rgba(24,24,24,.5);cursor:grab;transition:transform .25s var(--ease),border-width .25s var(--ease)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:6px solid var(--ink);box-shadow:0 8px 18px -6px rgba(24,24,24,.5);cursor:grab}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);cursor:grabbing}
input[type=range]:focus-visible{outline:3px solid var(--y-deep);outline-offset:6px}

/* ---------- Movimiento reducido y transparencia reducida ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .dock{animation:none}
  .w,.page-title .mark,.page-title .eg-accent,.page-title .eg-cursive{animation:none}
  .spot{display:none}
  @view-transition{navigation:none}
}
@media(prefers-reduced-transparency:reduce){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .nav.on-dark{background:var(--ink)}
  .dock .btn{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--y)}
}