/* Ajustes propios (no tocar bulma.min.css, es el build de Shuffle).
   Contenido más estrecho en escritorio: recorta el max-width del
   .container de Bulma en cada breakpoint. Las columnas de dentro son
   porcentuales respecto al contenedor, así que escalan juntas y la
   estructura de columnas no se rompe. Solo afecta a >=1024px (tablet
   y móvil quedan igual que antes). */

@media screen and (min-width: 1024px) {
  .container {
    max-width: 840px;
  }
}

@media screen and (min-width: 1216px) {
  .container:not(.is-max-desktop) {
    max-width: 1040px;
  }
}

@media screen and (min-width: 1408px) {
  .container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1200px;
  }
}

/* Espacio entre la cabecera y el inicio del contenido: en escritorio se
   deja el padding-top de .section de Bulma (3rem) más el margin-top propio
   de cada página (mt-5/mt-6/mt-0 en su fila de .columns), pero en móvil
   ese hueco combinado resulta excesivo. Se reduce solo el padding-top de
   la primera sección de cada página (identificada por ir justo después de
   la cabecera, .site-header en base.html) y se anula el margin-top de su
   fila de columnas. Al apuntar a "la sección justo después de la
   cabecera" en vez de a cada página, cubre también la 404 y cualquier
   página nueva sin tocar su plantilla. */
@media screen and (max-width: 768px) {
  .site-header + section {
    padding-top: 1.5rem;
  }

  .site-header + section > .container > .columns {
    margin-top: 0 !important;
  }
}

/* Botones en móvil: ninguno lleva modificador de tamaño, así que Bulma le
   da a cada uno el ancho de su propio texto. Cuando hay dos dentro de
   .buttons con textos de distinta longitud (p.ej. home, 404) y se apilan
   uno encima del otro (.buttons hace flex-wrap), quedan con anchos
   distintos. Se fuerza a TODOS los .button a ocupar el ancho completo en
   móvil —no solo a los que están dentro de .buttons— para que el criterio
   sea consistente también con los botones "sueltos" fuera de un grupo
   (el hero de como-trabajamos, las bandas CTA finales de cada página...). */
@media screen and (max-width: 768px) {
  .button {
    width: 100%;
  }

  .buttons .button {
    margin-right: 0 !important;
  }
}

/* Acordeón de FAQs (home y como-trabajamos, mismo markup duplicado en las
   dos plantillas): el botón de cada pregunta es un .button de Bulma, que
   trae white-space:nowrap por defecto y se hereda en el <span> del texto.
   Como el botón también es flex (is-flex), ese <span> es un flex-item con
   min-width:auto, así que no puede encogerse por debajo del ancho de una
   sola línea. Con una pregunta larga eso empuja el botón (y la página)
   más ancho que la pantalla, provocando scroll horizontal en móvil. Se
   permite el wrap normal del texto de la pregunta.

   Bulma además fija .button a height:2.5em (una sola línea de texto), así
   que con el wrap activado una pregunta de 2-3 líneas no cabía: el texto
   sobresalía del recuadro en vez de que el recuadro creciera. Se cambia a
   min-height (mismo alto mínimo que antes para las preguntas de una sola
   línea) para que la caja crezca con el contenido. */
.js-faq-toggle {
  white-space: normal;
  text-align: left;
  padding: 1rem 1.25rem;
  height: auto;
  min-height: 2.5em;
}

.js-faq-toggle span {
  white-space: normal;
  min-width: 0;
}

.js-faq-toggle svg {
  flex-shrink: 0;
}

/* Tipografía de titulares: solo los .title (h1-h6/.title/.subtitle-adjacent
   headings) pasan a Petrona. Todo lo demás (párrafos, .subtitle, botones,
   nav...) sigue heredando Inter desde `body` sin tocarlo. */
.title {
  font-family: 'Petrona', Georgia, 'Times New Roman', serif;
}

/* Página activa en el navbar (header y menú lateral móvil): solo color
   primario + más peso, sin fondo. Se evita el .is-active de Bulma a
   propósito (pone fondo blanco/gris según variante) para no competir
   visualmente con el botón sólido "Hablemos", que es la única caja del
   navbar. */
