/* ============================================================================
   PIE DE PÁGINA · definición ÚNICA
   ----------------------------------------------------------------------------
   Primer archivo de assets/css/cds/, que es NUESTRA capa de componentes.

   Regla acordada 2026-09-07: lo que hacemos nuevo se define UNA sola vez, aquí,
   y no en overrides.css. overrides.css existe para no editar la librería que
   entrega diseño; este archivo es para lo que es nuestro desde el principio.

   Se carga DESPUÉS de overrides.css, así que manda sobre las reglas de pie de
   componentes.css (líneas 472-533) y home.css (213-223). Esas quedan muertas y
   se borran cuando alguien vuelva a tocar la librería.

   Diseño: archivo de Figma, nodo 97-2. Solo escritorio; en móvil se apila.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   La franja de página. El azul NO llega a los bordes: lo que se ve alrededor es
   este fondo crema. Por eso hacen falta dos elementos y no uno.
   ------------------------------------------------------------------------- */
.c-footer {
  background-color: var(--wp--preset--color--base);
  padding: 0;
}

/* ----------------------------------------------------------------------------
   La caja azul. Ocupa el 92,3 % del ancho —2522 de 2732 en el archivo— y deja
   el resto en crema a la derecha, que es lo pedido.

   `overflow: clip` es lo que corta el logotipo de abajo. Se usa clip y no
   hidden a propósito: hidden convierte la caja en contenedor de scroll y basta
   un píxel de más para que aparezca una barra.
   ------------------------------------------------------------------------- */
.c-footer__caja {
  position: relative;
  overflow: clip;
  width: 92.3%;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
  padding-block-start: 5.5%;
  padding-inline-start: 8.25%;
  padding-inline-end: 2.26%;
}

.c-footer__caja a {
  color: var(--wp--preset--color--on-primary);
  text-decoration: none;
}

.c-footer__caja a:hover {
  color: var(--wp--preset--color--secondary);
}

/* ----------------------------------------------------------------------------
   Dos mitades. La izquierda arranca en el 8,25 % del ancho de la caja y la
   derecha en el 47,15 %, que son las medidas del archivo.

   La derecha ocupa la mitad justa, y por debajo de ella queda el hueco donde
   entra el logotipo grande.
   ------------------------------------------------------------------------- */
.c-footer__rejilla {
  display: grid;
  grid-template-columns: 47.15fr 52.85fr;
  align-items: start;
}

/* ----------------------------------------------------------------------------
   Columna izquierda: lema, datos y legales, uno debajo de otro.
   ------------------------------------------------------------------------- */
.c-footer__marca-col {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--70);
  max-width: 34ch;
}

.c-footer__claim {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: var(--wp--custom--typography--weight--regular);
  line-height: var(--wp--custom--typography--leading--h2);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--on-primary);
}

/* La frase se escribe en Ajustes → Calma de Ser con el editor visual, que
   envuelve lo que se teclea en párrafos propios. Por eso el contenedor pasó de
   <p> a <div>: un <p> dentro de otro no es HTML válido y el navegador cierra el
   de fuera, con lo que la composición se deshace.

   Los párrafos de dentro heredan todo y pierden el margen. Sin esto, .home .cmp
   y las reglas de la librería les meterían su tipografía, su color y una
   separación entre líneas que el diseño no tiene. */
.c-footer__claim > :first-child { margin-top: 0; }
.c-footer__claim > :last-child { margin-bottom: 0; }

.c-footer__claim p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* El enlace, si alguien pone uno: subrayado fino y del mismo color, que sobre
   azul un color de enlace distinto canta. */
.c-footer__claim a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.c-footer__datos,
.c-footer__legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer__datos {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--typography--leading--body);
}

/* ----------------------------------------------------------------------------
   Legales EN COLUMNA, no en fila: el diseño los apila bajo el copyright.
   ------------------------------------------------------------------------- */
.c-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--medium);
}

.c-footer__legal p {
  margin: 0;
}

.c-footer__legal ul {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

/* ----------------------------------------------------------------------------
   Columna derecha: los enlaces del menú «pie» y las redes.
   ------------------------------------------------------------------------- */
.c-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--70);
}

