/* ÁLZARA — Duo: formularios por pantallas al estilo Duolingo.
   Guía con bocadillo, barra gruesa, botones con relieve y una sola cosa por pantalla.
   Todo va con prefijo duo- para poder meterlo dentro de cualquier página. */

.duo{
  --d-bg:#0A0A0B; --d-bg-2:#141416; --d-bg-3:#1D1D21; --d-tinta:#F5F5F3; --d-tinta-60:#A3A3AB;
  --d-tinta-30:#6E6E77; --d-linea:#2A2A2F; --d-oro:#C9A96A; --d-oro-hondo:#8E7341; --d-oro-suave:rgba(201,169,106,.14);
  --d-sobre-oro:#0A0A0B; --d-rojo:#E57373;
  --d-muelle:cubic-bezier(.34,1.56,.64,1); --d-curva:cubic-bezier(.16,1,.3,1);
  color:var(--d-tinta);font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;
}
/* modo día: vale tanto para las páginas sueltas (data-tema) como para las del sitio (theme-light) */
[data-tema="dia"] .duo,.theme-light .duo,[data-theme="light"] .duo{
  --d-bg:#F3F2EE; --d-bg-2:#FFFFFF; --d-bg-3:#ECEBE5; --d-tinta:#111112; --d-tinta-60:#5A5A54;
  --d-tinta-30:#8A8A82; --d-linea:#E2E0D8; --d-oro:#A8842F; --d-oro-hondo:#7A5F1F; --d-oro-suave:rgba(168,132,47,.12);
  --d-sobre-oro:#FFFFFF; --d-rojo:#B4453F;
}
.duo *,.duo *::before,.duo *::after{box-sizing:border-box}
.duo :where(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0}
.duo :where(button,input,textarea,select){font-family:inherit;color:inherit}
/* sin peso: así los botones-enlace (.duo-boton) mandan sobre el color de enlace */
:where(.duo) a{color:var(--d-oro)}
:where(.duo) em{font-style:normal;color:var(--d-oro)}
.duo-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.duo-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* página entera (las landings sueltas) */
.duo-app{max-width:560px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:0 16px;overflow-x:clip}
/* tarjeta (dentro de otra página) */
.duo-tarjeta{overflow-x:clip;max-width:560px;margin:0 auto;display:flex;flex-direction:column;background:var(--d-bg);border:2px solid var(--d-linea);border-radius:26px;padding:6px 20px 20px;min-height:520px}

/* ── arriba: volver, barra gruesa y tema ── */
.duo-arriba{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:14px;padding:16px 0 8px}
.duo-redondo{width:40px;height:40px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--d-tinta-30);transition:color .2s,opacity .3s}
.duo-redondo:hover{color:var(--d-tinta)}
.duo-redondo svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.duo-redondo[hidden]{display:grid!important;opacity:0;pointer-events:none}
.duo-tema .duo-luna{display:none} [data-tema="dia"] .duo-tema .duo-sol{display:none} [data-tema="dia"] .duo-tema .duo-luna{display:block}
.duo-barra{height:16px;border-radius:99px;background:var(--d-bg-3);overflow:hidden}
.duo-barra i{display:block;height:100%;width:0;border-radius:99px;background:var(--d-oro);position:relative;transition:width .8s var(--d-muelle)}
.duo-barra i::after{content:"";position:absolute;left:10px;right:10px;top:4px;height:4px;border-radius:99px;background:rgba(255,255,255,.35)}
.duo-marca{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--d-tinta-60);text-decoration:none}
.duo-orbe{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--d-oro);position:relative}
.duo-orbe::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--d-oro)}
/* en la portada y al final se ve la marca; en medio, la barra */
/* data-duo-en lo pone duo.js en la raíz del formulario (la .duo puede ser el body) */
[data-duo-en="0"] .duo-barra,.duo-fin .duo-barra{display:none}
[data-duo-en]:not([data-duo-en="0"]):not(.duo-fin) .duo-marca{display:none}

/* ── el guía: Vajtan con su bocadillo, como el búho de Duolingo ── */
.duo-guia{display:flex;align-items:flex-end;gap:12px;margin:14px 0 22px}
.duo-guia img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--d-oro);animation:duo-respira 3.2s ease-in-out infinite}
@keyframes duo-respira{50%{transform:translateY(-3px)}}
.duo-bocadillo{position:relative;background:var(--d-bg-2);border:2px solid var(--d-linea);border-radius:18px;padding:12px 16px;font-weight:600;font-size:1rem;line-height:1.4}
.duo-bocadillo::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--d-bg-2);border-left:2px solid var(--d-linea);border-bottom:2px solid var(--d-linea);transform:rotate(45deg)}
.duo-bocadillo.duo-habla{animation:duo-habla .5s var(--d-muelle)}
@keyframes duo-habla{from{opacity:0;transform:scale(.85) translateY(6px);transform-origin:left bottom}}

