/* ---------------------------------------------------------------- tipografía
   POPPINS SERVIDA DESDE AQUÍ, NO DESDE GOOGLE.
   Cinco archivos, subconjunto latino, 35 KB en total. Se hace así por tres
   motivos: se ahorran dos conexiones a servidores de terceros antes de poder
   pintar texto —en móvil eso son unas décimas—, la fuente entra en la caché
   del propio sitio, y no se manda la IP de cada visitante a Google, que es lo
   que exige el RGPD.
   `font-display: swap`: el texto se lee desde el primer momento con la letra
   del sistema y cambia a Poppins al llegar. Nunca hay un hueco en blanco. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * HEXÁGONO — Design kit
 * Réplica del sistema visual de hexagonoeirl.com, reconstruido desde los estilos
 * computados del sitio original (no desde el CSS del theme `marin`).
 * Valores medidos: original/medidas/home-1280.json
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* color */
  --hx-teal:        #00a8ad;
  --hx-blue:        #0092d1;
  --hx-green:       #00ba61;
  --hx-green-light: #17c476;
  --hx-navy:        #11104d;
  --hx-ink:         #252525;
  --hx-ink-strong:  #111111;
  --hx-grey-bg:     #f5f6fa;
  --hx-grey-alt:    #f6f6f6;
  --hx-black:       #000000;
  --hx-white:       #ffffff;

  /* los dos degradados del sistema */
  --hx-grad-primary:   linear-gradient(-137deg, #00ba61 0%, #00a8ad 100%);
  --hx-grad-secondary: linear-gradient(-137deg, #00a8ad 0%, #0092d1 100%);

  /* tipografía */
  --hx-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* geometría */
  --hx-container: 1200px;
  --hx-gutter: 15px;
  --hx-section-y: 100px;

  /* sombras */
  --hx-shadow-stat:    0 0 20px -1px rgba(0, 0, 0, .15);
  --hx-shadow-post:    0 0 20px 0 rgba(33, 68, 98, .19);
  --hx-shadow-service: 0 0 20px 0 rgba(0, 0, 0, .1);

  /* Lo que tarda el velo de cambio de página. Lo lee también el JS, para que
     la espera antes de navegar y el fundido duren exactamente lo mismo. */
  --hx-transicion-pagina: .34s;

  --hx-ease: cubic-bezier(.645, .045, .355, 1);
  /* Curva de las entradas: arranca decidida y frena despacio. Es la que hace
     que algo parezca que «llega» en vez de que «aparece». */
  --hx-suave: cubic-bezier(.22, .61, .36, 1);
  --hx-entrada-dur: .75s;
  --hx-entrada-sube: 26px;
  /* Espera antes de arrancar. Sin ella la pieza se anima mientras todavía está
     asomando por el borde de abajo, y para cuando el ojo llega ya terminó. */
  --hx-entrada-espera: .5s;
  --hx-transition: .3s cubic-bezier(.645, .045, .355, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

/* Con la cabecera fija, un enlace que salta a un punto de la página debe
   pararse por debajo de ella; si no, el destino queda tapado. */
html { scroll-padding-top: 100px; }

/* ---------------------------------------------------------------- nada se sale por la derecha
   ⭐⭐ RED DE SEGURIDAD, y va aquí porque las de abajo no bastan.
   Cada vez que algo asomaba por la derecha —el panel del menú, el halo del
   botón, una tanda del carrusel— el móvil ENSANCHA la página y aparece un hueco
   a la derecha en TODO el sitio. Cada causa se arregló en su sitio, pero basta
   una nueva para que vuelva, y en un móvil real cuesta verlo.
   ⚠ Medido, y es lo que no me esperaba: **hace falta en `html` Y en `body` a la
   vez.** Con un desbordamiento de 200px provocado a propósito: solo en `body`
   siguen sobrando 200; solo en `html`, 200; en los dos, CERO.
   ⚠ `clip` es mejor que `hidden` —no crea caja de desplazamiento ni rompe un
   `position: sticky`— pero es reciente, así que `hidden` va de base y `clip`
   encima donde se entienda. En este theme no hay ni un `sticky`, comprobado.
   Esto NO sustituye arreglar la causa: sirve para que un fallo nuevo no se le
   note al visitante mientras se encuentra. */
html,
body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html,
  body { overflow-x: clip; }
}

/* ENTRADA DE LOS BLOQUES AL APARECER
   Cada bloque entra una vez, subiendo un poco y ganando opacidad. Tres
   decisiones detrás:

   1. **Solo una vez.** Nada vuelve a animarse al subir la página. Un bloque que
      parpadea cada vez que pasa por delante cansa y estorba a la lectura.
   2. **Escalonado por orden de lectura**, no todos a la vez: los hermanos de un
      mismo grupo entran uno detrás de otro, con 90ms de diferencia y un tope de
      cuatro escalones. Así una lista de veinte no tarda dos segundos.
   3. **La clase la pone el JavaScript**, no el HTML. Si el JavaScript no llega
      a ejecutarse, la clase no existe, nada se esconde y la página se lee
      entera. El contenido nunca depende de una animación.

   Solo se animan `opacity` y `transform`: las dos únicas propiedades que el
   navegador resuelve sin rehacer la maquetación. */
/* Se usa `animation` y no `transition`, y no es un capricho: muchas piezas
   traen su propia `transition` —la tarjeta que se levanta, el botón que
   cambia de color— y esa regla, al ser abreviada, ponía el retraso de la
   entrada a cero. Con `animation` no se pisan: son dos mecanismos distintos.
   `backwards` mantiene el estado inicial durante la espera del escalón y, al
   acabar, devuelve la pieza a sus propios estilos: así el hover de después
   sigue funcionando como si no hubiera pasado nada. */
.hx-anima { opacity: 0; }
.hx-anima.is-visible {
  opacity: 1;
  animation: hx-entra var(--hx-entrada-dur) var(--hx-suave)
             calc(var(--hx-entrada-espera) + var(--hx-retraso, 0ms)) backwards;
}
@keyframes hx-entra {
  from { opacity: 0; transform: translateY(var(--hx-entrada-sube)); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-anima, .hx-anima.is-visible { opacity: 1; animation: none; }
}

/* TRANSICIÓN ENTRE PÁGINAS
   Al pulsar un enlace la página se desenfoca un punto y se va a blanco; la
   siguiente entra al revés, de desenfocada a nítida. Dos décimas de segundo:
   lo justo para que el cambio no sea un corte seco, no tanto como para que se
   note que se está esperando.
   El velo se pinta sobre todo y NUNCA intercepta pulsaciones —`pointer-events:
   none`—, así que aunque se quedara puesto por un fallo, la página se seguiría
   pudiendo usar. */
.hx-transicion {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--hx-white);
  opacity: 0; pointer-events: none;
  transition: opacity var(--hx-transicion-pagina) var(--hx-ease);
}
.hx-cargando .hx-transicion,
.hx-saliendo .hx-transicion { opacity: 1; }

body > *:not(.hx-transicion) { transition: filter calc(var(--hx-transicion-pagina) + .04s) var(--hx-ease); }
.hx-cargando body > *:not(.hx-transicion),
.hx-saliendo body > *:not(.hx-transicion) { filter: blur(6px); }

/* Quien pidió menos animación no ve ni velo ni desenfoque: cambia de página y
   ya está. Un desenfoque de pantalla completa es de lo que peor sienta a quien
   tiene sensibilidad al movimiento. */
@media (prefers-reduced-motion: reduce) {
  .hx-transicion { display: none; }
  body > *:not(.hx-transicion) { transition: none; }
  .hx-cargando body > *:not(.hx-transicion),
  .hx-saliendo body > *:not(.hx-transicion) { filter: none; }
}

/* La fuente se declara en la raíz, no en el body: así la hereda absolutamente
   todo lo que cuelgue del documento, incluido lo que pegue la clienta en el
   editor o lo que meta un plugin. */
html { font-family: var(--hx-font); }

body {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--hx-ink);
  background: var(--hx-white);
  -webkit-font-smoothing: antialiased;
}

/* GARANTÍA DE TIPOGRAFÍA
   Los controles de formulario —botones, campos, desplegables, áreas de texto—
   NO heredan la fuente del documento: el navegador les pone la suya del
   sistema. Sin esta regla, el botón «Buscar», los botones de envío y los
   campos del formulario salen en la fuente de Windows o de macOS y no en
   Poppins. Es la vía por la que se cuela otra tipografía sin que nadie la
   haya escrito, y es exactamente lo que le pasa al sitio original.
   Solo se hereda la FAMILIA: el tamaño y el peso los pone cada componente. */
button, input, select, textarea, optgroup { font-family: inherit; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--hx-transition); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 10px; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- grid */
.hx-container {
  max-width: var(--hx-container);
  margin: 0 auto;
  padding: 0 50px;
}
.hx-container--full {
  max-width: 1500px;      /* el original topa aqui; sin tope, en pantallas grandes
                             las tarjetas se estiraban de lado a lado */
  margin: 0 auto;
  padding: 0 15px;
}
/* NORMA DE SIMETRÍA VERTICAL
   La separación entre filas la pone la fila con row-gap, nunca un margen inferior
   en cada columna. Con margen, la última fila empujaba 30px extra y toda sección
   acababa con más aire abajo que arriba. Con row-gap, el padding de la sección
   manda y arriba y abajo miden lo mismo. */
.hx-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--hx-gutter) * -1);
  row-gap: 30px;
}
[class*="hx-col-"] {
  padding: 0 var(--hx-gutter);
}

/* NORMA DE CENTRADO VERTICAL
   Cuando una fila combina una imagen con texto, el texto se centra contra la
   altura de la imagen. Sin esto el texto se pega arriba y la pareja se ve
   desequilibrada en cuanto una de las dos columnas crece. */
.hx-row--v-centro { align-items: center; }
.hx-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.hx-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.hx-col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.hx-col-6  { flex: 0 0 50%;        max-width: 50%; }
.hx-col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.hx-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.hx-col-12 { flex: 0 0 100%;       max-width: 100%; }

.hx-section { padding: var(--hx-section-y) 0; position: relative; overflow: hidden; }
.hx-section--grad { background-image: var(--hx-grad-secondary); color: var(--hx-white); }
/* la sección de cifras es la única con 50px en vez de 100 (así está en el original) */
.hx-section--tight { padding: 50px; }
.hx-my-auto { margin-top: auto; margin-bottom: auto; }

/* ---------------------------------------------------------------- encabezado de sección */
/* ESCALA TIPOGRÁFICA — la fija la portada y manda en todo el sitio.
   Cinco tamaños y dos interlineados, nada más:

     40px  título de sección      · 1,2  →  48px
     30px  texto de presencia     · 1,5  →  45px   (la cita)
     24px  título de bloque       · 1,2  →  28,8px
     20px  dato o etiqueta        · 1,4  →  28px
     16px  texto corrido          · 1,5  →  24px

   Los títulos van a 1,2; lo que se lee seguido, a 1,5. El grosor marca
   jerarquía, no énfasis: 700 para títulos y etiquetas, 400 para todo lo que se
   lee. Nada pesa más que el título que lo encabeza. */
.hx-heading { text-align: center; margin-bottom: 55px; position: relative; }

/* NORMA DE SEPARACIÓN DEL ENCABEZADO
   El encabezado marca 55px con lo que viene debajo, en todas las secciones.
   Cuando va en su propia columna y el contenido va en otra, la fila añade
   además su hueco de 30px y esa sección se ve más separada que las demás.
   Se descuenta para que la distancia acabe siendo la misma en todo el sitio. */