/* Dos columnas desde CSS, no desde el marcado: así el menú puede tener los
   enlaces que quiera sin que haya que tocar el patrón. */
.c-footer__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--wp--preset--spacing--70);
  font-size: var(--wp--preset--font-size--medium);
}

.c-footer__nav li {
  break-inside: avoid;
  margin-block-end: var(--wp--preset--spacing--50);
}

/* ----------------------------------------------------------------------------
   Las redes. Los iconos son PNG en crema recortados del propio archivo de
   Figma, a 70px, que es el doble del tamaño al que se pintan.
   ------------------------------------------------------------------------- */
.c-footer__social--icons {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer__social--icons a {
  display: block;
  line-height: 0;
  /* ⚠️ SIN BORDE, AQUÍ Y NO EN home.css. componentes.css pone a cada enlace
     social un círculo con borde crema (.c-footer__social a) y home.css lo
     quitaba para los iconos —pero home.css solo se carga en las páginas con
     componentes de portada. En producción, /psicologia/adultos/ no la carga
     y los iconos salían con círculo; tarifas y las fichas, igual. Esta hoja
     va con el pie en todas las páginas. 2026-09-16. */
  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: 2.25rem;
  height: 2.25rem;
  transition: opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.c-footer__social--icons a:hover img {
  opacity: 0.7;
}

/* ----------------------------------------------------------------------------
   EL LOGOTIPO CORTADO.
   ----------------------------------------------------------------------------
   No es una máscara. Es la misma pieza de siempre, pintada enorme y recortada
   por el borde inferior de la caja.

   `translateY` y no `bottom: -N%`: un porcentaje en `bottom` se mide contra la
   ALTURA DE LA CAJA, que depende del contenido y cambia. Un porcentaje en
   `translateY` se mide contra la altura del PROPIO logotipo, así que el trozo
   que se corta es siempre el mismo — el 11,7 % de abajo, medido en el archivo.
   ------------------------------------------------------------------------- */
.c-footer__marca {
  position: absolute;
  left: 47.15%;
  bottom: 0;
  /* ⚠️ ANCHO EXPLÍCITO, no `left` + `right` con `width: auto`. En un <img>
     absoluto sobre-restringido gana la medida INTRÍNSECA del archivo —281px— y
     el logotipo sale diminuto. Es el mismo fallo que tuvo el trazo del hero.
     50.59 % es lo que va del 47,15 % al 97,74 % en el archivo de Figma. */
  width: 50.59%;
  height: auto;
  transform: translateY(11.7%);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Móvil y tableta: el diseño es solo de escritorio. Por debajo de 56rem todo se
   apila, la caja ocupa el ancho completo y el logotipo deja de asomar — cortarlo
   en una pantalla estrecha solo lo haría ilegible.
   ------------------------------------------------------------------------- */
@media (max-width: 55.999rem) {
  .c-footer__caja {
    width: 100%;
    padding-inline: var(--wp--custom--space--gutter-sm);
    padding-block: var(--wp--preset--spacing--70);
  }

  .c-footer__rejilla {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--70);
  }

  .c-footer__marca {
    position: static;
    display: block;
    width: 100%;
    margin-block-start: var(--wp--preset--spacing--70);
    transform: none;
  }
}

/* La frase del pie se compone como un titular: la negrita pasa a la fuente
   de texto, en versal y peso normal; la cursiva es cursiva. Mismas
   declaraciones que los hX en overrides.css. Pedido el 2026-09-16. */
.c-footer__claim :is(strong, b) {
  font-family: var(--wp--preset--font-family--text);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-style: normal;
  letter-spacing: var(--wp--custom--typography--tracking--upper);
  text-transform: uppercase;
}

.c-footer__claim :is(em, i) {
  font-style: italic;
}

/* Aire sobre el pie: 120 px (7.5rem) de fondo crema entre la última sección
   y el footer. Sin él, un cierre azul (.c-close) se fundía con el pie azul.
   Pedido el 2026-09-29. Especificidad alta para ganar al blockGap del núcleo
   (:where(.wp-site-blocks) > *). */
.wp-site-blocks > footer.c-footer,
footer.c-footer {
  margin-block-start: 7.5rem;
}