/* Páginas con cabecera limpia.

   Estas páginas no usan el patrón de la plantilla (cabecera terracota
   gigante con el titular dentro). Llevan una miga de pan discreta y entran
   directas al contenido, así que necesitan estilos propios.

   Empezó siendo la hoja de «Sobre mí» y se generalizó al llevar ese mismo
   patrón al resto: la miga, la barra clara, los paneles, las tarjetas y los
   iconos son comunes. Lo que es de una sola página va al final, agrupado
   bajo su nombre.

   Por qué un fichero aparte y no responsive.css: aquel existe para tapar
   los huecos que la PLANTILLA dejó sin escalar, y conviene que siga siendo
   fácil de leer. Esto es una página nuestra, de principio a fin, así que
   se lleva sus propias medidas y sus propias media queries juntas, que es
   como se entienden.

   Medidas base pensadas para escritorio; al final del fichero, los dos
   saltos (991 y 767) con los mismos puntos de corte que el resto del sitio.

   Los colores (--gp-beige y --gp-borde) se declaran en colores.css: son de
   todo el sitio, no de esta página. */

/* ==========================================================================
   Cabecera: sin hero. La cabecera del sitio es transparente y su logotipo
   es blanco, así que sobre fondo claro desaparecería: hay que forzar la
   versión en color y oscurecer el menú.
   ========================================================================== */

/* La plantilla oculta el logotipo en color con
   `.header-area .xb-header-logo img:nth-child(2)`. Misma especificidad
   aquí, pero esta hoja carga después, así que gana. */
.gp-cabecera-clara .xb-header-logo img:nth-child(1) {
  display: none;
}

.gp-cabecera-clara .xb-header-logo img:nth-child(2) {
  display: inline-block;
}

