/* ==========================================================================
   Calma de Ser — GRUPO H · componentes propios de la homepage
   Extensión de componentes.css. Mismas reglas: solo tokens, sin literales,
   cada patrón autocontenido con .cmp, responsive con @container.

   Valores tomados del .fig (lienzo a 2x, aquí normalizados a 1x):
   · titular de sección  MyPro 500, 45/47.5, versal, tracking 0.005em
   · titular de tarjeta  GPro 35/38
   · enlace              MyPro 17, tracking 0.025em
   · tarjeta de servicio 376×456, padding 26
   ========================================================================== */

/* Titular de sección versal (MyPro, no GPro) ---------------------------- */
.c-shout {
  margin: 0;
  font-family: var(--wp--preset--font-family--text);
  font-weight: var(--wp--custom--typography--weight--medium);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: var(--wp--custom--typography--leading--h1);
  letter-spacing: var(--wp--custom--typography--tracking--upper);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-shout--center { text-align: center; margin-inline: auto; }
.c-shout--on-primary { color: var(--wp--preset--color--on-primary); }

/* H39 · Hero de la home ----------------------------------------------------- */
.c-home-hero { position: relative; overflow: hidden; background-color: var(--wp--preset--color--primary); }
.c-home-hero__shape {
  position: absolute;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
}
.c-home-hero__shape--1 { inset: 0 -18% auto 42%; height: 62%; }
.c-home-hero__shape--2 { inset: auto 48% -6% -14%; height: 48%; }
.c-home-hero__inner { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }
.c-home-hero__title { max-width: 26ch; }
.c-home-hero__grid { display: grid; gap: var(--wp--preset--spacing--60); align-items: end; }
@container (min-width: 56rem) { .c-home-hero__grid { grid-template-columns: 1fr 1fr; } }
.c-home-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-home-hero__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; color: var(--wp--preset--color--on-primary); }
/* Hereda el crema del hero: la regla de párrafo azul no debe pisarlo. */
.c-home-hero__claim { margin: 0; max-width: 34ch; font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--typography--leading--lead); color: inherit; }
.c-home-hero__meta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.c-home-hero__meta li { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.c-home-hero__meta img { width: var(--wp--preset--spacing--40); height: var(--wp--preset--spacing--40); object-fit: contain; }
.c-home-hero__scroll { width: 100%; max-width: var(--wp--custom--layout--narrow); height: auto; opacity: 0.7; }

/* H40 · Mantra ------------------------------------------------------------- */
.c-mantra__inner { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); align-items: flex-start; }
.c-mantra__text {
  margin: 0;
  max-width: 34ch;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--wp--custom--typography--leading--h2);
  letter-spacing: var(--wp--custom--typography--tracking--upper);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-mantra__text + .c-mantra__text { margin-top: var(--wp--preset--spacing--40); }

/* H41 · Tarjeta de necesidad con icono (extiende B11) ---------------------- */
.c-need--icon { align-items: center; text-align: center; gap: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--60); }
.c-need__icon { width: var(--wp--preset--spacing--70); height: auto; object-fit: contain; }
.c-need--icon .c-need__title { 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); }
.c-need--icon .c-need__text { font-size: var(--wp--preset--font-size--medium); }

/* H42 · Bloque de presentación del centro --------------------------------- */
.c-about__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 56rem) { .c-about__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); } }
.c-about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-about__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-about__body p { margin: 0; max-width: var(--wp--custom--layout--measure); }

/* H43 · Servicios sobre azul ---------------------------------------------- */
.c-services { position: relative; overflow: hidden; background-color: var(--wp--preset--color--primary); }
.c-services__shape { position: absolute; pointer-events: none; }
/* Las dos formas viven en la banda inferior de la sección, donde las tarjetas
   opacas y el padding las mantienen fuera de cualquier línea de texto. Sobre el
   lima, el texto crema da 1,2:1: la decoración no puede cruzar el titular. */
.c-services__shape--tri {
  width: 26%;
  aspect-ratio: 1.15;
  inset: auto -7% 4% auto;
  background-color: var(--wp--preset--color--secondary);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  opacity: 0.9;
}
.c-services__shape--circle {
  width: 22%;
  aspect-ratio: 1;
  inset: auto auto -8% -8%;
  background-color: var(--wp--preset--color--accent-warm);
  border-radius: var(--wp--custom--radius--round);
  opacity: 0.85;
}
.c-services__inner { position: relative; }
.c-services__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: center; text-align: center; margin-bottom: var(--wp--preset--spacing--70); }
.c-services p:not([class]),
.c-services__lead { color: var(--wp--preset--color--on-primary); }
.c-services__lead { margin: 0; max-width: 62ch; }
.c-services__foot { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--60); }

