/* ==========================================================================
   TEMA · colores, tipografías y formas de toda la web
   --------------------------------------------------------------------------
   Cambia solo los valores (lo que va después de los dos puntos).
   Formatos de color válidos: #4a2412 · rgb(74 36 18) · rgba(0,0,0,.5)
   Guarda y recarga la página para ver el cambio.
   ========================================================================== */

:root {

  /* ---------- Tipografías ----------
     Para usar otra fuente: copia sus archivos .woff2 en /assets/fonts/,
     añade su @font-face al final de este archivo y cambia el nombre aquí. */
  --fuente-general:      'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-manuscrita:   'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  /* ---------- Página ---------- */
  --pagina-fondo:              #fbf4e6;
  --pagina-texto:              #2b1a10;
  --pagina-texto-suave:        #7d6352;   /* subtítulos, ayudas, pie */
  --pagina-enlaces:            #4a2412;
  --pagina-ancho-maximo:       980px;

  /* ---------- Cabecera (logo) ---------- */
  --cabecera-fondo:            transparent;
  --cabecera-texto:            #4a2412;
  --cabecera-logo-alto:        40px;

  /* ---------- Títulos ---------- */
  --titulo-color:              #4a2412;
  --titulo-destacado-color:    #c9352a;   /* la parte en letra manuscrita del título principal */
  --antetitulo-color:          #6b3a1f;   /* "Una idea de los niños…" */

  /* ---------- Pasos de la pantalla 1 ---------- */
  --paso-numero-fondo:         #ffc72c;
  --paso-numero-texto:         #4a2412;
  --paso-linea:                #ead9bd;

  /* ---------- Botón principal (Empezar, Ver mi postal, Enviar) ---------- */
  --boton-principal-fondo:     #4a2412;
  --boton-principal-texto:     #ffffff;
  --boton-principal-hover:     #6b3a1f;

  /* ---------- Botón secundario (Atrás, Cancelar, Copiar) ---------- */
  --boton-secundario-fondo:    transparent;
  --boton-secundario-texto:    #4a2412;
  --boton-secundario-borde:    #4a2412;

  /* ---------- Botones de envío (pantalla 3) ---------- */
  --boton-email-fondo:         #4a2412;
  --boton-email-texto:         #ffffff;
  --boton-enlace-fondo:        #ffc72c;
  --boton-enlace-texto:        #4a2412;
  --boton-whatsapp-fondo:      #25d366;
  --boton-whatsapp-texto:      #08331a;

  /* ---------- Forma de los botones ---------- */
  --boton-radio:               999px;     /* 999px = píldora · 8px = esquinas suaves · 0 = rectos */

  /* ---------- Formulario ---------- */
  --campo-fondo:               #ffffff;
  --campo-texto:               #2b1a10;
  --campo-borde:               #ead9bd;
  --campo-foco:                #ffc72c;   /* contorno al seleccionar un campo */
  --foto-zona-fondo:           #fffdf7;
  --foto-zona-borde:           #d9c19a;
  --foto-zona-icono:           #6b3a1f;
  --error-texto:               #c9352a;

  /* ---------- Postal ---------- */
  --postal-fondo:              #fffdf7;
  --postal-texto:              #2b1a10;
  --postal-para:               #6b3a1f;
  --postal-firma:              #4a2412;
  --postal-linea:              #dcc7a3;   /* línea discontinua separadora */
  --postal-marco-foto:         #ffffff;
  --postal-sello-fondo:        #ffc72c;
  --postal-sello-icono:        #c9352a;
  --postal-sombra:             rgba(74, 36, 18, .45);
  --postal-radio:              6px;
  --postal-logo-alto:          44px;
  --postal-tamano-texto:       2rem;      /* tamaño del mensaje en la postal */
  --postal-tamano-firma:       2.1rem;

  /* ---------- Avisos (mensajes flotantes) ---------- */
  --aviso-fondo:               #4a2412;
  --aviso-texto:               #ffffff;
  --aviso-error-fondo:         #c9352a;

  /* ---------- Ventana del email ---------- */
  --ventana-fondo:             #fffdf7;
  --ventana-velo:              rgba(43, 26, 16, .45);

  /* ---------- Email que recibe la persona ---------- */
  --email-fondo:               #fbf4e6;
  --email-texto:               #2b1a10;
  --email-boton-fondo:         #4a2412;
  --email-boton-texto:         #ffffff;
}

/* ---------- Ajustes finos por plantilla de postal (opcional) ----------
   Cada plantilla de postal.json añade la clase .postal--<nombre>.
   Ejemplo: firma centrada solo en la plantilla "logo-arriba-foto-derecha":

   .postal--logo-arriba-foto-derecha .p-firma { text-align: center; }
*/