/* =============================================================
   Variante 2 — página completa (portada nueva + resto del sitio igual).
   Los colores exactos del PDF (Logos/Variante2.pdf) se aplican
   SOLO a la cabecera y al hero, declarándolos en esos dos selectores
   en vez de en :root — así el resto del cuerpo (manifiesto, producto,
   pilares, historia, formatos, visita, contacto, footer) sigue
   heredando la paleta oficial de styles.css sin ningún cambio.
   ============================================================= */
.site-header,
.hero-v2 {
  --ink:   #0B0501;   /* fondo oscuro del PDF (distinto del --ink oficial #1D0E03) */
  --ink-rgb: 11, 5, 1;
  --cream: #FDFEFC;   /* idéntico al oficial */
  --cream-rgb: 253, 254, 252;
  --wine:  #B50459;   /* acento rosa/magenta del PDF, en el rol de CTA principal */
  --wine-rgb: 181, 4, 89;
  --green: #CEE2B4;   /* verde del PDF */
  --green-rgb: 206, 226, 180;
  --white: #FFFFFF;   /* blanco puro, píldora de teléfono */
}

/* Logotipo horizontal (icono + texto en línea) para esta cabecera,
   en vez del lockup vertical apilado de la portada actual. */
.brand--v2 { gap: .7rem; }
.brand-mark-v2 {
  height: 34px;
  width: 34px;
  filter: brightness(0) invert(1);
}
.brand-word-v2 {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-word-v2 .script {
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--cream);
  line-height: .9;
}
.brand-word-v2 .sub {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .7);
  margin-top: 2px;
}

/* Teléfono como píldora en blanco puro, tal como en el PDF */
.nav-call--pill {
  background: var(--white);
  color: var(--ink);
  padding: .55rem 1.1rem;
  border-radius: 999px;
}
.nav-call--pill svg { color: var(--ink); }

/* Hero: escenario centrado de ancho máximo — la distancia del texto al
   borde y el centrado vertical se mantienen iguales en móvil, escritorio
   o una TV muy ancha. */
.hero-v2 {
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
  background: var(--ink);
}
.hero-v2-stage {
  position: relative;
  max-width: 1800px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
}

/* La foto NO se oscurece — degradado horizontal, oscuro solo bajo el
   texto (izquierda) y transparente donde está el ajo (derecha). */
.hero-v2 .hero-media::after {
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.85) 32%, rgba(var(--ink-rgb),.4) 48%, rgba(var(--ink-rgb),0) 60%);
}
/* Margen izquierdo real medido en el PDF (117pt de 1280pt ≈ 9%) */
.hero-content-v2 {
  max-width: 640px;
  padding-left: clamp(1.5rem, 9vw, 7.5rem);
  padding-right: 1.5rem;
}
.hero-v2-title {
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  line-height: 1.08;
}
.hero-v2-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}
.hero-v2-title strong {
  font-style: normal;
  font-weight: 700;
  color: var(--green);
  display: inline-block;
  margin-top: .1em;
}
.hero-v2-sub {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.35;
}
.hero-v2-sub em {
  font-style: italic;
  font-weight: 400;
  color: rgba(var(--cream-rgb), .92);
}
.hero-v2-sub strong {
  font-style: italic;
  font-weight: 700;
  color: var(--wine);
}

@media (min-width: 960px) {
  .brand-mark-v2 { height: 40px; width: 40px; }
  .brand-word-v2 .script { font-size: 1.7rem; }
}