/* ==========================================================================
   Aura Farming — landing
   Diseño aprobado (landing.html). No modificar sin pasar por diseño.
   La home no carga base.css de Dawn; este bloque neutraliza lo que Dawn
   inyecta en el <style> de theme.liquid (root a 62.5%, body flex, etc.).
   ========================================================================== */
html{font-size:100%}
body{display:block;min-height:0;font-size:1rem;letter-spacing:normal}

  :root{
    --bg:#0E0E13;--panel:#16161E;--line:#26262F;--text:#F2F2F4;--muted:#9C9CA8;
    --aura:#8B5CF6;--aura-soft:#C9B8FF;--fire:#FF9A3C;--victoria:#FFD166;--debt:#FF4D6D;
    --display:'Anton',Impact,'Arial Narrow',sans-serif;--body:'Montserrat',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:0}
  /* height:auto es imprescindible: los atributos width/height del HTML entran
     como altura fija y, al encoger el ancho, estiran la imagen. */
  img{display:block;max-width:100%;height:auto}
  :focus-visible{outline:2px solid var(--aura-soft);outline-offset:3px}
  .wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
  .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--aura-soft)}
  h1,h2,h3,.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
  h2{font-size:clamp(2.2rem,6vw,3.6rem);margin:.5rem 0 1rem;text-shadow:0 0 24px rgba(139,92,246,.35)}
  .lead{color:var(--muted);max-width:56ch;font-size:1rem}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;background:var(--aura);color:#fff;font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem 1.6rem;border-radius:12px;box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 32px rgba(139,92,246,.45);transition:transform .15s,box-shadow .3s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(201,184,255,.6),0 0 48px rgba(139,92,246,.7)}
  .btn .price{font-family:var(--body);font-weight:700;font-size:.9rem;opacity:.9;background:rgba(0,0,0,.25);padding:.2rem .55rem;border-radius:6px}
  .btn-ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--text)}
  .btn-ghost:hover{box-shadow:none;border-color:var(--aura-soft)}

  /* top bar */
  .top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(14,14,19,.75);border-bottom:1px solid var(--line)}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
  .logo{font-family:var(--body);font-weight:900;font-size:1.05rem;letter-spacing:-.01em;text-shadow:0 0 16px rgba(201,184,255,.6)}
  .top nav{display:flex;gap:1.5rem;font-size:.82rem;font-weight:700;color:var(--muted)}
  .top nav a:hover{color:var(--text)}
  .btn-top{padding:.5rem 1rem;font-size:.95rem;border-radius:10px;box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 18px rgba(139,92,246,.4)}
  .btn-top .price{font-size:.75rem;padding:.15rem .45rem}
  @media(max-width:480px){.btn-top{padding:.45rem .8rem;font-size:.85rem}.btn-top .price{display:none}}
  @media(max-width:760px){.top nav{display:none}}

  /* hero */
  .hero{position:relative;padding:3.5rem 0 3rem;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 28% 50%,rgba(139,92,246,.28),transparent 70%),radial-gradient(ellipse 35% 50% at 78% 55%,rgba(255,154,60,.18),transparent 70%);pointer-events:none}
  .hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
  .hero h1{font-size:clamp(3.2rem,9vw,6.4rem);margin:.8rem 0 1rem;text-shadow:0 0 30px rgba(201,184,255,.4)}
  .hero h1 .v{color:var(--aura-soft);text-shadow:0 0 28px rgba(139,92,246,.9)}
  .hero h1 .o{color:var(--fire);text-shadow:0 0 28px rgba(255,154,60,.8)}
  .hero p{color:var(--muted);font-size:1.05rem;max-width:46ch}
  .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1.2rem}
  .ficha{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:var(--muted)}
  .ficha b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--text);letter-spacing:.02em}
  .cover{position:relative;display:grid;place-items:center}
  .cover img{width:min(360px,80%);border-radius:14px;box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 60px rgba(139,92,246,.35),0 0 120px rgba(255,154,60,.15);transform:rotate(-4deg);animation:float 6s ease-in-out infinite}
  .cover .badge{position:absolute;top:-6px;right:6%;background:var(--victoria);color:#1a1200;font-family:var(--display);font-size:.95rem;letter-spacing:.06em;padding:.5rem .8rem;border-radius:8px;transform:rotate(6deg);box-shadow:0 0 24px rgba(255,209,102,.6)}
  @keyframes float{50%{transform:rotate(-4deg) translateY(-10px)}}
  @media(max-width:860px){.hero{padding-top:2.5rem}.hero .wrap{grid-template-columns:1fr}.cover{order:-1}.cover img{width:min(280px,70%)}}

  /* prensa — logos de los medios que nos han cubierto, en movimiento */
  .press{border-block:1px solid var(--line);overflow:hidden;background:var(--panel);padding:1.05rem 0}
  .press-track{display:flex;align-items:center;width:max-content;animation:press-scroll 50s linear infinite}
  .press-set{display:flex;align-items:center}
  /* La pista son dos juegos idénticos y la animación desplaza -50%: cada hijo
     lleva margin-right (incluido el último) para que la costura no dé un salto. */
  .press-set>*{flex:none;margin-right:3.2rem}
  .press-label{font-family:var(--display);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aura-soft);opacity:.65;white-space:nowrap}
  @keyframes press-scroll{to{transform:translateX(-50%)}}
  /* Los logos vienen en sus colores de marca; brightness(0) invert(1) los pasa
     a blanco puro respetando el alfa, y la opacidad los baja a gris clarito. */
  .medio{display:block;width:auto;filter:brightness(0) invert(1);opacity:.55;transition:opacity .25s}
  .medio:hover{opacity:.9}
  .m-elpais{height:26px}
  .m-tve{height:25px}
  .m-lasexta{height:30px}
  .m-infobae{height:24px}
  .m-20min{height:22px}
  .m-plural{height:30px}
  .m-ctrl{height:34px}
  .m-area{height:31px}
  .m-roast{height:24px}
  .m-noroeste{height:33px}
  @media(prefers-reduced-motion:reduce){.press-track{animation:none}}
  @media(max-width:640px){
    .press{padding:.85rem 0}
    .press-set>*{margin-right:2.2rem}
    .press-label{font-size:.85rem}
    .m-elpais{height:21px}
    .m-tve{height:20px}
    .m-lasexta{height:24px}
    .m-infobae{height:19px}
    .m-20min{height:18px}
    .m-plural{height:24px}
    .m-ctrl{height:27px}
    .m-area{height:25px}
    .m-noroeste{height:26px}
    .m-roast{height:19px}
  }

  section{padding:4.5rem 0}
  /* pasos */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2rem}
  .step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem}
  .step .n{font-family:var(--display);font-size:2.2rem;color:var(--aura);text-shadow:0 0 18px rgba(139,92,246,.7);line-height:1}
  .step h3{font-size:1.35rem;margin:.6rem 0 .4rem}
  .step p{color:var(--muted);font-size:.9rem}
  .step p b{color:var(--text)}
  .step.debt .n{color:var(--debt);text-shadow:0 0 18px rgba(255,77,109,.7)}
  .step.real .n{color:var(--victoria);text-shadow:0 0 18px rgba(255,209,102,.7)}
  @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}

  /* acciones */
  .acciones{background:var(--panel);border-block:1px solid var(--line)}
  .acciones .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
  .acciones img{border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.3);width:min(420px,100%);margin-inline:auto}
  .ladder{list-style:none;margin-top:1.4rem;border-top:1px solid var(--line)}
  .ladder li{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
  .ladder .val{font-family:var(--display);font-size:1.4rem;color:var(--aura-soft);min-width:4.2rem;text-shadow:0 0 14px rgba(139,92,246,.7)}
  .ladder .name{font-weight:700}
  .ladder .risk{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
  .ladder li:nth-child(-n+3) .risk{color:var(--debt)}
  @media(max-width:860px){.acciones .wrap{grid-template-columns:1fr}}

  /* caja */
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
  .c{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .c img{aspect-ratio:1/1.05;object-fit:cover;object-position:top}
  .c .t{padding:1.1rem 1.2rem 1.3rem}
  .c .disp{font-size:1.6rem}
  .c .num{font-family:var(--display);font-size:2.8rem;line-height:1}
  .c p{color:var(--muted);font-size:.88rem;margin-top:.3rem}
  .c.real .num,.c.real .disp{color:var(--victoria);text-shadow:0 0 18px rgba(255,209,102,.6)}
  .c.debt .num,.c.debt .disp{color:var(--debt);text-shadow:0 0 18px rgba(255,77,109,.6)}
  .c.sit .num,.c.sit .disp{color:#DDDDE6}
  .total{display:flex;align-items:center;gap:1.2rem;margin-top:1rem;padding:1.2rem 1.4rem;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:.9rem}
  .total .num{font-family:var(--display);font-size:2.6rem;color:var(--text);line-height:1}
  @media(max-width:760px){.cards3{grid-template-columns:1fr}}

  /* producto */
  .product{background:linear-gradient(180deg,rgba(139,92,246,.1),transparent 60%)}
  .product .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .gallery{border-radius:20px;background:radial-gradient(circle at 50% 45%,rgba(139,92,246,.35),var(--panel) 70%);border:1px solid var(--line);display:grid;place-items:center;padding:2rem;aspect-ratio:1}
  .gallery img{width:62%;border-radius:10px;box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 60px rgba(139,92,246,.4)}
  .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.6rem}
  .thumbs img{aspect-ratio:1;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);opacity:.7}
  .thumbs img:first-child{border-color:var(--aura);opacity:1}
  .pinfo h2{font-size:clamp(2.4rem,6vw,3.4rem);margin:.4rem 0 .6rem}
  .pprice{font-family:var(--display);font-size:2rem;color:var(--text)}
  .pprice small{font-family:var(--body);font-weight:700;font-size:.72rem;color:var(--muted);margin-left:.6rem;letter-spacing:.1em}
  .xmas{display:inline-block;margin-top:.7rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;padding:.4rem .8rem;border-radius:999px;background:rgba(255,209,102,.12);color:var(--victoria);border:1px solid rgba(255,209,102,.35)}
  .pinfo p{color:var(--muted);margin:1rem 0}
  .buy{display:flex;gap:.7rem;margin:1.2rem 0 .7rem}
  .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;height:54px;font-weight:700}
  .qty button{background:none;color:var(--text);width:46px;height:100%;font-size:1.2rem}
  .qty span{width:2rem;text-align:center}
  .buy .btn{flex:1;height:54px;font-size:1.25rem}
  .shoppay{height:48px;border-radius:12px;background:#5A31F4;color:#fff;font-weight:700;font-size:.9rem;display:grid;place-items:center}
  .trust{list-style:none;margin-top:1.4rem;display:grid;gap:.5rem;font-size:.86rem;color:var(--muted)}
  .trust li::before{content:"→ ";color:var(--aura-soft)}
  @media(max-width:860px){.product .wrap{grid-template-columns:1fr;gap:2rem}}

  /* studio */
  .studio{border-block:1px solid var(--line);padding:2.4rem 0;background:var(--panel)}
  .studio .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}
  .studio p{color:var(--muted);max-width:54ch;font-size:.95rem}
  .studio strong{color:var(--text)}
  .stat{font-family:var(--display);font-size:2.6rem;color:var(--victoria);line-height:1;text-shadow:0 0 20px rgba(255,209,102,.5)}
  .stat small{display:block;font-family:var(--body);font-weight:700;font-size:.65rem;letter-spacing:.16em;color:var(--muted);margin-top:.4rem}

  /* faq */
  details{border-bottom:1px solid var(--line);padding:1.1rem 0}
  summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
  summary::after{content:"+";font-family:var(--display);color:var(--aura-soft);font-size:1.5rem}
  details[open] summary::after{content:"–"}
  details p{color:var(--muted);margin-top:.7rem;max-width:60ch;font-size:.95rem}

  footer{padding:3rem 0 7rem;color:var(--muted);font-size:.8rem}
  footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
  footer nav{display:flex;gap:1.2rem;font-weight:700}

  .sticky{position:fixed;bottom:0;left:0;right:0;z-index:30;backdrop-filter:blur(14px);background:rgba(22,22,30,.92);border-top:1px solid var(--line);padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .3s}
  @media(min-width:861px){.sticky{display:none}}
  @media(min-width:861px){footer{padding-bottom:3rem}}
  .sticky.on{transform:none}
  .sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .sticky .name{font-family:var(--display);font-size:1.1rem;letter-spacing:.03em}
  .sticky .name small{display:block;font-family:var(--body);font-weight:700;color:var(--muted);font-size:.7rem;letter-spacing:.06em}
  .sticky .btn{padding:.7rem 1.3rem;font-size:1rem;flex:none}
  .sticky .name{min-width:0}
  .sticky .name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* videos */
  .videos{background:var(--panel);border-block:1px solid var(--line)}
  .reel{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2rem}
  .vid{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#1c1c26,#0E0E13);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:1rem}
  .vid::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--g),transparent 65%);opacity:.5}
  .vid .play{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;backdrop-filter:blur(6px)}
  .vid .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
  .vid .lab{position:relative;font-family:var(--display);font-size:1.1rem;letter-spacing:.03em;text-shadow:0 2px 10px #000}
  .vid .sub{position:relative;font-size:.7rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  @media(max-width:760px){.reel{grid-template-columns:repeat(2,1fr)}}
  /* caja compacta */
  .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.6rem}
  .row4 .c img{aspect-ratio:1/.9}
  .row4 .c .t{padding:.9rem 1rem 1rem}
  .row4 .c .num{font-size:2.2rem}
  .row4 .c .disp{font-size:1.15rem}
  .row4 .c p{font-size:.8rem}
  .c.act .num,.c.act .disp{color:var(--aura-soft);text-shadow:0 0 18px rgba(139,92,246,.6)}
  @media(max-width:760px){.row4{grid-template-columns:1fr 1fr}}
  .hero .bigprice{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.4rem);color:var(--victoria);text-shadow:0 0 24px rgba(255,209,102,.5);line-height:1;margin-top:1.4rem}
  .hero .bigprice small{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-left:.6rem}

  .pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(255,209,102,.4);background:rgba(255,209,102,.1);color:var(--victoria);margin-bottom:1rem}
  .pill i{width:8px;height:8px;border-radius:50%;background:var(--victoria);box-shadow:0 0 12px var(--victoria);animation:pulse 1.6s infinite}
  @keyframes pulse{50%{opacity:.3}}
  .stock{background:var(--panel);border-block:1px solid var(--line);padding:1.4rem 0}
  .stock .wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:center}
  .stock .k{font-family:var(--display);font-size:1.4rem;letter-spacing:.03em}
  .stock .k small{display:block;font-family:var(--body);font-weight:700;font-size:.65rem;letter-spacing:.14em;color:var(--muted)}
  .bar{height:12px;border-radius:999px;background:#0E0E13;border:1px solid var(--line);overflow:hidden}
  .bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--aura),var(--victoria));box-shadow:0 0 16px rgba(255,209,102,.6)}
  .stock .r{font-family:var(--display);font-size:1.6rem;color:var(--victoria);text-shadow:0 0 16px rgba(255,209,102,.5)}
  .stock .r small{display:block;font-family:var(--body);font-weight:700;font-size:.65rem;letter-spacing:.14em;color:var(--muted)}
  @media(max-width:700px){.stock .wrap{grid-template-columns:1fr;gap:.9rem}.stock .k[style]{text-align:left!important}}
  .gift{background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,209,102,.12),transparent 70%)}
  .gift .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
  .mystery{aspect-ratio:2.5/3.5;width:min(260px,70%);margin-inline:auto;border-radius:14px;border:2px solid rgba(255,209,102,.6);background:linear-gradient(160deg,#1c1a12,#0E0E13);display:grid;place-items:center;font-family:var(--display);font-size:8rem;color:var(--victoria);text-shadow:0 0 40px rgba(255,209,102,.9);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 60px rgba(255,209,102,.3);transform:rotate(-5deg);position:relative}
  .mystery::after{content:attr(data-note);position:absolute;bottom:14px;font-family:var(--body);font-weight:700;font-size:.6rem;letter-spacing:.2em;color:var(--muted)}
  .gift h2{color:var(--victoria);text-shadow:0 0 24px rgba(255,209,102,.4)}
  .gift ul{list-style:none;margin-top:1.2rem;display:grid;gap:.6rem;color:var(--muted);font-size:.95rem}
  .gift li::before{content:"✦ ";color:var(--victoria)}
  @media(max-width:760px){.gift .wrap{grid-template-columns:1fr}}

  .step{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:.2rem 1rem;align-items:center}
  .step .ico{grid-row:1/3;width:72px;height:72px;border-radius:16px;background:#0E0E13;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 0 24px rgba(139,92,246,.25) inset}
  .step .ico img{width:100%;height:100%;object-fit:cover;border-radius:16px}
  .step .ico svg{width:44px;height:44px;fill:none;stroke:var(--aura-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(139,92,246,.9))}
  .step.debt .ico svg{stroke:var(--debt);filter:drop-shadow(0 0 6px rgba(255,77,109,.9))}
  .step.real .ico svg{stroke:var(--victoria);filter:drop-shadow(0 0 6px rgba(255,209,102,.9))}
  .step .n{font-size:.7rem;font-family:var(--body);font-weight:700;letter-spacing:.2em;color:var(--muted);text-shadow:none;align-self:end}
  .step h3{margin:0}
  .step p{grid-column:1/-1;margin-top:.6rem}
  @media(max-width:900px){.steps{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Ajustes propios del tema (no estaban en landing.html porque allí la ficha
   era una maqueta estática). Reproducen el mismo aspecto con los elementos
   reales del formulario de Shopify.
   -------------------------------------------------------------------------- */

/* En la maqueta la cantidad era un <span>; aquí es el input real del formulario.
   Sin acotar por name, porque en la ficha se llama "quantity" y en el carrito
   "updates[...]": ambos deben verse igual. */
.qty input{
  width:2.6rem;
  height:100%;
  padding:0;
  border:0;
  background:none;
  color:var(--text);
  font-family:var(--body);
  font-weight:700;
  font-size:1rem;
  text-align:center;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Botón "Comprar" agotado */
.btn[disabled]{
  background:var(--panel);
  color:var(--muted);
  box-shadow:0 0 0 1px var(--line);
  cursor:not-allowed;
}
.btn[disabled]:hover{transform:none;box-shadow:0 0 0 1px var(--line)}

/* Contenedor del payment_button de Shopify (Shop Pay / Apple Pay / Google Pay).
   Ocupa el hueco que en la maqueta tenía el div .shoppay. */
.af-payment{margin-top:.2rem}
.af-payment .shopify-payment-button__button{
  border-radius:12px;
  min-height:48px;
  font-family:var(--body);
  font-weight:700;
}
.af-payment .shopify-payment-button__more-options{
  margin-top:.6rem;
  color:var(--muted);
  font-size:.8rem;
}


/* --------------------------------------------------------------------------
   La home y el carrito no cargan base.css de Dawn, así que hay que reponer
   las utilidades de accesibilidad que Dawn define allí. Sin esto, el enlace
   "Skip to content" se ve arriba a la izquierda.
   -------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute !important;
  overflow:hidden;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  word-wrap:normal !important;
}
.skip-to-content-link:focus{
  z-index:9999;
  position:inherit !important;
  overflow:auto;
  width:auto;height:auto;
  clip:auto;
  padding:1rem 1.4rem;
  background:var(--aura);
  color:#fff;
  font-family:var(--body);
  font-weight:700;
}

/* Los botones "Comprar" de cabecera, hero y barra fija son formularios que
   añaden al carrito. El wrapper no debe alterar la maquetación. */
.af-quick{display:contents}

/* --------------------------------------------------------------------------
   Cabecera: botón "Comprar" + acceso al carrito con contador.
   -------------------------------------------------------------------------- */
.af-actions{display:flex;align-items:center;gap:.6rem}

.af-cart-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.af-cart-btn:hover{border-color:var(--aura-soft);box-shadow:0 0 18px rgba(139,92,246,.35)}
.af-cart-btn svg{
  width:20px;height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.af-cart-count{
  position:absolute;
  top:-6px;right:-6px;
  min-width:19px;height:19px;
  padding:0 5px;
  border-radius:999px;
  background:var(--victoria);
  color:#1a1200;
  font-family:var(--body);
  font-weight:900;
  font-size:.65rem;
  line-height:19px;
  text-align:center;
  box-shadow:0 0 12px rgba(255,209,102,.6);
}

@media(max-width:480px){
  .af-cart-btn{width:38px;height:38px}
  .af-cart-btn svg{width:18px;height:18px}
}

/* Selector de idioma (solo visible con más de un idioma publicado) */
.af-lang{display:flex;align-items:center}
.af-lang select{
  appearance:none;
  height:42px;padding:0 .7rem;
  background:transparent;
  border:1px solid var(--line);border-radius:10px;
  color:var(--text);
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.06em;
  cursor:pointer;
}
.af-lang select:hover{border-color:var(--aura-soft)}
.af-lang select option{background:var(--panel);color:var(--text)}
@media(max-width:480px){.af-lang select{height:38px;padding:0 .5rem;font-size:.72rem}}

/* --------------------------------------------------------------------------
   Redes sociales en el pie. Mismo lenguaje visual que .af-cart-btn:
   cuadrado con borde, icono en currentColor, glow morado al pasar por encima.
   -------------------------------------------------------------------------- */
.af-social{display:flex;align-items:center;gap:.6rem}

.af-social-btn{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--muted);
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.af-social-btn:hover,
.af-social-btn:focus-visible{
  color:var(--aura-soft);
  border-color:var(--aura-soft);
  box-shadow:0 0 18px rgba(139,92,246,.35);
}
.af-social-btn svg{
  width:17px;height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.af-social-btn .af-social-dot{fill:currentColor;stroke:none}
.af-social-btn .af-social-solid{fill:currentColor;stroke:none}

/* --------------------------------------------------------------------------
   Caja del hero: render 3D con fondo transparente. El box-shadow del diseño
   original dibujaría un rectángulo alrededor del PNG, así que para esta
   imagen la sombra y el resplandor van con drop-shadow, que sigue el recorte.
   -------------------------------------------------------------------------- */
.cover img.af-cover-3d{
  height:auto;
  /* El render ya viene en perspectiva: girarlo otros -4 grados lo dejaba
     torcido, así que se queda recto y solo conserva el flotado. */
  transform:none;
  animation-name:af-float-3d;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 32px 42px rgba(0,0,0,.72))
         drop-shadow(0 0 26px rgba(139,92,246,.4))
         drop-shadow(0 0 60px rgba(255,154,60,.14));
}
@keyframes af-float-3d{50%{transform:translateY(-10px)}}

/* El precio del hero manda más que el resto del bloque. */
.hero .bigprice{font-size:clamp(3rem,7.5vw,4.6rem)}
.hero .bigprice small{font-size:.72rem}

/* --------------------------------------------------------------------------
   Qué hay en la caja: los cuatro tipos de carta a la izquierda, en lista,
   y una sola foto del producto a la derecha.
   -------------------------------------------------------------------------- */
.af-box{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}

.af-box-list{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.af-box-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 1.3rem;
  align-items:baseline;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.af-box-list .num{
  grid-row:1/3;
  font-family:var(--display);
  font-size:2.8rem;
  line-height:1;
  min-width:3.4rem;
}
.af-box-list .disp{
  font-family:var(--display);
  font-size:1.4rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--text);
}
.af-box-list p{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.af-box-list .act .num{color:var(--aura-soft);text-shadow:0 0 18px rgba(139,92,246,.6)}
.af-box-list .real .num{color:var(--victoria);text-shadow:0 0 18px rgba(255,209,102,.6)}
.af-box-list .debt .num{color:var(--debt);text-shadow:0 0 18px rgba(255,77,109,.6)}
.af-box-list .sit .num{color:#dddde6}

.af-box-shot img{
  width:100%;
  /* Sin height:auto, el atributo height del <img> gana al aspect-ratio y la
     foto sale a su altura natural. */
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:50% 62%;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.28);
}

@media(max-width:860px){
  .af-box{grid-template-columns:1fr;gap:2rem}
  .af-box-list .num{font-size:2.4rem;min-width:2.9rem}
}

/* --------------------------------------------------------------------------
   Galería de la ficha. Las miniaturas son botones para que se puedan pulsar
   con el teclado; el borde morado marca cuál se está viendo, no la primera.
   -------------------------------------------------------------------------- */
.thumbs .af-thumb{
  display:block;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  border-radius:8px;
}
.thumbs .af-thumb img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  object-position:top;
  border-radius:8px;
  border:1px solid var(--line);
  opacity:.7;
  transition:opacity .2s,border-color .2s;
}
.thumbs .af-thumb:hover img{opacity:1}
.thumbs .af-thumb.is-on img{border-color:var(--aura);opacity:1}
.thumbs .af-thumb:focus-visible{outline:2px solid var(--aura-soft);outline-offset:3px}

.gallery img{
  /* Sin height:auto el atributo height del <img> se impone al ancho en % y
     estira la imagen. El marco es siempre 4:5 y contain evita deformar o
     recortar, suba la imagen que suba. */
  height:auto;
  aspect-ratio:4/5;
  object-fit:contain;
  transition:opacity .15s;
}
.af-box-list .rules .num{color:var(--muted)}

/* --------------------------------------------------------------------------
   Hero: precio y botón en la misma línea, con la letra pequeña debajo.
   -------------------------------------------------------------------------- */
.af-buyrow{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.4rem}
.af-buyrow .bigprice{margin-top:0}
.af-buyrow .cta{margin:0}
.af-price-note{
  margin-top:.7rem;
  color:var(--muted);
  font-family:var(--body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media(max-width:520px){
  .af-buyrow{gap:.9rem}
  .af-buyrow .btn{width:100%}
}

/* Banderas sobre la esquina inferior derecha de la caja: el reglamento va en
   los dos idiomas. Flotan al mismo ritmo que la caja para que parezcan pegadas. */
.af-flags{
  position:absolute;
  right:9%;
  bottom:4%;
  z-index:2;
  display:flex;
  gap:.5rem;
  animation:af-float-3d 6s ease-in-out infinite;
}
.af-flag{
  display:block;
  width:38px;height:38px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}
.af-flag svg{display:block;width:100%;height:100%}
@media(max-width:860px){
  /* La caja es más pequeña aquí: si no se sacan al canto, tapan el "+8 años"
     impreso en la propia caja. */
  .af-flags{right:10%;bottom:0}
  .af-flag{width:32px;height:32px}
}

/* --------------------------------------------------------------------------
   Franja de datos del juego, justo antes del marquee.
   -------------------------------------------------------------------------- */
.af-specs{padding:1.8rem 0 2.2rem}
.af-specs .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.af-spec{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  padding:.4rem 0;
  text-align:center;
}
.af-spec + .af-spec{border-left:1px solid var(--line)}
.af-spec b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.2rem,5.5vw,3.2rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--text);
  text-shadow:0 0 24px rgba(201,184,255,.35);
}
.af-spec span{
  font-family:var(--body);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* La carta del regalo flota, como la caja del hero. */
.mystery{animation:af-float-mystery 6.5s ease-in-out infinite}
@keyframes af-float-mystery{50%{transform:rotate(-5deg) translateY(-14px)}}

/* --------------------------------------------------------------------------
   Cabecera. En escritorio af-right es solo una fila: idioma, Comprar y
   carrito, igual que antes. En móvil se convierte en panel desplegable.
   -------------------------------------------------------------------------- */
.af-right{display:flex;align-items:center;gap:.6rem}
.af-bar{display:flex;align-items:center;gap:.6rem}

.af-burger{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  width:42px;height:42px;
  padding:0;
  background:none;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  cursor:pointer;
}
.af-burger span{
  display:block;
  width:18px;height:2px;
  margin:0 auto;
  background:currentColor;
  border-radius:2px;
  transition:transform .2s,opacity .2s;
}
.af-burger span + span{margin-top:4px}
.af-burger:hover{border-color:var(--aura-soft)}
.top.is-open .af-burger{border-color:var(--aura-soft)}
.top.is-open .af-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top.is-open .af-burger span:nth-child(2){opacity:0}
.top.is-open .af-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:760px){
  .af-burger{display:flex}
  .af-right{display:contents}

  .top .wrap{flex-wrap:wrap;height:auto;min-height:60px}
  .logo{order:1}
  .af-bar{order:2}

  /* Panel: pestañas y acciones ocupan una fila completa y solo se ven abiertas */
  .top nav{order:3;flex-basis:100%}
  .af-actions{order:4;flex-basis:100%;display:none}

  .top.is-open nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    font-size:.95rem;
  }
  .top.is-open nav a{padding:.9rem .1rem;border-top:1px solid var(--line);color:var(--text)}
  .top.is-open .af-actions{
    display:flex;
    gap:.6rem;
    padding:.9rem 0 1.1rem;
    border-top:1px solid var(--line);
  }
  .top.is-open .af-actions .btn-top{flex:1;justify-content:center;padding:.7rem 1rem;font-size:1rem}
}

@media(max-width:480px){
  .af-burger{width:38px;height:38px}
}

/* --------------------------------------------------------------------------
   Para quién es. Tres tarjetas sobre panel oscuro, cada una con su acento
   del mismo trío de colores que usa "cómo se juega".
   -------------------------------------------------------------------------- */
.af-who{
  border-block:1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 60% at 15% 0%,rgba(139,92,246,.14),transparent 70%),
    radial-gradient(ellipse 45% 60% at 85% 100%,rgba(255,154,60,.09),transparent 70%),
    var(--panel);
}
.af-who-top{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem 3rem;
  align-items:end;
}
.af-who h2{margin:.4rem 0 0}
.af-who h2 .v{color:var(--aura-soft);text-shadow:0 0 28px rgba(139,92,246,.8)}
.af-who-intro .lead{max-width:46ch}

.af-who-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.af-who-chips span{
  font-family:var(--body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem .9rem;
}

.af-who-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.af-who-card{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.6rem 1.5rem 1.5rem;
  transition:border-color .2s,transform .2s;
}
.af-who-card:hover{transform:translateY(-3px)}
.af-who-n{
  font-family:var(--display);
  font-size:3.6rem;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--aura-soft);
  letter-spacing:.02em;
}
.af-who-card h3{font-size:1.5rem;margin:0}
.af-who-card p{color:var(--muted);font-size:.92rem;flex:1}

.af-who-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.af-who-tags span{
  font-family:var(--body);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.32rem .7rem;
}

.af-who-card.c1:hover{border-color:var(--aura-soft)}
.af-who-card.c2 .af-who-n{-webkit-text-stroke-color:var(--victoria)}
.af-who-card.c2:hover{border-color:var(--victoria)}
.af-who-card.c3 .af-who-n{-webkit-text-stroke-color:var(--debt)}
.af-who-card.c3:hover{border-color:var(--debt)}

@media(max-width:900px){
  .af-who-cards{grid-template-columns:1fr}
  .af-who-top{grid-template-columns:1fr;align-items:start}
  .af-who-card{padding:1.4rem 1.3rem}
  .af-who-n{font-size:3rem}
}

/* ==========================================================================
   Oferta de preventa
   Barra superior + precio tachado. Todo se apaga solo desde el admin: sin
   "Comparar con el precio" en el producto no se pinta nada de esto.
   ========================================================================== */
.af-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* precio anterior tachado y chip de descuento, comunes a hero, ficha y barras */
.af-was{
  font-family:var(--body);
  font-weight:700;
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-color:var(--debt);
  text-decoration-thickness:2px;
  text-underline-offset:0;
}
.af-off{
  display:inline-block;
  font-family:var(--display);
  font-size:.8em;
  letter-spacing:.06em;
  background:var(--debt);
  color:#fff;
  padding:.1em .4em;
  border-radius:6px;
  box-shadow:0 0 18px rgba(255,77,109,.45);
  vertical-align:middle;
}

/* barra de oferta, encima de la cabecera */
.af-offerbar{
  display:block;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(139,92,246,.4),rgba(255,154,60,.24) 55%,rgba(255,209,102,.3)),
    var(--panel);
  border-bottom:1px solid rgba(201,184,255,.28);
}
.af-offerbar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translateX(-100%);
  animation:af-sheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes af-sheen{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.af-offerbar .wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.4rem .85rem;
  min-height:40px;
  padding:.45rem 0;
  text-align:center;
}
.af-offerbar-tag{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--display);
  font-size:.92rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--victoria);
  color:#1a1200;
  padding:.2rem .6rem;
  border-radius:6px;
  box-shadow:0 0 20px rgba(255,209,102,.45);
}
.af-offerbar-tag i{width:6px;height:6px;border-radius:50%;background:#1a1200;animation:af-offer-pulse 1.6s ease-in-out infinite}
@keyframes af-offer-pulse{50%{opacity:.2}}
.af-offerbar-txt{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
}
.af-offerbar-price{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:.03em;
  color:#fff;
}
.af-offerbar-price .af-was{font-size:.75rem;color:rgba(242,242,244,.65)}
.af-offerbar .af-off{font-size:.8rem}
.af-offerbar:hover .af-offerbar-tag{box-shadow:0 0 28px rgba(255,209,102,.75)}

/* hero */
.hero .bigprice .af-was{font-size:.32em;margin-left:.35rem;vertical-align:middle}
.hero .bigprice .af-off{font-size:.3em;margin-left:.2rem}

/* ficha de producto */
.pprice .af-was{font-size:.5em;margin-left:.4rem;vertical-align:middle}
.pprice .af-off{font-size:.45em;margin-left:.2rem}
.af-offer-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.7rem;
  margin-right:.4rem;
  font-family:var(--body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.4rem .8rem;
  border-radius:999px;
  background:rgba(255,77,109,.12);
  color:#FF8DA1;
  border:1px solid rgba(255,77,109,.4);
}
.af-offer-pill i{width:6px;height:6px;border-radius:50%;background:var(--debt);animation:af-offer-pulse 1.6s ease-in-out infinite}

/* barra fija de móvil */
.sticky .name small b{color:var(--victoria);font-weight:700}
.sticky .name small .af-was{color:var(--muted);text-decoration-thickness:1.5px}

@media(max-width:760px){
  .af-offerbar .wrap{gap:.35rem .55rem;min-height:36px;padding:.4rem 0}
  .af-offerbar-tag{font-size:.8rem;padding:.16rem .45rem;letter-spacing:.08em}
  .af-offerbar-txt{font-size:.6rem;letter-spacing:.1em}
  .af-offerbar-price{font-size:.95rem;gap:.35rem}
  .af-offerbar-price .af-was{font-size:.68rem}
  .af-offerbar .af-off{font-size:.72rem}
}
@media(max-width:420px){
  .af-offerbar-txt{order:3;flex-basis:100%}
}

/* ==========================================================================
   "Sin IA"
   Cuarto dato de la franja del hero y su punto en la lista de garantías.
   ========================================================================== */
.af-spec-noai b{color:var(--victoria);text-shadow:0 0 24px rgba(255,209,102,.45)}
.af-spec-noai span{color:var(--victoria);opacity:.85}
.af-trust-noai{color:var(--text)}
.af-trust-noai::before{color:var(--victoria)}

/* En móvil la franja pasa a 2×2: a cuatro columnas el "0%" se queda enano. */
@media(max-width:640px){
  .af-specs .wrap{grid-template-columns:repeat(2,1fr);row-gap:1.1rem}
  .af-spec + .af-spec{border-left:0}
  .af-spec:nth-child(2n){border-left:1px solid var(--line)}
  .af-spec:nth-child(n+3){border-top:1px solid var(--line);padding-top:1.1rem}
}

/* ==========================================================================
   Aval del estudio: los juegos anteriores, antes de la FAQ.
   La foto ya viene sobre fondo oscuro, así que se funde con la página y solo
   necesita el halo aura de siempre por detrás.
   ========================================================================== */
.af-makers{
  border-block:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%,rgba(139,92,246,.16),transparent 70%),
    var(--bg);
}
.af-makers-txt{text-align:center;max-width:44ch;margin-inline:auto}
.af-makers-txt h2{margin:.5rem 0 .8rem}
.af-makers-txt h2 .v{color:var(--aura-soft);text-shadow:0 0 28px rgba(139,92,246,.85)}
.af-makers-txt .lead{margin-inline:auto}

.af-makers-shot{position:relative;margin:2.4rem auto 0;max-width:980px}
.af-makers-shot img{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(139,92,246,.18);
}

/* El sello, en la esquina de la foto y girado como el badge del hero.
   A la derecha a propósito: a la izquierda taparía los premios impresos en la
   caja de Rey Mono, que son justo lo que respalda el texto. */
.af-makers-seal{
  position:absolute;
  right:-.6rem;
  bottom:-1.2rem;
  max-width:17rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.75rem 1rem;
  border-radius:12px;
  background:var(--victoria);
  color:#1a1200;
  transform:rotate(4deg);
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 34px rgba(255,209,102,.45);
}
.af-makers-seal b{
  font-family:var(--display);
  font-weight:400;
  font-size:1.15rem;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-wrap:balance;
}
.af-makers-seal span{
  font-family:var(--body);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.06em;
  line-height:1.25;
  /* Sin esto parte "El Corte / Inglés". */
  text-wrap:balance;
}

@media(max-width:760px){
  /* A este ancho el sello encima taparía una caja entera: baja debajo. */
  .af-makers-shot{margin-top:1.8rem}
  .af-makers-seal{
    position:static;
    max-width:none;
    margin-top:1rem;
    transform:none;
    align-items:center;
    text-align:center;
  }
  .af-makers-seal b{font-size:1.05rem}
}

/* --------------------------------------------------------------------------
   LOS 10 MOVIMIENTOS — abanico a ancho completo
   Las cartas son los archivos de imprenta (assets/af-move-01..10.webp), así
   que aquí no se dibuja ninguna carta: solo se colocan, se giran y se levanta
   la que tiene el ratón encima. Las demás se quedan quietas.
   -------------------------------------------------------------------------- */
.af-moves{
  --move-soft:#F79FCB;
  position:relative;
  padding:4.5rem 0 3rem;
  /* Las cartas de los extremos giran fuera de la caja: sin esto sale scroll
     horizontal en toda la página. */
  overflow:hidden;
}
.af-moves::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:78%;
  background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(236,30,140,.18),transparent 70%);
  pointer-events:none;
}
.af-moves-head{position:relative;display:grid;justify-items:center;text-align:center}
.af-moves-head .eyebrow{color:var(--move-soft)}
.af-moves-head h2{max-width:22ch;text-wrap:balance;text-shadow:0 0 26px rgba(236,30,140,.45)}
.af-moves-head .lead{max-width:62ch}

