@charset "UTF-8";
/* CSS Document */

:root {
  --brand:#6b4d5e;
  --bg:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --hair:#e5e7eb;
  --a1:#df8c00;
  --a2:#fab553;
  --a3:#e86a00;
  --a4:#faa972;
  --a5:#9d4a00;

  --font-display:'Fredoka One', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --h:56px;
  --max:980px;
}

/* Reset / base */
* { box-sizing:border-box }
html,body {
  margin:0;
  height:auto;       /* ⬅ deja de forzar altura */
}

body {
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 var(--font-display);
  display:block;     /* ⬅ no usamos flex layout global */
  min-height:auto;   /* ⬅ no estires hasta el viewport */
}
img { max-width:100%; display:block }
a { color:var(--brand) }
a:hover { text-decoration:underline }

/* Reutilizable .inner */
.inner {
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding:0 16px;
}

/* ===== Layout centrado ===== */
.site { flex:1 }
.site.layout--center {
  display:grid;
  grid-template-columns:1fr minmax(0,980px) 1fr;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
}

/* ===== Header fijo ===== */
.header {
  position:fixed;
  inset:0 0 auto 0;
  height:var(--h);
  background:var(--brand);
  color:#fff;
  z-index:100;
  display:flex;
  align-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.header .brand a {
  color:#fff;
  text-decoration:none;
  font-family:var(--font-display);
  font-size:20px;
}

/* ===== Main ===== */
main {
  grid-column:2;
  grid-row:2;
  margin:0 auto;
  padding:0 0 24px;
}
.breadcrumbs, h1, h2, h3 { scroll-margin-top:calc(var(--h) + 8px) }

/* ===== Títulos y texto ===== */
h1,h2,h3 {
  font-family:var(--font-display);
  line-height:1.2;
  margin:6px 0;
}
h1 { font-size:clamp(18px,6vw,32px); color:var(--ink) }
h2 { font-size:clamp(18px,1.8vw,24px) }
h3 { font-size:clamp(16px,1.4vw,20px) }
p { margin:0 0 12px }
.lead,.desc {
  color:var(--muted);
  font-size:clamp(14px,1vw,15px);
  margin:0 0 16px;
}

/* h1 con barra de acento */
.h1--accentbar {
  position:relative;
  padding-left:10px;
}
.h1--accentbar::before {
  content:"";
  position:absolute;
  left:0; top:.1em; bottom:.1em;
  width:6px;
  border-radius:4px;
  background:var(--brand);
}

/* ===== Sección del juego ===== */
.game-wrap { display:grid; gap:12px }
.game-frame {
  border:4px solid var(--a2);
  border-radius:12px;
  padding:8px;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* Tema para widget (solo variables) */
#sudoku-es {
  --se-brand: var(--brand);
  --se-accent: var(--brand);
  --se-focus: var(--brand);
  --se-bg:#ffffff;
  --se-text:#1f2937;
  --se-muted:#6b7280;
  --se-hairline:#d1d5db;
  --se-thick:#4b5563;
  --se-hl: color-mix(in srgb, var(--brand) 12%, white);
  --se-hl-same: color-mix(in srgb, var(--brand) 20%, white);
}

/* ===== Footer ===== */
.footer {
  grid-column:1 / -1;
  grid-row:3;
  background:var(--brand);
  color:#fff;
  font-family:var(--font-display);
  padding:16px 0;
}
.footer a { color:#fff; text-decoration:underline }
.footer .inner { display:flex; gap:16px; flex-wrap:wrap }

/* ===== Breadcrumbs (unificado para todo el sitio) ===== */
.breadcrumbs-wrap {
  margin-top: calc(var(--h) + 16px); /* separa del header fijo */
  background: var(--bg);
  margin-bottom: 0;
}

.breadcrumbs-wrap .inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 1px;
  line-height: 1.35;
}

.breadcrumbs .crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs .crumb--home::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.breadcrumbs .sep { color: #9ca3af; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { text-decoration: underline; outline: 0; }
.breadcrumbs .crumb--nivel { color: var(--brand); font-weight: 700; }


/* ===== Utilidades ===== */
.block { display:block }
.center { text-align:center }

/* Motion reduce */
@media (prefers-reduced-motion:reduce){
  .game-frame { box-shadow:none }
}


/* ===== Página de niveles de Sudoku ===== =========================================================================================================*/


/* ===== Página de niveles de Sudoku — coherente con Memoria Visual ===== */
.page-sudokus main {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--h) + 16px) 16px 20px; /* 👈 igual que en .page-memoria */
}

