.footer-brand span{background:transparent;padding-left:0;padding-right:0}
.site-header{width:100%;min-width:0;gap:12px;padding-left:0;padding-right:0;overflow:hidden}
.site-header .brand{margin-left:0}
.site-header .brand span{padding-left:20px;padding-right:20px}
.site-header .brand{flex:0 0 auto}
.footer-grid>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.footer-grid>div:first-child .footer-brand,.footer-grid>div:first-child p{margin-left:0}
.desktop-nav{min-width:0;margin-left:auto;padding-right:28px;margin-right:8px;border-right:1px solid var(--line);gap:28px;white-space:nowrap}
.header-actions{min-width:0;flex:0 0 auto;gap:16px}
.login-button{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line2);border-radius:10px;color:var(--text);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.login-button:hover{background:var(--surface2);border-color:var(--cyan);color:var(--text);transform:translateY(-1px)}
.login-button .material-symbols-outlined{font-size:18px}
.header-actions .login-link{display:none}
.header-actions .lang{padding-left:22px;padding-right:22px;border-left:1px solid var(--line)}
.apple-mark{display:inline-block;font-family:Arial,sans-serif;font-size:32px;line-height:1;color:currentColor}
.tutorial-card span .material-symbols-outlined{vertical-align:middle;line-height:1}
.tutorial-card span{line-height:1.2}
.legal-callout{margin-top:56px;padding-top:0}
.proof-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--cyan);flex:none}
.proof-icon .apple-mark{font-size:27px}
.proof-icon .material-symbols-outlined{font-size:27px!important}
.hero-art{isolation:isolate}
.hero-art .hero-device-base{position:relative;z-index:2}
.hero-art .hero-cinematic-background{position:absolute;z-index:0;inset:0 0 auto -20%;width:122%;height:auto;margin:-5% 0 0 0;opacity:.42;filter:blur(.2px);animation:cinematic-drift 12s ease-in-out infinite}
.hero-art .hero-character{position:absolute;z-index:3;width:auto;height:auto;margin:0;display:block;pointer-events:none;animation:character-slide-in .9s cubic-bezier(.2,.8,.2,1) both,character-float 6s 1s ease-in-out infinite}
.hero-art .hero-footballer{left:9%;top:2%;width:53%;max-width:none}
.hero-art .hero-fantasy{right:2%;top:2%;width:24%;max-width:none;animation-delay:.18s,1.18s}
@keyframes hero-slide-in{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:translateX(0)}}
@keyframes hero-float{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(0) translateY(-10px)}}
@keyframes character-slide-in{from{opacity:0;transform:translateX(32px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes character-float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(.5deg)}}
@keyframes cinematic-drift{0%,100%{transform:translateX(0);opacity:.32}50%{transform:translateX(-8px);opacity:.48}}
.step-visual{height:112px;display:flex;align-items:center;justify-content:flex-start;margin:-4px 0 22px;overflow:hidden}
.step-visual img{width:150px;height:112px;object-fit:contain;object-position:left center;filter:drop-shadow(0 12px 20px rgba(0,229,255,.12));animation:step-float 5s ease-in-out infinite;transform-origin:center}
.steps-grid .step-card:nth-child(2) .step-visual img{animation-delay:-1.6s}
.steps-grid .step-card:nth-child(3) .step-visual img{animation-delay:-3.2s}
@keyframes step-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.step-visual img,.hero-art img{animation:none}}
@media(max-width:620px){.hero-art .hero-cinematic-background{left:-7%;width:122%;margin:-6% 0 0 0;opacity:.28}.hero-art .hero-footballer{left:4%;top:4%;width:60%}.hero-art .hero-fantasy{right:3%;top:5%;width:23%}}
@media(max-width:1250px){.desktop-nav{gap:20px;padding-right:20px}.header-actions{gap:12px}.login-button{padding-inline:11px}.button-small{padding-inline:12px}.header-actions .lang{padding-left:14px;padding-right:14px}}
@media(max-width:1100px){.desktop-nav{display:none}.header-actions{margin-left:auto}}
@media(max-width:620px){.site-header{padding:14px 0}.site-header .brand span{padding-left:18px;padding-right:18px}.header-actions{gap:10px;padding-right:14px}.header-actions .lang{padding-left:10px;padding-right:10px}.header-actions .login-link{display:none}}
.tutorial-flow-section{overflow:hidden}
.tutorial-flow{display:grid;gap:76px}
.tutorial-step{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(36px,7vw,110px);min-height:420px}
.tutorial-step:nth-child(even) .tutorial-copy{order:2}
.tutorial-step:nth-child(even) .tutorial-media{order:1}
.tutorial-copy{max-width:470px}
.tutorial-tag{display:inline-block;margin-bottom:18px;color:var(--cyan);font:400 .7rem var(--mono);letter-spacing:.16em}
.tutorial-copy h3{margin-bottom:16px;font:400 clamp(1.7rem,3vw,2.5rem)/1.05 var(--display);text-transform:uppercase}
.tutorial-copy>p{margin:0;color:var(--muted);font-size:1rem;line-height:1.7}
.tutorial-copy ul{display:grid;gap:11px;margin:25px 0 0;padding:0;list-style:none;color:var(--text);font-size:.86rem}
.tutorial-copy li{position:relative;padding-left:23px}
.tutorial-copy li:before{content:'→';position:absolute;left:0;color:var(--red);font-weight:700}
.tutorial-media{position:relative;min-height:360px;display:grid;place-items:center}
.tutorial-media:before{content:'';position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,.14),transparent 68%);filter:blur(22px)}
.tutorial-screen{position:relative;z-index:1;width:min(100%,430px);height:360px;overflow:hidden;border:1px solid var(--line2);border-radius:24px;background:var(--bg);box-shadow:0 25px 50px rgba(0,0,0,.38);transform:rotate(-2deg)}
.tutorial-step:nth-child(even) .tutorial-screen{transform:rotate(2deg)}
.tutorial-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.tutorial-step:nth-child(2) .tutorial-screen img{object-position:top left}
@media(max-width:900px){.tutorial-flow{gap:54px}.tutorial-step,.tutorial-step:nth-child(even){grid-template-columns:1fr;gap:24px;min-height:0}.tutorial-step:nth-child(even) .tutorial-copy,.tutorial-step:nth-child(even) .tutorial-media{order:initial}.tutorial-copy{max-width:620px}.tutorial-media{min-height:320px}.tutorial-screen{height:320px}}
.tutorial-media{min-height:0}
.tutorial-screen{width:min(100%,350px);height:clamp(360px,38vw,520px);aspect-ratio:.66;overflow:hidden;transform:rotate(-1.5deg)}
.tutorial-step:nth-child(even) .tutorial-screen{transform:rotate(1.5deg)}
.tutorial-screen:after{content:'';position:absolute;right:0;bottom:0;left:0;height:1px;background:rgba(170,176,188,.58);box-shadow:0 0 10px rgba(170,176,188,.14)}
.tutorial-screen img{object-fit:cover;object-position:top center}
.tutorial-step:nth-child(2) .tutorial-screen img{object-position:top center}
.tutorial-step:nth-child(3) .tutorial-screen img{object-position:center top}
@media(max-width:900px){.tutorial-screen{width:min(100%,340px);height:clamp(360px,105vw,500px)}}
.tutorial-screen{width:min(100%,310px);height:clamp(430px,36vw,520px);aspect-ratio:9/16;border-bottom:1px solid rgba(170,176,188,.72)}
.tutorial-screen:after{z-index:2;height:1px;background:rgba(170,176,188,.72);box-shadow:0 0 12px rgba(170,176,188,.18)}
@media(max-width:900px){.tutorial-screen{width:min(100%,290px);height:clamp(430px,125vw,520px)}}
.tutorial-step:nth-child(2) .tutorial-screen{width:280px;height:500px;aspect-ratio:9/16;border-bottom:1px solid var(--line2)}
.tutorial-step:nth-child(2) .tutorial-screen:after{background:var(--line2);box-shadow:0 0 10px rgba(170,176,188,.14)}
@media(max-width:900px){.tutorial-step:nth-child(2) .tutorial-screen{width:280px;height:500px;max-width:100%}}
.tutorial-screen,.tutorial-step:nth-child(even) .tutorial-screen{transform:none}
.tutorial-media:before{width:92%;height:86%;opacity:.68;background:radial-gradient(ellipse at 38% 46%,rgba(0,229,255,.13),transparent 42%),radial-gradient(ellipse at 68% 56%,rgba(255,46,69,.11),transparent 48%),radial-gradient(ellipse at 50% 50%,rgba(124,132,151,.08),transparent 70%);animation:tutorial-smoke 10s ease-in-out infinite}
.tutorial-media:after{content:'';position:absolute;inset:14% 8%;z-index:0;border-radius:50%;background:linear-gradient(125deg,rgba(170,176,188,.05),transparent 36%,rgba(0,229,255,.06) 58%,transparent 78%);filter:blur(28px);opacity:.62;animation:tutorial-smoke 13s -3s ease-in-out infinite reverse}
@keyframes tutorial-smoke{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.42}50%{transform:translate3d(7px,-5px,0) scale(1.06);opacity:.7}}
@media(prefers-reduced-motion:reduce){.tutorial-media:before,.tutorial-media:after{animation:none}}

