/*
Theme Name: ALDIA Child
Description: Tema hijo de Kadence para la web de ALDIA
Author: Juan Carlos
Template: kadence
Version: 1.2.51
Text Domain: aldia-child
*/

/* ============================================
   PIE — Candado del acceso a Intranet
   Maqueta: .acceso-empleados (portada-marino.html)
   ============================================ */
.site-footer li.intranet > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.site-footer li.intranet > a::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================
   PIE — Rótulos de columna sin versalitas
   Kadence fuerza uppercase en .widget-title
   ============================================ */
.site-footer .widget-title,
.site-footer .widget-area .widget-title,
.site-footer .footer-widget-area .widget-title {
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================
   PIE — Franja de sellos de certificación
   ============================================ */
.pie-sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.pie-sellos img {
  height: 46px;
  width: auto;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 10px;
}

@media (max-width: 700px) {
  .pie-sellos { gap: 14px; }
  .pie-sellos img { height: 34px; }
}

/* ============================================
   CABECERA — Marca IA en el menú principal
   Maqueta: .marca-ia (portada-marino.html)
   Ruta relativa desde el tema hijo: no usar URL absoluta
   SVG sacado del logo vectorial (08-10-2026); se sube 4 px
   para que la marca se apoye en la línea base del menú
   ============================================ */
.main-navigation li.nav-ia > a {
  display: inline-flex;
  align-items: center;
  width: 41px;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  background-image: url("../../uploads/2026/10/aldia-marca-ia.svg");
  background-repeat: no-repeat;
  background-position: center calc(50% - 4px);
  background-size: 41px auto;
}

.main-navigation li.nav-ia > a:hover {
  opacity: .8;
}

/* ============================================
   CABECERA — Desplegable de Sectores a dos columnas
   El display va SOLO en la regla de apertura:
   si se pone en la clase base, el submenú
   aparece abierto al cargar la página.
   ============================================ */
.menu-2col ul {
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-auto-columns: minmax(210px, 1fr);
}

.menu-2col:hover ul,
.menu-2col:focus-within ul {
  display: grid !important;
}


/* ============================================================
   UTILIDADES REUTILIZABLES
   ============================================================ */

/* Texto solo para lectores de pantalla — dos variantes heredadas.
   Unificar en una sola cuando haya ocasión. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Entradilla de sección — común a todas.
   La rotativa la sobrescribe más abajo por ir sobre marino. */
.entradilla {
  font-size: 19px;
  color: #5a6b80;
  margin: 0 auto 36px;
}

/* Rótulo de sección con línea
   Se usa en Dos disciplinas, Sectores y Únete a nosotros */
.rotulo-seccion {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #17365d;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0088f0;
}

/* ------------------------------------------------------------
   Huecos de imagen pendiente — provisionales (DW-07)
   Uso: en la Section, CSS Classes = "hueco-foto hueco-43"
        o "hueco-foto hueco-pata", con un Paragraph dentro.
   Se retiran cuando haya fotografía real.
   ------------------------------------------------------------ */
.hueco-foto .kt-inside-inner-col {
  background: #eef3f8;
  border: 2px dashed #c4d3e4;
  border-radius: 12px;
  color: #8a97a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
}

.hueco-foto p {
  margin: 0;
  font-size: 13px;
}

.hueco-43 .kt-inside-inner-col { aspect-ratio: 4 / 3; }

.hueco-pata .kt-inside-inner-col {
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}

/* Variante para cuando el hueco es el propio párrafo y no una
   Section — tarjetas de casos, cuya estructura no permite lo otro */
.hueco-parrafo {
  aspect-ratio: 16 / 9;
  background: #eef3f8;
  border-bottom: 1px solid #d6e0ec;
  color: #8a97a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin: 0 0 16px;
  text-align: center;
}


/* ============================================
   PORTADA — Hero, fondo animado
   El SVG lo inyecta functions.php desde la
   biblioteca de medios (ver DT-05)
   ============================================ */
.hero-aldia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-fondo svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175%;
  height: auto;
  transform: translate(-50%, -50%);
}

.hero-aldia > .kt-row-layout-inner {
  position: relative;
  z-index: 1;
}

.red-lineas { animation: respirar 4s ease-in-out infinite alternate; }
.red-nodos  { animation: vaiven-red 9s ease-in-out infinite alternate; }
.red-nodos circle { animation: brillar 2.4s ease-in-out infinite alternate; }
.capa-a { animation: vaiven-a 7s ease-in-out infinite alternate; }
.capa-b { animation: vaiven-b 4s ease-in-out infinite alternate; }
.capa-a, .capa-b { will-change: transform, opacity; }

@keyframes respirar { from { opacity: .55; } to { opacity: 1; } }
@keyframes brillar  { from { opacity: .25; } to { opacity: .95; } }
@keyframes vaiven-red {
  from { transform: translate(-34px, 20px); }
  to   { transform: translate(38px, -24px); }
}
@keyframes vaiven-a {
  from { transform: translate(-95px, 40px) scale(1); }
  to   { transform: translate(100px, -48px) scale(1.05); }
}
@keyframes vaiven-b {
  from { transform: translate(230px, -70px) scale(1.08); }
  to   { transform: translate(-220px, 80px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .capa-a, .capa-b, .red-lineas, .red-nodos, .red-nodos circle {
    animation: none;
  }
}


/* ============================================
   PORTADA — Marquesina de países
   Valores consolidados: antes había tres bloques
   sueltos que se pisaban entre sí
   ============================================ */
.marquesina {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid #D6E0EC;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquesina .linea-paises {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: desfile 42s linear infinite;
}

.marquesina.en-pausa .linea-paises { animation-play-state: paused; }

.marquesina .linea-paises li {
  flex: 0 0 auto;
  font-size: 15px;
  color: #5A6B80;
  white-space: nowrap;
}

.marquesina .linea-paises li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8A97A8;
  margin-left: 34px;
  margin-right: 34px;
  vertical-align: middle;
}

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

.marquesina .pausa {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #8A97A8;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquesina .pausa:focus-visible {
  outline: 2px solid #1159AF;
  outline-offset: 2px;
}

.marquesina .icono-pausa {
  width: 8px;
  height: 10px;
  border-left: 3px solid #17365D;
  border-right: 3px solid #17365D;
}

.marquesina.en-pausa .icono-pausa {
  width: 0;
  height: 0;
  border: none;
  border-left: 9px solid #17365D;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .marquesina .linea-paises { animation: none; }
  .marquesina { overflow-x: auto; }
}


/* ============================================
   PORTADA — Dos disciplinas
   ============================================ */

/* OJO: esta regla NO está acotada a ninguna sección, así que
   afecta a TODOS los bloques Icon del sitio. Antes de poblar
   las 33 páginas interiores hay que acotarla a la clase de las
   tarjetas de disciplina. Ver DT-10 en el estado. */
.kb-icon-wrap,
.kt-svg-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #EEF3F8;
  margin-bottom: 10px;
}


/* ============================================================
   PORTADA — Sectores, rejilla de 12
   Maqueta: portada-aldia-v3.html
   Dos Row Layout de 6 columnas, gutters 12 px
   ============================================================ */

/* Separación entre las dos filas */
.rejilla-sectores .kt-row-layout-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rejilla-sectores + .rejilla-sectores {
  margin-top: 12px !important;
}

/* Tarjeta
   min-height iguala las dos filas: height:100% solo iguala
   dentro de cada Row Layout, no entre filas distintas.
   Depende del tamaño de letra; revisar si cambia la tipografía. */
.tarjeta-sector .kt-inside-inner-col {
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  height: 100%;
  min-height: 118px;
}

.tarjeta-sector .kb-svg-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #eef3f8;
}

.tarjeta-sector h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: #17365d;
  margin: 0;
}

/* Cortes de la maqueta */
@media (max-width: 1024px) {
  .rejilla-sectores .kt-row-column-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .seccion-sectores {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 640px) {
  .rejilla-sectores .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .seccion-sectores h2,
  .seccion-sectores .entradilla {
    text-align: left;
  }
}


/* ============================================================
   PORTADA — Rotativa de sectores
   Pase de diapositivas: solo .activa es visible.
   Los puntos y la pausa los crea functions.php
   ============================================================ */

.diapo { display: none !important; }
.diapo.activa { display: block !important; }

.diapo .kt-row-column-wrap {
  align-items: center;
}

.sobretitulo {
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #00bdfc;
  margin: 0 0 10px !important;
}

.seccion-rotativa h2 {
  font-size: 37px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
}

.seccion-rotativa .entradilla {
  color: #dbe6f2;
  margin: 0 0 26px;
}

.seccion-rotativa .hueco-foto .kt-inside-inner-col {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #9fb4cd;
}

/* Controles */
.rot-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}

.rot-punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
}

.rot-punto[aria-current="true"] {
  background: #00bdfc;
  width: 24px;
  border-radius: 5px;
}

.rot-pausa {
  margin-left: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.rot-punto:focus-visible,
.rot-pausa:focus-visible {
  outline: 2px solid #00bdfc;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .seccion-rotativa {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .seccion-rotativa h2 { font-size: 28px; }
}


/* ============================================================
   PORTADA — Sección IA
   Cabecera: Row Layout de 2 columnas (marca | titular)
   El botón está estilizado desde el panel del bloque (DT-04)
   ============================================================ */

/* DT-06: estas dos reglas son redundantes a propósito, una para
   grid y otra para flex, porque no se sabe cuál usa Kadence.
   Comentar una, recargar con Ctrl+F5 y borrar la que no haga falta. */
.ia-cab .kt-row-column-wrap {
  grid-template-columns: 74px 1fr !important;
  gap: 24px !important;
  align-items: start;
}

.ia-cab .wp-block-kadence-column:first-child {
  flex: 0 0 74px !important;
  width: 74px !important;
  max-width: 74px !important;
}

.ia-cab h2 {
  font-size: 37px;
  font-weight: 600;
  color: #17365d;
  margin: 0;
}

.marca-ia-grande img {
  display: block;
  height: 54px;
  width: auto;
  margin-top: 4px;
}

.ia-cierre .kt-row-column-wrap {
  align-items: center;
}

.ia-cierre .wp-block-kadence-column:not(.hueco-foto) p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.62;
  color: #5a6b80;
}

@media (max-width: 900px) {
  .seccion-ia {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .ia-cab h2 {
    font-size: 28px;
  }
}


/* ============================================
   PORTADA — Modelos de colaboración
   ============================================ */
.modelo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EEF3F8;
  color: #17365D;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 14px;
}

.modelo-num + h3,
.modelo-num + .wp-block-heading {
  margin-top: 0 !important;
}

.modelo-ideal {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #E3E9F0;
  font-size: 14px;
  color: #5A6B80;
}

.modelo-ideal strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: #17365D;
  margin-bottom: 4px;
}

.modelos-fila > .wp-block-kadence-column,
.modelos-fila .kt-inside-inner-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modelos-intro { margin-bottom: 8px !important; }


/* ============================================
   PORTADA — Casos de éxito
   ============================================ */
.casos-fila > .wp-block-kadence-column,
.casos-fila .kt-inside-inner-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.caso-sector {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: #1159AF;
  margin-bottom: 6px !important;
}

.caso-cifra {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid #E3E9F0;
  font-size: 14px;
  color: #5A6B80;
}


/* ============================================================
   PORTADA — Únete a nosotros
   ============================================================ */

.tarjeta-unete .kt-inside-inner-col {
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 12px;
  padding: 26px 22px;
  height: 100%;
}

.tarjeta-unete .kb-svg-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: #eef3f8;
}

.tarjeta-unete h3 {
  font-size: 17px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 6px;
}

.tarjeta-unete p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5a6b80;
}


/* ============================================================
   CARRUSELES — testimonios y casos de éxito
   Pisa el grid de Kadence para hacer una tira desplazable.
   Las flechas las crea functions.php
   ============================================================ */

.rejilla-citas,
.rejilla-casos {
  position: relative;
}

.rejilla-citas .kt-row-column-wrap,
.rejilla-casos .kt-row-column-wrap {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 36px) / 3) !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.rejilla-citas .kt-row-column-wrap::-webkit-scrollbar,
.rejilla-casos .kt-row-column-wrap::-webkit-scrollbar {
  display: none;
}

.rejilla-citas .wp-block-kadence-column,
.rejilla-casos .wp-block-kadence-column {
  scroll-snap-align: start;
}

/* Flechas */
.cita-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d6e0ec;
  background: #fff;
  color: #17365d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cita-nav svg {
  width: 20px;
  height: 20px;
}

.cita-nav:disabled {
  opacity: .3;
  cursor: default;
}

.cita-nav:focus-visible {
  outline: 2px solid #00bdfc;
  outline-offset: 2px;
}

.nav-ant { left: -20px; }
.nav-sig { right: -20px; }

