@font-face{font-family:"Quicksand";src:url("fonts/quicksand.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
.fk-test{
  --marron:#5C4F56;--azul:#385DFF;--azul-h:#1E42DD;--navy:#1E2132;--amarillo:#FEE8A0;--gris:#F2F4F5;--blanco:#fff;
  --texto:#1E2132;--suave:#5f6372;--borde:#e3e6ea;
  --radio:20px;--sombra:0 10px 30px rgba(30,33,50,.10);
  --ease:cubic-bezier(.22,.8,.3,1);
}
.fk-test *{box-sizing:border-box}
.fk-test{margin:0;background:var(--gris);color:var(--texto);font:400 16px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;min-height:100dvh}
.fk-test img{max-width:100%;display:block}
.fk-test a{color:var(--azul)}
.fk-test h1,.fk-test h2,.fk-test h3{font-family:"Quicksand","Inter",sans-serif;font-weight:700;line-height:1.18;margin:0}
.fk-test button{font:inherit}
.fk-test :focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:12px}
.fk-test .app{max-width:520px;margin:0 auto;padding:0 18px calc(24px + env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.fk-test .topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 14px;min-height:62px}
.fk-test .brand-row{display:flex;align-items:center;gap:10px}
.fk-test .brand img{width:132px;height:auto}
.fk-test .demo-pill{font:700 11px/1 "Quicksand",sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--amarillo);color:var(--marron);padding:6px 9px;border-radius:99px}
.fk-test .back{background:none;border:0;color:var(--marron);font-weight:600;padding:8px 10px;margin-right:-10px;cursor:pointer;border-radius:12px}
.fk-test .back:hover{background:rgba(92,79,86,.08)}
.fk-test main{flex:1}
.fk-test .screen{display:none}
.fk-test .screen.is-active{display:block;animation:entra .5s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fk-test /* Inicio */
.hero{background:var(--marron);color:#fff;border-radius:28px;padding:30px 22px 26px;box-shadow:var(--sombra);position:relative;overflow:hidden;text-align:center}
.fk-test .hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(254,232,160,.10);top:-120px;left:-90px}
.fk-test .hero::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(56,93,255,.22);bottom:-110px;right:-70px}
.fk-test .hero>*{position:relative;z-index:1}
.fk-test .hero-logo{width:132px;margin:0 auto 18px;height:auto}
.fk-test .hero-pets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:260px;margin:0 auto 20px}
.fk-test .hero-pets span{font-size:34px;line-height:58px;height:58px;background:rgba(255,255,255,.10);border-radius:18px;animation:flota 4s ease-in-out infinite}
.fk-test .hero-pets span:nth-child(2n){animation-delay:-1.2s}
.fk-test .hero-pets span:nth-child(3n){animation-delay:-2.4s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fk-test .kicker{display:inline-block;font:700 12px/1 "Quicksand",sans-serif;letter-spacing:.1em;text-transform:uppercase;background:var(--amarillo);color:var(--marron);padding:7px 12px;border-radius:99px;margin:0 0 12px}
.fk-test .hero h1{font-size:31px;margin-bottom:12px;letter-spacing:-.01em}
.fk-test .lead{margin:0 auto 22px;color:rgba(255,255,255,.88);max-width:34ch;font-size:15.5px}
.fk-test .friend{background:rgba(254,232,160,.16);border:1px solid rgba(254,232,160,.35);border-radius:14px;padding:10px 12px;margin:-6px auto 18px;font-size:14px;max-width:34ch}
.fk-test .meta{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding:0;margin:16px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
.fk-test .meta li{white-space:nowrap}
.fk-test .meta li+li::before{content:"·";margin-right:16px;opacity:.6}
.fk-test .fine{font-size:12.5px;color:var(--suave);text-align:center;margin:16px 8px 0}
.fk-test /* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;cursor:pointer;font-family:"Quicksand",sans-serif;font-weight:700;text-decoration:none;transition:transform .15s var(--ease),background-color .2s,box-shadow .2s}
.fk-test .btn:active{transform:scale(.97)}
.fk-test .btn-big{width:100%;min-height:56px;font-size:18px;padding:14px 20px}
.fk-test .btn-primary{background:var(--azul);color:#fff;box-shadow:0 8px 20px rgba(56,93,255,.32)}
.fk-test .btn-primary:hover{background:var(--azul-h)}
.fk-test .btn-ghost{background:#fff;color:var(--marron);border:2px solid var(--marron)}
.fk-test .btn-ghost:hover{background:#faf8f9}
.fk-test .link-btn{display:block;margin:14px auto 0;background:none;border:0;color:var(--suave);text-decoration:underline;font-size:14px;cursor:pointer;padding:8px}
.fk-test /* Preguntas */
.progress{height:10px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--borde)}
.fk-test .progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--azul),#6f8bff);border-radius:99px;transition:width .5s var(--ease)}
.fk-test .qcount{font:700 13px/1 "Quicksand",sans-serif;color:var(--marron);margin:14px 2px 12px;letter-spacing:.02em}
.fk-test .qwrap{animation:entra .45s var(--ease) both}
.fk-test .qwrap.sale{animation:sale .22s ease-in both}
@keyframes sale{to{opacity:0;transform:translateX(-18px)}}
.fk-test .qtitle{font-size:25px;color:var(--navy);margin-bottom:6px}
.fk-test .qhint{color:var(--suave);font-size:14.5px;margin:0 0 18px}
.fk-test .options{display:grid;gap:12px}
.fk-test .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid transparent;border-radius:var(--radio);padding:15px 16px;min-height:72px;box-shadow:0 3px 12px rgba(30,33,50,.06);cursor:pointer;color:var(--navy);transition:border-color .2s,transform .15s var(--ease),box-shadow .2s,background-color .2s;animation:entra .45s var(--ease) both}
.fk-test .opt:nth-child(2){animation-delay:.05s}
.fk-test .opt:nth-child(3){animation-delay:.1s}
.fk-test .opt:nth-child(4){animation-delay:.15s}
.fk-test .opt:hover{border-color:rgba(56,93,255,.35)}
.fk-test .opt:active{transform:scale(.98)}
.fk-test .opt.sel{border-color:var(--azul);background:#f3f5ff;box-shadow:0 6px 18px rgba(56,93,255,.18)}
.fk-test .opt-ico{flex:none;width:46px;height:46px;border-radius:14px;background:var(--gris);display:grid;place-items:center;font-size:24px}
.fk-test .opt.sel .opt-ico{background:var(--amarillo)}
.fk-test .opt-txt{display:block}
.fk-test .opt-txt strong{display:block;font-family:"Quicksand",sans-serif;font-size:16.5px;line-height:1.25}
.fk-test .opt-txt small{display:block;color:var(--suave);font-size:13.5px;line-height:1.35;margin-top:2px}
.fk-test /* Lead magnet */
.gate-card{background:#fff;border-radius:28px;padding:24px 20px 18px;box-shadow:var(--sombra)}
.fk-test .kicker.dark{background:var(--amarillo)}
.fk-test .teaser{display:flex;align-items:center;gap:14px;background:var(--gris);border-radius:18px;padding:12px 14px;margin:2px 0 18px}
.fk-test .teaser-emoji{font-size:40px;width:64px;height:64px;border-radius:50%;background:var(--amarillo);display:grid;place-items:center;flex:none;animation:pop .6s var(--ease) both}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.fk-test .teaser-text{margin:0;color:var(--suave);font-size:14px}
.fk-test .teaser-text strong{color:var(--marron);font:700 21px/1.2 "Quicksand",sans-serif}
.fk-test .gate-card h2{font-size:23px;color:var(--navy);margin-bottom:8px}
.fk-test .gate-sub{color:var(--suave);font-size:14.5px;margin:0 0 16px}
.fk-test .field-label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.fk-test .field{width:100%;min-height:52px;border:2px solid var(--borde);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;color:var(--navy);background:#fff;transition:border-color .2s}
.fk-test .field:focus{outline:none;border-color:var(--azul)}
.fk-test .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--texto);margin:14px 0 4px;cursor:pointer}
.fk-test .check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--azul)}
.fk-test .error{color:#b42318;font-size:13px;margin:6px 0 0}
.fk-test #gateForm .btn{margin-top:14px}
.fk-test .rgpd{font-size:11.5px;color:var(--suave);line-height:1.45;margin:12px 0 0}
.fk-test /* Resultado */
.toast{background:var(--amarillo);color:var(--marron);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.4;margin-bottom:14px;animation:entra .4s var(--ease) both}
.fk-test .toast strong{font-family:"Quicksand",sans-serif}
.fk-test .result{background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--sombra)}
.fk-test .result-hero{background:var(--marron);color:#fff;text-align:center;padding:24px 20px 22px;position:relative;overflow:hidden}
.fk-test .result-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(56,93,255,.22);top:-120px;right:-80px}
.fk-test .result-hero>*{position:relative;z-index:1}
.fk-test .result-emoji{width:120px;height:120px;margin:4px auto 12px;border-radius:50%;background:var(--amarillo);display:grid;place-items:center;font-size:66px;box-shadow:0 0 0 8px rgba(254,232,160,.18);animation:pop .7s var(--ease) both}
.fk-test .result-hero h2{font-size:30px}
.fk-test .result-tag{margin:6px 0 14px;color:rgba(255,255,255,.85)}
.fk-test .match{display:flex;align-items:center;gap:10px;max-width:260px;margin:0 auto}
.fk-test .match-bar{flex:1;height:8px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}
.fk-test .match-bar span{display:block;height:100%;width:0;background:var(--amarillo);border-radius:99px;transition:width 1s var(--ease) .3s}
.fk-test .match-num{font:700 13px/1 "Quicksand",sans-serif;white-space:nowrap}
.fk-test .result-body{padding:20px 20px 22px}
.fk-test .result-desc{font-size:16px;margin:0 0 16px}
.fk-test .block{border-radius:18px;padding:14px 16px;margin-bottom:12px}
.fk-test .block h3{font-size:17px;margin-bottom:6px}
.fk-test .block ul{margin:0;padding:0;list-style:none}
.fk-test .block li{position:relative;padding-left:24px;margin:6px 0;font-size:14.5px;line-height:1.45}
.fk-test .good{background:#f1f4ff}
.fk-test .good h3{color:var(--azul-h)}
.fk-test .good li::before{content:"✓";position:absolute;left:2px;color:var(--azul);font-weight:700}
.fk-test .care{background:#fff8e0}
.fk-test .care h3{color:var(--marron)}
.fk-test .care li::before{content:"!";position:absolute;left:5px;top:0;color:var(--marron);font-weight:700}
.fk-test .commit{background:var(--gris)}
.fk-test .commit h3{color:var(--navy)}
.fk-test .commit p{margin:0;font-size:14.5px}
.fk-test .also{font-size:14.5px;margin:14px 0 8px}
.fk-test .also strong{color:var(--marron)}
.fk-test .adopt{font-size:13.5px;color:var(--suave);margin:8px 0}
.fk-test .sources{font-size:12px;color:var(--suave);margin:10px 0 0;border-top:1px solid var(--borde);padding-top:10px}
.fk-test .actions{display:grid;gap:12px;margin:18px 0}
.fk-test .community{display:flex;gap:12px;align-items:center;background:#fff;border-radius:20px;padding:14px 16px;text-decoration:none;color:var(--texto);font-size:14px;line-height:1.4;box-shadow:0 3px 12px rgba(30,33,50,.06)}
.fk-test .community strong{font-family:"Quicksand",sans-serif;color:var(--marron);font-size:15.5px}
.fk-test .community-emoji{font-size:28px;flex:none}
.fk-test .foot{text-align:center;padding:26px 0 6px;font-size:12.5px;color:var(--suave)}
.fk-test .foot img{width:92px;height:auto;margin:0 auto 6px;opacity:.85}
.fk-test .foot p{margin:0}
.fk-test .foot a{color:var(--marron)}
.fk-test .share-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s var(--ease);z-index:30;max-width:90vw;text-align:center}
.fk-test .share-toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:600px){.fk-test .app{padding-top:10px}
.fk-test .hero{padding:36px 34px 30px}
.fk-test .hero h1{font-size:36px}

}
@media (prefers-reduced-motion:reduce){.fk-test *,.fk-test *::before,.fk-test *::after{animation:none!important;transition:none!important}

}


/* Página contenedora (plantilla Elementor Canvas) */
body.fk-test-body{margin:0;background:#F2F4F5}
.fk-test{min-height:100vh;min-height:100dvh}
.fk-test .screen[hidden]{display:none}
.fk-test .notice-ok{background:#eef7ee;border:1px solid #bfe3c2;color:#1e4d25;border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:14px}
.fk-test .notice-warn{background:#fff8e0;border:1px solid #f1dd9a;color:#5C4F56;border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:14px}
.fk-test .btn[disabled]{opacity:.6;cursor:wait}

/* v1.0.4 · contraste sobre fondo marrón y emojis centrados (petición de Alex, 20/10) */
.fk-test .hero h1,.fk-test .result-hero h2{color:var(--amarillo)}
.fk-test .hero .lead{color:rgba(255,255,255,.92)}
.fk-test .hero-pets span{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;padding:0;margin:0}

/* v1.0.6 · «¿Ya tienes mascota?» en el formulario */
.fk-test .tiene{border:0;padding:0;margin:0 0 14px}
.fk-test .tiene legend{padding:0;margin:0 0 2px}
.fk-test .tiene .opcional{font-weight:400;color:var(--suave);font-size:13px}
.fk-test .tiene-hint{margin:0 0 10px;font-size:13.5px;color:var(--suave)}
.fk-test .tiene-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fk-test .tiene-opt{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border:1.5px solid var(--borde);border-radius:12px;background:#fff;font-size:14.5px;line-height:1.2;color:var(--navy);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fk-test .tiene-opt input{width:18px;height:18px;margin:0;accent-color:var(--azul);flex:0 0 auto}
.fk-test .tiene-opt small{font-size:11.5px;color:var(--suave);font-weight:400}
.fk-test .tiene-opt:has(input:checked){border-color:var(--azul);background:#EEF2FF}
.fk-test .tiene-none{grid-column:1 / -1}
@media (max-width:360px){.fk-test .tiene-grid{grid-template-columns:1fr}}

/* v1.1.0 · los emojis que WordPress convierte en <img class="emoji"> van en línea con el texto */
.fk-test img.emoji{display:inline!important;width:1em!important;height:1em!important;margin:0 .12em 0 0!important;vertical-align:-.12em!important;box-shadow:none!important;border:0!important;background:none!important}
/* v1.1.0 · chips condicionales bajo cada grupo (colores Faukota: crema #FEE8A0, marrón #5C4F56, Quicksand) */
.fk-test .tiene-opt:has(input:checked){border-color:var(--marron);background:var(--marron);color:var(--amarillo)}
.fk-test .tiene-opt:has(input:checked) small{color:var(--amarillo);opacity:.85}
.fk-test .tiene-opt input{accent-color:var(--marron)}
.fk-test .tiene-opt:has(input:checked) input{accent-color:var(--amarillo)}
.fk-test .esp-cond{background:var(--amarillo);border-radius:16px;padding:12px 12px 13px;margin:-2px 0 4px;font-family:"Quicksand","Inter",sans-serif;animation:fkEspIn .22s var(--ease)}
.fk-test .esp-cond[hidden]{display:none}
.fk-test .tiene-grid > .tiene-opt,.fk-test .tiene-grid > .esp-cond{order:var(--o2,0)}
.fk-test .tiene-grid > .esp-cond{grid-column:1 / -1}
.fk-test .tiene-grid > .tiene-none{order:9999}
@media (max-width:360px){.fk-test .tiene-grid > .tiene-opt,.fk-test .tiene-grid > .esp-cond{order:var(--o1,0)}}
@keyframes fkEspIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fk-test .esp-q{margin:0;font-weight:700;font-size:15px;line-height:1.3;color:var(--marron)}
.fk-test .esp-opc{font-size:12px;font-weight:600;opacity:.75;margin-left:2px;white-space:nowrap}
.fk-test .esp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.fk-test .esp-chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:7px 13px;border:2px solid var(--marron);border-radius:999px;background:#fff;color:var(--marron);font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.fk-test .esp-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fk-test .esp-chip:has(input:checked){background:var(--marron);color:var(--amarillo)}
.fk-test .esp-chip:has(input:focus-visible){outline:3px solid var(--marron);outline-offset:2px}
.fk-test .esp-nose{border-style:dashed;font-weight:600}
.fk-test .esp-nota{margin:0;font-size:14px;font-weight:700;color:var(--marron)}

/* v1.1.1 · campo corto opcional al marcar «Otro / no lo sé» (crema #FEE8A0 de fondo, marrón #5C4F56, Quicksand) */
.fk-test .esp-otro{margin-top:10px;animation:fkEspIn .22s var(--ease)}
.fk-test .esp-otro[hidden]{display:none}
.fk-test .esp-otro-lbl{display:block;margin:0 0 6px;font-family:"Quicksand","Inter",sans-serif;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--marron)}
.fk-test .esp-otro-in{display:block;width:100%;max-width:320px;min-height:44px;padding:9px 14px;border:2px solid var(--marron);border-radius:999px;background:#fff;color:var(--marron);font-family:"Quicksand","Inter",sans-serif;font-weight:600;font-size:16px;line-height:1.2;outline:none;-webkit-appearance:none;appearance:none}
.fk-test .esp-otro-in::placeholder{color:var(--marron);opacity:.55;font-weight:500}
.fk-test .esp-otro-in:focus-visible{outline:3px solid var(--marron);outline-offset:2px}


/* v1.3.5 · «Tu mascota ideal es…» más destacado (petición de Alex, 20/10/2026)
   Tarjeta crema #FEE8A0 con borde marrón #5C4F56, icono grande en círculo blanco y nombre grande en Quicksand.
   Contraste: marrón #5C4F56 sobre crema #FEE8A0 ≈ 6,4:1 (blanco 7,8:1). Animación suave; prefers-reduced-motion la quita. */
.fk-test .gate-card .teaser{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--amarillo);border:2px solid var(--marron);border-radius:22px;padding:20px 16px 20px;margin:4px 0 20px;box-shadow:0 6px 0 rgba(92,79,86,.14);animation:fkTeaserIn .55s var(--ease) both}
.fk-test .gate-card .teaser-emoji{font-size:50px;line-height:1;width:88px;height:88px;border-radius:50%;background:#fff;border:2px solid var(--marron);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(92,79,86,.16);animation:pop .6s .12s var(--ease) both}
.fk-test .gate-card .teaser-emoji img.emoji{width:1em!important;height:1em!important;margin:0!important;vertical-align:middle!important}
.fk-test .gate-card .teaser-text{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--marron);font-size:15px;line-height:1.3}
.fk-test .gate-card .teaser-label{font:600 15px/1.3 "Quicksand","Inter",sans-serif;color:var(--marron)}
.fk-test .gate-card .teaser-text strong,.fk-test .gate-card .teaser-name{display:block;color:var(--marron);font:700 32px/1.12 "Quicksand","Inter",sans-serif;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
@keyframes fkTeaserIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:360px){.fk-test .gate-card .teaser-text strong,.fk-test .gate-card .teaser-name{font-size:28px}.fk-test .gate-card .teaser-emoji{width:80px;height:80px;font-size:46px}}
@media (min-width:600px){.fk-test .gate-card .teaser{padding:24px 20px 24px}.fk-test .gate-card .teaser-text strong,.fk-test .gate-card .teaser-name{font-size:36px}}
@media (prefers-reduced-motion:reduce){.fk-test .gate-card .teaser,.fk-test .gate-card .teaser-emoji{animation:none!important}}