/* 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;
  }
}

/* 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;
}