/* H44 · Recursos del ecosistema ------------------------------------------- */
.c-resource + .c-resource .cmp__inner { padding-top: 0; }
.c-resource__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: center; }
@container (min-width: 56rem) {
  .c-resource__inner { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--70); }
  .c-resource--reverse .c-resource__media { order: 2; }
}
.c-resource__media { position: relative; }
.c-resource__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Gana a `.c-resource__media img` (0,1,1), que si no estira el sticker
   al tamaño de la foto y la tapa. */
.c-resource__media img.c-resource__sticker { position: absolute; width: 38%; height: auto; aspect-ratio: auto; object-fit: contain; inset: auto -6% -8% auto; }
.c-resource__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-resource__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--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-resource__body p { margin: 0; max-width: var(--wp--custom--layout--measure); }

/* H45 · Pilares ----------------------------------------------------------- */
.c-pillars { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); margin: 0; padding: 0; list-style: none; }
@container (min-width: 48rem) { .c-pillars { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 64rem) { .c-pillars { grid-template-columns: repeat(4, 1fr); } }
.c-pillar { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); align-items: center; text-align: center; }
.c-pillar img { width: var(--wp--preset--spacing--70); height: auto; object-fit: contain; }
/* El icono del tercer pilar está dibujado en crema: sobre cualquier superficie
   clara desaparece. Se pinta con máscara en accent-warm, que completa el trío
   con el rosa y el lima de los otros dos. */
.c-pillar__icon--tint {
  width: var(--wp--preset--spacing--70);
  aspect-ratio: 72 / 121;
  background-color: var(--wp--preset--color--accent-warm);
  -webkit-mask: url("../img/home/icon-pilar-equipo.webp") center / contain no-repeat;
  mask: url("../img/home/icon-pilar-equipo.webp") center / contain no-repeat;
}
.c-pillar h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
}
.c-pillar p { margin: 0; max-width: 32ch; font-size: var(--wp--preset--font-size--small); }

/* H46 · Acordeón sobre lima (variante de B14) ----------------------------- */
.c-accordion--lime { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.c-accordion--lime .c-accordion__item {
  border: 0;
  background-color: var(--wp--preset--color--secondary);
  padding-inline: var(--wp--preset--spacing--50);
}
.c-accordion--lime .c-accordion__item:last-child { border-bottom: 0; }
.c-accordion--lime .c-accordion__trigger {
  gap: var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--custom--typography--size--button);
  line-height: var(--wp--custom--typography--leading--body);
  letter-spacing: var(--wp--custom--typography--tracking--upper);
  text-transform: uppercase;
  color: var(--wp--preset--color--on-secondary);
  align-items: center;
}
.c-accordion--lime .c-accordion__sign { font-size: var(--wp--preset--font-size--x-large); }
.c-accordion--lime .c-accordion__num {
  flex: none;
  margin-right: var(--wp--preset--spacing--40);
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.c-accordion--lime .c-accordion__panel { padding-bottom: var(--wp--preset--spacing--50); }
.c-accordion--lime .c-accordion__panel p { color: var(--wp--preset--color--contrast); }

/* H47 · Primer paso -------------------------------------------------------- */
.c-firststep__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 56rem) { .c-firststep__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); } }
.c-firststep__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-firststep__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-firststep__body p { margin: 0; max-width: var(--wp--custom--layout--measure); }
.c-firststep__what { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.c-firststep__what li { display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; }
.c-firststep__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }

/* H48 · Elige tu forma de dar el paso ------------------------------------- */
.c-choose { background-color: var(--wp--preset--color--surface-alt); }
.c-choose__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: center; }
@container (min-width: 56rem) { .c-choose__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); } }
.c-choose__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-choose__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); align-items: flex-start; }
.c-choose__actions { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); width: 100%; max-width: 26rem; }

/* Pie ---------------------------------------------------------------------- */
/* Los iconos del .fig ya traen su propio círculo crema: el enlace no dibuja
   borde, pero conserva el área táctil de 44px (regla 8 del sistema). Seis
   objetivos de 44px no caben en el ancho de una columna del pie, así que la
   lista reparte en dos filas en lugar de encoger los enlaces. */
.c-footer__social--icons { flex-wrap: wrap; }
.c-footer__social--icons a {
  width: auto;
  height: auto;
  min-width: var(--wp--custom--layout--tap);
  min-height: var(--wp--custom--layout--tap);
  flex: none;
  border: 0;
  border-radius: 0;
}
.c-footer__social--icons img { width: var(--wp--preset--spacing--50); height: auto; }