/* ===========================================================================
   HPeliculas — hoja de marca
   Se carga DESPUÉS de app.css y solo cambia identidad visual: tipografía y
   color. No toca estructura ni comportamiento, así que las actualizaciones
   del sistema base siguen aplicando sin conflicto.
   =========================================================================== */

/* ---- Tipografía propia: Outfit (SIL OFL), autoalojada ---- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body, button, input, select, textarea, .btn {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, .t-3xl { letter-spacing: -.02em; }

/* ---- Color: rojo cine, la identidad de HPeliculas ---- */
:root {
  --primary:     #B2121B;   /* rojo profundo, botones y acentos */
  --primary-fg:  #FFFFFF;
  --accent:      #F3D9DA;
  --fg:          #16110F;   /* casi negro, con calidez */
  --bg:          #FBF9F8;
  --card:        #FFFFFF;
  --border:      #E6DEDC;
  --muted:       #F5F0EF;
  --muted-fg:    #7A6E6B;
  --radius:      14px;
}

/* El botón primario del sistema usa --primary como fondo: al cambiar la
   variable ya queda rojo. Estos ajustes son solo para los estados. */
.btn-primary:hover   { background: #8E0E16; border-color: #8E0E16; }
.btn-outline:hover   { border-color: var(--primary); color: var(--primary); }
a:hover              { color: var(--primary); }

/* Etiqueta "Destacado" y chips de categoría en el hero */
.badge, .tag-featured { background: var(--primary); color: #fff; }
.hero .chips a:hover  { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Cabecera: barra superior con un filo rojo que la separa del contenido */
.topbar, header .topbar { border-bottom: 2px solid var(--primary); }

/* Precio: el color de marca ayuda a escanear el catálogo */
.pcard .price, .price-now { color: var(--primary); }

/* El verde de WhatsApp se respeta (es marca ajena) */
.wa, .btn-wa, [class*="whatsapp"] { color: var(--wa); }

/* ---- Logotipo de la cabecera ----
   Se usa el logotipo completo (el mismo del pie), no el icono suelto: en móvil
   el icono solo mostraba «HP» y quedaba pobre. Se limita por altura para que
   respire igual en escritorio y en móvil. */
.nav-logo img { height: 40px; width: auto; max-width: 230px; object-fit: contain; display: block; }
.nav-logo { display: flex; align-items: center; gap: 0; }
@media (max-width: 640px) {
  .nav-logo img { height: 40px; max-width: 190px; }
}