/* Ajustes para móvil y tablet.

   Hoja aparte, cargada después de main.css. Aquí va TODO lo que solo aplica
   por debajo de cierto ancho; colores.css vuelve a ser solo color.

   Dos reglas de la casa:

   1. Se usan los puntos de corte de la propia plantilla (767 y 991), para no
      introducir una tercera convención que luego nadie recuerde.
   2. El escritorio no se toca. Todo va dentro de un `max-width`, así que por
      encima de 991px el sitio queda exactamente como estaba.

   Ancho objetivo: 360px (el más común hoy). Comprobado que nada desborda
   hasta 320px, que es el suelo razonable.

   La referencia de tamaños y espaciado es la HOME: se veía bien y es la que
   manda. Lo que hay aquí acerca el resto de páginas a ella.

   Hay unas pocas clases `gp-` definidas aquí fuera de toda media query
   (`.gp-hero-shape`, `.gp-btn-compacto`, `.gp-post-subtitulo`). Nacieron para
   sustituir estilos en línea que impedían cualquier ajuste por ancho, y se
   quedan junto a su versión móvil para poder leer las dos de una vez. */

/* ==========================================================================
   1. Tipografía: huecos que la plantilla dejó sin escalar
   ==========================================================================

   La plantilla define una escalera para casi todo (65 → 50 → 35, etc.), pero
   se dejó dos clases sin reducir en móvil. Las dos se usan en «Sobre mí», y
   son las que hacían que esa página se viera con el texto gigante al lado de
   la home. */
