/* ============================================================
   leal-var.css — variantes de estructura
   Solo lo cargan /trayectoria/ y /credenciales/, y solo para que
   esas dos páginas dejen de ser la misma plantilla que las otras.
   Mismo lenguaje visual: los mismos tokens de color, la misma
   tipografía y el mismo ritmo de espacios. Cambia el ARMADO, no
   la casa.

   Nada de aquí toca leal.css: todo cuelga de clases nuevas
   (.portada-p, .cierre-vid) o de descendencia de ellas.
   ============================================================ */

/* La tinta de la plancha de cada dirección, en componentes, para poder
   disolverla con alfa dentro del video. Es el MISMO color que --plancha
   (#0F1318 / #231A1D / #1F211A); un degradado necesita el triplete. */
:root,
[data-dir="a"]{ --pp-tinta:15,19,24; }
[data-dir="b"]{ --pp-tinta:35,26,29; }
[data-dir="c"]{ --pp-tinta:31,33,26; }

/* ============================================================
   1 · PORTADA PARTIDA  (/trayectoria/)
   El video deja de ser el fondo del titular y pasa a ser una
   columna propia, a sangre por el borde derecho. El titular vive
   sobre la plancha sólida: se lee sin velo, que era la razón de
   ser del velo.
   Teléfono: una sola columna, el video arriba con altura acotada
   y el texto debajo.
   ============================================================ */
.portada-p{
  position:relative;
  display:grid;
  grid-template-areas:"media" "texto";
  background:var(--plancha);
}
/* el mismo remate de abajo que la portada normal: en las direcciones
   claras la plancha muere contra papel y sin el filo el corte se lee
   como un descuido */
.portada-p::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:3px;
  background:var(--plancha-filo); z-index:4; pointer-events:none;
}

/* El contenedor conserva la clase .hero-media a propósito: leal.js
   reconoce por ella el video de portada y lo deja para el final de la
   carga. Aquí deja de ser una capa absoluta y pasa a ser una celda. */
.portada-p .hero-media{
  grid-area:media;
  position:relative; inset:auto;
  overflow:hidden;
  height:46svh; min-height:270px;
}

/* El fundido. En teléfono cae hacia abajo, que es donde está el texto,
   y pone un techo de tinta para que la barra blanca de arriba se lea
   contra cualquier fotograma. */
.portada-p-fundido{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--pp-tinta),.86) 0%, rgba(var(--pp-tinta),.48) 22%, rgba(var(--pp-tinta),0) 46%),
    linear-gradient(0deg,   rgba(var(--pp-tinta),1)  0%, rgba(var(--pp-tinta),.55) 20%, rgba(var(--pp-tinta),0) 58%);
}

.portada-p-txt{
  grid-area:texto;
  position:relative; z-index:3;
  padding:26px 20px 48px;
}
@media (min-width:768px){ .portada-p-txt{ padding-inline:34px; } }

.portada-p .rotulo{ color:var(--acento-plancha); }
.portada-p h1{
  color:#fff; text-wrap:balance;
  font-size:clamp(2.05rem,5.4vw,3.5rem);
  max-width:17ch;
}
.portada-p h1 em{ color:var(--acento-plancha); font-weight:400; }
.portada-p .sub{ color:rgba(255,255,255,.8); max-width:50ch; margin-top:18px; }

@media (min-width:821px){
  .portada-p{
    grid-template-areas:"texto media";
    grid-template-columns:minmax(0,1fr) minmax(0,44%);
    /* la fila toma toda la altura de la banda: si se deja en auto, el panel
       de video se queda del alto del texto y abre una ceja de plancha arriba */
    grid-template-rows:minmax(0,1fr);
    align-items:stretch;
    min-height:clamp(540px,74svh,780px);
    /* el texto arranca en la misma guía vertical que el .wrap del resto de
       la página; el video se va hasta el filo derecho */
    padding-left:max(34px, calc((100% - var(--ancho))/2 + 34px));
  }
  .portada-p .hero-media{ height:auto; min-height:0; }
  .portada-p-fundido{
    background:
      linear-gradient(180deg, rgba(var(--pp-tinta),.66) 0%, rgba(var(--pp-tinta),.4) 12%, rgba(var(--pp-tinta),.15) 26%, rgba(var(--pp-tinta),0) 46%),
      linear-gradient(90deg,  rgba(var(--pp-tinta),1) 0%, rgba(var(--pp-tinta),.72) 12%, rgba(var(--pp-tinta),.3) 30%, rgba(var(--pp-tinta),0) 54%);
  }
  .portada-p-txt{
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(112px,14vh,150px) clamp(30px,4.6vw,66px) clamp(58px,8vh,84px) 0;
  }
  .portada-p h1{ font-size:clamp(2.4rem,4.3vw,3.5rem); max-width:15ch; }
}

/* ============================================================
   2 · CIERRE EN VIDEO  (/credenciales/)
   La franja deja de partir la página por la mitad y se convierte
   en el remate: banda ancha, más baja que una portada, con la
   frase centrada. El llamado a la acción se monta justo debajo,
   ya sobre papel.
   ============================================================ */
.cierre-vid{
  align-items:center;
  min-height:44svh;
}
@media (min-width:821px){ .cierre-vid{ min-height:58svh; } }

.cierre-vid .franja-cont{ padding-block:clamp(40px,6vw,64px); }
/* la frase: .cierre-vid y .franja son la MISMA etiqueta, así que el selector
   tiene que bajar por .franja-cont, no por .franja */
.cierre-vid .franja-cont p{
  max-width:24ch; margin-inline:auto; text-align:center;
}
.cierre-vid .franja-pie{ text-align:center; }

/* pegado al video, no flotando a media página */
.cierre-cta{ padding-top:clamp(34px,4.6vw,58px); }