/* ------------------------------------------------------------------
   Carcasa de la aplicacion web y pantalla de inicio de la app.
   Prefijo .ap-
   ------------------------------------------------------------------ */

/* ---------- barras de la app: ocultas en el navegador normal ---------- */
.ap-topbar,.ap-barra{display:none}

body.en-app .site-head,
body.en-app .topstack,
body.en-app .subnav,
body.en-app .ifoot{display:none!important}

body.en-app{padding-top:calc(54px + env(safe-area-inset-top,0px));padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}

body.en-app .ap-topbar{
  display:flex;align-items:center;gap:12px;
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 14px 0;
  background:var(--ink);color:#fff;
}
.ap-atras{background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:8px 10px;cursor:pointer;border-radius:6px}
.ap-atras:hover{background:rgba(255,255,255,.12)}
.ap-titulo{font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ap-aux{color:#FFE296;text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 6px}

body.en-app .ap-barra{
  display:grid;grid-template-columns:repeat(5,1fr);
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--white);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.ap-barra a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
  text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:600}
.ap-barra a .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-barra a[aria-current="page"]{color:var(--green)}

/* ==================================================================
   HEROE DE LA APP
   Azul institucional, guilloche dorado y el telefono con la app viva.
   ================================================================== */
/* ==================================================================
   HEROE DE LA APP - composicion horizontal
   Franja ancha y baja: el texto manda, el telefono asoma desde abajo
   y la instalacion va en una banda al pie.
   ================================================================== */
.ap-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 320px at 82% 24%, rgba(169,133,58,.30), transparent 62%),
    radial-gradient(620px 360px at 4% 96%, rgba(30,122,72,.24), transparent 62%),
    linear-gradient(135deg,#0A1730 0%,#122A4F 52%,#0C1C38 100%);
  color:#fff;padding:44px 0 0;
}
.ap-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%);
}
.ap-hero > .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:44px;align-items:end}
.ap-copy{padding-bottom:40px}

