/* ============================================================================
   WAKO v3 — TEMPLATE CLARO. Fuente de verdad: design2/PantallaWako.dc.html
   Mobile-first 390px. Desktop: formulario centrado 430px; landing 2 col ≥1024px.
   ========================================================================== */
:root{
  /* Fondo y tinta */
  --fondo:#F7FBF3; --tinta:#0A362B; --tinta-sub:#4E7264;
  --tinta-suave:#7FA292; --tinta-tenue:#9DB4A8;
  /* Marca / acción — CTA con TEXTO BLANCO */
  --verde:#16B873; --verde-hondo:#0FA463; --cta-a:#3ED489; --cta-b:#0FA463;
  --cta-sombra:0 16px 32px -12px rgba(15,164,99,.65);
  --verde-tile:rgba(22,184,115,.09); --verde-tile-borde:rgba(22,184,115,.28);
  --verde-suave:#E7F8EE;
  /* Amarillo Wako — recomendación e insight */
  --amarillo:#F7CE4F; --amarillo-tile:#FFF7DE; --amarillo-borde:#EFDFA4;
  --amarillo-tinta:#6E5407; --amarillo-icono:#D9A514; --amarillo-label:#8A7126;
  --amarillo-btn-tinta:#513E00;
  /* Lima — marcador de titular */
  --lima:#DDF7A9; --lima-tinta:#2E4A0B;
  /* Superficies */
  --carta:#FFFFFF; --borde:#E5EFE3; --campo:#F2F8F0; --track:#E9F2E6;
  --carta-sombra:0 18px 40px -30px rgba(8,58,49,.5);
  --glass-foto:rgba(255,255,255,.88);
  --barra:rgba(252,254,251,.92);
  /* Radios */
  --r-sheet:28px; --r-card:24px; --r-input:16px; --r-pill:999px;
  --error:#C2410C;
}
*{box-sizing:border-box}

/* ── ANTI-ZOOM EN MOBILE ───────────────────────────────────────────────────
   Tres zooms distintos y cada uno se corta distinto:
   1. Al tocar un input: iOS hace zoom si el font-size es < 16px. Por eso TODO
      campo editable va en 16px, sin excepción (se compensa con padding/letter
      spacing si visualmente hace falta más chico).
   2. Doble toque: `touch-action:manipulation` desactiva el double-tap-to-zoom
      sin matar el scroll ni el pinch de la página.
   3. Toques repetidos rápidos en + / −: además de manipulation, se cancela la
      selección de texto, que es lo que dispara el "callout" y el zoom en iOS.
   NO se usa maximum-scale=1 en el viewport: rompe el zoom accesible del usuario
   y iOS moderno lo ignora igual. ------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea,button{font-size:16px}
input,select,textarea,button,a,[role=button],.wk-tap{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.wk-tap,button,[role=button]{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:400 15px/1.5 'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100dvh;                       /* nunca 100vh: la barra del browser lo corta */
  overscroll-behavior-y:none;
}
.wk-app{
  position:relative;max-width:430px;margin:0 auto;min-height:100dvh;overflow-x:clip;
  padding:max(18px,env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom));
}
h1,h2,h3,.wk-num{font-family:'Onest','Figtree',system-ui,sans-serif;color:var(--tinta)}
h1{font-weight:700;font-size:36px;line-height:1.04;letter-spacing:-1.6px;margin:0}
h2{font-weight:700;font-size:28px;letter-spacing:-1.2px;margin:0}
.wk-h1-hero{font-size:45px;letter-spacing:-2.2px}
.wk-h1-mega{font-weight:800;font-size:54px;line-height:.92;letter-spacing:-2.6px}
.wk-italic{font-family:'Figtree';font-style:italic;font-weight:400;color:var(--tinta-sub)}
.wk-marca{background:var(--lima);color:var(--lima-tinta);transform:rotate(-1.2deg);
  display:inline-block;padding:0 10px;border-radius:6px}
.wk-label{font-family:'Figtree';font-weight:800;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tinta-suave)}
.wk-p{color:var(--tinta-sub);font-size:14.5px;line-height:1.5;margin:0}

/* glows suaves de color — nunca degradados oscuros, nunca ruido */
.wk-glow{position:absolute;width:300px;height:300px;border-radius:50%;z-index:0;
  filter:blur(44px);pointer-events:none;animation:wkDrift 20s ease-in-out infinite;
  background:radial-gradient(circle,rgba(62,212,137,.32),transparent 70%)}
.wk-glow--amarillo{background:radial-gradient(circle,rgba(247,206,79,.3),transparent 70%)}
.wk-z{position:relative;z-index:1}

