/* Brincurio · composición orgánica v4
   Portada compacta, sin párrafos decorativos ni pantalla de escritorio encogida.
   Partimos de portada.css; los juegos y sus guardados no se alteran.
*/
:root {
  --br-blue:#165d9b;
  --br-sky:#e8f9ff;
  --br-ink:#193d73;
  --br-font:"Brincurio Rounded",ui-rounded,"Trebuchet MS",sans-serif;
}
html{background:#eaf9ff}
body{
  min-width:0;max-width:100%;overflow-x:clip;
  background:
    radial-gradient(ellipse at 5% 18%,#d5f4ff 0%,transparent 38%),
    radial-gradient(ellipse at 98% 49%,#fce8f7 0%,transparent 32%),
    linear-gradient(180deg,#eaf9ff 0%,#fff9ee 57%,#f3efff 100%);
}
/* Barra ligera, no una segunda portada antes del juego. */
.header{
  background:linear-gradient(#e7f8ff,#fbfdff);border:0;box-shadow:0 2px 0 #cbe6f7;
}
.header-inner{min-width:0}
.brand,.search,.header-actions,.content,.hero-copy{min-width:0}
.brand-logo{filter:drop-shadow(0 1px 0 #bedcf7)}
.mobile-search-toggle{display:none}
.hero-brand{display:none}
.nav-item{border-radius:16px}
.nav-item.is-active{color:#185399;background:#e8f5ff;border:1px solid #b9def8}
.search{background:#f1faff;border:1px solid #c3e0f3;border-radius:17px}
.header-icon{background:#f3fbff;border-color:#cfebf9}
.avatar-button{background:#fff1d7;border-color:#efd6a5}
.content{padding-top:17px}
/* Una ilustración y un cartel: el texto pertenece al escenario. */
.hero{
  position:relative;display:flex;align-items:center;isolation:isolate;
  min-height:clamp(235px,24vw,305px);
  border:3px solid #fff;border-radius:27px;overflow:hidden;
  background:#73d0f6;
  box-shadow:0 4px 0 #b0dfee,0 12px 20px #1c619f1c;
}
.hero-art{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;object-position:center center;pointer-events:none;
}
.hero::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,#d3f5ffb8 0%,#d5f6ff90 35%,transparent 65%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-50px;height:75px;border-radius:50% 50% 0 0;background:#fff;opacity:.45;z-index:-1}
.hero-copy{
  position:relative;z-index:3;width:52%;
  padding:clamp(15px,3.1vw,35px);color:var(--br-ink);
}
.hero h1{
  display:block;width:fit-content;max-width:100%;margin:0;
  padding:10px clamp(14px,2vw,26px) 12px;
  color:#194a7a;background:linear-gradient(170deg,#fff2a9 0%,#ffdc72 55%,#ffd05b 100%);
  border:3px solid #fff7d8;border-radius:18px 34px 19px 31px;
  box-shadow:0 5px 0 #cf9b3c,0 10px 20px #285c8c25;
  transform:rotate(-2deg);text-wrap:balance;
  text-shadow:0 1px #fff9d6;
  font:700 clamp(30px,3.65vw,51px)/1.04 var(--br-font);
  letter-spacing:-.035em;
}
.hero-action{
  margin:16px 0 0 9px;padding:8px 17px;
  min-height:44px;min-width:0;
  color:#fff;border:2px solid #fff7e5;border-radius:999px;
  background:linear-gradient(#f57894,#dc3f6b);font:700 clamp(14px,1.35vw,18px)/1.1 var(--br-font);
  box-shadow:0 3px 0 #9d3056,0 7px 14px #9d305644;
  text-shadow:0 1px #9c2546;
}
.hero-action:hover{transform:translateY(-2px)}
.hero-action:active{transform:translateY(2px);box-shadow:0 1px 0 #9d3056}
.welcome-badge{
  display:inline-block;margin:0 0 8px;padding:4px 10px;
  color:#1b567f;background:#ffffffd9;border:1px solid #fff;
  border-radius:30px;font:600 12px/1.2 var(--br-font);
}
/* En escritorio: dos carátulas oficiales, no protagonistas inventados. */
.hero-showcase{position:absolute;z-index:2;inset:0 0 0 auto;width:47%;pointer-events:none}
.hero-postcard{
  position:absolute;display:block;width:clamp(135px,20vw,240px);
  padding:5px 5px 0;
  border:2px solid #fff;background:#fff;border-radius:19px;
  box-shadow:0 5px 0 #3193bd,0 12px 19px #2056833b;
  pointer-events:auto;text-align:center;
  transition:transform .18s;
}
.hero-postcard img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:13px}
.hero-postcard span{
  display:block;width:fit-content;max-width:100%;margin:-9px auto -4px;padding:5px 12px;
  color:#fff;border:2px solid #fff8d9;border-radius:999px;
  background:#8e4eda;box-shadow:0 2px 0 #66369f;
  text-shadow:0 1px #4a2781;font:700 clamp(12px,1.2vw,16px)/1.12 var(--br-font);
}
.hero-postcard--pompy{left:5%;top:14%;transform:rotate(-7deg)}
.hero-postcard--brujula{right:6%;bottom:13%;transform:rotate(6deg)}
.hero-postcard--brujula span{background:#b46a1e;box-shadow:0 2px 0 #714718;text-shadow:0 1px #714718}
.hero-postcard:hover{transform:rotate(0) translateY(-3px)}
/* El catálogo es la estrella: rótulo simple y filtros de un vistazo. */
.content-head{gap:9px;margin:28px 0 15px;align-items:center}
.content-head h2{
  margin:0;color:#245385;background:none;border:0;box-shadow:none;transform:none;
  padding:0;font:700 clamp(23px,2.6vw,33px)/1.1 var(--br-font);
  text-shadow:none;
}
.content-head h2::after{content:"✦";color:#ffbd4c;display:inline-block;margin-left:5px;font-size:.65em;vertical-align:top}
.count{color:#5b6477;font:600 13px/1.2 var(--br-font)}
.filters{gap:8px;margin-bottom:17px}
.filter{
  min-height:46px;padding:6px 7px;border:1px solid var(--topic-edge);border-radius:16px;
  box-shadow:0 2px 0 var(--topic-edge);font:700 clamp(11px,1.04vw,14px)/1.15 var(--br-font);
}
.filter.is-selected{background:linear-gradient(#398fda,#236fc0);border-color:#1d66ac;box-shadow:0 2px 0 #14518c;color:#fff}
.filter-icon{font-size:18px}
.game-grid{gap:clamp(12px,1.6vw,20px)}
.game-card{
  --ticket:#2667ac;--ticket-edge:#19518c;--ticket-wash:#edf7ff;
  border:2px solid #fff;border-radius:20px;
  background:linear-gradient(#fff 70%,var(--ticket-wash));padding:5px;
  box-shadow:0 4px 0 #cde0ed,0 9px 17px #28629415;
}
.game-card[data-category=ingles]{--ticket:#216fbb;--ticket-edge:#17548b;--ticket-wash:#e5f2ff}
.game-card[data-category=matematicas]{--ticket:#b44c59;--ticket-edge:#8d3944;--ticket-wash:#fff2e9}
.game-card[data-category=salud]{--ticket:#bf3c75;--ticket-edge:#832a50;--ticket-wash:#fff0f4}
.game-card[data-category=lengua]{--ticket:#7a4bc1;--ticket-edge:#59338e;--ticket-wash:#f1ecff}
.game-card[data-category=geografia]{--ticket:#aa6e23;--ticket-edge:#805119;--ticket-wash:#fff5df}
.game-card[data-category=arte]{--ticket:#b84a93;--ticket-edge:#803565;--ticket-wash:#fff0fa}
.game-card[data-category=ciencia]{--ticket:#168398;--ticket-edge:#126373;--ticket-wash:#e9faff}
.game-cover{border-radius:14px;background:var(--ticket-wash)}
.game-cover img{transition:transform .18s}
.game-card:hover .game-cover img{transform:scale(1.025)}
.card-content{position:static;gap:6px;min-width:0;margin-top:-12px;padding:0 7px 8px;z-index:auto}
.card-content h3{
  position:relative;z-index:1;align-self:center;display:grid;place-items:center;
  width:fit-content;max-width:100%;min-height:32px;margin:0;padding:4px 11px;
  background:var(--ticket);border:2px solid #fff;border-radius:999px;
  color:#fff;box-shadow:0 2px 0 var(--ticket-edge);
  font:700 clamp(15px,1.6vw,21px)/1.13 var(--br-font);
  text-shadow:0 1px var(--ticket-edge);text-align:center;overflow-wrap:anywhere;
}
.card-description{color:#4c566e;font-size:13px;line-height:1.34}
.card-actions{gap:6px;padding-top:3px}
.card-play{
  min-height:41px;border:1px solid #2372be;border-radius:13px;
  background:#277dcb;color:#fff;box-shadow:0 2px 0 #17538d;font-weight:700;
}
.card-play::after{border-radius:19px}
.fav-button{position:relative;z-index:2;background:#f5faff;border:1px solid #d5eafa;border-radius:13px}
.empty-state,.family-panel{border:2px solid #fff;border-radius:20px;box-shadow:0 4px 0 #d3e4f2}
.family-game-guide li{border-radius:16px}
.site-footer{color:#64778b;text-align:center}
/* Vista intermedia: dos carátulas sin solapamientos y tres juegos por fila. */
@media (min-width:761px) and (max-width:1030px){
  .hero{min-height:250px}
  .hero-copy{width:53%}
  .hero h1{font-size:clamp(27px,3.5vw,39px)}
  .hero-showcase{width:45%}
  .hero-postcard{width:clamp(120px,18vw,160px)}
  .hero-postcard--pompy{left:0;top:17%}
  .hero-postcard--brujula{right:0;bottom:15%}
}
/* Móvil: recupera el pequeño banner de la versión anterior.
   Sin explicación, subtítulos ni postales duplicadas encima del catálogo. */
@media (max-width:760px){
  :root{--gutter:max(9px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .header{position:relative}
  .header-inner{
    display:grid;width:100%;max-width:none;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand controls" "search search";
    gap:0 6px;padding:6px var(--gutter);
    align-items:center;
    border:0;border-radius:0;box-shadow:0 2px 0 #c5e6f7;
  }
  body.mobile-search-ready:not(.mobile-search-open) .header-inner{grid-template-areas:"brand controls"}
  body.mobile-search-ready:not(.mobile-search-open) .search{display:none}
  .brand{min-width:0;min-height:40px}
  .brand-logo{width:clamp(112px,36vw,152px);max-height:39px;max-width:100%}
  .header-actions{gap:4px;min-width:0}
  .header-icon{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:12px}
  .header-icon .ico{width:18px;height:18px}
  .theme-toggle{display:none}
  .mobile-search-toggle{display:grid}
  .search{margin:7px 0 1px;min-height:42px;padding:0 11px}
  .search input{height:40px;font-size:16px}
  .navigation{
    position:fixed;inset:auto 0 0;z-index:14;
    width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    background:linear-gradient(#fff,#eff9ff);
    border-top:1px solid #c7e5f8;box-shadow:0 -3px 14px #1a4a7723;
  }
  .nav-item{min-width:0;min-height:46px;padding:4px 1px;gap:2px;font-size:clamp(9px,2.65vw,11px);border-radius:12px}
  .nav-item .ico{width:20px;height:20px}
  .content{padding:9px var(--gutter) calc(70px + env(safe-area-inset-bottom,0px))}
  .hero{
    height:clamp(146px,37vw,194px);min-height:0;
    border:2px solid #fff;border-radius:20px;
    box-shadow:0 3px 0 #b2e0f0,0 7px 14px #28629416;
  }
  .hero-art{object-position:75% center}
  .hero::before{background:linear-gradient(90deg,#d4f6ffc4 0%,#e0f8ff78 45%,transparent 78%)}
  .hero::after{display:none}
  .hero-copy{width:67%;max-width:67%;padding:10px 0 10px clamp(10px,3vw,17px)}
  .hero h1{
    max-width:100%;min-height:0;margin:0;
    padding:6px 9px 7px;
    border:2px solid #fff4d4;
    border-radius:13px 23px 13px 22px;
    box-shadow:0 3px 0 #cc9b40,0 5px 9px #1b4d7719;
    transform:rotate(-2deg);
    font-size:clamp(23px,6.5vw,32px);line-height:1.04;
  }
  .hero-action{
    min-height:42px;max-width:100%;margin:9px 0 0 6px;
    padding:5px 11px;border:2px solid #fff5e6;border-radius:999px;
    font-size:clamp(12px,3vw,14px);box-shadow:0 2px 0 #9d3056;
  }
  .hero-action .ico{width:15px;height:15px}
  .welcome-badge{margin:0 0 6px;font-size:10px;padding:3px 7px}
  .hero-showcase{display:none}
  .content-head{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:4px;margin:17px 1px 10px;
  }
  .content-head h2{
    padding:0;font-size:calc(clamp(20px,5.3vw,25px) * var(--heading-scale));
    line-height:1.12;border:0;background:none;box-shadow:none;transform:none;
  }
  .count{display:none}
  .filters{
    display:flex;flex-wrap:nowrap;align-items:stretch;
    gap:7px;width:100%;max-width:100%;
    padding:1px 1px 5px;margin:0 0 14px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{
    flex:0 0 auto;min-width:0;min-height:40px;
    padding:5px 11px;border:1px solid var(--topic-edge);
    border-radius:999px;box-shadow:0 2px 0 var(--topic-edge);
    font-size:12px;white-space:nowrap;scroll-snap-align:start;
  }
  .filter-label,.filter-label.filter-action,.filter-label.filter-topic{
    display:inline-flex;flex-direction:row;gap:5px;white-space:nowrap;
  }
  .filter-icon{font-size:17px}
  .filter-icon .ico{width:16px;height:16px}
  .game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
  .game-card{
    min-width:0;padding:3px;border:2px solid #fff;border-radius:16px;
    box-shadow:0 3px 0 #c7dcec,0 7px 11px #245c8c16;
  }
  .game-cover{aspect-ratio:8/5;border-radius:11px}
  .card-content{min-width:0;margin-top:-10px;padding:0 4px 6px;gap:5px}
  .card-content h3{
    width:fit-content;max-width:100%;min-height:30px;padding:4px 7px;
    font-size:calc(clamp(12px,3.6vw,16px) * var(--heading-scale));line-height:1.04;
    border-width:2px;border-radius:13px;
  }
  .card-description,.game-guidance,.subject{display:none}
  .card-actions{display:flex;align-items:center;gap:4px;padding-top:1px}
  .card-play{
    min-height:42px;flex:1;padding:5px 4px;
    font-size:calc(12px * var(--heading-scale));
    border-radius:10px;box-shadow:0 1px 0 #17538d;
  }
  .card-play::after{border-radius:16px}
  .card-play .ico{width:14px;height:14px}
  .fav-button{
    width:42px;height:42px;min-width:42px;min-height:42px;
    border-radius:10px;box-shadow:none;
  }
  .fav-button .ico{width:17px;height:17px}
  .family-game-guide{grid-template-columns:1fr}
  .empty-state,.family-panel{padding:15px}
  .site-footer{font-size:12px}
}
@media(min-width:530px) and (max-width:760px){
  .content{padding-inline:clamp(12px,2.5vw,20px)}
  .hero{height:clamp(175px,26vw,205px)}
  .hero-copy{width:55%;max-width:55%}
  .hero h1{font-size:clamp(26px,5vw,34px)}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .card-content h3{font-size:calc(14px * var(--heading-scale))}
}
@media(max-width:355px){
  .brand-logo{width:112px}
  .header-icon{width:40px;min-width:40px;height:42px}
  .hero{height:146px}
  .hero-copy{width:70%;max-width:70%;padding-left:9px}
  .hero h1{font-size:23px}
  .filter{padding:5px 9px}
  .card-content h3{font-size:calc(12px * var(--heading-scale))}
}
body.dark{background:linear-gradient(#202b4b,#231d43)}
body.dark .header{background:linear-gradient(#293a5e,#283453);box-shadow:0 2px 0 #172849}
body.dark .search{background:#34496b;border-color:#617a99}
body.dark .hero{border-color:#365878}
body.dark .hero h1{color:#214874}
body.dark .game-card{background:#35405c;border-color:#49628c;box-shadow:0 3px 0 #1e2c49}
body.dark .card-content h3{color:#fff}
body.dark .card-description{color:#e7ebf6}
body.dark .content-head h2{color:#e9f5ff}
body.dark .count{color:#d2e6f7}
body.dark .fav-button{background:#2c456b;border-color:#527ba1;color:#fff}
body.dark .site-footer{color:#c5d6e5}
@media(prefers-reduced-motion:reduce){
  .game-cover img,.hero-postcard,.hero-action{transition:none!important}
}
body.less-motion .game-cover img,body.less-motion .hero-postcard{transition:none!important}

/* Foco y usuarios que prefieren menos animación. */
.game-card:focus-within{outline:3px solid #195f9b;outline-offset:3px}
body.dark .game-card:focus-within{outline-color:#ffdb6c}
.mobile-search-toggle:focus-visible{outline-offset:2px}


/* Mejoras verificables tras 150 perfiles de uso hipotéticos (no usuarios reales).
   Sin texto suplementario ni cambios en las carátulas originales. */
.filter-rail{position:relative;min-width:0}
.filter-rail[hidden]{display:none!important}
.filter{min-height:48px}
.card-play{min-height:45px}
.hero-action{min-height:46px}
:where(.filter,.card-play,.hero-action,.fav-button,.header-icon,.nav-item):focus-visible{
  outline:3px solid #e67725;outline-offset:3px;
}
body.dark :where(.filter,.card-play,.hero-action,.fav-button,.header-icon,.nav-item):focus-visible{
  outline-color:#ffe08c;
}
@media (max-width:760px){
  /* 44px reales para manos pequeñas o movilidad limitada. */
  .header-icon{width:44px;height:44px;min-width:44px;min-height:44px}
  .brand{min-height:44px}
  .nav-item{min-height:50px;font-size:clamp(10.5px,2.8vw,12px)}
  .hero-action{min-height:44px;font-size:clamp(13px,3.2vw,15px)}
  .filter{min-height:46px;font-size:clamp(12px,3.35vw,14px)}
  .filters{margin-bottom:9px;padding:2px 9px 8px 1px;gap:8px}
  /* Una pista visual de que las categorías continúan a la derecha. */
  .filter-rail::after{
    content:"";position:absolute;top:0;bottom:3px;right:0;
    width:23px;pointer-events:none;z-index:1;
    background:linear-gradient(90deg,transparent 0%,#f8f7f3d9 70%,#f8f7f3 100%);
    border-radius:0 999px 999px 0;
  }
  .card-content h3{
    font-size:calc(clamp(14px,3.8vw,17px) * var(--heading-scale));
    line-height:1.16;min-height:33px;
  }
  .card-play{min-height:44px;font-size:calc(14px * var(--heading-scale))}
  .fav-button{width:44px;height:44px;min-width:44px;min-height:44px}
  .card-actions{align-items:center}
  .game-grid[data-view="temas"] .game-guidance{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:3px 8px;padding:3px 0;
    font:600 calc(11px * var(--heading-scale))/1.2 Rubik,system-ui,sans-serif;
    color:#495878;
    text-align:center;
  }
  .game-grid[data-view="temas"] .game-age{color:#314c7c}
  .game-grid[data-view="temas"] .game-reading{font-size:11px}
  .game-grid[data-view="temas"] .game-reading svg{width:13px;height:13px}
  body.dark .filter-rail::after{
    background:linear-gradient(90deg,transparent,#252147e8 85%,#252147 100%);
  }
  body.dark .game-grid[data-view="temas"] .game-guidance,
  body.dark .game-grid[data-view="temas"] .game-age{color:#e7ecff}
}
@media(min-width:530px) and (max-width:760px){
  /* Las tres columnas hacían ilegibles los títulos en tabletas pequeñas. */
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .card-content h3{font-size:calc(clamp(15px,2.8vw,18px) * var(--heading-scale))}
  .card-play{font-size:calc(15px * var(--heading-scale))}
}
@media(max-width:355px){
  /* Evitar que el ajuste anterior vuelva a reducir el texto a 12px. */
  .header-icon{width:44px;height:44px;min-width:44px}
  .card-content h3{font-size:calc(14px * var(--heading-scale))}
}


/* BRINCURIO · Logotipo flotante integrado en la cabecera y el paisaje.
   El SVG oficial es transparente; no se coloca sobre una caja de color.
   Cuando no se ve el paisaje, la marca recupera su sitio en la barra. */
.header{z-index:16;overflow:visible}
.header-inner{position:relative;overflow:visible}
.brand{position:relative;z-index:18;isolation:isolate;transition:transform .18s ease}
.brand-logo{
  display:block;width:clamp(195px,16.2vw,234px);height:auto;max-width:100%;
  max-height:none;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 4px 3px #185d9140) drop-shadow(0 1px 0 #ffffff9e);
}
body.has-visible-hero .brand-logo{width:clamp(240px,22vw,320px)}
body.has-visible-hero .brand{
  transform:translateY(20px) rotate(-1.5deg);
  transform-origin:30% center;
}
body.has-visible-hero .content{padding-top:9px}
/* Las sombras suaves fusionan la marca con el cielo sin crear otro recuadro. */
body.has-visible-hero .brand::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:12% -8% -1%;border-radius:50%;
  background:radial-gradient(ellipse at center,#fff8dba0 0%,#ffffff70 40%,transparent 73%);
  filter:blur(10px);
}
body.dark .brand-logo{filter:drop-shadow(0 3px 4px #030d3080) drop-shadow(0 0 3px #a7d9ff70)}
/* En portátiles pequeños la navegación tiene segunda fila; no se tapa. */
@media (min-width:761px) and (max-width:949px){
  body.has-visible-hero .brand{transform:translateY(3px) rotate(-1deg)}
  body.has-visible-hero .brand-logo{width:clamp(210px,28vw,250px)}
}
/* Móvil: barra de acciones breve arriba y marca grande sobre el cielo.
   No se superpone a los botones de búsqueda/configuración ni al enlace Jugar. */
@media (max-width:760px){
  .header{z-index:16}
  .header-inner{position:relative}
  .brand{
    transform:none;
    min-width:0;min-height:44px;
  }
  .brand-logo{width:clamp(128px,36vw,155px);max-width:100%;height:auto;max-height:none}
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .header-inner{
    display:grid;grid-template-columns:1fr;grid-template-areas:"controls";
    align-items:start;justify-items:end;min-height:56px;
    padding:6px var(--gutter) 6px;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .header-actions{
    grid-area:controls;justify-self:end;position:relative;z-index:19;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .brand{
    position:absolute;z-index:18;top:49px;left:50%;
    width:auto;height:auto;min-height:0;
    transform:translateX(-50%) rotate(-3deg);
    transform-origin:center center;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .brand-logo{
    width:min(74vw,285px);max-width:none;height:auto;max-height:none;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .content{padding-top:9px}
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero{
    height:clamp(186px,54vw,232px);
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero-art{
    object-position:center center;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero::before{
    background:linear-gradient(180deg,#d5f7ff25 0%,#d8faff15 60%,#d7faff70 100%);
  }
  /* El H1 permanece accesible, pero no duplica el logotipo visualmente. */
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero h1{
    position:absolute!important;overflow:hidden!important;
    width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    border:0!important;white-space:nowrap!important;
    clip-path:inset(50%)!important;box-shadow:none!important;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero-copy{
    position:absolute;inset:auto 12px 14px auto;z-index:3;
    width:auto;max-width:100%;padding:0;margin:0;
    display:flex;align-items:end;flex-direction:column;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .welcome-badge{
    margin:0 0 7px;padding:4px 9px;
    font-size:11px;max-width:min(65vw,240px);text-align:right;
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero-action{
    min-height:44px;margin:0;padding:6px 16px;
    font-size:clamp(14px,3.4vw,16px);
  }
  /* Abrir búsqueda recoloca la barra y evita que la marca cubra el campo. */
  body.mobile-search-open .brand{display:none}
  body.mobile-search-open .header-inner{
    grid-template-columns:1fr;
    grid-template-areas:"controls" "search";
    gap:4px;
  }
  body.mobile-search-open .header-actions{justify-self:end}
}
/* Pantallas realmente estrechas: tamaño contenido sin solapar controles. */
@media (max-width:360px){
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .brand-logo{
    width:min(73vw,250px);
  }
  body.has-visible-hero.mobile-search-ready:not(.mobile-search-open) .hero{height:190px}
}
@media (prefers-reduced-motion:reduce){.brand{transition:none}}
body.less-motion .brand{transition:none}


@media (min-width:761px){
  .header-inner{gap:4px 12px;padding-block:6px}
  body.has-visible-hero .brand{transform:none}
  .brand-logo,body.has-visible-hero .brand-logo{width:clamp(160px,15vw,198px)}
  body.has-visible-hero .content{padding-top:12px}

  .hero{min-height:clamp(198px,18vw,240px)}
  .hero-copy{padding-block:16px}
  .hero-showcase{width:48%}
  .hero-postcard{width:min(43%,205px)}
  .hero-postcard--pompy{left:3%;top:13%}
  .hero-postcard--brujula{right:4%;bottom:13%}

  .hero:not([hidden]) + .content-head{margin:17px 0 0}
  .hero:not([hidden]) + .content-head > *{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .hero:not([hidden]) + .content-head h2::after{content:none}
}

/* En ventanas estrechas, el menú ocupa su propia fila. */
@media (min-width:761px) and (max-width:999px){
  .header-inner{
    grid-template-columns:auto minmax(160px,1fr) auto;
    grid-template-areas:"brand search controls" "nav nav nav";
  }
  .navigation{justify-content:center}
  .content-head{scroll-margin-top:125px}
}

@media (min-width:761px){
  :root{--gutter:clamp(18px,2.5vw,36px)}
  .header-inner,.content{width:min(100%,1760px)}
  .hero{min-height:clamp(218px,16vw,268px)}
  .hero-art,.hero::after{display:none}
  .hero::before{
    background:
      linear-gradient(90deg,#def8fff5 0%,#def8ffca 21%,#def8ff00 43%),
      url("imagenes/panorama-brincurio.webp") center 48% / cover no-repeat;
  }
  .hero-copy{padding-inline:clamp(20px,3vw,48px)}
  .hero h1{
    padding:0;border:0;background:none;box-shadow:none;transform:none;
    color:#133d69;text-shadow:0 2px 0 #e8fcff;
    font-size:clamp(31px,3.8vw,52px);
  }
  .hero-action{margin-left:0}
  .hero-showcase{width:40%}
  .hero-postcard{width:min(43%,220px)}
  .hero-postcard--pompy{left:7%;top:16%;transform:rotate(-4deg)}
  .hero-postcard--brujula{right:7%;bottom:16%;transform:rotate(4deg)}
  .hero-postcard:hover{transform:translateY(-3px)}
}

@media (min-width:1000px){
  body.has-visible-hero .header-inner{
    grid-template-columns:max-content minmax(152px,520px) auto;
    grid-template-areas:"nav search controls";
    justify-content:space-between;
  }
  body.has-visible-hero .header .brand{display:none}
  body.has-visible-hero .hero-brand{
    display:block;width:86%;max-width:660px;margin-bottom:5px;border-radius:12px;
  }
  body.has-visible-hero .hero-brand .brand-logo{
    width:100%;filter:drop-shadow(0 4px 4px #185d9140);
  }
  .hero-copy{padding-block:16px}
  .hero h1{font-size:clamp(29px,2.8vw,44px)}
  .hero-action{margin-top:10px}
  .welcome-badge{margin-bottom:4px}
}

@media (min-width:1520px){
  .header-inner{
    grid-template-columns:auto auto minmax(152px,520px) auto;
    justify-content:space-between;
  }
  .game-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}