@charset "UTF-8";
/* PAGE — MEMORIA */

:root{
  --game-w: 480px;   /* probá 480 / 460 / 440 */
      --game-facil:   520px;
  --game-medio:   440px;
  --game-dificil: 450px;
}

.page-memoria .header-lines{
  z-index:10000;
  box-shadow:0 6px 12px -4px rgba(0,0,0,.25);
}

/* separación bajo header */
.page-memoria main{
  padding-top:calc(var(--header-h) + 24px);
}

.page-memoria main > .inner{
  max-width:var(--content-w);
  background:#fff;
      padding-top:18px; 
}



/* =========================
   CONTENIDO POST-JUEGO
========================= */

.page-memoria .section-after-hero{
  max-width:var(--content-w);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
  box-sizing:border-box;
}


/* CSS Documento — SOLO específico del juego de memoria */

/* ================================
   Juego — contenedor
================================ */


.contenedor-juego {
  width:100%; 

background: #5a3f4e;
  
  
  position:relative; overflow:hidden;
  padding:10px;
}

/* Ocultar SIEMPRE el header interno */
#cabeceraJuego { display:none !important; }

/* ================================
   Área de juego + piecera
================================ */
.area-juego { padding:15px; }
.tablero-contenedor { width:100%; height:auto; }
.tablero {
  display:grid; gap:10px; width:100%;
}
.tablero.nivel-facil   { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); aspect-ratio:1/1; }
.tablero.nivel-medio   { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); aspect-ratio:4/5; }
.tablero.nivel-dificil { grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(6,1fr); aspect-ratio:5/6; }

.piecera {
  background: var(--brand);
  color:#fff;
  padding:15px;
  text-align:center;
}
.temporizador { font-size:20px; font-weight:700; font-family: var(--font-display);}

/* ================================
   Cartas
================================ */
.carta {
  width:100%; max-width:100%;
  aspect-ratio:1/1;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .5s;
  cursor:pointer;
}
.carta.volteada { transform:rotateY(180deg); }
.carta.emparejada { pointer-events:none; }

.cara {
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:0px;
  backface-visibility:hidden;
}
.cara.trasera { background:#f0f0f0 url('https://www.juegosdememoriagratis.com/memoria/images/dorso.png') center/contain no-repeat; }
.cara.delantera { background-size:cover; background-position:center; transform:rotateY(180deg); }

.carta.emparejada .cara.delantera {
  visibility: visible !important;
  opacity: 0.3 !important; /* 30% alpha */
}
.carta.emparejada .cara.trasera {
  opacity: 0 !important;   /* oculta el dorso */
}

/* ================================
   Pantalla de inicio (carátula)
================================ */
.juego-shell { position: relative; border-radius:0px; overflow:hidden; }

.juego-shell > .pantalla-inicio {
    position: absolute;
    inset: 0;
  z-index: 10;
  background: #5a3f4e;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:clamp(12px,2.5vw,24px);
  padding:clamp(12px,3vw,28px);
}
.pantalla-inicio img {
  max-width:min(80%,380px); height:auto;
  border:4px solid #fff; border-radius:0px;
  box-shadow:2px 5px 10px rgba(0,0,0,.25);
    margin-bottom: 70px; /* deja espacio para el botón */
}
.juegoTitulo {
  color:#fff; text-transform:uppercase; font-weight:700;
  font-size:clamp(26px,3.2vw + 8px,36px);
  line-height:1.2; margin:0; text-align:center;
}
.juegoNivel {
  color:#fff; font-weight:700;
  font-size:clamp(18px,2.2vw + 6px,24px);
  line-height:1.25; margin:0; opacity:.95; text-align:center;
}
.juegoTitulo,
.juegoNivel {
  font-family: var(--font-display);
}
/* Botón JUGAR */
.boton{
 
    background:#cc7a00;
  color:#fff;
  border:none;
  border-radius:0px;
  font-size:1.6rem;
  line-height:1.25;
  padding:14px 28px;
  cursor:pointer;
  margin:15px;
  font-family:var(--font-display);
  font-weight:700;

  /* transición real */
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background-color .22s ease-out;
}

#btnJugar{
  transform: translateX(-50%);
}

/* Hover */
#btnJugar:hover{
  background:#ff9900;
  transform: translateX(-50%) translateY(-6px) rotate(-4deg) scale(1.08);
}

/* Click */
#btnJugar:active{
  transform: translateX(-50%) translateY(2px) rotate(2deg) scale(.96);
}


.oculto { display:none !important; }

