*{box-sizing:border-box; margin:0;}
:root{
  /* --mute subido: #8d8090 daba 4,2:1 sobre la tarjeta, por debajo de AA */
  --ink:#fdf8fb; --body:#c8bcc5; --mute:#a89aa4;
  --card:#272029; --card2:#2f2731; --well:#1e1922; --line:#3a3039;
  --acc:#ff7a33; --acc-d:#e05c18; --acc-ink:#4f2109;
  --gold:#ffc247; --gold-d:#e09a12; --gold-ink:#301f00;
  --green:#4fd18d; --red:#e8485a;
  /* rebajas: el rojo es el color de descuento que todo el mundo lee; el verde ya significa "listo" */
  --sale:#ff6470; --sale-bg:rgba(232,72,90,.18);
  --sh:0 5px 15px rgba(0,0,0,.45);
  --sh-btn:0 2px 5px rgba(0,0,0,.28);
  --r:20px;      /* redondez general — CubeCraft se lee muy redondo */
  --r-sm:14px;
  color-scheme:dark;
}
html{scrollbar-color:var(--acc) var(--well);}
/* El hueco de la barra se reserva SIEMPRE. Al abrir un diálogo se bloquea el scroll, la barra
   desaparece y el viewport se ensanchaba 15px: toda la página daba un salto lateral. */
html{scrollbar-gutter:stable;}
html,body{background-color:#1c1418;}
body{position:relative; min-height:100vh;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='820'%3E%3Cg fill='%23ff9d5c' fill-opacity='0.012'%3E%3Cellipse cx='200' cy='130' rx='260' ry='60'/%3E%3Cellipse cx='880' cy='360' rx='300' ry='66'/%3E%3Cellipse cx='470' cy='650' rx='250' ry='56'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#5a290f 0,#1c1418 320px,#1c1418 100%);
  background-repeat:repeat,no-repeat; background-size:auto,100% 100%;
  background-attachment:scroll,scroll;
  color:var(--body); font-family:'Poppins',system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fredoka',sans-serif; font-weight:600; color:var(--ink); text-wrap:balance;}
h1{font-size:clamp(38px,5vw,64px); line-height:1.14; letter-spacing:.5px;}
h2{font-size:clamp(25px,2.24vw,32px); line-height:1.5; letter-spacing:.48px;}
h3{font-size:clamp(17.5px,1.4vw,20px); line-height:1.35; letter-spacing:.2px;}
.hh{font-size:clamp(17px,1.34vw,19px); line-height:1.6; letter-spacing:.5px;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--acc); color:var(--acc-ink);}
:where(button,input){font:inherit; color:inherit;}
button{cursor:pointer; border:none; background:none;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:8px;}
.wrap{width:min(1460px,100% - 3.6vw); margin-inline:auto;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* decoración: capa fija, se pinta una vez y NUNCA se vuelve a montar,
   así no salta al cambiar de pestaña */
/* El cielo: el sol bajo de siempre, un puñado de estrellas quietas que parpadean
   y alguna fugaz que cruza cada pocos segundos. Todas caen con el MISMO angulo,
   como una lluvia de verdad. Ojo con el giro: va dentro del keyframe; suelto en el
   style, la animacion lo pisa y las fugaces salen horizontales.
   Sin bloque propio de prefers-reduced-motion: el reset global de la hoja ya deja
   las estrellas quietas (y las fugaces sin cruzar), que es justo lo que toca. */
#deco{position:absolute; top:0; left:0; right:0; height:620px; overflow:hidden; pointer-events:none; z-index:0;
  /* el desvanecido va en cuatro tramos: con un solo corte al 58% se notaba una
     linea recta donde el cielo se acababa de golpe */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.22) 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.22) 80%,transparent 100%);}
#deco .sol{position:absolute; left:50%; top:-210px; width:1180px; height:560px; margin-left:-590px;
  border-radius:50%; filter:blur(80px); background:radial-gradient(closest-side,rgba(255,140,60,.34),transparent);}
#deco .estrella{position:absolute; border-radius:50%; background:#ffe9d6;
  animation:parpadeo ease-in-out infinite alternate;}
@keyframes parpadeo{from{opacity:.18; transform:scale(.85)} to{opacity:.85; transform:scale(1)}}
#deco .fugaz{position:absolute; height:2.5px; border-radius:3px; transform-origin:right center;
  background:linear-gradient(90deg,rgba(255,236,214,0),rgba(255,240,225,1));
  filter:drop-shadow(0 0 7px rgba(255,196,140,.75));
  opacity:0; animation:fugaz 15s linear infinite;}
#deco .fugaz::after{content:""; position:absolute; right:-3px; top:-3px; width:8px; height:8px;
  border-radius:50%; background:#fff; box-shadow:0 0 14px 4px rgba(255,208,155,.9);}
@keyframes fugaz{
  0%{opacity:0; transform:rotate(29deg) translateX(-300px) scaleX(.18);}
  3%{opacity:1;}
  13%{opacity:1; transform:rotate(29deg) translateX(360px) scaleX(1);}
  17%{opacity:0; transform:rotate(29deg) translateX(470px) scaleX(1);}
  100%{opacity:0; transform:rotate(29deg) translateX(470px) scaleX(1);}}
@media (max-width:1020px){
  #deco{height:430px;}
  #deco .sol{width:820px; margin-left:-410px; top:-170px;}
  #deco .fugaz{height:2px;}
  /* las mismas 58 estrellas en una pantalla estrecha se amontonan: en movil
     se queda con dos de cada cinco */
  #deco .solo-escritorio{display:none;}}
#app{position:relative; z-index:1;}
/* Una pagina corta (una categoria vacia) dejaba el pie a media pantalla y debajo
   un hueco del color del cuerpo. El shell ocupa el alto de la ventana y el main
   se estira, asi que el pie cae abajo sin depender de cuanto contenido haya. */
#shell{display:flex; flex-direction:column; min-height:100vh;}
#shell > main{flex:1 0 auto;}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:clamp(48px,3.85vw,56px); padding:0 clamp(22px,2.2vw,32px);
  border-radius:9999px; font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.2px;
  white-space:nowrap; background:var(--acc); color:var(--acc-ink); box-shadow:var(--sh-btn);
  transition:filter .16s ease,transform .16s ease;}