.hx-row > [class*="hx-col-"]:not(:last-child) > .hx-heading:only-child {
  margin-bottom: calc(55px - 30px);
}
.hx-heading__title    { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hx-ink); }
.hx-heading__subtitle { font-size: 23px; line-height: 27.6px; font-weight: 700; margin-bottom: 10px; color: var(--hx-ink); }
.hx-heading--white .hx-heading__title,
.hx-heading--white .hx-heading__subtitle { color: var(--hx-white); }
.hx-heading--left { text-align: left; }
.hx-heading--left .hx-sep { margin-left: 0; margin-right: auto; }
.hx-heading__lead { max-width: 780px; margin: 0 auto; }
.hx-heading--left .hx-heading__lead { margin-left: 0; }

/* separador: línea · punto · cuadrado · punto · línea */
.hx-sep {
  width: 143px; height: 11px;
  display: flex; align-items: center; justify-content: center;
  margin: 18px auto 0;
}
.hx-sep__bar {
  flex: 1 1 auto; height: 3px;
  background-image: var(--hx-grad-secondary);
}
.hx-sep__dot {
  flex: 0 0 7px; width: 7px; height: 7px;
  border-radius: 100px;
  background-image: var(--hx-grad-primary);
}
.hx-sep__box {
  flex: 0 0 11px; width: 11px; height: 11px;
  border: 2px solid var(--hx-teal);
  border-image: var(--hx-grad-secondary) 1;
}
/* sobre el degradado, barras y cuadrado pasan a blanco; los puntos mantienen su degradado */
.hx-heading--white .hx-sep__bar { background-image: none; background-color: var(--hx-white); }
.hx-heading--white .hx-sep__box { border-color: var(--hx-white); border-image: none; }

/* ---------------------------------------------------------------- botones */
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 16px; line-height: 32px; font-weight: 500;
  color: var(--hx-white);
  border: 1px solid var(--hx-teal);
  border-radius: 8px;
  background-image: var(--hx-grad-secondary);
  cursor: pointer;
  position: relative;
  transition: var(--hx-transition);
}
.hx-btn--primary { background-image: var(--hx-grad-primary); }
.hx-btn--ghost-navy { border-color: var(--hx-navy); }
.hx-btn:hover { filter: brightness(1.08); }

/* ---- burbujas al pasar por encima ----
   Seis circulos: tres turquesas salen de la esquina superior izquierda y tres
   verdes de la inferior derecha; se expanden y se desvanecen en un segundo.
   Es el efecto `.av-btn-bubble` del original, con sus mismas posiciones y
   tamanos. El z-index del boton crea el contexto para que las burbujas queden
   por detras de el y solo asomen alrededor. */
.hx-btn { z-index: 2; }

.hx-btn::before {
  content: "";
  position: absolute; inset: -2em;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 0 0;               /* invisibles en reposo */
  background-image:
    radial-gradient(circle, var(--hx-teal)  25%, transparent 27%),
    radial-gradient(circle, var(--hx-teal)  25%, transparent 27%),
    radial-gradient(circle, var(--hx-teal)  25%, transparent 27%),
    radial-gradient(circle, var(--hx-green) 25%, transparent 27%),
    radial-gradient(circle, var(--hx-green) 25%, transparent 27%),
    radial-gradient(circle, var(--hx-green) 25%, transparent 27%);
}

@media (hover: hover) {
  .hx-btn:hover::before,
  .hx-btn:focus-visible::before { animation: hx-burbujas 1s ease-in-out forwards; }
}

/* al pulsar se cortan, para que el clic se sienta seco */
.hx-btn:active::before { animation: none; background-size: 0 0; }

@keyframes hx-burbujas {
  0% {
    background-position:
      23px 23px, 23px 23px, 18px 18px,
      calc(100% - 23px) calc(100% - 23px), calc(100% - 23px) calc(100% - 23px), calc(100% - 18px) calc(100% - 18px);
    background-size: 32px 32px, 32px 32px, 48px 48px, 32px 32px, 32px 32px, 48px 48px;
  }
  30%, 60% {
    background-position:
      19px 24px, 24px 19px, 10px 10px,
      calc(100% - 19px) calc(100% - 24px), calc(100% - 24px) calc(100% - 19px), calc(100% - 10px) calc(100% - 10px);
    background-size: 32px 32px, 32px 32px, 48px 48px, 32px 32px, 32px 32px, 48px 48px;
  }
  80% {
    background-position:
      10px 34px, 34px 10px, 0 0,
      calc(100% - 10px) calc(100% - 34px), calc(100% - 34px) calc(100% - 10px), calc(100% + 0px) calc(100% + 0px);
    background-size: 10px 10px, 10px 10px, 48px 48px, 10px 10px, 10px 10px, 48px 48px;
  }
  100% {
    background-position:
      10px 34px, 34px 10px, 3px 3px,
      calc(100% - 10px) calc(100% - 34px), calc(100% - 34px) calc(100% - 10px), calc(100% - 20px) calc(100% - 20px);
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-btn::before { display: none; }
}
.hx-btn__icon {
  width: 30px; height: 30px;
  margin-left: 12px; margin-right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .5);
  border-radius: 5px;
  flex: 0 0 30px;
}
.hx-btn__icon svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- barra superior */
/* CABECERA FIJA
   Al bajar, la cabecera se pega arriba en una versión más corta: se retira la
   barra de datos de contacto —que ya se leyó— y la barra principal se
   estrecha. No es otra cabecera: es la misma con una clase, así que no hay dos
   marcados que mantener ni riesgo de que uno se quede atrás del otro.
   El hueco que deja al despegarse lo ocupa un separador de su misma altura,
   puesto por JS: sin él la página daría un salto al fijarse. */
.hx-header__hueco { height: 0; }

.hx-header.is-fijo {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 2px 18px rgba(33, 68, 98, .12);
  animation: hx-baja-cabecera .28s var(--hx-ease);
}
.hx-header.is-fijo .hx-topbar { display: none; }
.hx-header.is-fijo .hx-navbar { padding: 10px 0; }
.hx-header.is-fijo .hx-logo img { max-height: 44px; width: auto; }
.hx-header .hx-navbar,
.hx-header .hx-logo img { transition: padding .28s var(--hx-ease), max-height .28s var(--hx-ease); }

@keyframes hx-baja-cabecera {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-header.is-fijo { animation: none; }
  .hx-header .hx-navbar, .hx-header .hx-logo img { transition: none; }
}

.hx-topbar {
  height: 71px;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(37, 37, 37, .1);
  font-size: 16px;
}
.hx-topbar > .hx-container { width: 100%; }
/* OJO: la fila NO lleva `width: 100%`.
   `.hx-row` sale de sus márgenes 15px a cada lado para que las columnas, con
   su relleno, acaben alineadas con el borde del contenedor. Fijarle el ancho
   al 100% le quita esos 30px y toda la fila se queda corta: los datos de
   contacto de la barra superior terminaban 30px antes que el buscador de la
   barra de abajo, y las dos deben acabar en la misma línea. */
.hx-topbar .hx-row { align-items: center; row-gap: 0; }
.hx-topbar a { white-space: nowrap; }
/* ICONOS DE REDES — círculo blanco con el icono oscuro, y sombra suave.
   Es el esquema del original, y es el mismo en la cabecera y en el pie: allí
   una sola regla (`.widget_social_widget li a`) sirve a los dos sitios. Sobre
   el fondo negro del pie el círculo blanco es lo que se ve; sobre el blanco de
   la cabecera lo que dibuja el círculo es la sombra. */
.hx-social { display: flex; align-items: center; gap: 10px; }
.hx-social a {
  width: 40px; height: 40px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hx-white);
  color: var(--hx-ink);
  box-shadow: 0 0 13px -2px rgba(0, 0, 0, .2);
  transition: color var(--hx-transition), transform var(--hx-transition);
}
.hx-social a:hover { color: var(--hx-teal); }
.hx-social a:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: 2px; }
.hx-social svg { width: 18px; height: 18px; }
.hx-topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 30px; }
.hx-contact-inline { display: flex; align-items: center; }
.hx-contact-inline__icon {
  width: 22px; height: 22px; margin-right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hx-teal);
}
.hx-contact-inline__icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- cabecera */
/* ⚠ El z-index del header crea CONTEXTO DE APILAMIENTO: todo lo que cuelga de
   él —el panel del menú móvil (100) y el buscador (110)— vale este número para
   el resto de la página, no el suyo. Con 20, el velo del menú (99, que es hijo
   del body) quedaba POR ENCIMA del panel y se comía todos los toques: el menú
   se abría y no se podía pulsar nada. Va a 100, el mismo que ya tenía la
   cabecera pegada, para que suelta y pegada se comporten igual. */
.hx-header { background: var(--hx-white); position: relative; z-index: 100; }
.hx-navbar { padding: 23.5px 0; }
.hx-navbar .hx-row { align-items: center; row-gap: 0; }
/* el logo desborda su columna (col-2 = 183px) exactamente como en el original */
.hx-logo img { width: 300px; max-width: none; height: auto; }   /* el recorte llega a 600 y se dibuja a 300: nítido en retina */

.hx-nav { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
/* MENÚ — el hover es SOLO un cambio de color.
   Antes hacía dos cosas a la vez y las dos molestaban:
     · subía el grosor de 500 a 600, y como la letra en negrita ocupa más, el
       elemento crecía y empujaba a los de al lado. De ahí que «se moviera todo»;
     · pintaba el texto con el degradado recortado a la forma de la letra
       (`background-clip: text` con el color en transparente). Ese recorte
       obliga al navegador a rehacer el texto entero, y durante un fotograma la
       palabra desaparece.
   Ahora solo cambia `color`, que no toca la maquetación y el navegador resuelve
   sin rehacer nada. El grosor no se mueve: la palabra ocupa lo mismo en reposo
   y con el cursor encima. Es además el mismo turquesa con el que responden
   todos los enlaces del sitio. */
.hx-menu { display: flex; align-items: center; }
.hx-menu > li { margin: 0 -3px; position: relative; }
.hx-menu > li > a {
  display: inline-block;
  padding: 0 12px;
  font-size: 16px; line-height: 44px; font-weight: 500;
  color: var(--hx-ink);
  transition: color .25s var(--hx-ease);
}
.hx-menu > li.is-active > a,
.hx-menu > li > a:hover,
.hx-menu > li > a:focus-visible { color: var(--hx-teal); }
.hx-menu > li > a:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: -4px; border-radius: 6px; }
.hx-menu__caret { width: 10px; height: 10px; margin-left: 4px; display: inline-block; vertical-align: middle; }
.hx-submenu {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--hx-white);
  box-shadow: var(--hx-shadow-stat);
  border-radius: 5px;
  padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--hx-transition);
  z-index: 30;
}
.hx-menu > li:hover .hx-submenu,
.hx-menu > li:focus-within .hx-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.hx-submenu a {
  display: block; padding: 8px 20px;
  font-size: 16px; line-height: 24px; color: var(--hx-ink);
  transition: color .25s var(--hx-ease);
}
.hx-submenu a:hover,
.hx-submenu a:focus-visible { color: var(--hx-teal); }

.hx-nav__extra { display: flex; align-items: center; gap: 18px; margin-left: 18px; }
.hx-search-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--hx-ink); width: 20px; height: 20px;
}

/* ================================================================
   CARRUSEL DE LA PORTADA
   ================================================================
   Normas estándar de este bloque, válidas para cualquier carrusel del sitio:

   1. El contenido va SIEMPRE centrado en los dos ejes. Nunca posiciones fijas.
   2. La transición entre pantallas es un BARRIDO horizontal con una caída leve
      de opacidad; nunca un fundido a negro ni un salto seco.
   3. La entrada de los textos es escalonada, de abajo hacia arriba, con el mismo
      desplazamiento (--hx-sube) y el mismo retardo entre piezas (--hx-escalon).
   4. Alturas y tamaños con clamp(): un solo juego de reglas para todas las
      pantallas, sin saltos bruscos en los puntos de corte.
   5. Todo se apaga con prefers-reduced-motion.
   6. Los controles son <button> reales, con área táctil de 44px y foco visible.
   ---------------------------------------------------------------- */

