/* =========================================================================
   VIDA RICA · sistema de marca
   Manual KORA "FASE 2 v4 LAURA GRANADA", julio 2026.
   Hex muestreados del PDF, no aproximados.

   Enlaza este fichero desde cualquier diseño nuevo:
     <link rel="stylesheet" href="marca.css">
   y las fuentes:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* --- Paleta primaria. Amarillo y azul son inseparables: si aparece uno,
         el otro debe estar en la misma pantalla. --- */
  --vr-amarillo: #ffcd32;
  --vr-azul: #062982;
  --vr-magenta: #ef117c;

  /* --- Secundaria. Rojo y morado son condimento, nunca la base. --- */
  --vr-rojo: #f6301d;
  --vr-rosa: #ffb7d6;
  --vr-celeste: #84d3e8;
  --vr-morado: #b05ebd;

  /* --- Neutros. La crema no es blanco puro: es el fondo base cálido. --- */
  --vr-crema: #fffcf0;
  --vr-tinta: #191919;
  --vr-blanco: #ffffff;

  /* --- Derivados de servicio (no están en el manual, salen de él) --- */
  --vr-azul-suave: #3f4a7d; /* texto secundario sobre crema — 7.4:1 */
  --vr-azul-borde: #d5d9e8; /* filete tenue */

  /* --- Tipografía --- */
  --vr-display: "Lora", Georgia, "Times New Roman", serif;
  --vr-cuerpo: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* --- Ritmo. Escala modular para que los diseños nuevos concuerden. --- */
  --vr-medida: 68ch; /* ancho máximo de lectura cómoda */
  --vr-ancho: 1240px; /* ancho máximo de página */
}

/* =========================================================================
   BASE
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--vr-crema);
  color: var(--vr-tinta);
  font-family: var(--vr-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================================
   TIPOGRAFÍA
   Lora entra solo cuando hay que emocionar. Si dudas, Manrope.
   ========================================================================= */

.vr-h1,
.vr-h2 {
  font-family: var(--vr-display);
  font-weight: 600;
  margin: 0;
}

.vr-h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.vr-h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.vr-h3 {
  font-family: var(--vr-cuerpo);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Etiqueta de sección. El manual la usa constantemente: "01/ LOGO SUITE". */
.vr-eyebrow {
  font-family: var(--vr-cuerpo);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
}

.vr-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: var(--vr-medida);
}

/* Cursiva de Lora: el gesto editorial de la marca. Para citas y destacados. */
.vr-italic {
  font-family: var(--vr-display);
  font-style: italic;
  font-weight: 400;
}

/* =========================================================================
   BLOQUES DE COLOR
   El manual construye con rectángulos sólidos tipo revista.
   Bloques planos, NUNCA degradados. Máximo 2 saturados por sección + neutro.
   ========================================================================= */

.vr-bloque {
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4rem);
}

.vr-bloque--azul {
  background: var(--vr-azul);
  color: var(--vr-crema);
}
.vr-bloque--amarillo {
  background: var(--vr-amarillo);
  color: var(--vr-azul);
}
.vr-bloque--magenta {
  background: var(--vr-magenta);
  color: var(--vr-blanco);
}
.vr-bloque--crema {
  background: var(--vr-crema);
  color: var(--vr-tinta);
}
.vr-bloque--rosa {
  background: var(--vr-rosa);
  color: var(--vr-tinta);
}
.vr-bloque--celeste {
  background: var(--vr-celeste);
  color: var(--vr-tinta);
}

.vr-contenido {
  max-width: var(--vr-ancho);
  margin-inline: auto;
}

/* =========================================================================
   BOTONES
   ========================================================================= */

.vr-btn {
  display: inline-block;
  font-family: var(--vr-cuerpo);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.vr-btn:hover {
  transform: translateY(-2px);
}

/* Sobre azul → botón amarillo. La combinación firma, 8.52:1. */
.vr-btn--amarillo {
  background: var(--vr-amarillo);
  color: var(--vr-azul);
}
.vr-btn--azul {
  background: var(--vr-azul);
  color: var(--vr-amarillo);
}
.vr-btn--linea {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

/* =========================================================================
   AVISOS DE CONTRASTE
   No es decoración: sobre magenta, rojo y morado NO cabe texto de cuerpo en
   blanco. Ahí solo titular grande. Los párrafos van sobre crema, blanco,
   amarillo, rosa o celeste; el azul admite blanco y amarillo.
   ========================================================================= */

.vr-solo-titular {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
}

/* =========================================================================
   MOVIMIENTO
   Una entrada bien escalonada rinde más que mil microinteracciones.
   ========================================================================= */

@keyframes vr-entra {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vr-entra {
  animation: vr-entra 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}