.btn:hover{filter:brightness(1.1);} .btn:active{transform:translateY(1px);}
.btn.gold{background:var(--gold); color:var(--gold-ink);}
.btn.green{background:var(--green); color:#03230f;}
.btn.soft{background:rgba(255,122,51,.13); color:var(--acc); box-shadow:none;}
.btn.sm{height:46px; padding:0 22px; font-size:14px;}
.btn.full{width:100%;}
.btn[disabled]{opacity:.35; cursor:not-allowed; filter:none;}
.ib{width:56px; height:56px; border-radius:9999px; background:rgba(255,122,51,.12); color:var(--acc);
  display:grid; place-items:center; flex:none; transition:background .16s ease;}
.ib:hover{background:rgba(255,122,51,.3);}
.ib.gold{background:rgba(255,194,71,.12); color:var(--gold);}
.tag{display:inline-block; border-radius:9999px; padding:5px 14px; font-size:12px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase; background:rgba(255,122,51,.12); color:var(--acc);}
.tag.gold{background:rgba(255,194,71,.12); color:var(--gold);}
.tag.green{background:rgba(79,209,141,.12); color:var(--green);}

/* ---------- cabecera ---------- */
/* solo la cuenta: Discord y correo se fueron de aquí, viven en el pie y en el módulo de Soporte */
.strip{display:flex; justify-content:flex-end; align-items:center; gap:24px; padding:14px 0;
  font-size:14px; color:#e0bda9;}
.strip b{color:#fff; font-weight:600;}
.strip .lnk{color:#fff; font-weight:600; display:inline-flex; align-items:center; gap:7px; min-height:24px;}
.strip .lnk:hover{color:var(--gold);}
/* cada trozo es un item de flex propio; los "·" van en su span para que el hueco sea igual
   a los dos lados (antes eran nodos de texto sueltos y el espaciado bailaba) */
.strip .who{display:flex; align-items:center; gap:9px; line-height:1; flex-wrap:wrap; min-width:0;}
/* sin opacity: el .55 sobre el degradado naranja dejaba los "·" en 2,41:1. Quitarla da 4,61 */
.strip .sep{color:var(--mute);}
.strip img{width:30px; height:30px; border-radius:9px; image-rendering:pixelated; margin-left:3px;}
.bar{position:relative; background:var(--card); border-radius:var(--r); box-shadow:var(--sh); height:90px;
  display:flex; align-items:center; padding:0 18px 0 26px; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; flex:none; background:none; border:0; padding:0; cursor:pointer; text-align:left;}
.brand img{width:46px; height:46px; border-radius:14px;}
.brand .nm{font-family:'Fredoka',sans-serif; font-weight:600; font-size:24px; color:var(--ink); line-height:1.05;}
/* El rotulo pequeno va MUY por debajo del nombre, como en CubeCraft: antes era
   la mitad de alto (24/12) y las dos lineas competian. A 9,5px la jerarquia canta,
   y el peso extra y el tracking evitan que se vuelva ilegible. */
.brand .sub{font-size:9.5px; font-weight:700; color:var(--mute); letter-spacing:2.6px;
  /* Poppins en versalitas tiene 1px mas de lateral izquierdo que Fredoka:
     sin esto la tinta de «Tienda» arranca 1px a la izquierda de la «H». */
  margin-left:1px;
  text-transform:uppercase;}
.menu{display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0; padding:5px 4px; margin:-5px -4px;}
.mi{position:relative;}
.mb{display:flex; align-items:center; gap:8px; height:46px; padding:0 18px; border-radius:9999px;
  font-size:15px; font-weight:600; color:var(--body); white-space:nowrap;
  transition:background .16s ease,color .16s ease;}
.mb svg{flex:none; opacity:.75;}
.mb:hover{background:var(--card2); color:var(--ink);}
.mb[aria-current="page"],.mi.open .mb{background:var(--acc); color:var(--acc-ink); box-shadow:var(--sh-btn);}
.mb[aria-current="page"] svg,.mi.open .mb svg{opacity:1;}
.caret{transition:transform .18s ease;}
.mi.open .caret{transform:rotate(180deg);}
.drop{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:240px; background:var(--card); border-radius:var(--r-sm); box-shadow:0 14px 40px rgba(0,0,0,.55);
  padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; z-index:40;}
.mi.open .drop{opacity:1; pointer-events:auto; transform:translateX(-50%);}
@media (prefers-reduced-motion:no-preference){.drop{transition:opacity .16s ease,transform .16s ease;}}
.di{display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:9999px; font-size:15px;
  font-weight:600; color:var(--body); white-space:nowrap;}
.di:hover{background:var(--card2); color:var(--ink);}
.di[aria-current="page"]{background:rgba(255,122,51,.12); color:var(--acc);}
.cartb{position:relative; display:flex; align-items:center; gap:14px; height:64px; padding:0 76px 0 28px;
  border-radius:9999px; background:var(--gold); color:var(--gold-ink); box-shadow:var(--sh-btn); flex:none;
  margin-right:-30px;}
/* El cofre sale 14px del botón y el botón 30 de la barra: 44px fuera de la columna. Con
   márgenes laterales menores que eso, el documento desbordaba 1-8px entre 1201 y 1459. */
@media (max-width:1459px){.cartb{margin-right:-6px;}}
.cartb:hover{filter:brightness(1.06);}
/* Barra de pago del móvil. Las bases van AQUÍ, antes de los media queries: declaradas después,
   este display:none ganaba por orden al display:flex del bloque de 640 y la barra no salía. */
.barra-pago{display:none; position:fixed; left:0; right:0; bottom:0; z-index:55;
  align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--card); box-shadow:0 -6px 22px rgba(0,0,0,.5); border-top:1px solid var(--line);}
.barra-pago .bp-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1;}
.barra-pago .bp-txt b{font-size:14px; color:var(--ink);}
.barra-pago .bp-txt span{font-family:'Fredoka',sans-serif; font-size:17px; color:var(--gold);
  font-variant-numeric:tabular-nums;}
.barra-pago .btn{flex:none; height:46px; padding:0 18px; font-size:14px;}
/* En móvil el botón deja de ser el cofre y pasa a un carrito con su número al lado: es el gesto
   que todo el mundo reconoce, y el cofre solo no se leía como carrito. */
.cartb .ic-carrito{display:none; line-height:0;}
.cartb .cn{display:none; font-size:15.5px; font-weight:700; font-variant-numeric:tabular-nums;}
.cartb .t{font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; line-height:1.1;}
.cartb .s{font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; opacity:.72;}
.cartb .chest{position:absolute; right:-14px; top:50%; transform:translateY(-50%); pointer-events:none;}

/* ---------- héroe: altura fija para que nada salte al cambiar de página ---------- */
/* flex-start, no center: centrando, un lead de una línea subía el titular y otro de dos lo
   bajaba, así que Loyalty no coincidía con Prime ni Gemas. Con padding fijo, el h1 de todas
   las páginas cae exactamente a la misma altura. */
.hero{display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; text-align:center; padding:clamp(44px,4.4vw,64px) 0 clamp(24px,2.4vw,34px);}
.hero .lead{font-size:clamp(15.5px,1.2vw,17px); color:#d6c8d0; max-width:58ch; margin:14px auto 0; line-height:1.65;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero .cta{display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap;}

/* ---------- rejilla y tarjetas ---------- */
.page{display:flex; flex-direction:column; gap:clamp(32px,3vw,44px); padding-bottom:24px;}
/* Inicio va sin héroe: sin él la barra quedaba pegada a las tarjetas */
.page.sin-hero{padding-top:0;}
.sect{display:flex; flex-direction:column; gap:22px;}
.shead{text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center;}
.shead p{font-size:16px; max-width:62ch;}
.grid{display:grid; gap:12px; align-items:stretch;}
.g5{grid-template-columns:repeat(5,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:clamp(18px,1.65vw,24px);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  position:relative; border:2px solid transparent;
  transition:transform .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-4px);}
/* la banda dorada va detrás, en absoluto: así la tarjeta destacada no desplaza a las demás */
.card.hot{border-color:var(--gold);}
.card.hot::before{content:""; position:absolute; inset:0 0 auto; height:118px; background:var(--gold);
  border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0;}
/* la banda dorada la lleva el propio texto, no solo el ::before: así el contraste es real
   y no depende de que pinte un pseudo-elemento */
/* el distintivo va FUERA de la caja, colgando por encima: dentro empujaba el contenido
   y la tarjeta destacada quedaba desalineada respecto a sus hermanas */
.flag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:4; white-space:nowrap;
  background:var(--gold); color:var(--gold-ink); font-size:12.5px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; padding:7px 20px; border-radius:9999px;
  box-shadow:0 5px 15px rgba(0,0,0,.45);}
/* width/height 100% + object-fit:contain. Con max-height:100% el porcentaje no resuelve
   dentro de un grid y las imágenes se salían de su caja. */
.art{position:relative; z-index:2; height:140px; width:100%; padding:6px; overflow:hidden;}
.art img{width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); transition:transform .22s ease;}
.card:hover .art img{transform:scale(1.06) translateY(-2px);}
.card h3{margin-top:2px;}
.price{font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(17.5px,1.4vw,20px); color:var(--acc);
  font-variant-numeric:tabular-nums;}
.card.hot .price{color:var(--gold);}
.desc{font-size:13.5px; color:var(--mute); line-height:1.55;}
.row{display:flex; gap:10px; align-items:center; width:100%; margin-top:auto; padding-top:8px;}
.row .btn{flex:1; min-width:0;}
.g5 .row .btn,.g4 .row .btn{height:48px; padding:0 12px; font-size:13.5px; gap:7px;}
.g5 .ib,.g4 .ib{width:48px; height:48px;}
.g5 .art,.g4 .art{height:120px;}

/* tarjeta compacta: el estándar para cosméticos sueltos y baratos.
   Regalo en la esquina, un solo botón a lo ancho, 7 por fila (14 = dos filas exactas). */
.g7{grid-template-columns:repeat(7,minmax(0,1fr));}
.card.cp{padding:16px; gap:7px;}
.card.cp .art{height:104px; padding:2px; position:relative;}
/* .ct es un h2 real (la página ya no tiene cabecera de sección) con aspecto de h3 */
.card .ct{font-size:clamp(17.5px,1.4vw,20px); line-height:1.35; letter-spacing:.2px;}
.card.cp h3,.card.cp .ct{font-size:16px; line-height:1.25;}
.card.cp .price{font-size:17px;}
.card.cp .row{padding-top:4px;}
.card.cp .row .btn{height:42px; padding:0 10px; font-size:13px; gap:6px; flex:1;}
.giftx{position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:9999px;
  background:rgba(255,122,51,.12); color:var(--acc); display:grid; place-items:center;
  transition:background .16s ease;}
.giftx:hover{background:rgba(255,122,51,.32);}
/* partículas de verdad, no un resplandor radial: es lo que se compra */
.halo{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.75;}
.card.cp:hover .halo{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .halo{transition:opacity .22s ease;}
  .card.cp:hover .halo{animation:girar 9s linear infinite;}
  @keyframes girar{to{transform:rotate(360deg);}}
}
.info{background:rgba(255,122,51,.09); border-radius:var(--r); padding:32px; display:flex;
  flex-direction:column; align-items:center; gap:14px; text-align:center;}
.info p{font-size:14.5px; line-height:1.65; max-width:64ch;}

/* ---------- tabla de rangos: cabecera con el icono del rango ---------- */
.tcols{display:grid; grid-template-columns:minmax(min(190px,100%),1.3fr) repeat(5,minmax(0,1fr)); gap:12px;}
.thd{margin-bottom:12px;}
.thd.abajo{margin:20px 0 0;}
.thd .rh.compra{flex-direction:row; align-items:center; gap:10px; padding:14px;}
.thd .rh.compra .btn{flex:1; min-width:0;}
/* Por encima de 1040 vuelve el rótulo "Comprar" pero la celda sigue estrecha: el botón lo
   recortaba 30px a 1041 y 3px a 1400. Apilado, el botón se lleva el ancho entero de columna. */
@media (min-width:901px) and (max-width:1459px){
  .thd .rh.compra{flex-direction:column; gap:8px; padding:12px;}
  .thd .rh.compra .btn{flex:none; width:100%; padding:0 10px;}
}
.thd .rh.compra .ib{flex:none;}
.thd .feat.vacia{background:var(--card); box-shadow:var(--sh);}
.thd .rh{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:18px 10px 16px;
  display:flex; flex-direction:column; align-items:center; gap:8px; position:relative;}
.thd .rh img{width:100%; height:76px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));}
.thd .feat{justify-content:center; gap:10px; background:rgba(255,122,51,.09); box-shadow:none;}
.thd .feat p{font-size:13.5px; color:var(--mute); line-height:1.5; text-align:center;}
.thd .rh b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px;}
/* el precio de la comparativa manda igual que en las tarjetas: mismo naranja,
   no el gris del cuerpo (con rebaja quedaba apagado justo donde se decide) */
