/* ==========================================================================
   Calma de Ser — heros internos (I49–I51)
   Cabeceras para páginas interiores: servicio, tema, sección editorial.
   Extensión de componentes.css. Solo tokens, sin literales; cada patrón
   autocontenido con .cmp, responsive con @container.

   Los trazos son los SVG de la diseñadora (assets/trazos/), pintados con
   mask-image sobre un color de la paleta: el trazo original es negro y el negro
   puro no está en el sistema.
   ========================================================================== */

/* Trazo como pieza decorativa ---------------------------------------------- */
.c-trazo {
  position: absolute;
  pointer-events: none;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.c-trazo--1 { -webkit-mask-image: url("../trazos/trazo-1.svg"); mask-image: url("../trazos/trazo-1.svg"); }
.c-trazo--2 { -webkit-mask-image: url("../trazos/trazo-2.svg"); mask-image: url("../trazos/trazo-2.svg"); }
.c-trazo--3 { -webkit-mask-image: url("../trazos/trazo-3.svg"); mask-image: url("../trazos/trazo-3.svg"); }
.c-trazo--4 { -webkit-mask-image: url("../trazos/trazo-4.svg"); mask-image: url("../trazos/trazo-4.svg"); }
.c-trazo--5 { -webkit-mask-image: url("../trazos/trazo-5.svg"); mask-image: url("../trazos/trazo-5.svg"); }
.c-trazo--6 { -webkit-mask-image: url("../trazos/trazo-6.svg"); mask-image: url("../trazos/trazo-6.svg"); }
.c-trazo--7 { -webkit-mask-image: url("../trazos/trazo-7.svg"); mask-image: url("../trazos/trazo-7.svg"); }
.c-trazo--8 { -webkit-mask-image: url("../trazos/trazo-8.svg"); mask-image: url("../trazos/trazo-8.svg"); }
.c-trazo--9 { -webkit-mask-image: url("../trazos/trazo-9.svg"); mask-image: url("../trazos/trazo-9.svg"); }
.c-trazo--accent { background-color: var(--wp--preset--color--accent); }
.c-trazo--soft { background-color: var(--wp--preset--color--accent-soft); }
.c-trazo--warm { background-color: var(--wp--preset--color--accent-warm); }
.c-trazo--lime { background-color: var(--wp--preset--color--secondary); }
.c-trazo--cream { background-color: var(--wp--preset--color--on-primary); }

/* Base común de los tres heros --------------------------------------------- */
.c-ihero { position: relative; overflow: hidden; }
.c-ihero__inner { position: relative; z-index: 1; }
.c-ihero__eyebrow { margin: 0; }
.c-ihero__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: var(--wp--custom--typography--leading--h1);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-ihero__lead { margin: 0; max-width: var(--wp--custom--layout--measure); }
.c-ihero__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }

/* I49 · Centrado, trazo grande detrás -------------------------------------- */
/* Para páginas de sección y de tema: una sola idea, sin imagen que la compita. */
.c-ihero--center .c-ihero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  align-items: center;
  text-align: center;
}
.c-ihero--center .c-ihero__title { max-width: 24ch; }
.c-ihero--center .c-ihero__lead { max-width: 56ch; }
/* El trazo no puede quedar detrás del texto: primary sobre base es 4,79:1 y un
   velo del 10% lo baja a 4,21. Los trazos van a los lados, fuera de la columna
   de texto, y solo cuando hay sitio real para ellos. */
.c-ihero--center .c-trazo { display: none; }
@container (min-width: 64rem) {
  .c-ihero--center .c-trazo {
    display: block;
    width: 11rem;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
  }
  .c-ihero--center .c-trazo--left { aspect-ratio: 486 / 799; left: 0; }
  .c-ihero--center .c-trazo--right { aspect-ratio: 528 / 775; right: 0; }
}

/* I50 · Dos columnas, trazo recortando la foto ----------------------------- */
/* Para fichas de servicio: el trazo une texto e imagen en lugar de decorar. */
.c-ihero--split .c-ihero__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: center; }
@container (min-width: 56rem) {
  .c-ihero--split .c-ihero__inner { grid-template-columns: 3fr 2fr; gap: var(--wp--preset--spacing--70); }
}
.c-ihero--split .c-ihero__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-ihero__media { position: relative; }
.c-ihero__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.c-ihero__media .c-trazo {
  width: 70%;
  aspect-ratio: 528 / 775;
  inset: auto -14% -10% auto;
  z-index: 2;
  opacity: 0.85;
}
.c-ihero--split .c-ihero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  margin: 0;
  padding-top: var(--wp--preset--spacing--30);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  list-style: none;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  width: 100%;
}
.c-ihero--split .c-ihero__meta strong { display: block; font-weight: var(--wp--custom--typography--weight--regular); color: var(--wp--preset--color--contrast); }

/* I51 · Banda azul a sangre ------------------------------------------------ */
/* Para cabeceras de campaña y de programa: máximo contraste con el resto. */
.c-ihero--band { background-color: var(--wp--preset--color--primary); }
.c-ihero--band .c-ihero__inner {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-items: end;
  /* Reserva dos bandas libres, arriba y abajo, para los trazos. Sobre azul el
     texto crema da 4,66:1: cualquier velo claro por debajo lo tumba, así que la
     decoración no puede solaparse con el texto ni a media opacidad. */
  padding-top: calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--70));
  padding-bottom: calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--70));
}
@container (min-width: 56rem) {
  .c-ihero--band .c-ihero__inner { grid-template-columns: 3fr 2fr; gap: var(--wp--preset--spacing--70); }
}
.c-ihero--band .c-ihero__title { color: var(--wp--preset--color--on-primary); max-width: 20ch; }
.c-ihero--band .c-ihero__eyebrow { color: var(--wp--preset--color--on-primary); }
.c-ihero--band .c-ihero__lead { color: var(--wp--preset--color--on-primary); }
.c-ihero--band .c-trazo--edge {
  height: var(--wp--preset--spacing--70);
  width: auto;
  aspect-ratio: 486 / 799;
  inset: var(--wp--preset--spacing--40) var(--wp--custom--space--gutter-sm) auto auto;
  opacity: 0.7;
}
.c-ihero--band .c-trazo--floor {
  height: var(--wp--preset--spacing--70);
  width: auto;
  aspect-ratio: 528 / 775;
  inset: auto auto var(--wp--preset--spacing--40) var(--wp--custom--space--gutter-sm);
  opacity: 0.85;
}
@container (min-width: 48rem) {
  .c-ihero--band .c-trazo--edge { inset-inline-end: var(--wp--preset--spacing--60); }
  .c-ihero--band .c-trazo--floor { inset-inline-start: var(--wp--preset--spacing--60); }
}
@container (min-width: 75rem) {
  .c-ihero--band .c-trazo--edge { inset-inline-end: var(--wp--custom--space--gutter); }
  .c-ihero--band .c-trazo--floor { inset-inline-start: var(--wp--custom--space--gutter); }
}
.c-ihero__side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); align-items: flex-start; }