/* ===== Grid niveles (2 → 3 columnas fijas) ===== */
.page-sudokus .levels {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr); /* base: móvil/tablet pequeña */
  margin: 0 auto;
}

@media (min-width: 720px) {
  .page-sudokus .levels {
    grid-template-columns: repeat(3, 1fr); /* siempre 3 columnas en desktop */
    max-width: 820px;
  }
}


/* ===== Cards ===== */
.level-card {
  position: relative;
  border: 4px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  will-change: transform;
  aspect-ratio: 1 / 1; /* 👈 cuadrado perfecto */
}
.level-card .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

/* Hover / Focus igual que en memoria */
.level-card:hover,
.level-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12), 0 0 0 6px rgba(var(--accent-rgb), .28);
}
.level-card:hover .thumb {
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.02);
}
.level-card:active {
  transform: translateY(0) scale(.99);
}
.level-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #fff,
              0 0 0 7px rgba(var(--accent-rgb), .60),
              0 10px 24px rgba(0, 0, 0, .12);
}

/* Badge centrado */
.level-card .badge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}

/* ===== Sudokus — reducción visual sólo en desktop ===== */
@media (min-width: 960px) {
  .page-sudokus .levels {
    max-width: 720px; /* 👈 antes 820px — reduce el conjunto un ~15 % */
    gap: 24px;        /* un poco más de aire entre tarjetas */
  }
  .level-card {
    transform: scale(0.94); /* 👈 cada tarjeta un 6 % más pequeña */
    transform-origin: center;
  }
  .level-card:hover {
    transform: scale(0.97) translateY(-2px); /* mantiene efecto hover proporcional */
  }
}

/* ===== Card cuadrada ===== */
.level-card {
  position:relative;
  border:4px solid var(--accent);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  will-change:transform;
  aspect-ratio:1/1;
}
.level-card .thumb {
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .25s ease, filter .25s ease;
}
.level-card:hover,
.level-card:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12), 0 0 0 6px rgba(var(--accent-rgb), .28);
}
.level-card:hover .thumb {
  transform:scale(1.03);
  filter:saturate(1.02) contrast(1.02);
}
.level-card:active { transform:translateY(0) scale(.99) }
.level-card:focus-visible {
  outline:0;
  box-shadow:0 0 0 3px #fff,
             0 0 0 7px rgba(var(--accent-rgb), .60),
             0 10px 24px rgba(0,0,0,.12);
}

/* Badge centrado */
.level-card .badge {
  position:absolute; z-index:2; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; white-space:nowrap;
  font-family:var(--font-display);
  font-weight:700; letter-spacing:.2px; color:#fff;
  font-size:18px; padding:10px 14px; border-radius:999px;
  background:rgba(var(--accent-rgb), .95); 
  text-shadow:0 1px 2px rgba(0,0,0,.30),
              0 0 2px rgba(0,0,0,.30),
              0 0 4px rgba(0,0,0,.30);
}
@media (min-width:1200px){
  .level-card .badge { font-size:19px; padding:11px 16px }
}

/* Colores por nivel */
.level--facil   { --accent:var(--a2); --accent-rgb:250,181,83; }
.level--mediano { --accent:var(--a1); --accent-rgb:223,140,0; }
.level--dificil { --accent:var(--a3); --accent-rgb:232,106,0; }
.level--experto { --accent:var(--a4); --accent-rgb:195,90,0; }
.level--maestro { --accent:var(--a5); --accent-rgb:157,74,0; }
.level--extremo { --accent:var(--brand); --accent-rgb:107,77,94; }

/* Motion reduce */
@media (prefers-reduced-motion:reduce){
  .level-card, .level-card .thumb { transition:none }
  .level-card:hover,
  .level-card:focus-visible {
    transform:none;
    box-shadow:0 0 0 6px rgba(var(--accent-rgb), .32)
  }
  .level-card:hover .thumb { transform:none; filter:none }
}

/* Limita ancho en pantallas intermedias (3 columnas) */
.levels-wrap { margin-inline:auto }
@media (min-width:720px) and (max-width:1199px){
  .levels-wrap { max-width:780px }
}










/* ===== Página de niveles de Sopa de Letras======================================================================================================================== */
.page-sopa main {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--h) + 16px) 16px 20px; /* mismo offset que sudoku */
}