/* ── pantallas ── */
.duo-pantalla{flex:1;display:flex;flex-direction:column}
.duo-pantalla[hidden]{display:none}
.duo-pantalla.duo-entra{animation:duo-entra .5s var(--d-curva)}
@keyframes duo-entra{from{opacity:0;transform:translateX(28px)}}
.duo-pantalla.duo-vuelve{animation:duo-vuelve .5s var(--d-curva)}
@keyframes duo-vuelve{from{opacity:0;transform:translateX(-28px)}}
.duo-h1{font-size:clamp(2rem,8.4vw,2.9rem);font-weight:800;line-height:1.06;letter-spacing:-.04em;margin-bottom:12px}
.duo-h2{font-size:clamp(1.55rem,6.4vw,2.1rem);font-weight:800;line-height:1.12;letter-spacing:-.03em;margin-bottom:8px}
.duo-sub{color:var(--d-tinta-60);font-size:1.02rem;margin-bottom:22px}
.duo-pregunta{font-weight:700;font-size:1.05rem;margin:4px 0 12px}

/* ── botones con relieve (el gesto de Duolingo) ── */
.duo-boton{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:0;border-radius:16px;padding:17px 22px;font-size:1.06rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
  background:var(--d-oro);color:var(--d-sobre-oro);cursor:pointer;text-decoration:none;
  box-shadow:0 5px 0 var(--d-oro-hondo);transform:translateY(0);transition:transform .08s,box-shadow .08s,filter .2s,opacity .2s;
}
.duo-boton:hover{filter:brightness(1.06)}
.duo-boton:active{transform:translateY(5px);box-shadow:0 0 0 var(--d-oro-hondo)}
.duo-boton:disabled{opacity:.5;cursor:default;transform:none;box-shadow:0 5px 0 var(--d-oro-hondo)}
.duo-boton svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
.duo-boton--claro{background:var(--d-bg-2);color:var(--d-tinta);border:2px solid var(--d-linea);box-shadow:0 4px 0 var(--d-linea)}
.duo-elecciones{display:grid;gap:12px}
.duo-elecciones--dos{grid-template-columns:1fr 1fr}
.duo-eleccion{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--d-bg-2);border:2px solid var(--d-linea);border-radius:18px;padding:16px 18px;
  box-shadow:0 4px 0 var(--d-linea);transition:transform .08s,box-shadow .08s,border-color .2s,background .2s;
}
.duo-eleccion:hover{border-color:var(--d-tinta-30)}
.duo-eleccion:active,.duo-eleccion.duo-elegida{transform:translateY(4px);box-shadow:0 0 0 var(--d-linea)}
.duo-eleccion.duo-elegida{border-color:var(--d-oro);background:var(--d-oro-suave)}
.duo-eleccion .duo-emo{font-size:1.9rem;line-height:1}
.duo-eleccion b{display:block;font-size:1.08rem;font-weight:700}
.duo-eleccion small{display:block;color:var(--d-tinta-60);font-size:.9rem}
.duo-eleccion > svg{width:18px;height:18px;stroke:var(--d-tinta-30);fill:none;stroke-width:2.4}
.duo-eleccion--sola{grid-template-columns:auto 1fr}
.duo-chips{display:flex;flex-wrap:wrap;gap:8px}
.duo-chip{font-size:.92rem;font-weight:600;border:2px solid var(--d-linea);border-radius:99px;padding:8px 14px;background:var(--d-bg-2);color:var(--d-tinta-60);cursor:pointer;box-shadow:0 3px 0 var(--d-linea);transition:transform .08s,box-shadow .08s,border-color .2s}
.duo-chip:active,.duo-chip.duo-elegida{transform:translateY(3px);box-shadow:0 0 0 var(--d-linea)}
.duo-chip.duo-elegida{border-color:var(--d-oro);color:var(--d-oro);background:var(--d-oro-suave)}
.duo-confianza{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;font-size:.84rem;font-weight:600;color:var(--d-tinta-60)}