.navbar-item.is-current-page {
  color: #127ac4;
  font-weight: 600;
}

/* Enlaces del footer: reutilizan la clase .navbar-item de Bulma solo por
   el espaciado, pero eso trae el hover de navbar (fondo gris + color
   fijo). Aquí deben comportarse como un enlace normal: solo cambia el
   color del texto. */
.site-footer a.navbar-item:hover,
.site-footer a.navbar-item:focus {
  background-color: transparent;
  color: #127ac4;
}

/* Los enlaces del footer heredan el padding vertical de .navbar-item de
   Bulma (8px), pensado para un navbar horizontal, no para una lista
   apilada. Lo reducimos para que los enlaces de cada columna
   (Navegación/Legal/Contacto) queden más juntos entre sí. */
.site-footer a.navbar-item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Iconos sociales junto al copyright: el div que los envuelve es un
   bloque normal, así que reserva una "línea" de texto de alto mínimo
   aunque los iconos midan menos, desplazándolos respecto al texto.
   Convertirlo en flex hace que su alto sea exactamente el del icono. */
.site-footer .mt-5.is-align-items-center > div {
  display: flex;
  align-items: center;
}

.site-footer .mt-5.is-align-items-center > div img {
  display: block;
}

/* Icono social del footer (LinkedIn): color de texto normal, y azul
   primario al hover/focus, igual que el resto de enlaces del footer. Sin
   esto heredaría el azul de enlace por defecto de Bulma (regla `a{color}`). */
.site-footer .footer-social-link {
  color: #999895;
}

.site-footer .footer-social-link:hover,
.site-footer .footer-social-link:focus {
  color: #127ac4;
}

/* Footer en móvil: Navegación/Legal/Contacto van alineadas a
   izquierda/centro/derecha respectivamente, pensado para quedar en fila en
   tablet+. En móvil se apilan verticalmente, así que centramos las tres
   para que ninguna quede con el texto pegado a un lado. Los !important
   son necesarios porque las columnas usan helpers de Bulma
   (has-text-right, is-align-items-flex-end...) que ya son !important. */