.ap-sobre{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:700;
  color:#FFE296;letter-spacing:.03em;margin-bottom:14px;text-transform:uppercase}
.ap-sobre .tri{width:42px;height:4px}
.ap-hero h1{color:#fff;font-size:clamp(31px,3.7vw,50px);line-height:1.04;max-width:17ch}
.ap-hero h1 em{font-style:normal;color:#FFE296}
.ap-hero .lead{margin-top:14px;font-size:17.5px;line-height:1.5;color:#C9D2D6;max-width:54ch}
.ap-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.ap-hero .btn-brass{background:var(--brass);color:#fff}
.ap-hero .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}

.ap-cifras{display:flex;gap:34px;flex-wrap:wrap;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16)}
.ap-cifras div{display:flex;align-items:baseline;gap:9px}
.ap-cifras div b{font-family:var(--serif);font-size:27px;line-height:1;color:#FFE296}
.ap-cifras div span{font-size:12.5px;color:#A9B7C2;line-height:1.25}

/* el telefono asoma desde el borde inferior */
.ap-escena{position:relative;display:flex;justify-content:center;align-items:flex-end;
  height:316px;overflow:hidden}
.ap-escena .halo{position:absolute;bottom:-90px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(169,133,58,.34),transparent 66%);filter:blur(6px)}
.ap-escena .aro{position:absolute;border:1px solid rgba(255,226,150,.26);border-radius:50%;bottom:-120px}
.ap-escena .aro.a1{width:300px;height:300px}
.ap-escena .aro.a2{width:400px;height:400px;border-style:dashed;opacity:.45}
.ap-escena .sello{position:absolute;right:2%;top:6%;width:74px;height:74px;opacity:.9;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}

.ap-tel{
  position:relative;width:238px;border-radius:30px;padding:9px;margin-bottom:-52px;
  background:linear-gradient(160deg,#2A3F63,#0A1730);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.14);
}
.ap-tel .pantalla{background:var(--paper);border-radius:22px;overflow:hidden;color:var(--ink)}
.ap-tel .barra{background:var(--ink);color:#fff;padding:11px 13px 10px}
.ap-tel .barra small{display:block;font-size:9px;color:#A9B7C2}
.ap-tel .barra b{display:block;font-size:11.5px;line-height:1.25;margin-top:2px}
.ap-tel .rej{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}
.ap-tel .cel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 8px 10px;
  display:flex;flex-direction:column;gap:5px;opacity:0}
.ap-tel .cel .fi{width:25px;height:25px;border-radius:7px;display:grid;place-items:center}
.ap-tel .cel .fi svg{width:15px;height:15px}
.ap-tel .cel .fi svg .oro{fill:#FFE296}
.ap-tel .cel b{font-size:9.6px;line-height:1.2}
.ap-tel .cel small{font-size:8px;color:var(--muted);line-height:1.25}
.ap-tel .pie{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:#fff}
.ap-tel .pie span{padding:8px 0 9px;text-align:center;font-size:7.8px;color:var(--muted);font-weight:600}
.ap-tel .pie span:first-child{color:var(--green)}

.js .ap-tel .cel{animation:ap-sube .5s cubic-bezier(.2,.7,.3,1) forwards}
.js .ap-tel .cel:nth-child(1){animation-delay:.10s}
.js .ap-tel .cel:nth-child(2){animation-delay:.18s}
.js .ap-tel .cel:nth-child(3){animation-delay:.26s}
.js .ap-tel .cel:nth-child(4){animation-delay:.34s}
.js .ap-tel .cel:nth-child(5){animation-delay:.42s}
.js .ap-tel .cel:nth-child(6){animation-delay:.50s}
@keyframes ap-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.js .ap-tel .cel{animation:none;opacity:1}}

/* banda de instalacion, al pie del heroe */
.ap-banda{position:relative;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(4,12,26,.42);border-bottom:3px solid var(--brass)}
.ap-banda .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:17px;padding-bottom:17px}
.ap-banda .tit{font-family:var(--serif);font-size:18px;color:#FFE296;line-height:1.2;flex:none;max-width:17ch}
.ap-banda ol{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.ap-banda li{display:flex;align-items:center;gap:9px;font-size:13.8px;color:#C9D2D6;line-height:1.3}
.ap-banda li b{color:#fff;font-weight:700}
.ap-banda li .n{flex:none;width:23px;height:23px;border-radius:50%;background:rgba(255,226,150,.16);
  color:#FFE296;display:grid;place-items:center;font-size:12px;font-weight:700}
.ap-banda .btn{margin-left:auto;height:46px}
.ap-banda .pista{width:100%;margin:0;font-size:13.8px;color:#FFE296}

@media (max-width:1040px){
  .ap-hero{padding:34px 0 0}
  .ap-hero > .wrap{grid-template-columns:1fr;gap:0}
  .ap-copy{padding-bottom:26px}
  .ap-escena{height:250px}
  .ap-escena .sello{display:none}
  .ap-banda .btn{margin-left:0}
}
body.en-app .ap-hero{padding:22px 0 0}
body.en-app .ap-escena,body.en-app .ap-cifras,body.en-app .ap-banda{display:none}
body.en-app .ap-hero h1{font-size:27px}
body.en-app .ap-copy{padding-bottom:22px}

/* ==================================================================
   MOSAICO
   ================================================================== */
.ap-grupo{margin-top:60px}
.ap-grupo:first-of-type{margin-top:0}
.ap-grupo > h2{font-size:31px;margin-bottom:8px}
.ap-grupo > .lead{margin-bottom:26px;font-size:17px}

/* ---- las tres principales: color pleno ---- */
.ap-dest{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.ap-dest a{position:relative;overflow:hidden;border-radius:14px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:11px;text-decoration:none;color:#fff;box-shadow:0 18px 32px -20px rgba(12,28,56,.75);transition:transform .16s,box-shadow .16s}
.ap-dest a::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)}
.ap-dest a:hover,.ap-dest a:focus-visible{transform:translateY(-3px);box-shadow:0 26px 42px -22px rgba(12,28,56,.85)}
.ap-dest a[data-c="verde"]{background:linear-gradient(145deg,#2B9460 0%,#13613A 100%)}
.ap-dest a[data-c="petrol"]{background:linear-gradient(145deg,#27508A 0%,#102847 100%)}
.ap-dest a[data-c="laton"]{background:linear-gradient(145deg,#C09A44 0%,#86661C 100%)}
.ap-dest .fi{position:relative;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.28)}
.ap-dest .fi svg{width:29px;height:29px;stroke:#fff;stroke-width:1.8}
.ap-dest .fi svg .oro{fill:#FFE296}
.ap-dest b{position:relative;font-family:var(--serif);font-size:23px;line-height:1.12}
.ap-dest span.tx{position:relative;font-size:14.8px;line-height:1.5;color:rgba(255,255,255,.88);flex:1}
.ap-dest .et{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#fff;border-top:1px solid rgba(255,255,255,.28);padding-top:12px;margin-top:4px}

/* ---- rejilla ---- */
.ap-mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1040px){.ap-mosaico,.ap-dest{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ap-mosaico,.ap-dest{grid-template-columns:1fr}}

.ap-sub{display:flex;align-items:center;gap:13px;margin:34px 0 18px;font-size:14px;font-weight:700;color:var(--muted)}
.ap-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.ap-sub i{width:8px;height:8px;border-radius:50%;background:var(--brass);display:inline-block;flex:none}

.ap-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:22px 22px 19px;text-decoration:none;color:var(--ink);box-shadow:0 10px 20px -18px rgba(12,28,56,.55);transition:transform .16s,box-shadow .16s,border-color .16s}
.ap-tile > *{position:relative}
.ap-tile .fi{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.ap-tile .fi svg{width:27px;height:27px}
.ap-tile b{font-family:var(--serif);font-size:20.5px;line-height:1.15}
.ap-tile > span:not(.fi):not(.et){font-size:14.5px;color:var(--muted);line-height:1.5;flex:1}
.ap-tile .et{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;font-weight:700;margin-top:2px}

.ap-tile.lista::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;opacity:.55;z-index:0}
.ap-tile.lista[data-c="verde"]::before{background:radial-gradient(circle,rgba(30,122,72,.22),transparent 68%)}
.ap-tile.lista[data-c="petrol"]::before{background:radial-gradient(circle,rgba(29,59,102,.2),transparent 68%)}
.ap-tile.lista[data-c="laton"]::before{background:radial-gradient(circle,rgba(169,133,58,.28),transparent 68%)}
.ap-tile.lista[data-c="rojo"]::before{background:radial-gradient(circle,rgba(191,43,48,.18),transparent 68%)}

.ap-tile.lista[data-c="verde"] .fi{background:linear-gradient(145deg,#2B9460,#156640);box-shadow:0 10px 18px -12px rgba(19,97,58,.9)}
.ap-tile.lista[data-c="petrol"] .fi{background:linear-gradient(145deg,#2C5793,#12294A);box-shadow:0 10px 18px -12px rgba(18,41,74,.9)}
.ap-tile.lista[data-c="laton"] .fi{background:linear-gradient(145deg,#C5A04A,#8A6B22);box-shadow:0 10px 18px -12px rgba(138,107,34,.9)}
.ap-tile.lista[data-c="rojo"] .fi{background:linear-gradient(145deg,#D4484D,#9C2024);box-shadow:0 10px 18px -12px rgba(156,32,36,.9)}
.ap-tile.lista .fi svg{stroke:#fff;stroke-width:1.8}
.ap-tile.lista .fi svg .oro{fill:#FFE296}
.ap-tile.lista[data-c="verde"] .et{color:var(--green)}
.ap-tile.lista[data-c="petrol"] .et{color:var(--petrol-2)}
.ap-tile.lista[data-c="laton"] .et{color:#8A6B22}
.ap-tile.lista[data-c="rojo"] .et{color:var(--red)}
.ap-tile.lista:hover,.ap-tile.lista:focus-visible{transform:translateY(-3px);border-color:#C3D0D4;box-shadow:0 22px 36px -22px rgba(12,28,56,.7)}

.ap-tile.pronto{background:#F4F7F6;border-style:dashed;box-shadow:none}
.ap-tile.pronto .fi{background:linear-gradient(145deg,#E9EEED,#DBE3E2);box-shadow:none}
.ap-tile.pronto .fi svg{stroke:#7A8B94;stroke-width:1.7}
.ap-tile.pronto .fi svg .oro{fill:#AFBCC3}
.ap-tile.pronto b{color:#5D6E78}
.ap-tile.pronto .et{color:var(--brass)}
.ap-tile.pronto .et i{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block}

.ap-ic{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-ic .oro{stroke:none;fill:var(--brass)}

.ap-nota{margin-top:48px;border-top:1px solid var(--line);padding-top:22px;font-size:14.5px;color:var(--muted);max-width:72ch}
.ap-nota b{color:var(--ink)}
@media print{.ap-topbar,.ap-barra{display:none!important}}

/* ==================================================================
   Panel de "La app" en el menu fijo, y su version movil
   ================================================================== */
.mnav .panel.app-panel{width:760px;padding:0;overflow:hidden;border-radius:16px;
  box-shadow:0 26px 60px -18px rgba(12,28,56,.34)}
.app-panel .apn-cab{padding:16px 20px 13px;background:linear-gradient(135deg,#0C1C38,#1A3A68);color:#fff}
.app-panel .apn-sobre{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#FFE296;margin-bottom:5px}
.app-panel .apn-cab b{font-family:var(--serif);font-size:17.5px;font-weight:600;line-height:1.25}

.app-panel .apn-cols{display:grid;grid-template-columns:1fr 262px;gap:0}
.app-panel .apn-g{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px}
.app-panel .apn-g a{display:flex;align-items:flex-start;gap:11px;padding:10px;border-radius:11px;
  text-decoration:none;color:var(--ink);transition:background .14s,transform .14s}
.app-panel .apn-g a:hover,.app-panel .apn-g a:focus-visible{background:var(--paper);transform:translateY(-1px)}
.app-panel .apn-g a b{display:block;font-size:14.6px;font-weight:700;line-height:1.25}
.app-panel .apn-g a small{display:block;font-size:12.3px;color:var(--muted);line-height:1.35;margin-top:2px}
.app-panel .apn-g .fi,.md-app .apn-g .fi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.app-panel .apn-g .fi svg,.md-app .apn-g .fi svg{width:21px;height:21px;stroke:#fff;stroke-width:1.85}
.app-panel .apn-g .fi svg .oro,.md-app .apn-g .fi svg .oro{fill:#FFE296}
.apn-g a[data-c="verde"] .fi{background:linear-gradient(145deg,#2B9460,#156640);box-shadow:0 8px 14px -10px rgba(19,97,58,.95)}
.apn-g a[data-c="petrol"] .fi{background:linear-gradient(145deg,#2C5793,#12294A);box-shadow:0 8px 14px -10px rgba(18,41,74,.95)}
.apn-g a[data-c="laton"] .fi{background:linear-gradient(145deg,#C5A04A,#8A6B22);box-shadow:0 8px 14px -10px rgba(138,107,34,.95)}

.app-panel .apn-lado{padding:10px 10px 10px 0;display:flex;flex-direction:column;gap:9px}
.apn-juego{position:relative;overflow:hidden;display:block;padding:16px 16px 14px;border-radius:13px;
  text-decoration:none;color:#fff;background:linear-gradient(140deg,#C9A24B 0%,#8A6B22 100%);
  box-shadow:0 14px 24px -16px rgba(138,107,34,.95);flex:1;transition:transform .15s}
.apn-juego:hover{transform:translateY(-2px)}
.apn-juego::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%)}
.apn-juego .cartas{display:flex;gap:4px;margin-bottom:10px}
.apn-juego .cartas i{width:17px;height:24px;border-radius:3px;background:rgba(255,255,255,.9);display:block;
  box-shadow:0 3px 6px rgba(0,0,0,.25)}
.apn-juego .cartas i:nth-child(1){transform:rotate(-9deg)}
.apn-juego .cartas i:nth-child(2){transform:translateY(-2px)}
.apn-juego .cartas i:nth-child(3){transform:rotate(9deg);background:#0C1C38}
.apn-juego b{position:relative;display:block;font-family:var(--serif);font-size:17px;line-height:1.2}
.apn-juego small{position:relative;display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.9);margin-top:5px}
.apn-juego .va{position:relative;display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700}

.apn-inst{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:13px;text-decoration:none;
  background:linear-gradient(140deg,#13294B,#0C1C38);color:#fff;transition:transform .15s}
.apn-inst:hover{transform:translateY(-2px)}
.apn-inst img{border-radius:9px;flex:none}
.apn-inst b{display:block;font-size:13.6px;font-weight:700;line-height:1.2}
.apn-inst small{display:block;font-size:11.8px;color:#A9B7C2;line-height:1.35;margin-top:2px}

.app-panel .apn-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;background:var(--paper);border-top:1px solid var(--line)}
.app-panel .apn-pie a{padding:0;font-size:13.8px;font-weight:700;color:var(--green);text-decoration:none}
.app-panel .apn-pie a:hover{background:none;text-decoration:underline}
.app-panel .apn-pie span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.app-panel .apn-pie i{width:8px;height:8px;border-radius:50%;display:inline-block}
.app-panel .apn-pie i.on{background:var(--green)}
.app-panel .apn-pie i.off{background:var(--brass);margin-left:8px}

/* version movil del mismo panel */
.md-app .apn-g{display:grid;grid-template-columns:1fr;gap:2px;margin-bottom:10px}
.mobile .md-app .apn-g a{display:flex;align-items:flex-start;gap:12px;padding:10px;border-top:0;border-radius:11px}
.mobile .md-app .apn-g a b{font-size:16px}
.mobile .md-app .apn-g a small{font-size:13px;color:var(--muted)}
.mobile .md-app .apn-juego,.mobile .md-app .apn-inst{margin-bottom:10px;border-top:0}
.mobile .md-app .apn-juego b,.mobile .md-app .apn-inst b{color:#fff}

@media (max-width:1180px){.mnav .panel.app-panel{width:auto}}
/* ==================================================================
   Banda del juego
   ================================================================== */
.ap-juegob{position:relative;overflow:hidden;color:#fff;padding:52px 0;
  background:radial-gradient(620px 320px at 88% 50%, rgba(201,162,75,.38), transparent 64%),
    linear-gradient(135deg,#0C1C38 0%,#17345E 100%)}
.ap-juegob::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);background-size:24px 24px}
.ap-juegob .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.jb-sobre{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#FFE296;margin-bottom:12px}
.ap-juegob h2{color:#fff;font-size:clamp(28px,3.3vw,42px);line-height:1.08;max-width:15ch}
.ap-juegob p{margin-top:14px;font-size:16.8px;line-height:1.55;color:#C9D2D6;max-width:50ch}
.jb-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.ap-juegob .btn-brass{background:var(--brass);color:#fff}
.ap-juegob .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}

.jb-cartas{position:relative;height:250px}
.jb-cartas .jc{position:absolute;width:160px;height:212px;border-radius:12px;padding:14px 13px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 22px 40px -18px rgba(0,0,0,.8);background:#FFFDF8;color:#0C1C38;
  border:1px solid rgba(12,28,56,.12)}
.jb-cartas .jc .ca{font-family:var(--serif);font-size:15px;line-height:1.22;font-weight:600}
.jb-cartas .jc .cb{font-size:11.5px;font-weight:700;color:#8A6B22;border-top:1px solid #E6DFCB;padding-top:8px}
.jb-cartas .jc-1{left:4%;top:18px;transform:rotate(-8deg)}
.jb-cartas .jc-2{left:32%;top:4px;transform:rotate(1deg);background:#0C1C38;color:#fff;border-color:rgba(255,255,255,.18)}
.jb-cartas .jc-2 .cb{color:#FFE296;border-top-color:rgba(255,255,255,.22)}
.jb-cartas .jc-3{left:60%;top:22px;transform:rotate(9deg)}

@media (max-width:1040px){
  .ap-juegob{padding:38px 0}
  .ap-juegob .wrap{grid-template-columns:1fr;gap:26px}
  .jb-cartas{height:230px}
  .jb-cartas .jc{width:140px;height:186px}
  .jb-cartas .jc-3{left:58%}
}
body.en-app .ap-juegob{padding:30px 0}
body.en-app .jb-cartas{display:none}
/* ===== El panel de La app entra a la familia del menu (oct 2026) ===== */
.mnav .panel.app-panel{border:1px solid var(--line);border-top:0;border-radius:18px;padding:14px;width:740px;box-shadow:0 26px 60px rgba(12,28,56,.18),0 2px 8px rgba(12,28,56,.06)}
.mnav .panel.app-panel:before{content:"";display:block;height:4px;margin:-14px -14px 12px;background:linear-gradient(90deg,var(--acc),var(--acc-2))}
/* La cabecera deja de ser un bloque azul marino y pasa al bloque suave de la familia */
.app-panel .apn-cab{padding:12px 14px;margin:0 0 10px;border-radius:12px;background:var(--acc-soft);color:#16304F}
.app-panel .apn-sobre{color:var(--acc);letter-spacing:.14em;font-size:10.5px;margin-bottom:4px}
.app-panel .apn-cab b{font-family:var(--sans);font-size:15px;font-weight:700;color:#102A47}
.app-panel .apn-cols{gap:12px;grid-template-columns:1fr 250px}
.app-panel .apn-g{padding:0;gap:2px}
.app-panel .apn-g a{position:relative;gap:14px;padding:11px 26px 11px 11px;border-radius:12px;transition:background-color .18s ease}
.app-panel .apn-g a:hover,.app-panel .apn-g a:focus-visible{background:var(--acc-soft);transform:none}
.app-panel .apn-g a b{font-size:15px;color:#102A47}
.app-panel .apn-g a:hover b{color:var(--acc)}
.app-panel .apn-g a small{font-size:13px;color:#4A5C68}
.app-panel .apn-g .fi,.md-app .apn-g .fi{width:42px;height:42px;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease}
.app-panel .apn-g .fi svg{width:22px;height:22px}
.app-panel .apn-g a:hover .fi{transform:scale(1.08) rotate(-2deg)}
.app-panel .apn-g a:after{content:"\2192 ";position:absolute;right:12px;top:15px;font-size:16px;color:var(--acc);opacity:0;transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease}
.app-panel .apn-g a:hover:after,.app-panel .apn-g a:focus-visible:after{opacity:1;transform:none}
.mnav .mi.open .apn-g a{animation:rowIn .3s cubic-bezier(.2,.8,.3,1) both}
.mnav .mi.open .apn-g a:nth-child(1){animation-delay:0.018s}.mnav .mi.open .apn-g a:nth-child(2){animation-delay:0.036s}.mnav .mi.open .apn-g a:nth-child(3){animation-delay:0.054s}.mnav .mi.open .apn-g a:nth-child(4){animation-delay:0.072s}.mnav .mi.open .apn-g a:nth-child(5){animation-delay:0.090s}.mnav .mi.open .apn-g a:nth-child(6){animation-delay:0.108s}
/* Columna lateral y pie, con el mismo redondeo y respiracion */
.app-panel .apn-lado{padding:0;gap:10px}
.apn-juego{border-radius:14px}
.apn-inst{border-radius:14px}
.app-panel .apn-pie{margin:12px -14px -14px;padding:12px 18px;background:var(--acc-soft);border-top:1px solid color-mix(in srgb,var(--acc) 16%,transparent)}
.app-panel .apn-pie a{color:var(--acc)}
@media (max-width:1300px){.mnav .panel.app-panel{width:680px}}
@media (prefers-reduced-motion:reduce){.mnav .mi.open .apn-g a{animation:none}.app-panel .apn-g a:hover .fi{transform:none}}
/* Movil */
.md-app .apn-g a{gap:14px;padding:13px 2px}
.md-app .apn-g .fi{width:40px;height:40px;border-radius:12px}
/* Banda superior del panel de La app */
.app-panel .apn-todo{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:14px 16px;border-radius:14px;text-decoration:none;color:#fff;background:linear-gradient(118deg,#06525B,var(--acc));box-shadow:0 12px 26px rgba(10,118,129,.28);transition:background .2s ease}
.app-panel .apn-todo:hover{background:linear-gradient(118deg,var(--acc),#06525B)}
.app-panel .apn-todo img{border-radius:11px;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.app-panel .apn-todo .tx{flex:1;min-width:0}
.app-panel .apn-todo b{display:block;font-size:17px;font-weight:800;line-height:1.2}
.app-panel .apn-todo small{display:block;font-size:12.8px;line-height:1.4;color:rgba(255,255,255,.86);margin-top:3px}
.app-panel .apn-todo .est{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;white-space:nowrap;color:rgba(255,255,255,.95);background:rgba(255,255,255,.14);border-radius:30px;padding:6px 12px}
.app-panel .apn-todo .est i{width:8px;height:8px;border-radius:50%;display:inline-block}
.app-panel .apn-todo .est i.on{background:#7BE3A8}
.app-panel .apn-todo .est i.off{background:rgba(255,255,255,.45);margin-left:4px}
.app-panel .apn-todo .fl{font-size:20px;opacity:.9;transition:transform .2s ease}
.app-panel .apn-todo:hover .fl{transform:translateX(4px)}
.app-panel .apn-inst .ic{width:40px;height:40px;background:rgba(255,255,255,.16);stroke:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (max-width:1300px){.app-panel .apn-todo .est{display:none}}
/* ===== Correccion de contraste del panel de La app (oct 27) =====
   Las reglas genericas .mnav .panel a pintaban de azul marino el texto
   de las piezas oscuras y lo volvian gris. Aqui se gana con especificidad. */
.mnav .panel.app-panel .apn-todo,.mnav .panel.app-panel .apn-todo:hover{color:#fff}
.mnav .panel.app-panel .apn-todo b{color:#fff;font-size:17px;font-weight:800}
.mnav .panel.app-panel .apn-todo small{color:#EAF9FB;font-size:13px}
.mnav .panel.app-panel .apn-todo .est{color:#fff;background:rgba(255,255,255,.18)}
.mnav .panel.app-panel .apn-todo .fl{color:#fff}
.mnav .panel.app-panel .apn-todo{background:linear-gradient(118deg,#064A52,#0A7681)}
.mnav .panel.app-panel .apn-todo:hover{background:linear-gradient(118deg,#0A7681,#053F47)}
/* Ludoteca: mas discreta, que no se coma el panel */
.mnav .panel.app-panel .apn-juego,.mnav .panel.app-panel .apn-juego:hover{color:#fff;background:linear-gradient(140deg,#7A5C18,#4A370D);flex:0 0 auto;padding:15px 16px 14px}
.mnav .panel.app-panel .apn-juego b{color:#fff;font-size:15.5px;line-height:1.2}
.mnav .panel.app-panel .apn-juego small{color:#FBF2DC;font-size:12.3px;margin-top:5px}
.mnav .panel.app-panel .apn-juego .va{color:#FFEFC8;font-size:12.3px;margin-top:9px}
.mnav .panel.app-panel .apn-juego .cartas{margin-bottom:8px}
.mnav .panel.app-panel .apn-juego .cartas i{width:14px;height:20px}
/* Mi cuenta: texto legible sobre el azul marino */
.mnav .panel.app-panel .apn-inst,.mnav .panel.app-panel .apn-inst:hover{color:#fff;background:linear-gradient(140deg,#1D3B66,#0C1C38)}
.mnav .panel.app-panel .apn-inst b{color:#fff;font-size:14.5px}
.mnav .panel.app-panel .apn-inst small{color:#C3D6E2;font-size:12.4px}
.mnav .panel.app-panel .apn-lado{gap:10px;justify-content:flex-start}
.mnav .panel.app-panel .apn-cols{grid-template-columns:1fr 228px}
@media (max-width:1300px){.mnav .panel.app-panel .apn-cols{grid-template-columns:1fr 210px}}