/* Tutorial: recorte limpio, separadores y atmósfera visible detrás de cada pantalla. */
.tutorial-step{padding-bottom:76px;border-bottom:1px solid var(--line2)}
.tutorial-screen,.tutorial-step:nth-child(even) .tutorial-screen{transform:none;border-radius:22px 22px 0 0;border-bottom:0}
.tutorial-screen:after{z-index:2;height:1px;background:var(--line2);box-shadow:0 0 10px rgba(170,176,188,.16)}
.tutorial-media:before{width:100%;height:100%;opacity:.8;background:radial-gradient(ellipse at 32% 42%,rgba(0,229,255,.16),transparent 40%),radial-gradient(ellipse at 70% 54%,rgba(255,46,69,.13),transparent 48%),radial-gradient(ellipse at 50% 50%,rgba(124,132,151,.12),transparent 70%);filter:blur(30px)}
.tutorial-media:after{content:'';position:absolute;inset:8% 0;z-index:0;border-radius:50%;background:linear-gradient(120deg,rgba(170,176,188,.07),transparent 34%,rgba(0,229,255,.08) 58%,transparent 78%);filter:blur(36px);opacity:.72}
@media(max-width:900px){.tutorial-step{padding-bottom:54px}}

/* Humo generado como imagen real y animado lateralmente detrás del mockup. */
.tutorial-step{border-bottom:0}
.tutorial-media:before{background-image:url('assets/tutorial-smoke.png'),radial-gradient(ellipse at 32% 42%,rgba(0,229,255,.16),transparent 40%),radial-gradient(ellipse at 70% 54%,rgba(255,46,69,.13),transparent 48%),radial-gradient(ellipse at 50% 50%,rgba(124,132,151,.12),transparent 70%);background-position:center,center,center,center;background-repeat:no-repeat;background-size:100% auto,100% 100%,100% 100%,100% 100%;animation:tutorial-smoke-image 14s ease-in-out infinite}
@keyframes tutorial-smoke-image{0%,100%{transform:translate3d(-7px,0,0) scale(1.02);opacity:.5}50%{transform:translate3d(7px,-4px,0) scale(1.08);opacity:.82}}
@media(prefers-reduced-motion:reduce){.tutorial-media:before{animation:none}}