/* ===== Grid de niveles — Sopa de Letras ===== */
/* Siempre 3 columnas mientras no sea móvil */
.page-sopa .levels {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 0 auto;
}

/* Las tarjetas mantienen proporción cuadrada */
.page-sopa .level-card {
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* Móvil: 1 columna */
@media (max-width: 640px) {
  .page-sopa .levels {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}


/* ===== Cards — Sopa de Letras ===== */
.page-sopa .level-card {
  position: relative;
  border: 4px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  will-change: transform;
  aspect-ratio: 1 / 1; /* cuadrado perfecto */
}

.page-sopa .level-card .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

/* Hover / focus idéntico al de Sudokus */
.page-sopa .level-card:hover,
.page-sopa .level-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12),
              0 0 0 6px rgba(var(--accent-rgb), .28);
}
.page-sopa .level-card:hover .thumb {
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.02);
}
.page-sopa .level-card:active {
  transform: translateY(0) scale(.99);
}
.page-sopa .level-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #fff,
              0 0 0 7px rgba(var(--accent-rgb), .60),
              0 10px 24px rgba(0, 0, 0, .12);
}

/* Badge centrado */
.page-sopa .level-card .badge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}

/* ===== Colores por nivel — Sopa de Letras (naranja → violeta) ===== */
.page-sopa .level--facil   { --accent: var(--a2); --accent-rgb: 250,181,83; }  /* Naranja claro / dorado */
.page-sopa .level--medio   { --accent: var(--a3); --accent-rgb: 232,106,0; }   /* Naranja intenso */
.page-sopa .level--dificil { --accent: var(--brand); --accent-rgb: 107,77,94; }/* Violeta brand */


/* ===== Breadcrumbs + título — Sopa de Letras ===== */
.page-sopa .breadcrumbs-wrap {
  margin-top: calc(var(--h) + 10px); /* igual que en Sudokus */
  margin-bottom: 0;
  background: var(--bg);
}

.page-sopa .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 4px; /* menos aire debajo */
  line-height: 1.35;
}

.page-sopa h1,
.page-sopa .h1--accentbar {
  margin: 6px 0 16px;  /* mantiene mismo aire que Sudokus */
  font-family: var(--font-display);
  line-height: 1.2;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--ink);
  padding-left: 10px;  /* barra lateral */
  position: relative;
}

.page-sopa .h1--accentbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  border-radius: 4px;
  background: var(--brand);
}

/* ===== Responsive — Sopa de Letras ===== */
@media (max-width: 700px) {
  .page-sopa .levels {
    grid-template-columns: 1fr;  /* una tarjeta por fila */
    max-width: 380px;            /* evita que se estiren demasiado */
    gap: 16px;
  }

  .page-sopa .level-card .badge {
    font-size: 28px;          /* antes 18px */
    padding: 12px 20px;       /* más aire */
    letter-spacing: 0.3px;    /* mejora legibilidad */
  }
}



@media (min-width: 960px) {
  .page-sopa .levels {
    grid-template-columns: repeat(3, 1fr);  /* 3 columnas en desktop */
    max-width: 720px;
    gap: 24px;
  }
  .page-sopa .level-card {
    transform: scale(0.94);          /* mismo efecto de reducción que Sudokus */
    transform-origin: center;
  }
  .page-sopa .level-card:hover {
    transform: scale(0.97) translateY(-2px);
  }
}




/* ===== SUBMENU de Memoria Visual ======================================================================================================================== */
.page-memoria main {
  max-width:var(--max);
  margin:0 auto;
  padding:calc(var(--h) + 16px) 16px 20px;
}


/* ===== Submenú Memoria: columnas ===== */
.columns {
  display:grid;
  gap:28px;
  grid-template-columns:repeat(3,1fr);
}
.col {
  min-width:0;
  padding:6px 6px 2px;
  border-radius:12px;
  background:#fff;
}
.col h2 {
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:18px;
  color:var(--accent-text, currentColor);
}

