:root {
  --color-cacao: #2B2118;
  --color-terracota: #E2643F;
  --color-mostaza: #F2C14E;
  --color-salvia: #A8C9A0;
  --color-oliva: #6E8456;
  --color-arcilla: #E3B58E;
  --color-avena: #E9DCC8;
  --color-leche: #FBF6EE;
  --color-blanco-calido: #FFFDF8;
  --color-texto-suave: #6B5A4C;
  --color-texto-medio: #4A3D32;
  --color-alerta: #9E2F15;
  --color-alerta-fondo: #FFF4F0;
  --color-alerta-borde: #F4C2B4;
  --color-nota-a-mano: #B3482A;
  --color-mostaza-clara: #F8E7BC;
  --color-salvia-clara: #E3EDDC;
  --color-arcilla-clara: #EFD8C2;
  --color-divisor: #EFE6D8;
  --color-interruptor-apagado: #E3D3BB;
  --color-hover-oscuro: #5A4430;
  --color-borde-campo: #9A8770; /* agregado: contraste de borde (3,4:1 sobre blanco cálido, 3,2:1 sobre leche; WCAG 1.4.11) */
  --font-titulos: 'Bricolage Grotesque', sans-serif;
  --font-texto: 'DM Sans', system-ui, sans-serif;
  --font-a-mano: 'Caveat', cursive;
  --radio-icono: 14px; --radio-campo: 16px; --radio-boton: 20px;
  --radio-tarjeta: 24px; --radio-tarjeta-grande: 28px; --radio-chip: 999px;
  --sombra-pisada: 0 4px 0 var(--color-cacao);
  --sombra-tarjeta: 0 6px 16px rgba(43,33,24,0.10);
  --sombra-polaroid: 0 10px 24px rgba(43,33,24,0.14);
  --pespunte: 2px dashed rgba(43,33,24,0.4);
  --privacidad-familia: var(--color-salvia);
  --privacidad-solo-papas: var(--color-mostaza);
  --privacidad-capsula: var(--color-arcilla);
  --dur-toque: 120ms; --dur-guardar: 400ms; --dur-entrada: 250ms; --escalonado: 40ms;
}

/* Fuentes */

/* Patrones de tela */
.textura-vichy { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px); }
.textura-lunares { background-image: radial-gradient(var(--color-cacao) 2px, transparent 2.2px); background-size: 14px 14px; }
.pespunte { outline: var(--pespunte); outline-offset: -8px; }

/* Botón principal con sombra pisada */
.btn-principal { background: var(--color-terracota); color: var(--color-cacao); font-family: var(--font-titulos); font-weight: 800; border: 0; border-radius: var(--radio-boton); min-height: 56px; box-shadow: var(--sombra-pisada); transition: transform var(--dur-toque), box-shadow var(--dur-toque); }
.btn-principal:active { transform: translateY(4px); box-shadow: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: opacity 150ms !important; } }