.thd .rh .p{font-family:'Fredoka',sans-serif; font-size:15px; font-weight:600; color:var(--acc);
  font-variant-numeric:tabular-nums;}
.thd .rh .btn{height:42px; padding:0 18px; font-size:13px; width:100%;}
.tbl{display:flex; flex-direction:column; gap:12px;}
.tr > *{background:var(--card); border-radius:var(--r-sm); box-shadow:var(--sh); min-height:70px;
  display:flex; align-items:center; justify-content:center; padding:14px 16px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; color:var(--ink);
  font-variant-numeric:tabular-nums;}
.tr:nth-child(even) > *{background:var(--card2);}
.tr > .lb{justify-content:space-between; gap:12px; font-family:'Poppins',sans-serif; font-weight:400;
  font-size:15px; color:var(--body); text-align:left;}
.lb .hint{border-bottom:1.5px dotted var(--mute); cursor:help;}
.nfo{width:26px; height:26px; border-radius:9999px; background:rgba(255,122,51,.12); color:var(--acc);
  display:grid; place-items:center; flex:none; font-size:13px; font-weight:700; font-family:'Fredoka',sans-serif;}
.yes{width:32px; height:32px; border-radius:11px; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center;}
.no{width:32px; height:32px; border-radius:11px; background:var(--well); color:#8a7d90; display:grid; place-items:center;}
.rk{padding:6px 15px; border-radius:9999px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.8px; text-transform:uppercase;}
.tgrp{font-size:21px; margin:24px 0 2px;}
.cmp-hint{display:none; align-items:center; gap:8px; transform:rotate(0); font-size:13.5px; color:var(--mute); margin-bottom:10px;}
.cmp-hint svg{transform:rotate(-90deg); flex:none;}

/* ---------- Prime: tabla de planes ---------- */
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.plan{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:28px 22px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  border:2px solid transparent; position:relative; transition:transform .18s ease;}
.plan:hover{transform:translateY(-4px);}
.plan.best{border-color:var(--gold);}
.plan .mo{font-family:'Fredoka',sans-serif; font-weight:600; font-size:26px; color:var(--ink);}
.plan .big{font-family:'Fredoka',sans-serif; font-weight:600; font-size:38px; color:var(--acc);
  font-variant-numeric:tabular-nums; line-height:1.1;}
.plan.best .big{color:var(--gold);}
.plan .per{font-size:13.5px; color:var(--mute); font-variant-numeric:tabular-nums;}
.plan .btn{width:100%; margin-top:auto;}
.pbenef{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px 32px;}
.pbenef .b{display:flex; gap:12px; align-items:flex-start; font-size:15px;}
.pbenef svg{flex:none; margin-top:3px; color:var(--green);}

/* ---------- Gemas: trato especial ---------- */
.gemhero{background:linear-gradient(140deg,rgba(79,209,141,.16),rgba(255,122,51,.1));
  border-radius:var(--r); padding:36px 40px; display:grid; grid-template-columns:1fr auto; gap:32px;
  align-items:center;}
.gemhero .tx{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.gemhero .pic{width:210px; height:180px; flex:none;}
.gemhero .pic img{width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));}
.gemcard{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:24px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative;
  border:2px solid transparent; overflow:hidden; transition:transform .18s ease;}
.gemcard:hover{transform:translateY(-4px);}
.gemcard.pop{border-color:var(--acc);} .gemcard.val{border-color:var(--green);}
.gemcard .amt{font-family:'Fredoka',sans-serif; font-weight:600; font-size:26px; color:var(--ink);
  font-variant-numeric:tabular-nums;}
.gemcard .rate{font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums;}
.gemcard .art{height:126px;}
.gemcard .btn{width:100%; margin-top:auto;}
.rateb{width:100%; height:8px; border-radius:9999px; background:var(--well); overflow:hidden;}
.rateb i{display:block; height:100%; width:100%; border-radius:9999px; transform-origin:left;
  transform:scaleX(var(--v,1)); background:linear-gradient(90deg,var(--green),var(--acc));}

/* ---------- Loyalty: formato Hystic ---------- */
.loy{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:36px 40px;
  display:flex; flex-direction:column; gap:15px;}
.loy p{font-size:16px; max-width:54ch;}
.loy code{font-family:'Fredoka',sans-serif; color:var(--gold); background:var(--well); padding:3px 12px;
  border-radius:9999px;}
.loy ul{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:8px; font-size:15.5px;}
.tbanner{border-radius:var(--r); padding:26px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:10px; margin-bottom:12px;}
.tbanner h2{font-size:34px;}
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:12px;}
.mcard{background:var(--card); border-radius:var(--r-sm); box-shadow:var(--sh); padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;}
.mcard img{width:46px; height:46px; border-radius:14px; image-rendering:pixelated;}
.mcard b{font-size:14.5px; color:var(--ink); font-weight:600; overflow-wrap:anywhere;}

/* ---------- módulos / vacío / política ---------- */
.mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:12px;}
/* dos columnas explícitas no se salvan con min(): cada una reclama su mínimo y suman
   más que el contenedor. Por eso colapsa a una sola abajo. */
.mods-2{grid-template-columns:minmax(min(300px,100%),1fr) minmax(min(360px,100%),2fr);}
.fcols p{max-width:58ch;}
/* min-width:0 obligatorio: por defecto un hijo de grid mide su min-content, y el carril
   de compras recientes (flex con scroll) reventaba la columna entera */
.mods > *,.grid > *,.plans > *{min-width:0;}
.mod{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:clamp(22px,2.2vw,32px);
  display:flex; flex-direction:column; gap:14px; min-width:0;}
.mod .ic{width:54px; height:54px; border-radius:9999px; background:rgba(255,122,51,.12); color:var(--acc);
  display:grid; place-items:center; flex:none;}
.mod p{font-size:14.5px; line-height:1.6; max-width:56ch;}

/* ---- Ficha de producto: se abre tocando el paquete, como en la tienda actual ---- */
/* La ficha es una columna con tres partes fijas —cabecera, pestañas y acciones— y una sola
   zona que desplaza en medio. Antes desplazaba el modal entero: al pasar a una pestaña larga
   crecía de 435 a 812px, saltaba de sitio y las pestañas se iban de la vista. */
.modal.ficha{text-align:left; gap:0; padding:0; max-width:min(560px,100vw - 32px); align-items:stretch;
  overflow:hidden; height:auto; max-height:calc(100dvh - 32px);
  /* anclada arriba: al cambiar a una pestaña larga crece hacia abajo en vez de recolocarse,
     de modo que la cabecera y las pestanas no se mueven y una pestana corta no deja hueco */
  top:16px; bottom:auto; transform:translate(-50%,8px);}
body.fi .modal.ficha{transform:translate(-50%,0);}
.fi-cuerpo{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.fi-cuerpo:focus-visible{outline:3px solid var(--gold); outline-offset:-3px;}
.fi-panel{padding:0 26px 6px;}
/* lo que vale en todas las modalidades, antes de elegir modalidad */
.fi-global{padding:0 26px 4px;}
.fi-cab,.fi-tabs,.fi-acc{flex:none;}
.fi-tabs{padding-top:4px;}
/* dentro de la fila de cabecera, no absoluto: un hijo posicionado dentro de un contenedor con
   overflow:hidden es un patrón que el detector marca en TODAS las páginas, esté abierto o no */
.cerrar-ficha{margin-left:auto; align-self:flex-start; flex:none;}
.fi-cab{display:flex; align-items:center; gap:16px; padding:22px 26px 20px;}
.fi-art{width:104px; height:104px; flex:none; display:grid; place-items:center;
  background:var(--well); border-radius:18px;}
.fi-art img{width:100%; height:100%; object-fit:contain; padding:8px;}
.fi-id{display:flex; flex-direction:column; gap:4px; min-width:0;}
.fi-id h2{font-size:26px; line-height:1.1;}
.fi-precio{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-family:'Fredoka',sans-serif;
  font-weight:600; font-size:20px; color:var(--gold); font-variant-numeric:tabular-nums;}
.fi-precio em{font-family:'Poppins',sans-serif; font-style:normal; font-size:11.5px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase; color:var(--body);}
.fi-desc{padding:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--body);}
.fi-fila{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.45; color:var(--body);}
.fi-fila:last-child{border-bottom:0;}
.fi-fila > span{min-width:0;}
.fi-fila b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; flex:none;
  text-align:right; max-width:60%;}
/* pestañas de modalidad: mismas pastillas que la barra de categorías, un carril si no caben */
/* pegada arriba de la zona que desplaza: se puede cambiar de modalidad sin volver al principio.
   El degradado del borde derecho avisa de que queda carril, igual que en la barra de categorías. */
.fi-tabs{display:flex; gap:6px; padding:10px 26px 14px; overflow-x:auto; scrollbar-width:none;
  position:sticky; top:0; z-index:2; background:#241d24;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);}
.fi-tabs::-webkit-scrollbar{display:none;}
.fi-tabs button{flex:0 0 auto; height:38px; padding:0 15px; border-radius:9999px; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:var(--body); background:var(--well);
  border:1px solid var(--line); transition:background .16s ease,color .16s ease;}
.fi-tabs button:hover{background:var(--card2); color:var(--ink);}
.fi-tabs button[aria-selected="true"]{background:var(--acc); color:var(--acc-ink);
  border-color:transparent; box-shadow:var(--sh-btn);}
.fi-bloque{margin-top:20px;}
.fi-bloque h3{display:flex; align-items:baseline; gap:9px; font-size:11.5px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--mute); margin-bottom:4px;}
.fi-bloque h3 em{font-style:normal; letter-spacing:0; text-transform:none; font-weight:600;
  font-size:12px; color:var(--acc);}
