@charset "UTF-8";

/* =========================
   HOME — CSS ÚNICO (LIMPIO)
========================= */



*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
}
img{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);margin:0}

/*.inner{max-width:980px;margin:0 auto;padding:0 var(--pad)}*/







.header h1{
  color:#fff;font-weight:700;font-size:26px;
}



/* H1 */
.page-home-intro{
  background:var(--brand);
   
  max-width:var(--content-w);
  margin:0 auto;
    padding-top:calc(var(--header-h) + 24px);
  padding-bottom:10px;
}

.page-home-intro .inner{
  max-width:var(--content-w);
  margin:0 auto;
  padding:0 var(--pad);
}



/* MAIN  */
.page-home main{
    padding:0;
    background:transparent;
padding-top:calc(var(--header-h) + 22px);}

/* BLOQUE BLANCO CENTRADO */
/* BLOQUE BLANCO CENTRADO */
.page-home .home-hero{
  max-width:var(--content-w);
  width:100%;
  margin:0 auto;
  background:#fff;
  padding:14px 0 40px;
}

/* LAYOUT 70/30 SIEMPRE */
.home-layout{
  display:grid;
  grid-template-columns:7fr 3fr;
  gap:var(--gap);
  position:relative;
  align-items:start;
}
.home-layout::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:calc(((100% - var(--gap)) * 0.7) + (var(--gap) / 2));
  width:1px;
  background:var(--hair);
  pointer-events:none;
}
.home-side{
  min-width:0;
  padding-left:calc(var(--pad) - (var(--gap) / 2));
  padding-right:var(--pad);
    
}

/* MEMORIA */
.home-memoria{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:0px;     /* h2 → columnas */
  column-gap:32px;
  min-width:0;
  padding-left:var(--pad);
  padding-right:calc(var(--pad) - (var(--gap) / 2));
}
.home-memoria h2{
  grid-column:1/-1;
  color:var(--brand);
  font-size:22px;
  font-weight:700;
  margin:0 0 8px;
  margin-bottom:8px;
}
.nivel-badge{
  font-size:18px;
  font-weight:600;
  margin:0 0 8px;
}
.col{min-width:0}
.col--faciles{--accent:var(--a2)}
.col--intermedios{--accent:var(--a1)}
.col--dificiles{--accent:var(--a3)}
.home-memoria .grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}


/* SOPAS + SUDOKUS */
.home-side h2{
  color:var(--brand);
  font-size:22px;
  font-weight:700;
  margin:0 0 8px;
}
.home-sopas{margin-bottom:28px}
.home-sopas .card{margin-bottom:12px}
.home-sudokus .grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}


.home-sopas{
    padding-bottom:22px;
    border-bottom:1px solid var(--hair);
    margin-bottom:22px;
  }




/* MEMORIA + SUDOKUS → cuadradas */
.home-memoria .card,
.home-sudokus .card{
  aspect-ratio:1 / 1;
}

/* SOPAS → equivalencia visual de alto */
.home-sopas .card{
  width:100%;
 
}


/* SOPAS — sin brillo */
@media (hover:hover) and (pointer:fine){
  .home-sopas .card:hover .thumb{
    filter:none;
  }
}
/* LÍMITE DE ALTURA — SOPAS Y SUDOKUS */

.home-sudokus .card{
  max-height: 80px;
}

/* ADS */
.adsense-wrap{max-width:100%}
.ad-spacer{height:40px}








.footer{
  background:var(--brand);
  color:#fff;
  padding:24px 0;

  font-family:var(--font-display);
}

.footer .inner{
  max-width:var(--content-w);
  margin:0 auto;
  padding:0 var(--pad);

  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
}

.footer a{
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;

  opacity:.65;
  transition:opacity .2s ease;
}

@media (hover:hover){
  .footer a:hover{
    opacity:1;
  }
}


@media (max-width: 920px){
  .page-home .home-hero{
    width:100%;
  }
}
@media (max-width: 640px){
  :root{--pad:16px}
}



.nivel-badge{
 margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;

  color: #9d4a00;
  text-align: left;
}


/* =========================
   VER MÁS — FLECHA + FLASH
========================= */

.home-memoria .ver-mas{
  grid-column:1 / -1;
}

.ver-mas{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;

  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.2;

  color:var(--a3);
  text-decoration:none;

  position:relative;
  overflow:hidden;
}

.ver-mas::before{
  content:"";
  width:0;
  height:0;
  border-top:.45em solid transparent;
  border-bottom:.45em solid transparent;
  border-left:.7em solid currentColor;
  margin-top:.1em;
  flex-shrink:0;
}

.ver-mas::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.45),
    transparent 70%
  );
  opacity:0;
  transform:translateX(-120%);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){

  .ver-mas{
    transition:transform .18s ease, color .18s ease;
  }

  .ver-mas:hover{
    color:var(--brand);
    transform:scale(1.04);
  }

  .ver-mas::before{
    transition:transform .18s ease;
  }

  .ver-mas:hover::before{
    transform:translateX(4px);
  }

  /* APAGAR FLASH */
  .ver-mas::after{
    display:none;
  }
}