/* ================================
   Mensaje final
================================ */
.mensaje-final {
  position:absolute; z-index:10000;
  inset:10px;
  background:rgba(0,0,0,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; border-radius:0px;
}
.mensaje-final h2 { font-size:clamp(26px,3vw + 8px,36px); margin-bottom:20px; }
.mensaje-final p { font-size:clamp(18px,2vw + 6px,24px); margin-bottom:30px; }

/* ================================
   Responsivo
================================ */
@media (max-width:540px) {
  .contenedor-juego { max-width:95vw; padding:8px; }
  .tablero { gap:6px; }
  .boton { font-size:1.4rem; padding:12px 24px; }
}
@media (max-width:500px) {
  .contenido-informativo { padding:20px 15px; }
  .contenido-informativo h1,
  .contenido-informativo h2 { font-size:1.5em; }
  .contenido-informativo p { font-size:1.35rem; }
}
@media (max-width:420px) {
  .contenedor-juego { max-width:100%; }
  .boton { font-size:1.2rem; padding:10px 20px; }
}
@media (max-width:640px){
  .page{ padding-left:16px; padding-right:16px; }
  .game-slot{ align-items: stretch; }
  .contenedor-juego{

  }
}


/* Estado cargando en el botón JUGAR */
.boton[disabled] {
  opacity: .6;
  cursor: not-allowed;
  position: relative;
}

.boton[disabled]::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid rgba(255,255,255,.4);
  border-top: 3px solid #fff;
  border-radius: 0%;
  width: 16px;
  height: 16px;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


#btnJugar{
  width:140px;
  height:140px;
  min-width:140px;
  min-height:140px;
  border-radius:50%;
  padding:0;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
      position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}




/* mantener el juego en 540 */
.page-memoria .contenedor-juego{
  max-width:540px !important;
   
}


/* Mostrar la piecera (timer) */
.juego-shell{
  overflow: visible !important;
}

.piecera{
  position: relative;
  z-index: 5;
}





.imagen-contenedor img{
  float:left;
  margin:0 20px 12px 0;
  max-width:320px;
  height:auto;
}

.texto-con-imagen::after{
  content:"";
  display:block;
  clear:both;
}



.page-memoria .contenedor-juego{
  max-width: var(--game-w) !important;
}


.page-memoria:has(.nivel-facil)   { --game-w: var(--game-facil); }
.page-memoria:has(.nivel-medio)   { --game-w: var(--game-medio); }
.page-memoria:has(.nivel-dificil) { --game-w: var(--game-dificil); }




/* Cartel victoria — editorial, smooth */
.win-banner{
  position:fixed;
  top:18%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  opacity:0;

  padding:24px 44px;
  background:var(--brand);
  color:#fff;

  font-family:var(--font-display);
  font-weight:700;
  font-size:36px;
  letter-spacing:.06em;
  text-transform:uppercase;

  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
  z-index:500;
}

.win-banner.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.confetti{
  position:fixed;
  top:0;
  pointer-events:none;
  z-index:999;
  animation:confetti-fall linear forwards;
}

@keyframes confetti-fall{
  to{
    transform:translateY(100vh) rotate(360deg);
    opacity:0;
  }
}







/* ===========================================================================================================
   MOVIL MOVIL MOVIL
============================================================================================================== */
@media (max-width:640px){

  /* 1) main: padding mobile consistente */
  .page-memoria main{
    padding: calc(var(--header-h) + 24px) 0 0;
      
  }

  /* 2) layout: que no meta padding doble */
  .page-memoria .page-layout{
    padding:0;
    background:#ece8e3;
       padding-top:40px;
      padding-bottom:20px;
  }

  /* 3) una columna: juego arriba, aside abajo */
  .page-memoria .page-main{
    display:block;
    padding:0;
     
  }

  /* 4) juego a full */
  .page-memoria .game-slot,
  .page-memoria .contenedor-juego{
    width:100%;
    max-width:100% !important;
     
  }

  /* 5) aside abajo, full width */
  .page-memoria .page-aside{
    width:100%;
    max-width:none;
    margin-top:16px;
    position:static;
  }

  /* 6) tarjeta del aside a full */
  .page-memoria .aside-card{
    width:100%;
  }

    
  .page-memoria main > .inner{
    padding:0 !important;
   
  }
    

  #btnJugar{
    width:120px;
    height:120px;
    min-width:120px;
    min-height:120px;

    left:70%;
    transform: translateX(-50%) translateX(12px);
  }
    
    
  /* causa real del scroll */
  body{ overflow-x:hidden; }

  .contenedor-juego{ box-sizing:border-box; }

  #btnJugar{
    left:50%;
    transform: translateX(-50%) translateX(20px);
  }

  .imagen-contenedor img{
    float:none;
    margin:0 auto 16px;
    display:block;
    max-width:100%;
  }
    
    
}