/* Gazakcort - Material 3 inspired. Tokens first; dark mode via prefers-color-scheme or data-theme. */
:root{--primary:#1a73e8;--primary-h:#1765cc;--on-primary:#fff;--primary-c:#e8f0fe;--on-primary-c:#174ea6;--bg:#fff;--bg2:#f8f9fa;--surface:#fff;--text:#202124;--text2:#5f6368;--border:#dadce0;--green:#188038;--green-c:#e6f4ea;--red:#d93025;--red-c:#fce8e6;--yellow:#f9ab00;--yellow-c:#fef7e0;--sh1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);--sh2:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);--r-s:12px;--r-m:20px;--r-l:28px;--ease:cubic-bezier(.2,0,0,1);--dur:240ms;--font:"Google Sans","Product Sans",Inter,Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;--hh:64px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--primary:#8ab4f8;--primary-h:#aecbfa;--on-primary:#202124;--primary-c:#1f3354;--on-primary-c:#d2e3fc;--bg:#202124;--bg2:#171717;--surface:#292a2d;--text:#e8eaed;--text2:#9aa0a6;--border:#3c4043;--green:#81c995;--green-c:#1e3a29;--red:#f28b82;--red-c:#4a2220;--yellow:#fdd663;--yellow-c:#3f3516;--sh1:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.4);--sh2:0 1px 3px rgba(0,0,0,.6),0 4px 8px 3px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme=dark]{--primary:#8ab4f8;--primary-h:#aecbfa;--on-primary:#202124;--primary-c:#1f3354;--on-primary-c:#d2e3fc;--bg:#202124;--bg2:#171717;--surface:#292a2d;--text:#e8eaed;--text2:#9aa0a6;--border:#3c4043;--green:#81c995;--green-c:#1e3a29;--red:#f28b82;--red-c:#4a2220;--yellow:#fdd663;--yellow-c:#3f3516;--sh1:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.4);--sh2:0 1px 3px rgba(0,0,0,.6),0 4px 8px 3px rgba(0,0,0,.4);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;outline:none}
img,svg{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-weight:500;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.5rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:1.125rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:var(--on-primary);padding:8px 16px;border-radius:99px;z-index:100}.skip:focus{left:8px}
.container{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.section{padding:clamp(40px,7vw,88px) 0}.section.alt{background:var(--bg2)}
.muted{color:var(--text2)}.center{text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:24px;height:24px;fill:currentColor;flex:none}
/* header */
.site-header{position:sticky;top:0;z-index:50;height:var(--hh);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .container{height:100%;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;color:var(--text);margin-right:auto}.brand:hover{text-decoration:none}.brand img{width:36px;height:36px;border-radius:10px}
.nav{display:flex;gap:4px}.nav a{padding:8px 16px;border-radius:99px;color:var(--text2);font-weight:500}.nav a:hover{background:var(--bg2);text-decoration:none}.nav a[aria-current=page]{background:var(--primary-c);color:var(--on-primary-c)}
.menu-btn{display:none}
@media (max-width:720px){.menu-btn{display:inline-flex}.nav{position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);padding:8px 16px;display:none}.nav.open{display:flex}.acc-label{display:none}}
/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 24px;border:1px solid transparent;border-radius:99px;font:500 .9375rem var(--font);cursor:pointer;background:none;color:var(--primary);transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);-webkit-tap-highlight-color:transparent}
.btn:hover{text-decoration:none}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--primary-h);box-shadow:var(--sh1)}
.btn-tonal{background:var(--primary-c);color:var(--on-primary-c)}.btn-tonal:hover{box-shadow:var(--sh1)}
.btn-outline{border-color:var(--border)}.btn-outline:hover{background:var(--primary-c)}
.btn-text{padding:0 12px}.btn-text:hover{background:var(--primary-c)}
.btn-danger{color:var(--red)}.btn-lg{min-height:52px;padding:0 32px;font-size:1.0625rem}.btn-block{width:100%}
.icon-btn{position:relative;overflow:hidden;width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--text2);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--dur) var(--ease)}.icon-btn:hover{background:var(--bg2)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);pointer-events:none;animation:ripple 600ms var(--ease) forwards}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;font-size:.875rem}
/* chips, badges, cards */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border:1px solid var(--border);border-radius:99px;font:500 .875rem var(--font);color:var(--text2);background:var(--surface);cursor:default}
button.chip{cursor:pointer;position:relative;overflow:hidden}button.chip:hover{background:var(--bg2)}button.chip[aria-pressed=true]{background:var(--primary-c);color:var(--on-primary-c);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:.8125rem;font-weight:500;background:var(--green-c);color:var(--green)}.badge.soon{background:var(--yellow-c);color:var(--text)}.badge.bad{background:var(--red-c);color:var(--red)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:24px;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card.hover:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ico-circle{width:48px;height:48px;border-radius:16px;background:var(--primary-c);color:var(--on-primary-c);display:grid;place-items:center;margin-bottom:16px}
/* hero */
.hero{padding:clamp(40px,8vw,96px) 0;overflow:hidden}.hero .container{display:grid;gap:40px;align-items:center;grid-template-columns:1.1fr .9fr}
@media (max-width:860px){.hero .container{grid-template-columns:1fr}}
.hero p.lead{font-size:1.25rem;color:var(--text2);max-width:34em}.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-art{width:100%;max-width:460px;margin-inline:auto}.float{animation:float 6s ease-in-out infinite}.float.b{animation-delay:-2s}.float.c{animation-delay:-4s}
@keyframes float{50%{transform:translateY(-14px)}}
/* store */
.search{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;border:1px solid var(--border);border-radius:99px;background:var(--surface);max-width:560px}.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.search input{flex:1;border:0;background:none;font:inherit;color:var(--text);outline:none;min-width:0}
.app-card{display:flex;flex-direction:column;gap:12px;color:var(--text);padding:16px}.app-card:hover{text-decoration:none}
.app-card img.app-icon{width:72px;height:72px;border-radius:18px}.app-card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.price{font-weight:500}
/* skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--border) 37%,var(--bg2) 63%);background-size:400% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-s);min-height:16px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.sk-card{height:180px;border-radius:var(--r-m)}
/* banners / toasts / states */
.banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-s);background:var(--primary-c);color:var(--on-primary-c);margin-bottom:16px}
.banner.ok{background:var(--green-c);color:var(--green)}.banner.err{background:var(--red-c);color:var(--red)}.banner.warn{background:var(--yellow-c);color:var(--text)}
.banner .icon{margin-top:2px}.banner a,.banner button{color:inherit;font-weight:700}
.empty{text-align:center;padding:48px 16px;color:var(--text2)}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;z-index:200;width:min(420px,100% - 32px)}
.toast{background:#303134;color:#e8eaed;padding:12px 20px;border-radius:var(--r-s);box-shadow:var(--sh2);animation:rise var(--dur) var(--ease)}
@keyframes rise{from{transform:translateY(16px);opacity:0}}
/* forms */
.field{display:grid;gap:6px;margin-bottom:16px}.field label{font-weight:500;font-size:.875rem}
.field input{height:52px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.form-error{color:var(--red);min-height:1.5em;font-size:.9rem;margin:0 0 8px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:99px;padding:4px;margin-bottom:24px}.seg button{border:0;background:none;height:40px;border-radius:99px;font:500 .9375rem var(--font);color:var(--text2);cursor:pointer}.seg button[aria-selected=true]{background:var(--primary-c);color:var(--on-primary-c)}
.auth-card{max-width:440px;margin:40px auto}
.divider{display:flex;align-items:center;gap:12px;color:var(--text2);margin:16px 0}.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.list li{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-s);flex-wrap:wrap}.list .grow{flex:1;min-width:160px}
/* product page */
.pdp-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:32px 0}.pdp-head img.app-icon{width:128px;height:128px;border-radius:28px;box-shadow:var(--sh1)}
.pdp-head h1{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:4px}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.pdp>div:first-child{display:flex;flex-direction:column;gap:36px;min-width:0}
.buy{position:sticky;top:calc(var(--hh) + 16px)}@media (max-width:900px){.buy{position:static}}
.buy .prices{display:grid;gap:8px;margin:12px 0 20px}.buy .prices div{display:flex;justify-content:space-between;font-weight:500}
.buy .btn{margin-bottom:10px}
.shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 0 24px}
.shots button{flex:none;scroll-snap-align:start;border:0;padding:0;background:none;border-radius:var(--r-m);overflow:hidden;cursor:zoom-in}.shots img{height:240px;width:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m)}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);width:100%}dialog.lightbox::backdrop{background:rgba(0,0,0,.85)}
.lightbox .stage{display:flex;align-items:center;gap:8px;justify-content:center}.lightbox img{max-height:84vh;border-radius:var(--r-m)}.lightbox .icon-btn{color:#fff;background:rgba(255,255,255,.14)}
.trailer{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:#000;margin-bottom:24px}.trailer iframe,.trailer button{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailer button{padding:0;background:#000;cursor:pointer}.trailer button img{width:100%;height:100%;object-fit:cover;opacity:.85}.trailer .play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:20px;margin:0}
.info dd{margin:0;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
ul.ticks{padding-left:20px}ul.ticks li{margin-bottom:6px}
/* player */
body.player{background:#000;color:#e8eaed;height:100vh;overflow:hidden}
.pl{display:flex;flex-direction:column;height:100vh}.pl-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#202124;min-height:52px}.pl-bar .icon-btn{color:#e8eaed}.pl-bar .grow{flex:1;font-weight:500}
.pl-stage{position:relative;flex:1;min-height:0;background:#000;display:grid;place-items:center}.pl-stage canvas{width:100%;height:100%;display:block;outline:none}
.cloud{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:#9aa0a6}.cloud.saved{color:#81c995}.cloud.offline{color:#f28b82}
.pl-over{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#000}.pl-over .card{background:#292a2d;border-color:#3c4043;color:#e8eaed;max-width:440px}
.bar{height:6px;border-radius:99px;background:#3c4043;overflow:hidden;margin:16px 0}.bar i{display:block;height:100%;width:0;background:#8ab4f8;transition:width 200ms}
dialog.help{border:1px solid var(--border);border-radius:var(--r-l);padding:24px;max-width:440px;background:var(--surface);color:var(--text)}dialog.help::backdrop{background:rgba(0,0,0,.6)}
/* footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg2);padding:32px 0;margin-top:auto}.site-footer .container{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}.site-footer a{color:var(--text2)}
.legal{max-width:760px}.legal h2{margin-top:1.5em;font-size:1.25rem}
/* motion */
.reveal{opacity:100;transform:translateY(16px);transition:opacity 400ms var(--ease),transform 400ms var(--ease)}.reveal.in{opacity:1;transform:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
@media (prefers-reduced-motion:no-preference){body{animation:pagein 300ms var(--ease)}@keyframes pagein{from{opacity:0}}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
noscript .banner{margin:16px}

.stack{display:grid;gap:20px}.stack .pdp-head{padding:0}
.flip{display:inline-flex;transform:scaleX(-1)}
.chips#chips{margin:16px 0 24px}

/* ===== Cuenta: estilo Google (agregar al final de main.css) ===== */
.auth{display:block;max-width:550px;margin:24px auto;padding:48px 40px 36px;border:1px solid var(--border);border-radius:28px;background:var(--surface)}
@media (max-width:580px){.auth{padding:24px 16px;border:0;border-radius:0;background:transparent}}
.auth-aside{display:none}
.auth-main::before{content:"";display:block;width:72px;height:72px;margin:0 auto 16px;background:url(/assets/brand/icono.png) center/contain no-repeat}
.auth-head{text-align:center;margin-bottom:28px}
.auth-head h1{font-size:1.5rem;font-weight:400;line-height:1.3;margin:0 0 8px}
.auth-head p{margin:0;font-size:1rem}

/* progreso del registro */
.steps{display:flex;gap:6px;margin-bottom:8px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--border)}
.steps i.on{background:var(--primary)}
.step-n{text-align:center;font-size:.8125rem;margin:0 0 24px}

/* campos con etiqueta flotante */
:is(.auth,#perfil) .field{position:relative;display:block;margin-bottom:20px}
:is(.auth,#perfil) .field>label{position:absolute;left:12px;top:18px;z-index:1;padding:0 4px;background:var(--surface);color:var(--text2);font-size:1rem;font-weight:400;line-height:1.2;pointer-events:none;transition:top var(--dur) var(--ease),font-size var(--dur) var(--ease),color var(--dur) var(--ease)}
:is(.auth,#perfil) .field input,:is(.auth,#perfil) .field select{width:100%;height:56px;padding:0 16px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);font:inherit}
:is(.auth,#perfil) .field input:focus,:is(.auth,#perfil) .field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
:is(.auth,#perfil) .field:has(input:focus)>label,
:is(.auth,#perfil) .field:has(input:not(:placeholder-shown))>label,
:is(.auth,#perfil) .field:has(input:-webkit-autofill)>label,
:is(.auth,#perfil) .field:has(select)>label{top:-9px;font-size:.75rem}
:is(.auth,#perfil) .field:has(input:focus)>label,
:is(.auth,#perfil) .field:has(select:focus)>label{color:var(--primary)}
:is(.auth,#perfil) .field small{display:block;margin-top:6px;padding-left:16px;font-size:.75rem}
:is(.auth,#perfil) input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--surface) inset;-webkit-text-fill-color:var(--text)}
:is(.auth,#perfil) input[type=number]{-moz-appearance:textfield}
:is(.auth,#perfil) input[type=number]::-webkit-inner-spin-button,:is(.auth,#perfil) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:is(.auth,#perfil) select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6368' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
:is(.auth,#perfil) select option{background:var(--surface);color:var(--text)}

/* contraseña con ojo */
.pw{position:relative}
.pw input{padding-right:56px}
.pw-tog{position:absolute;right:8px;top:8px}

/* fecha de nacimiento: día / mes / año en una fila */
fieldset.dob{border:0;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:12px}
fieldset.dob legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
fieldset.dob .field{margin:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr;gap:0}fieldset.dob{gap:8px}}

/* dato bloqueado (fecha de nacimiento ya cargada) */
.locked{display:flex;align-items:center;height:56px;padding:0 16px;border:1px dashed var(--border);border-radius:4px;color:var(--text2)}
:is(.auth,#perfil) .field:has(.locked)>label{position:static;display:block;padding:0;margin-bottom:6px;background:none;font-size:.75rem}

/* medidor de seguridad de la contraseña */
.meter{margin:-8px 0 20px}
.meter-bar{height:4px;border-radius:4px;background:var(--border);overflow:hidden;margin:0 0 6px}
.meter-bar i{display:block;height:100%;width:0;background:var(--red);transition:width var(--dur) var(--ease),background var(--dur)}
.meter[data-level="1"] i{width:33%}
.meter[data-level="2"] i{width:66%;background:var(--yellow)}
.meter[data-level="3"] i{width:100%;background:var(--green)}
.meter span{font-size:.75rem}

/* casillas */
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;font-size:.875rem;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--primary);flex:none}

/* botones y enlaces del formulario */
.auth .btn-lg{min-height:40px;padding:0 24px;font-size:.875rem}
.auth .actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.auth .actions .btn-text{margin-left:-12px}
.auth .form-error{min-height:0;margin:0 0 8px;font-size:.8125rem}
.auth .form-error:empty{margin:0}
button.link{border:0;background:none;padding:8px 0;color:var(--primary);font:500 .875rem var(--font);cursor:pointer}
button.link:hover{text-decoration:underline}
.auth .divider{margin:20px 0;font-size:.875rem}
.swap{margin:24px 0 0;text-align:center;font-size:.875rem}

/* perfil con sesión iniciada */
.stack{max-width:820px;margin:24px auto}
.profile-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.profile-head h1{font-size:1.5rem;font-weight:500;margin:0}
.profile-head .grow{flex:1;min-width:200px}
.avatar.lg{width:64px;height:64px;font-size:1.6rem}
#perfil form{max-width:520px}