/* Base Maestra · pieza. Punto de partida: se ajusta, se varía o se reescribe para cada marca. */
/* =========================================================
   1 · HÉROE  (.p-heroe)  — variantes: forma (se encoge a la forma de firma al bajar), estados, centro, partido
   ========================================================= */
.p-heroe { position: relative; height: 100svh; min-height: 560px; overflow: clip; }
.p-heroe__marco { position: absolute; inset: 0; overflow: hidden; }
.p-heroe__medios { position: absolute; inset: 0; }
.p-heroe[data-heroe-forma] .p-heroe__marco { will-change: clip-path; }
.p-heroe__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-io); }
.p-heroe__v.activo { opacity: 1; }
img.p-heroe__v { animation: respira 26s var(--ease-io) infinite alternate; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
.p-heroe__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 42%, transparent) 38%, transparent 66%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 45%, transparent), transparent 22%);
}
.p-heroe__contenido { position: absolute; inset: auto 0 0 0; padding: 0 var(--gutter) calc(var(--legal-h) + clamp(1.5rem, 4vh, 3.5rem)); }
.p-heroe__linea { display: block; }
.p-heroe__linea--it { font-style: var(--em-estilo); padding-left: .55em; }
.p-heroe__pie { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-top: clamp(1.2rem, 3vh, 2.2rem); --g-pad: clamp(1.1rem, 1.6vw, 1.4rem); }
.p-heroe__pie p { max-width: 34ch; }
@media (min-width: 900px) {
  .p-heroe__pie.vidrio { border-radius: var(--r-boton); padding: .65rem .65rem .65rem 2.1rem; }
}
@media (max-width: 899px) {
  .p-heroe__contenido { padding-bottom: calc(var(--legal-h) + 5.4rem); }
  .p-heroe__linea--it { padding-left: .25em; }
}

/* Variante «centro»: todo al centro de la pantalla (marcas de una sola idea) */
.p-heroe--centro .p-heroe__contenido { inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--nav-h) var(--gutter) calc(var(--legal-h) + 2rem); }
.p-heroe--centro .p-heroe__linea--it { padding-left: 0; }
/* Variante «partido»: el medio vive dentro de la forma de firma, a la derecha; el texto sobre el fondo vivo.
   Ideal cuando el video no tiene versión vertical: en celular ocupa un marco y no toda la pantalla. */
.p-heroe--partido .p-heroe__marco { inset: calc(var(--nav-h) + 3vh) var(--gutter) calc(var(--legal-h) + 5vh) 50%; border-radius: var(--r-forma); }
.p-heroe--partido .p-heroe__velo { display: none; }
.p-heroe--partido .p-heroe__contenido { inset: auto 52% 0 0; }
.p-heroe--partido .t-heroe { font-size: calc(clamp(2.8rem, 6.2vw, 7.4rem) * var(--escala)); }   /* media pantalla: el titular sigue en 2 líneas */
@media (max-width: 899px) {
  .p-heroe--partido .p-heroe__marco { inset: calc(var(--nav-h) + 1rem) var(--gutter) 48% var(--gutter); }
  .p-heroe--partido .p-heroe__contenido { inset: auto 0 0 0; }
}