@media (max-width: 767px) {
  /* El párrafo de presentación. 30px en un móvil son ~4 palabras por línea. */
  .funfact-top-content {
    font-size: 20px;
    line-height: 1.45;
  }

  /* Subtítulo de bloque. Mismo caso. */
  .sec-title .xb-item--title-sm {
    font-size: 22px;
    line-height: 30px;
  }

  /* Titular de artículo dentro del cuerpo del blog. */
  .gp-post-subtitulo {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* Cabecera de páginas secundarias. La plantilla baja de 65 a 50 (≤1199) y a
   38 (≤767); se mantiene esa escalera en lugar de aplanarla de golpe. */
@media (max-width: 991px) {
  .breadcrumb-title {
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 15px;
  }
}

@media (max-width: 767px) {
  .breadcrumb-title {
    font-size: 32px;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   2. Botones
   ==========================================================================

   main.css da a .thm-btn un `min-width: 334px` sin reducirlo nunca en móvil.
   La plantilla lo compensa en los contextos que ella misma usa (270, 250,
   232px...), pero un .thm-btn suelto se queda en 334 y desborda una pantalla
   de 360 en cuanto lleva margen, y revienta del todo si hay dos en fila.

   `min(334px, 100%)` dice exactamente lo que hace falta: los 334px de
   siempre, pero nunca más ancho que su contenedor. Donde ya cabía no cambia
   nada; donde no, deja de salirse. Se prefiere a `width: 100%`, que habría
   cambiado el aspecto de botones que hoy están bien (los de la home).

   Se limita a los botones del contenido: la cabecera tiene su propia medida
   y tocarla rompería el encaje del menú. Los contextos que la plantilla ya
   resuelve (.funfact-btn, .service-btn...) tienen más especificidad y
   siguen mandando. */
@media (max-width: 767px) {
  main .thm-btn,
  footer .thm-btn {
    min-width: min(334px, 100%);
  }

  /* Filas de botones: que bajen uno debajo de otro en vez de salirse. */
  .gp-botonera {
    flex-wrap: wrap;
  }

  .gp-botonera .thm-btn {
    width: 100%;
  }
}

/* Llamada a la primera consulta, bajo el logotipo del menú móvil. Vive en
   esta hoja porque ese menú solo existe por debajo de xl: la plantilla lo
   oculta con .xb-hide-xl.

   Tiene que caber en UNA línea. El panel mide 300px fijos con 25px de
   relleno a cada lado, así que solo quedan 250px útiles. Midiendo el texto
   con la propia Civane Cond Demi (la que aplica con font-weight 600), el
   peor caso es el rumano: «Prima consultație gratuită» ocupa 198px a 16px.
   Con 16px de relleno quedan 218px de texto, o sea 20px de sobra.

   Por eso el texto de la pastilla es más corto que el de la barra superior
   y tiene su propia cadena (nav.ctaPill). La versión larga medía 277px y
   obligaba a bajar la letra a 14px, que se quedaba pequeña al lado del
   resto del menú.

   `nowrap` deja constancia de que la línea única es un requisito, no una
   casualidad: si alguien alarga el texto, se verá cortado en vez de
   partirse en dos sin que nadie se entere.

   `border-radius: 999px` en lugar de un valor concreto: sigue siendo una
   pastilla aunque alguien agrande la letra del navegador. */
.gp-pill-menu {
  display: block;
  margin: 20px 0 10px;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--color-primary, #b0612b);
  color: var(--color-white, #fff);
  font-family: var(--font-heading, serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s;
}

/* colores.css hace que los enlaces hereden el color del texto; aquí hay
   que reponerlo, porque sobre el terracota el texto va en blanco. */
.gp-pill-menu:hover,
.gp-pill-menu:focus {
  background: var(--color-secondary, #304049);
  color: var(--color-white, #fff);
}

/* Icono del selector de idioma, en lugar de la palabra «Idioma». Mismo
   trazado que usa rksolutions.es, para que las dos webs se reconozcan.
   El tamaño va aquí y no en atributos del SVG para poder afinarlo por
   ancho de pantalla sin tocar el componente. */
.gp-idioma svg {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
}

/* En el menú desplegable del móvil las líneas son más altas (46px), así
   que el icono necesita bajar un poco más para sentarse sobre la misma
   línea que el resto de entradas. */
.xb-menu-primary .gp-idioma svg {
  vertical-align: -6px;
}

/* Subtítulo de sección dentro de un artículo del blog. */
.gp-post-subtitulo {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: #304049;
  margin-bottom: 20px;
}

/* Botones pequeños de interlinkeado (páginas legales y blog). El relleno y
   el tamaño venían en un `style` en línea que ninguna media query alcanzaba;
   en escritorio se conservan exactamente los valores que ya tenían. */
.gp-btn-compacto {
  padding: 8px 22px;
  font-size: 14px;
}

/* En móvil sueltan el ancho mínimo de la plantilla y ganan altura, para que
   el área de pulsación no se quede corta. */
@media (max-width: 767px) {
  .gp-btn-compacto {
    min-width: 0;
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ==========================================================================
   3. Gráficos decorativos de las cabeceras
   ==========================================================================

   Iban con `maxWidth: 400px` en línea en Sobre mí, Blog y Contacto. Con el
   padding lateral de 20px, la columna mide ~320px en un móvil de 360: el
   gráfico sobresalía 80px. Ahora se mide contra su contenedor, así que
   encoge solo. */
.gp-hero-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 767px) {
  .gp-hero-shape {
    width: 60%;
    max-width: 200px;
  }
}

/* ==========================================================================
   4. Espaciado vertical uniforme (<=991px)
   ==========================================================================

   Venía de colores.css, donde no pintaba nada. Patrón tomado de la home:
   60px de relleno arriba y abajo por sección, 30px entre bloques. */
@media (max-width: 991px) {
  .page-title {
    min-height: 260px;
    padding-top: 140px;
    padding-bottom: 50px;
  }

  /* `.gp-seccion-propia` queda fuera a propósito: esta regla existe para
     las secciones que vienen de la plantilla, que traen rellenos pensados
     para escritorio. Las páginas que escribimos nosotros ya definen su
     propio espaciado, y aquí ganarían igualmente por especificidad —
     (0,2,2) frente a (0,1,0) de una clase suelta—, aunque su hoja cargue
     después. Toda página propia nueva debe llevar esta clase. */
  main > section:not(.hero):not(.page-title):not(.gp-seccion-propia),
  main > div > section:not(.hero):not(.page-title):not(.gp-seccion-propia) {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 30px;
    margin-bottom: 0;
  }

  main > section:last-of-type:not(.gp-seccion-propia),
  main > div > section:last-of-type:not(.gp-seccion-propia) {
    margin-bottom: 30px;
  }

  /* Excepciones de la home.

     Ojo con la especificidad: la regla de arriba es (0,2,2) porque los dos
     :not() cuentan como clase. Una excepción con dos clases pierde; por eso
     todas llevan tres.

     Las secciones que acaban en `radius-20` por arriba y recto por abajo
     están pensadas para quedar al ras de lo que viene después. Si se les
     añade relleno o margen inferior, aparece una franja que rompe ese
     encaje. */
  .about.pos-rel.radius-20,
  .gallery.pos-rel.radius-top-20 {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* El círculo decorativo de «Áreas de Trabajo». En escritorio queda detrás
     del titular; al estrecharse la columna se come el texto y asoma por los
     lados. Es puramente ornamental, así que en móvil se retira. */
  .service-circle-shape {
    display: none;
  }

  /* El carrusel de la galería va DESPUÉS del botón, no al principio de su
     sección: necesita su propia separación. (El de «Mi filosofía» sí abre
     sección, y por eso ese no lleva margen: se lo da el relleno.) */
  .gp-slider-galeria {
    margin-top: 45px;
  }

  /* «Mi filosofía terapéutica»: el relleno de la sección ya pone los 60px
     de arriba y abajo. El del contenedor interno (pt-150/pb-150) se sumaba
     al de la sección y dejaba 110px muertos bajo el botón «Sobre mí».
     Arriba se conserva solo la separación respecto de la foto. */
  .funfact-content.pt-150 {
    padding-top: 30px;
  }

  .funfact-content.pb-150 {
    padding-bottom: 0;
  }

  /* Secciones que en escritorio llevan px-50. */
  main > section.px-50 {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Márgenes internos pensados para escritorio. */
  .sec-title.mb-55,
  .sec-title.mb-60,
  .sec-title.mb-50,
  .sec-title.mb-40 {
    margin-bottom: 25px;
  }

  .funfact-bottom-image.mt-80 {
    margin-top: 30px;
  }

  .service-btn.mt-75,
  .funfact-btn.mt-60 {
    margin-top: 30px;
  }

  .row.mt-60 {
    margin-top: 35px;
  }

  .xb-item--meta-inner.mb-60 {
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   5. Red de seguridad contra el desbordamiento horizontal
   ==========================================================================

   Una sola palabra larga (un correo, una URL) basta para ensanchar la página
   y provocar scroll lateral, que es el defecto que más barato sale evitar y
   más caro sale descubrir tarde. */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  p,
  li,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}