.fi-pill{display:inline-block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px;
  padding:3px 12px; border-radius:9999px;}
.fi-si{display:grid; place-items:center; width:24px; height:24px; border-radius:9999px;
  background:rgba(79,209,141,.14); color:var(--green);}
.fi-para{font-weight:400; color:var(--mute); font-size:13.5px;}
.fi-fila code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:rgba(255,122,51,.12); color:var(--acc); padding:3px 8px; border-radius:7px;
  border:1px solid rgba(255,122,51,.26);}
.fi-sube i{font-style:normal; color:var(--mute); margin:0 6px;}
.fi-mas{color:var(--green);}
/* el regalo se veía solo en la pantalla de pago: en el carrito no había forma de distinguirlo */
.marca-regalo{display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:11.5px;
  font-weight:700; color:var(--acc); background:rgba(255,122,51,.13); border-radius:9999px;
  padding:3px 9px;}
.fi-desc.tras-tabla{padding-top:16px;}
.fi-acc{display:flex; align-items:center; gap:10px; padding:16px 26px 22px;
  border-top:1px solid var(--line); background:#241d24;}
.fi-acc .btn{flex:1; min-width:0;}
/* el render de la tarjeta es el que abre la ficha, en cualquier tipo de tarjeta */
.card .art,.gemcard .art,.card.cp .art,.rh .art{border:0; background:none; padding:0; cursor:pointer; width:100%;}
.ver{align-self:center; font-size:13px; font-weight:600; color:var(--acc); text-decoration:underline;
  text-underline-offset:3px; min-height:32px;}
.ver:hover{color:var(--gold);}

/* mismas medidas que la fila de pagos de tienda.hystic.net: pastilla de radio 10, borde tenue
   y marca a un solo color, no logotipos de colores */
.pays{display:flex; gap:10px; flex-wrap:wrap;}
.pays i{padding:9px 13px; border-radius:10px; background:var(--well); display:grid; place-items:center;
  color:var(--mute); border:1px solid rgba(255,255,255,.07);}
.mod p.chico{font-size:13.5px; line-height:1.6;}
.mod p.chico a{color:var(--acc); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.field{display:flex; gap:10px;}
.field input{flex:1; min-width:0; font-size:14.5px; padding:0 20px; height:48px; border-radius:9999px;
  border:2px solid var(--line); background:var(--well); color:var(--ink); caret-color:var(--acc);}
.field input::placeholder{color:var(--mute);}
.field input:focus{outline:none; border-color:var(--acc);}
.goal .top{display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.goal .top i{font-style:normal; font-family:'Fredoka',sans-serif; font-size:30px; color:var(--gold);
  font-variant-numeric:tabular-nums;}
/* scaleX en vez de width: animar width es una propiedad de layout */
.gbar{height:18px; border-radius:9999px; background:var(--well); overflow:hidden;}
.gbar i{display:block; height:100%; width:100%; border-radius:9999px; transform-origin:left;
  transform:scaleX(var(--v,.56)); background:linear-gradient(90deg,var(--gold),var(--acc));}
.donor{display:flex; align-items:center; gap:15px;}
.donor img{width:42px; height:42px; border-radius:13px; image-rendering:pixelated;}
.donor b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px; color:var(--gold); display:block;}
.donor span{font-size:13.5px; color:var(--mute);}
/* la quinta compra quedaba cortada a media pastilla contra el borde: el degradado convierte
   el corte en una pista de que hay más, en vez de en un descuido */
.buys{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
.buys::-webkit-scrollbar{height:6px;}
.buys::-webkit-scrollbar-thumb{background:var(--line); border-radius:9999px;}
.bc{display:flex; align-items:center; gap:11px; background:var(--well); border-radius:9999px;
  padding:8px 20px 8px 8px; white-space:nowrap; flex:none;}
.bc img{width:36px; height:36px; border-radius:9999px; image-rendering:pixelated;}
.bc b{font-size:14px; color:var(--ink); font-weight:600; display:block; line-height:1.3;}
.bc em{font-style:normal; font-size:12.5px; color:var(--gold);}
.empty{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:80px 32px;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;}
.empty p{font-size:15.5px; max-width:52ch;}
.policy{background:rgba(232,72,90,.1); border-radius:var(--r); padding:22px 28px; font-size:13.5px;
  line-height:1.6;}
.policy b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:18px; color:#ff8b98; display:block;
  margin-bottom:5px;}

/* ---------- pie ---------- */
footer{position:relative; margin-top:20px; padding-top:76px;}
.wave{position:absolute; top:0; left:0; width:100%; height:76px; display:block;}
.fin{background:#150f14; padding:16px 0 32px;}
.fcols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:28px 40px;}
.fcols p,.fcols a{font-size:14.5px; color:var(--mute); display:block;}
.fcols a:hover{color:var(--gold);}
.fcols .hh{margin-bottom:6px;}
.links{display:flex; flex-direction:column; gap:6px;}
.links a,.fcols a{min-height:24px; display:flex; align-items:center;}
.social{display:flex; gap:10px; flex-wrap:wrap;}
.social a{width:44px; height:44px; border-radius:9999px; background:var(--card); display:grid;
  place-items:center; color:var(--mute);}
.social a:hover{background:var(--acc); color:var(--acc-ink);}
.fpills{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.fbase{margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px;
  color:var(--mute); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}

/* ---------- carrito / modal / toast ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,5,8,.74); z-index:60; opacity:0; pointer-events:none;}
body.co .scrim,body.ao .scrim,body.ro .scrim,body.fi .scrim{opacity:1; pointer-events:auto;}
/* con un diálogo abierto el fondo seguía desplazándose por debajo: en móvil, donde el cajón
   ocupa toda la pantalla, el jugador movía una página que ya no veía.
   El scroll del documento lo lleva html, no body: bloquear solo body no hacía nada. */
body.co,body.ao,body.ro,body.fi{overflow:hidden;}
html:has(body.co),html:has(body.ao),html:has(body.ro),html:has(body.fi){overflow:hidden;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); z-index:70; background:#241d24;
  transform:translateX(100%); display:flex; flex-direction:column; box-shadow:-24px 0 70px rgba(0,0,0,.6);}
body.co .drawer{transform:none;}
.modal{position:fixed; z-index:70; top:50%; left:50%; width:min(620px,100vw - 32px); background:#241d24;
  border-radius:var(--r); padding:44px; transform:translate(-50%,-46%); opacity:0; pointer-events:none;
  display:flex; flex-direction:column; gap:20px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.65);
  /* en pantallas bajas el modal medía 713px y "Guardar" caía fuera sin forma de bajar */
  max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;}
body.ao .modal:not(.regalo):not(.ficha),body.ro .modal.regalo,body.fi .modal.ficha{
  opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
/* va DESPUÉS de la regla de arriba a propósito: la ficha no se centra, se ancla arriba, y con
   la misma especificidad ganaba el translate(-50%,-50%) y la sacaba de la pantalla */
.modal.ficha{transform:translate(-50%,8px);}
body.fi .modal.ficha{transform:translate(-50%,0);}
@media (prefers-reduced-motion:no-preference){
  .drawer{transition:transform .34s cubic-bezier(.22,.85,.28,1);}
  .scrim{transition:opacity .28s ease;}
  .modal{transition:opacity .26s ease,transform .26s cubic-bezier(.22,.85,.28,1);}}
/* Alternativa para reduced-motion: los cambios de estado siguen ocurriendo y quedan
   visibles, solo se les quita el recorrido. El vuelo al cofre se omite en JS. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important; animation-delay:0ms!important;
    transition-duration:1ms!important;}}

/* ═══ MOVIMIENTO ═══
   Momento focal: la compra. El producto vuela al cofre del carrito, la tapa se abre
   y el contador rebota. Lo demás es solo acuse de recibo. */
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
@keyframes chestPop{0%,100%{transform:scale(1);} 42%{transform:scale(1.055);}}
@keyframes lidPop{0%,100%{transform:rotate(0);} 45%{transform:rotate(-17deg);}}
@keyframes bump{0%,100%{transform:scale(1);} 45%{transform:scale(1.2);}}
@media (prefers-reduced-motion:no-preference){
  /* solo al cambiar de página: render() repinta en cada clic (carrito, desplegable…)
     y la entrada se reproducía entera cada vez */
  .page.entra .grid > *,.page.entra .plans > *,.page.entra .mgrid > *,.page.entra .mods > *{
    animation:rise .3s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d,0ms);}
  .page.entra{animation:fade .22s ease both;}
  .card,.gemcard,.plan{transition:transform .18s ease,border-color .18s ease,background .18s ease;}
  /* destello en la acción primaria — el mundo es de juego, se lo permite */
  .btn::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
    transform:translateX(-125%);}
  .btn:hover::after{transform:translateX(125%); transition:transform .62s ease;}
}
.btn{position:relative; overflow:hidden;}
.cartb.pop{animation:chestPop .42s cubic-bezier(.22,1,.36,1);}
.cartb.pop .lid{animation:lidPop .42s cubic-bezier(.22,1,.36,1);}
.cartb .lid{transform-origin:35px 28px; transform-box:view-box;}
.cartb.pop .s{animation:bump .42s cubic-bezier(.22,1,.36,1); display:inline-block;}
.flyer{position:fixed; z-index:90; pointer-events:none; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));}