.af-fan{
  --cw:clamp(84px,10.2vw,178px);
  position:relative;
  margin-top:2.4rem;
  /* Arriba, hueco para la carta ampliada. Abajo hay que contar además los
     54px con los que caen las cartas de los extremos, o el pie de ayuda se
     les mete encima. */
  padding:calc(var(--cw) * .8) 0 calc(var(--cw) * .12 + 58px);
}
.af-fan-track{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:0;
  /* Aire a los lados: la carta del extremo también crece al pasar el ratón. */
  padding:0 2.5vw;
  list-style:none;
}
.af-fan-item{
  /* --m es 0 en reposo y 1 en la carta señalada. */
  --m:0;
  --rot:0deg;
  --lift:0px;
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:var(--cw);
  /* El solape es lo que convierte la fila en abanico. */
  margin-inline:calc(var(--cw) * -.1);
  transform-origin:50% 100%;
  transform:
    translateY(calc(var(--lift) - var(--m) * 40px))
    rotate(calc(var(--rot) * (1 - var(--m) * .85)))
    scale(calc(1 + var(--m) * .45));
  transition:transform .22s cubic-bezier(.2,.8,.2,1.12);
  will-change:transform;
}
.af-fan-item:hover{--m:1;z-index:20}

.af-move{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:560 / 849;
  /* La carta ya trae su borde blanco y sus esquinas: aquí solo la sombra que
     la despega del fondo. */
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.62));
}

.af-fan-hint{
  position:relative;
  margin-top:1.4rem;
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
@media(hover:hover){.af-fan-hint-touch{display:none}}
@media(hover:none){.af-fan-hint-desk{display:none}}

/* En móvil el abanico no cabe: pasa a tira que se arrastra, carta a carta. */
@media(max-width:760px){
  .af-moves{padding:3.2rem 0 2.4rem}
  .af-fan{
    --cw:min(46vw,190px);
    margin-top:1.8rem;
    padding:.6rem 0 1.2rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .af-fan-track{
    justify-content:flex-start;
    gap:.7rem;
    padding-inline:1.25rem;
  }
  .af-fan-item{
    margin-inline:0;
    scroll-snap-align:center;
    /* La lupa es de ratón: en táctil las cartas van rectas. */
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .af-fan-item{
    transition:none;
    transform:translateY(var(--lift)) rotate(var(--rot)) scale(calc(1 + var(--m) * .12));
  }
}