/* Ajuste final: el PNG de humo permanece definido y la línea independiente se ancla a su base. */
.tutorial-media:before{filter:none;opacity:.82;background-size:118% auto,100% 100%,100% 100%,100% 100%;mix-blend-mode:screen}
.tutorial-step{position:relative;border-bottom:0}
.tutorial-step:after{content:'';position:absolute;right:0;bottom:76px;left:0;height:1px;background:var(--line2);box-shadow:0 0 10px rgba(170,176,188,.14);pointer-events:none}
@media(max-width:900px){.tutorial-step:after{bottom:54px}}

/* El PNG debe respirar por ambos laterales y llegar visualmente hacia el texto. */
.tutorial-media:before{left:-20%;width:140%;border-radius:0;background-size:100% auto,100% 100%,100% 100%,100% 100%}

/* Permite que la atmósfera salga del contenedor visual sin recortarse en sus bordes. */
.tutorial-flow-section{overflow:visible}

/* Los tres mockups deben compartir exactamente la misma anchura. */
.tutorial-step:nth-child(2) .tutorial-screen{width:min(100%,310px);height:clamp(430px,36vw,520px);max-width:100%}
@media(max-width:900px){.tutorial-step:nth-child(2) .tutorial-screen{width:min(100%,290px);height:clamp(430px,125vw,520px)}}