/* tooltip real, con teclado. Se ancla a la celda .lb, no al botón de 26px:
   un absoluto de 250px dentro del botón inflaba su caja de scroll 112px. */
.tr > .lb{position:relative;}
.nfo .tip{position:absolute; bottom:calc(100% + 10px); left:0; transform:translateY(4px);
  width:min(250px,100%); background:#372d36; color:var(--ink); font-family:'Poppins',sans-serif;
  font-size:13px; font-weight:400; line-height:1.55; letter-spacing:0; padding:12px 14px;
  border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.55); opacity:0; pointer-events:none;
  z-index:30; text-align:left;}
.nfo .tip::after{content:""; position:absolute; top:100%; right:22px;
  border:7px solid transparent; border-top-color:#372d36;}
/* .abierto es lo que hace que el tooltip exista en táctil: sin ratón no hay :hover, y un toque
   no dispara :focus-visible, así que los siete "i" de la comparativa estaban muertos en móvil */
.nfo:hover .tip,.nfo:focus-visible .tip,.nfo[aria-expanded="true"] .tip{opacity:1; transform:none;}
.nfo[aria-expanded="true"] .tip{pointer-events:auto;}
.nfo[aria-expanded="true"]{background:var(--acc); color:var(--acc-ink);}
@media (prefers-reduced-motion:no-preference){.nfo .tip{transition:opacity .16s ease,transform .16s ease;}}
.dh{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 28px;
  border-bottom:1px solid var(--line);}
.db{flex:1; overflow-y:auto; padding:20px 28px; display:flex; flex-direction:column; gap:12px;}
.df{padding:26px 28px; display:flex; flex-direction:column; gap:16px; background:#1c161c;}
.ci{display:flex; align-items:center; gap:14px; background:var(--card); border-radius:var(--r-sm); padding:14px;}
.ci .w{width:62px; height:62px; border-radius:14px; background:var(--well); display:grid; place-items:center;
  flex:none; padding:8px;}
.ci .w img{width:100%; height:100%; object-fit:contain;}
.ci .t{flex:1; min-width:0; text-align:left;}
.ci b{font-family:'Fredoka',sans-serif; font-size:16px; color:var(--ink); font-weight:600; display:block;}
.ci span{font-size:13.5px; color:var(--mute); font-variant-numeric:tabular-nums;}
/* min-width fija el borde izquierdo del bloque: con o sin contador, todas las filas del
   carrito alinean sus controles en la misma columna */
.qt{display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:none; min-width:108px;}
.qt button{width:36px; height:36px; border-radius:9999px; background:var(--well); color:var(--body);
  display:grid; place-items:center; font-weight:700; font-size:17px;}
.qt button:hover{background:var(--acc); color:var(--acc-ink);}
.qt .quitar:hover{background:var(--red); color:#fff;}   /* quitar no es la acción alegre */
.qt span{min-width:22px; text-align:center; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.para{display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--acc);}
.para input{flex:1; min-width:0; font-size:13px; height:36px; padding:0 12px; border-radius:9999px;
  border:2px solid var(--line); background:var(--well); color:var(--ink); caret-color:var(--acc);}
.para input:focus{outline:none; border-color:var(--acc);}
.confirmar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--body);
  background:rgba(232,72,90,.1); border-radius:var(--r-sm); padding:12px 14px;}
.confirmar .btn{height:38px; padding:0 16px; font-size:13px;}
.entrega{display:flex; gap:13px; align-items:center; background:rgba(79,209,141,.1); border-radius:var(--r-sm);
  padding:14px 16px;}
.entrega .ic{width:40px; height:40px; border-radius:9999px; background:rgba(79,209,141,.16); color:var(--green);
  display:grid; place-items:center; flex:none;}
.entrega b{display:block; font-size:14.5px; color:var(--ink);}
.entrega span{font-size:13px; color:var(--mute);}
.lnk-cambiar{color:var(--acc); font-weight:600; font-size:13px; text-decoration:underline;
  text-underline-offset:3px;}
.aviso{display:flex; gap:9px; font-size:12.5px; line-height:1.55; color:var(--mute);
  background:rgba(232,72,90,.08); border-radius:var(--r-sm); padding:13px 15px; margin-top:4px;}
.aviso svg{flex:none; margin-top:2px; color:#ef8b96;}
.lnk-vaciar{align-self:flex-start; font-size:13.5px; font-weight:600; color:var(--mute);
  text-decoration:underline; text-underline-offset:3px; padding:6px 0;}
.lnk-vaciar:hover{color:var(--red);}
.tot{display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.tot b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:36px; color:var(--gold);
  font-variant-numeric:tabular-nums;}
.cempty{text-align:center; padding:64px 20px; display:flex; flex-direction:column; gap:18px; align-items:center;}
.eds{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px;}
.ed{background:var(--card); border-radius:var(--r-sm); padding:30px 22px; display:flex; flex-direction:column;
  gap:10px; align-items:center; box-shadow:var(--sh);}
.ed:hover{background:var(--card2);}
.ed b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px; color:var(--ink);}
.ed span{font-size:13px; color:var(--mute); line-height:1.55;}
.ed.sel{outline:3px solid var(--acc); outline-offset:-3px; background:var(--card2);}
.campo-nick{display:flex; flex-direction:column; gap:8px; width:100%; text-align:left;}
.campo-nick .fila{display:flex; align-items:center; gap:12px; background:var(--well);
  border:2px solid var(--line); border-radius:9999px; padding:6px 6px 6px 16px;}
.campo-nick .fila:focus-within{border-color:var(--acc);}
.campo-nick img{width:38px; height:38px; border-radius:9999px; image-rendering:pixelated; order:2;}
.campo-nick input{flex:1; min-width:0; height:44px; border:none; background:none; color:var(--ink);
  font-size:16px; font-weight:600; caret-color:var(--acc);}
.campo-nick input:focus{outline:none;}
.et{font-size:12.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--mute);}
.acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.ic-reg{width:60px; height:60px; border-radius:9999px; background:rgba(255,122,51,.12); color:var(--acc);
  display:grid; place-items:center; align-self:center;}
/* el acuse sube por encima de la barra de pago cuando la hay: si no, se solapaban 37px justo
   sobre el importe y el botón de "Ver carrito" */
body:has(.barra-pago) .toast{bottom:calc(30px + 67px + env(safe-area-inset-bottom));}
/* con un diálogo abierto el acuse tapaba el propio botón que lo disparó (45 de 48px): con
   diálogo se ancla arriba, donde no hay nada que ocultar */
body.co .toast,body.ao .toast,body.ro .toast,body.fi .toast{bottom:auto; top:24px;
  transform:translate(-50%,-22px);}
body.co .toast.on,body.ao .toast.on,body.ro .toast.on,body.fi .toast.on{transform:translate(-50%,0);}
.toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%,22px); z-index:80; opacity:0;
  pointer-events:none; background:var(--card2); color:var(--ink); border-radius:9999px; padding:15px 30px;
  font-weight:600; font-size:14.5px; box-shadow:0 14px 40px rgba(0,0,0,.5); display:flex; align-items:center;
  gap:10px;}
.toast.on{opacity:1; transform:translate(-50%,0); transition:opacity .2s ease,transform .2s ease;}

/* objetivos táctiles: en pantallas de dedo todo llega a 44px sin engordar el escritorio */
@media (pointer:coarse){
  .strip .lnk,.links a,.fcols a{min-height:44px; display:inline-flex; align-items:center;}
  .qt button{width:44px; height:44px;}
  .qt{min-width:124px;}          /* el contador engorda con el dedo: la reserva, también */
  .nfo,.giftx{width:44px; height:44px;}
  .card.cp .row .btn{height:46px;}
  .social a{width:48px; height:48px;}
  .lnk-vaciar,.ver,.lnk-cambiar{min-height:44px;}
  .fi-tabs button{min-height:44px;}
  /* estas tres vivían en el bloque de 400px: entre 401 y 640 con dedo se quedaban en 40px */
  .mb{min-height:44px;}
  .brand{min-height:44px;} .brand img{width:44px; height:44px;}
  /* la fila etiqueta→dato está pensada para "Hogares → 8"; con la explicación de un comando
     a la derecha quedaban 17 caracteres por línea y cuatro alturas de fila distintas */
  .fi-bloque .fi-fila{flex-direction:column; align-items:flex-start; gap:4px;}
  .fi-bloque .fi-fila b{text-align:left; max-width:100%;}
}
/* En 360px las tres modalidades sumaban 361px contra 328 de caja y "SkyBlock" se cortaba.
   Se estrecha el acolchado de toda la ficha —no solo el de las pestañas, para que las
   columnas sigan alineadas— y entran las tres sin carril. */
@media (max-width:400px){
  .fi-cab,.fi-global,.fi-panel,.fi-acc,.fi-tabs{padding-left:16px; padding-right:16px;}
  .fi-tabs button{padding:0 11px; font-size:13px;}
}

/* Escritorio: de 1040px para arriba la ESTRUCTURA no cambia — mismas columnas, misma barra,
   misma tabla. Lo único que varía es la escala, y va por clamp() ligado al viewport, así que
   un portátil de 1280 y un monitor de 1920 se ven proporcionalmente idénticos. */