/* Colores por nivel */
.col--faciles     { --accent:var(--a2); --accent-rgb:250,181,83; --accent-text:#9d4a00; }
.col--intermedios { --accent:var(--a1); --accent-rgb:223,140,0; --accent-text:#9d4a00; }
.col--dificiles   { --accent:var(--a3); --accent-rgb:232,106,0; --accent-text:#a44a00; }

/* Grillas por columna */
.grid {
  display:grid;
  gap:8px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px){ .grid { grid-template-columns:repeat(3,1fr) } }

/* Cards (mismo estilo que level-card) */
.card {
  display: block;
  position: relative;
  background: #fff;
  border: 4px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  will-change: transform;

  /* 👇 asegura que cada card sea un cuadrado perfecto en cualquier breakpoint */
  aspect-ratio: 1 / 1;
}

.card .thumb {
  width: 100%;
  height: 100%;              /* 👈 antes no estaba: fuerza a ocupar toda la altura */
  object-fit: cover;         /* 👈 llena el cuadrado sin deformar */
  object-position: center;   /* centra la imagen */
  display: block;
  transition: transform .25s ease, filter .25s ease;
}
.card:hover,
.card:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12), 0 0 0 6px rgba(var(--accent-rgb), .32);
}
.card:hover .thumb { transform:scale(1.03); filter:saturate(1.02) contrast(1.02) }
.card:active {
  transform:translateY(0) scale(.99);
  box-shadow:0 6px 14px rgba(0,0,0,.12), 0 0 0 4px rgba(var(--accent-rgb), .28);
}
.card:focus-visible {
  outline:0;
  box-shadow:0 0 0 3px #fff,
             0 0 0 7px rgba(var(--accent-rgb), .60),
             0 10px 24px rgba(0,0,0,.12);
}

/* Ads dentro de grilla */
.ad-slot {
  border:1px dashed var(--hair);
  border-radius:10px;
  padding:16px;
  text-align:center;
  color:var(--muted);
  background:#fff;
}
.ad-break {
  max-width:var(--max);
  margin:24px auto;
  padding:8px 0;
}
.ad-break .adsbygoogle { display:block; min-height:120px }

/* Responsive ajustes */
@media (max-width:640px){
  .columns { gap:16px }
  .desc { font-size:14px }
}


/* ================================================================================================================================================================
   JUEGO MEMORIA INDIVIDUAL Variables y tipografía base
================================ */
:root {
  --brand:#6b4d5e;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --hair:#e5e7eb;
  --h:56px; --f:56px; --max:980px;
  --font-display:'Fredoka One', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--font-display);
}
img { max-width:100%; display:block; }
a { color: var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ================================
   Header
================================ */
.header {
  position: fixed; inset: 0 0 auto 0; height: var(--h);
  background: var(--brand); color:#fff; z-index: 11000;
  display:flex; align-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.header .inner {
  max-width: var(--max); width:100%; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:12px;
}
.brand a {
  color:#fff; text-decoration:none;
  font-family:var(--font-display); font-size:20px;
}

/* ================================
   Contenedor de página
================================ */
.page, .site.layout--center main {
  max-width: var(--max); width:100%; margin:0 auto;
   padding-top: 1px; /* por ejemplo, solo un poco de aire */
  padding-bottom: 24px; /* podés mantener el inferior */
  flex: 1 0 auto;
}

/* ================================
   Breadcrumbs
================================ */
.breadcrumbs {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display);
  font-size:14px; color:var(--muted);
  margin:0 0 10px;
  line-height:1.35;
}
.breadcrumbs a, .breadcrumbs span {
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  color:inherit; text-decoration:none;
}
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { text-decoration:underline; outline:0; }
.breadcrumbs .sep { color:#9ca3af; }
.breadcrumbs .crumb--home { color: var(--muted); font-weight:700; }
.breadcrumbs .crumb--memoria { color: var(--brand); font-weight:700; }

/* ================================
   Contenido informativo
================================ */
.contenido-informativo {
  width:100%; max-width:720px;
  background:#fff; color:var(--brand);
  border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,.05);
  padding:30px 25px;
  line-height:1.8; margin-bottom:80px;
  font-size:1.25rem;
}
.contenido-informativo h1,
.contenido-informativo h2 {
  text-align:center; color:var(--brand); margin-bottom:20px;
  font-family:var(--font-display);
}
.contenido-informativo p { margin-bottom:15px; }
.contenido-informativo a { color:#cc5500; text-decoration:underline; font-weight:700; }
.contenido-informativo a:hover { text-decoration:none; }

.imagen-contenedor {
  display:flex; justify-content:center; margin:30px 0;
}
.imagen-contenedor img {
  max-width:100%; height:auto;
  border-radius:10px; box-shadow:0 5px 10px rgba(0,0,0,.08);
}

/* ================================
   Footer
================================ */
.footer {
  flex:0 0 auto;
  background:var(--brand); color:#fff;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.footer .inner {
  max-width:var(--max); width:100%; margin:0 auto; padding:0 16px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  min-height: var(--f);
}
.footer a { color:#fff; text-decoration:underline; font-family:var(--font-display); }

/* ================================
   Fondos específicos de memoria
================================ */
.page-memoria html {
  background: linear-gradient(to bottom, #f5f5f7 0%, #ffffff 100%) fixed;
  background-repeat:no-repeat; background-size:100% 100%;
}
.page-memoria body { background:transparent; }

/* ================================
   Responsivo
================================ */
@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; }
}

/* === Ajuste de espaciado diferenciado y responsive === */

/* Sudoku — Menos aire entre breadcrumbs y el juego */
.site.layout--center main {
  padding-top: 16px !important; /* ajustá a gusto (8–20px) */
}

/* Memoria — Mantiene el offset correcto bajo el header */
.page-memoria .page {
  padding-top: 0 !important;
}

/* Responsive: en móviles, reducir un poco el aire */
@media (max-width: 640px) {
  .site.layout--center main {
    padding-top: 12px !important;
  }
  .page-memoria .page {
    padding-top: 0 !important;
  }
}


/* === Corrección: centrar correctamente los breadcrumbs en todas las secciones === */
.breadcrumbs-wrap {
  grid-column: 2; /* vuelve a ocupar la columna central del layout de 3 columnas */
}

.breadcrumbs-wrap .inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px; /* asegura alineación con el logo del header */
}

/* ================================
   Breadcrumbs legibles en móvil
================================ */
@media (max-width:500px){
  .breadcrumbs {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.4;
  }
  .breadcrumbs .sep {
    margin: 0 2px;
  }
}

@media (min-width:501px) and (max-width:900px){
  .breadcrumbs {
    font-size: clamp(14px, 1.6vw, 16px);
  }
}



/* =========================================================================================================
   Breadcrumbs universales — visibles bajo header fijo sin alterar colores originales
========================================================================================================= */

/* Corrige la posición de los breadcrumbs cuando no hay .breadcrumbs-wrap */
main .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  margin-top: calc(var(--h) + 10px); /* separa del header fijo */
  margin-bottom: 8px;
  line-height: 1.35;
  position: relative;
  z-index: 5; /* garantiza que queden sobre fondos o sombras */
}

