/* ======================================================================
   style-manager.css — ORQUESTADOR (variables/utilidades/jerarquías)
   Nota: sin reglas de layout (esas viven en layout.css)
   ====================================================================== */

:root{
  --rosa:#8f6267;         /* Color rosa principal usado en botones y textos */
  --gold:#e8d896;         /* Dorado para filetes o detalles */
  --ink:#644a4d;          /* Color de texto principal */
  --paper:#ffffff;        /* Fondo blanco principal */

  /* tokens botones (usados por buttons.css) */
  --btn-text:#ffffff;             /* Color del texto de los botones */
  --btn-radius:48px;              /* Radio de borde para botones */
  --btn-minw:min(90vw,300px);     /* Ancho mínimo tipo “chip largo” */
  --btn-pad-y:14px;               /* Padding vertical interno */
  --btn-pad-x:28px;               /* Padding horizontal interno */
  --btn-inner-stroke:4px;         /* Grosor del filete dorado interior (::before) */
  --btn-inner-inset:12px;         /* Distancia interna del filete dorado interior */
  --btn-outer-stroke:4px;         /* Grosor del filete dorado exterior (::after) */
  --btn-outer-inset:12px;         /* Distancia externa del filete dorado exterior */

  /* …tus variables… */

  /* guías A–F (espaciados verticales del Hero) */
  --spaceA: 5vh;   /* A: arriba de “MIS XV” */
  --spaceB: 3vh;   /* B: MIS XV → nombre “Clara” */
  --spaceC: 3vh;   /* C: nombre → “FALTA” */
  --spaceD: 6vh; /* D: countdown → CTA */
  --spaceE: 6vh; /* E: CTA → filete separador */
  --spaceF: 6vh;   /* F: filete → texto copy */
  --spaceG: 2.6vh;  /* Copy → línea inferior */
}

/* ======================================================================
   Tipografía base
   ====================================================================== */
@font-face{
  font-family:"Palatino-Regular";
  src:url("../fonts/Palatino-Regular.woff") format("woff");
  font-display:swap;
}

/* Fondo y color base global */
body{
  background:var(--paper);
  color:var(--ink);
}

/* Asegura Palatino en todos los textos principales */
body,
.btn,
.overlay .title,
.overlay .subtitle,
.hero,
.copy{
  font-family:"Palatino-Regular","Palatino Linotype",Palatino,serif;
}

/* ======================================================================
   Utilidades globales
   ====================================================================== */

/* Centrado horizontal rápido */
.center-block{ margin-inline:auto; }

/* Elimina subrayado en enlaces con apariencia de botón */
a.btn,
.cta-wrap a{ text-decoration:none; }

/* ======================================================================
   Overlay: ícono corazón animado en color rosa oscuro
   ====================================================================== */
.overlay .heart-icon{
  width: min(30vw, 80px);   /* Escala relativa al ancho de pantalla (máx 80px) */
  height: auto;             /* Mantiene proporción del .webp */
  margin-bottom: 50px;      /* Separación respecto al texto debajo */
  display: inline-block;    /* Asegura alineación correcta en contenedor centrado */
  filter: invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg)
           brightness(93%) contrast(87%); /* Tinte rosa oscuro */
  pointer-events: none;     /* Evita que bloquee clics en botones debajo */
}

/* ----------------------------------------------------------------------
   IMPORTANTE:
   Reglas de layout (hero/bg/misc/content/countdown/arrow/cta-wrap)
   están en layout.css para evitar duplicaciones/conflictos.
   ---------------------------------------------------------------------- */