/*
 * V87 · Sistema compartido para los siete heroes principales.
 * Objetivo de escritorio: cabecera + hero completo + resumen de Google en el
 * primer viewport. En móvil la altura vuelve a depender del contenido.
 */

@font-face {
  font-family: "PC Sans";
  src: url("/assets/fonts/pc-sans/pc-sans-regular.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "PC Sans";
  src: url("/assets/fonts/pc-sans/pc-sans-bold.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 700 900;
}

:root {
  --pc-font-sans: "PC Sans", Arial, Helvetica, sans-serif;
  --pc-fold-header: 84px;
  --pc-fold-google: 96px;
  --pc-fold-hero: clamp(600px, calc(100svh - var(--pc-fold-header) - var(--pc-fold-google)), 740px);
}

body,
.category-page,
.neon-preview,
.pc-site-header,
.cabecera,
.pc-trust,
.pc-trust * {
  font-family: var(--pc-font-sans) !important;
}

/* Un mismo lenguaje tipografico para todos los heroes. */
.home-kicker,
.category-kicker,
.imprenta-kicker,
.product-hero-kicker {
  font-family: var(--pc-font-sans) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: .12em !important;
}

.home-hero h1,
.category-hero h1,
.imprenta-hero h1,
.neon-preview .neon-hero h1 {
  margin-top: 0;
  font-family: var(--pc-font-sans) !important;
  font-size: clamp(3.25rem, 4.15vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: -.05em !important;
}

.home-hero__lead,
.category-hero__lead,
.imprenta-hero__lead,
.neon-preview .neon-hero__entrada {
  font-family: var(--pc-font-sans) !important;
  font-size: clamp(1.05rem, 1.15vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.home-hero .boton,
.category-hero .category-btn,
.imprenta-hero .boton,
.neon-preview .neon-hero .boton {
  font-family: var(--pc-font-sans) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
}

/* La linea de reputacion conserva su tamano, pero usa la misma fuente real. */
.pc-trust__brand { font: 700 21px/1 var(--pc-font-sans) !important; }
.pc-trust__score { font: 700 28px/1 var(--pc-font-sans) !important; }
.pc-trust__stars { font: 400 19px/1 var(--pc-font-sans) !important; }
.pc-trust__count b { font: 700 17px/1.2 var(--pc-font-sans) !important; }
.pc-trust__source { font: 600 14px/1.2 var(--pc-font-sans) !important; }
.pc-trust__tips p { font: 400 14px/1.35 var(--pc-font-sans) !important; }
.pc-trust__tips strong { font: 700 14px/1.3 var(--pc-font-sans) !important; }

@media (min-width: 1101px) {
  .cabecera__fila,
  .neon-preview .cabecera__fila,
  .pc-site-header__inner {
    min-height: var(--pc-fold-header) !important;
  }

  .home-hero__grid,
  .category-hero__grid,
  .imprenta-hero__grid,
  .neon-preview .neon-hero__rejilla {
    box-sizing: border-box;
    height: var(--pc-fold-hero) !important;
    min-height: var(--pc-fold-hero) !important;
  }

  .category-hero__copy {
    min-height: 0;
    padding-top: clamp(2.5rem, 4.5vh, 4.25rem);
    padding-bottom: clamp(2.5rem, 4.5vh, 4.25rem);
  }

  .category-hero__media,
  .imprenta-hero__media,
  .neon-preview .neon-hero__media {
    height: 100% !important;
    min-height: 0 !important;
  }

  .home-hero__grid {
    padding-block: clamp(2.5rem, 5vh, 4rem);
  }

  .home-hero__visual {
    height: min(470px, calc(var(--pc-fold-hero) - 5rem));
  }

  .imprenta-hero__copy,
  .neon-preview .neon-hero__rejilla > div:first-child {
    padding-top: clamp(2.5rem, 4.5vh, 4.25rem) !important;
    padding-bottom: clamp(2.5rem, 4.5vh, 4.25rem) !important;
  }
}

@media (max-width: 1100px) {
  .home-hero h1,
  .category-hero h1,
  .imprenta-hero h1,
  .neon-preview .neon-hero h1 {
    font-size: clamp(3rem, 7.2vw, 4.5rem) !important;
  }
}

@media (max-width: 620px) {
  .home-hero h1,
  .category-hero h1,
  .imprenta-hero h1,
  .neon-preview .neon-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.6rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  .home-hero__lead,
  .category-hero__lead,
  .imprenta-hero__lead,
  .neon-preview .neon-hero__entrada {
    font-size: 1.05rem !important;
  }
}