/* =============================================
   MAREA ROJA — Design Tokens
   Paleta: Tropical y vibrante (mar de día)
   ============================================= */
:root {
  /* --- Colores principales --- */
  --rojo:          #C8102E;
  --rojo-dark:     #9E0C24;
  --rojo-light:    #E8334A;
  --azul-mar:      #0A5C8A;
  --azul-profundo: #063A5A;
  --azul-cielo:    #1A8FC0;
  --turquesa:      #00B4CC;
  --turquesa-light:#4DD9E8;
  --arena:         #F7F0E3;
  --arena-dark:    #EBDfC8;
  --dorado-sol:    #F0A500;
  --dorado-arena:  #D4914A;
  --blanco:        #FFFFFF;
  --texto:         #0A1A2A;
  --texto-suave:   rgba(10,26,42,0.65);
  --fondo:         #F4F9FC;

  /* --- Gradientes de marca --- */
  --grad-mar:   linear-gradient(135deg, #063A5A 0%, #0A5C8A 50%, #1A8FC0 100%);
  --grad-sunset:linear-gradient(135deg, #C8102E 0%, #F0A500 100%);
  --grad-tropical: linear-gradient(180deg, #0A5C8A 0%, #00B4CC 60%, #4DD9E8 100%);

  /* --- Tipografías --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;

  /* --- Espaciados --- */
  --gap-xs:  0.5rem;
  --gap-sm:  1rem;
  --gap-md:  2rem;
  --gap-lg:  4rem;
  --gap-xl:  6rem;

  /* --- UI --- */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --shadow-card:  0 4px 24px rgba(10,92,138,0.10);
  --shadow-hover: 0 16px 48px rgba(10,92,138,0.22);
  --shadow-rojo:  0 8px 24px rgba(200,16,46,0.35);

  /* --- Transiciones --- */
  --transition:      0.3s ease;
  --transition-slow: 0.6s ease;

  /* --- Layout --- */
  --max-width: 1240px;
  --header-h:  76px;
}