/* ============================================================
   base.css — Identidad ReGuilete y variables de color
   ------------------------------------------------------------
   TODOS los colores del sitio salen de estas variables.
   El motor de temas (tema.js) las reemplaza cuando se activa
   un tema de temporada (Día de Muertos, Navidad, etc.).
   No escribas colores sueltos en otros archivos.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* --- Colores oficiales de la marca --- */
  --rosa:     #FF007F;
  --azul:     #004F91;
  --celeste:  #00CFFF;
  --verde:    #3DBE36;
  --amarillo: #FFEB00;

  /* --- Colores por función (los que cambia el editor de temas) --- */
  --color-fondo:        #FFFFFF;
  --color-fondo-suave:  #F4FAFF;
  --color-superficie:   #FFFFFF;
  --color-titulos:      var(--azul);
  --color-texto:        #1F2A37;
  --color-texto-suave:  #5B6675;
  --color-boton:        var(--rosa);
  --color-boton-texto:  #FFFFFF;
  --color-acento:       var(--celeste);
  --color-exito:        var(--verde);
  --color-aviso:        var(--amarillo);
  --color-error:        #D92D20;
  --color-borde:        #E3EAF2;

  /* --- Tipografías --- */
  --fuente-titulos: 'Fredoka One', 'Nunito', system-ui, sans-serif;
  --fuente-texto:   'Nunito', system-ui, -apple-system, sans-serif;

  /* --- Medidas --- */
  --radio:        18px;
  --radio-boton:  999px;
  --toque-minimo: 44px;   /* tamaño mínimo para tocar con el dedo */
  --sombra:       0 6px 20px rgba(0, 40, 80, 0.10);
  --ancho-max:    1100px;
}

/* --- Reinicio básico --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
}
img { max-width: 100%; display: block; }
/* Lo que tenga el atributo hidden SIEMPRE se esconde (aunque tenga otro display) */
[hidden] { display: none !important; }
h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  color: var(--color-titulos);
  line-height: 1.2;
  margin: 0 0 .5em;
}
a { color: var(--color-titulos); }

/* --- Contenedor centrado (mobile-first) --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Botón principal redondeado y grande --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--toque-minimo);
  padding: .7em 1.4em;
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--color-boton);
  color: var(--color-boton-texto);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.boton:active { transform: scale(.97); }

/* --- Pantalla provisional "En construcción" (se quita al construir cada página) --- */
.en-construccion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px 16px;
  background: var(--color-fondo-suave);
}
.en-construccion img { width: 220px; margin: 0 auto 16px; }
.en-construccion p { color: var(--color-texto-suave); }