/* Tarjeta de testimonio */
.tarjeta-cita .kt-inside-inner-col {
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 12px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cita-marca {
  font-family: Georgia, serif;
  font-size: 42px;
  line-height: .8;
  color: #00bdfc;
  margin: 0 0 10px !important;
}

.cita-texto {
  margin: 0 0 18px !important;
  font-size: 16px;
  line-height: 1.62;
  color: #333;
  flex: 1;
}

.cita-firma {
  border-top: 1px solid #d6e0ec;
  padding-top: 13px;
  margin: 0 !important;
  font-size: 14px;
  color: #5a6b80;
}

.cita-firma strong {
  display: block;
  color: #17365d;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .rejilla-citas .kt-row-column-wrap,
  .rejilla-casos .kt-row-column-wrap {
    grid-auto-columns: 85% !important;
  }
  .nav-ant { left: 0; }
  .nav-sig { right: 0; }
}

/* ============================================================
   PÁGINAS INTERIORES — Cabecera (opción A, cerrada el 17-09)
   Maqueta: contacto.html (.miga-barra, .hero-int)
   Estructura:
     Row Layout  .miga-barra   ← miga de pan
     Row Layout  .cab-foto     ← foto como fondo del bloque
       └─ Column .cab-caja     ← H1 + entradilla
   La foto se recorta ANTES de subir a 4,35:1 (ideal 3000 × 690)
   ============================================================ */

.miga-barra {
  background: #fff;
  border-bottom: 1px solid #d6e0ec;
}
.miga-barra p {
  margin: 0;
  font-size: 14px;
  color: #5a6b80;
}
.miga-barra a { color: #1159af; }

.cab-foto {
  background-color: #fff;
  background-size: cover !important;
  background-position: center !important;
}
.cab-foto .kt-row-column-wrap {
  min-height: 440px;
  padding-top: 0 !important;
  padding-bottom: 46px !important;
  align-content: end;
  align-items: end;
}

.cab-caja {
  width: 100% !important;
  max-width: 560px !important;
  justify-self: start;
}
.cab-caja .kt-inside-inner-col {
  background: #17365d;
  padding: 34px 38px;
}
.cab-caja h1 {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
}
.cab-caja p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #dbe6f2;
}

/* Móvil y tableta: la foto queda como franja de 220 px y la caja pasa
   debajo. La franja la pinta .cab-foto::after con la misma foto, que
   hereda, a «cover»: llena todo el ancho sea cual sea la proporción de
   la foto (1.2.46). Antes iba a «auto 220px» y solo llegaba a los bordes
   hasta 220 × proporción (417 px en Ofertas, 581 en las de 1500 × 568):
   más ancho, márgenes blancos a los lados; y el encuadre de cada página
   (18 %, 40 %…) la bajaba y dejaba un hueco encima. El encuadre también
   se hereda, así que el de cada página sigue valiendo dentro de la
   franja. La foto del fondo de la fila se oculta (tamaño 0) para que no
   asome junto a la caja. ::before no sirve: es el clearfix de Kadence. */
@media (max-width: 900px) {
  .cab-foto {
    background-size: 0 0 !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    /* La de Contacto lleva un borde de 1 px puesto en el panel: a los lados
       era una raya gris junto a la caja (1.2.48) */
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .cab-foto::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: inherit;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  /* Sin los 24 px de Kadence a cada lado: la caja azul llega a los bordes
     de la pantalla; el texto sigue a 24 px por el relleno de la caja (1.2.48) */
  .cab-foto .kt-row-column-wrap {
    min-height: 0;
    padding-top: 220px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .cab-caja { max-width: none !important; }
  .cab-caja .kt-inside-inner-col { padding: 26px 24px; }
  .cab-caja h1 { font-size: 28px; }
}

/* ============================================================
   CONTACTO — Sección del formulario a dos columnas
   Maqueta: contacto.html (.contacto-cols, .caja-formulario)
   Row Layout .contacto-cols  ← fondo #EEF3F8 desde el panel
     ├─ Section .caja-formulario
     └─ Section .bloque-proceso
   OJO: el «>» es imprescindible en todas estas reglas. Sin él
   alcanzan también a los Row Layout internos (el del Form (Adv),
   pasos, vías) y los descuadran.
   ============================================================ */

.contacto-cols > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 56px !important;
  align-items: start;
}

.caja-formulario > .kt-inside-inner-col {
  background: #fff;
  border-radius: 14px;
  padding: 34px 34px 30px;
  box-shadow: 0 1px 3px rgba(23, 54, 93, .08), 0 10px 30px rgba(23, 54, 93, .07);
}

/* Contacto (1.2.48): tras la cabecera, blanco (formulario) y gris («Dónde
   estamos»), como el resto de páginas. El gris de la fila del formulario lo
   pone el panel de Kadence: hacen falta dos clases para ganarle. Sobre
   blanco, la tarjeta del formulario lleva borde para que no se pierda. */
.kb-row-layout-wrap.contacto-cols { background: #fff; }
.kb-row-layout-wrap.seccion-oficinas { background: #eef3f8; }
.caja-formulario > .kt-inside-inner-col { border: 1px solid #d6e0ec; }

/* «Cómo seguimos» acompaña al formulario al hacer scroll (1.2.49), como el
   formulario de la ficha de oferta: así no queda hueco en blanco debajo.
   Se queda a 24 px del borde de arriba (más la barra de WordPress si se ha
   iniciado sesión) y, al acabar el formulario, sube con él. Solo con las dos
   columnas: en 900 px y menos van una debajo de otra. */
@media (min-width: 901px) {
  .contacto-cols > .kt-row-column-wrap > .bloque-proceso {
    position: sticky;
    top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
  }
}

@media (max-width: 900px) {
  .contacto-cols > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 32px !important;
  }
  .contacto-cols {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 700px) {
  .caja-formulario > .kt-inside-inner-col { padding: 24px 22px 22px; }
}

/* ============================================================
   CONTACTO — Campos cortos a dos columnas
   Maqueta: contacto.html (.fila-campos)
   Kadence Form (Adv) mete los campos en un Row Layout interno:
   form > .kb-row-layout-wrap > … > .kt-inside-inner-col > campos
   Cada campo lleva la clase de su tipo; texto, correo y teléfono
   ocupan media fila y el resto la fila entera.
   ============================================================ */

.caja-formulario .kb-advanced-form .kt-inside-inner-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
}

.caja-formulario .kb-advanced-form .kt-inside-inner-col > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.caja-formulario .kb-advanced-form .kt-inside-inner-col > .wp-block-kadence-advanced-form-text,
.caja-formulario .kb-advanced-form .kt-inside-inner-col > .wp-block-kadence-advanced-form-email,
.caja-formulario .kb-advanced-form .kt-inside-inner-col > .wp-block-kadence-advanced-form-telephone {
  grid-column: auto;
}

@media (max-width: 700px) {
  .caja-formulario .kb-advanced-form .kt-inside-inner-col {
    grid-template-columns: minmax(0, 1fr);
  }
  .caja-formulario .kb-advanced-form .kt-inside-inner-col > * {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   FORMULARIOS — Kadence Form (Adv), todo el sitio
   Maqueta: contacto.html (.campo, .consentimiento, .btn)
   Sustituye al bloque antiguo que dependía de la clase
   form-aldia. Los !important pisan el CSS que Kadence genera
   por bloque con clase única.
   ============================================================ */

.kb-advanced-form .kb-adv-form-field {
  margin: 0 0 18px !important;
}

.kb-advanced-form .kb-adv-form-label {
  display: block;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  color: #17365d !important;
  margin: 0 0 6px !important;
}

.kb-advanced-form .kb-adv-form-required {
  color: #b3261e !important;
  font-weight: 400;
  margin-left: 2px;
}

.kb-advanced-form input[type="text"],
.kb-advanced-form input[type="email"],
.kb-advanced-form input[type="tel"],
.kb-advanced-form select,
.kb-advanced-form textarea {
  width: 100% !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 1.4;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #d6e0ec !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

/* Desplegable: flecha propia en SVG. Kadence la dibuja como imagen
   de fondo y el background del bloque anterior la borraba */
.kb-advanced-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317365d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
  cursor: pointer;
}

.kb-advanced-form textarea {
  min-height: 140px;
  resize: vertical;
}

.kb-advanced-form input:focus-visible,
.kb-advanced-form select:focus-visible,
.kb-advanced-form textarea:focus-visible {
  outline: 2px solid #1159af;
  outline-offset: 1px;
  border-color: #1159af !important;
}

/* Texto de ayuda bajo el campo. Selector reforzado y font-style
   para pisar el rojizo en cursiva que pone Kadence */
.kb-advanced-form .kb-adv-form-field .kb-adv-form-help {
  font-size: 14px !important;
  font-style: normal !important;
  color: #5a6b80 !important;
  margin: 6px 0 0 !important;
}

/* Casilla de aceptación en caja clara */
.kb-advanced-form .wp-block-kadence-advanced-form-accept {
  background: #f7fafd;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 4px 0 22px !important;
}

.kb-advanced-form .kb-radio-check-item-wrap {
  border: 0;
  margin: 0;
  padding: 0;
}

.kb-advanced-form .kb-radio-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kb-advanced-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  flex: 0 0 auto;
  accent-color: #17365d;
}

.kb-advanced-form .kb-radio-check-item label {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Si la sigue la nota de privacidad, las dos forman una sola caja
   (el campo Accept no admite enlaces; el enlace va en la nota) */
.kb-advanced-form .wp-block-kadence-advanced-form-accept:has(+ .nota-rgpd) {
  border-radius: 12px 12px 0 0;
  padding-bottom: 2px;
  margin-bottom: 0 !important;
}

.kb-advanced-form .nota-rgpd {
  background: #f7fafd;
  border-radius: 0 0 12px 12px;
  padding: 0 18px 16px 48px;
  margin: 0 0 22px !important;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.kb-advanced-form .nota-rgpd a { color: #1159af; }

/* Botón de envío = .btn-1 sobre fondo claro */
.kb-advanced-form .wp-block-kadence-advanced-form-submit {
  margin-bottom: 0 !important;
}

.kb-advanced-form .kb-adv-form-submit-button {
  font: inherit;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 16px 32px !important;
  border: 0 !important;
  border-radius: 50px !important;
  background: #17365d !important;
  color: #fff !important;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  /* Azul medio, como «Enviar candidatura» de las ofertas (1.2.50) */
  .kb-advanced-form .kb-adv-form-submit-button:hover {
    background: #1159af !important;
  }
}

.kb-advanced-form .kb-adv-form-submit-button:focus-visible {
  outline: 2px solid #1159af;
  outline-offset: 2px;
}

/* Texto suelto dentro del formulario
   .form-ayuda → «Los campos marcados con * …» (asterisco en negrita) */
.kb-advanced-form .form-ayuda {
  font-size: 14px;
  color: #5a6b80;
  margin: 0 0 24px;
}

.kb-advanced-form .form-ayuda strong {
  color: #b3261e;
  font-weight: 400;
}

/* ============================================================
   CONTACTO — Columna «Cómo seguimos»
   Maqueta: contacto.html (.bloque-proceso, .paso, .vias)
   Estructura:
     Section .bloque-proceso
       ├─ p.distintivo
       ├─ h2
       ├─ Row Layout .pasos  → 3 Section .paso
       ├─ Row Layout .vias   → 3 Section .via (Icon + 1 Paragraph)
       └─ p.nota-talento
   Única desviación: .paso-plazo en #1159af y no en #0088f0,
   que no llega a 4,5:1 para texto de 14 px.
   ============================================================ */

/* Píldora con punto azul */
.bloque-proceso .distintivo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f7fafd;
  border: 1px solid #d6e0ec;
  border-radius: 50px;
  padding: 8px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  color: #17365d;
}

.bloque-proceso .distintivo::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0088f0;
}

.bloque-proceso h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: #17365d;
  margin: 0 0 24px;
}

/* Pasos, uno debajo de otro: círculo con borde y línea que los une */
.pasos > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 0 !important;
}

.paso > .kt-inside-inner-col {
  position: relative;
  padding: 0 0 26px 50px;
}

.paso:last-child > .kt-inside-inner-col { padding-bottom: 0; }

.paso > .kt-inside-inner-col::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 6px;
  width: 2px;
  background: #d6e0ec;
}

.paso:last-child > .kt-inside-inner-col::before { display: none; }

.paso .paso-num {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 2px solid #17365d;
  border-radius: 50%;
  background: #fff;
  color: #17365d;
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
}

.paso h3 {
  font-size: 18px;
  font-weight: 600;
  color: #17365d;
  margin: 4px 0 6px;
}

.paso p:not(.paso-num):not(.paso-plazo) {
  font-size: 16px;
  line-height: 1.6;
  color: #5a6b80;
  margin: 0;
}

.paso .paso-plazo {
  font-size: 14px;
  font-weight: 600;
  color: #1159af;
  margin: 8px 0 0;
}

/* Vías, una debajo de otra: icono azul suelto y una sola línea */
.vias { margin-top: 34px !important; }

.vias > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 12px !important;
}

.via > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px;
  text-align: left !important;
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 12px;
  padding: 16px 20px;
}

.via > .kt-inside-inner-col > :first-child {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Anula la caja gris de la regla global de iconos (DT-10) */
.via :is(.kb-icon-wrap, .kt-svg-icon-wrap, .kb-svg-icon-wrap) {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0088f0 !important;
}

.via svg {
  width: 22px;
  height: 22px;
}

.via p {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.5;
  color: #17365d;
  text-align: left !important;
}

.bloque-proceso .nota-talento {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #d6e0ec;
  font-size: 14px;
  line-height: 1.6;
  color: #5a6b80;
}

.bloque-proceso .nota-talento a { color: #1159af; }

@media (max-width: 900px) {
  .bloque-proceso h2 { font-size: 26px; }
}

/* ============================================================
   CONTACTO — Dónde estamos
   Maqueta: contacto.html (#oficinas, .sede, .sede-ancha)
   Estructura:
     Row Layout .seccion-oficinas   ← fondo blanco, ancla «oficinas»
       └─ Section
            ├─ h2
            └─ Row Layout .rejilla-sedes
                 ├─ Section .sede .sede-ancha  ← Londres, fila entera
                 └─ 4 Section .sede
   Cada Section .sede: foto (primer bloque, sea Image de WordPress
   o Advanced Image de Kadence), h3, p, p.sede-tel
   ============================================================ */

.seccion-oficinas { scroll-margin-top: 100px; }

.seccion-oficinas h2 {
  font-size: 37px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 30px;
}

/* Tarjeta */
.sede > .kt-inside-inner-col {
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(23, 54, 93, .08), 0 8px 24px rgba(23, 54, 93, .06);
}

/* Foto: el primer bloque de la tarjeta, y todo lo que lleve dentro,
   ocupa su hueco entero; la imagen se recorta con object-fit */
.sede > .kt-inside-inner-col > :first-child {
  aspect-ratio: 4 / 3;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden;
  background: #eef3f8;
}

.sede > .kt-inside-inner-col > :first-child :is(figure, a, picture, div) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.sede > .kt-inside-inner-col > :first-child img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
}

.sede h3 {
  font-size: 20px;
  font-weight: 600;
  color: #17365d;
  margin: 20px 22px 8px;
}

.sede p {
  font-size: 16px;
  line-height: 1.55;
  color: #333;
  margin: 0 22px 6px;
}

.sede p.sede-tel {
  font-size: 15px;
  color: #5a6b80;
  margin: 0 22px 22px;
}

/* Rejilla de cuatro; Londres ocupa la primera fila entera */
.rejilla-sedes > .kt-row-column-wrap {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.rejilla-sedes > .kt-row-column-wrap > .sede-ancha {
  grid-column: 1 / -1 !important;
}

/* Londres: foto a la izquierda, datos centrados a la derecha */
.sede-ancha > .kt-inside-inner-col {
  display: grid !important;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  grid-template-rows: minmax(34px, 1fr) auto auto auto minmax(34px, 1fr);
}

.sede-ancha > .kt-inside-inner-col > :first-child {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  min-height: 210px;
  height: 100%;
}

.sede-ancha h3 {
  grid-column: 2;
  grid-row: 2;
  font-size: 27px;
  margin: 0 38px 10px;
}

.sede-ancha p:not(.sede-tel) {
  grid-column: 2;
  grid-row: 3;
  font-size: 17px;
  margin: 0 38px 6px;
}

.sede-ancha p.sede-tel {
  grid-column: 2;
  grid-row: 4;
  margin: 0 38px;
}

@media (max-width: 1024px) {
  .rejilla-sedes > .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .seccion-oficinas h2 { font-size: 28px; }

  .sede-ancha > .kt-inside-inner-col {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .sede-ancha > .kt-inside-inner-col > :first-child {
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .sede-ancha h3,
  .sede-ancha p:not(.sede-tel),
  .sede-ancha p.sede-tel {
    grid-column: 1;
    grid-row: auto;
  }
  .sede-ancha h3 { margin: 24px 22px 10px; }
  .sede-ancha p:not(.sede-tel) { margin: 0 22px 6px; }
  .sede-ancha p.sede-tel { margin: 0 22px 24px; }

  .rejilla-sedes > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================
   CIERRE (Cuéntanos qué tenéis entre manos) — ancho del texto
   Sustituye al margen lateral fijo de 180 px, que en móvil
   dejaba el párrafo en una columna de una palabra por línea
   ========================================================== */
.cierre-texto {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================
   PIE — Dos columnas en móvil (como en la maqueta)
   Kadence apila todas las columnas en una en móvil
   (clase site-footer-row-mobile-column-layout-row).
   Aquí se reparten en dos para que el pie sea más corto.
   ========================================================== */
@media (max-width: 767px) {
  .site-footer .site-footer-row.site-footer-row-mobile-column-layout-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 28px;
  }
  .site-footer .site-footer-row .site-footer-section:empty {
    display: none;
  }
}

/* ============================================================
   OFERTAS — Lo que queda del listado antiguo · 1.2.36 (14-10-2026)
   El listado de [aldia_ofertas] (buscador, paneles, paginación) no
   llegó a usarse y se quitó en la 1.2.36: la página de ofertas pinta
   ahora [aldia_ofertas_linkedin] (.lo-*, al final del fichero). El
   diseño completo sigue en codigo/style-1.2.35.css.
   Quedan tres cosas que sí se usan:
     - .of-cab-foto: la cabecera con foto de «Ofertas de empleo»
     - .of-error: la caja de errores del formulario de candidatura
       espontánea ([aldia_candidatura], plugin aldia-ofertas)
     - .seccion-ofertas .rotulo-seccion: el rótulo «Ofertas abiertas»
   ============================================================ */

/* Cabecera algo más alta que la de Contacto (540 en vez de 440)
   para que se vea la escena y no solo la cara. */
.of-cab-foto .kt-row-column-wrap {
  min-height: 540px;
}

/* La foto es de 1500 × 892 y la banda pide casi 3,5:1, así que se
   recorta mucho. Bajando el encuadre al 18 % entran las dos cabezas;
   con el centrado por defecto se le corta la frente a ella.
   Lleva !important porque .cab-foto ya fuerza center. */
.of-cab-foto {
  background-position: center 18% !important;
}

/* Caja de errores del formulario de candidatura espontánea
   («Revisa estos puntos antes de enviar»): un <strong>, la lista
   de errores y un <p>. */
.of-error {
  margin: 14px 0 0;
  padding: 46px 0;
  border-top: 1px solid #d6e0ec;
  border-bottom: 1px solid #d6e0ec;
  text-align: center;
}

.of-error strong {
  display: block;
  color: #17365d;
  font-size: 19px;
  margin-bottom: 6px;
}

.of-error p {
  margin: 0 auto;
  max-width: 52ch;
  color: #5a6b80;
}

@media (max-width: 900px) {
  .of-cab-foto .kt-row-column-wrap { min-height: 0; }
}

/* Rótulo con la línea corta, como en la maqueta.
   Acotado a esta sección: el .rotulo-seccion global lo usan
   páginas ya montadas y allí la línea va a todo el ancho. */
.seccion-ofertas .rotulo-seccion {
  width: max-content;
}

/* ============================================================
   CIERRE MARINO — común a las tres páginas de ofertas
   Maqueta: ofertas-listado-v2.html (.marino .pq-cierre)
   Sin círculos decorativos: quitados el 09-10-2026.
   ============================================================ */

.cierre-marino {
  background: #17365d;
  text-align: center;
}

.cierre-marino h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}

.cierre-marino .cierre-texto {
  max-width: 58ch;
  margin: 0 auto 26px !important;
  font-size: 17px;
  line-height: 1.6;
  color: #dbe6f2;
}

.cierre-marino .wp-block-buttons {
  justify-content: center;
}

.cierre-marino .btn-1 .wp-block-button__link {
  background: #fff;
  color: #17365d;
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .cierre-marino .btn-1 .wp-block-button__link:hover {
    background: #dbe6f2;
    color: #17365d;
  }
}

@media (max-width: 900px) {
  .cierre-marino {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .cierre-marino h2 { font-size: 26px; }
}

/* ============================================================
   OFERTAS — Ficha de una oferta
   Maqueta: ofertas-detalle-v2.html
   Página /oferta/?ref=ALD-2026-007 (antes ?ref=BOND-1234). Desde la 1.2.42
   la pinta el plugin aldia-ofertas 0.5.0 con las ofertas de WordPress.
   El cuerpo (descripción + formulario) lo genera el shortcode
   [aldia_oferta] del plugin; aquí sólo va el aspecto.
   Estructura:
     Row Layout .miga-barra
     Row Layout .cab-foto .od-cab-foto
       └─ Column .cab-caja   ← shortcode: disciplina, h1, datos
     Row Layout .seccion-oferta
       └─ Shortcode          ← .od-cuerpo con las dos columnas
     Row Layout .od-ofrece-sec  ← «Qué ofrecemos», fijo
   ============================================================ */

/* Familias de color. Se usan en los bloques de la ficha, en los
   iconos y en las viñetas de las listas. */
.pq-azul   { --c: #1159af; --cf: #e4eefb; }
.pq-verde  { --c: #1d7a5a; --cf: #e3f3ec; }
.pq-ambar  { --c: #9a5b12; --cf: #fbeee0; }
.pq-marino { --c: #17365d; --cf: #e6ebf2; }

/* Cabecera --------------------------------------------------- */

/* La caja es más ancha que en el resto de interiores: además del
   titular lleva la disciplina, la entradilla y los tres datos. */
.od-cab-foto .cab-caja {
  max-width: 680px !important;
}

/* En móvil y tableta, a todo el ancho como las demás cabeceras (1.2.48) */
@media (max-width: 900px) {
  .od-cab-foto .cab-caja { max-width: none !important; }
}

.od-cab-foto {
  background-position: center 45% !important;
}

/* Disciplina, encima del titular */
.cab-caja .od-disc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7fd6ff;
}

.cab-caja .od-disc svg { width: 18px; height: 18px; }

/* Ubicación, modalidad y contrato, separados por rayas finas */
.od-cab-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.od-cab-datos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

/* Kadence sangra todas las listas del contenido (.single-content ul { padding-left: 2em })
   y les pone margen abajo: hacen falta dos clases para ganarle (1.2.42) */
.single-content .od-cab-datos { padding-left: 0; margin: 22px 0 0; }

.od-cab-datos li:first-child { padding-left: 0; }
.od-cab-datos li + li { border-left: 1px solid rgba(255, 255, 255, .18); }

.od-cab-datos svg {
  width: 22px;
  height: 22px;
  color: #7fd6ff;
  flex: 0 0 auto;
}

.od-cab-datos small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  color: #a9c1dc;
}

/* Botón «Inscribirme» de la cabecera: fuera en todas las pantallas (1.2.50);
   el formulario ya tiene su «Enviar candidatura». El plugin lo sigue
   pintando: para recuperarlo basta con quitar esta regla. */
.od-cab-btn { display: none; }

/* Cuerpo a dos columnas ------------------------------------- */

.od-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* Escritorio: la columna del formulario acompaña al texto al hacer scroll
   (1.2.44). Si cabe en la pantalla se queda a 24 px del borde de arriba; si es
   más alta, el plugin (0.6.2) pone en --od-pegado un valor negativo y se queda
   pegada por abajo, así el botón de enviar siempre se ve. Al acabar el texto
   sube con él: no queda hueco en blanco debajo. Sin JavaScript, 24 px. */
@media (min-width: 1025px) {
  .od-cuerpo > #inscribirse {
    position: sticky;
    top: var(--od-pegado, 24px);
  }
}

.od-bloque + .od-bloque { margin-top: 44px; }

.od-bloque h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d6e0ec;
}

.od-bloque h2 .pq-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cf);
  color: var(--c);
}

.od-bloque h2 .pq-icono svg { width: 21px; height: 21px; }

.od-bloque p {
  margin: 0 0 14px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}

/* Listas con viñeta redonda del color de la familia */
.od-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 68ch;
}

.od-lista li {
  position: relative;
  padding: 7px 0 7px 34px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.od-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cf) no-repeat center / 12px 12px;
}

.od-check li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231159af' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

.od-check.pq-verde li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a5a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

.od-mas li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5b12' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

.od-nota {
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid #d6e0ec;
  font-size: 13px;
  color: #5a6b80;
}

/* Jornada, experiencia e idiomas: una fila de etiquetas al final de
   «El puesto», del color de la familia del bloque (1.2.42) */
.single-content .od-ficha {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
}

.od-ficha li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cf);
  color: #17365d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.od-ficha li span {
  color: #5a6b80;
  font-weight: 400;
}

/* Formulario de inscripción ---------------------------------- */

.od-form {
  background: #fff;
  border-top: 4px solid #1159af;
  border-radius: 0 0 14px 14px;
  padding: 30px 28px 28px;
  box-shadow: 0 1px 3px rgba(23, 54, 93, .08), 0 12px 32px rgba(23, 54, 93, .10);
}

.od-form h2 {
  font-size: 22px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 4px;
}

.od-form .od-oblig {
  font-size: 14px;
  color: #5a6b80;
  margin: 0 0 22px;
}

.od-campo { margin-bottom: 16px; }

.od-campo label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #17365d;
  margin-bottom: 6px;
}

.od-req {
  color: #b3261e;
  font-weight: 400;
}

/* Rótulo de un campo que no es un <label>: el del currículum, porque el
   <label> de ese campo es el recuadro de subida y no puede haber dos */
.od-etiqueta {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #17365d;
  margin-bottom: 6px;
}

.od-campo input[type="text"],
.od-campo input[type="email"],
.od-campo input[type="tel"],
.od-campo textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: #333;
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 8px;
  padding: 11px 13px;
}

.od-campo input { height: 46px; }

.od-campo textarea {
  min-height: 110px;
  resize: vertical;
}

.od-ayuda {
  font-size: 13px;
  color: #5a6b80;
  margin: 6px 0 0;
}

/* Subida del currículum: el input va oculto y la etiqueta hace de botón.
   El selector lleva «label» delante a propósito: si no, la regla
   .od-campo label de más arriba gana y lo devuelve a display:block,
   con lo que el icono y el texto salen pegados. */
label.od-fichero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1.5px dashed #b7c8dc;
  border-radius: 10px;
  cursor: pointer;
}

.od-fichero svg {
  width: 26px;
  height: 26px;
  color: #1159af;
  flex: 0 0 auto;
}

.od-fichero span {
  font-size: 15px;
  font-weight: 600;
  color: #17365d;
}

.od-fichero span small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #5a6b80;
}

.od-fichero input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.od-fichero:focus-within {
  outline: 2px solid #0088f0;
  outline-offset: 2px;
}

/* Al pasar el ratón se marca el borde, como en los demás botones (1.2.47) */
@media (hover: hover) and (pointer: fine) {
  label.od-fichero { transition: border-color .2s; }
  label.od-fichero:hover { border-color: #1159af; }
}

.od-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 20px 0;
  font-size: 14px;
  color: #5a6b80;
  line-height: 1.5;
}

.od-consent input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #17365d;
}