:root {
  /* Tamano de las flechas. El ancho del texto se calcula desde aqui:
     si cambia la flecha, el texto se aparta solo y nunca se solapan. */
  --hx-flecha: 46px;
  --hx-flecha-borde: 22px;   /* separacion de la flecha al borde */
  --hx-flecha-aire: 18px;    /* respiro entre la flecha y el texto */

  /* Alto del carrusel. Un 20% mas que el original (era 440/70vh/700).
     Los tres valores suben a la vez, asi la proporcion se mantiene:
     el minimo protege pantallas bajas, el vh manda en el medio y el
     maximo evita que en monitores altos ocupe de mas. */
  --hx-carrusel-alto: clamp(528px, 84vh, 840px);

  --hx-dur-barrido: .75s;   /* barrido entre pantallas */
  --hx-dur-entrada: .6s;    /* entrada de cada texto */
  --hx-escalon: .09s;       /* retardo entre una pieza y la siguiente */
  --hx-sube: 26px;          /* cuánto sube cada texto al aparecer */
}

.hx-carrusel {
  position: relative;
  height: var(--hx-carrusel-alto);
  overflow: hidden;
  background-image: var(--hx-grad-secondary);
  isolation: isolate;
}

/* ---- pantallas ---- */
.hx-carrusel__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;   /* norma 1 */
  /* La foto la pone la plantilla en dos variables, grande y pequeña. Un fondo
     CSS no admite `srcset`, así que se elige con una consulta de medios: el
     móvil baja la copia de 1024px y no la de escritorio. */
  background-image: var(--hx-slide-movil, var(--hx-slide));
  background-size: cover; background-position: center;
  /* ⭐ Barrido REAL: la que sale se va entera por un lado y la que entra llega
     entera por el otro, las dos opacas. Antes las inactivas iban a `opacity:.25`
     y la caída se transicionaba a la vez que el movimiento: el ojo lo leía como
     un fundido cruzado, no como un desplazamiento. Se mueve lo mismo que antes;
     lo que se quita es lo que disfrazaba el movimiento. */
  transform: translateX(100%);
  transition: transform var(--hx-dur-barrido) var(--hx-ease);
  pointer-events: none;
  z-index: 1;
}
.hx-carrusel__slide::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .38);
}
.hx-carrusel__slide.is-active {
  transform: none; pointer-events: auto; z-index: 2;
}
/* el sentido del barrido lo marca el JS con estas dos clases */
.hx-carrusel__slide.va-izquierda { transform: translateX(-100%); }
.hx-carrusel__slide.va-derecha   { transform: translateX(100%); }

/* ---- contenido ---- */
.hx-carrusel__inner {
  position: relative; z-index: 2;
  /* deja libre la banda de las dos flechas, sea cual sea su tamano */
  width: min(760px, calc(100% - 2 * (var(--hx-flecha) + var(--hx-flecha-borde) + var(--hx-flecha-aire))));
  text-align: center;
  color: var(--hx-white);
}
.hx-carrusel__title {
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 14px;
  text-wrap: balance;
}
.hx-carrusel__title em { font-style: normal; color: var(--hx-green-light); }
.hx-carrusel__text {
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.55;
  font-weight: 300;
  margin: 0 auto 26px;
  max-width: 640px;
}

/* entrada escalonada (norma 3) */
.hx-carrusel__inner > * {
  opacity: 0;
  transform: translateY(var(--hx-sube));
  transition: opacity var(--hx-dur-entrada) var(--hx-ease),
              transform var(--hx-dur-entrada) var(--hx-ease);
}
.hx-carrusel__slide.is-active .hx-carrusel__inner > * { opacity: 1; transform: none; }
.hx-carrusel__slide.is-active .hx-carrusel__inner > :nth-child(1) { transition-delay: calc(var(--hx-escalon) * 2); }
.hx-carrusel__slide.is-active .hx-carrusel__inner > :nth-child(2) { transition-delay: calc(var(--hx-escalon) * 3); }
.hx-carrusel__slide.is-active .hx-carrusel__inner > :nth-child(3) { transition-delay: calc(var(--hx-escalon) * 4); }

/* ---- flechas ---- */
.hx-carrusel__nav {
  position: absolute; top: 50%;
  width: var(--hx-flecha); height: var(--hx-flecha);
  border: 0; border-radius: 100px; padding: 0;
  background-image: var(--hx-grad-primary);
  color: var(--hx-white);
  display: grid; place-items: center;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transform: translateY(-50%);
  transition: transform .3s var(--hx-ease), box-shadow .3s var(--hx-ease), filter .3s var(--hx-ease);
}
.hx-carrusel__nav:hover  { transform: translateY(-50%) scale(1.09); box-shadow: 0 7px 22px rgba(0, 0, 0, .28); }
.hx-carrusel__nav:active { transform: translateY(-50%) scale(.97); }
.hx-carrusel__nav:focus-visible { outline: 3px solid var(--hx-white); outline-offset: 3px; }
.hx-carrusel__nav svg { width: 17px; height: 17px; transition: transform .3s var(--hx-ease); }
.hx-carrusel__nav--prev { left: var(--hx-flecha-borde); }
.hx-carrusel__nav--next { right: var(--hx-flecha-borde); }
.hx-carrusel__nav--prev:hover svg { transform: translateX(-3px); }
.hx-carrusel__nav--next:hover svg { transform: translateX(3px); }

/* ---- bolitas ---- */
.hx-carrusel__dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; align-items: center;
  z-index: 5;
}
.hx-carrusel__dot {
  width: 44px; height: 44px;            /* área táctil (norma 6) */
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hx-carrusel__dot i {
  display: block; width: 10px; height: 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .5);
  transition: width .35s var(--hx-ease), background .35s var(--hx-ease);
}
.hx-carrusel__dot:hover i { background: rgba(255, 255, 255, .8); }
.hx-carrusel__dot.is-active i { width: 30px; background: var(--hx-white); }
.hx-carrusel__dot:focus-visible { outline: 2px solid var(--hx-white); outline-offset: -8px; border-radius: 100px; }

/* ---- responsive ---- */
@media (max-width: 767px) {
  :root {
    --hx-flecha: 38px; --hx-flecha-borde: 10px; --hx-flecha-aire: 12px;
    --hx-carrusel-alto: clamp(504px, 84vh, 672px);   /* mismo +20% que en escritorio */
  }
  .hx-carrusel__nav svg { width: 15px; height: 15px; }
  .hx-carrusel__dots { bottom: 8px; }
}

/* En pantallas estrechas las flechas se quedarian encima del texto:
   se retiran y la navegacion queda en las bolitas y el arrastre. */
@media (max-width: 560px) {
  .hx-carrusel__nav { display: none; }
  .hx-carrusel__inner { width: calc(100% - 40px); }
  .hx-carrusel__dots { bottom: 12px; }
}

/* ---- accesibilidad de movimiento (norma 5) ---- */
@media (prefers-reduced-motion: reduce) {
  .hx-carrusel__slide,
  .hx-carrusel__inner > *,
  .hx-carrusel__nav,
  .hx-carrusel__nav svg,
  .hx-carrusel__dot i { transition: none !important; }
  .hx-carrusel__slide { transform: none !important; opacity: 0; }
  .hx-carrusel__slide.is-active { opacity: 1; }
  .hx-carrusel__inner > * { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- hero de internas */
/* La foto del hero se define desde Hexágono → Ajustes; el theme la inyecta en <head>. */
.hx-hero {
  position: relative;
  background: var(--hx-ink) no-repeat center center / cover;
  background-attachment: fixed;
  overflow: hidden;
}
/* El lienzo del efecto de agua se cuela entre la foto y el velo: dibuja la
   misma foto, ondulada, y el velo y el texto siguen encima sin enterarse.
   Si el efecto no se activa, no hay lienzo y se ve la foto del fondo. */
.hx-hero__agua { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hx-hero::before { content: ""; position: absolute; inset: 0; background: var(--hx-ink); opacity: .75; z-index: 1; }
.hx-hero__inner {
  position: relative; z-index: 2;
  min-height: 150px;
  padding: 35px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.hx-hero__title {
  font-size: 34px; line-height: 40.8px; font-weight: 700;
  color: var(--hx-white);
  padding-left: 16px;
  border-left: 4px solid var(--hx-teal);
  border-image: var(--hx-grad-primary) 1;
}
/* La caja mide 550 y el degradado se dibuja a 1100, así se sale por la derecha
   y la sección lo recorta. Es exactamente como lo resuelve el original. */
.hx-hero__crumbs {
  position: relative; z-index: 0;
  flex: 0 0 550px; width: 550px;
  min-height: 50px;
  padding: 13px 35px;
  color: var(--hx-white);
  font-size: 16px; line-height: 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
}
.hx-hero__crumbs::before {
  content: ""; position: absolute; inset: 0 -550px 0 0;
  border-radius: 100px;
  background-image: var(--hx-grad-primary);
  z-index: -1;
}
.hx-hero__crumbs li + li::before { content: "-"; margin-right: 8px; }
.hx-hero__crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- internas: intro con icono */
.hx-intro { display: flex; align-items: flex-start; gap: 30px; }
.hx-intro__icon { flex: 0 0 145px; }
.hx-intro__icon img { width: 145px; }
.hx-intro__text { flex: 1 1 auto; color: var(--hx-ink); }
.hx-intro__title { font-weight: 700; margin-bottom: 10px; }

/* ---------------------------------------------------------------- internas: galería + detalle */
.hx-detalle {
  display: grid; grid-template-columns: 540px 1fr; gap: 30px; align-items: center;
  margin-top: 55px;
}
.hx-detalle__text { color: var(--hx-ink); }

.hx-gallery { position: relative; width: 100%; height: 450px; overflow: hidden; }
.hx-gallery__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--hx-teal);
  /* Barrido horizontal, no fundido. La caja ya lleva `overflow: hidden`, así que
     lo que se va y lo que aún no ha llegado no se ven ni ensanchan nada. */
  transform: translateX(100%);
  transition: transform .6s var(--hx-ease);
}
.hx-gallery__slide.is-active    { transform: none; }
.hx-gallery__slide.va-izquierda { transform: translateX(-100%); }
.hx-gallery__slide.va-derecha   { transform: translateX(100%); }

/* ---------------------------------------------------------------- página Nosotros */
.hx-nos-intro { display: grid; grid-template-columns: 550px 1fr; gap: 60px; align-items: center; }
.hx-nos-intro__title { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hx-ink); margin-bottom: 20px; text-align: left; }
.hx-nos-intro__text { color: var(--hx-ink); }
.hx-nos-intro__text p:last-child { margin-bottom: 0; }

.hx-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.hx-mv__item { text-align: center; }
/* MÁSCARA DE HEXÁGONO CON HUECO (Misión y Visión)
   La foto se recorta con la silueta de un hexágono hueco: hexágono por fuera,
   hexágono vacío por dentro. Es la misma forma que usa el original —una máscara
   de Elementor— pero aquí va escrita dentro del CSS, sin depender de ningún
   plugin ni de ningún archivo externo.
   Al ser una máscara y no un dibujo, sirve para CUALQUIER foto que se suba: la
   clienta sube una foto normal, cuadrada, y sale recortada sola. */
.hx-mv__item img {
  margin: 0 auto 15px;
  width: 150px; height: 150px;
  object-fit: cover;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20103%2089%22%3E%3Cpath%20d%3D%22M77.2114%2C0H25.7523L0%2C44.5045%2C25.7523%2C89H77.2114L103%2C44.5045ZM61.7691%2C62.261H41.2218L30.9391%2C44.5045%2C41.2218%2C26.739H61.7691L72.0519%2C44.5045Z%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20103%2089%22%3E%3Cpath%20d%3D%22M77.2114%2C0H25.7523L0%2C44.5045%2C25.7523%2C89H77.2114L103%2C44.5045ZM61.7691%2C62.261H41.2218L30.9391%2C44.5045%2C41.2218%2C26.739H61.7691L72.0519%2C44.5045Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.hx-mv__title { font-size: 24px; line-height: 28.8px; font-weight: 700; color: var(--hx-green); margin-bottom: 18px; }
/* La foto y el título van centrados; el párrafo no. Un bloque de texto largo
   centrado obliga a buscar dónde empieza cada línea. */
.hx-mv__item p { text-align: left; color: var(--hx-ink); margin: 0; }

.hx-cita {
  background-image: linear-gradient(329deg, #0092d1 13%, #00a8ad 100%);
  color: var(--hx-white);
  min-height: 548px;
  display: flex; align-items: center;
  text-align: center;
}
.hx-cita .hx-container { width: 100%; }
.hx-cita__texto { font-size: 30px; line-height: 45px; font-weight: 400; margin-bottom: 20px; }
.hx-cita__firma { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }

.hx-valores__titulo { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hx-ink); text-align: center; margin-bottom: 55px; }
.hx-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.hx-valor { text-align: center; }
.hx-valor img { margin: 0 auto 20px; width: 130px; height: 130px; object-fit: contain; }
.hx-valor__titulo { font-size: 24px; line-height: 28.8px; font-weight: 700; color: var(--hx-ink); margin-bottom: 10px; }
/* «HEXÁGONO» es una etiqueta, no el contenido: mismo cuerpo que la frase que
   acompaña, y se distingue por el grosor y el verde, no por ser más grande.
   Si fuera mayor pesaría más que aquello a lo que da nombre. */
.hx-valor__marca { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--hx-green); margin-bottom: 18px; }
/* Sin cursiva: de Poppins solo se cargan las variantes rectas, así que el
   navegador la fabricaba inclinando la letra a la fuerza —una oblicua, no una
   cursiva de verdad—. La frase ya destaca por su grosor. */
.hx-valor__frase { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--hx-ink); margin: 0; }