/* Asegura buena lectura en móviles */
@media (max-width:500px){
  main .breadcrumbs {
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.4;
    margin-top: calc(var(--h) + 6px);
  }
}

@media (min-width:501px) and (max-width:900px){
  main .breadcrumbs {
    font-size: clamp(14px, 1.6vw, 16px);
  }
}


/* ===== Margen de 20 px ===== */
.margen20 {
  margin-top: 20px;
}




/* ===== HOME ===== */
.page-home main {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--h) + 24px) 16px 40px;
  text-align: center;
}

/* Grid principal */
.home-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}


/* Slogan */
.home-slogan {
  font-size: clamp(18px, 3vw, 28px);
  color: var(--ink);
  margin: 32px 0 8px;
}

/* Descripción */
.home-desc {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(14px, 1.2vw, 16px);
}



@media (min-width: 720px) {
  .home-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

/* Cada bloque */
.home-item h1 {
  font-size: clamp(20px, 2.2vw, 28px);
  margin-bottom: 10px;
  text-align: left;
}


/* ===== HOME ajustes finales =============================================================================================================== */
/* ===================================================================
   HOME — estructura optimizada sin alterar estilo visual
=================================================================== */

.page-home main {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--h) + 24px) 16px 40px;
  text-align: center;
}

/* ======================
   GRID PRINCIPAL
====================== */
.home-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: start;
  margin-bottom: 32px;
}

/* Desktop — tamaño y separación que elegiste */
@media (min-width: 960px) {
  .home-grid {
    grid-template-columns: repeat(3, minmax(0, 230px));
    gap: 70px;
  }
}

/* Tablets medianas: mantiene 3 columnas */
@media (max-width: 959px) and (min-width: 641px) {
  .home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* En móvil: 1 sola columna centrada */
@media (max-width: 640px) {
  .home-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
    margin-inline: auto;
  }
}

/* ======================
   TÍTULOS SOBRE IMÁGENES
====================== */
.home-item-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 10px;
  text-align: left;
  color: var(--brand);
  padding-left: 10px;
  white-space: nowrap;        /* ❗ evita que se partan en dos líneas */
  line-height: 1.1;
}

