/* BRINCURIO · PORTADA MÓVIL V7 · RECONSTRUCCIÓN DE LA EXPERIENCIA
   Única capa responsable de móviles, cargada después de portada.css y brincurio-mundo.css.
   Se preservan carátulas, ID, navegación, favoritos y los datos de las partidas. */
@media (max-width: 760px) {
  :root { --gutter: 0px; }
  html { overflow-x: clip; scroll-behavior: smooth; background:#f8f7eb; }
  body { overflow-x:clip; background: linear-gradient(180deg,#e0f8ff 0%,#f9f5e9 280px,#fff8ee 68%,#fff1e9 100%); }
  .workspace { width:100%; min-height:100dvh; overflow:visible; }
  .content { width:100%;max-width:none;margin:0;padding:0 0 calc(76px + env(safe-area-inset-bottom,0px)); }

  /* La navegación superior DEJA de ser una segunda banda blanca.
     Acciones compactas sobre el cielo; logo dentro del mismo escenario. */
  .header, body.has-visible-hero .header {
    position:absolute;top:0;left:0;right:0;z-index:16;
    min-height:0;padding:env(safe-area-inset-top,0px) 0 0;
    background:transparent!important;border:0!important;box-shadow:none!important;
    overflow:visible;
  }
  .header-inner, body.has-visible-hero .header-inner,
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .header-inner {
    position:relative;display:block;width:100%;height:142px;min-height:0;max-width:none;
    margin:0;padding:0;background:transparent!important;border:0!important;
    border-radius:0!important;box-shadow:none!important;
  }
  .brand, body.has-visible-hero .brand,
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .brand {
    position:absolute;top:59px;left:50%;z-index:3;
    display:block;width:min(82vw,315px);max-width:none;min-height:0;height:auto;
    transform:translateX(-50%) rotate(-2deg);transform-origin:center;
    margin:0;padding:0;isolation:auto;
  }
  .brand::before, body.has-visible-hero .brand::before {display:none!important;}
  .brand-logo, body.has-visible-hero .brand-logo,
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .brand-logo {
    display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain;
    filter:drop-shadow(0 4px 1px rgba(22,79,132,.20));
  }
  .header-actions,body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .header-actions {
    position:absolute;top:7px;right:max(10px,env(safe-area-inset-right,0px));z-index:5;
    display:flex;align-items:center;gap:7px;margin:0;
  }
  .header-icon, .header-icon:hover {
    display:grid;place-items:center;flex:0 0 44px;
    width:44px;height:44px;min-width:44px;min-height:44px;
    border:2px solid #fff;border-radius:50%;
    background:rgba(255,255,255,.88);color:#18558b;
    box-shadow:0 3px 0 #9dcfdf,0 5px 10px #175e871f;
    padding:0;
  }
  .header-icon .ico {width:20px;height:20px;}
  .header-icon.avatar-button {background:#ffe9a6;border-color:#fff8d4;}
  .header-icon.avatar-button span {font-size:23px;}
  .theme-toggle {display:none!important;}
  .mobile-search-toggle {display:grid!important;}
  .search {display:none;margin:0;}
  body.mobile-search-open .header,
  body.mobile-search-open.has-visible-hero .header,
  body:not(.has-visible-hero) .header {
    position:relative;left:auto;right:auto;top:auto;
    min-height:66px;background:linear-gradient(#c4efff,#f2fbff)!important;
    box-shadow:0 2px 0 #b8e2f1!important;
  }
  body.mobile-search-open .header-inner,
  body:not(.has-visible-hero) .header-inner,
  body.mobile-search-open.has-visible-hero .header-inner {
    height:66px;min-height:66px;display:block!important;
  }
  body.mobile-search-open .brand,
  body:not(.has-visible-hero) .brand,
  body.mobile-search-open.has-visible-hero .brand {
    position:absolute;left:12px;top:13px;transform:none;display:block;
    width:clamp(128px,37vw,165px);z-index:2;
  }
  body.mobile-search-open .header-actions,
  body:not(.has-visible-hero) .header-actions,
  body.mobile-search-open.has-visible-hero .header-actions {top:11px;}
  body.mobile-search-ready:not(.mobile-search-open) .search {display:none;}
  body.mobile-search-open .header {min-height:120px;}
  body.mobile-search-open .header-inner,
  body.mobile-search-open.has-visible-hero .header-inner {height:120px;}
  body.mobile-search-open .brand{opacity:.9;}
  body.mobile-search-open .search,
  body.mobile-search-ready.mobile-search-open .search {
    position:absolute;display:flex;left:12px;right:12px;top:68px;z-index:5;
    width:calc(100% - 24px);min-height:44px;
    padding:0 14px;border:2px solid #9cd2eb;border-radius:17px;
    background:#fff;color:#28628d;box-shadow:0 3px 0 #b7dbec;
  }
  .search input {min-height:44px;height:44px;font-size:16px;}
  /* Sin JS mantenemos visible la búsqueda en la propia barra. */
  body:not(.mobile-search-ready) .header {position:relative!important;min-height:120px;}
  body:not(.mobile-search-ready) .header-inner {height:120px!important;}
  body:not(.mobile-search-ready) .brand {width:140px;left:12px;top:13px;transform:none;}
  body:not(.mobile-search-ready) .search {display:flex;position:absolute;top:69px;left:12px;right:12px;z-index:5;}
  /* Barra inferior: iconos protagonistas, integrada con la marca. */
  .navigation {
    position:fixed;inset:auto 0 0;z-index:28;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));width:100%;
    gap:2px;padding:6px max(5px,env(safe-area-inset-right,0px))
      max(7px,env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left,0px));
    border:0;border-top:2px solid #b8e5f5;
    background:linear-gradient(#fff 0%,#edfaff 100%);
    box-shadow:0 -5px 20px #1c638522;
  }
  .nav-item {display:flex;min-width:0;min-height:54px;gap:4px;align-items:center;flex-direction:column;
    justify-content:center;padding:6px 1px 4px;border:1px solid transparent;
    border-radius:15px;color:#47708b;background:transparent;
    font:700 clamp(10px,2.65vw,12px)/1.05 var(--br-font);
  }
  .nav-item .ico {width:22px;height:22px;stroke-width:2;}
  .nav-item.mobile-only {display:flex;}
  .nav-item.is-active {color:#15599e;background:#d7f0ff;border-color:#b8e0f6;
    box-shadow:inset 0 1px 0 #fff;}

  /* La portada ES cielo, sin bordes blancos ni cajas grises que la corten. */
  .hero,body.has-visible-hero .hero,
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero {
    position:relative;isolation:isolate;display:block;
    width:100%;height:clamp(225px,61vw,278px);min-height:0;
    margin:0;padding:0;border:0;border-radius:0;
    overflow:hidden;background:linear-gradient(#5ecaf4,#dcf8ff);
    box-shadow:none;
  }
  .hero-art,body.has-visible-hero .hero-art {
    position:absolute;inset:0;display:block;width:100%;height:100%;
    object-fit:cover;object-position:54% center;
  }
  .hero::before,body.has-visible-hero .hero::before {
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,#e7ffff0f 0%,transparent 70%,#e9f9df78 100%);
  }
  .hero::after,body.has-visible-hero .hero::after {
    content:"";display:block;position:absolute;inset:auto -4% -23px;
    width:108%;height:48px;z-index:3;
    border-radius:50% 50% 0 0;background:#fff9eb;opacity:1;
  }
  .hero-copy {position:absolute;inset:0;z-index:2;display:block;width:100%;max-width:none;padding:0;pointer-events:none;}
  .hero-copy h1,.hero h1 {position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;border:0!important;clip-path:inset(50%)!important;
    white-space:nowrap!important;box-shadow:none!important;}
  .hero-action,.hero .hero-action {display:none!important;}
  .hero-showcase,.hero .hero-showcase{display:none!important;}
  .welcome-badge {position:absolute;top:auto;left:13px;bottom:42px;z-index:5;display:inline-flex;
    max-width:56%;margin:0;padding:5px 10px;border:1px solid #fff;
    border-radius:20px;background:#ffffffe6;color:#1b5e86;font:700 12px/1.1 var(--br-font);
    box-shadow:0 3px 0 #b6d7e8;}

  /* Pequeño cartel superpuesto a la orilla: sin párrafos ni títulos repetidos. */
  /* Cuando el escenario se oculta (búsqueda, filtros, familias),
     el cartel vuelve al flujo normal sin montarse sobre la cabecera. */
  body:not(.has-visible-hero) .content-head {
    margin-top:18px;margin-bottom:13px;
  }
  .content-head {
    position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;
    width:calc(100% - 24px);max-width:none;min-height:43px;
    margin:-18px 12px 15px;padding:0;gap:9px;scroll-margin-top:5px;
  }
  .content-head h2 {
    display:inline-block;width:fit-content;max-width:100%;margin:0;padding:10px 18px 11px;
    border:3px solid #fff0b6;border-radius:14px 25px 15px 23px;
    background:linear-gradient(#ffe98b,#ffc84f);color:#28517d;
    box-shadow:0 4px 0 #d99b3d,0 8px 13px #a87f482a;
    transform:rotate(-2deg);text-shadow:0 1px 0 #fffcde;
    font:700 clamp(22px,5.8vw,28px)/1.05 var(--br-font);
  }
  .content-head h2::after{content:"✦";color:#ff8d2b;font-size:.67em;vertical-align:top;}
  .count{display:none!important;}
  /* Colores de categorías en un riel real, con marca visual de continuidad. */
  .filter-rail{position:relative;width:100%;max-width:none;margin:0 0 16px;padding:0;overflow:hidden;}
  .filter-rail[hidden],.filters[hidden]{display:none!important;}
  .filters {
    display:flex!important;align-items:center;flex-wrap:nowrap;width:100%;max-width:none;
    gap:9px;margin:0;padding:3px 17px 9px 13px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none;}
  .filter-rail::after {content:"";position:absolute;right:0;top:0;bottom:5px;width:28px;
    z-index:2;pointer-events:none;border-radius:0;
    background:linear-gradient(90deg,transparent,#fff8ee 95%);}
  .filter {flex:0 0 auto;display:flex;min-width:0;min-height:46px;
    padding:7px 12px;gap:6px;scroll-snap-align:start;
    background:var(--topic-wash);color:var(--topic);border:2px solid #fff;
    border-radius:25px;box-shadow:0 3px 0 var(--topic-edge);
    white-space:nowrap;font:700 13px/1.1 var(--br-font);
  }
  .filter.is-selected{border-color:#fff;background:#2182cd;color:#fff;box-shadow:0 3px 0 #17588c;}
  .filter-label,.filter-label.filter-action,.filter-label.filter-topic{
    display:inline-flex;flex-direction:row;align-items:center;gap:7px;white-space:nowrap;
  }
  .filter-icon{font-size:21px;}
  .filter-icon .ico{width:17px;height:17px;}

  /* Catálogo móvil: DOS juegos por fila desde el primer juego.
     Las imágenes originales siguen siendo protagonistas y no hay scroll lateral. */
  .game-grid,.game-grid[data-view="juegos"],.game-grid[data-view="temas"]{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 9px;
    margin:0;padding:0 10px;max-width:none;
  }
  .game-grid[hidden]{display:none!important;}
  .game-card{position:relative;display:flex;min-width:0;flex-direction:column;overflow:visible;
    padding:6px;border:3px solid #fff;border-radius:24px;
    background:linear-gradient(#fff 0%,#fff 68%,var(--ticket-wash,#eff7ff) 100%);
    box-shadow:0 6px 0 #c2dcea,0 14px 22px #287ba221;
    transform:none;
  }
  .game-card[hidden]{display:none!important;}
  .game-card:hover {transform:none;}
  .game-cover {position:relative;width:100%;aspect-ratio:8/5;height:auto;overflow:hidden;
    border:0;border-radius:18px;background:var(--ticket-wash,#edf7ff);}
  .game-cover img{display:block;width:100%;height:100%;object-fit:cover;transform:none!important;}
  .card-content{position:static;display:flex;flex-direction:column;flex:1;align-items:stretch;
    min-width:0;gap:6px;margin:-24px 0 0;padding:0 11px 11px;z-index:auto;}
  .card-content h3{position:relative;z-index:1;align-self:center;width:fit-content;max-width:100%;
    min-height:43px;display:grid;place-items:center;text-align:center;
    margin:0;padding:7px 17px;border:3px solid #fff;border-radius:28px;
    background:var(--ticket,#176db8);color:#fff;
    box-shadow:0 4px 0 var(--ticket-edge,#0a4c86),0 7px 12px #113e7a24;
    transform:rotate(-1.3deg);text-shadow:0 2px 0 var(--ticket-edge,#0a4c86);
    font:700 clamp(20px,5.3vw,25px)/1.06 var(--br-font);
    letter-spacing:-.012em;overflow-wrap:anywhere;
  }
  .card-description{display:block!important;max-width:100%;margin:8px auto 2px;
    color:#40516c;text-align:center;font:500 clamp(13px,3.45vw,15px)/1.36 Rubik,system-ui,sans-serif;
  }
  .game-guidance{display:flex!important;gap:6px 11px;align-items:center;justify-content:center;
    padding:0;color:#52627b;font:600 11px/1.15 Rubik,system-ui,sans-serif;
  }
  .game-guidance svg{width:14px;height:14px;}
  .game-age{color:#2e517e;}
  .subject{display:none!important;}
  .card-actions{display:flex;gap:11px;align-items:center;width:100%;margin-top:4px;padding-top:3px;}
  .card-play {display:flex;flex:1;align-items:center;justify-content:center;gap:7px;
    min-width:0;min-height:49px;padding:10px 16px;border:2px solid #fff;border-radius:17px;
    background:linear-gradient(180deg,#399cde,#1766b8);color:#fff;
    box-shadow:0 4px 0 #12518b;text-shadow:0 1px #15518b;
    font:700 17px/1.2 var(--br-font);
  }
  .card-play .ico{width:20px;height:20px;}
  .card-play::after{position:absolute;inset:0;z-index:1;border-radius:23px;}
  .fav-button{position:relative;z-index:2;flex:0 0 49px;width:49px;height:49px;
    min-height:49px;display:grid;place-items:center;border:2px solid #d7e8f5;border-radius:16px;
    background:#fff;color:#ae4273;box-shadow:0 3px 0 #bed5e6;}
  .fav-button .ico{width:22px;height:22px;}
  .game-card:focus-within{outline:3px solid #f4a520;outline-offset:3px;}
  .empty-state,.family-panel{margin:0 12px 20px;padding:16px;border-radius:20px;}
  .family-game-guide{grid-template-columns:minmax(0,1fr);gap:10px;}
  .family-game-guide li{padding:12px;}
  .site-footer{padding:24px 14px 15px;color:#667d94;font-size:12px;text-align:center;}
  .modal{max-width:calc(100vw - 22px);}

  body.dark{background:linear-gradient(#1c355c,#251e49);}
  body.dark .header{background:transparent!important;box-shadow:none!important;}
  body.dark:not(.has-visible-hero) .header,body.dark.mobile-search-open .header{
    background:linear-gradient(#1d4465,#22294e)!important;}
  body.dark .navigation{background:linear-gradient(#273857,#1b2947);border-top-color:#436181;}
  body.dark .nav-item{color:#d1e5fc;}
  body.dark .nav-item.is-active{color:#fff;background:#294d7a;border-color:#456f9a;}
  body.dark .content-head h2{color:#1d4372;}
  body.dark .filter-rail::after{background:linear-gradient(90deg,transparent,#242047 95%);}
  body.dark .game-card{background:linear-gradient(#2c3858,#242e50);border-color:#4d6d91;box-shadow:0 6px 0 #182644;}
  body.dark .card-content h3{color:#fff;}
  body.dark .card-description,body.dark .game-guidance,body.dark .game-age{color:#dfe9f8;}
  body.dark .fav-button{background:#344a68;border-color:#5e7998;color:#ffe3ef;}
  body.dark .site-footer{color:#d3e2f7;}
}
/* Tarjetas diseñadas para dos columnas en teléfonos: no son tarjetas de PC comprimidas.
   Se conserva la información, las carátulas, favoritos y el gesto de pulsar Jugar. */
@media (max-width:569px){
  .game-grid,.game-grid[data-view="juegos"],.game-grid[data-view="temas"]{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 9px;padding-inline:10px;
  }
  .game-card{min-width:0;padding:3px;border-width:2px;border-radius:18px;
    box-shadow:0 4px 0 #c2dcea,0 9px 15px #287ba21c;}
  .game-cover{border-radius:13px;}
  .card-content{min-width:0;gap:5px;margin-top:-12px;padding:0 4px 8px;}
  .card-content h3{max-width:100%;min-height:34px;padding:5px 7px;
    border-width:2px;border-radius:18px;
    font-size:calc(clamp(14px,3.9vw,18px) * var(--heading-scale));line-height:1.13;
    box-shadow:0 2px 0 var(--ticket-edge,#0a4c86);
    overflow-wrap:anywhere;}
  .card-description{display:-webkit-box!important;max-width:100%;margin:4px auto 0;
    overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    font-size:clamp(11px,2.9vw,12.5px);line-height:1.32;text-align:center;}
  .game-guidance{display:flex!important;gap:3px 6px;justify-content:center;
    font-size:10px;line-height:1.17;text-align:center;}
  .game-reading{font-size:10px;}
  .game-reading svg{width:12px;height:12px;}
  .card-actions{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:3px;}
  .card-play{flex:1;min-width:0;min-height:44px;gap:3px;padding:6px 3px;
    border-radius:12px;font-size:clamp(12px,3.25vw,14px);white-space:nowrap;
    box-shadow:0 2px 0 #12518b;}
  .card-play .ico{width:14px;height:14px;}
  .card-play::after{border-radius:17px;}
  .fav-button{flex:0 0 44px;width:44px;height:44px;min-height:44px;
    border-radius:12px;box-shadow:0 2px 0 #bed5e6;}
  .fav-button .ico{width:18px;height:18px;}
}
/* Una tableta en vertical mantiene el mismo escenario pero muestra dos juegos por fila. */
@media (min-width:570px) and (max-width:760px){
  .game-grid,.game-grid[data-view="juegos"],.game-grid[data-view="temas"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-inline:15px;}
  .card-content{padding-inline:6px;}
  .card-content h3{font-size:clamp(16px,2.9vw,20px);min-height:39px;padding:5px 9px;}
  .card-description{font-size:13px;}
  .hero,body.has-visible-hero .hero{height:278px;}
  .brand,body.has-visible-hero .brand{width:315px;}
}
@media (max-width:345px){
  .brand,body.has-visible-hero .brand{width:min(86vw,280px);}
  .header-actions{gap:5px;right:7px;}
  .card-content h3{font-size:calc(14px * var(--heading-scale));}
  .content-head h2{font-size:21px;}
}
@media (max-width:760px) and (orientation:landscape) and (max-height:460px){
  .hero,body.has-visible-hero .hero{height:208px;}
  .brand,body.has-visible-hero .brand{top:59px;width:min(48vw,300px);}
}
@media (prefers-reduced-motion:reduce){
  .game-cover img,.brand,.hero-postcard{animation:none!important;transition:none!important;}
}