/* KIVA – Ajustes móviles (≤600px)
   Versión corregida: la sección de INICIO coloca la imagen ARRIBA
   y los botones ABAJO siempre en una sola columna.
*/

:root{
  --tap: 14px;
  --pad: 14px;
}

html, body {
  overscroll-behavior-y: none;
}
body {
  font-size: 16px;
  line-height: 1.25;
}

/* ======== INICIO – Diseño móvil ======== */

/* Fuerza que TODO el layout sea UNA sola columna */
.inicio-layout{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ---- TARJETA DERECHA (Imagen) ARRIBA ---- */
.inicio-right{
  order: -1 !important;
  width: 100%;
  padding: var(--pad);
  border-radius: 18px;
}

/* Imagen ocupa todo el ancho y se adapta */
.inicio-image-shell{
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
}
.inicio-image-shell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto bajo la imagen */
.inicio-caption{
  margin-top: 10px;
}
.inicio-caption-title{
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.inicio-caption-text{
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---- TARJETA IZQUIERDA (Botones) ABAJO ---- */
.inicio-left{
  order: 2 !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botones Aprende / Explora */
.inicio-main-copy .cta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center; /* 💛 centrar los botones */
}


/* Tarjetas de apoyo + foro: ancho completo */
.inicio-block{
  padding: var(--pad);
  border-radius: 16px;
}

/* Botones de líneas de apoyo en columna */
.support-buttons{
  flex-direction: column;
  width: 100%;
}
.home-pill{
  width: 100%;
  text-align: center;
}

/* Foro: botón centrado y ancho completo */
.inicio-block--foro{
  text-align: center;
}
.inicio-forum-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========================================= */
/* === RESTO DEL CSS MÓVIL === */
/* ========================================= */

/* Fondo de doodles más suave */
#bg { opacity: .04; }

/* Navegación móvil */
.hamburger{ width:44px;height:44px;border-radius:12px }
.topnav{ 
  display:none; 
  position:fixed; inset:auto 0 0 0; 
  background:var(--paper); 
  border-top:1px solid var(--line);
  padding:8px;
  box-shadow:0 -10px 24px rgba(0,0,0,.08);
}
.topnav.open{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.topnav-item{
  padding:12px; border-radius:14px; justify-content:center;
  font-weight:900; background:#fff;
}

/* Marca */
.brand-a{ font-size:20px }
.brand-b{ font-size:14px }

/* Contenedor general */
.viewport{ 
  padding: var(--pad); 
  min-height: calc(100dvh - 56px);
}

/* Cards, juegos, blog, foros en una columna */
.blog-grid, .forum-list, .about-grid{
  grid-template-columns: 1fr !important;
  gap:12px;
}
.post, .about-card, .blog-card{
  padding:14px;
}

/* Accesibilidad táctil */
.reset-btn.icon-only{ width:44px;height:44px; border-radius:12px }


/* ===== Título especial para móvil ===== */

/* Logo + título alineados */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ocultar título de escritorio en móvil */
.title-desktop {
  display: none !important;
}

/* Mostrar título móvil */
.title-multi-mobile {
  display: flex !important;
  flex-direction: column;
  line-height: 1.1;
}

/* Ajuste de tamaño */
.title-multi-mobile b {
  font-size: 1.25rem;
}

.title-multi .k,
.title-multi-mobile .k{
  background:#FFD88A;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.title-multi .i,
.title-multi-mobile .i{
  background:#FFA8A8;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.title-multi .v,
.title-multi-mobile .v{
  background:#B8A0FF;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.title-multi .a,
.title-multi-mobile .a{
  background:#9BC5FF;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.title-multi .voz,
.title-multi-mobile .voz{
  color:#A8B8FF;
}

.title-multi .y,
.title-multi-mobile .y{
  color:#A8B8FF;
}

.title-multi .apoyo,
.title-multi-mobile .apoyo{
  color:#A8B8FF;
}

.title-multi .Kids,
.title-multi-mobile .Kids{
  color:#A8B8FF;
}

.title-multi .Integrity,
.title-multi-mobile .Integrity{
  color:#A8B8FF;
}

.title-multi .coma,
.title-multi-mobile .coma{
  color:#A8B8FF;
}

.kiva-word {
  display: inline-flex;
  gap: 2px;
}