/* Barrita violeta brand */
.home-item-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  border-radius: 4px;
  background: var(--brand);
}




/* ======================
   TARJETAS (IMÁGENES)
====================== */

/* Colores diferenciados */
.home-item--memoria .home-card { --accent: var(--a2); }   /* Dorado/naranja claro */
.home-item--sudoku  .home-card { --accent: var(--brand); }/* Violeta brand */
.home-item--sopa    .home-card { --accent: var(--a1); }   /* Naranja intenso */

.home-card {
  position: relative;
  display: block;
  border: 4px solid var(--accent, var(--a2));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-card .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}

/* Hover (zoom completo, borde incluido) */
.home-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--accent) 80%, black 10%);
}
.home-card:hover .thumb {
  transform: scale(1.02);
  filter: saturate(1.05);
}

/* Memoria visual: sin borde exterior, sin recorte */
.home-item--memoria .home-card {
  border: none;
  box-shadow: none;
  overflow: visible;
}
.home-item--memoria .home-card .thumb {
  border-radius: 4px; /* evita que la imagen se "coma" los bordes */
}
.home-item--memoria .home-card:hover {
  transform: scale(1.05);
  box-shadow: none;
}

/* ======================
   TEXTOS SECUNDARIOS
====================== */

/* Slogan */
.home-slogan {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--brand);
  font-weight: 700;
  line-height: 1.1;
  margin: 60px 0 32px;
  text-align: left;
}

/* Contenedor textual alineado con el logo */
.page-home .home-hero {
  text-align: left;
  /* padding-left: 16px;  <-- quitar */
  padding-inline: 16px;     /* 👈 igual margen a izquierda y derecha */
}

/* Subtítulos y párrafos debajo del slogan */
.page-home h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-top: 32px;
  margin-bottom: 8px;
  color: var(--ink);
}

.page-home .home-desc {
  text-align: left;
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

/* ======================
   LEGIBILIDAD EN MÓVIL
====================== */
@media (max-width: 640px) {

  .home-slogan {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.2;
    margin: 48px 0 24px;
  }

.page-home main {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden; /* evita cualquier scroll lateral accidental */
  }

  .home-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;           /* centra perfectamente */
    padding: 0;               /* elimina empuje lateral */
    box-sizing: border-box;   /* asegura cálculo exacto del ancho */
  }
    
  .page-home h3 {
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.3;
    margin: 28px 0 8px;
  }

  .page-home .home-desc {
    font-size: clamp(17px, 4.6vw, 20px);
    line-height: 1.65;
    text-align: left;
    padding-right: 16px;
  }


      /* la tarjeta deja de forzar forma cuadrada */
  .home-card {
    aspect-ratio: auto;
    border-radius: 12px;
    overflow: hidden;
  }

  /* la imagen toma su altura natural (ej: 640x200) */
  .home-card .thumb {
    width: 100%;
    height: auto;
    object-fit: cover;   /* por si el banner no es exactamente proporcional al contenedor */
    display: block;
  }

  /* importante: anulamos el override global que quedó fuera del media query al final del CSS */
  .home-card .thumb {
    aspect-ratio: auto;
  }
    
    .home-card:hover,
  .home-card:hover .thumb {
    transform: none !important;
    filter: none !important;
  }

      .home-item-title {
 /*   font-size: 40px !important;*/
      font-size: clamp(32px, 6vw, 40px);
    line-height: 1.1;
  }
    
    
      .header .brand a {
    font-size: 26px;       /* 👈 aumenta el tamaño del texto */
    text-align: center;    /* centra el texto */
    display: block;        /* permite centrarlo correctamente */
    width: 100%;           /* ocupa todo el ancho del header */
  }

  .header .inner {
    justify-content: center; /* centra el contenido horizontalmente */
  }
    
    
    

    
}


/* === CONTENEDOR SEGURO PARA ADSENSE === */
.adsense-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px auto;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.adsense-wrap iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* evita el espacio cuando no hay anuncio */
.adsense-wrap:empty,
.adsense-wrap:not(:has(ins iframe)) {
  display: none;
}



/* Forzar que el div con rol de heading se vea igual que un h1 */
.h1--accentbar[role="heading"] {
  font-size: 2em; /* o el valor que use tu h1 original */
  font-weight: bold;
  line-height: 1.1;
  margin: 0.5em 0;
}