/* Página de la home — capa de trazos de fondo y ajustes propios de la página.
   Solo tokens. Los trazos son PNG del pack recoloreados con máscara, como manda
   la regla del sistema: nunca en negro puro. */

.page { position: relative; overflow: hidden; background-color: var(--wp--preset--color--base); }

/* Los trazos viven detrás de todo el contenido: las secciones que los dejan ver
   van con .cmp--clear (fondo transparente). */
.page__trazos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.page > main,
.page > section { position: relative; z-index: 1; }

.page__trazo {
  position: absolute;
  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;
  opacity: 0.12;
}
.page__trazo--accent { background-color: var(--wp--preset--color--accent); opacity: 0.22; }
.page__trazo--soft { background-color: var(--wp--preset--color--accent-soft); opacity: 0.5; }
.page__trazo--warm { background-color: var(--wp--preset--color--accent-warm); opacity: 0.16; }

/* En móvil los trazos se reducen: en una columna estrecha compiten con el texto. */
@media (max-width: 47.99rem) { .page__trazos { opacity: 0.5; } }

.cmp--clear { background-color: transparent; }

/* Bloque de tarifas ---------------------------------------------------------- */
.c-rates__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 56rem) { .c-rates__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); } }
.c-rates__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-rates__body p { margin: 0; max-width: var(--wp--custom--layout--measure); }
.c-rates__panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
}
.c-rates__dl { display: grid; gap: var(--wp--preset--spacing--40); margin: 0; }
.c-rates__dl dt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.c-rates__dl dd {
  margin: var(--wp--preset--spacing--10) 0 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--typography--leading--tight);
  color: var(--wp--preset--color--primary);
}

/* Ficha larga de fundadora ---------------------------------------------------- */
.c-bio__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 56rem) { .c-bio__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); } }
.c-bio__aside { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.c-bio__aside img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.c-bio__name {
  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--x-large);
  line-height: var(--wp--custom--typography--leading--h2);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-bio__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-bio__body .c-prose { max-width: var(--wp--custom--layout--measure); }

/* Cierre -------------------------------------------------------------------- */
/* Lleva cmp--primary además de c-close: de ahi hereda los overrides de texto y
   botones sobre azul, en lugar de repetirlos aquí. */
.c-close { background-color: var(--wp--preset--color--primary); }
.c-close__inner { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); align-items: center; text-align: center; }
.c-close__grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); width: 100%; }
@container (min-width: 40rem) { .c-close__grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 64rem) { .c-close__grid { grid-template-columns: repeat(4, 1fr); } }
.c-close__text { margin: 0; max-width: 62ch; color: var(--wp--preset--color--on-primary); }
.c-close p:not([class]) { color: inherit; }
.c-close__sign {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--wp--custom--typography--leading--h2);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--on-primary);
}