.od-consent a { color: #1159af; }

.od-enviar {
  width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 0;
  border-radius: 50px;
  background: #17365d;
  color: #fff;
  cursor: pointer;
}

/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.od-enviar:hover, .od-enviar:focus, .od-enviar:active { background: #17365d; color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .od-enviar:hover { background: #1159af; }
}

.od-aviso {
  margin: 16px 0 0;
  font-size: 13px;
  color: #5a6b80;
}

.od-form :is(input, textarea, button):focus-visible {
  outline: 2px solid #0088f0;
  outline-offset: 2px;
}

/* Compartir la oferta ---------------------------------------- */

.od-compartir {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid #d6e0ec;
}

.od-compartir strong {
  display: block;
  color: #17365d;
  font-size: 18px;
}

.od-compartir p {
  margin: 4px 0 14px;
  font-size: 15px;
  color: #5a6b80;
}

.od-copiar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 0;
  background: #e4eefb;
  color: #1159af;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.od-copiar svg { width: 20px; height: 20px; }

.od-copiar:focus-visible {
  outline: 2px solid #0088f0;
  outline-offset: 2px;
}

/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.od-copiar:hover, .od-copiar:focus, .od-copiar:active { background: #e4eefb; color: #1159af; }

@media (hover: hover) and (pointer: fine) {
  .od-copiar { transition: background .2s, color .2s; }
  .od-copiar:hover { background: #1159af; color: #fff; }
}

.od-copiado {
  display: block;
  min-height: 20px;
  margin-top: 8px;
  font-size: 14px;
  color: #1d7a5a;
}

/* Qué ofrecemos, banda marino ------------------------------- */

.od-ofrece-sec {
  background: #17365d;
}

.od-ofrece-sec .od-bloque { text-align: center; }

.od-ofrece-sec .od-bloque h2 {
  justify-content: center;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .18);
}

.od-ofrece-sec .od-bloque h2 .pq-icono {
  background: rgba(255, 255, 255, .12);
  color: #7fd6ff;
}

.od-ofrece {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  text-align: left;
}

.od-ofrece li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.od-ofrece .pq-circ {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
}

.od-ofrece .pq-circ svg { width: 21px; height: 21px; }

/* El marino y el azul de la familia no se ven sobre fondo marino */
.od-ofrece-sec li.pq-marino .pq-circ { background: #3b6ea8; }
.od-ofrece-sec li.pq-azul .pq-circ   { background: #1f7fe0; }

.od-ofrece strong {
  display: block;
  color: #fff;
  font-size: 17px;
  margin: 2px 0;
}

.od-ofrece div span {
  font-size: 15px;
  line-height: 1.5;
  color: #c6d6e8;
}

/* El bloque se monta como columna flexible. Así el botón es un elemento
   de la columna y su separación es exactamente la que se pide aquí: suelto
   dentro de un div normal, dependía de cómo el navegador montara la línea
   de texto que lo contiene y se colaban espacios de más.
   El botón tampoco es ya un bloque de botón de WordPress, porque el núcleo
   le aplicaba sus propias reglas de espaciado con más peso que las nuestras. */
.od-ofrece-sec .od-ofrece-bloque {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* El enlace va envuelto en un div a propósito: WordPress mete en un <p>
   cualquier enlace suelto en su propia línea, y ese párrafo trae su propio
   margen que se sumaba al nuestro. A los div no los toca. */
/* La separación del botón es 34 px pase lo que pase con el marcado.
   WordPress envuelve en un <p> propio cualquier enlace suelto, así que se
   contemplan las dos formas —nuestro div y su párrafo— y se anulan los
   márgenes que traiga cada una. */
.od-ofrece-sec .od-ofrece { margin: 10px 0 0; }

.od-ofrece-sec .od-mas-caja,
.od-ofrece-sec .od-ofrece-bloque > p {
  display: flex;
  justify-content: center;
  margin: 34px 0 0;
}

.od-ofrece-sec .od-mas-caja p { margin: 0; }
.od-ofrece-sec .od-mas-btn { margin: 0; }

.od-ofrece-sec .od-mas-btn {
  padding: 16px 32px;
  border-radius: 50px;
  background: #fff;
  color: #17365d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .od-ofrece-sec .od-mas-btn { transition: background .2s; }
  .od-ofrece-sec .od-mas-btn:hover { background: #dbe6f2; }
}

.od-ofrece-sec .od-mas-btn:focus-visible {
  outline: 2px solid #00bdfc;
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .od-cuerpo {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .od-ofrece { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .od-cab-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }
  .od-cab-datos li,
  .od-cab-datos li + li {
    padding: 0;
    border-left: 0;
  }
  .od-bloque h2 { font-size: 21px; }
  .od-form { padding: 24px 20px; }
  .od-ofrece { grid-template-columns: 1fr; }
  .od-ofrece-sec {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* ============================================================
   CANDIDATURA ESPONTÁNEA
   Maqueta: ofertas-candidatura-v2.html
   Página /candidatura-espontanea/
   Estructura:
     Row Layout .miga-barra
     Row Layout .cab-foto .cd-cab-foto   ← titular y botón, fijos
     Row Layout .cd-cols (2 columnas)
       ├─ Column .cd-izq  ← pasos, «antes de enviarla» y foto
       └─ Column .cd-der  ← shortcode [aldia_candidatura]
     Row Layout .od-ofrece-sec           ← «Qué ofrecemos», fijo
   ============================================================ */

.cd-cab-foto .kt-row-column-wrap { min-height: 540px; }
.cd-cab-foto { background-position: 70% 35% !important; }

@media (max-width: 900px) {
  .cd-cab-foto .kt-row-column-wrap { min-height: 0; }
}

/* Botón de la cabecera. Sólo se ve donde el formulario no está al lado;
   en escritorio sobra porque el formulario ya está a la vista.
   Va como enlace dentro de un div, no como bloque de botón de WordPress:
   un enlace suelto acaba envuelto en un párrafo con margen propio. */
.cab-caja .cd-cab-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 16px 32px;
  border-radius: 50px;
  background: #fff;
  color: #17365d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .cab-caja .cd-cab-btn { transition: background .2s; }
  .cab-caja .cd-cab-btn:hover { background: #dbe6f2; }
}

/* El de Candidatura espontánea («Enviar mi currículum»), fuera en todas
   las pantallas (1.2.51): el formulario ya tiene su «Enviar candidatura». */
.cd-cab-caja { display: none; }

/* Dos columnas: contenido a la izquierda, formulario a la derecha.
   El «>» es imprescindible: sin él la regla alcanza también a los
   Row Layout que haya dentro y los descuadra. */
.cd-cols > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: start;
}

/* Qué pasa después: tres pasos unidos por una línea vertical */
.cd-pasos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: 68ch;
}

.cd-pasos li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding-bottom: 26px;
}

.cd-pasos li:last-child { padding-bottom: 0; }

.cd-pasos li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: 6px;
  width: 2px;
  background: #cfdbe8;
}

.cd-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cf);
  color: var(--c);
}

.cd-num svg { width: 22px; height: 22px; }

.cd-pasos .od-etq {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c);
  margin: 2px 0;
}

.cd-pasos strong {
  display: block;
  color: #17365d;
  font-size: 18px;
  margin-bottom: 4px;
}

.cd-pasos p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #5a6b80;
}

/* Antes de enviarla */
.cd-antes p { max-width: 60ch; }

.od-mas-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 600;
  color: #1159af;
  text-decoration: none;
}

.od-mas-info svg { width: 20px; height: 20px; }

@media (hover: hover) and (pointer: fine) {
  .od-mas-info svg { transition: transform .2s; }
  .od-mas-info:hover svg { transform: translateX(5px); }
}

/* Foto de la columna izquierda */
.cd-foto {
  margin: 40px 0 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #eef3f8;
}

.cd-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}

/* Como en la maqueta: la foto se estira hasta igualar el alto del
   formulario, para que las dos columnas terminen a la misma altura.
   Por debajo de 1025 px no aplica, porque la foto se oculta. */
@media (min-width: 1025px) {
  .cd-cols > .kt-row-column-wrap { align-items: stretch; }

  .cd-izq > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
  }

  .cd-izq .cd-foto {
    flex: 1 1 auto;
    min-height: 260px;
  }

  .cd-izq .cd-foto img {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Filas de dos campos dentro del formulario */
.cd-fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cd-campo-ayuda { margin: -8px 0 16px; }

@media (max-width: 1024px) {
  .cd-cols > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 48px !important;
  }
  .cd-foto { display: none; }
}

@media (max-width: 640px) {
  .cd-fila { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   SERVICIOS — Plantilla de disciplina
   Maqueta: servicios-desarrollo-software-v1.html y las otras ocho
   Seis páginas de Tecnología y tres de Ingeniería, todas iguales
   de estructura; sólo cambia el contenido.
   Estructura:
     Row Layout .miga-barra
     Row Layout .cab-foto .sv-cab-foto
     Row Layout .sv-esp            ← intro + carrete de especialidades
     Row Layout .sv-otras          ← otras disciplinas de la familia
     Row Layout .cierre-marino     ← CTA
   El JavaScript del carrete está en functions.php del tema hijo.
   ============================================================ */

.sv-cab-foto .kt-row-column-wrap { min-height: 540px; }

.sv-cab-foto {
  background-color: #eef3f8;
  background-position: center 40% !important;
}

@media (max-width: 900px) {
  .sv-cab-foto .kt-row-column-wrap { min-height: 0; }
}

/* Sección de especialidades, sobre blanco. Tras la cabecera (1.2.50):
   Tecnología, blanco (qué hacemos) - blanco (enfoque) - gris (otras) -
   marino; Ingeniería, que no tiene «Nuestro enfoque», blanco - gris (otras)
   - marino. */
.sv-esp { background: #fff; }

.sv-esp h2 {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: #17365d;
  margin: 0 0 16px;
}

.sv-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: #5a6b80;
}

/* Pestañas a la izquierda, panel a la derecha */
.sv-esp-caja {
  display: grid;
  grid-template-columns: 344px minmax(0, 1fr);
  gap: 44px;
  margin-top: 46px;
  align-items: stretch;
}

.sv-tabs {
  display: grid;
  row-gap: 8px;
  align-content: start;
  grid-auto-rows: min-content;
}

.sv-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #17365d;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
}

.sv-tabs .pq-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cf);
  color: var(--c);
}

.sv-tabs .pq-icono svg { width: 21px; height: 21px; }

/* Sobre blanco, la pestaña elegida va en gris claro (antes, blanca sobre gris) */
.sv-tabs button[aria-selected="true"] {
  background: #eef3f8;
  border-left-color: var(--c);
}

.sv-tabs button[aria-selected="true"] .pq-icono {
  background: var(--c);
  color: #fff;
}

.sv-tabs button:focus-visible {
  outline: 2px solid #0088f0;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .sv-tabs button { transition: background .2s; }
  .sv-tabs .pq-icono { transition: background .2s, color .2s; }
  .sv-tabs button:hover { background: rgba(238, 243, 248, .65); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-tabs button,
  .sv-tabs .pq-icono { transition: none; }
}

/* Todos los paneles ocupan la misma celda: la sección no cambia de alto
   al cambiar de pestaña, que si no da un salto desagradable */
.sv-paneles { display: grid; }

.sv-panel { grid-area: 1 / 1; }

.sv-panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.sv-panel-foto {
  margin: 0 0 24px;
  aspect-ratio: 16 / 7.2;
  border-radius: 14px;
  overflow: hidden;
}

.sv-panel-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sv-panel h3 {
  font-size: 26px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 6px;
}

.sv-panel > p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #5a6b80;
}

.sv-panel .od-lista {
  columns: 2;
  column-gap: 36px;
  max-width: none;
}

.sv-panel .od-lista li {
  break-inside: avoid;
  padding: 6px 0 6px 32px;
}

/* Viñetas para las dos familias que faltaban */
.sv-panel .od-check.pq-ambar li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5b12' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

.sv-panel .od-check.pq-marino li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317365d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

/* Huecos de foto pendiente. Se retiran cuando haya fotografía real. */
.sv-hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eef3f8;
  border: 2px dashed #c4d3e4;
  border-radius: 14px;
  color: #8a97a8;
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

.sv-hueco svg { width: 28px; height: 28px; }

/* Otras disciplinas de la familia: filas finas, no paneles.
   Clases propias para no chocar con los paneles del listado de ofertas,
   que usan .of-fila y ahora son tarjetas. */
/* Sobre gris en todas las páginas de servicios (1.2.50): va después de
   «Qué hacemos» o de «Nuestro enfoque», los dos en blanco, y antes del
   cierre marino. */
.sv-otras { background: #eef3f8; }

.sv-otras h2 {
  font-size: 30px;
  font-weight: 600;
  color: #17365d;
  margin: 0 0 6px;
}

.sv-otras-lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-bottom: 1px solid #d6e0ec;
}

.sv-otras-fila {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 22px 12px;
  border-top: 1px solid #d6e0ec;
}

.sv-otras-fila .pq-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cf);
  color: var(--c);
}

.sv-otras-fila .pq-icono svg { width: 24px; height: 24px; }

.sv-otras-fila h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
}

.sv-otras-fila h3 a {
  color: #17365d;
  text-decoration: none;
}

.sv-otras-fila h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sv-otras-fila h3 a:focus-visible { outline: none; }

.sv-otras-fila:focus-within {
  outline: 2px solid #0088f0;
  outline-offset: -2px;
}

.sv-otras-fila p {
  margin: 0;
  font-size: 15px;
  color: #5a6b80;
}

.sv-otras-ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
}

.sv-otras-ver svg { width: 20px; height: 20px; }