@media (max-width:1040px){
  .g5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .g7{grid-template-columns:repeat(4,minmax(0,1fr));}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tcols{grid-template-columns:minmax(min(140px,100%),1fr) repeat(5,minmax(min(58px,100%),1fr));}
  .tr > *{font-size:15px; padding:12px 8px;}
  .thd .rh img{height:52px;}
  /* la tabla solo se pinta por encima de 900px, donde la columna da de sí: quitarle el rótulo
     al botón principal dejaba cinco píldoras naranjas sin palabra entre 901 y 1040 */
  .thd .rh .btn{height:44px; padding:0 10px; font-size:12.5px; gap:6px;}
  .thd .rh .btn svg{width:16px; height:16px;}
}
/* El tope de 641px es obligatorio: por debajo manda el bloque de móvil, y allí el cofre ES el
   botón. Sin acotarlo, este display:none se colaba hasta 390px y el carrito salía vacío. */
@media (max-width:1200px) and (min-width:641px){
  .cartb{margin-right:0; padding-right:28px;} .cartb .chest{display:none;}
}
@media (max-width:1200px){
  .bar{height:auto; flex-wrap:wrap; padding:14px; gap:12px;}
  .menu{order:3; width:100%; justify-content:flex-start; overflow-x:auto; flex:none;
    scrollbar-width:none;}
  .menu::-webkit-scrollbar{display:none;}
  .drop{left:0; transform:translateX(0) translateY(-6px);}
  .mi.open .drop{transform:translateX(0);}
  .drop::before{left:32px;}
  /* Pistas de carril a los DOS lados y en toda la banda donde el menú desplaza, no solo en
     móvil: en Gemas o Loyalty quedaban seis categorías escondidas a la izquierda sin aviso. */
  .menu.mas-dcha{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
  .menu.mas-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);
    mask-image:linear-gradient(90deg,transparent,#000 26px);}
  .menu.mas-izq.mas-dcha{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);}
}
/* la comparativa no cabe en móvil: se desplaza en su propio carril, no rompe la página */
@media (max-width:900px){
  .cmp{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:10px;
    min-width:0; contain:paint;}   /* sin contain, el carril seguía sumando al scroll del documento */
  .cmp .thd,.cmp .tbl{min-width:660px; padding-right:20px;}
  .cmp-hint{display:flex!important;}
.cmp-hint svg{transform:rotate(-90deg); flex:none;}
  .cmp .tr > .lb{position:sticky; left:0; z-index:3;}
  .cmp .tr:nth-child(odd) > .lb{background:var(--card);}
  .cmp .tr:nth-child(even) > .lb{background:var(--card2);}
}
@media (max-width:900px){
  .wrap{width:calc(100% - 32px);}
  .g5,.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g7{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fcols,.gemhero,.mods-2{grid-template-columns:1fr;} .gemhero .pic{display:none;}
  .strip{flex-direction:column; align-items:flex-start; gap:8px;}
}
/* ---------------------------------------------------------------------------------------
   Móvil (≤640px): arriba TODO va en una línea, igual que tienda.hystic.net.
   La tira de cuenta deja de apilarse (los rótulos largos pasan a solo lectura de pantalla),
   la barra no envuelve: escudo fijo + categorías en carril con scroll + carrito en icono.
   --------------------------------------------------------------------------------------- */
@media (max-width:640px){
  /* --- tira de cuenta: una fila --- */
  .strip{flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;
    gap:10px; padding:4px 0; font-size:12.5px;}   /* los 44px táctiles ya dan altura de sobra */
  .strip .who{flex-wrap:nowrap; gap:8px;}
  .strip .who.ayuda{flex:0 0 auto;}
  .strip .who.cuenta{flex:0 1 auto; justify-content:flex-end; min-width:0; margin-left:auto;}
  /* el rótulo se va de la vista pero NO del árbol: el enlace conserva su nombre accesible */
  .strip .tx{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; border:0;}
  .strip .sep{display:none;}
  .strip .lnk{gap:0;}
  /* el botón de regalo era 8px más alto que la acción primaria y la precedía */
  .ib{width:48px; height:48px;}
  /* fila de compra de abajo: la celda mide 88px, así que regalo y comprar no caben en fila.
     Con flex:1 + min-width:0 el botón se quedaba en 2px de ancho. Se apilan. */
  .thd .rh.compra{flex-direction:column; gap:8px; padding:10px;}
  .thd .rh.compra .btn{flex:none; width:100%;}
  .thd .rh.compra .ib{width:44px; height:44px;}
  .modal .acciones{flex-direction:column-reverse; align-items:stretch; gap:10px;}
  .modal .acciones .btn{width:100%;}
  /* nombre y precio caían los dos a 17,5px: el precio recupera su peso propio */
  .card .ct{font-size:16.5px;}
  .price{font-size:19px;}
  .strip .nick{max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .strip .ed{padding:3px 8px!important; font-size:11px;}   /* suelo de texto funcional: 11px */
  .strip img{width:26px; height:26px; border-radius:8px; margin-left:0;}

  /* --- barra: escudo + carril + carrito, sin saltos de línea --- */
  .bar{flex-wrap:nowrap; height:auto; padding:9px 10px; gap:9px; align-items:center;}
  .brand{flex:0 0 auto; gap:0;}
  .brand > span{display:none;}                    /* fuera "Hystic / TIENDA": queda el escudo */
  .brand img{width:44px; height:44px; border-radius:13px;}
  .menu{order:0; width:auto; flex:1 1 auto; min-width:0; justify-content:flex-start;
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding:3px 2px; margin:-3px -2px;}
  .menu::-webkit-scrollbar{display:none;}
  .menu > *{flex:0 0 auto;}
  .mb{height:40px; padding:0 13px; font-size:14px; gap:6px;}
  .mb svg{width:15px; height:15px;}
  .cartb{flex:0 0 auto; height:46px; width:auto; min-width:46px; padding:0 14px; margin-right:0;
    gap:7px; justify-content:center;}
  .cartb > span{display:none;}
  .cartb .chest{display:none;}                  /* el cofre se queda para el escritorio */
  .cartb .ic-carrito{display:block;}
  .cartb .cn{display:block;}

  /* Camino a la caja. En Rangos el último "Comprar" queda a 3.640px del carrito de arriba:
     con algo dentro, la caja baja al pulgar y deja de exigir volver al principio. */
  .barra-pago{display:flex;}
  body:has(.barra-pago) footer{padding-bottom:84px;}
}
/* va después del bloque de 900 a propósito: si no, aquel le ganaría por orden */
@media (max-width:560px){
  .g5,.g4,.g3,.g7,.plans{grid-template-columns:1fr;}
  .card,.gemcard,.plan,.mod,.loy,.info{padding:20px;}
  .empty{padding:56px 20px;}
  .modal{padding:28px 22px;}
  h1{font-size:34px;}
}

/* ── Puente con Tebex ────────────────────────────────────────────────────────
   En la plantilla el estado activo venía de aria-current y los controles eran
   <button>; aquí la navegación son enlaces reales, que es lo correcto en una
   tienda servida por el servidor. Se replican los mismos estados. */
.mb.activo{background:var(--acc); color:var(--acc-ink); box-shadow:var(--sh-btn);}
.mb.activo svg{opacity:1;}
.brand{text-decoration:none;}
.menu .mb{text-decoration:none;}
.drawer .qt .quitar{display:grid; place-items:center; width:36px; height:36px; border-radius:9999px;
  background:var(--well); color:var(--body); text-decoration:none;}
.drawer .qt .quitar:hover{background:var(--red); color:#fff;}
.df .btn.green.full,.cempty .btn{text-decoration:none;}
a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
/* precios de Tebex: el importe llega envuelto en <strong> desde price.twig */
.ci .t strong,.tot strong{font-weight:600;}
.tot b strong{font-family:'Fredoka',sans-serif;}

/* ── Descuentos ──────────────────────────────────────────────────────────────
   Un paquete rebajado tiene que verse rebajado de un vistazo: banda verde con
   el porcentaje, precio anterior tachado y el borde de la tarjeta teñido. */
/* ── Banda de rebajas ────────────────────────────────────────────────────────
   Va entre la barra y el titulo, y ocupa el ancho del contenido. Tres piezas:
   el sello con el porcentaje, el rotulo, y la cuenta atras a la derecha. Asi
   la franja tiene algo que sostener de punta a punta en vez de seis palabras
   flotando en medio. El rojo se concentra en el sello; el fondo solo lo tinta. */
.rebajas{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:16px 0 0; padding:13px 18px; border-radius:var(--r);
  background:linear-gradient(100deg, rgba(232,72,90,.17), rgba(232,72,90,.05));
  border:1px solid rgba(232,72,90,.3);}
.rb-sello{flex:none; font-family:'Fredoka',sans-serif; font-weight:600; font-size:21px;
  line-height:1; padding:11px 16px; border-radius:9999px; background:var(--red); color:#fff;
  white-space:nowrap; box-shadow:var(--sh-btn);}
.rb-txt{display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto;}
.rb-txt b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:18px; color:var(--ink);}
.rb-txt i{font-style:normal; font-size:13.5px; color:var(--body);}
.rb-fin{display:flex; align-items:center; gap:11px; flex-wrap:wrap;}
.rb-fin-et{font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--sale);}
.rb-reloj{display:flex; gap:7px;}
.rb-u{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:54px;
  padding:7px 9px; border-radius:var(--r-sm); background:var(--well); border:1px solid var(--line);}
.rb-u b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;}
.rb-u i{font-style:normal; font-family:'Poppins',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--mute);}
/* la abreviatura solo sale en movil, donde la fila tiene que caber entera */
.rb-u em{display:none; font-style:normal; font-family:'Poppins',sans-serif; font-size:10px;
  font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--mute);}