@keyframes vermas-arrow{
  0%{transform:translateX(0) scale(1)}
  40%{transform:translateX(6px) scale(1.15)}
  70%{transform:translateX(-2px) scale(.95)}
  100%{transform:translateX(0) scale(1)}
}

@keyframes vermas-flash{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}




/* =========================
   MOBILE GRID — DEFAULT OFF
========================= */
.home-memoria-mobile{
  display:none;
}



/* ====================================================================================================
   HOME — TABLET
==================================================================================================== */

@media (min-width:641px) and (max-width:1099px){

  /* layout general: sigue 70/30 pero más aire controlado */
  .home-layout{
    gap:24px;
  }

  .home-layout::after{
    left:calc(((100% - 24px) * 0.7) + 12px);
  }

    @media (min-width:641px) and (max-width:920px){

  .page-home .header .inner,
  .page-home .home-hero,
  .page-home .page-home-intro,
  .page-home .footer .inner{
    max-width:var(--content-w);
  }

}
    
  /* =========================
     MEMORIA
  ========================= */

  .home-memoria{
    column-gap:24px;
    padding-left:var(--pad);
    padding-right:12px;
  }

  /* grid interno: 2 thumbs */
  .home-memoria .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  /* =========================
     SOPAS
  ========================= */

  .home-sopas{
    margin-bottom:24px;
    padding-bottom:18px;
  }

  .home-sopas .card{
    margin-bottom:10px;
  }

  /* =========================
     SUDOKUS
  ========================= */

  /* se mantiene compacto, evita overflow */
  .home-sudokus .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .home-sudokus .card{
    max-height:72px;
  }

}





  /* ====================================================================================================
     MOBILE
  ==================================================================================================== */

@media (max-width:640px){
 
   html, body{
    overflow-x:hidden;
  }
    

    
    .page-home .home-hero.inner{
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
    width:100%;
    max-width:100%;
  }

    
  .home-memoria-mobile .mobile-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  /* =========================
     HEADER
  ========================= */
  .page-home .header{
    height:auto;
    padding:12px 0;
  }

  .page-home .header h1{
    font-size:20px;
    line-height:1.3;
    text-align:center;
    margin:0;
    padding:0 12px;
  }

  /* =========================
     APAGAR HOME DESKTOP
  ========================= */
  .home-layout,
  .home-memoria,
  .home-sopas,
  .home-sudokus{
    display:none;
  }

  /* =========================
     HOME MOBILE — BLOQUES
  ========================= */
  .home-memoria-mobile,
  .home-sopas-mobile,
  .home-sudokus-mobile{
    display:block;
    padding:0 16px;
    margin-bottom:28px;
  }

  .home-memoria-mobile h2,
  .home-sopas-mobile h2,
  .home-sudokus-mobile h2{
    font-size:20px;
    margin:0 0 12px;
    color:var(--brand);
  }

  /* =========================
     GRID 3 THUMBS
  ========================= */
  .home-memoria-mobile .mobile-grid,
  .home-sopas-mobile   .mobile-grid,
  .home-sudokus-mobile .mobile-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }

  .mobile-grid .card{
    aspect-ratio:1 / 1;
  }

  /* =========================
     ITEM
  ========================= */
  .mobile-item{
    text-align:center;
  }

  .mobile-item .nivel-badge{
    font-size:18px;
    font-weight:200;
    margin-top:0px;
    text-align:left;
  }

  /* =========================
     VER TODOS (SOLO MOBILE)
  ========================= */
  .home-memoria-mobile .ver-mas,
  .home-sopas-mobile   .ver-mas,
  .home-sudokus-mobile .ver-mas{
    display:block;
    margin-top:12px;
    font-size:13px;
  }

  .home-memoria-mobile .card{
    display:block;          /* ← CLAVE */
    aspect-ratio:1 / 1;
  }
      .page-home .home-hero{
    display:block;
    padding-top:16px;
  }
    
    /* h2 como link con flecha */
.h2-link{
  margin:0 0 12px;
}

.h2-link a{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  color:var(--brand);
  text-decoration:none;
}

/* triángulo */
.h2-link a::after{
  content:"";
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid var(--a3);
}
   
    

  .header-lines{
    left:0;
    transform:none;
    width:100%;
    max-width:none;
    z-index:1100;
      top:calc(var(--header-h) + 12px);
  }

  .header-lines .line{
    display:block;
  }
    


  .mobile-grid .card{
    border:0; /* importante */
    outline:4px solid var(--accent,var(--hair));
    outline-offset:-4px; /* lo mete visualmente */
  }

  .mobile-grid .card .thumb{
    width:100%;
    height:100%;
    object-fit:contain; /* ahora sí, se ve entero */
    background:#fff;
  }
    
    
}