/* hueco de un asset pendiente de tratar (no va al theme) */
.hx-slot {
  aspect-ratio: 550 / 309;
  background: repeating-linear-gradient(45deg, #f2f4f7 0 12px, #e8ebf0 12px 24px);
  border: 1px dashed #c3c9d4;
  display: flex; align-items: center; justify-content: center;
  color: #8d97a8; font-size: 13px; text-align: center; padding: 12px;
}
.hx-slot::after { content: attr(data-pendiente); }

/* ---------------------------------------------------------------- home: nosotros */
.hx-about__text { text-align: center; }

/* ---------------------------------------------------------------- cifras */
.hx-stat {
  position: relative; z-index: 0;
  background: var(--hx-white);
  border-radius: 10px;
  padding: 28px 15px;
  text-align: center;
  box-shadow: var(--hx-shadow-stat);
  min-height: 160px;
  overflow: hidden;                 /* recorta los círculos contra la esquina redondeada */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: var(--hx-transition);
}

/* Dos círculos que entran en diagonal desde la esquina superior izquierda, el
   segundo con un pelín de retraso. Es el efecto del sitio original, hecho con
   CSS en vez de con JavaScript. Van en z-index -1: por delante del fondo de la
   tarjeta y por detrás del texto, para que el número siempre se lea. */
.hx-stat::before,
.hx-stat::after {
  content: "";
  position: absolute; top: -100%; left: -100%;
  border-radius: 100%;
  background-image: var(--hx-grad-primary);
  z-index: -1;
  transition: top .4s var(--hx-ease), left .4s var(--hx-ease);
}
.hx-stat::before { width: 120px; height: 120px; opacity: .6; }
.hx-stat::after  { width: 90px;  height: 90px;  opacity: .9; }

@media (hover: hover) {
  .hx-stat:hover::before,
  .hx-stat:focus-within::before { top: -57px; left: -50px; }
  .hx-stat:hover::after,
  .hx-stat:focus-within::after  { top: -43px; left: -36px; transition-delay: .15s; }
}

/* En pantallas táctiles no hay hover: los círculos se muestran puestos, para que
   la tarjeta no se vea vacía y el adorno no se pierda. */
@media (hover: none) {
  .hx-stat::before { top: -57px; left: -50px; }
  .hx-stat::after  { top: -43px; left: -36px; }
}
.hx-stat__num { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--hx-ink); }
.hx-stat__label { font-size: 16px; line-height: 24px; color: var(--hx-ink); margin: 0; }
.hx-funfact__img img { width: 100%; border-radius: 0; }

/* ---------------------------------------------------------------- servicios */
/* ⭐ La tarjeta SIEMPRE mide un tercio, haya los que haya; lo que se mueve es la
   fila. Centrada, una sola tarjeta queda en medio, cuatro salen 3 + 1 centrada y
   cinco 3 + 2 centradas, en vez de amontonarse a la izquierda con un hueco al
   lado. Con tres exactas no cambia nada: llenan el ancho y no hay nada que
   centrar. Va en `.hx-services` y no en `.hx-row`, que la usa todo el sitio. */
.hx-services { margin: 0 -15px; justify-content: center; }

.hx-service {
  position: relative; z-index: 0;
  min-height: 511px;
  padding: 50px;
  background-color: var(--hx-teal);
  background-size: cover;
  background-position: center;
  color: var(--hx-white);
  text-align: center;
  box-shadow: var(--hx-shadow-service);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  transition: var(--hx-transition);
}

/* Velo sobre la foto para que el texto blanco se lea siempre, sea cual sea la
   imagen destacada que suba la clienta. Al pasar por encima vira al turquesa. */
.hx-service::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(20, 30, 34, .55);
  transition: var(--hx-transition);
}