/* en movil todo entra en UNA fila: el sello ya canta el porcentaje, la frase de
   apoyo sobra y las unidades se abrevian a d/h/m junto al numero */
@media (max-width:760px){
  .rebajas{gap:9px; padding:10px 13px; flex-wrap:nowrap;}
  .rb-sello{font-size:17px; padding:8px 12px;}
  .rb-txt b{font-size:16px;} .rb-txt i{display:none;}
  .rb-fin{gap:8px; flex-wrap:nowrap;}
  .rb-reloj{gap:5px;}
  .rb-u{flex-direction:row; align-items:baseline; gap:3px; min-width:0; padding:6px 9px;}
  .rb-u b{font-size:16px;} .rb-u i{display:none;} .rb-u em{display:block;}}
/* pantallas estrechas: se cae el rotulo, mandan el sello y el reloj */
@media (max-width:520px){
  .rebajas{gap:7px; padding:9px 11px;}
  .rb-sello{font-size:15px; padding:7px 10px;}
  .rb-txt{display:none;}
  .rb-fin{flex:1; justify-content:space-between;}
  .rb-fin-et{font-size:9.5px; letter-spacing:.9px;}
  .rb-u{padding:5px 7px;} .rb-u b{font-size:15px;}}

/* en una pagina sin nada rebajado (Prime) el aviso sobra y confunde. Se escribe
   en negativo a proposito: si el navegador no entiende :has, la regla entera se
   cae y la banda se queda visible, que es el fallo bueno */
.wrap:not(:has(~ .page .antes)) .rebajas{display:none;}
@media (max-width:640px){.rebajas{border-radius:var(--r); padding:10px 16px; gap:8px;}
  .rb-tx{font-size:13px;} .rb-tx b{font-size:15px;}}

/* Ni marco teñido ni banda colgando: la rebaja vive donde se mira el precio y
   se cuenta igual en tarjeta, comparativa, ficha y plan. */
.antes{color:var(--mute); font-size:.72em; font-weight:400; margin-right:0;
  text-decoration:line-through; text-decoration-thickness:1.5px;}
.antes strong{font-weight:400;}
.rate{font-size:12.5px; color:var(--mute); margin-top:-2px;}

/* ── Módulos de Tebex ────────────────────────────────────────────────────────
   Los compone Tebex con las clases de su tema, así que en vez de reescribir ocho
   plantillas se les pone encima el lenguaje de la tienda: tarjeta, rótulo de módulo
   y la misma tipografía. Así siguen configurándose desde el panel. */
.modulos-tebex{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:12px; margin-bottom:clamp(32px,3vw,44px);}
.triplezone__modules__module{background:var(--card); border-radius:var(--r); box-shadow:var(--sh);
  padding:clamp(22px,2.2vw,32px); display:flex; flex-direction:column; gap:14px; min-width:0;}
.triplezone__modules__module__header{display:flex; align-items:center; gap:12px;}
.triplezone__modules__module__header i{display:grid; place-items:center; width:44px; height:44px;
  border-radius:9999px; background:rgba(255,122,51,.12); color:var(--acc); font-size:20px; flex:none;}
.triplezone__modules__module__header p{font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:clamp(17px,1.34vw,19px); color:var(--ink); letter-spacing:.5px; margin:0;}

/* donador del mes */
.top-donator{display:flex; align-items:center; gap:15px;}
.top-donator .avatar img{width:42px; height:42px; border-radius:13px; image-rendering:pixelated;}
.top-donator .name,.top-donator b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px;
  color:var(--gold);}
.top__payments--body p{font-size:13.5px; color:var(--mute);}