@keyframes wkPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
@keyframes wkFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-.5deg)}}
@keyframes wkRing{0%{transform:scale(.72);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@keyframes wkShine{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(340%) skewX(-18deg)}}
@keyframes wkDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-26px) scale(1.12)}66%{transform:translate(-22px,16px) scale(.92)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* CTA — gradiente verde, TEXTO BLANCO */
.wk-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;
  height:58px;border-radius:var(--r-pill);border:0;width:100%;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,var(--cta-a),var(--cta-b));
  color:#fff;font-family:'Figtree';font-weight:800;font-size:16px;
  box-shadow:var(--cta-sombra);transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .2s}
.wk-cta:hover{filter:brightness(1.05)} .wk-cta:active{transform:scale(.985)}
.wk-cta .wk-shine{position:absolute;top:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:wkShine 4.6s infinite}
.wk-cta--between{justify-content:space-between;padding:0 8px 0 24px}
.wk-cta-circ{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex:0 0 44px}

.wk-ghost{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;width:100%;
  border-radius:var(--r-pill);background:var(--carta);border:1px solid var(--borde);
  color:var(--tinta-sub);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none}

/* Carta blanca — el patrón base del template claro */
.wk-carta{background:var(--carta);border:1px solid var(--borde);border-radius:var(--r-sheet);
  box-shadow:var(--carta-sombra)}
.wk-carta--verde{background:var(--verde-tile);border-color:var(--verde-tile-borde);box-shadow:none}
.wk-carta--amarilla{background:var(--amarillo-tile);border-color:var(--amarillo-borde);box-shadow:none}
/* glass SOLO sobre fotos y mapa, nunca anclado al viewport */
.wk-glass-foto{background:var(--glass-foto);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7)}

/* chips */
.wk-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--campo);border:1px solid var(--borde);font-size:11px;font-weight:600;color:var(--tinta-sub)}
.wk-pill--vivo{background:var(--verde-suave);border-color:var(--verde-tile-borde);color:var(--verde-hondo);font-weight:800}
.wk-pill--vivo::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--verde);animation:wkPulse 1.6s infinite}
.wk-pill--solida{background:linear-gradient(180deg,var(--cta-a),var(--cta-b));color:#fff;font-weight:800;border:0;
  box-shadow:0 8px 18px -8px rgba(15,164,99,.8)}
.wk-pill--foto{background:var(--glass-foto);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.7);color:var(--tinta)}

/* inputs — 16px SIEMPRE (anti-zoom iOS) */
.wk-input{width:100%;height:52px;border-radius:var(--r-input);background:var(--campo);
  border:2px solid transparent;color:var(--tinta);font-size:16px;padding:0 14px;font-family:'Figtree'}
.wk-input:focus{outline:none;border-color:var(--verde);background:var(--carta)}
.wk-input::placeholder{color:var(--tinta-tenue)}
.wk-sel{border:2px solid var(--verde)!important;background:var(--verde-suave)!important}
.wk-badge-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,var(--cta-a),var(--cta-b));display:flex;align-items:center;justify-content:center}

/* progreso */
.wk-prog{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.wk-back{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  background:var(--carta);border:1px solid var(--borde);color:var(--tinta);text-decoration:none;cursor:pointer}
.wk-prog-n{font-family:'Onest';font-weight:700;font-size:12px;color:var(--tinta-suave)}
.wk-prog-rail{height:4px;border-radius:999px;background:var(--track);overflow:hidden;margin-bottom:24px}
.wk-prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cta-a),var(--cta-b));
  transition:width .45s cubic-bezier(.2,.8,.2,1)}

/* barra DOCKEADA — fondo casi sólido, nada flotando suelto */
.wk-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--barra);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--borde);
  padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
.wk-dock-in{max-width:394px;margin:0 auto;display:flex;gap:9px;align-items:center}

.wk-error{color:var(--error);font-size:13px;margin-top:6px}

/* header con isologo centrado (todas las pantallas del formulario) */
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.wk-circ{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--carta);border:1px solid var(--borde);color:var(--tinta);text-decoration:none;cursor:pointer}
.wk-entrada{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--carta);border:1px solid var(--borde);color:var(--tinta-sub);
  font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}

/* círculo de especie con ilustración propia */
.wk-especie{width:58px;height:58px;border-radius:50%;background:var(--verde-suave);
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.wk-especie img{width:38px;height:38px;object-fit:contain}

/* DESKTOP: formulario centrado; la landing define su propio layout ≥1024px */
@media (min-width:1024px){
  .wk-app{padding-top:28px}
  .wk-dock{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0;
    position:sticky;padding-bottom:24px}
}