@media (hover: hover) and (pointer: fine) {
  .sv-otras-fila { transition: background .2s; }
  .sv-otras-fila:hover { background: #fff; }
  .sv-otras-fila:hover h3 a { color: var(--c); }
  .sv-otras-ver svg { transition: transform .2s; }
  .sv-otras-fila:hover .sv-otras-ver svg { transform: translateX(5px); }
}

/* En tableta y móvil las pestañas pasan a píldoras que saltan de línea:
   se ven todas de un vistazo sin una columna larguísima */
@media (max-width: 1024px) {
  .sv-esp-caja {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
  }

  .sv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sv-tabs button {
    width: auto;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    font-size: 15px;
    border: 1px solid #d6e0ec;
    border-left: 1px solid #d6e0ec;
    border-radius: 50px;
    background: #fff;
  }

  .sv-tabs button[aria-selected="true"] {
    background: var(--c);
    border-color: var(--c);
    color: #fff;
    box-shadow: none;
  }

  .sv-tabs button[aria-selected="true"] .pq-icono {
    background: rgba(255, 255, 255, .2);
  }

  .sv-tabs .pq-icono { width: 30px; height: 30px; }
  .sv-tabs .pq-icono svg { width: 16px; height: 16px; }
}

@media (max-width: 900px) {
  .sv-esp h2 { font-size: 27px; }
  .sv-otras h2 { font-size: 26px; }
}

@media (max-width: 640px) {
  .sv-panel .od-lista { columns: 1; }
  .sv-panel h3 { font-size: 22px; }
  .sv-panel-foto { aspect-ratio: 16 / 9; }
  .sv-otras-fila {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 4px;
    align-items: start;
  }
  .sv-otras-fila .pq-icono { width: 44px; height: 44px; }
  .sv-otras-ver { display: none; }
}

/* ============================================================
   SERVICIOS — Contenido definitivo (v3, 28-09)
   Ocho especialidades por página en vez de cinco, viñetas con
   término y explicación, banda de «Nuestro enfoque» y la etiqueta
   del pilar que ALDIA marca como diferencial.
   En WordPress la sección va en DOS Row Layout seguidos:
     Row .sv-esp .sv-esp-cab        ← rótulo, titular y entradilla
     Row .sv-esp .sv-esp-caja-row   ← 2 columnas: pestañas | paneles
       ├─ Column .sv-tabs-col
       └─ Column .sv-paneles-col
   Se parten así porque los ocho paneles juntos no entran de una
   pegada en el editor de código.
   ============================================================ */

.sv-esp-cab,
.sv-esp-caja-row { background: #fff; }

/* Las dos columnas. El «>» es imprescindible: sin él la regla
   alcanza a los Row Layout que haya dentro y los descuadra. */
.sv-esp-caja-row > .kt-row-column-wrap {
  grid-template-columns: 320px minmax(0, 1fr) !important;
  column-gap: 44px !important;
  align-items: start;
}

/* Todos los paneles ocupan la misma celda: la sección no cambia de
   alto al cambiar de pestaña */
.sv-paneles-col > .kt-inside-inner-col { display: grid; }

/* Con ocho pestañas la columna se alarga: algo más compacta */
.sv-tabs-col .sv-tabs button {
  padding: 12px 14px;
  font-size: 16px;
}

.sv-tabs-col .sv-tabs .pq-icono { width: 40px; height: 40px; }
.sv-tabs-col .sv-tabs .pq-icono svg { width: 20px; height: 20px; }

/* Viñetas de término + explicación: una columna y el término destaca */
.sv-panel .od-lista.sv-detalle {
  columns: 1;
  max-width: 74ch;
}

.sv-detalle li {
  padding: 7px 0 7px 32px;
  font-size: 15.5px;
  line-height: 1.55;
}

.sv-detalle li strong {
  color: #17365d;
  font-weight: 600;
}

/* El pilar que ALDIA marca como diferencial */
.sv-destacado {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--cf);
  color: var(--c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sv-tab-destacado > span:last-child::after {
  content: "★";
  margin-left: 8px;
  color: var(--c);
  font-size: 13px;
}

/* Nuestro enfoque: banda de texto entre las especialidades y el resto, en
   blanco como «Qué hacemos» (1.2.50) */
.sv-enfoque { background: #fff; }

/* Un solo parrafo, a una columna. El texto lo fija Direccion y no se toca,
   asi que lo unico que se ajusta es el ancho de la caja: 110ch en vez de los
   88ch de partida, que quita una linea sin irse al ancho completo (una medida
   de 140 caracteres se lee mal).
   Se excluye el rotulo: cuando la seccion lo lleva como parrafo, esta regla
   le anulaba el margen inferior y su subrayado quedaba pegado al texto,
   ademas de colgarle la barra azul de la izquierda, que ahi no pinta nada. */
.sv-enfoque p:not(.rotulo-seccion) {
  margin: 0;
  max-width: 110ch;
  padding-left: 22px;
  border-left: 3px solid #0088f0;
  font-size: 18px;
  line-height: 1.7;
  color: #5a6b80;
}

.sv-enfoque strong { color: #17365d; }

@media (max-width: 1024px) {
  .sv-esp-caja-row > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 26px !important;
  }
  .sv-tabs-col .sv-tabs button {
    padding: 6px 14px 6px 6px;
    font-size: 15px;
  }
  .sv-tabs-col .sv-tabs .pq-icono { width: 30px; height: 30px; }
  .sv-tabs-col .sv-tabs .pq-icono svg { width: 16px; height: 16px; }
}

@media (max-width: 900px) {
  .sv-destacado { display: block; margin: 8px 0 0; }
  .sv-enfoque p:not(.rotulo-seccion) { font-size: 16px; }
}

/* ============================================================
   MENÚS — Destinos de ancla
   El elemento «Sectores» del menú lleva a la sección de sectores
   de la portada. El margen evita que la cabecera pegajosa tape
   el titular al llegar. Misma solución que .seccion-oficinas.
   Las anclas las pone el filtro aldia_menu_anclas de functions.php.
   Se acotan por id y no por clase: el id es justo el destino del salto,
   asi que anadir un ancla nueva es anadirla a esta lista.
   ============================================================ */
#servicios,
#sectores { scroll-margin-top: 100px; }

/* «Sectores» apunta a un ancla de la portada, asi que WordPress lo marca
   como pagina actual siempre que se esta en el inicio, aunque no se haya
   bajado a esa seccion. Se le quita el estado activo para que no parezca
   que estas donde no estas. El hover sigue funcionando. */
.main-navigation li.ir-sectores.current-menu-item > a,
.main-navigation li.ir-sectores.current_page_item > a,
.header-navigation li.ir-sectores.current-menu-item > a,
.header-navigation li.ir-sectores.current_page_item > a {
  color: #fff !important;
}

.main-navigation li.ir-sectores.current-menu-item > a:hover,
.main-navigation li.ir-sectores.current_page_item > a:hover,
.header-navigation li.ir-sectores.current-menu-item > a:hover,
.header-navigation li.ir-sectores.current_page_item > a:hover {
  color: #00bdfc !important;
}

/* CABECERA — Separacion entre los elementos del menu.
   Kadence solo expone el relleno de arriba y abajo en el panel, asi que
   el horizontal se pone aqui. Solo a los elementos de primer nivel:
   el «>» evita que alcance a los submenus. */
.main-navigation .primary-menu-container > ul > li > a,
.header-navigation .header-menu-container > ul > li > a {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* La marca IA es una imagen y no tiene el aire lateral que traen las
   letras, asi que con el mismo relleno que los demas se ve mas pegada.
   El margen va en el «li» y no en el enlace: el enlace tiene un ancho
   fijo de 41 px y el relleno se lo comeria. */
.main-navigation li.nav-ia,
.header-navigation li.nav-ia {
  margin-left: 10px;
  margin-right: 10px;
}

/* ============================================================
   PIE — Fila inferior en una sola linea
   Copyright a la izquierda, sellos en el centro y legales a la
   derecha. El bloque Grupo de WordPress mete las imagenes en un
   contenedor interno, asi que el flex tiene que ir tambien ahi:
   si solo se pone en el Grupo, alinea a su unico hijo y las
   imagenes siguen apiladas.
   Por debajo de 1024 se deja que bajen, que no caben.
   ============================================================ */
.site-footer .pie-sellos,
.site-footer .pie-sellos > .wp-block-group__inner-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.site-footer .pie-sellos figure,
.site-footer .pie-sellos .wp-block-image {
  margin: 0 !important;
}

.site-footer .pie-sellos img {
  height: 30px !important;
  width: auto !important;
  padding: 3px 6px;
}

/* Legales en una linea, pegados a la derecha */
.site-footer .footer-navigation ul,
.site-footer .footer-menu-container ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 0 14px !important;
  margin: 0;
  padding: 0;
}

.site-footer .footer-navigation li,
.site-footer .footer-menu-container li { margin: 0; }

.site-footer .footer-navigation a,
.site-footer .footer-menu-container a {
  font-size: 13px !important;
  color: #a9bdd4;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-navigation a:hover,
  .site-footer .footer-menu-container a:hover { color: #fff; }
}

@media (max-width: 1024px) {
  .site-footer .pie-sellos,
  .site-footer .pie-sellos > .wp-block-group__inner-container,
  .site-footer .footer-navigation ul,
  .site-footer .footer-menu-container ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ============================================================
   PIE — Ajustes de la fila de abajo
   Filete de separacion, alineacion vertical de las tres secciones
   y copyright con la misma letra que los legales, para que se lean
   como una sola barra y no como tres cosas sueltas.
   ============================================================ */
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 24px;
}

.site-footer .site-bottom-footer-wrap .site-footer-row {
  align-items: center;
}

/* Copyright: mismo tamano y color que los enlaces legales */
.site-footer .footer-html,
.site-footer .footer-html p,
.site-footer .site-info {
  margin: 0;
  font-size: 13px;
  color: #a9bdd4;
}

/* Legales: juntos y pegados al borde derecho */
.site-footer .footer-navigation,
.site-footer .footer-menu-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.site-footer .footer-navigation ul,
.site-footer .footer-menu-container ul {
  gap: 0 18px !important;
  width: auto !important;
  margin-left: auto !important;
}

@media (max-width: 1024px) {
  .site-footer .footer-navigation,
  .site-footer .footer-menu-container { justify-content: center; }
  .site-footer .footer-navigation ul,
  .site-footer .footer-menu-container ul { margin-left: 0 !important; }
}

/* ============================================================
   PIE — Menu legal: junto y a la derecha
   La separacion entre los enlaces NO viene de un hueco entre
   elementos, sino del relleno horizontal que Kadence le pone a
   cada <a> del menu del pie, igual que en la cabecera. Por eso
   hay que tocar el padding del enlace y no el gap de la lista.
   El margin-left:auto es lo que empuja la lista al borde derecho
   cuando el contenedor ocupa todo el ancho de la seccion.
   ============================================================ */
.site-footer .footer-navigation .footer-menu-container > ul,
.site-footer nav.footer-navigation ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.site-footer .footer-navigation .footer-menu-container > ul > li,
.site-footer nav.footer-navigation ul > li {
  margin: 0 !important;
}

.site-footer .footer-navigation .footer-menu-container > ul > li > a,
.site-footer nav.footer-navigation ul > li > a {
  padding-left: 9px !important;
  padding-right: 9px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Que los sellos no queden pegados al primer enlace legal */
.site-footer .pie-sellos { margin-right: 18px !important; }

@media (max-width: 1024px) {
  .site-footer .footer-navigation .footer-menu-container > ul,
  .site-footer nav.footer-navigation ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .site-footer .pie-sellos { margin-right: 0 !important; }
}

/* ============================================================
   PIE — Un solo color para toda la barra de abajo
   El copyright y los enlaces legales se comportan como los
   enlaces de las columnas de arriba: blancos, y al azul claro al
   pasar el raton. Se fija con !important porque cada uno lo
   hereda de un sitio distinto: el copyright del ajuste de
   Kadence y los enlaces del color de enlace del pie.
   ============================================================ */
.site-footer .footer-html,
.site-footer .footer-html p,
.site-footer .footer-html a,
.site-footer .site-info,
.site-footer .footer-navigation .footer-menu-container > ul > li > a,
.site-footer nav.footer-navigation ul > li > a {
  color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-navigation .footer-menu-container > ul > li > a:hover,
  .site-footer nav.footer-navigation ul > li > a:hover,
  .site-footer .footer-html a:hover {
    color: #00bdfc !important;
  }
}

/* ============================================================
   POR QUÉ ALDIA  ·  página 'por-que-aldia'
   Maqueta: aldia-por-que-v4.html (texto de Dirección, 01-10-2026)
   Estructura en WordPress:
     1 miga-barra · 2 cab-foto + cab-caja · 3 pq-esencial · 4 pq-plan
     5 pq-formacion-sec · 6 mv-ruta · 7 pq-beneficios · 8 pq-semanas
     9 pq-movil-sec · 10 cierre-marino
   El JS de .pq-aparece y de .mv-ruta va en functions.php.
   ============================================================ */
.pq-entradilla { font-size: 19px; color: #5a6b80; margin: 0 0 34px; max-width: 64ch; }
.pq-sombra { box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06); }

/* Huecos de foto (pendientes) */
.pq-hueco {
  margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #eef3f8; border: 2px dashed #c4d3e4; color: #8a97a8;
  font-size: 13px; text-align: center; padding: 16px;
}
.pq-hueco svg { width: 30px; height: 30px; }
/* En la maqueta el rótulo del hueco va a la derecha para que no lo tape la caja marino */
.pq-icono svg { width: 26px; height: 26px; }

/* 1 · Lo esencial: texto + foto, y tres pilares */
.pq-dos-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
.pq-dos-col p { margin: 0 0 18px; }
.pq-foto { margin: 0; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; }
.pq-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-pilares { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 46px; }
.pq-pilar {
  position: relative; background: #fff; border-radius: 14px; padding: 28px 26px 26px;
  border-top: 5px solid var(--c); transition: transform .2s, box-shadow .2s;
}
.pq-pilar-num { position: absolute; top: 18px; right: 22px; font-size: 38px; font-weight: 800; line-height: 1; color: var(--cf); }
.pq-pilar strong { display: block; color: #17365d; font-size: 19px; margin: 16px 0 8px; }
.pq-pilar p { margin: 0; font-size: 16px; line-height: 1.6; color: #5a6b80; }
@media (hover: hover) and (pointer: fine) {
  .pq-pilar:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(23,54,93,.10), 0 18px 36px rgba(23,54,93,.14); }
}

/* 2 · Plan de carrera: tres pasos unidos por flechas y cierre en bucle */
.pq-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.pq-paso {
  position: relative; background: #fff; border-radius: 14px; padding: 28px 26px 26px;
  border-bottom: 4px solid #1159af;
}
.pq-paso:not(:last-child)::after {
  content: "→"; position: absolute; right: -31px; top: 50%; transform: translateY(-50%);
  color: #1159af; font-size: 24px; font-weight: 700;
}
/* Número grande en azul sólido */
.pq-grande {
  display: block; width: max-content; font-size: 44px; font-weight: 800; line-height: 1; margin-bottom: 14px;
  color: #1159af;
}
.pq-paso strong { display: block; color: #17365d; font-size: 19px; margin-bottom: 8px; }
.pq-paso p { margin: 0; font-size: 16px; color: #5a6b80; line-height: 1.6; }
.pq-bucle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 30px auto 0; padding: 14px 24px; max-width: 640px;
  background: #fff; border: 1px solid #d6e0ec; border-radius: 50px;
  color: #17365d; font-size: 16px; text-align: center;
}
.pq-bucle svg { width: 22px; height: 22px; color: #1159af; flex: 0 0 auto; }

/* 3 · Formación: tarjetas con foto arriba */
.pq-formacion { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.pq-form { background: #fff; border-radius: 14px; overflow: hidden; border-top: 5px solid var(--c); }
.pq-form .pq-hueco, .pq-form-foto { aspect-ratio: 16/9; border-width: 0 0 2px; }
.pq-form-foto { margin: 0; overflow: hidden; }
.pq-form-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-form-cuerpo { padding: 22px 26px 26px; }
.pq-form-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pq-form-cab strong { color: #17365d; font-size: 20px; }
.pq-form p { margin: 0; font-size: 16px; line-height: 1.6; color: #5a6b80; }
.pq-sello-verde {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin: 28px 0 0; padding: 0; list-style: none;
  font-size: 16px; color: #17365d;
}
.pq-sello-verde li { display: flex; align-items: center; gap: 8px; }
.pq-sello-verde svg { width: 20px; height: 20px; color: #1d7a5a; }

/* 4 · Condiciones: tarjetas con círculo de icono */
.pq-condiciones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 46px 20px; margin-top: 50px; }
.pq-cond { position: relative; background: #fff; border-radius: 14px; padding: 42px 24px 26px; text-align: center; }
.pq-circ {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%; border: 4px solid #eef3f8;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--c); box-shadow: 0 6px 16px rgba(23,54,93,.25);
}
.pq-circ svg { width: 24px; height: 24px; }
.pq-cond strong { display: block; color: #17365d; font-size: 18px; margin-bottom: 8px; }
.pq-cond p { margin: 0; font-size: 15px; line-height: 1.6; color: #5a6b80; }
.prov-marca { color: #c47f00; font-weight: 600; }
.pq-nota { margin: 36px 0 0; font-size: 14px; color: #5a6b80; }

/* 5 · Proceso: línea de tiempo con círculos numerados */
.pq-plazo {
  display: flex; align-items: center; gap: 14px; margin: 0 0 30px; font-size: 15px; font-weight: 600; color: #17365d;
}
.pq-plazo::before, .pq-plazo::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, #17365d, #0088f0); border-radius: 2px; }
.pq-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; }
.pq-linea::before {
  content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 3px;
  background: linear-gradient(90deg, #17365d, #1159af, #0088f0); border-radius: 3px;
}
.pq-hito { position: relative; text-align: center; }
.pq-hito-num {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  background: #fff; border: 3px solid #1159af; color: #17365d; font-size: 20px; font-weight: 700;
}
.pq-hito:last-child .pq-hito-num { background: linear-gradient(135deg, #17365d, #1159af); border-color: #1159af; color: #fff; }
.pq-hito strong { display: block; color: #17365d; font-size: 18px; margin-bottom: 8px; }
.pq-hito p { margin: 0 auto; max-width: 30ch; font-size: 15px; line-height: 1.6; color: #5a6b80; }
.pq-promesa {
  display: flex; align-items: center; gap: 14px; margin: 40px 0 0; padding: 20px 24px;
  background: #eef3f8; border-left: 4px solid #1159af; border-radius: 0 12px 12px 0;
  font-size: 17px; color: #17365d;
}
.pq-promesa svg { width: 26px; height: 26px; color: #1159af; flex: 0 0 auto; }

/* 6 · Primeras semanas: foto a la izquierda y lista numerada */
.pq-foto-izq { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.pq-lista { display: grid; margin-top: 24px; }
.pq-item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid #d6e0ec; }
.pq-item:last-child { border-bottom: 1px solid #d6e0ec; }
.pq-item-num { font-size: 30px; font-weight: 700; color: #1159af; line-height: 1; }
.pq-item strong { display: block; color: #17365d; font-size: 18px; margin-bottom: 4px; }
.pq-item p { margin: 0; font-size: 16px; color: #5a6b80; }

/* 7 · Movilidad: banda de foto con caja marino superpuesta */
.pq-banda { position: relative; }
.pq-banda .pq-hueco, .pq-banda-foto { height: 500px; border-width: 2px 0; }
.pq-banda .pq-hueco { align-items: flex-start; padding-left: 12%; }
.pq-banda-foto { margin: 0; overflow: hidden; }
.pq-banda-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-banda-caja .rotulo-sec { color: #fff; border-bottom-color: #00bdfc; }
.pq-banda-caja h2 { color: #fff; font-size: 32px; margin: 0 0 12px; }
.pq-banda-caja p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.pq-banda-caja .btn { margin-top: 8px; }

/* Cierre */
.cierre-cta { text-align: center; }
.cierre-cta h2 { font-size: 30px; margin: 0 0 12px; }
.cierre-cta p { color: #dbe6f2; margin: 0 auto 26px; max-width: 58ch; }

@media (prefers-reduced-motion: reduce) { .pq-pilar { transition: none; } }
@media (max-width: 1024px) {
  .pq-condiciones { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .pq-dos-col, .pq-foto-izq { grid-template-columns: 1fr; gap: 30px; }
  .pq-pilares, .pq-formacion { grid-template-columns: 1fr; }
  .pq-pasos { grid-template-columns: 1fr; gap: 16px; }
  .pq-paso:not(:last-child)::after { display: none; }
  .pq-bucle { border-radius: 14px; }
  .pq-linea { grid-template-columns: 1fr; gap: 0; }
  .pq-linea::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto;
    background: linear-gradient(180deg, #17365d, #1159af, #0088f0); }
  .pq-hito { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; text-align: left; padding-bottom: 26px; }
  .pq-hito:last-child { padding-bottom: 0; }
  .pq-hito-num { margin: 0; grid-row: span 2; }
  .pq-hito strong { margin-top: 14px; }
  .pq-hito p { margin: 0; max-width: none; }
  .pq-banda .pq-hueco, .pq-banda-foto { height: 220px; }
  .pq-banda .pq-hueco { align-items: center; padding: 16px; }
  .pq-banda-caja { position: static; max-width: none; padding: 26px 24px; }
  .pq-banda-caja h2 { font-size: 26px; }
}
@media (max-width: 640px) {
  .pq-condiciones { grid-template-columns: 1fr; }
  .pq-grande { font-size: 38px; }
}

/* ===== Toque visual (21-09) ===== */
/* Marco de color desplazado detrás de las fotos grandes */
.pq-dos-col .pq-foto { box-shadow: 22px 22px 0 #d6e6f8; }
.pq-foto-izq .pq-foto { box-shadow: -22px 22px 0 #d3ede1; }

/* Plan de carrera: un color por paso y flechas a juego */
.pq-paso { border-bottom-color: var(--c); }
.pq-paso .pq-grande { color: var(--c); }
.pq-paso:not(:last-child)::after { color: var(--c); }
.pq-paso-icono {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--cf); color: var(--c);
}
.pq-paso-icono svg { width: 22px; height: 22px; }

/* Tarjetas que se elevan al pasar el ratón */
.pq-paso, .pq-form, .pq-cond { transition: transform .2s, box-shadow .2s; }
.pq-form-foto img { transition: transform .5s ease; }
@media (hover: hover) and (pointer: fine) {
  .pq-paso:hover, .pq-form:hover, .pq-cond:hover {
    transform: translateY(-4px); box-shadow: 0 2px 6px rgba(23,54,93,.10), 0 18px 36px rgba(23,54,93,.14);
  }
  .pq-form:hover .pq-form-foto img { transform: scale(1.05); }
  .pq-cond:hover .pq-circ { transform: translateX(-50%) scale(1.08); }
}
.pq-circ { transition: transform .2s; }

/* Pasos del proceso: los círculos se rellenan al pasar por encima */
.pq-hito-num { transition: background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) {
  .pq-hito:hover .pq-hito-num { background: #1159af; color: #fff; }
}

/* Aparición suave al hacer scroll (solo si hay JavaScript y el usuario no pide menos movimiento) */
.js-anim .pq-aparece { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .pq-aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pq-paso, .pq-form, .pq-cond, .pq-circ, .pq-form-foto img, .pq-hito-num { transition: none; }
  .js-anim .pq-aparece { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .pq-dos-col .pq-foto { box-shadow: 14px 14px 0 #d6e6f8; margin-right: 14px; }
  .pq-foto-izq .pq-foto { box-shadow: -14px 14px 0 #d3ede1; margin-left: 14px; margin-right: 0; }
}

/* Movilidad en tarjeta sobre blanco (sustituye a la banda a todo el ancho) */
.pq-movil-sec { background: #fff; }
.pq-movil {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: stretch;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 18px 44px rgba(23,54,93,.12);
}
/* Foto a la derecha, para alternar con «Primeras semanas» (foto a la izquierda) */
.pq-movil-foto { margin: 0; min-height: 400px; order: 2; }
.pq-movil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-movil-texto { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pq-movil-texto h2 { font-size: 32px; margin: 0 0 14px; }
.pq-movil-texto p { margin: 0 0 18px; color: #5a6b80; }
.pq-movil-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pq-movil-lista li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 50px;
  background: #e4eefb; color: #17365d; font-size: 15px; font-weight: 500;
}
.pq-movil-lista svg { width: 16px; height: 16px; color: #1159af; }
.pq-movil-texto .pq-movil-nota { font-size: 15px; margin-bottom: 26px; }
.pq-btn-marino { background: #17365d; color: #fff; }
@media (hover: hover) and (pointer: fine) { .pq-btn-marino:hover { background: #1159af; } }
@media (max-width: 900px) {
  .pq-movil { grid-template-columns: 1fr; }
  .pq-movil-foto { min-height: 0; aspect-ratio: 16/9; order: 0; }
  .pq-movil-texto { padding: 28px 24px 30px; }
  .pq-movil-texto h2 { font-size: 26px; }
}

/* ===== Menos cajas (22-09): mismo criterio que Movilidad ===== */
/* Lo esencial: columnas abiertas con línea fina entre ellas */
.pq-pilares { gap: 0; margin-top: 56px; }
.pq-pilar { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0;
  padding: 4px 36px 4px 0; transform: none !important; }
.pq-pilar + .pq-pilar { border-left: 1px solid #d6e0ec !important; padding-left: 36px; }
.pq-pilar strong { margin-top: 16px; }

/* Formación: foto redondeada y texto debajo, sin tarjeta */
.pq-formacion { gap: 36px; }
.pq-form { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; overflow: visible;
  transform: none !important; }
.pq-form-foto { border-radius: 14px; overflow: hidden; }
.pq-form-cuerpo { padding: 20px 0 0; }

/* Condiciones: icono a la izquierda y texto al lado */
.pq-condiciones { gap: 40px 48px; margin-top: 44px; }
.pq-cond { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: start; text-align: left;
  background: none !important; box-shadow: none !important; border-radius: 0; padding: 0; transform: none !important; }
.pq-circ { position: static; transform: none !important; grid-row: span 2; width: 52px; height: 52px; border: 0; box-shadow: none; }
.pq-cond strong { margin: 2px 0 6px; }

/* Fotos sin el marco de color desplazado */
.pq-dos-col .pq-foto, .pq-foto-izq .pq-foto { box-shadow: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Movilidad: dos columnas abiertas en vez de tarjeta */
.pq-movil { box-shadow: none; border-radius: 0; overflow: visible; gap: 56px; align-items: center; }
.pq-movil-foto { border-radius: 16px; overflow: hidden; min-height: 0; aspect-ratio: 4/3; }
.pq-movil-texto { padding: 0; }
.pq-movil-lista { gap: 8px 22px; }
.pq-movil-lista li { background: none; padding: 0; font-size: 16px; }

@media (max-width: 900px) {
  .pq-pilares { gap: 28px; margin-top: 40px; }
  .pq-pilar, .pq-pilar + .pq-pilar { border-left: 0 !important; padding: 0; }
  .pq-pilar + .pq-pilar { border-top: 1px solid #d6e0ec !important; padding-top: 28px; }
  .pq-condiciones { gap: 28px; }
  .pq-movil { gap: 24px; }
}

/* ===== Proceso de selección animado (22-09), mismo sistema que Movilidad ===== */
/* Proceso: iconos en los círculos, línea que se rellena y avión que la recorre */
.mv-ruta .pq-linea::before { background: #dfe7f1; }
.mv-ruta .pq-linea::after {
  content: ""; position: absolute; top: 27px; left: 12.5%; height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #17365d, #1159af, #0088f0); transition: width 2.2s ease;
}
.mv-ruta.en-marcha .pq-linea::after { width: 75%; }
.mv-avion {
  position: absolute; top: 14px; left: 12.5%; z-index: 2; width: 30px; height: 30px; color: #0088f0;
  transform: translateX(-50%); transition: left 2.2s ease; pointer-events: none;
}
.mv-ruta.en-marcha .mv-avion { left: 81%; }
.mv-avion svg { width: 30px; height: 30px; display: block; }
.mv-ruta .pq-hito-num svg { width: 24px; height: 24px; }
.mv-ruta .pq-hito-paso { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1159af; margin-bottom: 4px; }
@media (max-width: 900px) {
  .mv-ruta .pq-linea::after { top: 28px; left: 27px; width: 3px; height: 0; transition: height 2.2s ease;
    background: linear-gradient(180deg, #17365d, #1159af, #0088f0); }
  .mv-ruta.en-marcha .pq-linea::after { width: 3px; height: calc(100% - 56px); }
  .mv-avion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-ruta .pq-linea::after, .mv-avion { transition: none; }
}
.mv-ruta.mv-reinicio .pq-linea::after, .mv-ruta.mv-reinicio .mv-avion { transition: none !important; }
/* Proceso en móvil: con la etiqueta «Paso N» el texto se quedaba en la columna del icono (22-09) */
@media (max-width: 900px) {
  .mv-ruta .pq-hito-num { grid-row: span 3; }
  .mv-ruta .pq-hito > :not(.pq-hito-num) { grid-column: 2; }
  .mv-ruta .pq-hito-paso { margin-top: 12px; }
  .mv-ruta .pq-hito-paso + strong { margin-top: 0; }
}

/* ---- Fondos de fila. En WordPress los pone la clase, igual que .sv-esp ---- */
.pq-plan, .mv-ruta, .pq-semanas { background: #eef3f8; }
/* ALDIA Mobility (1.2.48): tras la cabecera, blanco y gris alternos hasta el
   cierre marino. Antes «Cómo funciona» y «De qué nos ocupamos» iban las dos en
   blanco. Su ruta va en blanco: .mv-ruta-sec, porque .mv-ruta sola es también
   «Tu camino hacia ALDIA» de Por qué ALDIA, que sigue en gris. */
.mv-como, .mv-ruta.mv-ruta-sec { background: #fff; }
.mv-cubre, .mv-donde { background: #eef3f8; }
.pq-esencial, .pq-formacion-sec, .pq-beneficios { background: #fff; }

/* ---- La maqueta usa <section>; en WordPress la fila es un div de Kadence ---- */
.pq-esencial h2, .pq-plan h2, .pq-formacion-sec h2,
.mv-ruta h2, .pq-beneficios h2, .pq-semanas h2, .pq-movil-sec h2 { line-height: 1.15; }


/* Botón suelto de la página. En el tema no existe la clase .btn a secas
   (sólo .btn-1/.btn-2 como envoltorio de bloques de botón), así que
   .pq-btn-marino se define completa. El selector doble es para ganar a
   las reglas de enlace del tema padre. */
.pq-btn-marino,
a.pq-btn-marino {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 50px;
  background: #17365d;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: background .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pq-btn-marino:hover,
  a.pq-btn-marino:hover { background: #1159af; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .pq-btn-marino, a.pq-btn-marino { transition: none; }
}

/* ============================================================
   QUIÉNES SOMOS   ·  página 266   (05-10-2026)
   Maqueta: aldia-quienes-somos-v4.html
   Filas: 1 miga-barra · 2 cab-foto + cab-caja · 3 qs-hacemos
          4 qs-trayectoria · 5 qs-sectores-sec · 6 qs-donde
          7 qs-adn-sec · 8 qs-cert · 9 qs-comp-sec · 10 cierre-marino
   Las variables --c y --cf las definen .qs-azul/.qs-verde/.qs-marino/
   .qs-ambar, igual que hacen las .pq-* en el bloque de Por qué.
   ============================================================ */

/* ---- Fondos de fila. Los pone la clase, igual que .sv-esp ---- */
.qs-trayectoria, .qs-donde, .qs-cert { background: #eef3f8; }
.qs-hacemos, .qs-sectores-sec, .qs-adn-sec, .qs-comp-sec { background: #fff; }
.qs-hacemos h2, .qs-trayectoria h2, .qs-sectores-sec h2, .qs-donde h2,
.qs-adn-sec h2, .qs-cert h2, .qs-comp-sec h2 { line-height: 1.15; }

/* ---- La columna de texto y la foto, centradas entre sí ---- */
.qs-comp-sec .qs-dos-col { align-items: center; }

.qs-icono { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #e4eefb; color: #1159af; }
.qs-icono svg { width: 22px; height: 22px; }
.qs-grande { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; }
.qs-grande svg { width: 26px; height: 26px; }
/* Qué hacemos */
  .qs-dos-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
.qs-dos-col p { color: #333; margin: 0 0 18px; }
.qs-disciplinas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 30px; }
.qs-disciplina { border-radius: 14px; background: #fff; overflow: hidden; border-top: 5px solid #17365d; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 10px 28px rgba(23,54,93,.08); }
.qs-disciplina + .qs-disciplina { border-top-color: #1159af; }
.qs-disc-foto { margin: 0; aspect-ratio: 16/9; overflow: hidden; background: #eef3f8; }
.qs-disc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-disc-cab { display: flex; align-items: center; gap: 14px; padding: 24px 28px 18px; }
.qs-disc-cab .qs-icono { width: 50px; height: 50px; border-radius: 12px; }
.qs-disc-cab .qs-icono svg { width: 26px; height: 26px; }
.qs-disc-cab strong { color: #17365d; font-size: 22px; }
.qs-servicios { list-style: none; margin: 0; padding: 0 28px 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.qs-servicios a { display: inline-block; padding: 9px 16px; border-radius: 50px; background: #eef3f8; color: #17365d; font-size: 15px; text-decoration: none; transition: background .2s, color .2s; }
.qs-remate { margin: 0; max-width: 70ch; font-size: 17px; color: #333; }
.qs-remate strong { color: #17365d; }
@media (hover: hover) and (pointer: fine) {
  .qs-servicios a:hover { background: #17365d; color: #fff; }
}
.qs-foto { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 14px 36px rgba(23,54,93,.12); }
.qs-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; }
/* Trayectoria */
  .qs-num { display: block; font-size: 46px; font-weight: 600; line-height: 1.1; color: #17365d; }
.qs-rot { display: block; margin-top: 6px; font-size: 15px; color: #5a6b80; }
.qs-anio { display: block; font-size: 22px; font-weight: 700; color: #1159af; margin-bottom: 4px; }
/* Sectores: foto arriba y caja blanca superpuesta con el nombre */
  .qs-sectores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 20px; }
.qs-sector { display: block; text-decoration: none; color: #17365d; }
/* Foto 4:3 (800×600). La caja blanca tapa los 42 px inferiores, así que el motivo va en la mitad superior */
  .qs-sector-foto { display: block; aspect-ratio: 4/3; overflow: hidden; background: #eef3f8; }
.qs-sector-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
@media (hover: hover) and (pointer: fine) {
  .qs-sector:hover .qs-sector-foto img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-sector-foto img { transition: none; }
}
.qs-sector-caja { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; margin: -42px 18px 0; min-height: 84px; padding: 16px 14px; background: #fff; font-size: 17px; font-weight: 500; line-height: 1.3; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 10px 28px rgba(23,54,93,.10); transition: color .2s; }
@media (hover: hover) and (pointer: fine) {
  .qs-sector:hover .qs-sector-caja { color: #1159af; }
}
.qs-sector:focus-visible { outline: 3px solid #1159af; outline-offset: 4px; }
/* Dónde estamos */
  .qs-ciudades { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.qs-ciudad { position: relative; display: block; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.08); }
.qs-ciudad img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.qs-ciudad span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(to top, rgba(15,36,64,.92), rgba(15,36,64,0)); font-size: 14px; color: #dbe6f2; }
.qs-ciudad strong { display: block; font-size: 20px; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .qs-ciudad:hover img { transform: scale(1.05); }
}
.qs-ciudad:focus-visible { outline: 3px solid #1159af; outline-offset: 3px; }
/* ADN y certificaciones */
  .qs-adn { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.qs-sellos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.qs-tarjeta { background: #fff; border-radius: 14px; padding: 28px 24px; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06); }
.qs-tarjeta strong { display: block; color: #17365d; font-size: 18px; margin-bottom: 8px; }
.qs-tarjeta p { margin: 0; font-size: 15px; line-height: 1.6; color: #5a6b80; }
.qs-sello { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 50px; background: #17365d; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
/* Compromiso: foto a la izquierda, lista numerada a la derecha */
  .qs-foto-izq { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.qs-foto-izq .qs-foto img { object-position: 60% center; }
.qs-compromiso { display: grid; gap: 0; margin-top: 24px; }
.qs-comp { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid #d6e0ec; }
.qs-comp:last-child { border-bottom: 1px solid #d6e0ec; }
.qs-num-comp { font-size: 30px; font-weight: 700; color: #1159af; line-height: 1; }
.qs-comp strong { display: block; color: #17365d; font-size: 18px; margin-bottom: 4px; }
.qs-comp p { margin: 0; font-size: 16px; color: #5a6b80; }
/* Sellos */
  .qs-sello-img { height: 76px; display: flex; align-items: center; margin-bottom: 18px; }
.qs-sello-img img { max-height: 76px; max-width: 100%; width: auto; display: block; }
/* Trayectoria: cifras con icono + hitos en tarjetas */
  .qsB-cifras { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 34px 0 30px; }
.qsB-cifras > div { position: relative; background: #fff; border-radius: 14px; padding: 42px 18px 24px; margin-top: 28px; text-align: center; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06); }
.qsB-circ { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #17365d, #1159af); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(17,89,175,.35); border: 4px solid #eef3f8; }
.qsB-circ svg { width: 24px; height: 24px; }
.qsB-hitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 34px; }
.qsB-hitos li { position: relative; overflow: hidden; background: #fff; border-radius: 14px; padding: 26px 22px 24px; border-bottom: 4px solid #1159af; box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06); }
.qsB-hitos li:not(:last-child)::after { content: "→"; position: absolute; right: -27px; top: 50%; transform: translateY(-50%); color: #1159af; font-size: 22px; font-weight: 700; }
.qsB-hitos { overflow: visible; }
.qsB-hitos li { overflow: visible; }
/* Año en azul difuminado: degradado de #1159af a #0088f0.
     #0088f0 solo vale para texto grande (3,6:1), y el año va a 40 px en negrita */
  .qsB-hitos .qs-anio { font-size: 40px; font-weight: 800; line-height: 1.1; margin-bottom: 12px; color: #1159af; background: linear-gradient(90deg, #17365d 0%, #1159af 35%, #0088f0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: max-content; }
.qsB-hitos strong { display: block; color: #17365d; font-size: 17px; margin-bottom: 6px; }
.qsB-hitos p { margin: 0; font-size: 15px; color: #5a6b80; line-height: 1.55; }
/* ADN con color y número por valor */
  .qs-valor { position: relative; border-top: 5px solid var(--c); transition: transform .2s, box-shadow .2s; }
.qs-valor .qs-icono { background: var(--cf); color: var(--c); }
.qs-valor-num { position: absolute; top: 18px; right: 22px; font-size: 38px; font-weight: 800; line-height: 1; color: var(--cf); }
.qs-azul { --c: #1159af; --cf: #e4eefb; }
.qs-verde { --c: #1d7a5a; --cf: #e3f3ec; }
.qs-marino { --c: #17365d; --cf: #e6ebf2; }
.qs-ambar { --c: #9a5b12; --cf: #fbeee0; }
@media (hover: hover) and (pointer: fine) {
  .qs-valor:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(23,54,93,.10), 0 18px 36px rgba(23,54,93,.14); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-valor { transition: none; }
}
@media (max-width: 900px) {
  .qsB-hitos { grid-template-columns: 1fr; gap: 16px; }
  .qsB-hitos li:not(:last-child)::after { display: none; }
}
@media (max-width: 1024px) {
  .qs-adn { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qs-sectores { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .qs-ciudades { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .qs-dos-col { grid-template-columns: 1fr; gap: 30px; }
  .qs-anio { font-size: 19px; }
  .qs-sellos { grid-template-columns: 1fr; }
  .qs-foto-izq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qs-adn { grid-template-columns: 1fr; }
  .qs-sectores { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
  .qs-sector-caja { margin: -30px 8px 0; min-height: 66px; font-size: 15px; padding: 12px 8px; }
  .qs-disciplinas { grid-template-columns: 1fr; }
  .qs-ciudades { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qs-num { font-size: 36px; }
}


/* ============================================================
   TEXTOS LEGALES — Aviso legal, Privacidad, Cookies, Calidad, Seguridad
   Sin maqueta propia. Reutiliza .miga-barra. La franja marina no lleva
   círculos decorativos: quitados el 09-10-2026, como en .cierre-marino.
   Estructura (las tres filas llevan además .legal-centrado):
     Row Layout .miga-barra
     Row Layout .cab-legal        ← franja marina sin foto, fondo desde aquí
       └─ Section                 ← solo el H1
     Row Layout .legal-cuerpo
       └─ Section .legal-texto    ← el texto; cada H2 lleva su id
   Sin índice ni menú lateral: decidido el 05-10.
   Listas con forma propia (clase en el bloque List):
     .legal-ficha        datos identificativos y cookies
     .legal-plazos       plazos de conservación
     .legal-columnas     a dos columnas
     .legal-compromisos  rejilla numerada (Calidad)
   ============================================================ */

/* ---- Columna centrada de 760 px, común a miga, cabecera y texto ----
   Así el titular, la miga y el texto empiezan en el mismo sitio.
   El «>» es imprescindible: sin él alcanzaría a cualquier Row Layout
   que se meta dentro algún día.
   width: 100% porque la Section de Kadence es flex y, sin él, la caja
   se encoge al ancho de su contenido y cada fila empieza en un sitio. */
.legal-centrado > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Franja marina ---- */
.cab-legal {
  background: #17365d;
}

/* Solo el H1 en la franja: sin rótulo ni línea de datos (05-10) */
.cab-legal h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

/* ---- Texto ---- */
.legal-cuerpo { background: #fff; }

.legal-texto > .kt-inside-inner-col { counter-reset: apartado; }

/* break-word: Cookies trae URL largas sin espacios que en móvil
   desbordaban la columna */
.legal-texto p,
.legal-texto li {
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  overflow-wrap: break-word;
}

.legal-texto p { margin: 0 0 18px; }

/* Enlaces: el tema los pinta en #0088f0 (3,6:1 sobre blanco, no llega
   a 4,5:1). #1159af es el único azul apto para texto normal. */
.legal-texto a {
  color: #1159af;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .legal-texto a:hover { color: #17365d; }
}

.legal-texto h2 {
  counter-increment: apartado;
  scroll-margin-top: 56px;
  margin: 56px 0 18px;
  padding-top: 32px;
  border-top: 1px solid #d6e0ec;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #17365d;
}

/* Número en la misma línea que el título: «01 – Introducción» (05-10).
   Hereda tamaño, grosor y color del H2: todo en marino. */
.legal-texto h2::before {
  content: counter(apartado, decimal-leading-zero) " – ";
}

.legal-texto h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Subapartados (Cookies: «Según la finalidad»…). Sin número ni filete */
.legal-texto h3 {
  margin: 32px 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #17365d;
}

/* Viñeta cuadrada; centrada con la primera línea (line-height 1.7) */
.legal-texto ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.legal-texto ul li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
}

.legal-texto ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(.85em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #0088f0;
}

/* Ficha: datos identificativos y cookies */
.legal-texto ul.legal-ficha {
  margin: 8px 0 28px;
  padding: 6px 28px;
  border-radius: 14px;
  background: #eef3f8;
}

.legal-texto ul.legal-ficha li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #d6e0ec;
  color: #17365d;
}

.legal-texto ul.legal-ficha li:last-child { border-bottom: 0; }

.legal-texto ul.legal-ficha strong {
  font-size: 15px;
  font-weight: 400;
  color: #5a6b80;
}

/* Plazos de conservación */
.legal-texto ul.legal-plazos { border-top: 1px solid #d6e0ec; }

.legal-texto ul.legal-plazos li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #d6e0ec;
}

.legal-texto ul.legal-plazos strong {
  font-weight: 600;
  color: #1159af;
}

.legal-texto ul.legal-ficha li::before,
.legal-texto ul.legal-plazos li::before { display: none; }

/* Compromisos de Calidad: columnas abiertas con número y filete,
   mismo criterio que «Menos cajas» del 22-09 */
.legal-texto ul.legal-compromisos {
  counter-reset: compromiso;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
  margin: 12px 0 40px;
}

.legal-texto ul.legal-compromisos li {
  counter-increment: compromiso;
  margin: 0;
  padding: 16px 0 0;
  border-top: 2px solid #17365d;
  font-size: 16px;
  line-height: 1.6;
}

.legal-texto ul.legal-compromisos li::before {
  content: counter(compromiso, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 8px;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #1159af;
}

/* Frase destacada (alcance de Calidad) */
.legal-texto .legal-destacado {
  margin: 0 0 28px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid #0088f0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  color: #17365d;
}

/* Firma (Calidad) */
.legal-texto .legal-firma {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #d6e0ec;
  font-size: 15px;
  line-height: 1.6;
  color: #5a6b80;
}

@media (min-width: 701px) {
  .legal-texto ul.legal-columnas {
    columns: 2;
    column-gap: 40px;
  }
  .legal-texto ul.legal-columnas li { break-inside: avoid; }
}

/* ---- Móvil ---- */
@media (max-width: 900px) {
  /* Escritorio: 40/40 y 40 arriba del cuerpo, desde el panel (05-10).
     En móvil, algo menos para no comerse media pantalla. */
  .cab-legal > .kt-row-column-wrap {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .cab-legal h1 { font-size: 30px; }

  .legal-cuerpo > .kt-row-column-wrap {
    padding-top: 28px !important;
    padding-bottom: 52px !important;
  }

  .legal-texto h2 {
    margin-top: 44px;
    padding-top: 26px;
    font-size: 23px;
  }
  .legal-texto h3 { font-size: 18px; }
  .legal-texto ul.legal-compromisos {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .legal-texto ul.legal-ficha { padding: 4px 20px; }
  .legal-texto ul.legal-ficha li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ============================================================
   PÁGINAS DE SERVICIO · dos ajustes   (05-10-2026)

   1 · Paneles de especialidad fuera de su columna
   El tema esconde los paneles con visibility: hidden, que reserva
   el espacio para que la fila no cambie de alto al cambiar de
   pestaña. Pero un panel que acabe FUERA de .sv-paneles-col deja
   ese espacio reservado en medio de la página: cuatro paneles son
   2.635 px de hueco en blanco.
   Aquí se invierte el criterio: oculto de verdad por defecto, y
   sólo dentro del carrete se reserva el sitio.

   2 · Aire entre el carrete y «Otras disciplinas»
   Eran 76 + 56 px de relleno, 139 px en total contando el sobrante
   del panel dentro de su celda. Con 32 + 40 quedan 79.
   El «>» y el !important son imprescindibles: sin ellos la regla
   no gana a la hoja que genera Kadence por uniqueID, y además
   alcanzaría a los Row Layout anidados.

   Va al final de style.css.
   ============================================================ */

.sv-panel[hidden] { display: none; }
.sv-paneles-col .sv-panel[hidden] { display: block; visibility: hidden; }

/* Tecnología (1.2.51): «Qué hacemos» y «Nuestro enfoque» van las dos en
   blanco, y el sitio reservado por el panel más largo dejaba un hueco en
   blanco distinto según la pestaña (hasta 132 px). Ahí cada panel mide lo
   suyo: la sección cambia de alto al cambiar de pestaña. Se reconocen por
   llevar «Nuestro enfoque» detrás; las de Ingeniería siguen como antes.
   Y entre las dos, 32 + 40 px, como entre el carrete y «Otras disciplinas». */
.sv-esp-caja-row:has(+ .sv-enfoque) .sv-paneles-col .sv-panel[hidden] { display: none; }
.sv-esp-caja-row + .sv-enfoque > .kt-row-column-wrap { padding-top: 40px !important; }

.sv-esp-caja-row > .kt-row-column-wrap { padding-bottom: 32px !important; }
.sv-otras > .kt-row-column-wrap { padding-top: 40px !important; }

/* Dos párrafos de entradilla seguidos en las páginas de servicio.
   .sv-lead lleva margin: 0, así que dos seguidos se pegan.
   Va al final de style.css, junto a los demás ajustes. */
.sv-lead + .sv-lead { margin-top: 18px; }

/* ============================================================
   IA   ·  página 223   (06-10-2026)
   Maqueta: aldia-ia-v1.html
   Casi todo lo reutiliza del bloque POR QUÉ ALDIA: pq-dos-col,
   pq-foto, pq-pilares, pq-formacion, pq-condiciones, pq-lista,
   pq-entradilla, cab-foto + cab-caja, cierre-marino.
   De 39 clases, solo estas cuatro eran nuevas.
   Filas: 1 miga-barra · 2 cab-foto + cab-caja · 3 ia-hacemos
          4 ia-casos-sec · 5 ia-stack-sec · 6 ia-equipo
          7 cierre-marino
   ============================================================ */

/* ---- Fondos de fila. Los pone la clase, igual que .sv-esp ---- */
.ia-casos-sec, .ia-equipo { background: #eef3f8; }
.ia-hacemos, .ia-stack-sec { background: #fff; }
.ia-hacemos h2, .ia-casos-sec h2, .ia-stack-sec h2, .ia-equipo h2 { line-height: 1.15; }

/* ---- Casos: dos tarjetas, no tres ---- */
.ia-casos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
.ia-caso-h { font-size: 21px; color: #17365d; margin: 2px 0 12px; line-height: 1.25; }

/* ---- Resultados de cada caso, en píldoras del color de la tarjeta ---- */
.ia-res { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ia-res li {
  padding: 7px 15px; border-radius: 50px;
  background: var(--cf); color: var(--c);
  font-size: 14px; font-weight: 600;
}

/* ---- Stack: cuatro tarjetas en dos filas de dos ---- */
.ia-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ---- La foto y el texto del equipo, centrados entre sí ---- */
.ia-equipo .pq-dos-col { align-items: center; }

@media (max-width: 900px) {
  .ia-casos, .ia-stack { grid-template-columns: 1fr; }
}

/* ============================================================
   CIFRAS DE LA PORTADA  ·  página 144            (06-10-2026)
   Las cinco cifras de la maqueta v5: años, empleados, países,
   clientes y proyectos entregados.
   El fondo y el relleno de la banda los sigue poniendo la fila
   de Kadence, igual que ahora; aquí solo va el interior.
   ============================================================ */

.pc-cifras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.pc-cifras > div { position: relative; text-align: center; padding: 0 12px 4px; }
.pc-cifras > div + div { border-left: 1px solid #cfdbe8; }

.pc-circ { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, #17365d, #1159af); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(17, 89, 175, .35); }
.pc-circ svg { width: 24px; height: 24px; }

.pc-num { display: flex; justify-content: center; align-items: baseline; font-size: 42px; font-weight: 600; line-height: 1.1; color: #17365d; }
.pc-val { font-variant-numeric: tabular-nums; }
.pc-mas { margin-right: 2px; font-size: .5em; font-weight: 600; line-height: 1; opacity: .5; vertical-align: .22em; }
.pc-rot { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.35; color: #5a6b80; }

@media (max-width: 980px) {
  .pc-cifras { grid-template-columns: repeat(6, 1fr); row-gap: 30px; }
  .pc-cifras > div { grid-column: span 2; }
  .pc-cifras > div:nth-child(4), .pc-cifras > div:nth-child(5) { grid-column: span 3; }
  .pc-cifras > div:nth-child(4) { border-left: 0; }
}

@media (max-width: 900px) {
  .pc-cifras > div:nth-child(3) { border-left: 0; }
}

@media (max-width: 640px) {
  .pc-cifras { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .pc-cifras > div, .pc-cifras > div:nth-child(4), .pc-cifras > div:nth-child(5) { grid-column: auto; border-left: 0; }
  .pc-cifras > div:nth-child(even) { border-left: 1px solid #cfdbe8; }
  .pc-cifras > div:last-child { grid-column: 1 / -1; border-left: 0; padding-top: 26px; border-top: 1px solid #cfdbe8; }
  .pc-num { font-size: 34px; }
  .pc-rot { font-size: 14px; }
}

/* ============================================================
   FOTOS DE LA PORTADA  ·  página 144            (06-10-2026)
   Convierte en foto cualquier hueco que tenga una imagen dentro,
   sin tocar las clases de las columnas.
   La foto desborda con margen negativo el relleno de 16 px que
   Kadence pone en cada columna; ese relleno gana a cualquier
   regla de aquí, incluso con !important, de ahí el rodeo.
   ============================================================ */

/* --- 15 fotos en columna: 13 en 4:3 y 2 en 16:9 --- */
.hueco-foto > .kt-inside-inner-col:has(img) {
  aspect-ratio: auto;
  border: 0;
  background: none !important;
}
.hueco-foto .wp-block-image { margin: -16px; overflow: hidden; border-radius: 12px; }
.hueco-43 .wp-block-image { aspect-ratio: 4 / 3; }
.hueco-pata .wp-block-image { aspect-ratio: 16 / 9; }

/* --- 6 fotos de los casos: a sangre en la cabecera de la tarjeta --- */
.rejilla-casos .kt-inside-inner-col { overflow: hidden; }
.foto-caso { margin: -24px -24px 24px; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid #e3e9f0; }

.hueco-foto img, .foto-caso img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   HERO DE LA PORTADA  ·  página 144               (06-10-2026)
   El hero de la maqueta v5: pantalla completa, dos fotos que
   se cruzan cada 6 s, texto a la izquierda que entra escalonado
   y dos puntos abajo a la derecha para cambiar de una a otra.
   Los 80 px que se restan son la altura de la cabecera; si algún
   día cambia, hay que tocarlos aquí.
   ============================================================ */

.hero-aldia {
  background: #1b1f24 !important;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-aldia .hero-fondo { display: none; }

/* Kadence posiciona estos tres; los dejamos estáticos para que las
   fotos se midan contra la fila entera y no contra la columna. */
.hero-aldia > .kt-row-column-wrap { position: static !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.hero-aldia .wp-block-kadence-column { position: static !important; }
.hero-aldia .kt-inside-inner-col {
  position: static !important;
  display: grid !important;
  text-align: left;
  padding-bottom: 70px !important;
}

.v5-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v5-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.v5-slide.v5-on { opacity: 1; }
.v5-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-slides::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 36, 64, .90) 0%, rgba(15, 36, 64, .70) 46%, rgba(15, 36, 64, .20) 100%),
    linear-gradient(to top, rgba(15, 36, 64, .62) 0%, rgba(15, 36, 64, 0) 28%);
}

.v5-texto { grid-area: 1 / 1; visibility: hidden; position: relative; z-index: 2; }
.v5-texto.v5-on { visibility: visible; }
.v5-texto h1, .v5-texto .v5-h1 {
  font-size: clamp(40px, 5.6vw, 68px); line-height: 1.1; max-width: 20ch;
  color: #fff; font-weight: 600; margin: 0 0 22px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5);
}
.v5-texto .acento { color: #00bdfc; }
.v5-texto > p {
  color: #dbe6f2; font-size: clamp(17px, 1.5vw, 20px); max-width: 56ch; margin: 0 0 34px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5);
}
.v5-botones { display: flex; gap: 14px; }
.btn-hero {
  display: inline-block; padding: 16px 32px; border-radius: 50px;
  font-size: 18px; line-height: 1.2; text-decoration: none;
  background: #fff; color: #17365d;
  transition: background .25s ease, color .25s ease;
}
.btn-hero:hover, .btn-hero:focus-visible { background: #00bdfc; color: #0f2440; }

.v5-texto.v5-on > * { animation: v5-entra .75s cubic-bezier(.22, .61, .36, 1) both; }
.v5-texto.v5-on > *:nth-child(1) { animation-delay: .05s; }
.v5-texto.v5-on > *:nth-child(2) { animation-delay: .22s; }
.v5-texto.v5-on > *:nth-child(3) { animation-delay: .39s; }
@keyframes v5-entra { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

.v5-puntos {
  position: absolute; left: 0; right: 0; bottom: 38px; z-index: 3;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: flex-end; gap: 11px;
}
.v5-punto {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .65);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.v5-punto[aria-selected="true"] { background: #fff; border-color: #fff; }
.v5-punto:focus-visible { outline: 2px solid #00bdfc; outline-offset: 3px; }
/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.v5-punto:not([aria-selected="true"]):hover,
.v5-punto:not([aria-selected="true"]):focus,
.v5-punto:not([aria-selected="true"]):active { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .v5-punto:hover { border-color: #fff; transform: scale(1.15); }
}

@media (max-width: 900px) {
  .hero-aldia .kt-inside-inner-col { text-align: center; }
  .v5-texto h1, .v5-texto .v5-h1, .v5-texto > p { margin-left: auto; margin-right: auto; }
  .v5-botones { justify-content: center; }
  .v5-puntos { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-texto.v5-on > * { animation: none; }
  .v5-slide { transition: none; }
}

/* ============================================================
   QUIÉNES SOMOS EN LA PORTADA  ·  página 144      (06-10-2026)
   La sección que la v5 pone entre Sectores y Casos de éxito, y
   que hoy no existe en la portada: foto a la izquierda, texto y
   botón a la derecha.
   Va al final de style.css.
   ============================================================ */

.v5-qs { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

.v5-qs-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.v5-qs-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.v5-qs-txt p { color: #5a6b80; font-size: 18px; line-height: 1.7; margin: 0 0 18px; }
.v5-qs-txt p:last-of-type { margin-bottom: 28px; }
.v5-qs-txt strong { color: #17365d; font-weight: 600; }

.btn-borde {
  display: inline-block; padding: 14px 32px; border-radius: 50px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid #17365d; color: #17365d;
  transition: background .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-borde:hover { background: #17365d; color: #fff; }
}
.btn-borde:focus-visible { outline: 2px solid #00bdfc; outline-offset: 3px; }

@media (max-width: 900px) {
  .v5-qs { grid-template-columns: 1fr; gap: 28px; }
  .v5-qs-foto { order: -1; }
}

/* ============================================================
   PORTADA — Acercamiento a la maqueta v5          (06-10-2026)
   ============================================================ */

/* --- Quiénes somos, la sección que falta --- */
.v5-qs { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.v5-qs-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.v5-qs-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-qs-txt p { color: #5a6b80; font-size: 18px; line-height: 1.7; margin: 0 0 18px; }
.v5-qs-txt p:last-of-type { margin-bottom: 28px; }
.v5-qs-txt strong { color: #17365d; font-weight: 600; }
.btn-borde {
  display: inline-block; padding: 14px 32px; border-radius: 50px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid #17365d; color: #17365d;
  transition: background .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-borde:hover { background: #17365d; color: #fff; } }
@media (max-width: 900px) { .v5-qs { grid-template-columns: 1fr; gap: 28px; } .v5-qs-foto { order: -1; } }

/* --- Secciones que la v5 no tiene. Si las quieres de vuelta, borra estas dos líneas --- */
.kb-row-layout-id144_6f82d4-97,
.kb-row-layout-id144_38a996-e8 { display: none; }   /* las dos listas largas de servicios */
.kb-row-layout-id144_2746dc-ac { display: none; }   /* los testimonios */

/* ============================================================
   PORTADA — Acercamiento a la maqueta v5          (06-10-2026)
   ============================================================ */

.v5-qs { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.v5-qs-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.v5-qs-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-qs-txt p { color: #5a6b80; font-size: 18px; line-height: 1.7; margin: 0 0 18px; }
.v5-qs-txt p:last-of-type { margin-bottom: 28px; }
.v5-qs-txt strong { color: #17365d; font-weight: 600; }
.btn-borde {
  display: inline-block; padding: 14px 32px; border-radius: 50px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid #17365d; color: #17365d;
  transition: background .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-borde:hover { background: #17365d; color: #fff; } }
@media (max-width: 900px) { .v5-qs { grid-template-columns: 1fr; gap: 28px; } .v5-qs-foto { order: -1; } }

/* Botones con borde («Ver ofertas de empleo», «Conócenos»): al pasar el ratón,
   azul claro con el borde marino. Rellenos de marino quedaban igual que
   «Por qué ALDIA», que está al lado (1.2.50). */
@media (hover: hover) and (pointer: fine) { .btn-borde:hover { background: #e4eefb; color: #17365d; } }

/* Secciones que la v5 no tiene. Si las quieres de vuelta, borra estas tres líneas */
.kb-row-layout-id144_6f82d4-97,
.kb-row-layout-id144_38a996-e8 { display: none; }
.kb-row-layout-id144_2746dc-ac { display: none; }

.qs-portada { background: #fff; }
.qs-portada > .kt-row-column-wrap { padding: 80px 24px !important; }
@media (max-width: 900px) { .qs-portada > .kt-row-column-wrap { padding: 56px 20px !important; } }

/* Alternancia de fondos tras entrar Quiénes somos */
.kb-row-layout-id144_861e64-22,
.kb-row-layout-id144_e79d86-8e { background: #eef3f8; }
.kb-row-layout-id144_427a8e-cb,
.kb-row-layout-id144_5fdaa6-5f { background: #fff; }

.kb-row-layout-id144_72ea7e-4e { display: none; }   /* rótulos huérfanos de las listas ocultas */

/* ============================================================
   PORTADA — Qué hacemos, tarjetas de la maqueta v5  (06-10-2026)
   Sustituyen a las dos tarjetas de texto, las dos fotos sueltas
   y las dos listas largas de servicios, que quedan ocultas.
   ============================================================ */

.kb-row-layout-id144_36f7c5-2c,
.kb-row-layout-id144_11ab4c-ed { display: none; }

.kb-row-layout-id144_f222a5-3f h2,
.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p { text-align: left !important; }

.v5-disciplinas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 8px 0 0; }
.v5-disc { position: relative; min-height: 540px; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.v5-disc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: block; }
.v5-disc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,36,64,.88) 0%, rgba(15,36,64,.52) 40%, rgba(15,36,64,.04) 82%); }
.v5-disc-caja { padding: 34px 32px 30px; width: 100%; }
.v5-disc-rot { display: inline-block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: #00bdfc; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(8,20,38,.7); }
.v5-disc-caja h3 { margin: 0 0 20px; color: #fff; font-size: 29px; font-weight: 600; line-height: 1.2; max-width: 28ch; min-height: 2.4em; display: flex; align-items: flex-start; text-shadow: 0 2px 14px rgba(8,20,38,.6); }
.v5-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 80px; align-content: flex-start; }
.v5-chips a { display: block; color: #fff; font-size: 14.5px; text-decoration: none; padding: 8px 15px; border-radius: 50px; background: rgba(10,26,48,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.v5-chips .v5-salto { flex: 0 0 100%; }
.v5-chips .v5-salto a { width: max-content; }
@media (hover: hover) and (pointer: fine) { .v5-chips a:hover { background: #fff; color: #17365d; box-shadow: none; } }
@media (max-width: 900px) {
  .v5-disciplinas { grid-template-columns: 1fr; }
  .v5-disc { min-height: 420px; }
  .v5-disc-caja h3 { min-height: 0; display: block; }
  .v5-chips { min-height: 0; }
}

/* ============================================================
   PORTADA — Sectores en pestañas, maqueta v5      (06-10-2026)
   Doce píldoras y un solo panel. Sustituyen a las dos rejillas
   de seis y a la rotativa de doce filas, que quedan ocultas.
   Va al final de style.css.
   ============================================================ */

.kb-row-layout-id144_dfbfa2-59,
.kb-row-layout-id144_937c12-7b,
.kb-row-layout-id144_c9b149-c1 { display: none; }

/* El titular y la entradilla van a la izquierda, como en la maqueta.
   Se apunta por el id de la fila porque el párrafo no lleva la clase
   .entradilla, sino el has-text-align-center que puso el editor. */
.kb-row-layout-id144_0c0557-0d h2,
.kb-row-layout-id144_0c0557-0d > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p { text-align: left !important; }

/* --- las píldoras --- */
.op2-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.op2-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border: 1px solid #d6e0ec; border-radius: 50px;
  background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: #17365d;
  cursor: pointer; line-height: 1.2; box-shadow: 0 1px 2px rgba(23, 54, 93, .05);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.op2-tab-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e4eefb; color: #1159af; transition: background .2s, color .2s;
}
.op2-tab-ico svg { width: 18px; height: 18px; }
.op2-tab[aria-selected="true"] {
  background: #17365d; border-color: #17365d; color: #fff;
  box-shadow: 0 8px 20px rgba(23, 54, 93, .25); transform: translateY(-1px);
}
.op2-tab[aria-selected="true"] .op2-tab-ico { background: #fff; color: #1159af; }
.op2-tab:focus-visible { outline: 2px solid #0088f0; outline-offset: 2px; }
/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.op2-tab:not([aria-selected="true"]):hover,
.op2-tab:not([aria-selected="true"]):focus,
.op2-tab:not([aria-selected="true"]):active { background: #fff; color: #17365d; }
@media (any-hover: hover) {
  .op2-tab:not([aria-selected="true"]):hover { border-color: #1159af; box-shadow: 0 6px 16px rgba(17, 89, 175, .15); }
  .op2-tab:not([aria-selected="true"]):hover .op2-tab-ico { background: #1159af; color: #fff; }
}

/* --- el panel --- */
.op2-panel {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px;
  align-items: start; margin-top: 40px;
}
.op2-panel .sobretitulo {
  font-size: 14px; letter-spacing: .09em; text-transform: uppercase;
  color: #1159af; margin: 0 0 8px;
}
.op2-panel h3 { font-size: 30px; font-weight: 600; color: #17365d; margin: 0 0 10px; }
.op2-panel p { color: #5a6b80; font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.op2-panel p:last-child { margin-bottom: 0; }
.op2-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.op2-foto img { width: 100%; height: 100%; object-fit: cover; display: block; animation: aparecer .4s ease; }
#sp-txt { animation: aparecer .4s ease; }

@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .op2-panel { grid-template-columns: 1fr; gap: 24px; }
  .op2-foto { order: -1; }
}
@media (max-width: 640px) {
  .op2-tabs { gap: 8px; }
  .op2-tab { font-size: 14px; padding: 5px 14px 5px 5px; gap: 8px; }
  .op2-tab-ico { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .op2-tab, .op2-tab-ico { transition: none; }
  .op2-foto img, #sp-txt { animation: none; }
}

/* ============================================================
   PORTADA — IA en banda con foto, maqueta v5      (06-10-2026)
   La foto ocupa toda la sección y el texto va centrado encima.
   Sustituye a la cabecera y al cierre de IA de ahora, que
   quedan ocultos.
   Va al final de style.css.
   ============================================================ */

.kb-row-layout-id144_839b14-8e,
.kb-row-layout-id144_aca592-ff { display: none; }

/* La fila pasa a ser la banda. Se dejan estáticos los tres
   contenedores de Kadence para que la foto se mida contra la
   fila entera, igual que en el hero. */
.seccion-ia {
  position: relative; isolation: isolate;
  background: #0f2440 !important;
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.seccion-ia > .kt-row-column-wrap {
  position: static !important;
  padding-top: 90px !important; padding-bottom: 90px !important;
}
.seccion-ia .wp-block-kadence-column,
.seccion-ia .kt-inside-inner-col { position: static !important; }

/* La foto y el velo van en el mismo envoltorio: la columna de
   Kadence crea su propio contexto de apilado y, si el velo
   cuelga de la fila, acaba tapando el texto. */
.v5-ia-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v5-ia-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.v5-ia-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(15, 36, 64, .88), rgba(23, 54, 93, .74) 55%, rgba(15, 36, 64, .88));
}

.v5-ia-cont { position: relative; z-index: 2; }
.v5-ia-cab { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.v5-ia-cab img { height: 54px; width: auto; display: block; }
.seccion-ia h2 { color: #fff !important; font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; margin: 0; }
.v5-ia-lead { margin: 0 auto 34px; max-width: 64ch; color: #dbe6f2; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }

.v5-ia-lineas {
  list-style: none; margin: 0 auto 34px; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; text-align: left;
}
.v5-ia-lineas li {
  padding: 16px 0 0; border-top: 2px solid #00bdfc;
  color: #fff; font-size: 16px; line-height: 1.5; font-weight: 500;
}

@media (max-width: 900px) {
  .seccion-ia { min-height: 0; }
  .seccion-ia > .kt-row-column-wrap { padding-top: 70px !important; padding-bottom: 70px !important; }
  .v5-ia-lineas { grid-template-columns: 1fr; gap: 0; }
  .v5-ia-lineas li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .3); }
}

/* ============================================================
   PORTADA — Únete a nosotros, banda de la maqueta v5
                                                  (06-10-2026)
   Foto con rótulo a la izquierda y texto con dos botones a la
   derecha. Los bloques sueltos a los que sustituía se borraron
   de la página el 09-10-2026.
   Va al final de style.css.
   ============================================================ */

.v5-ub { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }

.v5-ub-foto {
  order: 1; position: relative; margin: 0;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #d6e0ec;
}
.v5-ub-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-ub-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 26px 24px;
  background: linear-gradient(to top, rgba(15, 36, 64, .92) 30%, rgba(15, 36, 64, 0));
  color: #fff;
}
.v5-ub-foto strong { display: block; font-size: 21px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; }
.v5-ub-foto span { display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }

.v5-ub-txt { order: 2; }
.v5-ub-txt .rotulo-seccion { display: inline-block; margin: 0 0 10px; }
.v5-ub-txt h2 { margin: 0 0 12px; font-size: 32px; font-weight: 600; color: #17365d; line-height: 1.2; text-align: left; }
.v5-ub-txt > p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.65; color: #5a6b80; }
.v5-ub-bot { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-marino {
  display: inline-block; padding: 16px 32px; border-radius: 50px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; background: #17365d; color: #fff;
  transition: background .25s ease;
}
/* Kadence pone azul marino el texto de los enlaces al pasar el ratón, al
   pulsarlos y con el foco: sobre este fondo no se leía (1.2.47). */
.btn-marino:hover, .btn-marino:focus, .btn-marino:active { color: #fff; }
/* Al pasar el ratón, azul medio como los demás botones azul marino de la web;
   el marino oscuro de antes casi no se distinguía (1.2.48) */
@media (hover: hover) and (pointer: fine) { .btn-marino:hover { background: #1159af; } }
.btn-marino:focus-visible { outline: 2px solid #00bdfc; outline-offset: 3px; }

@media (max-width: 900px) {
  .v5-ub { grid-template-columns: 1fr; gap: 30px; }
  .v5-ub-foto { order: 2; }
  .v5-ub-txt { order: 1; }
}

/* ============================================================
   PORTADA — Cómo trabajamos, maqueta v5           (06-10-2026)
   Rampa de compromiso, escala y los tres niveles en columnas
   separadas por filetes. Sustituye a las tres tarjetas de ahora,
   que quedan ocultas.
   Va al final de style.css.
   ============================================================ */

.kb-row-layout-id144_9cbd99-55 { display: none; }

/* La rampa va como imagen de fondo para que el bloque de la
   página no se pase del límite de pegado del editor de código. */
.mv-rampa {
  margin: 0 0 26px;
  height: 108px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 865 128' preserveAspectRatio='none'%3E%3Crect x='0' y='110' width='10' height='18' rx='5' fill='%23cfe4fb'/%3E%3Crect x='19' y='109.8' width='10' height='18.2' rx='5' fill='%23cbe0f7'/%3E%3Crect x='38' y='109.3' width='10' height='18.7' rx='5' fill='%23c7dcf4'/%3E%3Crect x='57' y='108.6' width='10' height='19.4' rx='5' fill='%23c3d8f0'/%3E%3Crect x='76' y='107.8' width='10' height='20.2' rx='5' fill='%23bfd5ed'/%3E%3Crect x='95' y='106.9' width='10' height='21.1' rx='5' fill='%23bbd1e9'/%3E%3Crect x='114' y='105.9' width='10' height='22.1' rx='5' fill='%23b6cde6'/%3E%3Crect x='133' y='104.7' width='10' height='23.3' rx='5' fill='%23b2c9e2'/%3E%3Crect x='152' y='103.4' width='10' height='24.6' rx='5' fill='%23aec5df'/%3E%3Crect x='171' y='102.1' width='10' height='25.9' rx='5' fill='%23aac1db'/%3E%3Crect x='190' y='100.6' width='10' height='27.4' rx='5' fill='%23a6bdd8'/%3E%3Crect x='209' y='99.1' width='10' height='28.9' rx='5' fill='%23a2b9d4'/%3E%3Crect x='228' y='97.5' width='10' height='30.5' rx='5' fill='%239eb6d1'/%3E%3Crect x='247' y='95.7' width='10' height='32.3' rx='5' fill='%239ab2cd'/%3E%3Crect x='266' y='93.9' width='10' height='34.1' rx='5' fill='%2396aeca'/%3E%3Crect x='285' y='92.1' width='10' height='35.9' rx='5' fill='%2392aac6'/%3E%3Crect x='304' y='90.1' width='10' height='37.9' rx='5' fill='%238ea6c3'/%3E%3Crect x='323' y='88.1' width='10' height='39.9' rx='5' fill='%2389a2bf'/%3E%3Crect x='342' y='86' width='10' height='42' rx='5' fill='%23859ebc'/%3E%3Crect x='361' y='83.8' width='10' height='44.2' rx='5' fill='%23819bb8'/%3E%3Crect x='380' y='81.6' width='10' height='46.4' rx='5' fill='%237d97b5'/%3E%3Crect x='399' y='79.3' width='10' height='48.7' rx='5' fill='%237993b1'/%3E%3Crect x='418' y='76.9' width='10' height='51.1' rx='5' fill='%23758fae'/%3E%3Crect x='437' y='74.5' width='10' height='53.5' rx='5' fill='%23718baa'/%3E%3Crect x='456' y='72' width='10' height='56' rx='5' fill='%236d87a7'/%3E%3Crect x='475' y='69.4' width='10' height='58.6' rx='5' fill='%236983a3'/%3E%3Crect x='494' y='66.8' width='10' height='61.2' rx='5' fill='%23657fa0'/%3E%3Crect x='513' y='64.1' width='10' height='63.9' rx='5' fill='%23617c9c'/%3E%3Crect x='532' y='61.3' width='10' height='66.7' rx='5' fill='%235d7899'/%3E%3Crect x='551' y='58.5' width='10' height='69.5' rx='5' fill='%23587495'/%3E%3Crect x='570' y='55.6' width='10' height='72.4' rx='5' fill='%23547092'/%3E%3Crect x='589' y='52.7' width='10' height='75.3' rx='5' fill='%23506c8e'/%3E%3Crect x='608' y='49.7' width='10' height='78.3' rx='5' fill='%234c688b'/%3E%3Crect x='627' y='46.7' width='10' height='81.3' rx='5' fill='%23486487'/%3E%3Crect x='646' y='43.6' width='10' height='84.4' rx='5' fill='%23446184'/%3E%3Crect x='665' y='40.4' width='10' height='87.6' rx='5' fill='%23405d80'/%3E%3Crect x='684' y='37.2' width='10' height='90.8' rx='5' fill='%233c597d'/%3E%3Crect x='703' y='34' width='10' height='94' rx='5' fill='%23385579'/%3E%3Crect x='722' y='30.6' width='10' height='97.4' rx='5' fill='%23345176'/%3E%3Crect x='741' y='27.3' width='10' height='100.7' rx='5' fill='%23304d72'/%3E%3Crect x='760' y='23.9' width='10' height='104.1' rx='5' fill='%232b496f'/%3E%3Crect x='779' y='20.4' width='10' height='107.6' rx='5' fill='%2327456b'/%3E%3Crect x='798' y='16.9' width='10' height='111.1' rx='5' fill='%23234268'/%3E%3Crect x='817' y='13.3' width='10' height='114.7' rx='5' fill='%231f3e64'/%3E%3Crect x='836' y='9.7' width='10' height='118.3' rx='5' fill='%231b3a61'/%3E%3Crect x='855' y='6' width='10' height='122' rx='5' fill='%2317365d'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (max-width: 640px) { .mv-rampa { height: 72px; } }

.mv-escala {
  display: flex; align-items: center; gap: 16px; margin: -8px 0 34px;
  font-size: 14px; font-weight: 600; color: #17365d;
}
.mv-escala-linea {
  flex: 1; height: 6px; border-radius: 6px; position: relative;
  background: linear-gradient(90deg, #cfe0f4, #1159af, #17365d);
}
.mv-escala-linea::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  border-left: 10px solid #17365d; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

.mv-modelos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  align-items: stretch; grid-template-rows: auto auto auto;
}
.mv-nivel {
  display: grid; grid-row: span 3; grid-template-rows: subgrid;
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0 30px;
}
.mv-nivel:first-child { padding-left: 0; }
.mv-nivel:last-child { padding-right: 0; }
.mv-nivel + .mv-nivel { border-left: 1px solid #d6e0ec; }

.mv-cab { background: none; border: 0; padding: 0; min-height: 0; margin-bottom: 18px; }
.mv-cab::before {
  content: attr(data-n); display: block;
  font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.03em; margin-bottom: 14px;
}
.mv-n1 .mv-cab::before { color: #7fb6ec; }
.mv-n2 .mv-cab::before { color: #1f7fe0; }
.mv-n3 .mv-cab::before { color: #17365d; }

.mv-etq { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #1159af; margin-bottom: 6px; }
.mv-cab h3 { margin: 0 0 4px; font-size: 21px; font-weight: 600; color: #17365d; line-height: 1.25; }
.mv-sub { display: block; margin: 0; font-size: 15px; font-weight: 600; color: #5a6b80; }

.mv-cuerpo { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 0; border: 0; }
.mv-cuerpo > p:first-child { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: #5a6b80; }

.mv-ideal {
  margin: auto 0 0; padding: 16px 0 0; min-height: 0;
  background: none; border-radius: 0; border-top: 1px solid #d6e0ec;
  font-size: 14.5px; line-height: 1.55; color: #5a6b80;
}
.mv-ideal strong {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #17365d; margin-bottom: 4px;
}

@media (max-width: 1024px) {
  .mv-escala { display: none; }
}
@media (max-width: 900px) {
  .mv-modelos { grid-template-columns: 1fr; gap: 34px; }
  .mv-nivel, .mv-nivel:first-child, .mv-nivel:last-child { padding: 0; grid-row: auto; display: block; }
  .mv-nivel + .mv-nivel { border-left: 0; border-top: 1px solid #d6e0ec; padding-top: 30px; }
  .mv-cuerpo { display: block; }
}

/* ============================================================
   PORTADA — Casos de éxito en carrete, maqueta v5 (06-10-2026)
   Un caso cada vez: texto a la izquierda, foto a la derecha, y
   debajo flechas con el contador «3 / 13», barra de avance y botón
   «Pausar», que pinta el JS de functions.php (aldia_casos_carrete).
   Avanza solo cada 6 s.
   Sustituye a la rejilla de seis tarjetas, que queda oculta.
   Va al final de style.css.
   ============================================================ */

.kb-row-layout-id144_e79d86-8e { display: none; }

.cx { position: relative; display: grid; grid-template-columns: 1fr; }

.cx-diapo {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  transition: opacity .45s ease;
}
.cx-diapo.cx-on { opacity: 1; visibility: visible; }

@media (min-width: 901px) {
  .cx-diapo .cx-foto { order: 2; }
  .cx-diapo .cx-txt { order: 1; }
}

.cx-foto { margin: 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #eef3f8; }
.cx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Las tres píldoras: familia, disciplina y sector */
.cx-etq { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font-size: 0; }
.cx-p {
  display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 50px;
  font-size: 13px; font-weight: 600; line-height: 1.25; margin: 0;
}
.cx-p-fam { background: #17365d; color: #fff; }
.cx-p-dis { background: #dceaf9; color: #1159af; }
.cx-p-sec { background: #fff; border: 1px solid #d6e0ec; color: #5a6b80; font-weight: 500; }

.cx-diapo h3 { margin: 0 0 12px; font-size: 27px; font-weight: 600; color: #17365d; line-height: 1.25; }
.cx-txt > p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #5a6b80; }
.cx-res {
  margin: 0 !important; padding-top: 14px; border-top: 1px solid #d6e0ec;
  font-size: 14px; font-style: italic; color: #8a97a8;
}

/* --- mandos --- */
.cx-mandos { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }

.cx-flecha {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid #d6e0ec; background: transparent; color: #17365d; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, opacity .2s;
}
.cx-flecha svg { width: 20px; height: 20px; }
.cx-flecha[disabled] { opacity: .35; cursor: default; }
.cx-flecha:focus-visible { outline: 2px solid #0088f0; outline-offset: 2px; }
/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.cx-flecha:hover, .cx-flecha:focus, .cx-flecha:active { background: transparent; color: #17365d; }

@media (hover: hover) and (pointer: fine) {
  .cx-flecha:not([disabled]):hover { border-color: #1159af; color: #1159af; }
}

@media (max-width: 900px) {
  .cx-diapo { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .cx-mandos { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-diapo { transition: none; }
}

/* Únete pasa a blanco: con el orden nuevo queda pegada a «Cómo trabajamos» */
.kb-row-layout-id144_427a8e-cb { background: #fff; }

/* Rótulo de sección suelto, para que el margen inferior cuente */
.rotulo-suelto { display: inline-block; }

/* ============================================================
   PORTADA — Ajustes contra la maqueta v5          (06-10-2026)
   ============================================================ */

/* Los rótulos pegados a su titular, con el filete del ancho del texto */
.rotulo-suelto { display: block; width: max-content; }
.rotulo-suelto + h2 { margin-top: 0 !important; margin-bottom: 8px !important; }

/* Las entradillas, a la izquierda y al ancho de la maqueta */
.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p,
.kb-row-layout-id144_0c0557-0d > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p,
.kb-row-layout-id144_861e64-22 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p,
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p {
  text-align: left !important; max-width: 62ch;
  margin-left: 24px !important; margin-right: 24px !important;
}

/* Las franjas, a todo el ancho. Las secciones van anidadas dentro de dos
   filas contenedoras que les meten 24 px por los lados; se los quitamos a
   ellas y se los devolvemos solo al contenido que no es una fila. */
.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap,
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap { padding-left: 0 !important; padding-right: 0 !important; }
.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > :not(.wp-block-kadence-rowlayout),
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > :not(.wp-block-kadence-rowlayout) {
  margin-left: 24px; margin-right: 24px;
}

/* ============================================================
   PORTADA — El contenido vuelve al contenedor      (06-10-2026)
   Las franjas siguen ocupando todo el ancho, pero el contenido
   de dentro se queda en los 1200 del sitio.
   ============================================================ */

.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > :not(.wp-block-kadence-rowlayout):not(.rotulo-suelto),
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > :not(.wp-block-kadence-rowlayout):not(.rotulo-suelto) {
  max-width: 1200px;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px; padding-right: 24px;
}

/* El rótulo se encoge al ancho de su texto, así que no se puede centrar
   con margin:auto; se alinea a mano con el borde del contenedor. */
.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .rotulo-suelto,
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .rotulo-suelto {
  margin-left: max(24px, calc(50% - 576px)) !important;
}

/* La fila de Quiénes somos la creé a mano y le faltaba el ancho máximo */
.kb-row-layout-id144_a1c4e7-71 > .kt-row-column-wrap {
  max-width: 1200px; margin-left: auto; margin-right: auto;
}

/* ============================================================
   PORTADA — Franjas blancas entre bandas              (06-10-2026)
   Las secciones son celdas de una rejilla (.kt-row-column-wrap)
   que Kadence genera con gap: 32px y padding: 24px 0. Ese hueco
   de 32 px es la franja blanca que se ve entre bandas, y el
   relleno de 24 px el blanco de arriba y de abajo del conjunto.
   Se quitan los dos y el aire vertical se le devuelve a cada
   sección, que es donde debe estar.
   Va al final de style.css.
   ============================================================ */

.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap,
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap {
  gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.kb-row-layout-id144_f222a5-3f > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id144_533e4f-e3 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

/* ============================================================
   PORTADA — Cuatro correcciones                     (06-10-2026)
   1. Trabaja con nosotros en blanco
   2. Países con el aspecto de la maqueta v5
   3. Solicita un presupuesto, centrado
   4. Píldoras de Ingeniería y Tecnología alineadas con el titular
   Va al final de style.css.
   ============================================================ */

/* --- 1. Trabaja con nosotros: fondo blanco -------------------
   Venía en #eef3f8, el mismo que Cómo trabajamos, que va justo
   encima: dos bandas seguidas con el mismo fondo. En blanco
   queda separada de la anterior y de la franja marino del pie. */
.kb-row-layout-id144_427a8e-cb { background-color: #fff !important; }

/* --- 2. Países: letras y puntos como en la maqueta -----------
   Estaban en gris secundario a peso normal y con los puntos
   grises. En la maqueta van en marino, algo mayores, y los
   puntos en azul claro. */
.marquesina .linea-paises li {
  font-size: 15.5px;
  font-weight: 500;
  color: #17365d;
}
.marquesina .linea-paises li:not(:last-child)::after {
  width: 5px; height: 5px;
  background: #00bdfc;
  opacity: .85;
}
/* El botón de pausa era un círculo blanco que tapaba los últimos
   países. En la maqueta son solo las dos barritas, discretas.
   Si prefieres el círculo, borra estas dos reglas. */
.marquesina .pausa { background: transparent !important; border: 0 !important; opacity: .35; }
.marquesina:hover .pausa, .marquesina .pausa:focus-visible { opacity: 1; }

/* --- 3. Solicita un presupuesto: centrado --------------------
   La regla que alinea a la izquierda los titulares de Qué
   hacemos cuelga de la fila contenedora, así que alcanzaba
   también al titular del cierre. Se le devuelve el centro. */
.kb-row-layout-id144_d94947-7c h2,
.kb-row-layout-id144_d94947-7c p { text-align: center !important; }

/* Su botón «Escríbenos» no cambiaba al pasar el ratón: el fondo blanco se lo
   pone el editor (color de la paleta) con !important. Mismo azul claro que los
   botones de los demás cierres (1.2.48). */
@media (hover: hover) and (pointer: fine) {
  .kb-row-layout-id144_d94947-7c .wp-block-button__link { transition: background-color .2s; }
  .kb-row-layout-id144_d94947-7c .wp-block-button__link:hover { background-color: #dbe6f2 !important; }
}

/* --- 4. Píldoras alineadas con el titular --------------------
   La sangría de 34 px es la que el tema le pone a cualquier
   <ul>. Sin ella, la primera píldora arranca a la misma altura
   que el titular de la tarjeta. */
.v5-chips {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* ============================================
   CABECERA — SELECTOR DE IDIOMA  (06-10-2026)
   Lo pinta el shortcode [aldia_idiomas] de functions.php,
   puesto en un elemento HTML del constructor de Kadence
   (escritorio y móvil). El JS añade .abierto al desplegar.
   Kadence da estilo global a todo <button> (fondo, color,
   sombra y relleno, también en :hover / :focus): aquí se
   anula con dos clases, que pesan más que «button:hover».
   ============================================ */
.aldia-idiomas {
  position: relative;
  display: flex;
  align-items: center;
}
.aldia-idiomas .aldia-idiomas-btn,
.aldia-idiomas .aldia-idiomas-btn:hover,
.aldia-idiomas .aldia-idiomas-btn:focus,
.aldia-idiomas .aldia-idiomas-btn:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1.5px solid #00BDFC;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.aldia-idiomas .aldia-idiomas-btn:focus-visible {
  outline: 2px solid #00BDFC;
  outline-offset: 3px;
}
.aldia-idiomas-globo { width: 17px; height: 17px; flex: none; }
.aldia-idiomas-flecha { width: 10px; height: 10px; flex: none; opacity: .85; transition: transform .2s; }
.aldia-idiomas.abierto .aldia-idiomas-flecha { transform: rotate(180deg); }

/* Desplegable, alineado a la derecha de la píldora: a la
   izquierda se salía de la pantalla a 1280 px */
.aldia-idiomas .aldia-idiomas-lista {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  min-width: 150px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: #0F2440;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.aldia-idiomas.abierto .aldia-idiomas-lista { display: block; }
.aldia-idiomas .aldia-idiomas-lista li { margin: 0; padding: 0; }
.aldia-idiomas .aldia-idiomas-lista a,
.aldia-idiomas .aldia-idiomas-lista span {
  display: block;
  padding: 12px 20px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
/* Sin enlace (EN / FR hasta que haya Polylang) */
.aldia-idiomas .aldia-idiomas-lista span { cursor: default; }
/* Idioma actual */
.aldia-idiomas .aldia-idiomas-lista [aria-current] {
  color: #00BDFC;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .aldia-idiomas .aldia-idiomas-btn:hover { background: rgba(0, 189, 252, .12); }
  .aldia-idiomas .aldia-idiomas-lista a:hover { color: #00BDFC; }
}
/* Móviles de 320 px: sin el globo para que quepa junto a la hamburguesa */
@media (max-width: 359px) {
  .aldia-idiomas-globo { display: none; }
}

/* ============================================
   QUIÉNES SOMOS — FICHAS DE SECTOR QUE SE DAN LA VUELTA (07-10-2026)
   Cada ficha es un <button class="qs-sector"> con dos caras dentro de
   .qs-sector-giro: .qs-sector-cara (foto + nombre) y .qs-sector-dorso
   (resumen del sector). El JS de functions.php alterna .girada y
   aria-pressed. Kadence da estilo global a <button>: se anula con
   «.qs-sectores .qs-sector», que pesa más que «button:hover».
   ============================================ */
.qs-sectores .qs-sector,
.qs-sectores .qs-sector:hover,
.qs-sectores .qs-sector:focus,
.qs-sectores .qs-sector:active {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #17365d;
  font: inherit;
  text-align: inherit;
  text-transform: none;
  cursor: pointer;
  perspective: 1200px;
}
/* Las fichas de una misma fila, igual de altas aunque un dorso pida más */
.qs-sectores > li { display: flex; }
.qs-sector-giro {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.qs-sector-cara,
.qs-sector-dorso {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.qs-sector-cara { position: relative; display: flex; flex-direction: column; }
.qs-sector-cara .qs-sector-foto { flex: 1 0 auto; }
.qs-sector-dorso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
  background: #17365d;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  transform: rotateY(180deg);
  box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 10px 28px rgba(23,54,93,.10);
}
.qs-sector-dorso strong { font-size: 17px; font-weight: 600; line-height: 1.25; color: #fff; }
.qs-sector.girada .qs-sector-giro { transform: rotateY(180deg); }

/* Aviso de que la ficha gira: círculo blanco arriba a la derecha */
.qs-sector-aviso {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #17365d;
  box-shadow: 0 2px 8px rgba(23,54,93,.18);
}
.qs-sector-aviso svg { width: 16px; height: 16px; }

.qs-sectores .qs-sector:focus-visible { outline: 3px solid #1159af; outline-offset: 4px; }

/* Móvil: la ficha es pequeña; el nombre ya está en la cara, el dorso solo lleva el texto */
@media (max-width: 640px) {
  .qs-sector-dorso { padding: 10px 12px; font-size: 13px; line-height: 1.38; }
  .qs-sector-dorso strong { display: none; }
  .qs-sector-aviso { top: 6px; right: 6px; width: 26px; height: 26px; }
}

/* Sin animación: la ficha cambia de cara sin girar */
@media (prefers-reduced-motion: reduce) {
  .qs-sector-giro { transition: none; }
}

/* ============================================
   QUIÉNES SOMOS — TRAYECTORIA: CINCO CIFRAS Y TRES TARJETAS (07-10-2026)
   Las cifras son las de la portada (cinco, antes cuatro). En tableta
   van 3 + 2 centradas y en móvil 2 + 2 + 1; antes, en móvil, salían
   cuatro columnas de 68 px.
   La línea de tiempo pasa de cuatro hitos a tres tarjetas (2015 · Hoy ·
   Mañana): clase .qsB-tres en la lista. Se quita la sangría de 34 px
   que el tema pone a cualquier lista.
   ============================================ */
.qsB-cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .qsB-cifras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .qsB-cifras > div { grid-column: span 2; }
  .qsB-cifras > div:nth-child(4) { grid-column: 2 / span 2; }
  .qsB-cifras > div:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 640px) {
  .qsB-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .qsB-cifras > div,
  .qsB-cifras > div:nth-child(4) { grid-column: auto; }
  .qsB-cifras > div:nth-child(5) { grid-column: 1 / -1; }
}
.qs-trayectoria .qsB-hitos { padding-left: 0; }
@media (min-width: 901px) {
  .qsB-hitos.qsB-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================
   ALDIA MOBILITY — «EL PROCESO» CON TARJETAS DE EMBARQUE (07-10-2026)
   Maqueta: maqueta-mobility-proceso.html, opción A. Sustituye al avión
   con la línea, que se queda solo en Por qué ALDIA.
   Cada paso es una tarjeta (.eb-billete) con resguardo troquelado.
   La animación reutiliza el JS de .pq-aparece de functions.php: al
   entrar en pantalla añade .visible y las tarjetas «se reparten».
   Sin JS o con «reducir movimiento» se ven quietas.
   Dos clases (.mv-ruta-sec ...) para ganar al padding de 34 px que el
   tema pone a las listas.
   ============================================ */
.mv-ruta-sec .eb-billetes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 30px;
}
.mv-ruta-sec .eb-billete {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  min-height: 196px;
  margin: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 14px 34px rgba(23,54,93,.10);
  transform: rotate(var(--giro, 0deg));
}
.mv-ruta-sec .eb-billete:nth-child(odd) { --giro: -1deg; }
.mv-ruta-sec .eb-billete:nth-child(even) { --giro: 1deg; }
/* Muescas del troquel, del color del fondo de la sección */
.mv-ruta-sec .eb-billete::before,
.mv-ruta-sec .eb-billete::after {
  content: "";
  position: absolute;
  left: 92px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff; /* el fondo de la sección, blanco desde la 1.2.48 */
}
.mv-ruta-sec .eb-billete::before { top: -12px; }
.mv-ruta-sec .eb-billete::after { bottom: -12px; }
.eb-resguardo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(160deg, #17365d 0%, #1159af 100%);
  color: #fff;
}
.mv-ruta-sec .eb-billete:last-child .eb-resguardo { background: linear-gradient(160deg, #0f2440 0%, #17365d 100%); }
.eb-resguardo small { font-size: 11px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.eb-resguardo b { font-size: 38px; font-weight: 700; line-height: 1; }
.eb-resguardo svg { width: 26px; height: 26px; color: #00bdfc; }
.eb-cuerpo { position: relative; padding: 22px 26px 22px 30px; border-left: 2px dashed #c5d3e3; }
.eb-quien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1159af;
}
.eb-quien span { padding: 2px 9px; border-radius: 50px; background: #e6f0fa; color: #17365d; letter-spacing: .06em; }
.mv-ruta-sec .eb-billete h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; color: #17365d; }
.mv-ruta-sec .eb-billete p { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.6; color: #5a6b80; }
/* «Código de barras» decorativo */
.eb-barras {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 64px;
  height: 22px;
  opacity: .35;
  background: repeating-linear-gradient(90deg, #17365d 0 2px, transparent 2px 4px, #17365d 4px 5px, transparent 5px 8px);
}

/* Animación: las tarjetas se reparten una tras otra */
.js-anim .eb-billetes .pq-aparece.visible { animation: eb-repartir .7s cubic-bezier(.2, 1.2, .4, 1) both; }
@media (min-width: 901px) {
  .js-anim .eb-billetes .pq-aparece:nth-child(2).visible { animation-delay: .35s; }
  .js-anim .eb-billetes .pq-aparece:nth-child(3).visible { animation-delay: .7s; }
  .js-anim .eb-billetes .pq-aparece:nth-child(4).visible { animation-delay: 1.05s; }
}
@keyframes eb-repartir {
  0%   { opacity: 0; transform: translate(60px, 30px) rotate(6deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--giro, 0deg)); }
}

@media (max-width: 900px) {
  .mv-ruta-sec .eb-billetes { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mv-ruta-sec .eb-billete { grid-template-columns: 82px 1fr; }
  .mv-ruta-sec .eb-billete::before,
  .mv-ruta-sec .eb-billete::after { left: 70px; }
  .eb-resguardo b { font-size: 30px; }
  .eb-cuerpo { padding: 18px 18px 52px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .eb-billetes .pq-aparece.visible { animation: none; }
}

/* Quiénes somos · Dónde estamos sin entradilla: mismo aire que el resto de secciones (07-10-2026) */
.qs-donde h2 + .qs-ciudades { margin-top: 32px; }

/* ============================================
   IA — AJUSTES DE MAQUETACIÓN (07-10-2026)
   Casos en tarjetas, márgenes que el tema pisaba,
   tarjeta de LLMOps sin hueco y fondos alternos.
   ============================================ */

/* Casos: tarjetas blancas con el color de cada caso arriba.
   La regla general de .pq-form (con !important) las dejaba planas. */
.ia-casos .pq-form {
  background: #fff !important;
  border-top: 4px solid var(--c) !important;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06) !important;
}
.ia-casos .pq-form-cuerpo { padding: 26px 30px 30px; }
@media (max-width: 600px) {
  .ia-casos .pq-form-cuerpo { padding: 22px 20px 24px; }
}

/* El sector, como rótulo pequeño en el color del caso */
.ia-casos .pq-form-cab { gap: 10px; margin-bottom: 10px; color: var(--c); }
.ia-casos .pq-form-cab .pq-icono { width: 20px; height: 20px; }
.ia-casos .pq-form-cab strong {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c);
}

/* Título, párrafos y píldoras con los márgenes del diseño */
.ia-casos .ia-caso-h { margin: 0 0 12px; }
.ia-casos .pq-form p + p { margin-top: 8px; }
.ia-casos .ia-res { margin: 18px 0 0; padding-left: 0; }

/* Tecnología: la tarjeta no reparte el alto sobrante entre título y texto */
.ia-stack .pq-cond { align-content: start; }

/* Fondos alternos: Tecnología y Método eran las dos blancas */
.ia-metodo { background: #eef3f8; }
.ia-equipo { background: #fff; }

/* Método: cuatro pasos con puntos de decisión (07-10-2026)
   Maqueta: maqueta-ia-metodo.html, opción A sin rótulo. Entre cada
   dos tarjetas, un rombo con ✓ sobre una línea discontinua. La
   aparición la hace el JS de .pq-aparece (90 ms entre hermanos).
   Sustituye a las cuatro columnas de la versión 1.2.3. */
.ia-metodo .md-pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1fr; align-items: stretch;
}
.ia-metodo .md-paso {
  display: flex; flex-direction: column; margin: 0;
  background: #fff; border-radius: 16px; padding: 26px 24px 28px;
  box-shadow: 0 1px 3px rgba(23,54,93,.08), 0 8px 24px rgba(23,54,93,.06);
}
.md-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.md-ico { width: 48px; height: 48px; border-radius: 14px; background: #e4eefb; color: #1159af; display: grid; place-items: center; }
.md-ico svg { width: 24px; height: 24px; }
.md-num { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #8a97a8; }
.ia-metodo .md-paso strong { display: block; font-size: 19px; line-height: 1.3; color: #17365d; margin-bottom: 8px; }
.ia-metodo .md-paso p { margin: 0; font-size: 15px; line-height: 1.6; color: #5a6b80; }
.ia-metodo .md-paso:last-child .md-ico { background: #17365d; color: #fff; }

/* Punto de decisión entre pasos */
.ia-metodo .md-puerta { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; }
.md-puerta::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #b9cbe0; }
.md-rombo {
  position: relative; width: 30px; height: 30px; transform: rotate(45deg);
  border-radius: 7px; background: #fff; border: 2px solid #1d7a5a;
  display: grid; place-items: center; box-shadow: 0 0 0 6px #eef3f8;
}
.md-rombo svg { width: 15px; height: 15px; transform: rotate(-45deg); color: #1d7a5a; }

/* Móvil y tableta: en columna, con la línea en vertical */
@media (max-width: 900px) {
  .ia-metodo .md-pasos { grid-template-columns: 1fr; }
  .ia-metodo .md-puerta { height: 56px; }
  .md-puerta::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed #b9cbe0; transform: translateX(-1px); }
}

/* Casos de éxito: botón «Pausar / Reanudar» del avance automático (07-10-2026).
   Lo añade el JS de functions.php debajo de la barra de avance; sin JS no aparece. */
.cx-pausa {
  display: flex; align-items: center; gap: 7px;
  width: fit-content; margin: 14px auto 0; padding: 6px 15px;
  border: 1px solid #d6e0ec; border-radius: 50px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; color: #5a6b80;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.cx-pausa svg { width: 13px; height: 13px; flex: none; }
.cx-pausa:focus-visible { outline: 2px solid #0088f0; outline-offset: 2px; }
/* Sin el azul que Kadence pone a todos los <button> al pasar el ratón,
   al pulsarlos y mientras tienen el foco (1.2.47). */
.cx-pausa:hover, .cx-pausa:focus, .cx-pausa:active { background: transparent; color: #5a6b80; }
@media (hover: hover) and (pointer: fine) {
  .cx-pausa:hover { border-color: #1159af; color: #1159af; }
}

/* Móvil y tableta: foto y texto juntos arriba; el alto que sobra (lo marca
   el caso más largo) queda debajo y no entre la foto y el texto */
@media (max-width: 900px) {
  .cx-diapo { align-content: start; }
}

/* IA · cabecera en móvil: encuadre a la derecha para que se vea el móvil
   con el chip de IA (la foto está a 3:1; a 220 px de alto mide 665 px).
   El color de fondo es el del borde izquierdo de la foto, para que no se
   note el hueco en pantallas de 666 a 900 px. (08-10-2026) */
@media (max-width: 900px) {
  .ia-cab-foto {
    background-position: 85% top !important;
    background-color: #2c3c49 !important;
  }
}

/* ===== Inicio · Casos de éxito: píldoras y texto alineados con la foto ===== */
.cx-diapo { align-items: start; }

/* Anula el margen inferior que Kadence pone a las figuras (.single-content figure): en móvil separaba 56 px la foto de las píldoras */
.cx-diapo .cx-foto { margin: 0; }

/* «El valor generado» con el mismo estilo que «El reto» y «Lo que hicimos» (sin cursiva) */
.cx-res { font-style: normal; }

/* ===== Inicio · Entradillas de Sectores y Casos de éxito alineadas con su titular =====
   La regla «Las entradillas, a la izquierda y al ancho de la maqueta» les daba
   24 px de margen a los lados; en estas dos secciones el titular y el contenido
   no lo llevan, así que la entradilla quedaba desplazada 24 px a la derecha. (08-10-2026) */
.kb-row-layout-id144_0c0557-0d > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p,
.kb-row-layout-id144_861e64-22 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Inicio · Quiénes somos con el mismo margen lateral que el resto en móvil =====
   La regla de la sección le daba 20 px por los lados por debajo de 900 px; las
   demás secciones van a 24 px y su texto quedaba 4 px más a la izquierda. (08-10-2026) */
@media (max-width: 900px) {
  .qs-portada > .kt-row-column-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ===== Revisión de diseño (08-10-2026) ===================================== */

/* Inicio · Cifras: el número centrado bajo el icono. El «+» queda colgado a la
   izquierda; un «+» invisible a la derecha compensa su ancho */
.pc-dig::after {
  content: "+";
  visibility: hidden;
  margin-left: 2px;
  font-size: .5em;
  font-weight: 600;
  line-height: 1;
  vertical-align: .22em;
}

/* Inicio · Cómo trabajamos: la rampa de barras al ancho del texto (antes
   ocupaba también los 24 px de relleno de cada lado) */
.mv-rampa {
  background-origin: content-box;
  background-clip: content-box;
}

/* Cabecera: 24 px por los lados, como el contenido (Kadence la tenía a 0 y en
   móvil el logo y el menú tocaban el borde), y logo de 280 a 200 px para que
   respire (17 px arriba y abajo en vez de 8) */
#masthead .site-main-header-wrap .site-header-row-container-inner > .site-container {
  padding-left: 24px;
  padding-right: 24px;
}
#masthead .site-branding a.brand img.svg-logo-image { width: 200px; }

/* ===== Marca IA en SVG (sale del logo vectorial): nítida y sin halo blanco (08-10-2026) ===== */

/* Menú: el PNG traía hueco debajo de la marca; con el SVG se sube 4 px para que
   siga apoyada en la línea base del texto del menú, como ahora */
.main-navigation li.nav-ia > a {
  background-image: url("../../uploads/2026/10/aldia-marca-ia.svg");
  background-position: center calc(50% - 4px);
}

/* Banda «IA que llega a producción»: mismo tamaño de marca que antes (el PNG
   medía 54 px con 14 vacíos debajo) y apoyada en la línea base del titular */
.v5-ia-cab { align-items: baseline; }
.v5-ia-cab img { height: 40px; }

/* ===== Por qué ALDIA · Movilidad internacional: la lista sin sangrado =====
   La regla del tema .single-content ul { padding-left: 2em } pesa más que la
   nuestra (.pq-movil-lista { padding: 0 }) y la metía 34 px (08-10-2026) */
.single-content .pq-movil-lista { padding-left: 0; }

/* ===== Listas sin el sangrado del tema =====
   La regla del tema .single-content ul { padding-left: 2em } pesa más que las
   nuestras y metía 34 px a estas listas. Se les devuelve el valor previsto:
   0, salvo los servicios de Quiénes somos, que van a 28 px como el titular
   de su tarjeta. (08-10-2026) */
.single-content .v5-ia-lineas,
.single-content .pq-pasos,
.single-content .pq-linea,
.single-content .qs-sectores,
.single-content .od-lista,
.single-content .sv-otras-lista { padding-left: 0; }
.single-content .qs-servicios { padding-left: 28px; }

/* ===== Ingeniería · «Otras disciplinas»: 14 px entre el titular y la lista =====
   El tema (.single-content ul) anulaba el margen superior de la lista y la
   dejaba a 6 px del titular. (08-10-2026) */
.single-content .sv-otras-lista { margin-top: 14px; }

/* ===== Revisión de diseño (2) (09-10-2026) ================================= */

/* Quiénes somos, Por qué ALDIA, Movilidad (e IA, que usa la misma entradilla):
   las entradillas ocupan todo el ancho del contenido, hasta el final de la
   línea del rótulo (antes, tope de 64 caracteres) */
.pq-entradilla { max-width: none; }

/* Tecnología · Nuestro enfoque (6 páginas): sin la barra azul ni el sangrado;
   el texto empieza en la misma vertical que el rótulo */
.sv-enfoque p:not(.rotulo-seccion) { padding-left: 0; border-left: 0; }

/* ===== Inicio · Sectores con más contenido (09-10-2026) =====
   Pestañas en rejilla de 4 × 3 (3 columnas en tableta y 2 en móvil), frase
   destacada bajo el título y franja de «Áreas de trabajo» a todo el ancho
   del panel. El contenido lo pinta aldia_sectores_pestanas() en functions.php */
.op2-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.op2-tab { min-width: 0; }

.op2-panel .op2-lema { font-size: 19px; line-height: 1.5; font-weight: 500; color: #17365d; margin: 0 0 18px; }

#sp-areas { grid-column: 1 / -1; margin: 4px 0 0; padding: 28px 0 0; border-top: 1px solid #d6e0ec; animation: aparecer .4s ease; }
#sp-areas .sobretitulo { margin: 0 0 16px !important; }
#sp-areas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 36px; }
#sp-areas li { position: relative; margin: 0; padding: 0 0 0 32px; font-size: 16px; line-height: 1.45; font-weight: 500; color: #17365d; }
#sp-areas li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #e4eefb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231159af' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}

@media (max-width: 1024px) {
  .op2-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #sp-areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}
@media (max-width: 640px) {
  .op2-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op2-panel .op2-lema { font-size: 17px; }
  #sp-areas ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #sp-areas { animation: none; }
}

/* ===== Inicio · Sectores: pastillas del mismo alto en tableta y móvil =====
   Con los nombres nuevos, algunas pastillas pasan a dos líneas; se les da
   un alto mínimo común y, en móvil, un poco menos de letra y de relleno
   para que «Deporte y entretenimiento» no llegue a tres líneas. (09-10-2026) */
@media (max-width: 1024px) {
  .op2-tab { min-height: 54px; line-height: 1.25; }
}
@media (max-width: 640px) {
  .op2-tab { min-height: 50px; padding: 5px 10px 5px 5px; gap: 7px; font-size: 13px; }
}
@media (max-width: 400px) {
  .op2-tab { padding-right: 8px; gap: 6px; font-size: 12.5px; }
}

/* ===== Inicio · Sectores: pastillas en dos filas en escritorio =====
   Seis columnas que se ajustan a la etiqueta más larga de cada una y se
   reparten el ancho; letra a 14 px e icono a 30 px para que quepan en una
   línea. En tableta y móvil siguen las 3 y 2 columnas. (09-10-2026) */
@media (min-width: 1025px) {
  .op2-tabs { grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 10px 6px; }
  .op2-tab { min-height: 46px; padding: 6px 12px 6px 6px; gap: 8px; font-size: 14px; line-height: 1.25; }
  .op2-tab-ico { width: 30px; height: 30px; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .op2-tab { padding-right: 9px; gap: 6px; font-size: 13px; }
  .op2-tab-ico { width: 28px; height: 28px; }
}

/* ===== Espacios sobrantes y que faltaban (09-10-2026) ===================== */

/* Inicio · Sectores: la foto traía 32 px de margen del tema (.single-content
   figure) que, sumados al hueco del panel, separaban 92 px la franja de
   «Áreas de trabajo» */
.op2-panel .op2-foto { margin: 0; }
@media (min-width: 901px) {
  .op2-panel { row-gap: 32px; }
}

/* Por qué ALDIA · Tus primeras semanas: en escritorio la foto ocupa toda la
   altura del texto, desde el rótulo hasta el final de la lista */
@media (min-width: 1025px) {
  .pq-semanas .pq-foto { margin: 0; aspect-ratio: auto; height: 100%; min-height: 360px; }
}

/* Por qué ALDIA · Movilidad internacional: la fila tenía 0 px de relleno
   arriba y la foto quedaba pegada a la sección anterior; 76 px, como abajo */
.kb-row-layout-id269_2ee304-09 > .kt-row-column-wrap { padding-top: 76px !important; }

/* Quiénes somos · Compromiso: con dos columnas, la foto ocupa toda la altura
   del texto, desde el rótulo hasta la línea de debajo del punto 03 · 1.2.25.
   «width > 900px» y no «min-width: 901px»: con el zoom al 125 % la ventana
   puede medir 900,8 px y no entraría ni en esta regla ni en la de móvil. */
@media (width > 900px) {
  .qs-comp-sec .qs-foto { margin: 0; aspect-ratio: auto; align-self: stretch; }
}

/* Fotos de dos columnas centradas en alto con el texto · 1.2.26.
   Kadence pone 32 px de margen debajo de cada figura (.single-content figure),
   que con «align-items: center» subía la foto 16 px y, cuando la foto era más
   alta que el texto, añadía 32 px al final de la sección. Solo con dos columnas:
   en móvil ese margen separa la foto del texto y se queda.
   IA (Quién lo hace) · Movilidad (¿A qué países…?) · Por qué ALDIA (Movilidad
   internacional) · Inicio (Una consultora… y Únete a nosotros). */
@media (width > 900px) {
  .ia-equipo .pq-foto,
  .mv-donde .pq-foto,
  .pq-movil-sec .pq-movil-foto,
  .qs-portada .v5-qs-foto,
  .seccion-unete .v5-ub-foto { margin: 0; }
}

/* IA · Quién lo hace: con dos columnas, la foto ocupa toda la altura del texto,
   desde el rótulo hasta la línea de debajo del punto 03, como Compromiso en
   Quiénes somos. Se recortan los lados de la foto (decidido el 09-10-2026).
   El margen ya lo quita la regla de la 1.2.26 · 1.2.27 */
@media (width > 900px) {
  .ia-equipo .pq-foto { aspect-ratio: auto; align-self: stretch; }
}

/* ============================================================
   Inicio · Casos de éxito, nueva versión · 1.2.29 (13-10-2026)
   ============================================================ */

/* Con dos columnas, la foto de cada caso mide lo mismo que su texto,
   desde las píldoras hasta el final de «El valor generado».
   - align-self: start → cada caso tiene su propio alto (si no, todos
     tomarían el del caso más largo).
   - La imagen va en absoluto para que no imponga su alto 16:10: así,
     si el texto es más bajo que la foto, la foto también encoge.
   En móvil la foto sigue en 16:10 encima del texto. */
@media (width > 900px) {
  .cx-diapo { align-self: start; align-items: stretch; }
  .cx-diapo .cx-foto { aspect-ratio: auto; position: relative; }
  .cx-diapo .cx-foto img { position: absolute; inset: 0; }
}

/* Mandos nuevos: contador «3 / 13» entre las flechas y una barra de avance.
   Los pinta el JS de functions.php a partir de los casos que haya, así que
   para añadir un caso basta con pegar su bloque. */
.cx-cuenta {
  margin: 0; min-width: 76px; text-align: center;
  font-size: 15px; font-weight: 600; color: #17365d; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cx-cuenta .cx-total { color: #8a97a8; font-weight: 500; }
.cx-barra {
  width: min(260px, 60%); height: 3px; margin: 16px auto 0;
  background: #d6e0ec; border-radius: 2px; overflow: hidden;
}
.cx-barra span {
  display: block; width: 0; height: 100%;
  background: #17365d; border-radius: 2px; transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cx-barra span { transition: none; }
}

/* ============================================================
   IA · Casos: píldoras a la misma altura · 1.2.31 (13-10-2026)
   ============================================================ */

/* Con dos columnas, las dos tarjetas de cada fila comparten filas
   (subgrid): rótulo, título, «El reto», «La solución» y píldoras
   empiezan a la misma altura que en la tarjeta de al lado. Así las
   píldoras quedan alineadas aunque un texto sea más largo que otro.
   - grid-row: span 5 → una fila por cada pieza de la tarjeta.
   - row-gap: 0 → sin esto heredarían los 30 px entre tarjetas.
   - .ia-res arriba de su fila (1.2.32): si la tarjeta de al lado tiene más
     filas de píldoras, la fila es más alta y, sin esto, las píldoras se
     estiraban hasta llenarla.
   En móvil (una columna) no hace falta y no se aplica. */
@media (width > 900px) {
  .ia-casos .pq-form { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .ia-casos .pq-form-cuerpo { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .ia-casos .ia-res { align-self: start; }
}

/* ============================================================
   OFERTAS DE EMPLEO · Lista de ofertas (.lo-*) · 1.2.33, 1.2.37–1.2.43 (15-10-2026)
   La lista que pinta [aldia_ofertas] (plugin aldia-ofertas): las ofertas que
   crean los recruiters en WordPress (hasta el 15-10-2026 eran las de
   LinkedIn). Cada tarjeta lleva la disciplina (.lo-disc), el puesto, el
   lugar, la modalidad y la fecha con iconos, y el botón «Ver oferta», con un
   degradado que se mueve y ondas que salen de él (opción A de la maqueta,
   14-10-2026), que abre la ficha de la oferta. Solo el botón es enlace; la
   tarjeta se marca al pasar por encima.
   Tres tarjetas por fila en el ordenador, dos en tablet y una en el móvil
   (1.2.43, que quita también la entradilla que llevaban). Si la tarjeta mide
   menos de 540 px, el botón va debajo del texto, al pie. Todas miden lo mismo
   (manda la más alta). 9 ofertas por página; debajo, la paginación
   «1 2 Siguiente →», que sale siempre, también con una sola página («1»).
   Sin animaciones si el equipo pide menos movimiento.
   ============================================================ */
/* scroll-margin: al pasar de página, el ancla deja a la vista el rótulo «Ofertas abiertas» */
.lo-ofertas { max-width: 1180px; margin: 0 auto; scroll-margin-top: 90px; }
/* Dos clases: el margen de los <p> del contenido de Kadence pesa más que una */
.single-content .lo-intro { margin: 0 0 22px; color: #5a6b80; font-size: 16px; }
/* grid-auto-rows 1fr: todas las filas tan altas como la más alta, así todas las tarjetas miden lo mismo */
.lo-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px;
}
/* Tres por fila en el ordenador, dos en tablet y una en el móvil (1.2.43) */
@media (max-width: 1024px) { .lo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En el móvil, una por fila: cada tarjeta mide lo que necesita (1.2.45). Con 1fr
   todas medían lo que la más alta de la lista y quedaba un hueco sobre el botón */
@media (max-width: 640px) { .lo-lista { grid-template-columns: 1fr; grid-auto-rows: auto; } }
/* Kadence sangra todas las listas del contenido: hacen falta dos clases para ganarle */
.single-content .lo-lista { padding-left: 0; margin: 0; }
/* La tarjeta llena su celda, así las dos de una fila miden lo mismo. container-type:
   el botón se coloca según el ancho de la tarjeta, no el de la pantalla */
.single-content .lo-lista li { margin: 0; display: flex; container-type: inline-size; }
.lo-item {
  flex: 1;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
/* La tarjeta se marca al pasar por encima, o al llegar a su botón con el teclado,
   como antes; pero no es un enlace: a la oferta solo se va con «Ver oferta» */
.lo-item:hover, .lo-item:focus-within {
  border-color: #0a66c2; box-shadow: 0 6px 18px rgba(10, 102, 194, .12); background: #fbfdff;
}
/* El texto, arriba: los títulos de una fila quedan a la misma altura */
.lo-txt { flex: 1; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* El título no es un enlace: azul marino, como los títulos de la web */
.lo-titulo { color: #17365d; font-weight: 600; font-size: 17px; line-height: 1.3; }
/* La disciplina, en pequeño y en mayúsculas encima del título (1.2.42) */
.lo-disc { margin-bottom: 2px; color: #1159af; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* Lugar, modalidad y fecha, cada uno con su icono; saltan de línea si no caben */
.lo-datos {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px; color: #5a6b80; font-size: 14px;
}
.lo-dato { display: inline-flex; align-items: center; gap: 6px; }
.lo-dato svg { width: 16px; height: 16px; flex: none; color: #0a66c2; }

/* Botón «Ver oferta»: el degradado se desplaza y salen dos ondas */
@keyframes lo-brillo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes lo-onda {
  0% { box-shadow: 0 0 0 0 rgba(10, 102, 194, .45); }
  75%, 100% { box-shadow: 0 0 0 14px rgba(10, 102, 194, 0); }
}
.lo-boton {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 10px 18px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(110deg, #0a66c2 0%, #2b8de8 45%, #0a66c2 90%); background-size: 220% 100%;
  animation: lo-brillo 3.2s ease-in-out infinite;
}
/* El botón es el enlace: el color y el subrayado de los enlaces del tema no le llegan */
.lo-lista a.lo-boton, .lo-lista a.lo-boton:hover, .lo-lista a.lo-boton:focus { color: #fff; text-decoration: none; }
.lo-boton:focus-visible { outline: 2px solid #0a66c2; outline-offset: 3px; }
.lo-boton::before, .lo-boton::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: lo-onda 2.4s ease-out infinite;
}
.lo-boton::after { animation-delay: 1.2s; }
/* Cada tarjeta a su ritmo, para que no palpiten todas a la vez */
.lo-lista li:nth-child(3n+2) .lo-boton::before { animation-delay: .8s; }
.lo-lista li:nth-child(3n+2) .lo-boton::after { animation-delay: 2s; }
.lo-lista li:nth-child(3n+3) .lo-boton::before { animation-delay: 1.6s; }
.lo-lista li:nth-child(3n+3) .lo-boton::after { animation-delay: 2.8s; }
.lo-boton svg { width: 16px; height: 16px; transition: transform .2s; }
.lo-boton:hover, .lo-boton:focus-visible { background: #004182; animation: none; }
.lo-boton:hover svg { transform: translateX(3px); }

@media (max-width: 600px) {
  .lo-item { padding: 14px 16px; }
}
/* Tarjeta de menos de 540 px (tablet, portátil pequeño, móvil): el botón baja debajo
   del texto, que ocupa todo el ancho y deja el botón al pie de la tarjeta */
@container (max-width: 539px) {
  .lo-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .lo-txt { align-self: stretch; }
  .lo-boton { align-self: flex-start; }
}

/* Paginación: la pinta paginate_links() de WordPress, debajo de la lista */
.lo-pag {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  margin-top: 20px;
}
.lo-pag .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  font-size: 15px; color: #17365d; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.lo-pag a.page-numbers:hover { color: #0a66c2; border-bottom-color: #c9d6e6; }
.lo-pag .page-numbers.current { color: #0a66c2; font-weight: 700; border-bottom-color: #0a66c2; }
.lo-pag .page-numbers.dots { min-width: 0; padding: 0 4px; }

/* Quien pide menos movimiento en su equipo no ve ninguna animación */
@media (prefers-reduced-motion: reduce) {
  .lo-boton, .lo-boton::before, .lo-boton::after { animation: none; }
  .lo-boton svg, .lo-item { transition: none; }
}