@media screen and (max-width: 768px) {
  .site-footer .columns.is-justify-content-flex-end > .column {
    text-align: center !important;
  }

  .site-footer .columns.is-justify-content-flex-end > .column > .is-flex-direction-column {
    align-items: center !important;
  }

  /* Logo + eslogan: centrados en móvil (en tablet+ van a la izquierda). */
  .site-footer .footer-brand-col {
    text-align: center;
  }

  /* Los enlaces de Navegación y Contacto usan pl-0/pr-0 para pegarlos al
     borde en el layout de escritorio (izquierda/derecha). En móvil eso deja
     un padding asimétrico que descentra visualmente el texto aunque la caja
     esté centrada, así que restauramos el padding simétrico del resto
     (12px/0.75rem, igual que los enlaces de Legal, que no llevan pl-0/pr-0). */
  .site-footer .columns.is-justify-content-flex-end a.navbar-item {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Tarjetas de igual altura: se aplica añadiendo la clase
   "equal-height-cards" a la fila .columns que envuelve un grupo de
   .box (usado en home, como-trabajamos, que-resolvemos y
   sobre-partenope). Bulma ya estira las .column (flex, align-items:
   stretch por defecto), pero la .box de dentro es un bloque normal
   con altura según su propio contenido, así que no rellena esa
   columna estirada. Convertimos la .column en flex también y dejamos
   que la .box crezca (flex-grow) para llenarla, quedando siempre a la
   altura de la tarjeta más alta del grupo. */
.equal-height-cards .column {
  display: flex;
}

.equal-height-cards .box {
  flex-grow: 1;
}

/* Botón "volver arriba" (base.html): círculo fijo abajo a la derecha,
   siempre visible mientras hay scroll (main.js decide cuándo quitarle
   is-hidden). Fondo color primario e icono del mismo tono que el fondo de
   la página (#fcfbf8), con un borde fino de ese mismo color: sin él, al
   pasar por encima del banner final de cada página (hero is-primary, el
   mismo azul que el botón) el círculo se fundiría con el fondo y solo se
   vería la flecha suelta. */
.scroll-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid #fcfbf8;
  border-radius: 50%;
  background-color: #127ac4;
  color: #fcfbf8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.scroll-to-top:hover,
.scroll-to-top:focus {
  background-color: #0f689f;
  color: #fcfbf8;
}

/* Olas sutiles en los hero azules (hero is-primary: home, y luego
   como-trabajamos, que-resolvemos y sobre-partenope). Tres capas de
   curvas SVG blancas casi transparentes, en la parte inferior del
   bloque, moviéndose muy despacio de izquierda a derecha. Buscan evocar
   el faro / la idea de que el trabajo "vuelve a fluir", sin competir con
   el texto.

   Cómo se activa: añadir la clase "hero-waves" al .hero is-primary y,
   como primer hijo dentro de la section (antes de .hero-body), el
   marcado de .hero-waves-bg con las 3 capas .hero-waves-layer-N (ver
   index.html). El .hero-waves-bg es position:absolute, así que no
   afecta al layout flex del .hero ni a su altura (la marca el
   contenido de .hero-body como siempre).

   Cada <path> cubre un viewBox de 2400 de ancho = el mismo patrón de
   ola (periodo 1200) repetido dos veces seguidas. Animar translateX de
   -50% a 0% desplaza el trazado exactamente un periodo completo, así
   que el punto de bucle es invisible (no se nota el "salto").

   Las 3 capas usan baselines muy separados dentro del viewBox
   (104/68/32 sobre 120) para que se perciban como capas con
   profundidad, no como una sola mancha borrosa; y opacidades
   crecientes (6/12/20%) para dar contraste entre ellas: la capa 3 es
   la última en el DOM (queda encima visualmente) y la más visible.

   z-index: .hero-waves-bg es position:absolute con z-index:auto, y por
   las reglas de stacking de CSS un descendiente posicionado así se
   pinta por ENCIMA de los descendientes estáticos del mismo contexto
   (como .hero-body), da igual el orden en el HTML. En heroes bajos
   (p.ej. mobile, donde el texto ocupa más alto que los 160px) eso
   dejaría las olas tapando visualmente el texto. Se fuerza el orden
   correcto dándole z-index a ambos: las olas al fondo (0) y
   .hero-body por encima (1). */
.hero-waves {
  position: relative;
  overflow: hidden;
}

.hero-waves > .hero-body {
  position: relative;
  z-index: 1;
}

.hero-waves-bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  max-height: 60%;
  overflow: hidden;
  pointer-events: none;
}

.hero-waves-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  fill: #fff;
  animation-name: hero-waves-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-waves-layer-1 {
  opacity: 0.06;
  animation-duration: 22s;
}

.hero-waves-layer-2 {
  opacity: 0.12;
  animation-duration: 26s;
}

.hero-waves-layer-3 {
  opacity: 0.2;
  animation-duration: 30s;
}

@keyframes hero-waves-scroll {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-waves-layer {
    animation: none;
  }
}

/* Formulario de contacto (contacto.html). */

/* Oculta un elemento visualmente y para lectores de pantalla, pero lo deja
   presente en el DOM (display:none/visibility se evita a propósito). */
.field.is-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Columnas de contacto: usan is-desktop, así que por debajo de 1024px
   (el breakpoint en el que is-desktop deja de forzar flex) se apilan como
   bloques normales y solo queda el padding por defecto de .column entre
   ellas (0.75rem arriba y abajo = 1.5rem combinados) — poco para separar
   visualmente el bloque de texto del formulario que viene justo debajo. */
@media screen and (max-width: 1023px) {
  .contacto-columns > .column:first-child {
    margin-bottom: 2rem;
  }
}

/* Fila del checkbox de privacidad + botón "Cuéntame qué pasa": en
   escritorio van uno junto al otro (is-flex + space-between), pero con el
   ancho de un móvil el texto del checkbox no tiene sitio y acaba
   partiéndose en 3 líneas. Solo en móvil, se apila el checkbox encima del
   botón para que el texto tenga todo el ancho disponible. */
@media screen and (max-width: 768px) {
  .contacto-consent-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .contacto-consent-row .control:first-child {
    margin-bottom: 1rem;
  }
}