/* Entrada lateral sincronizada al revelar cada tutorial durante el scroll. */
.tutorial-step .tutorial-copy,.tutorial-step .tutorial-media{opacity:0;transition:opacity .78s var(--ease) var(--delay,0ms),transform .78s var(--ease) var(--delay,0ms)}
.tutorial-step .tutorial-copy{transform:translate3d(-52px,0,0)}
.tutorial-step .tutorial-media{transform:translate3d(52px,0,0)}
.tutorial-step:nth-child(even) .tutorial-copy{transform:translate3d(52px,0,0)}
.tutorial-step:nth-child(even) .tutorial-media{transform:translate3d(-52px,0,0)}
.tutorial-step.is-visible .tutorial-copy,.tutorial-step.is-visible .tutorial-media{opacity:1;transform:none}
@media(max-width:900px){.tutorial-step .tutorial-copy{transform:translate3d(-28px,0,0)}.tutorial-step .tutorial-media{transform:translate3d(28px,0,0)}.tutorial-step:nth-child(even) .tutorial-copy{transform:translate3d(28px,0,0)}.tutorial-step:nth-child(even) .tutorial-media{transform:translate3d(-28px,0,0)}.tutorial-step.is-visible .tutorial-copy,.tutorial-step.is-visible .tutorial-media{transform:none}}
@media(prefers-reduced-motion:reduce){.tutorial-step .tutorial-copy,.tutorial-step .tutorial-media{opacity:1;transform:none;transition:none}}

/* Banda de cookies líquida: ocupa todo el viewport y alinea las acciones a la derecha. */
.cookie-banner{left:0;right:0;bottom:0;width:100%;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:16px max(20px,calc((100% - var(--max))/2));gap:24px}
.cookie-banner>div:first-child{min-width:0}
.cookie-actions{justify-content:flex-end;align-self:center}
@media(max-width:720px){.cookie-banner{grid-template-columns:1fr;padding:15px 16px;gap:12px}.cookie-actions{width:100%;justify-content:flex-end}.cookie-button{flex:0 1 auto}}
@media(max-width:480px){.cookie-actions{justify-content:stretch}.cookie-button{flex:1 1 0}}

/* Alineación final: las acciones llegan hasta el margen derecho de la banda. */
.cookie-banner{left:0!important;right:0!important;width:100%!important;border-radius:0!important;padding-left:20px;padding-right:20px}
.cookie-actions{margin-left:auto;justify-self:end;justify-content:flex-end}
@media(max-width:720px){.cookie-banner{padding-left:16px;padding-right:16px}.cookie-actions{margin-left:0;justify-self:stretch}}

/* Alineación al 100% del faldón: texto al extremo izquierdo y acciones al derecho. */
@media(min-width:721px){.cookie-banner{padding-left:0;padding-right:0}.cookie-banner>div:first-child{justify-self:start}.cookie-actions{justify-self:end}}

/* Fuerza el anclaje del grupo de acciones al borde derecho real. */
@media(min-width:721px){.cookie-banner{display:flex;align-items:center;padding:16px 0}.cookie-banner>div:first-child{flex:1 1 auto;min-width:0}.cookie-actions{flex:0 0 auto;width:auto;margin-left:auto;justify-content:flex-end}}

/* Centro de ayuda con cuatro tutoriales y una retícula adaptable. */
.tutorial-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tutorial-grid{grid-template-columns:1fr}}

/* Padding interno solicitado para separar el contenido de los bordes. */
.cookie-banner{padding-left:30px!important;padding-right:30px!important}

/* Impide cualquier scroll horizontal provocado por capas animadas o recursos decorativos. */
html,body{max-width:100%;overflow-x:hidden}

/* Las cuatro tarjetas comparten altura: el enlace queda siempre pegado al pie. */
.tutorial-card{display:flex;flex-direction:column;height:100%}
.tutorial-card>div{display:flex;flex:1;flex-direction:column;min-height:0}
.tutorial-card>div>span{display:inline-flex;align-items:center;gap:6px;margin-top:auto;line-height:1.2}
.tutorial-card>div>span .material-symbols-outlined{display:inline-flex;align-items:center;line-height:1}
.tutorial-home-link{margin:0 0 30px;align-items:center;gap:7px}
.tutorial-related{margin-top:56px}
.tutorial-related>h2{margin:0 0 24px;font:400 clamp(2rem,4vw,3rem)/1 var(--display);text-transform:uppercase}
.tutorial-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.tutorial-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tutorial-related-grid{grid-template-columns:1fr}}