.hx-service__icon {
  width: 82px; height: 82px; border-radius: 100px;
  background: var(--hx-white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  flex: 0 0 auto;
}
.hx-service__icon svg { width: 40px; height: 40px; }
.hx-service__icon svg * { stroke: url(#hx-grad-icon); }

.hx-service__title {
  width: 100%;
  font-size: 23px; line-height: 27.6px; font-weight: 700;
  color: var(--hx-white);
}

/* La lista se encoge a su contenido y se centra como bloque; el texto queda
   alineado a la izquierda dentro. Es como esta en el original: 245px centrados. */
.hx-service__list {
  width: fit-content; max-width: 100%;
  margin: 25px auto 0;
  text-align: left;
}
.hx-service__list li {
  display: flex; align-items: flex-start;
  margin-bottom: 15px;
  font-size: 16px; line-height: 24px;
}
.hx-service__list li:last-child { margin-bottom: 0; }
.hx-service__list li::before {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px;
  border-radius: 100px; margin-right: 15px; margin-top: 7px;
  background-image: var(--hx-grad-secondary);
}

.hx-service .hx-btn { margin-top: 30px; }

.hx-service__watermark {
  position: absolute; right: -10px; bottom: -20px;
  width: 130px; height: 150px; z-index: -1;
  color: rgba(208, 208, 208, .4);
  pointer-events: none;
  transition: transform .4s var(--hx-ease), opacity .4s var(--hx-ease);
}

/* Hover de la tarjeta, tal cual el original: el velo vira al turquesa de marca,
   el boton salta al degradado principal y pierde el borde, y la marca de agua
   crece y se aclara. */
@media (hover: hover) {
  /* Al pasar por encima el velo se oscurece, no cambia de color: la foto sigue
     viendose y el texto se lee mejor. */
  .hx-service:hover::before,
  .hx-service:focus-within::before { background: rgba(12, 18, 21, .72); }

  /* Los bullets pasan a blanco: sobre el velo turquesa el degradado se perdia.
     En el original solo cambian los impares — parece un descuido, aqui cambian
     los cuatro. */
  .hx-service:hover .hx-service__list li::before,
  .hx-service:focus-within .hx-service__list li::before {
    background-image: none;
    background-color: var(--hx-white);
  }

  .hx-service:hover .hx-btn,
  .hx-service:focus-within .hx-btn {
    background-image: var(--hx-grad-primary);
    border-color: transparent;
  }

  .hx-service:hover .hx-service__watermark,
  .hx-service:focus-within .hx-service__watermark {
    transform: scale(1.2);
    opacity: .5;
  }
}

/* ---------------------------------------------------------------- clientes
   Desfile continuo, en bucle infinito y sin controles: no se pausa al pasar
   por encima, no se arrastra, no tiene flechas. Es CSS puro, sin JavaScript.

   El truco del bucle sin costura: la pista lleva un numero PAR de juegos
   identicos de logos y se desplaza exactamente un 50%. Al terminar, la pista
   vuelve al origen y la imagen es la misma, asi que no se ve el salto.
   El numero de juegos lo calcula el theme segun cuantos logos haya, para que
   la pista siempre sea mas ancha que la pantalla y nunca quede hueco. */
.hx-partners {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hx-partners__pista {
  display: flex;
  width: max-content;
  animation: hx-desfile var(--hx-desfile-dur, 34s) linear infinite;
}

.hx-partners__juego {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;    /* mismo hueco entre el ultimo de un juego y el primero del siguiente */
  flex: 0 0 auto;
}

@keyframes hx-desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.hx-partner {
  flex: 0 0 auto;
  background: var(--hx-white);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--hx-shadow-service);
}
.hx-partner img {
  width: 148px; height: 28px;
  object-fit: contain;
}

/* Un elemento que no para de moverse es un problema de accesibilidad, no una
   preferencia: con reduced-motion se detiene y se ve la primera tanda. */
@media (prefers-reduced-motion: reduce) {
  .hx-partners__pista { animation: none; }
}

/* ---------------------------------------------------------------- artículos
   Las tarjetas de la portada van en un carrusel: 2 por vista en pantalla
   grande, 1 en móvil, avance automático cada 6 s y vuelta al principio sin
   fin. Se pasa una tanda entera de golpe, con fundido, como el original.
   Sin JavaScript el carrusel no se arma y las tarjetas se ven todas
   seguidas: se ve menos bonito, pero se lee todo. */
.hx-posts { position: relative; }
.hx-posts__pista { display: flex; flex-wrap: wrap; gap: 30px; }
.hx-posts__pista > * { flex: 1 1 300px; }

/* Con el carrusel montado, cada tanda ocupa la misma celda y se BARREN en
   horizontal, igual que las pantallas del hero: la que sale se va por un lado y
   la que entra llega por el otro. La rejilla se encarga de que la altura sea la
   de la tanda más alta, así no da saltos al pasar.
   ⚠ Una tanda que se va mide un ancho entero de MÁS, y sin recortar ensancharía
   el documento — el mismo fallo del halo del botón (norma 66b). No hace falta
   regla nueva: `.hx-section` ya lleva `overflow: hidden`, y recorta justo en el
   borde de la pantalla, que es donde interesa. Poner el recorte más cerca, en
   `.hx-posts`, cortaría la SOMBRA de las tarjetas sin ganar nada.
   ⚠ Comprobado midiendo: con una tanda aparcada a la derecha, cero
   desbordamiento en 360, 375, 414, 768, 1024 y 1280. **Si algún día esta sección
   deja de ser `.hx-section`, vuelve el desplazamiento lateral.** */
.hx-posts--carrusel .hx-posts__pista { display: grid; gap: 0; }

/* ⚠⚠ SE VA UN POCO MÁS LEJOS QUE UN ANCHO ENTERO, Y ES OBLIGATORIO.
   Quien recorta es `.hx-section`, que ocupa la pantalla completa; pero la pista
   empieza donde acaba el `padding` del contenedor (15px en móvil). Con un
   desplazamiento de 100% exacto, la tanda vecina se queda pegada al borde de la
   pista y **asoman esos 15px de la tarjeta de al lado**, en reposo y después de
   pasar. Medido: 15px visibles en los dos estados.
   Este sobrante la saca del todo. Tiene que ser MAYOR que el `padding` del
   contenedor; 40 sobre 15 va holgado. El hero y la galería no lo necesitan
   porque sus pantallas miden justo lo que la caja que las recorta. */
.hx-posts { --hx-posts-fuera: 40px; }
.hx-posts__tanda {
  grid-area: 1 / 1;
  display: flex; gap: 30px;
  transform: translateX(calc(100% + var(--hx-posts-fuera)));
  transition: transform .55s var(--hx-ease);
}
.hx-posts__tanda.is-active     { transform: none; }
.hx-posts__tanda.va-izquierda  { transform: translateX(calc(-100% - var(--hx-posts-fuera))); }
.hx-posts__tanda.va-derecha    { transform: translateX(calc(100% + var(--hx-posts-fuera))); }
.hx-posts__tanda > * { flex: 1 1 0; min-width: 0; }

/* La tarjeta de recurso es la MISMA pieza que la de artículo: mismo fondo, mismo
   radio, misma sombra y mismo hover. Comparten regla en vez de repetir los
   valores, que es lo que garantiza que no vuelvan a separarse. */
.hx-post,
.hx-recurso-card {
  position: relative; z-index: 0;
  background: var(--hx-white);
  border-radius: 10px;
  box-shadow: var(--hx-shadow-post);
  overflow: hidden;
  padding: 30px;
  transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease);
}

/* HOVER DE LA TARJETA DE ARTÍCULO
   La tarjeta se levanta un poco y una línea con el degradado de la marca
   recorre el borde de abajo, de izquierda a derecha. La línea existía en el
   tema original pero estaba comentada y nunca llegó a verse; se recupera.
   El número de la esquina no se mueve: a Daniel le saltaba a la vista. */
.hx-post::after,
.hx-recurso-card::after {
  content: ""; position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0; height: 3px;
  background-image: var(--hx-grad-primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--hx-ease);
}
@media (hover: hover) {
  .hx-post:hover, .hx-post:focus-within,
  .hx-recurso-card:hover, .hx-recurso-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(33, 68, 98, .22);
  }
}
.hx-post:hover::after,
.hx-post:focus-within::after,
.hx-recurso-card:hover::after,
.hx-recurso-card:focus-within::after { transform: scaleX(1); }
/* La chapa de la fecha es la MISMA pieza en la portada y en el listado del
   blog, así que una sola regla para las dos. Su cuerpo de 13px es la única
   excepción a la escala: es una marca, no texto que se lea. */
.hx-post__date,
.hx-entrada__date {
  display: block; width: fit-content; min-width: 70px;
  padding: 7px 6.7px 9px;
  margin: 5px 0 0;
  border-radius: 6px;
  background-image: var(--hx-grad-primary);
  color: var(--hx-white);
  text-align: center;
  font-size: 13px; line-height: 19.5px;
}
.hx-post__day,
.hx-entrada__day { display: block; font-size: 30px; line-height: 1.17; font-weight: 700; }
.hx-post__month,
.hx-entrada__month { display: block; }
.hx-post__title { font-size: 24px; line-height: 28.8px; font-weight: 700; color: var(--hx-ink); margin: 20px 0 10px; }
.hx-post__title a:hover { color: var(--hx-teal); }
.hx-post__excerpt { font-size: 16px; line-height: 24px; color: var(--hx-ink); margin: 10px 0; }

.hx-post .hx-btn { margin-top: 20px; }

/* Simetría (norma 15): las tarjetas dejan el mismo aire arriba —contra el
   encabezado— que abajo, contra lo que venga después. */
.hx-blog-button { text-align: center; margin-top: 55px; }
/* Con el carrusel montado, ese aire se lo lleva la pastilla de las flechas y
   el botón la sigue de cerca; si no, el bloque se abriría el doble. */
.hx-posts--carrusel + .hx-blog-button { margin-top: 30px; }

/* ---- flechas del carrusel de artículos ----
   Van debajo y centradas, dentro de una pastilla con el degradado de la marca,
   igual que en el original. Flotando sobre las tarjetas taparían el título en
   cuanto la pantalla se estrecha. */
.hx-posts__nav {
  width: max-content; margin: 55px auto 0;   /* el mismo aire que arriba */
  display: flex; gap: 10px;
  padding: 6px; border-radius: 8px;
  background-image: var(--hx-grad-primary);
}
.hx-posts__nav[hidden] { display: none; }
.hx-posts__nav-btn {
  width: 30px; height: 30px;
  border: 0; border-radius: 5px; padding: 0;
  background: rgba(255, 255, 255, .5);
  color: var(--hx-white);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .3s var(--hx-ease);
}
.hx-posts__nav-btn:hover { background: rgba(255, 255, 255, .85); }
.hx-posts__nav-btn:focus-visible { outline: 2px solid var(--hx-white); outline-offset: 2px; }
.hx-posts__nav-btn svg { width: 14px; height: 14px; transition: transform .3s var(--hx-ease); }
.hx-posts__nav-btn--prev:hover svg { transform: translateX(-2px); }
.hx-posts__nav-btn--next:hover svg { transform: translateX(2px); }

/* Un carrusel que se mueve solo es un problema de accesibilidad: con
   reduced-motion no avanza solo ni funde, pero las flechas siguen. */
@media (prefers-reduced-motion: reduce) {
  .hx-posts__tanda { transition: none; }
  .hx-posts__nav-btn, .hx-posts__nav-btn svg { transition: none; }
  .hx-post, .hx-post::after { transition: none; }
  .hx-post:hover, .hx-post:focus-within { transform: none; }
}

/* ---------------------------------------------------------------- blog: listado */
.hx-entrada {
  background: var(--hx-white);
  border-radius: 10px;
  box-shadow: var(--hx-shadow-post);
  padding: 30px;
  margin-bottom: 30px;   /* mismo paso que entre piezas de una fila */
}
.hx-entrada:last-child { margin-bottom: 0; }
.hx-entrada__title { font-size: 24px; line-height: 28.8px; font-weight: 700; color: var(--hx-ink); margin: 20px 0 10px; }
.hx-entrada__title a:hover { color: var(--hx-teal); }
.hx-entrada__cat { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--hx-ink); margin: 0; }
.hx-entrada__cat svg { width: 16px; height: 16px; flex: 0 0 16px; }
.hx-entrada__cat a:hover { color: var(--hx-teal); }
.hx-entrada__excerpt { margin: 20px 0; }
.hx-entrada__cuerpo { margin-top: 20px; }

/* el hero del artículo lleva el titular completo: no puede ir en una línea */
.hx-hero__title { overflow-wrap: anywhere; }
.hx-hero__crumbs li { display: inline; }

/* ---------------------------------------------------------------- artículo */
.hx-articulo { max-width: 900px; margin: 0 auto; }
.hx-articulo__meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; color: var(--hx-ink); }
.hx-articulo__meta span { display: flex; align-items: center; gap: 8px; }
.hx-articulo__meta svg { width: 16px; height: 16px; }
.hx-articulo__title { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hx-ink); margin-bottom: 25px; }

/* ---------------------------------------------------------------- contacto */
.hx-contact-section {
  /* Sigue siendo PNG —tiene transparencia, así que JPG no vale— pero a un
     tercio del tamaño: la textura va estirada con `cover` y son puntos suaves
     de muy poco contraste, así que a esa escala no se distingue. 152 KB → 39. */
  background: url("../img/dotted.png") no-repeat center center / cover;
}
/* El formulario va siempre en tarjeta blanca, tanto en la portada como en
   Contacto: en el original las dos comparten la misma regla y las dos son
   blancas. 1000px de ancho y 55px de aire por dentro, medidos del original —y
   55 es además el paso de separación del sistema. */
.hx-contact-card {
  max-width: 1000px; margin: 0 auto;
  background: var(--hx-white);
  box-shadow: 0 5px 60px -2px rgba(0, 0, 0, .12);
  padding: 55px;
}
.hx-contact-card .hx-row { row-gap: 0; }
/* Los tres bloques de Contacto —presentación, vídeo y formulario— se separan
   con el mismo paso que el encabezado deja con su contenido en toda la web. */
.hx-contacto__pie { text-align: center; max-width: 620px; margin: 0 auto 55px; }
.hx-contacto__video { max-width: 1000px; margin: 0 auto 55px; }
.hx-slot--16-9 { aspect-ratio: 1000 / 563; }

.hx-field { margin-bottom: 24px; }
.hx-field label { display: block; font-size: 16px; line-height: 24px; color: var(--hx-ink); margin-bottom: 8px; }
.hx-field input,
.hx-field textarea,
.hx-field select {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px; line-height: 24px; font-weight: 500;
  color: var(--hx-ink);
  background: var(--hx-grey-bg);
  border: 1px solid var(--hx-grey-bg);
  border-radius: 0;
  transition: var(--hx-transition);
}
.hx-field textarea { min-height: 132px; resize: vertical; }
.hx-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23252525' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 44px;
}
.hx-field input:focus,
.hx-field textarea:focus,
.hx-field select:focus { outline: none; border-color: var(--hx-teal); }
.hx-note { margin-top: 30px; }
.hx-note__title { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--hx-ink); margin-bottom: 8px; }
.hx-note ul li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- pie
   Dos bandas con fondos distintos, como el original: la de datos en negro puro
   y la de creditos un punto mas clara, separadas por una linea. Dentro de cada
   banda, las columnas van separadas por lineas verticales. */
.hx-footer-info {
  background: var(--hx-black);
  color: var(--hx-white);
}
.hx-footer-info .hx-row { margin: 0; row-gap: 0; }

.hx-finfo {
  display: flex; align-items: center;
  padding: 50px 15px;
  position: relative;
}
/* linea vertical entre columnas; la ultima no la lleva */
.hx-footer-info [class*="hx-col-"]:not(:last-child) .hx-finfo::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  width: 1px; background: rgba(255, 255, 255, .16);
}
.hx-finfo__icon {
  width: 54px; height: 54px; flex: 0 0 54px; margin-right: 15px;
  border-radius: 100px;
  background-image: var(--hx-grad-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--hx-white);
}
.hx-finfo__icon svg { width: 24px; height: 24px; }
.hx-finfo__label { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .72); margin: 0; }
.hx-finfo__value {
  font-size: 20px; line-height: 28px; font-weight: 700; color: var(--hx-white);
  margin: 0;
  overflow-wrap: anywhere;   /* el correo no se parte a media palabra */
}

.hx-footer-bottom {
  background: #141414;                              /* un punto mas clara que la de arriba */
  border-top: 1px solid rgba(255, 255, 255, .14);   /* la linea que separa las dos bandas */
  padding: 20px 0;
}
.hx-footer-bottom .hx-row { align-items: center; row-gap: 0; }
.hx-footer-bottom [class*="hx-col-"] {
  min-height: 110px;
  display: flex; align-items: center;
  position: relative;
}
.hx-footer-bottom [class*="hx-col-"]:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 18px; bottom: 18px;
  width: 1px; background: rgba(255, 255, 255, .16);
}
.hx-footer-bottom .hx-col-4:nth-child(2) { justify-content: center; }
.hx-footer-bottom .hx-col-4:nth-child(3) { justify-content: flex-end; }
.hx-footer-bottom .hx-logo img { width: 300px; max-width: none; }
.hx-copyright { text-align: right; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 24px; margin: 0; }