.gp-cabecera-clara .main-menu ul li a,
.gp-cabecera-clara .xb-nav-mobile {
  color: var(--color-heading, #304049);
}

/* Textos del menú de navegación en Altone Regular (peso 400).
   Aplica a los enlaces principales, desplegables de idioma y menú móvil,
   manteniendo el botón «Reservar Cita» intacto con su tipografía propia. */
.main-menu ul li a,
.main-menu ul li .submenu li a,
.xb-menu-primary li a {
  font-family: var(--font-body, "Altone", sans-serif);
  font-weight: 400;
}

/* El botón de menú trae `border: 1px solid #fff`, pensado para recortarse
   contra la foto del hero. Sobre la barra gris es invisible, así que el
   borde pasa al mismo tono que el icono, rebajado. */
.gp-cabecera-clara .xb-nav-mobile {
  border-color: rgba(48, 64, 73, 0.3);
}

/* El hover hay que reescribirlo: la regla de color de arriba empata en
   especificidad con `.xb-nav-mobile:hover` de la plantilla y, al cargar
   esta hoja después, ganaba, dejando el icono oscuro sobre el terracota. */
.gp-cabecera-clara .xb-nav-mobile:hover,
.gp-cabecera-clara .xb-nav-mobile:focus {
  color: #fff;
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
}

/* La barra de navegación.

   La plantilla la deja translúcida con desenfoque (.glass), que es un
   efecto pensado para ir sobre la foto del hero. Sin hero no hay nada que
   desenfocar: solo cuesta rendimiento. Se sustituye por un color liso. */
.gp-cabecera-clara .header__wrap.glass {
  background: var(--gp-navbar, #f3f3f2);
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Al bajar, la barra fija se queda como la trae la plantilla: banda blanca
   a todo lo ancho con su sombra. Lo único que hay que hacer es devolverle
   la transparencia a la tarjeta interior, porque la regla de arriba tiene
   más especificidad que la suya y si no el beige se quedaría pegado dentro
   de la banda blanca. */
.gp-cabecera-clara .stricked-menu .header__wrap.glass {
  background: transparent;
}

/* Botón «Reservar Cita» en la barra de navegación:
   Mismo fondo terracota y mismo hover oscuro (#304049) que lleva la
   barra fija que aparece al scrollear (.stricked-menu). */
.gp-cabecera-clara .header-area .header-btn .thm-btn {
  background-color: var(--color-primary, #b0612b);
  color: var(--color-white, #fff);
}

.gp-cabecera-clara .header-area .header-btn .thm-btn:hover {
  background-color: var(--color-secondary, #304049);
  color: var(--color-white, #fff);
}

.gp-cabecera-clara .header-area .header-btn .thm-btn span:before {
  filter: brightness(100);
}

/* Altura unificada e idéntica entre el botón «Reservar Cita» y el botón
   de menú de 3 rayas (hamburguesa): exactamente 54px, centrados verticalmente
   y con esquinas suaves. */
.header-area .header-btn .thm-btn {
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-area .xb-nav-mobile {
  height: 54px;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  border-radius: 8px;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Alineación horizontal en escritorio (>=992px).

   En Header.tsx el contenedor lleva `.container.p-0` (sin los 15px laterales
   que main.css aplica a `.container` a partir de 1024px), de modo que el
   cuadro gris de la barra superior ocupa los 1320px completos. En cambio,
   el cuerpo (`.gp-pagina > .container`) y el pie (`.site-footer .container`)
   conservaban esos 15px de relleno a cada lado y quedaban metidos hacia
   dentro respecto al cuadro del menú.

   Además, entre 1200 y 1500px la plantilla añadía `margin: 0 20px` (y entre
   1200 y 1300px `padding: 0 20px`) a `.header-area .header__wrap`, lo que
   descuadraba tanto la barra superior como el logotipo y el botón «Reservar
   Cita» de la barra fija que aparece al hacer scroll (`.stricked-menu`).

   Unificando el relleno a 0 en los contenedores y anulando el margen de
   `.header__wrap`, el cuadro de la primera barra, el logo y el botón de la
   segunda barra al scrollear, las cajas del cuerpo y el logo y columnas del
   footer comparten exactamente la misma línea guía izquierda y derecha. */
@media (min-width: 992px) {
  .gp-cabecera-clara .header-area .header__wrap {
    margin-left: 0;
    margin-right: 0;
  }

  .gp-cabecera-clara .stricked-menu .header__wrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .gp-cabecera-clara .gp-pagina > .container,
  .site-footer .container {
    padding-left: 0;
    padding-right: 0;
  }

  .site-footer .row {
    margin-left: 0;
    margin-right: 0;
  }

  .site-footer .row > *:first-child {
    padding-left: 0;
  }

  .site-footer .row > *:last-child {
    padding-right: 0;
  }

  .gp-cabecera-clara .stricked-menu,
  .site-footer .footer-links-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* En la cabecera flotante sobre el hero (Home) en pantallas medianas (992px - 1399px),
   la píldora no debe pegarse a los bordes del recuadro del hero: preserva 20px de margen
   a cada lado para flotar elegantemente dentro del contenedor redondeado. */
@media (min-width: 992px) and (max-width: 1399px) {
  .gp-cabecera-clara .header-area .xb-header.original .header__wrap {
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1500px) {
  .personal_therapist {
    margin-left: 20px;
    margin-right: 20px;
  }

  .personal_therapist .site-footer {
    margin-left: -20px;
    margin-right: -20px;
  }

  .gp-cabecera-clara .stricked-menu,
  .site-footer .footer-links-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ==========================================================================
   Pie de página (Footer) - Alineación milimétrica con la guía de la página
   ========================================================================== */
.site-footer .footer-links-section {
  padding: 80px 0 30px;
}

.site-footer .footer-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 30px;
}

.site-footer .footer-col-brand {
  flex: 0 1 300px;
  min-width: 190px;
}

.site-footer .footer-logo img {
  max-width: 220px;
  height: auto;
  display: block;
}

.site-footer .footer-tagline {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  opacity: 0.7;
  max-width: 290px;
  margin-bottom: 0;
}

.site-footer .footer-nav-cols {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin-left: auto;
}

.site-footer .footer-col-links,
.site-footer .footer-col-contact {
  flex: 0 0 auto;
}

.site-footer .footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  margin: 0;
}

.site-footer .footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer .footer-copyright p {
  font-size: 14px;
  color: #ffffff;
  opacity: 0.6;
  margin-bottom: 0;
}

.site-footer .footer-minimal-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-minimal-legal li {
  margin: 0 !important;
}

.site-footer .footer-minimal-legal li a {
  font-size: 14px;
  color: #ffffff;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.site-footer .footer-minimal-legal li a:hover {
  opacity: 1;
}

.site-footer .footer-minimal-links li {
  margin-bottom: 12px;
}

.site-footer .footer-minimal-links li a {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  font-size: 16px;
  text-decoration: none;
}

.site-footer .footer-minimal-links li a:hover {
  opacity: 1;
}

.site-footer .footer-minimal-links li a i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  margin-right: 10px;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-footer .footer-minimal-links li a:hover i {
  opacity: 1;
  transform: scale(1.1);
}

/* Responsividad fluida al colapsar (tablet grande / 992-1199px) */
@media (max-width: 1199px) {
  .site-footer .footer-nav-cols {
    gap: 40px;
  }
}

/* Tablet (768px - 991px): mantiene las 3 columnas alineadas horizontalmente */
@media (min-width: 768px) and (max-width: 991px) {
  .site-footer .footer-main-row {
    gap: 20px;
  }

  .site-footer .footer-nav-cols {
    gap: 28px;
  }

  .site-footer .footer-logo img {
    max-width: 180px;
  }

  .site-footer .footer-tagline {
    font-size: 14.5px;
    line-height: 22px;
    max-width: 230px;
  }

  .site-footer .footer-copyright p,
  .site-footer .footer-minimal-legal li a {
    font-size: 13.5px;
  }

  .site-footer .footer-minimal-legal {
    gap: 14px;
  }
}

@media (max-width: 991px) {
  .site-footer .container {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }

  .site-footer .footer-links-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* En móvil (<768px): logo arriba, enlaces lado a lado abajo, sin espacios vacíos ni desbordes */
@media (max-width: 767px) {
  .site-footer .footer-links-section {
    padding-top: 45px !important;
    padding-bottom: 25px !important;
  }

  .site-footer .footer-main-row {
    flex-direction: column;
    gap: 26px;
    margin-bottom: 30px !important;
  }

  .site-footer .footer-col-brand {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .site-footer .footer-logo {
    margin-bottom: 16px !important;
  }

  .site-footer .footer-logo img {
    max-width: 180px;
  }

  .site-footer .footer-tagline {
    max-width: 100%;
    font-size: 15px;
    line-height: 22px;
  }

  .site-footer .footer-nav-cols {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .site-footer .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 22px;
    padding-right: 55px; /* Evita que el botón flotante de volver arriba tape el texto */
  }

  .site-footer .footer-copyright p,
  .site-footer .footer-minimal-legal li a {
    font-size: 13px;
  }

  .site-footer .footer-minimal-legal {
    gap: 12px;
  }
}

/* Alineación horizontal en tablet y móvil (<=991px).
   El recuadro del navbar superior (#f3f3f2) y los elementos extremos del
   navbar fijo al scrollear (.stricked-menu: logo y botón/menú) deben medir y
   compartir exactamente el mismo ancho y las mismas guías laterales que los
   recuadros del cuerpo (.gp-pagina > .container). */
@media (max-width: 991px) {
  .gp-cabecera-clara .header-area .header__wrap {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    width: auto;
  }

  .gp-cabecera-clara .stricked-menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gp-cabecera-clara .stricked-menu .header__wrap {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }
}

/* Orden de elementos al colapsar: el botón de las 3 rayas pasa a estar a
   la derecha del botón de «Reservar Cita» a partir del punto de rotura
   (<=1199px) donde el menú principal se recoge en el botón de hamburguesa. */
@media (max-width: 1199px) {
  .header-area .header-btn {
    order: 2;
    margin-left: auto;
  }

  .header-area .header-bar-mobile {
    order: 3;
    margin-left: 14px;
  }
}

@media (max-width: 767px) {
  .header-area .header-bar-mobile {
    margin-left: auto;
  }
}

/* Hueco para la cabecera. La barra es `position: absolute`, así que no
   empuja al contenido y hay que reservarlo a mano.

   Cuidado con el cálculo: la frase de arriba (.hero-top-content) SÍ ocupa
   flujo, 68px, y el relleno de abajo se suma a eso. Es decir, el contenido
   arranca en 68 + padding, no en padding. Ignorarlo es lo que dejaba casi
   cien píxeles de aire donde yo creía que había treinta.

   El aire que queda bajo la barra debe ser el MISMO que queda sobre el pie
   e igual a la separación vertical entre cajas (60px en escritorio, 40px en
   tablet, 30px en móvil). Como arriba hay que descontar la barra y la frase,
   el relleno superior no es directo sino:
   aire + (fin de la barra) - (inicio del flujo).

     escritorio (>=1200) barra: 88 + 94 = termina en 182
                         relleno: 182 - 68 + 60 = 174   -> 60px de aire
     992-1199            barra: 88 + 82 = 170
                         relleno: 170 - 68 + 60 = 162   -> 60px de aire
     <=991 (tablet)      la frase de arriba se oculta, el flujo empieza en 0
                         barra: 25 + 82 = 107
                         relleno: 107 + 40 = 147        -> 40px de aire
     <=767 (móvil)       barra: 25 + 92 = 117
                         relleno: 117 + 30 = 147        -> 30px de aire */
.gp-pagina {
  padding-top: 174px;
  padding-bottom: 60px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .gp-pagina {
    padding-top: 162px;
  }
}

/* ==========================================================================
   Miga de pan
   ========================================================================== */
.gp-miga {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
}

.gp-miga a {
  color: inherit;
  text-decoration: none;
}

.gp-miga a:hover {
  text-decoration: underline;
}

.gp-miga span[aria-hidden] {
  opacity: 0.55;
}

/* ==========================================================================
   Bloque de presentación (Hero) - Reglas maestras aplicadas
   ========================================================================== */
.gp-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: center;
}

.gp-hero-titulo {
  font-family: var(--font-heading, serif);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.12;
  color: var(--color-heading, #304049);
  margin: 0 0 20px;
}

.gp-hero-texto {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 17px;
  line-height: 28px;
  color: #4a5c66;
  margin: 0 0 24px;
  max-width: 34em;
}

/* Pastillas de acreditación */
.gp-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(176, 97, 43, 0.18);
  border-radius: 999px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--color-default, #304049);
  background: #ffffff;
}

.gp-pastilla svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-primary, #b0612b);
}

/* Foto de Hero: proporción estándar 1.3/1, radio 18px y sombra sutil */
.gp-hero-foto {
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(48, 64, 73, 0.05);
}

.gp-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Encuadre para fotos de origen vertical en un hueco apaisado */
.gp-hero-foto--vertical img {
  object-position: center 33%;
}

/* ==========================================================================
   Bloques beige (enfoque y fundamentos)
   ========================================================================== */
.gp-panel {
  background: var(--gp-beige, #f3ebd6);
  border-radius: 20px;
  padding: 42px 38px;
  margin-top: 60px;
}

.gp-panel--azul {
  background: var(--gp-azul, #e3e7ea);
}

/* Antetítulo con rayita, como en la miga de pan */
.gp-antetitulo {
  margin: 0 0 10px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
}

.gp-antetitulo--tarjeta {
  margin-bottom: 10px;
}

.gp-enfoque {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: start;
}

.gp-enfoque-cita {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 0;
}

.gp-lista {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

/* Icono sobre disco blanco (52px unificado según reglas maestras) */
.gp-icono-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #ffffff;
  border-radius: 50%;
  color: var(--color-primary, #b0612b);
  border: 1px solid rgba(48, 64, 73, 0.1);
  box-shadow: 0 2px 10px rgba(48, 64, 73, 0.04);
  flex: none;
}

.gp-icono-circulo svg {
  width: 22px;
  height: 22px;
}

.gp-panel--azul .gp-icono-circulo {
  background: #ffffff;
  color: var(--color-primary, #b0612b);
  border: 1px solid rgba(48, 64, 73, 0.1);
  box-shadow: 0 4px 14px rgba(48, 64, 73, 0.05);
}

.gp-lista h3 {
  font-family: var(--font-heading, serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading, #304049);
  margin: 0 0 6px;
}

.gp-lista p {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  line-height: 25px;
  color: #55626a;
  margin: 0;
}

/* ==========================================================================
   Formación (4 tarjetas a lo largo de la página)
   ========================================================================== */
.gp-formacion {
  margin-top: 60px;
  width: 100%;
}

.gp-formacion-titulo {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  text-align: center;
  margin: 0 auto 32px;
}

.gp-formacion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-rejilla-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #afa894;
  box-shadow: none;
  height: 100%;
}

.gp-tarjeta-icono,
.gp-tarjeta .gp-icono-disco {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--color-heading, #304049);
  padding: 0;
  margin-bottom: 2px;
  flex: none;
}

.gp-tarjeta-icono svg,
.gp-tarjeta .gp-icono-disco svg {
  width: 26px;
  height: 26px;
  color: var(--color-heading, #304049);
  display: block;
}

/* Disco de icono (52px unificado según reglas maestras) */
.gp-icono-disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gp-beige, #f3ebd6);
  color: var(--color-primary, #b0612b);
  border: 1px solid rgba(176, 97, 43, 0.12);
  box-shadow: 0 2px 10px rgba(48, 64, 73, 0.04);
  flex: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.gp-icono-disco svg {
  width: 22px;
  height: 22px;
}

.gp-fundamento:hover .gp-icono-disco {
  background: var(--color-primary, #b0612b);
  color: #ffffff;
  transform: scale(1.06);
}

.gp-tarjeta p {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  line-height: 24px;
  color: #55626a;
  margin: 0;
}

.gp-tarjeta strong {
  display: block;
  font-family: var(--font-body, "Altone", sans-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-heading, #304049);
  margin-bottom: 6px;
  white-space: pre-line;
}

/* ==========================================================================
   Mis fundamentos clínicos (Feature-Section sobre fondo blanco)
   ========================================================================== */
.gp-fundamentos-seccion {
  margin-top: 70px;
  width: 100%;
}

.gp-fundamentos-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "visual titulo"
    "visual pasos";
  grid-template-rows: auto 1fr;
  column-gap: 36px;
  row-gap: 22px;
  align-items: stretch;
  min-height: 540px;
}

.gp-fundamentos-titulo-seccion {
  grid-area: titulo;
  font-family: var(--font-heading, serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  text-align: left;
  margin: 0;
  padding: 0;
}

.gp-fundamentos-pasos {
  grid-area: pasos;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 480px;
}

.gp-fundamentos-paso {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border-radius: 16px;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.25s ease;
}

.gp-fundamentos-paso--activo {
  background: #f3ebd6;
  box-shadow: none;
}

.gp-fundamentos-paso-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f2f5f7;
  color: #8c9ba3;
  border: none;
  box-shadow: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.gp-fundamentos-paso-badge svg {
  display: block;
  width: 16px;
  height: 16px;
}

.gp-fundamentos-paso--activo .gp-fundamentos-paso-badge {
  background: #ffffff;
  color: var(--color-primary, #b0612b);
  box-shadow: none;
}

.gp-fundamentos-paso-cuerpo {
  flex: 1;
  min-width: 0;
}

.gp-fundamentos-paso-titular {
  font-family: var(--font-heading, serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: #6d7d85;
  transition: color 0.25s ease;
}

.gp-fundamentos-paso--activo .gp-fundamentos-paso-titular {
  color: var(--color-heading, #304049);
}

.gp-fundamentos-paso-subtexto {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  margin: 3px 0 0;
  color: #8c9ba3;
  max-height: 26px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}

.gp-fundamentos-paso--activo .gp-fundamentos-paso-subtexto {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.gp-fundamentos-paso-detalle {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.22s ease, opacity 0.2s ease, margin-top 0.22s ease;
}

.gp-fundamentos-paso-detalle--visible {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
  transition: grid-template-rows 0.25s ease 0.04s, opacity 0.25s ease 0.04s, margin-top 0.25s ease 0.04s;
}

.gp-fundamentos-paso-detalle p {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 14px;
  line-height: 22px;
  color: #55626a;
  margin: 0;
  overflow: hidden;
  min-height: 0;
}

.gp-fundamentos-visual-col {
  grid-area: visual;
  width: 100%;
  height: 100%;
  display: flex;
}

.gp-fundamentos-foto-marco {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--gp-azul, #e3e7ea);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 56%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.4) 85%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 56%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.4) 85%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Velo difuminado suave en la parte inferior para fusionarse con el fondo blanco */
.gp-fundamentos-foto-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 54%,
    rgba(255, 255, 255, 0.35) 70%,
    rgba(255, 255, 255, 0.75) 85%,
    rgba(255, 255, 255, 0.96) 95%,
    #ffffff 100%
  );
  z-index: 3;
}

.gp-fundamentos-foto-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s ease, transform 0.6s ease;
  pointer-events: none;
}

.gp-fundamentos-foto-capa--activa {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.gp-fundamentos-foto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* ==========================================================================
   Tablet (<=991px)
   ========================================================================== */
@media (max-width: 991px) {
  .gp-pagina {
    padding-top: 147px;
    padding-bottom: 40px;
  }

  .gp-hero,
  .gp-enfoque {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* El texto va primero y la foto debajo, como en las reglas maestras */
  .gp-hero-foto {
    order: 2;
    aspect-ratio: 1200 / 896;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-formacion {
    margin-top: 40px;
  }

  .gp-formacion-titulo {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .gp-formacion-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .gp-tarjeta {
    padding: 24px 20px;
    gap: 14px;
  }

  .gp-panel {
    padding: 36px 30px;
    margin-top: 40px;
  }

  .gp-hero-titulo {
    font-size: 40px;
    line-height: 1.15;
  }

  .gp-hero-texto {
    font-size: 16px;
    line-height: 26px;
  }

  .gp-enfoque-cita {
    font-size: 28px;
    line-height: 1.25;
  }

  .gp-fundamentos-seccion {
    margin-top: 50px;
  }

  .gp-fundamentos-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "visual"
      "pasos";
    grid-template-rows: auto auto auto;
    row-gap: 20px;
    column-gap: 0;
    min-height: unset;
    align-items: start;
  }

  .gp-fundamentos-visual-col {
    height: auto;
    display: block;
  }

  .gp-fundamentos-titulo-seccion {
    font-size: 28px;
    line-height: 1.2;
    text-align: left;
    margin: 0;
  }

  .gp-fundamentos-foto-marco {
    aspect-ratio: 1200 / 896;
    border-radius: 16px;
    min-height: unset;
    height: auto;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
  }

  .gp-fundamentos-foto-marco::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.4) 78%,
      rgba(255, 255, 255, 0.85) 90%,
      #ffffff 100%
    );
  }

  .gp-fundamentos-pasos {
    min-height: unset;
  }

  .gp-fundamentos-paso {
    padding: 18px 20px;
  }
}

/* ==========================================================================
   Móvil (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
  .gp-pagina {
    padding-top: 147px;
    padding-bottom: 30px;
  }

  .gp-hero {
    gap: 24px;
  }

  .gp-hero-foto {
    order: 2;
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-hero-titulo {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .gp-hero-texto {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .gp-panel {
    padding: 28px 20px;
    border-radius: 16px;
    margin-top: 30px;
  }

  .gp-enfoque {
    gap: 24px;
  }

  .gp-enfoque-cita {
    font-size: 24px;
    line-height: 1.25;
  }

  .gp-formacion {
    margin-top: 30px;
  }

  .gp-formacion-titulo {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .gp-formacion-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gp-fundamentos-seccion {
    margin-top: 40px;
  }

  .gp-fundamentos-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "visual"
      "pasos";
    grid-template-rows: auto auto auto;
    row-gap: 16px;
    column-gap: 0;
    min-height: unset;
    align-items: start;
  }

  .gp-fundamentos-visual-col {
    height: auto;
    display: block;
  }

  .gp-fundamentos-titulo-seccion {
    font-size: 26px;
    line-height: 1.2;
    text-align: left;
    margin: 0;
  }

  .gp-fundamentos-foto-marco {
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    min-height: unset;
    height: auto;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
  }

  .gp-fundamentos-foto-marco::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.4) 78%,
      rgba(255, 255, 255, 0.85) 90%,
      #ffffff 100%
    );
  }

  .gp-fundamentos-pasos {
    min-height: unset;
  }

  .gp-fundamentos-paso {
    padding: 16px 16px;
    gap: 14px;
    border-radius: 14px;
  }

  .gp-fundamentos-paso-badge {
    width: 32px;
    height: 32px;
  }

  .gp-fundamentos-paso-badge svg {
    width: 14px;
    height: 14px;
  }

  .gp-fundamentos-paso-titular {
    font-size: 20px;
  }

  .gp-fundamentos-paso-subtexto {
    font-size: 14px;
  }

  .gp-fundamentos-paso-detalle p {
    font-size: 13.5px;
    line-height: 21px;
  }

  .gp-rejilla-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gp-icono-circulo,
  .gp-icono-disco {
    width: 44px;
    height: 44px;
  }

  .gp-icono-circulo svg,
  .gp-icono-disco svg {
    width: 19px;
    height: 19px;
  }

  .gp-lista {
    gap: 20px;
  }

  .gp-lista li {
    gap: 16px;
  }

  .gp-lista h3 {
    font-size: 19px;
    margin-bottom: 4px;
  }

  .gp-lista p {
    font-size: 14.5px;
    line-height: 23px;
  }

  .gp-tarjeta {
    padding: 20px 18px;
    border-radius: 14px;
    gap: 16px;
  }

  .gp-tarjeta p {
    font-size: 14.5px;
    line-height: 23px;
  }

  .gp-pastillas {
    gap: 8px;
  }

  .gp-pastilla {
    padding: 7px 13px;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   Servicios

   Reutiliza casi todo lo de arriba: la miga, la barra clara, los paneles y
   las tarjetas. Lo que sigue es solo lo que esta página añade.
   ========================================================================== */

/* El panel de áreas va en el azul grisáceo de la paleta, el mismo que usa
   la home en «Áreas de Trabajo», para que los dos bloques se reconozcan
   como el mismo tipo de contenido. */
.gp-panel--azul {
  background: var(--gp-azul, #d7dde2);
}

.gp-panel-cabecera {
  text-align: center;
  max-width: 44em;
  margin: 0 auto 40px;
}

/* El antetítulo general es flex con la rayita; aquí va centrado y solo. */
.gp-panel-cabecera .gp-antetitulo {
  justify-content: center;
}

.gp-panel-titulo {
  font-family: var(--font-heading, serif);
  font-size: 40px;
  line-height: 1.15;
  color: var(--color-heading, #304049);
  margin: 0 0 14px;
}

.gp-panel-texto {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-default, #304049);
  margin: 0;
}

/* Rejilla de áreas: tres arriba y dos abajo, como en el diseño.

   Son cinco tarjetas, así que con tres columnas la segunda fila dejaría un
   tercio vacío a la derecha. El truco es una rejilla de SEIS columnas: las
   tres primeras ocupan dos cada una (3 × 2 = 6) y las dos últimas, tres
   cada una (2 × 3 = 6). Las dos filas quedan llenas y las de abajo salen
   más anchas, que es justo lo que pide el diseño. */
.gp-areas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-areas li {
  grid-column: span 2;
}

.gp-areas li:nth-child(4),
.gp-areas li:nth-child(5) {
  grid-column: span 3;
}

.gp-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border-radius: 14px;
  background: #fff;
  height: 100%;
}

.gp-area-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gp-area h3 {
  font-family: var(--font-heading, serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 0;
}

.gp-area p {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-default, #304049);
  margin: 0;
}

/* Modalidades: cuatro fichas con el dato debajo de la etiqueta. */
.gp-modalidades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-modalidad {
  padding: 26px;
  border-radius: 14px;
  background: #fff;
}

.gp-modalidad-icono,
.gp-modalidad .gp-icono-disco {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--color-primary, #b0612b);
  margin-bottom: 14px;
  padding: 0;
  flex: none;
}

.gp-modalidad-icono svg,
.gp-modalidad .gp-icono-disco svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary, #b0612b);
  display: block;
}

.gp-modalidad h3 {
  font-family: var(--font-heading, serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 0 0 6px;
}

.gp-modalidad p {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-default, #304049);
  margin: 0;
}

/* Pie del panel de modalidades. */
.gp-modalidades-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 0;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-default, #304049);
}

.gp-modalidades-nota-icono,
.gp-modalidades-nota .gp-icono-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--color-default, #304049) !important;
  padding: 0;
  flex-shrink: 0;
}

.gp-modalidades-nota-icono svg,
.gp-modalidades-nota .gp-icono-circulo svg {
  width: 20px;
  height: 20px;
  color: var(--color-default, #304049) !important;
  display: block;
}

/* Cierre: foto a la izquierda, texto y botón a la derecha (directo sobre fondo blanco). */
.gp-cierre-seccion {
  margin-top: 60px;
  width: 100%;
}

.gp-cierre {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items: center;
}

.gp-cierre-foto {
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(48, 64, 73, 0.05);
}

.gp-cierre-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.6s var(--easing, ease);
}

.gp-cierre-foto:hover img {
  transform: scale(1.03);
}

.gp-cierre-titulo {
  font-family: var(--font-heading, serif);
  font-size: 36px;
  line-height: 1.15;
  color: var(--color-heading, #304049);
  margin: 0 0 16px;
}

.gp-cierre-texto {
  font-size: 16px;
  line-height: 27px;
  color: var(--color-default, #304049);
  margin: 0 0 30px;
}

@media (max-width: 991px) {
  /* Se deshace la rejilla de seis: a dos columnas, todas las tarjetas
     miden lo mismo y la quinta ocupa la fila entera. */
  .gp-areas {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-areas li,
  .gp-areas li:nth-child(4),
  .gp-areas li:nth-child(5) {
    grid-column: span 1;
  }

  .gp-areas li:nth-child(5) {
    grid-column: span 2;
  }

  .gp-modalidades {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-cierre-seccion {
    margin-top: 40px;
  }

  .gp-cierre {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gp-panel-titulo {
    font-size: 32px;
  }

  .gp-cierre-titulo {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .gp-areas,
  .gp-modalidades {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gp-areas li,
  .gp-areas li:nth-child(4),
  .gp-areas li:nth-child(5) {
    grid-column: span 1;
  }

  .gp-panel-titulo {
    font-size: 27px;
  }

  .gp-cierre-titulo {
    font-size: 26px;
  }

  .gp-area,
  .gp-modalidad {
    padding: 22px 20px;
  }

  /* La nota del pie en móvil: icono siempre a la izquierda alineado con la primera línea,
     texto fluido en dos líneas sin desbordamiento. */
  .gp-modalidades-nota {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
    margin-top: 24px;
    font-size: 14px;
    line-height: 22px;
  }

  .gp-modalidades-nota-icono {
    margin-top: 2px;
    flex-shrink: 0;
  }

  .gp-modalidades-nota span:last-child {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   Blog
   ========================================================================== */

.gp-blog-filtros {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 55px;
}

.gp-blog-buscador {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 200px;
  max-width: 300px;
  width: 100%;
}

.gp-blog-buscador svg {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  color: var(--color-primary, #b0612b);
  pointer-events: none;
}

.gp-blog-buscador input {
  width: 100%;
  padding: 12px 18px 12px 46px;
  border: 1px solid var(--gp-borde);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 14.5px;
  color: var(--color-default, #304049);
}

.gp-blog-buscador input:focus {
  outline: none;
  border-color: var(--color-primary, #b0612b);
}

/* El navegador dibuja su propia aspa en los input[type=search]; aquí
   desentona con la pastilla, así que se retira. */
.gp-blog-buscador input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.gp-blog-categorias {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
}

/* Las categorías son BOTONES, no enlaces: filtran en el sitio y no llevan
   a ninguna parte. Un enlace prometería una URL que no existe. */
.gp-chip {
  padding: 10px 18px;
  border: 1px solid var(--gp-borde);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 13.5px;
  color: var(--color-default, #304049);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--easing, ease), color 0.3s var(--easing, ease),
    border-color 0.3s var(--easing, ease);
}

.gp-chip:hover {
  border-color: var(--color-primary, #b0612b);
  color: var(--color-primary, #b0612b);
}

.gp-chip--activo,
.gp-chip--activo:hover {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
}

.gp-blog-vacio {
  margin: 50px 0;
  text-align: center;
  font-size: 16px;
  color: var(--color-default, #304049);
}

/* Etiqueta de categoría. Se usa en el destacado y sobre la foto de cada
   ficha, de ahí el fondo opaco. */
.gp-etiqueta {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gp-beige);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading, #304049);
}

.gp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-default, #304049);
  opacity: 0.7;
}

/* --- Artículo destacado --- */
.gp-destacado {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 36px;
  align-items: center;
  margin-top: 40px;
  padding: 26px;
  border-radius: 18px;
  background: var(--gp-beige);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s var(--easing, ease);
}

.gp-destacado:hover {
  box-shadow: 0 14px 32px rgba(48, 64, 73, 0.09);
}

/* El badge de la entrada destacada lleva stroke / borde */
.gp-destacado .gp-etiqueta {
  background: transparent;
  border: 1px solid var(--color-heading, #304049);
  color: var(--color-heading, #304049);
}

.gp-destacado-foto {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

.gp-destacado-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing, ease);
}

.gp-destacado:hover .gp-destacado-foto img {
  transform: scale(1.04);
}

.gp-destacado-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.gp-destacado-titulo {
  font-family: var(--font-heading, serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
}

.gp-destacado-extracto {
  font-size: 15px;
  line-height: 25px;
  color: var(--color-default, #304049);
}

.gp-destacado-leer-mas {
  display: inline-block;
  color: var(--color-primary, #b0612b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
  transition: color 0.2s var(--easing, ease);
}

.gp-destacado:hover .gp-destacado-leer-mas {
  color: var(--color-secondary, #2a383f);
}

/* --- Rejilla de artículos --- */
#articulos-listado,
.gp-blog-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 70px 0 26px;
  scroll-margin-top: 110px;
}

.gp-blog-cabecera h2 {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  margin: 0;
}

.gp-articulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-articulo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 14px 14px 22px;
  border: 1px solid var(--gp-borde);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s var(--easing, ease);
}

.gp-articulo:hover {
  box-shadow: 0 12px 28px rgba(48, 64, 73, 0.08);
}

.gp-articulo-foto {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
}

.gp-articulo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing, ease);
}

.gp-articulo:hover .gp-articulo-foto img {
  transform: scale(1.04);
}

/* Sobre la foto, la etiqueta necesita fondo blanco: el beige no se
   distingue de una imagen cálida. */
.gp-articulo-foto .gp-etiqueta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #fff;
}

.gp-articulo-titulo {
  flex: 1;
  padding: 0 8px;
  font-family: var(--font-heading, serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-heading, #304049);
}

.gp-articulo .gp-meta {
  padding: 0 8px;
}

/* --- Paginación del blog (máx 6 cards por página) --- */
.gp-blog-paginacion {
  margin-top: 55px;
  display: flex;
  justify-content: center;
}

.gp-blog-paginacion ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-paginacion-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gp-borde, rgba(48, 64, 73, 0.3));
  background: #fff;
  color: var(--color-heading, #304049);
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--easing, ease);
}

.gp-paginacion-btn:hover {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
}

.gp-paginacion-btn.current_page {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
  cursor: default;
}

.gp-paginacion-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gp-paginacion-flecha svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

@media (max-width: 991px) {
  .gp-articulos {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-destacado {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .gp-destacado-foto {
    aspect-ratio: 16 / 9;
  }

  .gp-blog-cabecera {
    margin-top: 50px;
  }

  .gp-blog-cabecera h2 {
    font-size: 27px;
  }
}

/* Tablet (768px a 991px): se mantiene en la MISMA LINEA sin desnivel */
@media (min-width: 768px) and (max-width: 991px) {
  .gp-blog-filtros {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 40px;
  }

  .gp-blog-buscador {
    flex: 1 1 180px;
    min-width: 150px;
    max-width: 210px;
  }

  .gp-blog-buscador svg {
    left: 14px;
    width: 16px;
    height: 16px;
  }

  .gp-blog-buscador input {
    padding: 10px 12px 10px 38px;
    font-size: 13px;
  }

  .gp-blog-categorias {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    justify-content: flex-end;
  }

  .gp-chip {
    padding: 8px 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 767px) {
  .gp-articulos {
    grid-template-columns: 1fr;
  }

  .gp-blog-filtros {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .gp-blog-buscador {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .gp-blog-buscador input {
    padding: 12px 18px 12px 46px;
    font-size: 14px;
  }

  /* En pantallas móviles angostas: 2 líneas equilibradas (2x2) con espacios adecuados */
  .gp-blog-categorias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-left: 0;
  }

  .gp-blog-categorias .gp-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11px 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .gp-destacado-titulo {
    font-size: 22px;
  }

  .gp-blog-cabecera h2 {
    font-size: 24px;
  }

  .gp-paginacion-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Contacto
   ========================================================================== */

@font-face {
  font-family: "Altone";
  src: url("/assets/fonts/Altone-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Hero específico de contacto: proporción y tamaño de titular */
/* El hueco baja de los 60px del hero general a 32, para igualar el de las
   cajas de abajo. Es la otra mitad de la alineación: si aquí se quedara en
   60, la foto y la caja de la derecha empezarían en columnas distintas. */
.gp-hero--contacto {
  gap: 32px;
}

.gp-hero--contacto .gp-hero-titulo {
  font-family: var(--font-heading, serif);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.12;
  margin-bottom: 20px;
}

.gp-hero--contacto .gp-hero-texto {
  font-size: 17px;
  line-height: 28px;
  color: #4a5c66;
  margin-bottom: 0;
}

.gp-hero-foto--contacto {
  aspect-ratio: 1.3 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(48, 64, 73, 0.05);
}

.gp-hero-foto--contacto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Rejilla central: dos paneles (formulario y canales de contacto) */
/* Misma proporción y mismo hueco que el hero de esta página: así la caja
   de «Otras formas de contacto» cae justo debajo de la foto, con su mismo
   ancho, y el borde derecho del bloque superior continúa en el inferior.

   Las dos rejillas TIENEN que coincidir en las dos cosas. Con proporciones
   iguales pero huecos distintos, el punto de corte cae en sitios distintos
   según el ancho de la ventana: coincidiría en un monitor y no en otro. */
.gp-contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  margin-top: 60px;
  align-items: stretch;
}

#formulario,
.gp-contacto-panel {
  border-radius: 20px;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 110px;
}

.gp-contacto-panel--azul {
  background: var(--gp-azul, #e3e7ea);
}

.gp-contacto-panel--beige {
  background: var(--gp-beige, #f3ebd6);
}

/* Columna derecha: dos cajas apiladas. El hueco entre ellas es el MISMO que
   separa las dos columnas, así el espaciado de la sección se lee como una
   sola retícula y no como dos decisiones distintas. */
.gp-contacto-lateral {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* La segunda caja se estira para ocupar lo que sobre, de modo que la
   columna derecha termina justo a la altura del formulario. Sin esto, la
   altura dependería del largo del texto y el bloque quedaría descuadrado
   en cuanto alguien edite una palabra. */
.gp-contacto-lateral .gp-contacto-primer-paso {
  flex: 1;
  display: grid;
}

.gp-contacto-panel-cabecera {
  margin-bottom: 26px;
}

.gp-contacto-panel-titulo {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  margin: 0 0 8px;
  font-weight: 500;
}

.gp-contacto-panel-subtitulo {
  font-size: 15px;
  line-height: 1.5;
  color: #556772;
  margin: 0;
}

/* Tarjeta interior blanca del formulario */
.gp-contacto-caja-form {
  background: #ffffff;
  border-radius: 16px;
  padding: 34px 30px 28px;
  box-shadow: 0 4px 20px rgba(48, 64, 73, 0.03);
  flex: 1;
}

/* Campos de entrada con línea inferior minimalista */
.gp-contacto-campo {
  margin-bottom: 20px;
}

.gp-contacto-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #d5dadc !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 10px !important;
  height: auto !important;
  font-size: 15px;
  color: var(--color-heading, #304049);
  outline: none !important;
  transition: border-color 0.25s ease;
  font-family: inherit;
}

.gp-contacto-input:focus {
  border-bottom-color: var(--color-primary, #b0612b) !important;
  box-shadow: none !important;
  outline: none !important;
}

.gp-contacto-input::placeholder {
  color: #657782;
  font-size: 14.5px;
  opacity: 0.85;
}

.gp-contacto-textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #d5dadc !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 10px !important;
  font-size: 15px;
  color: var(--color-heading, #304049);
  outline: none !important;
  min-height: 85px;
  resize: vertical;
  border-radius: 0;
  font-family: inherit;
  transition: border-color 0.25s ease;
}

.gp-contacto-textarea:focus {
  border-bottom-color: var(--color-primary, #b0612b) !important;
  box-shadow: none !important;
  outline: none !important;
}

.gp-contacto-textarea::placeholder {
  color: #657782;
  font-size: 14.5px;
  opacity: 0.85;
}

/* Términos y privacidad */
.gp-contacto-terminos {
  margin-top: 18px;
  margin-bottom: 22px;
}

.gp-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.gp-checkbox-input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary, #b0612b);
  flex-shrink: 0;
  cursor: pointer;
}

.gp-checkbox-texto,
.gp-checkbox-texto a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-primary, #b0612b);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.gp-checkbox-texto a:hover {
  color: #8c4618;
}

/* Botón de envío terracota */
/* Separación del botón respecto de lo que tenga encima: los términos, o
   el aviso de error cuando aparece.

   El marcado traía `mt-24`, una utilidad que NO existe en la plantilla
   (van de cinco en cinco: mt-20, mt-25...), así que no aplicaba nada y el
   botón quedaba pegado al texto. El margen se declara aquí, que además es
   donde se busca. */
.gp-contacto-accion {
  margin-top: 28px;
}

.gp-contacto-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 28px;
  background: var(--color-primary, #b0612b);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(176, 97, 43, 0.25);
}

.gp-contacto-btn:hover {
  background: #995222;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(176, 97, 43, 0.35);
}

.gp-contacto-btn:active {
  transform: translateY(0);
}

.gp-contacto-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

.gp-contacto-btn.gp-btn-enviado {
  background: #2b7a4b;
  box-shadow: 0 4px 14px rgba(43, 122, 75, 0.25);
}

.gp-contacto-btn-flecha {
  display: inline-block;
  transition: transform 0.2s ease;
}

.gp-contacto-btn:hover .gp-contacto-btn-flecha {
  transform: translateX(3px);
}

/* Aviso reCAPTCHA */
.gp-contacto-recaptcha-wrap {
  margin-top: 16px;
}

.gp-contacto-recaptcha {
  font-size: 11.5px;
  line-height: 1.5;
  color: #8c9ba5;
  margin: 0;
  text-align: left;
}

.gp-contacto-recaptcha a {
  color: inherit;
  text-decoration: underline;
}

.gp-contacto-recaptcha a:hover {
  color: var(--color-heading, #304049);
}

/* Éxito y error */
/* Aviso de error del formulario.

   Sin recuadro: el mensaje va suelto, en el terracota de la marca. Un
   bloque rojo encima del botón pesaba más que el propio botón y convertía
   un "te falta el nombre" en algo más grave de lo que es.

   Vive aquí, junto al mensaje de éxito: son los dos estados del mismo
   formulario y tenerlos en hojas distintas garantiza que acaben
   desparejados. */
.gp-form-error {
  margin-top: 16px;
  font-size: 15px;
  line-height: 23px;
  color: var(--color-primary, #b0612b);
}

.gp-form-exito {
  padding: 12px 16px;
  background: #eef7f0;
  border-left: 4px solid #2b7a4b;
  color: #205c38;
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.4;
}

/* Vías de contacto en columna derecha */
.gp-contacto-vias {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.gp-contacto-vias li {
  display: flex;
  align-items: center;
  gap: 18px;
}

.gp-contacto-via-icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #b0612b);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(48, 64, 73, 0.04);
  border: 1px solid rgba(176, 97, 43, 0.12);
  transition: transform 0.3s var(--easing, ease), background-color 0.3s ease, color 0.3s ease;
}

.gp-contacto-vias li:hover .gp-contacto-via-icono {
  background: var(--color-primary, #b0612b);
  color: #ffffff;
  transform: scale(1.06);
}

.gp-contacto-via-icono svg {
  width: 22px;
  height: 22px;
}

.gp-contacto-via-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-contacto-via-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading, #304049);
}

.gp-contacto-via-valor {
  font-size: 14.5px;
  color: #55626a;
  line-height: 1.25;
}

.gp-contacto-via-link {
  font-size: 14.5px;
  color: var(--color-heading, #304049);
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.2s ease;
}

.gp-contacto-via-link:hover {
  color: var(--color-primary, #b0612b);
  text-decoration: underline;
}

.gp-contacto-via-link--resaltado {
  color: var(--color-primary, #b0612b);
  font-weight: 500;
}

.gp-contacto-redes-botones {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.gp-contacto-red-boton {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-heading, #304049);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(48, 64, 73, 0.12);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.gp-contacto-red-boton:hover {
  background: var(--color-primary, #b0612b);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(176, 97, 43, 0.28);
}

/* Tarjeta inferior: Primer paso */
/* Dejó de ser una tarjeta suelta al pie de la página para pasar a la
   columna derecha, así que ya no lleva margen propio: lo pone el `gap` de
   .gp-contacto-lateral. El relleno baja, porque ahora vive en media
   columna y no a todo lo ancho. */
.gp-contacto-primer-paso {
  margin-top: 0;
  background: var(--gp-beige, #f3ebd6);
  border-radius: 20px;
  padding: 26px 28px;
  width: 100%;
}

/* En escritorio (>=992px), las tres tarjetas de contacto deben aparecer
   al mismo tiempo. Como «El primer paso» queda físicamente más abajo en la
   columna derecha, WOW.js tardaría en dispararlo hasta que el usuario
   haga más scroll, dejando un hueco vacío. Al vincular su animación a la
   de la tarjeta superior (.gp-contacto-panel--beige.animated), los tres
   cuadrantes entran juntos en escritorio, mientras que en móvil (<=991px)
   cada tarjeta sigue disparándose individualmente al hacer scroll. */
@media (min-width: 992px) {
  .gp-contacto-panel--beige.animated + .gp-contacto-primer-paso,
  .gp-contacto-grid:has(.gp-contacto-panel--azul.animated) .gp-contacto-primer-paso {
    visibility: visible !important;
    animation-name: fadeInUp !important;
    animation-duration: 500ms !important;
    animation-delay: 100ms !important;
    animation-fill-mode: both !important;
  }
}

.gp-cierre--contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  width: 100%;
}

.gp-cierre--contacto .gp-cierre-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(48, 64, 73, 0.05);
}

.gp-cierre--contacto .gp-cierre-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gp-cierre--contacto .gp-cierre-contenido {
  min-width: 0;
  align-self: center;
}

.gp-cierre--contacto .gp-antetitulo {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
  margin-bottom: 10px;
}

.gp-cierre--contacto .gp-cierre-titulo {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  margin: 0 0 14px;
  font-weight: 500;
}

.gp-cierre--contacto .gp-cierre-texto {
  font-size: 15px;
  line-height: 25px;
  color: var(--color-default, #304049);
  margin: 0;
}

/* Contacto: adaptaciones tablet y móvil */
@media (max-width: 991px) {
  .gp-hero--contacto {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gp-hero--contacto .gp-hero-foto {
    order: 2;
    aspect-ratio: 1200 / 896;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-contacto-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  .gp-contacto-panel {
    padding: 36px 30px;
  }

  .gp-contacto-primer-paso {
    padding: 36px 30px;
    margin-top: 0;
  }

  .gp-cierre--contacto {
    grid-template-columns: 1fr;
    gap: 26px;
    height: auto;
  }

  .gp-cierre--contacto .gp-cierre-foto {
    aspect-ratio: 1200 / 896;
    height: auto;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .gp-hero--contacto .gp-hero-titulo {
    font-size: 32px;
    line-height: 1.15;
  }

  .gp-hero--contacto .gp-hero-texto {
    font-size: 15px;
    line-height: 24px;
  }

  .gp-hero--contacto .gp-hero-foto {
    max-width: 100%;
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    margin: 0;
    width: 100%;
  }

  .gp-contacto-grid {
    gap: 24px;
    margin-top: 30px;
  }

  .gp-contacto-lateral {
    gap: 24px;
  }

  .gp-contacto-panel {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .gp-contacto-panel-titulo {
    font-size: 26px;
  }

  .gp-contacto-panel-subtitulo {
    font-size: 14px;
  }

  .gp-contacto-caja-form {
    padding: 22px 18px 20px;
    border-radius: 14px;
  }

  .gp-contacto-vias {
    gap: 20px;
  }

  .gp-contacto-via-icono {
    width: 44px;
    height: 44px;
  }

  .gp-contacto-via-icono svg {
    width: 19px;
    height: 19px;
  }

  /* Sin margen propio: la separación con la caja de arriba la pone el
     `gap` de .gp-contacto-lateral, también cuando la rejilla se apila. */
  .gp-contacto-primer-paso {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .gp-cierre--contacto .gp-cierre-titulo {
    font-size: 24px;
  }

  .gp-cierre--contacto .gp-cierre-texto {
    font-size: 14.5px;
    line-height: 23px;
  }

  .gp-cierre--contacto .gp-cierre-foto {
    max-width: 100%;
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    margin: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Reacción al puntero

   Nada llamativo: son tarjetas informativas, no botones. La idea es que
   respondan lo justo para confirmar que el puntero está encima, con la
   misma curva (--easing) y la misma duración de 0.3s que usa el resto de
   la plantilla, para que no se noten de otra familia.
   ========================================================================== */
.gp-fundamento,
.gp-pastilla {
  transition: transform 0.3s var(--easing, ease), box-shadow 0.3s var(--easing, ease),
    border-color 0.3s var(--easing, ease);
}

.gp-icono-circulo,
.gp-icono-disco {
  transition: transform 0.3s var(--easing, ease), background 0.3s var(--easing, ease),
    color 0.3s var(--easing, ease);
}

/* Las tarjetas de fundamentos se levantan 3px. Lo suficiente para notarse, no tanto como
   para que la rejilla parezca que baila al recorrerla. */
.gp-fundamento:hover {
  box-shadow: 0 10px 26px rgba(48, 64, 73, 0.07);
}

/* El disco del icono invierte sus colores al pasar por su tarjeta: de
   terracota sobre beige a blanco sobre terracota. */
.gp-fundamento:hover .gp-icono-disco {
  background: var(--color-primary, #b0612b);
  color: #fff;
  transform: scale(1.06);
}

.gp-pastilla:hover {
  border-color: var(--color-primary, #b0612b);
}

/* El retrato, apenas un acercamiento. El recorte ya lo contiene la
   proporción fija de más arriba. */
.gp-hero-foto img {
  transition: transform 0.6s var(--easing, ease);
}

.gp-hero-foto:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   SISTEMA DE DISEÑO MAESTRO - REGLAS REUTILIZABLES (REFERENCIA CONTACTO)
   ==========================================================================
   Estándar de maquetación horizontal, vertical, tipografía, cajas y botones
   calibrado y aprobado en la página de Contacto para su reutilización
   en las demás secciones de la web.
   ========================================================================== */

/* 1. Miga de pan estándar */
.gp-miga-ref {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
}

.gp-miga-ref a {
  color: inherit;
  text-decoration: none;
}

.gp-miga-ref a:hover {
  text-decoration: underline;
}

.gp-miga-ref span[aria-hidden="true"] {
  opacity: 0.55;
}

/* 2. Hero estándar */
.gp-hero-ref {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: center;
}

.gp-hero-ref-titulo {
  font-family: var(--font-heading, serif);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.12;
  color: var(--color-heading, #304049);
  margin-bottom: 20px;
}

.gp-hero-ref-texto {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 17px;
  line-height: 28px;
  color: #4a5c66;
  margin-bottom: 0;
}

.gp-hero-ref-foto {
  aspect-ratio: 1.3 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(48, 64, 73, 0.05);
}

.gp-hero-ref-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 3. Rejilla principal de cuadrantes y separación vertical */
.gp-separacion-hero-ref {
  margin-top: 60px;
}

.gp-grid-2col-ref {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 60px;
}

.gp-columna-apilada-ref {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 4. Cajas, paneles y espaciados internos */
.gp-panel-ref {
  border-radius: 20px;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
}

.gp-panel-ref--beige {
  background-color: var(--gp-beige, #f3ebd6);
}

.gp-panel-ref--azul {
  background-color: var(--gp-azul, #e3e7ea);
}

.gp-panel-ref-cabecera {
  margin-bottom: 26px;
}

.gp-panel-ref-titulo {
  font-family: var(--font-heading, serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-heading, #304049);
  margin: 0 0 8px;
  font-weight: 500;
}

.gp-panel-ref-subtitulo {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #556772;
  margin: 0;
}

.gp-caja-interna-ref {
  background: #ffffff;
  border-radius: 16px;
  padding: 34px 30px 28px;
  box-shadow: 0 4px 20px rgba(48, 64, 73, 0.03);
  flex: 1;
}

.gp-subcard-ref {
  background: var(--gp-beige, #f3ebd6);
  border-radius: 20px;
  padding: 26px 28px;
  width: 100%;
}

.gp-subcard-grid-ref {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  width: 100%;
}

.gp-subcard-foto-ref {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(48, 64, 73, 0.05);
}

.gp-subcard-foto-ref img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gp-subcard-contenido-ref {
  min-width: 0;
  align-self: center;
}

/* 5. Tipografía secundaria y antetítulos */
.gp-antetitulo-ref {
  margin: 0 0 10px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
}

.gp-cuerpo-ref {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  line-height: 25px;
  color: #55626a;
  margin: 0;
}

/* 6. Botones estándar */
.gp-btn-primario-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background-color: var(--color-primary, #b0612b);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(176, 97, 43, 0.25);
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.gp-btn-primario-ref:hover {
  background-color: #995222;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(176, 97, 43, 0.35);
}

.gp-btn-primario-ref:active {
  transform: translateY(0);
}

.gp-btn-primario-ref:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

.gp-btn-circulo-azul-ref {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-heading, #304049);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(48, 64, 73, 0.12);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.gp-btn-circulo-azul-ref:hover {
  background-color: var(--color-primary, #b0612b);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(176, 97, 43, 0.28);
}

.gp-btn-circulo-blanco-ref {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #b0612b);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(48, 64, 73, 0.04);
  border: 1px solid rgba(176, 97, 43, 0.12);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.gp-btn-circulo-blanco-ref svg {
  width: 22px;
  height: 22px;
}

.gp-btn-circulo-blanco-ref:hover {
  background-color: var(--color-primary, #b0612b);
  color: #ffffff;
  transform: scale(1.06);
}

/* 7. Responsive: Tablet (<=991px) y Móvil (<=767px) */
@media (max-width: 991px) {
  .gp-hero-ref {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gp-hero-ref-foto {
    order: 2;
    aspect-ratio: 1200 / 896;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-grid-2col-ref {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  .gp-panel-ref {
    padding: 36px 30px;
  }

  .gp-subcard-ref {
    padding: 36px 30px;
  }

  .gp-subcard-grid-ref {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .gp-subcard-foto-ref {
    aspect-ratio: 1200 / 896;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .gp-hero-ref {
    gap: 24px;
  }

  .gp-hero-ref-titulo {
    font-size: 32px;
    line-height: 1.15;
  }

  .gp-hero-ref-texto {
    font-size: 15px;
    line-height: 24px;
  }

  .gp-hero-ref-foto {
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-grid-2col-ref {
    gap: 24px;
    margin-top: 30px;
  }

  .gp-columna-apilada-ref {
    gap: 24px;
  }

  .gp-panel-ref {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .gp-panel-ref-titulo {
    font-size: 26px;
  }

  .gp-panel-ref-subtitulo {
    font-size: 14px;
  }

  .gp-caja-interna-ref {
    padding: 22px 18px 20px;
    border-radius: 14px;
  }

  .gp-subcard-ref {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .gp-subcard-grid-ref {
    gap: 20px;
  }

  .gp-subcard-titulo-ref {
    font-size: 24px;
  }

  .gp-subcard-texto-ref {
    font-size: 14.5px;
    line-height: 23px;
  }

  .gp-subcard-foto-ref {
    aspect-ratio: 1200 / 896;
    border-radius: 14px;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .gp-btn-circulo-blanco-ref {
    width: 44px;
    height: 44px;
  }

  .gp-btn-circulo-blanco-ref svg {
    width: 19px;
    height: 19px;
  }
}

/* ==========================================================================
   Movimiento reducido

   WOW.js no consulta esta preferencia por su cuenta, así que se anula aquí
   para esta página: el contenido sigue apareciendo (WOW le devuelve la
   visibilidad al entrar en pantalla), pero sin recorrido. Los !important
   son necesarios porque animate.css declara las suyas igual.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gp-pagina .wow,
  .gp-pagina .animated {
    animation: none !important;
    visibility: visible !important;
  }

  .gp-tarjeta,
  .gp-fundamento,
  .gp-pastilla,
  .gp-icono-circulo,
  .gp-icono-disco,
  .gp-hero-foto img {
    transition: none;
  }

  .gp-fundamento:hover,
  .gp-pastilla:hover,
  .gp-hero-foto:hover img,
  .gp-fundamento:hover .gp-icono-disco {
    transform: none;
  }
}

/* ==========================================================================
   Animaciones progresivas (WOW.js)
   Los elementos conservan visibilidad por defecto para evitar pantallas vacías
   y WOW.js gestiona su animación al entrar en el viewport.
   ========================================================================== */
.wow.animated {
  visibility: visible;
}

#preloader {
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   Entrada de Blog (Artículo individual)
   Diseño propio alineado con el sistema maestro
   ========================================================================== */

.gp-articulo-pagina {
  padding-bottom: 90px;
}

.gp-articulo-cabecera {
  width: 100%;
  max-width: 100%;
  margin-bottom: 28px;
}

.gp-miga-categoria {
  color: var(--color-heading, #304049);
}

.gp-articulo-titulo-principal {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 38px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 14px 0 18px;
  letter-spacing: -0.01em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.gp-articulo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: #62717a;
}

.gp-articulo-meta-autor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-heading, #304049);
}

.gp-articulo-meta-autor-icono {
  display: inline-flex;
  color: var(--color-primary, #b0612b);
}

.gp-articulo-meta-sep {
  opacity: 0.45;
}

.gp-articulo-meta-fecha {
  color: #62717a;
}

.gp-articulo-badge {
  text-decoration: none;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gp-borde);
  color: var(--color-heading, #304049);
  transition: all 0.25s var(--easing, ease);
}

.gp-articulo-badge:hover {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
}

/* Portada destacada */
.gp-articulo-portada {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 44px;
  aspect-ratio: 21 / 9;
  background-color: var(--gp-navbar, #f3f3f2);
  border: 1px solid var(--gp-borde);
  box-shadow: 0 10px 30px rgba(48, 64, 73, 0.05);
}

.gp-articulo-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Layout dos columnas */
.gp-articulo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

/* Cuerpo del artículo */
.gp-articulo-cuerpo {
  min-width: 0;
}

.gp-articulo-intro {
  font-size: 19px;
  line-height: 1.75;
  color: var(--color-heading, #304049);
  margin-bottom: 30px;
}

/* TL;DR Box */
.gp-tldr-box {
  background: var(--gp-beige, #f3ebd6);
  border: 1px solid var(--gp-borde);
  border-radius: 16px;
  padding: 26px 30px;
  margin: 32px 0 36px;
  box-shadow: 0 4px 16px rgba(48, 64, 73, 0.03);
}

.gp-tldr-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--color-heading, #304049);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-tldr-lista {
  padding-left: 20px;
  margin: 0;
  color: var(--color-heading, #304049);
  line-height: 1.65;
  font-size: 15.5px;
}

.gp-tldr-lista li {
  margin-bottom: 10px;
}

.gp-tldr-lista li:last-child {
  margin-bottom: 0;
}

/* In-Article CTA */
.gp-articulo-cta {
  background: var(--gp-azul, #d7dde2);
  border: 1px solid #becbd6;
  border-radius: 16px;
  padding: 26px 30px;
  margin: 44px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gp-articulo-cta-texto {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading, #304049);
  line-height: 1.55;
  margin: 0;
}

/* Secciones y tipografía */
.gp-articulo-seccion {
  margin-top: 36px;
}

.gp-articulo-subtitulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 25px;
  line-height: 1.3;
  color: var(--color-heading, #304049);
  margin: 0 0 16px;
}

.gp-articulo-cuerpo p {
  font-size: 17px;
  line-height: 1.8;
  color: #40505a;
  margin-bottom: 20px;
}

.gp-articulo-cuerpo .gp-enlace {
  color: var(--color-primary, #b0612b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--easing, ease);
}

.gp-articulo-cuerpo .gp-enlace:hover {
  color: var(--color-secondary, #2a383f);
}

.gp-articulo-cita {
  background: #fbf9f5;
  border: 1px solid var(--gp-borde);
  border-radius: 16px;
  padding: 26px 30px;
  margin: 32px 0;
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-heading, #304049);
  font-style: italic;
}

.gp-articulo-cita p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.gp-articulo-cita-autor {
  display: block;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: var(--color-primary, #b0612b);
  margin-top: 12px;
}

.gp-articulo-seccion-fig {
  margin: 28px 0 32px;
}

.gp-articulo-seccion-img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 8px 24px rgba(48, 64, 73, 0.05);
}

/* Pie del artículo */
.gp-articulo-pie {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--gp-borde);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.gp-articulo-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gp-articulo-tags-label,
.gp-articulo-share-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-heading, #304049);
}

.gp-articulo-tags-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.gp-articulo-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gp-articulo-share-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-articulo-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gp-borde);
  background: #fff;
  color: var(--color-heading, #304049);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s var(--easing, ease);
}

.gp-articulo-share-btn:hover {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
  transform: translateY(-2px);
}

/* --- Sidebar del blog y del artículo --- */
.gp-articulo-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gp-sidebar-loading {
  padding: 30px;
  text-align: center;
  color: #7d8c95;
  font-size: 14px;
}

.gp-sidebar-widget {
  background: #fff;
  border: 1px solid var(--gp-borde);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(48, 64, 73, 0.03);
}

.gp-sidebar-widget--search {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.gp-sidebar-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 19px;
  color: var(--color-heading, #304049);
  margin: 0 0 16px;
}

.gp-sidebar-buscador {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.gp-sidebar-buscador svg {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  color: var(--color-primary, #b0612b);
  pointer-events: none;
}

.gp-sidebar-buscador input {
  width: 100%;
  padding: 12px 18px 12px 46px;
  border: 1px solid var(--gp-borde);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 14.5px;
  color: var(--color-default, #304049);
  transition: border-color 0.2s var(--easing, ease);
}

.gp-sidebar-buscador input:focus {
  outline: none;
  border-color: var(--color-primary, #b0612b);
}

.gp-sidebar-buscador input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.gp-sidebar-categorias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gp-sidebar-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-heading, #304049);
  text-decoration: none;
  transition: all 0.2s var(--easing, ease);
}

.gp-sidebar-cat-link:hover,
.gp-sidebar-cat-link.active {
  background: #fbf9f5;
  color: var(--color-primary, #b0612b);
}

.gp-sidebar-cat-count {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0ebe1;
  color: var(--color-heading, #304049);
  transition: all 0.2s;
}

.gp-sidebar-cat-link:hover .gp-sidebar-cat-count,
.gp-sidebar-cat-link.active .gp-sidebar-cat-count {
  background: var(--color-primary, #b0612b);
  color: #fff;
}

.gp-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gp-chip--sm {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.gp-sidebar-recientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gp-sidebar-post {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.gp-sidebar-post-foto {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gp-navbar, #f3f3f2);
}

.gp-sidebar-post-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--easing, ease);
}

.gp-sidebar-post:hover .gp-sidebar-post-foto img {
  transform: scale(1.08);
}

.gp-sidebar-post-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gp-sidebar-post-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-heading, #304049);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--easing, ease);
}

.gp-sidebar-post:hover .gp-sidebar-post-titulo {
  color: var(--color-primary, #b0612b);
}

.gp-sidebar-post-fecha {
  font-size: 12px;
  color: #7d8c95;
}

/* ==========================================================================
   Responsive Artículo: Tablet y Móvil
   ========================================================================== */

@media (max-width: 991px) {
  .gp-articulo-titulo-principal {
    font-size: 32px;
  }

  .gp-articulo-portada {
    aspect-ratio: 16 / 9;
    margin-bottom: 36px;
  }

  .gp-articulo-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gp-articulo-seccion-img {
    max-height: 300px;
  }

  .gp-articulo-sidebar {
    position: static;
    margin-top: 36px;
    display: block;
    width: 100%;
  }

  .gp-sidebar-widget--recientes {
    width: 100%;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-recientes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-post {
    align-items: flex-start;
    gap: 12px;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-post-foto {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 767px) {
  .gp-articulo-pagina {
    padding-bottom: 40px;
  }

  .gp-articulo-layout {
    gap: 28px;
  }

  .gp-articulo-cabecera {
    margin-bottom: 20px;
  }

  .gp-articulo-titulo-principal {
    font-size: 25px;
    margin: 10px 0 14px;
  }

  .gp-articulo-meta {
    gap: 8px;
    font-size: 13px;
  }

  .gp-articulo-portada {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    margin-bottom: 26px;
  }

  .gp-articulo-seccion-img {
    max-height: 220px;
    border-radius: 12px;
  }

  .gp-articulo-intro {
    font-size: 16.5px;
    margin-bottom: 24px;
  }

  .gp-tldr-box {
    padding: 20px 20px;
    border-radius: 14px;
    margin: 26px 0 30px;
  }

  .gp-articulo-cta {
    padding: 22px 20px;
    border-radius: 14px;
    margin: 32px 0 28px;
  }

  .gp-articulo-subtitulo {
    font-size: 21px;
    margin-bottom: 12px;
  }

  .gp-articulo-cuerpo p {
    font-size: 16px;
    line-height: 1.75;
  }

  .gp-articulo-cita {
    padding: 20px 20px;
    font-size: 17px;
    border-radius: 14px;
  }

  .gp-articulo-pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .gp-articulo-share {
    width: 100%;
    justify-content: flex-start;
  }

  .gp-articulo-sidebar {
    margin-top: 0;
  }

  .gp-sidebar-widget {
    padding: 20px;
    border-radius: 14px;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-recientes {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-post {
    align-items: center;
    gap: 14px;
  }

  .gp-sidebar-widget--recientes .gp-sidebar-post-foto {
    width: 68px;
    height: 68px;
  }
}

/* ==========================================================================
   Página de Inicio (Home) - Sistema de Diseño Maestro
   ========================================================================== */

.gp-home-pagina {
  padding-bottom: 0;
}

/* --- Hero con Foto a Fondo Completo y Reglas Tipográficas Nuevas --- */
.hero-style-one {
  position: relative;
  z-index: 1;
}

.hero-style-one .hero-inner {
  border-radius: 24px;
  overflow: hidden;
  min-height: 800px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 75px;
  padding-top: 180px;
  position: relative;
}

.hero-style-one .hero-one-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 63% center;
  z-index: -1;
  opacity: 1 !important;
  transform: none !important;
}

.hero-style-one .hero-one-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(22, 18, 14, 0.46) 0%,
    rgba(22, 18, 14, 0.26) 42%,
    rgba(22, 18, 14, 0) 76%
  );
  pointer-events: none;
}

.hero-style-one .container {
  position: relative;
  z-index: 2;
}

.gp-home-hero-content {
  max-width: 640px;
}

.gp-home-hero-titulo-full {
  font-family: var(--font-heading, "JazminAlt", serif) !important;
  font-size: 50px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 20px 0 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

.gp-home-hero-texto-full {
  font-family: var(--font-body, "Altone", sans-serif) !important;
  font-size: 18.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  max-width: 560px !important;
  margin: 0 0 32px 0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

/* Botón píldora blanco del hero (fondo blanco, texto oscuro, hover terracota) */
.gp-btn-hero-blanco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #ffffff !important;
  color: var(--color-heading, #304049) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body, "Altone", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 15px 34px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.25s var(--easing, ease) !important;
  cursor: pointer;
}

.gp-btn-hero-blanco:hover {
  background-color: var(--color-primary, #b0612b) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(176, 97, 43, 0.3) !important;
}

.gp-btn-hero-blanco svg {
  transition: transform 0.2s var(--easing, ease);
}

.gp-btn-hero-blanco:hover svg {
  transform: translateX(3px);
}

/* Botón primario terracota para las demás secciones */
.gp-btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-primary, #b0612b);
  color: #fff !important;
  border: 1.5px solid var(--color-primary, #b0612b);
  border-radius: 999px;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(176, 97, 43, 0.22);
  transition: all 0.25s var(--easing, ease);
  cursor: pointer;
  line-height: 1.4;
  box-sizing: border-box;
}

.gp-btn-primario:hover {
  background-color: var(--color-secondary, #304049);
  border-color: var(--color-secondary, #304049);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(48, 64, 73, 0.22);
}

.gp-btn-primario svg {
  transition: transform 0.2s var(--easing, ease);
}

.gp-btn-primario:hover svg {
  transform: translateX(3px);
}

/* --- Antetítulos y elementos comunes --- */
.gp-antetitulo {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
  margin-bottom: 14px;
}

.gp-antetitulo--blanco {
  color: rgba(255, 255, 255, 0.9);
}

.gp-seccion-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 36px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 0 0 18px;
}

.gp-seccion-titulo--blanco {
  color: #fff;
}

.gp-seccion-texto {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 17px;
  line-height: 1.75;
  color: #55646e;
  margin: 0;
}

.gp-seccion-texto--blanco {
  color: rgba(255, 255, 255, 0.9);
}

.gp-acento-linea {
  width: 48px;
  height: 3px;
  background: var(--color-primary, #b0612b);
  border-radius: 2px;
  margin-top: 24px;
}

.gp-home-pagina > section.gp-seccion-propia {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Sección 2: Mi Enfoque --- */
.gp-home-enfoque {
  margin-top: 0;
  padding: 60px 0 30px;
  background: #ffffff;
}

.gp-home-enfoque-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.gp-enfoque-items {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.gp-enfoque-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.gp-icono-disco--lg {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #faf4eb;
  border: 1px solid rgba(176, 97, 43, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #b0612b);
  box-shadow: 0 4px 12px rgba(176, 97, 43, 0.06);
}

.gp-icono-disco--lg svg {
  width: 24px;
  height: 24px;
}

.gp-enfoque-item-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 20px;
  color: var(--color-heading, #304049);
  margin: 0 0 8px;
}

.gp-enfoque-item-texto {
  font-size: 15.5px;
  line-height: 1.65;
  color: #55646e;
  margin: 0;
}

/* --- Sección 3: Mis Servicios (Áreas de Trabajo) --- */
.gp-home-servicios {
  padding: 30px 0;
  background: #ffffff;
}

.gp-home-servicios-caja {
  background: var(--gp-azul, #d7dde2);
  border-radius: 24px;
  padding: 68px 48px 60px;
}

.gp-home-servicios-cabecera {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.gp-home-servicios-cabecera .gp-antetitulo {
  margin-bottom: 12px;
}

.gp-home-servicios-cabecera .gp-seccion-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 38px;
  line-height: 1.25;
  color: var(--color-heading, #304049);
  margin: 0 0 16px;
}

.gp-home-servicios-cabecera .gp-seccion-texto {
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: #4a5963;
  margin: 0;
}

.gp-home-servicios-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.gp-servicio-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(48, 64, 73, 0.04);
  transition: all 0.28s var(--easing, ease);
}

.gp-servicio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(48, 64, 73, 0.12);
}

.gp-servicio-card-icono {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-primary, #b0612b);
  margin-bottom: 22px;
  transition: transform 0.25s var(--easing, ease);
}

.gp-servicio-card-icono svg {
  width: 38px;
  height: 38px;
}

.gp-servicio-card:hover .gp-servicio-card-icono {
  transform: scale(1.08);
}

.gp-servicio-card-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 17.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-heading, #304049);
  margin: 0;
}

.gp-btn-outline {
  padding: 13px 28px;
  border: 1.5px solid var(--color-primary, #b0612b);
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary, #b0612b) !important;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s var(--easing, ease);
  cursor: pointer;
  line-height: 1.4;
  box-sizing: border-box;
}

.gp-btn-outline:hover {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(176, 97, 43, 0.22);
}

.gp-btn-outline svg {
  transition: transform 0.2s var(--easing, ease);
}

.gp-btn-outline:hover svg {
  transform: translateX(3px);
}

/* --- Sección 4: Primer Paso --- */
.gp-home-primer-paso {
  padding: 30px 0;
  background: #ffffff;
}

.gp-home-primer-paso-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.gp-primer-paso-foto-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--gp-azul, #e3e7ea);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 58%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.4) 86%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 58%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.4) 86%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Velo difuminado suave en la parte inferior para fusionarse con el fondo blanco */
.gp-primer-paso-foto-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 54%,
    rgba(255, 255, 255, 0.35) 70%,
    rgba(255, 255, 255, 0.75) 86%,
    rgba(255, 255, 255, 0.96) 95%,
    #ffffff 100%
  );
  z-index: 3;
}

.gp-primer-paso-foto-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.gp-primer-paso-foto-capa--activa {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.gp-primer-paso-foto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.gp-primer-paso-contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.gp-primer-paso-contenido .gp-antetitulo {
  margin: 0 0 10px;
}

.gp-primer-paso-contenido .gp-seccion-titulo {
  margin: 0 0 14px;
}

.gp-primer-paso-contenido .gp-seccion-texto {
  margin: 0;
}

.gp-primer-paso-btn {
  margin-top: 22px;
}

/* --- Sección 5: Blog y Psicoeducación (Banner Terracota) --- */
.gp-home-blog-seccion {
  padding: 30px 0;
}

.gp-home-blog-banner {
  background: var(--color-primary, #b0612b);
  border-radius: 24px;
  padding: 64px 54px;
  color: #fff;
}

.gp-home-blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.gp-home-blog-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gp-home-blog-intro .gp-antetitulo {
  margin: 0 0 10px;
}

.gp-home-blog-intro .gp-seccion-titulo {
  margin: 0 0 14px;
}

.gp-home-blog-intro .gp-seccion-texto {
  margin: 0;
}

.gp-btn-blanco {
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary, #b0612b);
  font-family: var(--font-body, sans-serif);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 22px;
  transition: all 0.25s var(--easing, ease);
}

.gp-btn-blanco:hover {
  background: var(--color-secondary, #2a383f);
  color: #fff;
}

.gp-home-blog-cta-mobile {
  display: none;
}

.gp-home-faq-cta-mobile {
  display: none;
}

.gp-home-blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gp-home-blog-card {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s var(--easing, ease), box-shadow 0.3s var(--easing, ease);
}

.gp-home-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}

.gp-home-blog-card-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
}

.gp-home-blog-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gp-home-blog-card-contenido {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.gp-home-blog-card-fecha {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #b0612b);
  margin-top: 4px;
}

.gp-home-blog-card-titulo {
  font-family: var(--font-heading, "JazminAlt", serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-heading, #304049);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--easing, ease);
}

.gp-home-blog-card:hover .gp-home-blog-card-titulo {
  color: var(--color-primary, #b0612b);
}

/* --- Sección 6: Preguntas Frecuentes --- */
.gp-home-faq {
  padding: 30px 0;
  background: #ffffff;
}

.gp-home-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.gp-home-faq-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 120px;
}

.gp-home-faq-info .gp-antetitulo {
  margin: 0 0 10px;
}

.gp-home-faq-info .gp-seccion-titulo {
  margin: 0 0 14px;
}

.gp-home-faq-info .gp-seccion-texto {
  margin: 0;
}

.gp-home-faq-info .mt-20 {
  margin-top: 22px !important;
}

.gp-faq-acordeon {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gp-faq-item {
  background: #fff;
  border: 1px solid var(--gp-borde);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s var(--easing, ease), box-shadow 0.2s var(--easing, ease);
}

.gp-faq-item--abierto {
  border-color: var(--color-primary, #b0612b);
  box-shadow: 0 6px 18px rgba(48, 64, 73, 0.04);
}

.gp-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading, #304049);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--easing, ease);
}

.gp-faq-btn:hover {
  color: var(--color-primary, #b0612b);
}

.gp-faq-icono {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fbf9f5;
  border: 1px solid var(--gp-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #b0612b);
  transition: all 0.2s var(--easing, ease);
}

.gp-faq-item--abierto .gp-faq-icono {
  background: var(--color-primary, #b0612b);
  border-color: var(--color-primary, #b0612b);
  color: #fff;
}

.gp-faq-cuerpo {
  padding: 0 22px 20px;
}

.gp-faq-respuesta {
  font-size: 15.5px;
  line-height: 1.7;
  color: #55646e;
  margin: 0;
}

/* --- Sección 7: Cierre / Un Espacio Seguro --- */
.gp-home-cierre {
  padding: 30px 0 60px;
}

.gp-cierre-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  border-radius: 24px;
  overflow: hidden;
  border: none;
  box-shadow: 0 12px 36px rgba(48, 64, 73, 0.05);
}

.gp-home-cierre .gp-cierre-foto {
  position: relative;
  width: 100%;
  height: 100%;
  background: #faf4eb;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: unset;
}

.gp-home-cierre .gp-cierre-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.gp-cierre-contenido {
  background: var(--gp-beige, #f3ebd6);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.gp-cierre-contenido .gp-antetitulo {
  margin: 0 0 10px;
}

.gp-cierre-contenido .gp-seccion-titulo {
  margin: 0 0 14px;
}

.gp-cierre-contenido .gp-seccion-texto {
  margin: 0;
}

.gp-cierre-contenido .mt-15 {
  margin-top: 22px !important;
}

/* ==========================================================================
   Responsive: Home en Colapso (<=1199px: Tablet y Móvil)
   ========================================================================== */

@media (max-width: 1199px) {
  .gp-home-blog-seccion {
    padding: 20px 0;
  }

  .gp-home-blog-banner {
    padding: 44px 32px;
  }

  .gp-home-blog-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .gp-home-blog-intro {
    text-align: center;
    align-items: center;
  }

  .gp-home-blog-cta-desktop {
    display: none;
  }

  .gp-home-blog-cta-mobile {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .gp-home-blog-cta-mobile .gp-btn-blanco {
    margin-top: 0;
    align-self: center;
  }

  .gp-home-blog-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gp-home-blog-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .gp-home-blog-card-foto {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  .gp-home-blog-card-contenido {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .gp-home-blog-card-contenido .gp-home-blog-card-fecha {
    margin-top: 0;
    white-space: nowrap;
  }

  .gp-home-faq {
    padding: 20px 0;
  }

  .gp-home-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gp-home-faq-info {
    position: static;
  }

  .gp-home-faq-cta-desktop {
    display: none;
  }

  .gp-home-faq-cta-mobile {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .gp-home-faq-cta-mobile .gp-btn-outline {
    margin-top: 0;
  }
}

/* ==========================================================================
   Responsive: Home en Tablet y Móvil (<=991px)
   ========================================================================== */

@media (max-width: 991px) {
  .hero-style-one .hero-inner {
    min-height: 680px;
    padding-top: 150px;
    padding-bottom: 50px;
  }

  .hero-style-one .hero-one-image {
    background-position: 68% center;
  }

  .hero-style-one .hero-one-image::after {
    background: linear-gradient(
      180deg,
      rgba(22, 18, 14, 0.15) 0%,
      rgba(22, 18, 14, 0.44) 48%,
      rgba(22, 18, 14, 0.76) 100%
    );
  }

  .gp-home-hero-titulo-full {
    font-size: 40px !important;
  }

  .gp-home-hero-texto-full {
    font-size: 17px !important;
  }

  .gp-home-enfoque {
    padding: 40px 0 20px;
  }

  .gp-home-enfoque-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gp-home-servicios {
    padding: 20px 0;
  }

  .gp-home-servicios-caja {
    padding: 50px 32px 44px;
    border-radius: 22px;
  }

  .gp-home-servicios-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gp-home-primer-paso {
    padding: 20px 0;
  }

  .gp-home-primer-paso-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .gp-primer-paso-foto-marco {
    aspect-ratio: 16 / 11;
    min-height: unset;
    height: auto;
    border-radius: 16px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000000 0%,
      #000000 66%,
      rgba(0, 0, 0, 0.8) 78%,
      rgba(0, 0, 0, 0.35) 90%,
      transparent 100%
    );
  }

  .gp-primer-paso-foto-marco::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.4) 78%,
      rgba(255, 255, 255, 0.85) 90%,
      #ffffff 100%
    );
  }

  .gp-home-cierre {
    padding: 20px 0 40px;
  }

  .gp-cierre-card {
    grid-template-columns: 1fr;
  }

  .gp-home-cierre .gp-cierre-foto {
    height: 260px;
    min-height: 260px;
  }

  .gp-cierre-contenido {
    padding: 40px 32px;
  }
}

@media (max-width: 767px) {
  .hero-style-one .hero-inner {
    min-height: 580px;
    padding-top: 130px;
    padding-bottom: 36px;
    border-radius: 18px;
  }

  .hero-style-one .hero-one-image {
    background-position: 72% top;
  }

  .hero-style-one .hero-one-image::after {
    background: linear-gradient(
      180deg,
      rgba(22, 18, 14, 0.12) 0%,
      rgba(22, 18, 14, 0.48) 42%,
      rgba(22, 18, 14, 0.85) 100%
    );
  }

  .gp-home-hero-titulo-full {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .gp-home-hero-texto-full {
    font-size: 15.5px !important;
  }

  .gp-btn-hero-blanco,
  .hero-btn .gp-btn-primario {
    padding: 12px 24px !important;
    font-size: 14.5px !important;
  }

  .gp-seccion-titulo {
    font-size: 27px;
  }

  .gp-seccion-texto {
    font-size: 16px;
  }

  .gp-home-enfoque {
    padding: 30px 0 15px;
  }

  .gp-home-servicios {
    padding: 15px 0;
  }

  .gp-home-primer-paso {
    padding: 15px 0;
  }

  .gp-home-blog-seccion {
    padding: 15px 0;
  }

  .gp-home-faq {
    padding: 15px 0;
  }

  .gp-home-cierre {
    padding: 15px 0 30px;
  }

  .gp-home-servicios-caja {
    padding: 36px 18px 32px;
    border-radius: 20px;
  }

  .gp-home-servicios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .gp-home-servicios-grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gp-servicio-card {
    padding: 22px 16px;
    min-height: 140px;
    border-radius: 14px;
  }

  .gp-servicio-card-icono {
    margin-bottom: 14px;
  }

  .gp-servicio-card-icono svg {
    width: 32px;
    height: 32px;
  }

  .gp-servicio-card-titulo {
    font-size: 15px;
  }

  .gp-primer-paso-foto-marco {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .gp-home-blog-banner {
    padding: 32px 20px;
    border-radius: 18px;
  }

  .gp-home-blog-card {
    gap: 14px;
  }

  .gp-home-blog-card-foto {
    width: 90px;
    height: 90px;
  }

  .gp-faq-btn {
    padding: 16px 18px;
    font-size: 15px;
  }

  .gp-faq-cuerpo {
    padding: 0 18px 16px;
  }

  .gp-faq-respuesta {
    font-size: 14.5px;
  }

  .gp-cierre-card {
    border-radius: 18px;
  }

  .gp-home-cierre .gp-cierre-foto {
    height: 220px;
    min-height: 220px;
  }

  .gp-cierre-contenido {
    padding: 32px 22px;
  }
}



/* ── Página 404 ───────────────────────────────────────────────────────────

   Sin ilustración, sin numeral gigante y sin recuadro: fondo blanco y el
   contenido centrado, que es todo lo que hace falta para orientar a quien se
   ha perdido. El relleno superior lo pone .gp-pagina, que ya tiene calculado
   el hueco de la cabecera limpia.

   El alto mínimo evita que en pantallas altas el bloque quede flotando con
   el pie subido justo debajo. */
.gp-404 {
  display: flex;
  align-items: center;
  min-height: 72vh;
  background-color: #fff;
}

.gp-404-contenido {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.gp-404-titulo {
  margin: 0;
  font-family: var(--font-heading, "Civane Cond", serif);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.15;
  color: var(--color-heading, #304049);
}

/* .gp-acento-linea nace alineada a la izquierda porque en las demás páginas
   va bajo un titular alineado así. Aquí el bloque es centrado. */
.gp-404-acento {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gp-404-texto {
  margin: 20px auto 0;
  max-width: 48ch;
  font-family: var(--font-body, "Altone", sans-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-default, #304049);
}

.gp-404-botonera {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

@media (max-width: 575px) {
  /* En pantallas estrechas los dos botones uno encima de otro y a todo el
     ancho: en fila se parten las etiquetas y quedan dos cajas desiguales. */
  .gp-404-botonera {
    flex-direction: column;
    align-items: stretch;
  }

  .gp-404-botonera > a {
    width: 100%;
  }
}