/* ── campos ── */
.duo-campo{margin-bottom:12px}
.duo-campo label{display:block;font-size:.84rem;font-weight:700;color:var(--d-tinta-60);margin:0 0 6px 4px}
.duo-campo :where(input,textarea,select){width:100%;background:var(--d-bg-2);border:2px solid var(--d-linea);border-radius:16px;padding:16px 18px;font-size:1.08rem;font-weight:500;caret-color:var(--d-oro);transition:border-color .2s}
.duo-campo textarea{resize:vertical;min-height:110px}
.duo-campo :where(input,textarea)::placeholder{color:var(--d-tinta-30)}
.duo-campo :where(input,textarea,select):focus{outline:none;border-color:var(--d-oro)}
.duo-campo.duo-mal :where(input,textarea){border-color:var(--d-rojo);animation:duo-tiembla .4s}
@keyframes duo-tiembla{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.duo-casilla{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--d-tinta-60);margin:6px 0 4px;cursor:pointer}
.duo-casilla input{width:20px;height:20px;accent-color:var(--d-oro);flex:none;margin-top:1px}
.duo-error{min-height:1.4em;font-size:.92rem;font-weight:600;color:var(--d-rojo)}
.duo-nota{font-size:.84rem;color:var(--d-tinta-60);text-align:center;margin-top:12px}
.duo-letra{font-size:.72rem;line-height:1.6;color:var(--d-tinta-30)}
.duo-letra a{color:var(--d-tinta-30)}

/* ── resumen tipo «plan» ── */
.duo-plan{position:relative;border:3px solid var(--d-oro);border-radius:22px;background:var(--d-oro-suave);padding:22px 18px 18px;margin:10px 0 22px}
.duo-plan__sello{position:absolute;top:-13px;left:18px;background:var(--d-oro);color:var(--d-sobre-oro);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.duo-filas{list-style:none;display:grid}
.duo-filas li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:2px solid var(--d-linea);font-size:.95rem}
.duo-filas li:last-child{border:0}
.duo-filas span{color:var(--d-tinta-60)}
.duo-filas b{font-weight:700;text-align:right}

/* el botón principal se queda abajo, a mano del pulgar */
/* justo debajo del contenido (nunca al fondo de una pantalla vacía) y pegado abajo si el contenido es largo */
.duo-accion{position:sticky;bottom:0;z-index:2;margin-top:14px;padding:12px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--d-bg) 26%)}
/* el botón principal siempre llama la atención: un anillo dorado que late */
.duo-accion .duo-boton{position:relative}
.duo-accion .duo-boton::after{content:"";position:absolute;inset:-5px;border-radius:21px;border:2px solid var(--d-oro);opacity:0;pointer-events:none;animation:duo-anillo 2.2s var(--d-curva) 1s infinite}
@keyframes duo-anillo{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.07,1.25)}}
.duo-tarjeta .duo-accion{position:static;padding-bottom:4px;background:none}
.duo-pie{padding:8px 0 calc(14px + env(safe-area-inset-bottom));text-align:center;font-size:.7rem;color:var(--d-tinta-30)}
.duo-pie a{color:var(--d-tinta-30)}

/* ── fin: el sello que se dibuja ── */
.duo-sello{width:72px;height:72px;border-radius:50%;background:var(--d-oro);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 5px 0 var(--d-oro-hondo)}
.duo-sello svg{width:34px;height:34px;stroke:var(--d-sobre-oro);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:duo-traza .7s .3s var(--d-curva) forwards}
@keyframes duo-traza{to{stroke-dashoffset:0}}

/* ── la pregunta al irse ── */
.duo-salida{margin:auto;width:min(440px,calc(100% - 24px));border:2px solid var(--d-linea);border-radius:24px;background:var(--d-bg);padding:22px 18px 18px}
.duo-salida::backdrop{background:rgba(5,5,6,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.duo-salida[open]{animation:duo-salta .45s var(--d-muelle)}
@keyframes duo-salta{from{opacity:0;transform:scale(.9) translateY(20px)}}
.duo-salida .duo-guia{margin-top:0;padding-right:36px}
.duo-salida .duo-elecciones{gap:8px}
.duo-salida .duo-eleccion{padding:11px 14px;grid-template-columns:auto 1fr;box-shadow:0 3px 0 var(--d-linea);border-radius:14px}
.duo-salida .duo-eleccion .duo-emo{font-size:1.3rem}
.duo-salida .duo-eleccion b{font-size:.98rem}
.duo-salida__x{position:absolute;top:10px;right:10px}
.duo-salida__irse{display:block;width:100%;margin-top:14px;background:none;border:0;cursor:pointer;color:var(--d-tinta-30);font-weight:600;font-size:.88rem;padding:8px}
.duo-salida p.duo-sub{margin-bottom:16px}
.duo-salida a.duo-extra{display:block;text-align:center;font-weight:700;margin:-4px 0 16px}

.duo-confeti{position:fixed;inset:0;pointer-events:none;z-index:9999}

@media (max-width:420px){.duo-elecciones--dos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .duo-pantalla.duo-entra,.duo-pantalla.duo-vuelve,.duo-bocadillo.duo-habla,.duo-guia img,.duo-salida[open]{animation:none}
  .duo-sello svg{animation:none;stroke-dashoffset:0}
  .duo-accion .duo-boton::after{animation:none}
}