/* ---------------------------------------------------------------- deslizar con el dedo
   ⭐⭐ La mitad del arreglo del arrastre está AQUÍ, no en el JavaScript.
   `pan-y` le dice al navegador: el eje vertical es tuyo (la página sigue
   desplazándose con normalidad), el horizontal lo gestiono yo. Sin esta línea el
   navegador se queda el gesto, manda `touchcancel` y el carrusel no se entera de
   nada — que es justo por lo que el dedo parecía no funcionar. */
[data-carrusel],
[data-hx-posts],
[data-gallery] { touch-action: pan-y; }

/* ---------------------------------------------------------------- bolitas de la galería
   Mismas medidas y mismo comportamiento que las del carrusel de la portada: un
   sitio, un patrón. El área táctil es de 44px aunque la bolita mida 10 (norma 8). */
.hx-gallery__dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; align-items: center;
  z-index: 2;
}
.hx-gallery__dot {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hx-gallery__dot i {
  display: block; width: 10px; height: 10px;
  border-radius: 100px;
  /* Sobre una foto cualquiera: bolita blanca con sombra, que se ve tanto sobre
     claro como sobre oscuro. El carrusel de la portada puede fiarse del velo
     oscuro de sus diapositivas; aquí no hay velo. */
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: width .35s var(--hx-ease), background .35s var(--hx-ease);
}
.hx-gallery__dot.is-active i { width: 30px; background: var(--hx-white); }
.hx-gallery__dot:focus-visible { outline: 2px solid var(--hx-white); outline-offset: -8px; border-radius: 100px; }
@media (hover: hover) {
  .hx-gallery__dot:hover i { background: rgba(255, 255, 255, .9); }
}

/* ---------------------------------------------------------------- carruseles sin movimiento
   Norma 7: todo se apaga con `prefers-reduced-motion`. El hero ya lo tenía; las
   tandas de artículos y la galería no, porque hasta ahora se cruzaban con un
   fundido y el fundido no molesta. Ahora se DESPLAZAN, así que hay que apagarlas
   igual: se cambia de una a otra sin recorrido, la que toca visible y las demás
   no. Se sigue pudiendo pasar con el dedo y con las bolitas; lo que se quita es
   el viaje, no la función. */
@media (prefers-reduced-motion: reduce) {
  .hx-posts__tanda,
  .hx-gallery__slide {
    transition: none !important;
    transform: none !important;
    opacity: 0;
  }
  .hx-posts__tanda.is-active,
  .hx-gallery__slide.is-active { opacity: 1; }
}

/* ---------------------------------------------------------------- adornos */
.hx-shape { position: absolute; z-index: -1; pointer-events: none; }
.hx-shape img { opacity: .9; }
.hx-shape--1  { top: 6%;  left: 2%; }
.hx-shape--2  { top: 12%; right: 4%; }
.hx-shape--3  { bottom: 8%; left: 3%; }
.hx-shape--4  { bottom: 12%; right: 5%; }
.hx-shape--5  { top: 6%;  left: 2%; }
.hx-shape--6  { top: 10%; right: 3%; }

@keyframes hx-bounce-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes hx-bounce-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
.hx-shape--float-a img { animation: hx-bounce-a 5s linear infinite; }
.hx-shape--float-b img { animation: hx-bounce-b 5s linear infinite; }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 992px) {
  .hx-carrusel__slide { background-image: var(--hx-slide); }
}

@media (max-width: 1199px) {
  .hx-container { max-width: 960px; }
}
@media (max-width: 991px) {
  .hx-container { max-width: 720px; padding: 0 15px; }
  .hx-hero__inner { flex-direction: column; align-items: flex-start; }
  .hx-hero__crumbs { flex: 1 1 auto; width: auto; max-width: 100%; }
  .hx-hero__crumbs::before { inset: 0; }
  .hx-detalle { grid-template-columns: 1fr; }
  .hx-intro { flex-direction: column; align-items: center; text-align: center; }
  .hx-nos-intro { grid-template-columns: 1fr; gap: 30px; }
  .hx-mv, .hx-valores { grid-template-columns: 1fr; gap: 30px; }
  .hx-cita { min-height: 0; padding: 60px 0; }
  .hx-cita__texto { font-size: 24px; line-height: 36px; }
  .hx-col-2, .hx-col-4, .hx-col-5, .hx-col-7, .hx-col-10 { flex: 0 0 100%; max-width: 100%; }
  .hx-nav { display: none; }
  /* En columna, `flex: 1 1 0` repartiría la ALTURA y aplastaría las tarjetas:
     apiladas, cada una mide lo que mide su contenido. */
}

/* El corte de las tarjetas es a 600px, no a 991: hasta la tableta se ven las
   dos en fila, como en el original. Por debajo va una sola y se pasa también
   arrastrando, además de con las flechas.
   En columna, `flex: 1 1 0` repartiría la ALTURA y aplastaría las tarjetas:
   apiladas, cada una mide lo que mide su contenido. */
@media (max-width: 600px) {
  .hx-posts__tanda { flex-direction: column; }
  .hx-posts__tanda > * { flex: 0 0 auto; }
  .hx-posts__nav { margin-top: 30px; }
  .hx-heading--left { text-align: center; }
  .hx-heading--left .hx-sep { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  :root { --hx-section-y: 60px; }
  .hx-slider { height: 560px; }
  .hx-slide__title { font-size: 32px; line-height: 40px; }
  .hx-heading__title,
  .hx-nos-intro__title,
  .hx-valores__titulo { font-size: 30px; line-height: 38px; }
  .hx-contact-card { padding: 25px; }
  .hx-post { padding: 22px; }
  .hx-copyright { text-align: center; }
}


/* ================================================================
   Piezas propias del theme (no estaban en el kit estático)
   ================================================================ */

/* ---------------------------------------------------------------- accesibilidad */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  width: auto; height: auto; clip: auto;
  padding: 12px 20px; background: var(--hx-white);
  box-shadow: var(--hx-shadow-stat); border-radius: 8px;
}
.hx-logo__texto { font-size: 24px; font-weight: 700; color: var(--hx-teal); }

/* ---------------------------------------------------------------- menú móvil */
.hx-burger {
  display: none;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  margin-left: auto;
}
.hx-burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--hx-ink);
  transition: var(--hx-transition);
}
.hx-burger span + span { margin-top: 5px; }

.hx-panel {
  position: fixed; inset: 0 0 0 auto;
  width: min(320px, 86vw);
  background: var(--hx-white);
  box-shadow: -4px 0 30px rgba(0, 0, 0, .18);
  padding: 70px 24px 24px;
  z-index: 100;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--hx-ease);
}
.hx-panel.is-open { transform: translateX(0); }
/* ⚠⚠ Cerrado, el panel NO se queda en el documento. Antes se forzaba
   `display:block` sobre el atributo `hidden` «porque la animación necesita que
   exista», y así el panel quedaba aparcado fuera de la pantalla: 320px de más en
   el ancho del documento, o sea barra horizontal y desplazamiento lateral EN
   TODAS las páginas. Y de paso sus enlaces seguían alcanzándose con el tabulador
   y leéndose en un lector de pantalla, porque lo único que hace el atributo
   `hidden` es poner `display:none`. La animación de entrada la resuelve el JS
   forzando un reflujo antes de abrir — ver `abrir()` en main.js. */