/* Faldón flotante con 30 px de aire interior y acciones ancladas a la derecha. */
.cookie-banner{left:28px!important;right:28px!important;bottom:28px!important;width:auto!important;border-radius:18px!important;display:flex!important;align-items:center;gap:24px;padding:22px 30px!important}
.cookie-banner>div:first-child{flex:1 1 auto;min-width:0}
.cookie-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;margin-left:auto}
@media(max-width:720px){.cookie-banner{left:16px!important;right:16px!important;bottom:16px!important;flex-direction:column;align-items:stretch;gap:14px;padding:18px!important}.cookie-actions{width:100%;margin-left:0;justify-content:flex-end;flex-wrap:wrap}}

/* Ajustes móviles finales. */
@media(max-width:620px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  .site-header{width:100%;height:64px;min-height:64px;padding:0!important;margin:0!important}
  .site-header .brand{height:64px;align-self:stretch;margin:0!important;padding:0 16px 0 0!important}
  .site-header .brand span{height:64px;margin:0!important;padding:0 18px!important}
  .header-actions{min-width:0;padding-right:12px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feature-card{min-width:0;padding:18px 14px}
  .feature-card h3{font-size:.92rem}
  .feature-card p{font-size:.78rem;overflow-wrap:anywhere}
  .hero{grid-template-columns:1fr;min-height:calc(100svh - 64px);padding-top:26px;padding-bottom:30px;align-content:center}
  .hero-copy,.hero-art{min-width:0}
  .hero-art{margin-inline:-8px;overflow:visible}
  .hero-art img{max-width:100%;width:100%;margin-left:0}
  .cookie-banner{box-sizing:border-box;left:16px!important;right:auto!important;width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100svh - 32px);overflow:auto;padding:18px!important}
  .cookie-banner>div:first-child,.cookie-actions{width:100%;min-width:0;max-width:100%}
  .cookie-banner p{overflow-wrap:anywhere}
  .cookie-actions{gap:8px;overflow:visible}
  .cookie-button{box-sizing:border-box;min-width:0;max-width:100%;flex:1 1 120px;white-space:normal;overflow-wrap:anywhere}
}

/* Descarga contextual para móvil, visible tras aceptar cookies y al comenzar a bajar. */
.mobile-download-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:14px;background:rgba(20,20,24,.96);box-shadow:0 16px 40px rgba(0,0,0,.48);opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mobile-download-bar.is-visible{opacity:1;pointer-events:auto;transform:none}
.mobile-download-brand{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.mobile-download-brand strong,.mobile-download-brand small{display:block}
.mobile-download-brand strong{font-size:.8rem;line-height:1.1}
.mobile-download-brand small{margin-top:3px;color:var(--muted);font:400 .65rem var(--mono);letter-spacing:.04em}
.mobile-download-icon{color:var(--cyan);font-size:25px}
.mobile-download-action{flex:0 0 auto;min-height:38px;padding-inline:13px;font-size:.72rem}
@media(min-width:621px){.mobile-download-bar{display:none}}
@media(max-width:380px){.mobile-download-bar{left:8px;right:8px;bottom:8px}.mobile-download-action{padding-inline:10px}.mobile-download-action span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.mobile-download-bar{transition:none}}

/* Faldón móvil compacto: enlace de configuración a la izquierda y dos acciones a la derecha. */
.cookie-config-link{display:inline-flex;align-items:center;color:var(--cyan);font-size:.74rem;text-decoration:underline;white-space:nowrap;cursor:pointer}
.cookie-banner[hidden],.cookie-modal[hidden]{display:none!important}
@media(max-width:620px){
  .site-header{position:sticky;left:0;width:100vw;max-width:100vw;transform:none}
  .site-header .brand,.site-header .brand span{margin-left:0!important}
  .cookie-banner{left:8px!important;right:auto!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:16px!important;gap:12px!important}
  .cookie-banner>div:first-child{width:100%;overflow:hidden}
  .cookie-banner>div:first-child p{font-size:.74rem}
  .cookie-banner>div:first-child a{font-size:.72rem}
  .cookie-actions{display:flex!important;align-items:center;justify-content:flex-end!important;width:100%!important;gap:8px!important;flex-wrap:nowrap!important}
  .cookie-config-link{margin-right:auto;flex:0 1 auto;min-width:0}
  .cookie-button{flex:0 1 auto!important;width:auto!important;padding-inline:11px!important;font-size:.7rem!important}
  .cookie-actions>[data-cookie-settings],.cookie-actions>.cookie-config-link{order:-1;background:transparent;border:0;padding-inline:0!important;color:var(--cyan);text-decoration:underline}
}