/* compras recientes: carril con el mismo desvanecido que el resto */
.payments-flex,.recent-payments{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
.payments-flex > *,.recent-payments > *{display:flex; align-items:center; gap:11px; flex:0 0 auto;
  background:var(--well); border-radius:9999px; padding:8px 16px 8px 8px; font-size:13px;}
.payments-flex img,.recent-payments img{width:30px; height:30px; border-radius:9px;
  image-rendering:pixelated; flex:none;}

/* meta mensual */
.goal-bar,.progress,.splash__goal--footer{height:14px; border-radius:9999px; background:var(--well);
  overflow:hidden;}
.goal-bar > *,.progress > *,.splash__goal__footer--progress{height:100%; border-radius:9999px;
  background:linear-gradient(90deg,var(--acc-d),var(--acc));}

/* tarjeta regalo y formularios sueltos */
.triplezone__modules__module input[type=text],
.triplezone__modules__module input:not([type=submit]){height:48px; width:100%; border-radius:var(--r-sm);
  background:var(--well); border:1px solid var(--line); color:var(--ink); padding:0 15px; font-size:15px;}
.triplezone__modules__module button,.triplezone__modules__module .btn{display:inline-flex;
  align-items:center; justify-content:center; gap:9px; height:48px; padding:0 24px; border-radius:9999px;
  background:var(--acc); color:var(--acc-ink); font-weight:700; font-size:14px; letter-spacing:.6px;
  text-transform:uppercase; box-shadow:var(--sh-btn); border:0; cursor:pointer;}
.triplezone__modules__module a{color:var(--acc);}


/* ── El cielo, liso ──────────────────────────────────────────────────────────
   El fondo llevaba tres elipses naranjas al 1,2 % repetidas en mosaico. Se veían
   como manchas y no encajaban. Se queda solo el degradado, que es lo que da el
   calor de arriba. Se sobreescribe aquí en vez de tocar `tebex.css`, que es la
   copia tal cual de la plantilla. */
body{
  background-image:linear-gradient(180deg,#5a290f 0,#1c1418 320px,#1c1418 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* ── La sombra de las imágenes deja de cortarse ───────────────────────────────
   `.art` recorta lo que se salga de su caja, y la sombra de la propia imagen
   (drop-shadow 0 8px 14px) sale por debajo: se le comían 16px de golpe y quedaba
   un corte recto bajo cada icono, en las tarjetas, en la comparativa y en Prime.
   El recorte estaba ahí para el zoom del ratón, pero la imagen ya va con 6px de
   acolchado dentro de la caja, así que el zoom cabe sin taparle nada al título. */
.art{overflow:visible;}

/* ── Comparativa de rangos: el nombre y el precio, arriba ─────────────────────
   La caja de la imagen mide 140px fijos y en la comparativa la imagen se pinta a
   76px, así que sobraban 52px de aire muerto que empujaban "VIP · 9,99 €" contra
   el botón. Con el alto pegado a la imagen, el nombre y el precio quedan donde
   se leen: entre el icono y Comprar. */
.thd .rh .art{height:auto;}

/* El botón de regalo de la fila de compra de abajo era 56px contra los 42 del
   botón de comprar, y se veía como un globo al lado. Mismo alto los dos. */
.thd .rh.compra .ib{width:42px; height:42px;}

/* En la fila de compra de abajo, la primera columna (la de "Características")
   iba vacía pero pintada como tarjeta: un cuadro de 289x70 sin nada dentro. Solo
   tiene que guardar el sitio para que las cinco columnas sigan cuadrando. */
.thd .feat.vacia{background:none; box-shadow:none;}

/* ── Rebajas ─────────────────────────────────────────────────────────────────
   Todo lo de aquí lo dispara Tebex: discount.applied pone el "antes", el precio
   nuevo y el porcentaje. Un paquete rebajado no se parece a uno normal: el
   importe anterior va tachado, el vigente en verde y el ahorro en una píldora. */
.price.rebajado,.p.rebajado,.big.rebajado{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
/* el precio vigente conserva el color de siempre (naranja, u oro si es la destacada):
   lo que marca la rebaja es el tachado y la píldora, no un color nuevo por tarjeta */
.pct{font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.9px;
  line-height:1; padding:5px 9px; border-radius:9999px; background:var(--sale-bg);
  color:var(--sale); white-space:nowrap; align-self:center;}
.p.rebajado .pct,.card.cp .pct{font-size:10.5px; padding:4px 7px; letter-spacing:.6px;}
.big.rebajado{gap:10px;}
.big.rebajado .antes{font-size:.44em;}
.fi-precio .antes{font-size:.7em;}
/* con rebaja, el sello de entrega baja a su propia linea: el precio y el ahorro
   mandan arriba y el corte no depende de lo largo que sea el importe */
.fi-precio:has(.pct) em{flex-basis:100%;}
.p.rebajado .antes{margin-right:0;}

/* ── Esqueleto ───────────────────────────────────────────────────────────────
   Inicio pide a las categorías lo que Twig no da en la portada; mientras llega,
   la rejilla mantiene su altura en vez de saltar. */
.card.cargando{pointer-events:none; min-height:340px; justify-content:flex-start; gap:14px;}
.card.cargando .art,.card.cargando .ct,.card.cargando .price{display:block; border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--well),var(--card2),var(--well));
  background-size:220% 100%; animation:hy-late 1.25s ease-in-out infinite;}
.card.cargando .art{height:150px;}
.card.cargando .ct{height:22px; width:62%;}
.card.cargando .price{height:20px; width:38%;}
@keyframes hy-late{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion: reduce){.card.cargando .art,.card.cargando .ct,.card.cargando .price{animation-duration:1ms;}}

/* ── La ficha va centrada ────────────────────────────────────────────────────
   La plantilla la anclaba arriba para que no se recolocase al cambiar de
   pestaña. Centrada se lee mejor, y con max-height sigue sin salirse nunca. */
.modal.ficha{top:50%; bottom:auto; transform:translate(-50%,calc(-50% + 8px));}
body.fi .modal.ficha{transform:translate(-50%,-50%);}

/* ── Imágenes de la descripción en la ficha ──────────────────────────────────
   El prefijo, el kit y la vista del aura. Mismo pozo que las demás piezas, y se
   pueden tocar para verlas grandes. */
.fi-fotos{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.fi-fotos img{max-width:100%; border-radius:var(--r-sm); image-rendering:auto; cursor:zoom-in;}
.fi-fotos img:hover{filter:brightness(1.08);}

#hy-lupa{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(8,5,8,.86); padding:24px; cursor:zoom-out; opacity:0;}
#hy-lupa.on{opacity:1;}
#hy-lupa img{max-width:min(1100px,100%); max-height:calc(100dvh - 48px); border-radius:var(--r);}
@media (prefers-reduced-motion:no-preference){ #hy-lupa{transition:opacity .2s ease;} }

/* El porcentaje de la meta, del mismo tamaño que su rótulo */
.goal .top i{font-size:clamp(17px,1.34vw,19px); letter-spacing:.5px;}

/* ── Miniatura de los planes de Prime ────────────────────────────────────────
   Los planes eran las únicas tarjetas sin imagen. Se les pone la misma que al
   resto: aquí solo se le quita la caja de <button> y se le da el crecer al
   pasar por encima, que la plantilla ata a `.card` y `.plan` no lo es. El
   tamaño de la imagen lo sigue poniendo `.art img` de la plantilla; redefinirlo
   aquí con max-height la recorta, porque el alto del contenedor deja de ser
   definido y el 100% no resuelve. */
.plan .art{border:0; background:none; padding:0; cursor:pointer; width:100%;
  height:132px; margin:2px 0 4px;}
.plan:hover .art img{transform:scale(1.06) translateY(-2px);}

/* ── Cerrar sesión, con el mismo lenguaje que el resto del diálogo ─────────── */
/* Cerrar sesión va SIEMPRE en su propia línea y debajo de Cancelar y Guardar,
   con su mismo alto. Se fuerza tanto en flex como en grid: en móvil la fila de
   acciones cambia de disposición y con `flex` a secas salía arriba y diminuto. */
.modal .acciones{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;}
.modal .acciones [data-salir]{order:99; flex:1 0 100%; width:100%; grid-column:1/-1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box;
  height:46px; padding:0 22px; border-radius:9999px; cursor:pointer; white-space:nowrap;
  background:rgba(232,72,90,.14); border:1px solid rgba(232,72,90,.45); color:var(--red);
  font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.2px; text-transform:uppercase;
  transition:filter .16s ease,transform .16s ease;}
.modal .acciones [data-salir]:active{transform:translateY(1px);}
.modal .acciones [data-salir]:hover{background:var(--red); border-color:var(--red); color:#fff;}
/* A 640px la plantilla apila las acciones con `column-reverse` para dejar Guardar
   encima de Cancelar. Con la columna invertida, un `order` alto sube el botón en
   vez de bajarlo: por eso salía arriba. Aquí se invierte el orden y se le quita
   la base del 100% (en columna eso es ALTO, no ancho, y lo dejaba deforme). */
@media (max-width:640px){
  .modal .acciones{align-items:stretch;}
  .modal .acciones [data-salir]{order:-1; flex:0 0 auto; height:46px;}
}

/* Sin sesión desaparece el botón "Cambiar" y quedaban dos puntos seguidos */
.strip .sep + .sep{display:none;}

/* ── Bloques de dos líneas de la barra ───────────────────────────────────────
   "Hystic / Tienda" y "Ver carrito / Vacío" separan con un <br>, y el <br> toma
   el interlineado del cuerpo (1.6): quedaban muy sueltos comparados con la
   tienda oficial. Se aprieta solo ese par de líneas. */
.brand > span{line-height:1.08;}
.brand .sub{display:inline-block; margin-top:1px;}
.cartb > span{line-height:1.1;}
.cartb .s{display:inline-block; margin-top:1px;}

/* ── Marca de regalo en el carrito ───────────────────────────────────────────
   La columna del nombre mide 77px en un móvil de 375: ahí dentro un nick de
   Minecraft se partía en nueve renglones. La marca sale de esa columna y ocupa
   una línea propia bajo la fila, con los 291px enteros para ella. */
.ci{flex-wrap:wrap;}
.ci .fila-regalo{flex:1 0 100%; display:flex; margin-top:-4px;}
.marca-regalo{display:inline-flex; align-items:center; gap:6px; margin-top:0; max-width:100%;
  padding:5px 11px 5px 9px; border-radius:9999px; line-height:1.25;
  background:rgba(255,122,51,.12); border:1px solid rgba(255,122,51,.28);
  color:var(--acc); font-size:11.5px; font-weight:700; letter-spacing:.2px;
  white-space:normal; word-break:break-word; text-align:left;}
.marca-regalo svg{flex:none;}

/* Aviso del cuadro de regalo cuando el paquete ya va para alguien */
.nota-regalo{display:flex; gap:8px; align-items:flex-start; text-align:left; margin-top:2px;
  padding:10px 13px; border-radius:var(--r-sm); background:rgba(255,122,51,.1);
  border:1px solid rgba(255,122,51,.24); color:var(--mute); font-size:13px; line-height:1.45;}
.nota-regalo svg{flex:none; margin-top:2px; color:var(--acc);}
.nota-regalo b{color:var(--ink);}

@media (max-width:640px){
  /* "¿Vaciar el carrito entero?" y sus dos botones caían desalineados */
  .confirmar{flex-wrap:wrap; row-gap:10px; align-items:center;}
  .confirmar > span{flex:1 1 100%;}
  .confirmar .btn{flex:1 1 0; min-width:0;}
}

/* ── Marcas de pago ──────────────────────────────────────────────────────────
   Mismo tamaño y mismo hueco que servía la tienda antigua (.hy-pay span). */
.pays i > .fab{font-size:20px; line-height:1; display:block;}

/* ── Iconos redondos del pie ─────────────────────────────────────────────────
   `.fcols a` del pie pisaba a `.social a` dentro de la media query del móvil y
   le cambiaba el display a inline-flex; con flex el place-items ya no centra en
   horizontal y el icono se pegaba al borde izquierdo del círculo. */
.social a{display:grid; place-items:center; min-height:0;}

/* ── Desplegable de Cosméticos ───────────────────────────────────────────────
   El panel se saca al final del body y se coloca en coordenadas de página. Con
   la barra convertida en carril, dentro quedaba recortado; y en fijo el iOS lo
   ancla mal en cuanto un antepasado tiene transform. Fuera no le pasa ninguna
   de las dos cosas, así que es desplegable a cualquier ancho. */
.drop{position:absolute; left:0; top:0; transform:translateX(-50%) translateY(-6px);}
.drop.abierto{opacity:1; pointer-events:auto; transform:translateX(-50%);}
.drop::before{left:var(--flecha,50%);}
@media (max-width:1200px){
  .drop{transform:translateX(-50%) translateY(-6px);}
  .drop.abierto{transform:translateX(-50%);}
}

/* ── Entrar con la cuenta ────────────────────────────────────────────────────
   El formulario lo genera Tebex; aquí solo se le pone la ropa de la tienda. */
#tb-entrar form{display:flex; flex-direction:column; gap:14px; align-items:stretch;}
#tb-entrar label{font-size:14px; color:var(--mute);}
#tb-entrar input:not([type=submit]):not([type=checkbox]):not([type=radio]),
#tb-entrar select{height:52px; width:100%; border-radius:var(--r-sm); background:var(--well);
  border:1px solid var(--line); color:var(--ink); padding:0 16px; font-size:16px; font-family:inherit;}
#tb-entrar input:focus-visible,#tb-entrar select:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
#tb-entrar button,#tb-entrar input[type=submit],#tb-entrar .btn{display:inline-flex; align-items:center;
  justify-content:center; gap:9px; height:56px; padding:0 32px; border-radius:9999px; border:0;
  background:var(--acc); color:var(--acc-ink); font-family:inherit; font-weight:700; font-size:15px;
  letter-spacing:.6px; text-transform:uppercase; box-shadow:var(--sh-btn); cursor:pointer;}
#tb-entrar .error,#tb-entrar .alert{color:var(--red); font-size:14px;}

/* la isla de datos de Twig no se ve nunca */
#tb,#tb-pkgs,#tb-mod{display:none !important;}


/* --- gemas: mismo formato de destacado que el inicio ---
   En el inicio la tarjeta destacada lleva cinta SOLIDA y el precio del mismo
   color que la cinta (#FFC247 sobre tinta oscura). En gemas las cintas eran
   pildoras tintadas y el precio se quedaba naranja como el resto, asi que el
   destacado no se distinguia. Se unifica: cinta solida y precio a juego. */
/* El borde tambien: seguia en --acc (naranja) y desentonaba con la
   cinta y el precio, que ya van en oro. */
.gemcard.pop{ border-color:var(--gold); }
.gemcard.pop .tag{ background:var(--gold); color:#301F00; }
.gemcard.pop .ahora{ color:var(--gold); }
.gemcard.val .tag{ background:var(--green); color:#06251a; }
.gemcard.val .ahora{ color:var(--green); }


/* Las bolsas de gemas se levantaban al pasar el raton pero su ilustracion
   se quedaba quieta: faltaba la regla del zoom que si tienen las tarjetas de
   rangos (.card) y los planes de Prime (.plan). La transicion ya estaba en
   `.art img`, solo faltaba el estado de hover. */
.gemcard:hover .art img{ transform:scale(1.06) translateY(-2px); }