.hx-panel__cerrar {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  font-size: 28px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--hx-ink);
}
.hx-menu-movil { display: flex; flex-direction: column; }
.hx-menu-movil li { border-bottom: 1px solid #eef0f4; }
.hx-menu-movil a { display: block; padding: 14px 4px; font-weight: 500; color: var(--hx-ink); }
.hx-menu-movil .sub-menu a { padding-left: 20px; font-size: 15px; color: #5b6472; }
.hx-menu-movil .hx-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; }

.hx-velo {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .3s var(--hx-ease);
}
.hx-velo.is-open { opacity: 1; }

/* ---------------------------------------------------------------- buscador */
.hx-buscador {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(255, 255, 255, .97);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.hx-buscador[hidden] { display: none; }
.hx-buscador__form { display: flex; gap: 12px; width: min(640px, 100%); }
.hx-buscador__form input[type="search"] {
  flex: 1 1 auto;
  padding: 13px 16px;
  font-size: 16px;
  background: var(--hx-grey-bg);
  border: 1px solid var(--hx-grey-bg);
}
.hx-buscador__form input[type="search"]:focus { outline: none; border-color: var(--hx-teal); }
.hx-buscador__cerrar {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; font-size: 30px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--hx-ink);
}

/* ---------------------------------------------------------------- formulario */
.hx-hp { position: absolute; left: -9999px; }   /* trampa: fuera de pantalla, NO display:none */
.hx-aviso {
  padding: 14px 18px; border-radius: 8px; margin-bottom: 24px;
  border-left: 4px solid;
}
.hx-aviso--ok  { background: #e9f8f1; border-color: var(--hx-green); color: #14603c; }
.hx-aviso--err { background: #fdecec; border-color: #d63638; color: #8a1f21; }
.hx-form-msg { margin-left: 14px; font-size: 16px; line-height: 24px; }
.hx-form-msg.is-ok  { color: #14603c; }
.hx-form-msg.is-err { color: #8a1f21; }
form.is-enviado .hx-row { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- contenido suelto */
/* Los títulos DENTRO de un texto largo —artículo o página— comparten regla:
   los mismos cuerpos de la escala y el mismo interlineado de título, 1,2. */
/* RITMO DEL PÁRRAFO — dos valores y ninguno más.
   10px es el de dos líneas sueltas dentro de una pieza (lo pone la base).
   24px —una línea entera de interlineado— es el de donde se lee texto
   seguido: si dos párrafos se separan menos que eso, se leen como uno. Todos
   los sitios donde se lee seguido están en esta lista; si aparece otro, se
   añade aquí y no se escribe un valor nuevo por su cuenta. */
.hx-about__text p,
.hx-nos-intro__text p,
.hx-mv__item p,
.hx-intro__text p,
.hx-detalle__text p,
.hx-entrada__cuerpo p,
.hx-articulo__cuerpo p,
.hx-entry p { margin-bottom: 24px; }
.hx-about__text p:last-child,
.hx-nos-intro__text p:last-child,
.hx-mv__item p:last-child,
.hx-intro__text p:last-child,
.hx-detalle__text p:last-child,
.hx-entrada__cuerpo p:last-child,
.hx-articulo__cuerpo p:last-child,
.hx-entry p:last-child { margin-bottom: 0; }
.hx-articulo__cuerpo h2,
.hx-entry h2 { font-size: 24px; line-height: 28.8px; font-weight: 700; margin: 30px 0 12px; }
.hx-articulo__cuerpo h3,
.hx-entry h3 { font-size: 20px; line-height: 24px; font-weight: 700; margin: 30px 0 10px; }

/* La viñeta del sitio: un punto con el degradado de marca. Sirve para el
   artículo, para las páginas y para las listas que la clienta escriba en la
   introducción de un servicio. Una sola regla para las tres. */
.hx-articulo__cuerpo ul, .hx-articulo__cuerpo ol,
.hx-intro__text ul, .hx-intro__text ol,
.hx-detalle__text ul, .hx-detalle__text ol,
.hx-entry ul, .hx-entry ol { margin: 0 0 24px; }
.hx-articulo__cuerpo ul li,
.hx-intro__text ul li,
.hx-detalle__text ul li,
.hx-entry ul li { position: relative; padding-left: 25px; margin-bottom: 10px; }
.hx-articulo__cuerpo ol, .hx-intro__text ol,
.hx-detalle__text ol, .hx-entry ol { padding-left: 22px; list-style: decimal; }
.hx-articulo__cuerpo ol li, .hx-intro__text ol li,
.hx-detalle__text ol li, .hx-entry ol li { margin-bottom: 10px; }
.hx-articulo__cuerpo ul li::before,
.hx-intro__text ul li::before,
.hx-detalle__text ul li::before,
.hx-entry ul li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 100px;
  background-image: var(--hx-grad-secondary);
}
.hx-entry img { border-radius: 10px; }

/* ---------------------------------------------------------------- navegación entre artículos */
.hx-post-nav {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 55px;
}
.hx-post-nav a {
  flex: 1 1 300px;
  background: var(--hx-white); border-radius: 10px;
  box-shadow: var(--hx-shadow-post);
  padding: 18px 22px; font-weight: 500;
}
.hx-post-nav a:hover { color: var(--hx-teal); }

/* ---------------------------------------------------------------- paginación */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 55px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 8px; background: var(--hx-white);
  box-shadow: var(--hx-shadow-stat); font-weight: 500;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background-image: var(--hx-grad-primary); color: var(--hx-white); }

/* ---------------------------------------------------------------- 404 */
.hx-404 { font-size: 120px; line-height: 1; font-weight: 700; color: var(--hx-ink); margin: 0 0 20px; }
.hx-404__cero {
  background-image: var(--hx-grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------- WhatsApp */
.hx-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 54px; height: 54px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: var(--hx-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: var(--hx-transition);
}
.hx-wa:hover { transform: scale(1.06); }
.hx-wa svg { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- responsive del theme */
@media (max-width: 991px) {
  .hx-burger { display: block; }
  .hx-topbar { display: none; }
  .hx-navbar .hx-col-2 { flex: 0 0 60%; max-width: 60%; }
  .hx-navbar .hx-col-10 { flex: 0 0 40%; max-width: 40%; display: flex; justify-content: flex-end; }
  .hx-logo img { width: 220px; }
}

/* ---------------------------------------------------------------- Nosotros: vídeo */
.hx-nos-intro__media video,
.hx-nos-intro__media img {
  width: 100%; height: auto; display: block;
}
.hx-nos-intro--solo { grid-template-columns: 1fr; }
.hx-nos-intro--solo .hx-nos-intro__text { max-width: 820px; margin: 0 auto; }

/* ---------------------------------------------------------------- Contacto: vídeo */
.hx-contacto__video video,
.hx-contacto__video img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- Recursos
   La sección tenía sus plantillas y su sistema de descargas desde el 06/08,
   pero ni una línea de estilo: salía sin maquetar. Aquí está.

   Todo sale de las dos escalas del sistema: cuerpos 40/24/20/16 con 1,2 y 1,5,
   y separaciones 100 / 55 / 30. Lo que se parece a algo que ya existe comparte
   su regla (la tarjeta, arriba, con la del artículo) en vez de repetir valores. */

/* Listado. DOS por fila en escritorio y una en móvil, con el paso de 30 que usa
   cualquier fila del sitio.

   ⭐ El 380 no es un número suelto: es lo que hace que quepan dos y no tres. Con
   tres columnas la tarjeta queda en 347px y el nombre de un descargable —que es
   una frase entera, no un titular— ocupa cinco o seis líneas y se lee como un
   muro. A dos columnas la tarjeta mide 535px y el mismo título baja a tres.
   Es el ancho de la columna lo que resuelve esto, no el tamaño de la letra.

   `min-width: 0` para que un título largo no estire su columna: es la trampa
   clásica de los items de grid. */
.hx-recursos {
  display: grid;
  /* ⚠️ `min(380px, 100%)` y no `380px` a secas: en una pantalla más estrecha que
     380, `auto-fill` deja una sola columna pero le respeta el mínimo, así que la
     fila mide 380 y se sale de la pantalla. Con `min()` la columna nunca puede
     ser más ancha que su sitio. Es el desborde horizontal clásico en móvil. */
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 30px;
}
.hx-recursos > * { min-width: 0; }

.hx-recurso-card { display: flex; flex-direction: column; }
.hx-recurso-card__media { display: block; margin: -30px -30px 0; overflow: hidden; }
/* ⭐ TODAS LAS FOTOS DEL LISTADO MIDEN LO MISMO: 3:2, y lo que sobra se recorta.
   El cliente sube lo que tenga —una foto vertical del móvil, una captura ancha— y
   sin esto cada tarjeta empieza su título a una altura distinta y la fila se ve
   desordenada. El 3:2 es proporción de foto, así que no maltrata ni las verticales.
   `object-fit: cover` recorta desde el centro, que es donde está el asunto en una
   foto de detalle. La proporción va en la IMAGEN, no en el enlace que la envuelve:
   un `aspect-ratio` sobre un hijo de flex no siempre se respeta en móvil. */
.hx-recurso-card__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* El título se queda en 24, el cuerpo que le toca a un título de bloque. Lo que
   hacía que se leyera como un muro NO era el tamaño: era el ancho de la columna.
   Medido a 1280px con los dos títulos reales, que son frases enteras:
   columna de 347px → 6 y 5 líneas · columna de 535px → 3 y 3.
   Bajar a 20px en la columna estrecha no quitaba ni una línea (ganaba 5px de alto),
   porque estas palabras son largas y rompen igual. Se arregla arriba, en el grid. */
.hx-recurso-card__title {
  font-size: 24px; line-height: 28.8px; font-weight: 700;
  color: var(--hx-ink); margin: 20px 0 10px;
}
.hx-recurso-card__title a:hover { color: var(--hx-teal); }
/* El aire con el botón lo pone el propio texto por abajo, NO un `margin-top` en
   el botón: cualquier `margin-top` empata en especificidad con el `auto` de la
   regla siguiente y, al ir después, lo pisa — y entonces el botón de la tarjeta
   con menos texto se queda a media altura en vez de pegarse abajo. */
.hx-recurso-card__excerpt {
  font-size: 16px; line-height: 24px; color: var(--hx-ink); margin: 10px 0 20px;
}
/* El botón se pega abajo, así todas las tarjetas de una fila lo alinean aunque
   sus textos midan distinto. */
.hx-recurso-card .hx-btn { margin-top: auto; align-self: flex-start; }

/* Ficha del recurso. Con imagen, dos columnas; sin ella, una sola columna
   centrada y con el ancho de lectura del resto del sitio. */
.hx-recurso {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 55px;
  align-items: start;
}
/* Sin imagen, una sola columna. La clase la pone la plantilla, no `:has()`:
   es el mismo patrón que `.hx-nos-intro--solo` y no depende del navegador. */
.hx-recurso--solo {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
}
.hx-recurso__media img { width: 100%; height: auto; display: block; border-radius: 10px; }
.hx-recurso__accion { margin: 30px 0 0; }

/* La puerta de datos. Es el mismo formulario del sitio en tarjeta blanca, con
   el relleno de 55 que manda el sistema. */
.hx-recurso__puerta {
  margin-top: 55px;
  background: var(--hx-white);
  box-shadow: 0 5px 60px -2px rgba(0, 0, 0, .12);
  padding: 55px;
}
.hx-recurso__puerta-titulo {
  font-size: 24px; line-height: 28.8px; font-weight: 700;
  color: var(--hx-ink); margin: 0 0 30px;
}
.hx-recurso__puerta .hx-row { row-gap: 0; }

/* El estado «enviado» es el mismo aquí y en el modal: una sola regla, abajo, en
   el bloque del modal. */
.hx-recurso__puerta .hx-form-msg:focus { outline: none; }

/* ⚠️ CAMPO TRAMPA. Fuera de pantalla, NUNCA `display: none`: los robots que
   valen algo ignoran lo que está oculto así, y algún lector de pantalla lo
   anunciaría igual. Con `aria-hidden` no basta porque debe seguir enviándose. */
.hx-trampa {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .hx-recurso { grid-template-columns: 1fr; gap: 30px; }
  .hx-recurso__puerta { padding: 25px; }
}

/* ---------------------------------------------------------------- Modal de los recursos
   Se abre desde la grilla, para no obligar a nadie a entrar a la página del
   recurso solo para dejar dos datos.

   Va con `<dialog>` nativo: el fondo oscuro, la tecla Escape, el foco atrapado y
   el «no se puede tocar lo de detrás» vienen de serie. Cerrado no se pinta, así
   que tampoco hay que taparlo con nada para que no parpadee al cargar. */
.hx-modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(560px, calc(100vw - 40px));
  width: 100%;
  max-height: calc(100vh - 40px);
  color: var(--hx-ink);
}
.hx-modal::backdrop { background: rgba(17, 16, 77, .55); }

.hx-modal__caja {
  position: relative;
  background: var(--hx-white);
  border-radius: 10px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .35);
  /* 55 es el relleno de tarjeta del sistema; 50 a los lados para dejar sitio a la
     cruz de cerrar sin que se monte encima del título. */
  padding: 55px 50px;
}

.hx-modal__cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;          /* área táctil de 44, como el resto de controles */
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--hx-ink);
  transition: var(--hx-transition);
}
.hx-modal__cerrar:hover { background: var(--hx-grey-bg); color: var(--hx-teal); }
.hx-modal__cerrar:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: 2px; }

/* La etiqueta usa el 16/700 de etiqueta de la escala, no un cuerpo nuevo. */
.hx-modal__eyebrow {
  font-size: 16px; line-height: 24px; font-weight: 700;
  color: var(--hx-teal); margin: 0 0 10px;
}
.hx-modal__titulo {
  font-size: 24px; line-height: 28.8px; font-weight: 700;
  margin: 0 0 10px;
}
.hx-modal__texto {
  font-size: 16px; line-height: 24px; margin: 0 0 30px;
}
.hx-modal__pie { margin-top: 30px; }
.hx-modal__pie .hx-form-msg { display: block; margin: 14px 0 0; }

.hx-field__opcional { color: #767676; font-weight: 400; }

/* ⭐ CONFIRMACIÓN: no se añade un aviso debajo del formulario, se SUSTITUYE la
   pantalla. Cuando el correo ya salió, la pantalla no pide nada, así que dejar los
   campos ahí —aunque sea en gris— es dejar a la vista algo que ya no se puede usar.
   Se retira el formulario entero y la etiqueta de arriba; el título y el texto los
   reescribe el JS con lo que manda el servidor.
   La clase va en `[data-hex-puerta]`, el contenedor, y no en el `<form>`: hay que
   poder ocultar cosas que están fuera de él. Una sola regla para el modal del
   listado y para la ficha del recurso. */
[data-hex-puerta].is-enviado form,
[data-hex-puerta].is-enviado [data-hex-puerta-oculta] { display: none; }

/* En la confirmación el título respira igual que en cualquier bloque del sistema. */
[data-hex-puerta].is-enviado [data-hex-puerta-titulo] { margin-bottom: 10px; }
[data-hex-puerta].is-enviado [data-hex-puerta-texto] { margin-bottom: 10px; }
[data-hex-puerta].is-enviado [data-hex-puerta-titulo]:focus { outline: none; }

/* En móvil el modal ocupa casi todo, que es lo que se espera de un panel en el
   teléfono, y el contenido puede desplazarse si el teclado se come la pantalla. */
@media (max-width: 767px) {
  .hx-modal {
    max-width: 100%; width: 100%;
    max-height: 100vh; height: auto;
    margin: auto 0 0;                  /* pegado abajo: donde llega el pulgar */
  }
  .hx-modal__caja {
    padding: 50px 25px 25px;
    border-radius: 10px 10px 0 0;
    max-height: 92vh; overflow-y: auto;
  }
}

/* Qué hacer si el correo con el enlace no llega. Sale solo cuando ya se envió, y
   en letra pequeña: es una nota de servicio, no parte del mensaje de éxito.
   Vacío no ocupa nada, así que antes de enviar no deja un hueco. */
.hx-form-ayuda {
  font-size: 16px; line-height: 24px; color: #767676;
  margin: 10px 0 0;
}
.hx-form-ayuda:empty { display: none; }
.hx-form-ayuda a { color: var(--hx-teal); text-decoration: underline; }

/* ---------------------------------------------------------------- Boletín
   Franja de suscripción al final de todas las páginas, encima del pie. Es un
   formulario DISTINTO al de contacto y de un solo campo: pedir más datos para
   apuntarse a un boletín es perder a la mitad por el camino.

   Usa el degradado secundario de la marca, el mismo de «¿Por qué elegirnos?» y
   de la banda de clientes, así que la franja se lee como parte del sitio y no
   como un añadido. Separación: el paso de sección del sistema, 100px. */
.hx-boletin {
  background-image: var(--hx-grad-secondary);
  padding: var(--hx-section-y) 0;
  color: var(--hx-white);
  /* ⚠⚠ El halo de burbujas del botón mide 2em MÁS que el botón por cada lado
     (`.hx-btn::before { inset: -2em }`, o sea 32px). Aquí el botón ocupa el ancho
     completo en cuanto la fila se parte, así que ese halo se sale de la pantalla
     por la derecha y ENSANCHA EL DOCUMENTO 17px — 32 del halo menos los 15 de
     `padding` del contenedor en móvil. Como esta franja va en el pie de TODAS las
     páginas, el sitio entero se podía correr de lado. Medido: 17px en las seis
     páginas y en 360, 375 y 414 de ancho; con esta línea, cero en las dieciocho.
     ⚠ `clip` y NO `hidden`: `hidden` convertiría la franja en un contenedor de
     desplazamiento y arrastraría el eje Y con él. Y solo en X, que es el único
     que se sale — las burbujas siguen asomando por arriba y por abajo. */
  overflow-x: clip;
  /* ⚠ Reserva para navegadores que no entienden `overflow: clip` y se saltan la
     línea de arriba: ahí volverían los 17px. `clip-path` recorta a izquierda y
     derecha y deja arriba y abajo sin tocar (-100%), y también quita el
     desbordamiento — medido, no supuesto. Soporte mucho más antiguo. */
  clip-path: inset(-100% 0);
}
.hx-boletin__titulo {
  font-size: 40px; line-height: 48px; font-weight: 700;
  color: var(--hx-white); margin: 0 0 10px;
}
.hx-boletin__texto {
  font-size: 16px; line-height: 24px; color: var(--hx-white);
  margin: 0; max-width: 460px;
}
.hx-boletin__texto:empty { display: none; }

/* El campo y el botón, en línea. La etiqueta existe para el lector de pantalla
   pero no se pinta: el marcador de posición ya dice qué va ahí, y un rótulo
   suelto sobre el degradado ensuciaría la franja. */
.hx-boletin__label {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.hx-boletin__fila {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hx-boletin__fila input[type="email"] {
  flex: 1 1 240px; min-width: 0;      /* min-width:0 o un correo largo estira la fila */
  /* 48px es el alto del botón del sistema (8+32+8). El campo y el botón tienen que
     medir lo mismo o el remate de la fila se ve descuadrado. */
  height: 48px; padding: 0 20px;
  font-family: inherit; font-size: 16px; line-height: 48px;
  color: var(--hx-ink); background: var(--hx-white);
  border: 0; border-radius: 8px;
}
/* El botón crece con el hueco que le quede y, cuando la columna es tan estrecha
   que la fila se parte, ocupa el ancho entero. Así se resuelve sin depender de un
   `@media`, que mide la PANTALLA y aquí lo que manda es el ancho de la COLUMNA. */
.hx-boletin__fila .hx-btn { flex: 1 1 auto; justify-content: center; }
.hx-boletin__fila input[type="email"]::placeholder { color: #767676; }
.hx-boletin__fila input[type="email"]:focus {
  outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px;
}
.hx-boletin .hx-form-msg { display: block; margin: 14px 0 0; color: var(--hx-white); }
.hx-boletin .hx-form-msg.is-err { color: #ffe0e0; }
.hx-boletin .hx-form-ayuda { color: rgba(255, 255, 255, .85); }
.hx-boletin .hx-form-ayuda a { color: var(--hx-white); }

/* Botón blanco: sobre el degradado, el turquesa de siempre no se leería. */
.hx-btn--blanco {
  background: var(--hx-white); background-image: none;
  color: var(--hx-teal); border: 0;
}
.hx-btn--blanco .hx-btn__icon { background: rgba(0, 168, 173, .12); }
@media (hover: hover) {
  .hx-btn--blanco:hover { background: var(--hx-grey-bg); color: var(--hx-teal); }
}

@media (max-width: 991px) {
  /* Apilado: el texto arriba y el formulario debajo, con el paso de fila del sistema. */
  .hx-boletin .hx-row { row-gap: 30px; }
  .hx-boletin__titulo { font-size: 30px; line-height: 38px; }
  .hx-boletin__texto { max-width: none; }
}
/* Sin `@media` para el apilado: lo hace el propio flex. El campo no baja de 240px
   y el botón crece con lo que sobre, así que cuando la columna no da para los dos
   la fila se parte sola y cada uno ocupa el ancho entero. Una regla de anchura por
   pantalla se equivocaría, porque lo que manda aquí es el ancho de la COLUMNA. */

/* Casilla de consentimiento del boletín. Va dentro de la puerta de los recursos.
   El área que se puede pulsar es toda la etiqueta, no solo el cuadradito de 16px:
   en un teléfono, acertarle al cuadradito es una lotería. */
/* ⭐ EL AIRE ENTRE DOS CASILLAS LO PONE SOLO EL RELLENO DE LA ETIQUETA, no un margen.
   Con `margin-bottom: 24px` más el relleno de las dos etiquetas, entre un texto y el
   siguiente quedaban 44px y las dos casillas se leían como dos bloques sin relación
   en vez de como una lista de dos cosas.
   El relleno de 5px deja los 10px de la escala entre los dos textos —el paso de dos
   líneas de una misma pieza— y da 34px de alto que se puede pulsar. La última lleva
   su margen escrito como resta, para que el aire REAL hasta el botón sea 24. */
.hx-check { margin: 0; }
/* Y el relleno del primero y del último se descuenta con un margen negativo, para
   que el bloque de casillas ocupe lo que ocuparía sin relleno: así el aire con el
   campo de arriba y con el botón de abajo lo siguen poniendo ELLOS, con su paso de
   la escala, y no queda un 29 o un 35 por el medio. */
.hx-check:first-of-type { margin-top: -5px; }
.hx-check:last-of-type { margin-bottom: -5px; }
.hx-check label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-size: 16px; line-height: 24px; color: var(--hx-ink);
  padding: 5px 0;
}
.hx-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--hx-teal);   /* la marca en el propio control del navegador */
  cursor: pointer;
}
.hx-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: 2px; }

/* ⭐ La confirmación del boletín ocupa el ancho entero y va centrada. Mientras la
   franja pide el correo tiene dos columnas —texto a un lado, formulario al otro—,
   pero al enviarse el formulario desaparece y ese hueco dejaba el mensaje pegado a
   la izquierda con media franja vacía al lado. */
.hx-boletin.is-enviado .hx-row > * {
  flex: 0 0 100%; max-width: 100%;
  text-align: center;
}
.hx-boletin.is-enviado .hx-boletin__texto,
.hx-boletin.is-enviado .hx-form-ayuda {
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.hx-boletin.is-enviado [data-hex-puerta-titulo]:focus { outline: none; }

/* Página legal: el ancho de lectura del sitio. Un texto de política de privacidad
   a 1100px de ancho no se lee, se sobrevuela. */
.hx-legal { max-width: 820px; margin: 0 auto; }

/* El enlace legal del pie, debajo de los iconos sociales. Discreto a propósito:
   tiene que estar y poder encontrarse, no llamar la atención. */
.hx-legal-link { margin: 20px 0 0; text-align: center; }
.hx-legal-link a {
  font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .7);
  text-decoration: underline; text-underline-offset: 3px;
  transition: var(--hx-transition);
}
.hx-legal-link a:hover { color: var(--hx-white); }

/* La obligatoria no lleva ninguna marca: se distingue porque el navegador no deja
   enviar sin ella, y una barra de color al lado solo añadía ruido a un formulario
   que ya es corto. */
.hx-check a { color: var(--hx-teal); text-decoration: underline; text-underline-offset: 3px; }
.hx-check a:hover { color: var(--hx-blue); }

/* En la franja del boletín, sobre el degradado, el turquesa no se lee. */
.hx-check--claro label { color: var(--hx-white); }
.hx-check--claro a { color: var(--hx-white); }
.hx-check--claro a:hover { color: rgba(255, 255, 255, .8); }
.hx-check--claro input[type="checkbox"] { accent-color: var(--hx-white); }

/* Los iconos y el enlace legal, apilados dentro de su columna del pie. */
.hx-footer-social { display: flex; flex-direction: column; align-items: center; }

/* ---------------------------------------------------------------- Resultados de búsqueda
   El buscador siempre encontró servicios, recursos y páginas, no solo artículos.
   Lo que faltaba era que se notara: sin etiqueta, un servicio con chapa de fecha
   se lee como una entrada de blog. Y como los recursos comparten título con los
   artículos, sin ella salían dos resultados idénticos hacia sitios distintos. */

/* Cuántos hay. 16/700 en gris: es un dato de servicio, no un título. */
.hx-busqueda__resumen {
  font-size: 16px; line-height: 24px; font-weight: 700;
  color: #767676; margin: 0 0 30px;
}

/* La etiqueta del tipo. Usa el 16/700 de etiqueta de la escala y el turquesa de
   marca, igual que el rótulo del modal de los recursos: es la misma clase de
   pieza y se lee como parte del sistema. */
.hx-entrada__tipo {
  font-size: 16px; line-height: 24px; font-weight: 700;
  color: var(--hx-teal);
  margin: 0;
  text-transform: none;   /* nada en mayúsculas por CSS, norma del sitio */
}
/* Con etiqueta, el título ya no necesita su propio aire por arriba. */
.hx-entrada__tipo + .hx-entrada__title { margin-top: 4px; }

/* La chapa de fecha es un bloque normal, no va flotada a la izquierda, así que al
   quitarla no queda ningún hueco lateral que compensar: solo sobra el aire que el
   título dejaba por encima de ella. */
.hx-entrada--sin-fecha .hx-entrada__title { margin-top: 0; }

/* Los resultados, de dos en dos. A ancho completo cada tarjeta quedaba larguísima
   y medio vacía: el título de una página son dos palabras. En dos columnas el
   bloque se lee de un barrido, que es lo que se hace en una página de resultados.
   `min(420px, 100%)` por lo mismo que en el listado de recursos: con `420px` a
   secas, una pantalla más estrecha desborda. */
.hx-busqueda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 30px;
}
.hx-busqueda > * { min-width: 0; }

/* Dentro de la rejilla la tarjeta ya no lleva su margen de lista: lo pone el gap. */
.hx-busqueda .hx-entrada {
  margin-bottom: 0;
  display: flex; flex-direction: column;
}
/* El botón se pega abajo, así las dos tarjetas de una fila lo alinean. El aire lo
   pone el fragmento por abajo, NUNCA un margin-top en el botón: cualquier
   margin-top empata en especificidad con el `auto` y lo pisa. */
.hx-busqueda .hx-entrada__excerpt { margin: 10px 0 20px; }
.hx-busqueda .hx-entrada .hx-btn { margin-top: auto; align-self: flex-start; }

/* Lo buscado, resaltado. Sin fondo amarillo de navegador: el turquesa de la marca
   al 18%, que se lee igual y no rompe la página. */
.hx-marca {
  background: rgba(0, 168, 173, .18);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}