/*
 * Estilos de los bloques y patrones propios del tema.
 *
 * Todo lo que se pueda expresar en theme.json va en theme.json. Aquí queda lo que no:
 * rejillas responsivas, recortes de imagen, estados hover y la cabecera. Se usan las
 * variables de theme.json en vez de valores sueltos, para que cambiar la marca en el
 * editor mueva también estos bloques.
 *
 * REGLA DE COLOR: todo texto lleva su color explícito. Este tema se instala junto a
 * plugins que no controlamos (WP Travel Engine trae 400 KB de CSS), y heredar el color
 * del `body` es lo que dejó las reseñas de la portada en un gris casi ilegible.
 */

/* ==================================================================
   RAÍZ — sin hueco entre cabecera, contenido y pie

   WordPress separa los bloques de primer nivel con
   `:where(.wp-site-blocks) > * { margin-block-start: <blockGap> }`. Con la cabecera
   fija y el hero a ancho completo, ese margen salía como una franja blanca entre la
   línea de la cabecera y la foto — el «separador» que no venía de ningún separador.

   Cada sección trae su propio `padding-block`, así que el hueco de la raíz sobra.
   `:where()` tiene especificidad 0: basta una clase para ganarle.
   ================================================================== */
.wp-site-blocks > * { margin-block-start: 0; }

/* ==================================================================
   CABECERA
   ================================================================== */
.ab-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-block-end: 1px solid var(--wp--preset--color--border);
  /* El fondo tiene que ser opaco: la cabecera flota sobre el contenido al hacer
     scroll y con transparencia se leen dos textos superpuestos. */
  background: var(--wp--preset--color--base);
  transition: box-shadow .2s ease;
}
/* `is-scrolled` lo pone el script de functions.php. Sin JS la cabecera sigue siendo
   perfectamente usable: solo se queda sin la sombra. */
.ab-header.is-scrolled { box-shadow: 0 6px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent); }

.ab-header__inner { padding-block: 0; }

.ab-header__bar {
  gap: var(--wp--preset--spacing--40);
  min-height: 72px;
  padding-block: 12px;
}

/* --- Marca ------------------------------------------------------- */
.ab-header__brand { gap: 12px; flex: 0 1 auto; min-width: 0; }
.ab-header__brand .wp-block-site-title { margin: 0; min-width: 0; }
/* El título del sitio es un enlace, así que heredaba el subrayado global de los
   enlaces: el nombre de la agencia salía subrayado como si fuera un enlace de texto. */
.ab-header__brand .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  white-space: nowrap;
}
.ab-header__brand .wp-block-site-title a:hover { color: var(--wp--preset--color--primary); }
/*
 * Recorte con puntos suspensivos en TODOS los anchos, no solo en móvil.
 *
 * El título lleva `white-space: nowrap` para que el nombre de la agencia no se parta en
 * dos líneas. Sin `overflow: hidden` eso no se recorta: se DESBORDA, y en un iPad de
 * 768 px «Autobits Travel» se montaba encima del primer enlace del menú.
 */
.ab-header__brand .wp-block-site-title { min-width: 0; }
.ab-header__brand .wp-block-site-title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-header__brand .wp-block-site-logo img { display: block; height: auto; }

/* --- Zona derecha ------------------------------------------------ */
.ab-header__end { gap: clamp(12px, 2vw, 28px); flex: 0 0 auto; }

/* --- Navegación -------------------------------------------------- */
.ab-nav .wp-block-navigation__container { gap: clamp(14px, 1.8vw, 30px); }
.ab-nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 6px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
/* Subrayado que crece desde el centro en vez del subrayado plano del enlace: es el
   detalle que separa un menú "de plantilla gratis" de uno cuidado. */
.ab-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0);
  transition: transform .22s ease;
}
.ab-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.ab-nav .wp-block-navigation-item__content:hover::after,
.ab-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ab-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
@media (prefers-reduced-motion: reduce) {
  .ab-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* Menú desplegado en móvil. WordPress lo pinta a pantalla completa; sin esto sale con
   la tipografía y el color por defecto y desentona con el resto del sitio. */
.ab-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.ab-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.ab-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 700;
  padding-block: 10px;
}
.ab-nav .wp-block-navigation__responsive-container-open,
.ab-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); }

/* --- CTA de la cabecera ------------------------------------------ */
.ab-header__cta .wp-block-button__link { padding: 11px 22px; font-size: .92rem; }

/*
 * Tres tramos, y el del medio es el que importa: entre 600 y 900 px el menú ya está
 * desplegado (WordPress cambia a hamburguesa en 600) pero no cabe además el botón.
 * Sin este tramo, el botón y el menú se pisaban — que es lo que se veía en el móvil.
 */
@media (max-width: 899px) { .ab-header__cta { display: none; } }

/*
 * TRAMO INTERMEDIO (600–899 px): tablet en vertical.
 *
 * WordPress pasa el menú a hamburguesa en 600 px, así que aquí ya está desplegado
 * entero… pero no cabe. En un iPad Mini (768 px) la cabecera pedía ~810 px con el botón
 * ya oculto: marca 200 + menú 446 + idioma 86 + huecos, contra 720 px útiles.
 *
 * Se aprieta en vez de romperse: tipografía y huecos algo menores, que es preferible a
 * mandar a hamburguesa una pantalla donde el menú completo sí cabe si se ajusta.
 */
@media (min-width: 600px) and (max-width: 899px) {
  .ab-header__bar { gap: 16px; }
  .ab-header__brand .wp-block-site-title a { font-size: 1.12rem; }
  .ab-nav .wp-block-navigation__container { gap: 14px; }
  .ab-nav .wp-block-navigation-item__content { font-size: .88rem; }
  .ab-lang__link { padding: .26rem .5rem; font-size: .74rem; }
}

@media (max-width: 599px) {
  .ab-header__bar { min-height: 64px; gap: 10px; }

  /* La hamburguesa, a la esquina. En el orden del DOM la navegación va antes que el
     selector de idioma (que es el orden correcto en escritorio), y en móvil eso la
     dejaba pegada al logo — encima del nombre cuando no cabía. */
  .ab-header__end .ab-nav { order: 3; }
  .ab-header__end .ab-lang-wrap { order: 2; }

  /* El nombre del sitio cede espacio en vez de desbordarse sobre la hamburguesa. */
  .ab-header__brand { flex: 1 1 auto; overflow: hidden; }
  .ab-header__brand .wp-block-site-title { overflow: hidden; }
  .ab-header__brand .wp-block-site-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem;
  }
  .ab-lang__link { padding: .28rem .5rem; font-size: .72rem; }
}

/* ==================================================================
   SIN HUECOS ENTRE SECCIONES

   WordPress separa los bloques hermanos con
   `:where(body .is-layout-constrained) > * { margin-block-start: <blockGap> }`.
   Dentro del contenido de la página eso deja ~28 px entre cada sección a ancho
   completo, y como el margen es transparente, lo que se ve es el fondo del body: una
   franja blanca entre el vídeo y la sección siguiente, o entre una banda y la de abajo.
   Parecía un separador puesto a propósito y era espaciado por defecto.

   Nuestras secciones traen todas su propio `padding-block`, así que ese hueco sobra.
   Se anula SOLO en ellas —por sus clases— para que el contenido normal de una entrada
   conserve su ritmo. El selector de WordPress usa `:where()`, especificidad 0: basta
   una clase para ganarle.
   ================================================================== */
.ab-hero,
.ab-section,
.ab-band { margin-block: 0; }

/* ==================================================================
   BANDAS CON PARALLAX

   Una banda a ancho completo con una foto de fondo que se desplaza MÁS DESPACIO que el
   scroll. Es el efecto de la referencia (breve.services) y sustituye al intento
   anterior —una capa `position: fixed` con secciones translúcidas encima—, que además
   de ser un efecto mucho más flojo hacía temblar la página: cada sección con
   `backdrop-filter` obligaba a volver a desenfocar el fondo en cada fotograma del
   scroll.

   Aquí no hay nada fijo ni nada que desenfocar. El script solo escribe `transform` sobre
   la imagen, que el navegador compone en la GPU sin recalcular estilos ni maquetación.
   ================================================================== */
.ab-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;          /* la foto sobresale por arriba y por abajo: hay que recortar */
  display: flex;
  align-items: center;
  min-height: 62vh;
}
@supports (height: 100svh) { .ab-band { min-height: 62svh; } }

/*
 * `max-width: none` NO es decorativo.
 *
 * WordPress emite `body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 * { max-width: content-size; margin-inline: auto !important }`. La capa de la foto es
 * exactamente ese hijo, así que aunque esté en `position: absolute` con `inset: 0`, el
 * `max-width` la recortaba a 760 px y la centraba: la banda salía como un cuadro en
 * medio de la página en vez de a ancho completo.
 *
 * La banda ya no usa maquetación `constrained` (ver patterns/banda.php), pero esto se
 * queda como red: basta que alguien la meta dentro de otro grupo constrained para que
 * vuelva a pasar.
 */
.ab-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  max-width: none;
  margin: 0 !important;   /* el margin-inline: auto de esa misma regla lleva !important */
}

/* La banda es flow: WordPress separa a los hijos con `margin-block-start` y aquí eso
   solo desplazaría el texto dentro de la banda. */
.ab-band > * { margin-block: 0; }

/*
 * OJO a la estructura: el bloque de imagen de WordPress pone la clase en el `<figure>` y
 * deja el `<img>` dentro. Lo que se mueve es el `<img>` —es donde va `data-parallax`—,
 * así que la figura solo hace de marco y no se transforma.
 *
 * La foto mide 150 % de alto y arranca un 25 % por encima. Ese margen de sobra es lo que
 * se desplaza: sin él, al moverla asomaría un borde vacío arriba o abajo.
 */
.ab-band__img {
  position: absolute;
  inset: 0;
  margin: 0;
}
.ab-band__img img {
  position: absolute;
  inset-inline: 0;
  top: -25%;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/*
 * El velo. Sin él, un texto blanco sobre una foto clara no se lee.
 *
 * Es un PSEUDOELEMENTO, no un bloque. Cuando era un `wp:group`, WordPress le aplicaba
 * `:where(body .is-layout-flow) > * { margin-block-start: … }` por ser el segundo hijo
 * del contenedor, y ese margen desplazaba hacia abajo una capa `position: absolute`:
 * quedaba una franja de foto sin oscurecer arriba. Un `::after` no es un hijo, así que
 * ninguna regla de maquetación lo alcanza.
 */
.ab-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 48%, color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent) 100%);
}

/* Y por si acaso: ningún hijo de la capa de foto hereda márgenes de flujo. */
.ab-band__media > * { margin-block: 0; }

/* El ancho del texto lo fija el tema, no la maquetación de WordPress: así la banda no
   depende de `contentSize` y se puede empujar contra el borde con holgura propia. */
.ab-band__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}
.ab-band__content > * { max-width: 34rem; }
.ab-band__title { margin: 0; color: #fff; text-wrap: balance; }
.ab-band__text  { margin: .9rem 0 0; color: rgb(255 255 255 / .9); max-width: 46ch; }

/* Alterna el lado para que dos bandas seguidas no se sientan iguales. */
.ab-band--right .ab-band__media::after {
  background: linear-gradient(260deg, color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 48%, color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent) 100%);
}
.ab-band--right .ab-band__content > * { margin-inline-start: auto; }
.ab-band--right .ab-band__content { text-align: end; }
.ab-band--right .ab-band__text { margin-inline-start: auto; }

@media (max-width: 781px) {
  .ab-band { min-height: 52vh; }
  /* En móvil el degradado va en vertical: uno lateral sobre una columna estrecha deja
     medio texto sobre la parte clara de la foto. */
  .ab-band__media::after,
  .ab-band--right .ab-band__media::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent) 100%);
  }
  .ab-band--right .ab-band__content > * { margin-inline-start: 0; }
  .ab-band--right .ab-band__content { text-align: start; }
}

/* Sin parallax no se pierde nada: la foto se queda quieta y la banda se ve igual. */
@media (prefers-reduced-motion: reduce) {
  .ab-band__img img { top: 0; height: 100%; transform: none !important; }
}

/* ==================================================================
   SECCIONES — ritmo vertical y cabeceras
   ================================================================== */
/*
 * `padding-inline` propio, y no es redundante con el de WordPress: es que WordPress se
 * lo quita.
 *
 * Emite estas dos reglas, en este orden:
 *   .has-global-padding                                                     { padding-inline: spacing-40 }
 *   .has-global-padding :where(.has-global-padding:not(.wp-block-block))     { padding-inline: 0 }
 *
 * Nuestras secciones viven dentro de `.entry-content`, que también lleva
 * `has-global-padding`, así que la segunda regla las alcanza y anula la primera (misma
 * especificidad, gana la última). En escritorio no se nota —el contenido va limitado a
 * 760/1240 px y centrado, así que el margen lo pone la ventana—, pero en un móvil de
 * 430 px un bloque `alignwide` mide el 100 % y las tarjetas salían pegadas a los dos
 * bordes de la pantalla.
 *
 * Esta hoja se carga después de los estilos globales, así que basta una clase.
 */
.ab-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); padding-inline: var(--wp--preset--spacing--40); }
.ab-section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Etiqueta pequeña sobre el título de sección. Orienta al lector antes del titular y
   da a la página el ritmo de una plantilla de pago en vez de un muro de H2. */
/*
 * La etiqueta de sección NO usa `primary` a secas.
 *
 * Es texto pequeño sobre fondo claro, el caso más exigente de contraste. Con una marca
 * de tono medio —el turquesa #33a4a4— `primary` sobre blanco da 3,01:1, muy por debajo
 * del 4,5:1 que pide WCAG AA.
 *
 * Se mezcla con la tinta oscura del tema en vez de usar `primary-dark`: ese solo baja un
 * 22 % y con el turquesa se quedaba en 4,36:1 sobre el gris de las secciones, a un pelo
 * de pasar. Al 65 % da 5,26:1 sobre blanco y 4,90:1 sobre el gris, y sigue siendo
 * claramente el color de la marca. Con marcas ya oscuras (el azul por defecto sube a
 * 7,7:1) la diferencia no se aprecia.
 *
 * El resto de usos de `primary` como texto son `:hover` o enlaces grandes, donde el
 * umbral aplicable es 3:1.
 */
.ab-eyebrow {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 65%, var(--wp--preset--color--contrast));
}
.ab-section__title { margin: 0; color: var(--wp--preset--color--contrast); }
.ab-section__lead {
  margin: .85rem auto 0;
  max-width: 62ch;
  color: var(--wp--preset--color--contrast-2);
}

/* Ritmo interno de una sección: cabecera, cuerpo y pie. Se define aquí y no en cada
   patrón para que todas las secciones respiren igual — es lo que hace que una página
   se lea como una plantilla y no como bloques apilados. */
.ab-section__head { margin-block-end: clamp(2rem, 4vw, 3.25rem); }
.ab-section__body { margin-block: 0; }
.ab-section__foot { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* ==================================================================
   HERO
   ================================================================== */
/*
 * Vídeo de fondo. Lo inyecta inc/hero-video.php al pintar.
 *
 * Va justo encima de la imagen del cover (`z-index: 0`, después en el DOM) y por debajo
 * de la capa de oscurecido, que es la que garantiza que el texto se lea.
 */
.ab-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* En móvil no se descarga: son ~1,2 MB por visita para un adorno, y ahí el hero se ve
   igual de bien con la foto. `display:none` basta — el navegador no pide las fuentes
   de un vídeo que no se muestra. */
@media (max-width: 781px) { .ab-hero__video { display: none; } }

/* Y quien pidió menos movimiento no debería recibir un vídeo en bucle. */
@media (prefers-reduced-motion: reduce) { .ab-hero__video { display: none; } }

/*
 * Altura del hero.
 *
 * `vh` en móvil cuenta la ventana CON la barra de direcciones retraída, así que al
 * empezar a desplazar la barra se esconde, `vh` cambia y el hero se reajusta de golpe:
 * un salto en mitad del scroll. `svh` (small viewport height) usa siempre la ventana
 * más pequeña y no se mueve. El `vh` queda de respaldo para navegadores sin `svh`.
 */
.ab-hero.wp-block-cover { min-height: 86vh; }
@supports (height: 100svh) {
  .ab-hero.wp-block-cover { min-height: 86svh; }
}

.ab-hero__eyebrow { margin-block-end: .9rem; opacity: .92; }
.ab-hero__title { margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.ab-hero__lead {
  margin: 1.1rem auto 0;
  max-width: 56ch;
  /* Blanco a media opacidad en vez de un gris: sobre una foto, un gris fijo se pierde
     en las zonas claras y se ensucia en las oscuras. */
  color: rgb(255 255 255 / .92);
}
.ab-hero__actions { margin-block-start: clamp(1.6rem, 3vw, 2.4rem); gap: 14px; }

/* Botón secundario sobre la foto del hero: contorno blanco, relleno al pasar. El
   `is-style-outline` de core hereda el azul de marca y sobre una foto oscura no se ve. */
.ab-btn--ghost .wp-block-button__link {
  border: 2px solid rgb(255 255 255 / .75);
  background: transparent;
  color: #fff;
}
.ab-btn--ghost .wp-block-button__link:hover {
  background: #fff;
  color: var(--wp--preset--color--contrast);
  border-color: #fff;
}

/* ==================================================================
   REJILLA
   ================================================================== */
.ab-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
  align-items: stretch;   /* todas las tarjetas, la misma altura */
}

/*
 * El grupo que hace de rejilla sigue siendo un bloque `is-layout-flow` para WordPress,
 * que le pone `margin-block-start` a cada hijo MENOS al primero. Dentro de un grid ese
 * margen no separa: empuja cada tarjeta hacia abajo dentro de su celda, así que la
 * primera quedaba más alta que las otras dos y parecían de tamaños distintos.
 */
.ab-grid > * { margin-block: 0; }
/* Mobile primero. `auto-fit` + `minmax` en vez de breakpoints por número de columnas:
   así la rejilla se adapta al ancho real del contenedor, que es lo que importa cuando
   el bloque puede ir a ancho completo, en una columna o dentro de otro grupo. */
@media (min-width: 40em) {
  .ab-grid { grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 30vw, 22rem), 1fr)); }
}
.ab-grid--1 { grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .ab-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ab-grid--3 { grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 28vw, 20rem), 1fr)); }
  .ab-grid--4 { grid-template-columns: repeat(auto-fit, minmax(clamp(14rem, 22vw, 18rem), 1fr)); }
}

/* ==================================================================
   TARJETA DE TOUR
   ================================================================== */
.ab-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  box-shadow: var(--wp--preset--shadow--card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--raised); }
}
/* El borde al pasar se deriva del color de marca: un gris fijo se veía ajeno en
   cuanto el cliente cambiaba la paleta. */
.ab-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border)); }

.ab-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--surface);
  overflow: hidden;
}
.ab-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorte fijo: una foto vertical del cliente no descuadra la fila */
  display: block;
  transition: transform .45s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-card:hover .ab-card__media img { transform: scale(1.05); }
}
.ab-card__placeholder { display: block; width: 100%; height: 100%; }

.ab-card__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--wp--preset--color--contrast);
  /* Pastilla clara en vez del azul de marca: sobre una foto, un bloque de color
     saturado compite con el botón de reservar, que es la acción de verdad. */
  background: rgb(255 255 255 / .94);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.ab-card__body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: var(--wp--preset--spacing--40);
  flex: 1 1 auto;   /* empuja .ab-card__meta abajo para que todas las tarjetas alineen */
}
.ab-card__title { margin: 0; font-size: 1.18rem; line-height: 1.3; }
.ab-card__title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ab-card__title a:hover { color: var(--wp--preset--color--primary); }
.ab-card__teaser {
  margin: 0;
  color: var(--wp--preset--color--contrast-2);
  font-size: .94rem;
  line-height: 1.6;
}
.ab-card__meta {
  margin: auto 0 0;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--wp--preset--color--border);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
  font-size: .9rem;
}
.ab-card__duration { color: var(--wp--preset--color--contrast-2); }
.ab-card__price { font-weight: 700; color: var(--wp--preset--color--contrast); text-align: end; }
.ab-card__from {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--wp--preset--color--contrast-2);
}

.ab-empty {
  padding: var(--wp--preset--spacing--40);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 10px;
  color: var(--wp--preset--color--contrast-2);
  text-align: center;
}

/* ==================================================================
   TARJETA DE DESTINO — imagen con el nombre encima
   ================================================================== */
.ab-dest {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--wp--preset--shadow--card);
  isolation: isolate;   /* mantiene el degradado bajo el texto sin z-index por todos lados */
}
.ab-dest__media,
.ab-dest__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-dest__media { background: var(--wp--preset--color--surface); }

/* El degradado existe para que el nombre se lea sobre CUALQUIER foto que suba el
   cliente — es el fallo clásico de estas tarjetas: texto blanco sobre un cielo claro. */
.ab-dest__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 34%, color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent) 100%);
}
.ab-dest__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--wp--preset--spacing--40);
}
/* La pastilla solo aparece en móvil; en escritorio la tarjeta es alta y el nombre sobre
   la foto ya se lee como enlace. */
.ab-dest__go { display: none; }

.ab-dest__name { font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: #fff; }
.ab-dest__count { font-size: .85rem; color: rgb(255 255 255 / .85); }

/*
 * MÓVIL: una tarjeta por fila, pero APAISADA.
 *
 * Se probaron dos por fila y no funciona: con tres destinos queda un hueco vacío al lado
 * del tercero —se ve roto— y a 177 px la foto no cuenta nada. El problema nunca fue el
 * número de columnas sino la ALTURA: la tarjeta 3:4 a ancho completo medía 430×573 px,
 * el 62 % de la pantalla por destino.
 *
 * Apaisada 4:3 baja al 30 %, caben tres de golpe, y no hay huecos posibles porque
 * siempre es una por fila. Con la pastilla de acción, además, se lee como algo que se
 * pulsa y no como una foto decorativa.
 *
 * El corte es 40em (640 px), el MISMO que usa `.ab-grid` para pasar a varias columnas.
 * Con uno más alto, una tablet de 740 px se comía una tarjeta apaisada de 740×555: el
 * problema de altura otra vez, solo que más ancho.
 */
@media (max-width: 39.999em) {
  .ab-destinations-grid .ab-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
  .ab-dest { aspect-ratio: 4 / 3; border-radius: 18px; }
  .ab-dest__body { padding: var(--wp--preset--spacing--40); gap: 4px; }
  .ab-dest__name { font-size: 1.45rem; letter-spacing: -.01em; }
  .ab-dest__count { font-size: .88rem; }

  /* El degradado arranca más abajo: la tarjeta es baja y uno que empiece al 34 % la
     apaga entera. */
  .ab-dest__overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 40%, color-mix(in srgb, var(--wp--preset--color--contrast) 90%, transparent) 100%);
  }

  .ab-dest__go {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-block-start: .7rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ab-dest img { transition: transform .35s ease; }
  .ab-dest:hover img { transform: scale(1.05); }
}
.ab-dest:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 3px; }

/* ==================================================================
   PROPUESTA DE VALOR — tarjetas con icono
   ================================================================== */
.ab-prop {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  box-shadow: var(--wp--preset--shadow--card);
}
.ab-prop__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-block-end: .35rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  color: var(--wp--preset--color--primary);
}
.ab-prop__icon svg { width: 26px; height: 26px; display: block; }
.ab-prop__title { margin: 0; font-size: 1.12rem; color: var(--wp--preset--color--contrast); }
.ab-prop__text { margin: 0; color: var(--wp--preset--color--contrast-2); font-size: .96rem; line-height: 1.6; }

/* ==================================================================
   TESTIMONIOS
   ================================================================== */
.ab-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  box-shadow: var(--wp--preset--shadow--card);
}
.ab-quote__stars { display: flex; gap: 3px; color: var(--wp--preset--color--accent); }
.ab-quote__stars svg { width: 17px; height: 17px; display: block; }
/* Color explícito, no heredado: es exactamente el texto que salía lavado. */
.ab-quote__text {
  margin: 0;
  flex: 1 1 auto;
  color: var(--wp--preset--color--contrast);
  font-size: 1.02rem;
  line-height: 1.65;
}
.ab-quote__author { display: flex; align-items: center; gap: .7rem; }
.ab-quote__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
}
.ab-quote__name { display: block; font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--contrast); }
.ab-quote__place { display: block; font-size: .85rem; color: var(--wp--preset--color--contrast-2); }

/* ==================================================================
   EQUIPO
   ================================================================== */
.ab-member { text-align: center; }
.ab-member__photo {
  width: clamp(120px, 14vw, 156px);
  height: clamp(120px, 14vw, 156px);
  margin: 0 auto .9rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.ab-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-member__name { margin: 0; font-size: 1.08rem; color: var(--wp--preset--color--contrast); }
.ab-member__role {
  margin: .15rem 0 0;
  font-size: .88rem;
  color: var(--wp--preset--color--contrast-2);
  letter-spacing: .02em;
}

/* ==================================================================
   LLAMADA A LA ACCIÓN
   ================================================================== */
.ab-cta { background: var(--wp--preset--color--primary); color: #fff; }
.ab-cta .ab-cta__title { color: #fff; }
.ab-cta .ab-cta__text { color: rgb(255 255 255 / .9); max-width: 58ch; margin-inline: auto; }
/* Botón claro sobre el azul: el botón de marca sobre fondo de marca desaparece. */
.ab-cta .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--primary);
}
.ab-cta .wp-block-button__link:hover { background: rgb(255 255 255 / .9); color: var(--wp--preset--color--primary-dark); }

/* ==================================================================
   CONTACTO
   ================================================================== */
.ab-contact {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  box-shadow: var(--wp--preset--shadow--card);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-contact:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--raised); }
}
.ab-contact:hover { border-color: var(--wp--preset--color--primary); }
.ab-contact__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-block-end: .5rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  color: var(--wp--preset--color--primary);
}
.ab-contact__icon svg { width: 23px; height: 23px; display: block; }
.ab-contact__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-2);
}
.ab-contact__value { font-size: 1.02rem; font-weight: 600; color: var(--wp--preset--color--contrast); }

/*
 * El hueco del formulario.
 *
 * Esta hoja se encola solo en `wp_enqueue_scripts`, así que NO se carga en el editor:
 * el cliente ve la instrucción mientras edita y el visitante no ve nada. Es justo el
 * comportamiento que promete el comentario de patterns/contacto.php.
 */
.ab-formslot { display: none; }

/* Enlace de vuelta al índice de destinos, sobre el archivo de un destino. */
.ab-backlink {
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin: 0 auto;
  padding: 1.25rem var(--wp--preset--spacing--40) 0;
  font-size: .92rem;
}
.ab-backlink a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }
.ab-backlink a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* ==================================================================
   FORMULARIO DE CONTACTO
   ================================================================== */
.ab-formwrap { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.ab-form__title { margin-block-end: 1.5rem; color: var(--wp--preset--color--contrast); }

.ab-form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  box-shadow: var(--wp--preset--shadow--card);
}
.ab-form__row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .ab-form__row { grid-template-columns: 1fr 1fr; } }

.ab-form__field { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .38rem; }
.ab-form__field label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
.ab-form__field label span { color: var(--wp--preset--color--primary); }

.ab-form input,
.ab-form textarea {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit;
  font-size: .95rem;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ab-form textarea { resize: vertical; min-height: 8rem; }
.ab-form input:focus,
.ab-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

.ab-form__actions { margin: .4rem 0 0; }
.ab-form__actions button { cursor: pointer; border: 0; padding: .85rem 1.9rem; font-size: .98rem; }

/*
 * El campo trampa. Se saca de la pantalla en vez de `display:none` porque hay robots
 * que descartan los campos ocultos por `display`/`visibility`; moverlo fuera del
 * viewport lo deja visible para ellos e invisible para las personas.
 */
.ab-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ab-form__notice {
  margin: 0 0 1.25rem;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  font-size: .95rem;
  border: 1px solid transparent;
}
.ab-form__notice--ok {
  color: #14532d;
  background: #eafaf0;
  border-color: #b7e4c7;
}
.ab-form__notice--error {
  color: #7f1d1d;
  background: #fdecec;
  border-color: #f5c2c2;
}

/* ==================================================================
   PIE
   ================================================================== */
/* Sin subrayado por defecto: el pie tiene muchos enlaces juntos y subrayados todos
   parece una lista de errores. Se subraya al pasar, que es donde hace falta. */
.ab-footer a { text-decoration: none; }
.ab-footer a:hover { text-decoration: underline; }

.ab-footer__brand a {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.ab-footer__about { color: rgb(255 255 255 / .74); line-height: 1.65; max-width: 42ch; }

.ab-footer__heading {
  margin: 0 0 .9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.ab-footer__nav .wp-block-navigation-item__content { color: rgb(255 255 255 / .88); }
.ab-footer__nav .wp-block-navigation-item__content:hover { color: #fff; }
.ab-footer__rule { margin-block: var(--wp--preset--spacing--50); border: 0; height: 1px; }
.ab-footer__legal { color: rgb(255 255 255 / .6); margin: 0; }

/* ==================================================================
   PÁGINA DE TOUR

   Es la página que vende, así que se monta como una ficha de producto: galería arriba,
   contenido a la izquierda y la caja de reserva fija a la derecha mientras se lee.

   La plantilla es nuestra (templates/single-trip.html) y sustituye a la del plugin, que
   ponía además precio, insignia de descuento y un segundo botón de reservar. Con el
   carrito de Autobits al lado, ese bloque de precios era información duplicada —y podía
   contradecir al carrito, que es quien calcula de verdad.
   ================================================================== */
.ab-trip__body { padding-block: clamp(2rem, 4vw, 3.5rem); }
.ab-trip__cols { align-items: flex-start; }   /* sin esto las columnas se estiran y `sticky` no tiene recorrido */

.ab-trip__title { margin: 0 0 .4rem; }
.ab-trip__duration { color: var(--wp--preset--color--contrast-2); }
.ab-trip__facts { margin-block: 1.25rem 2rem; }

.ab-trip__h {
  margin-block: clamp(2rem, 3.5vw, 2.75rem) .9rem;
  padding-block-end: .6rem;
  border-block-end: 1px solid var(--wp--preset--color--border);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  color: var(--wp--preset--color--contrast);
}
.ab-trip__main > .ab-trip__h:first-of-type { margin-block-start: 1.5rem; }

/*
 * La caja de reserva acompaña al lector.
 *
 * `top` deja hueco para la cabecera, que también es fija: sin ese margen la caja se
 * mete debajo del menú al llegar arriba. Se desactiva en pantallas estrechas, donde las
 * columnas se apilan y no hay a qué quedarse pegado.
 */
.ab-trip__aside > * { position: sticky; top: 96px; }
@media (max-width: 781px) {
  .ab-trip__aside > * { position: static; }
  .ab-trip__body { padding-block: 1.5rem; }
}

/* La galería, a ancho completo y con una altura estable para que el resto de la página
   no dé un salto cuando el carrusel termina de montarse. */
.ab-trip__gallery { margin-block: 0 !important; }
.ab-trip__gallery .wpte-gallery-wrapper .splide img {
  height: clamp(320px, 52vh, 620px) !important;
  object-fit: cover !important;
}

/* El carrusel del plugin viene con su propio azul. Se repinta con el de la marca para
   que el cliente que cambie el color primario no tenga que tocar los ajustes del
   plugin además del tema. */
.ab-trip__gallery .splide__arrow {
  color: var(--wp--preset--color--primary) !important;
  background: #fff !important;
}
.ab-trip__gallery .splide__arrow:hover {
  color: #fff !important;
  background: var(--wp--preset--color--primary) !important;
}
.ab-trip__gallery .splide__pagination__page.is-active { background: var(--wp--preset--color--primary) !important; }

/* Itinerario: cada día como una tarjeta plegable. */
.ab-trip__itinerary .wpte-itinerary-item,
.ab-trip__itinerary .wte-itinerary-wrapper > li {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  margin-block-end: .75rem;
  overflow: hidden;
  background: var(--wp--preset--color--base);
}

.ab-trip__related { margin-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ==================================================================
   COMPATIBILIDAD CON LAS PLANTILLAS DE BLOQUES DE WP TRAVEL ENGINE

   Sus plantillas usan `var:preset|spacing|56|80|100`, slugs de una escala que no es la
   nuestra. Sin definirlos, esas variables no existen y los márgenes del plugin caen a
   cero: la página de tour sale con todo pegado.

   Se declaran como alias en CSS y NO en theme.json a propósito: en theme.json
   aparecerían como opciones en el selector de espaciado del cliente, y tendría nueve
   tamaños con nombres sin sentido en vez de seis.
   ================================================================== */
:root {
  --wp--preset--spacing--56: var(--wp--preset--spacing--50);
  --wp--preset--spacing--80: var(--wp--preset--spacing--60);
  --wp--preset--spacing--100: var(--wp--preset--spacing--70);
}

/* ==================================================================
   SELECTOR DE IDIOMA
   Vacío cuando el sitio es monolingüe, así que no puede dejar un hueco ni un
   separador suelto en la cabecera.
   ================================================================== */
.ab-lang {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  align-items: center;
  background: var(--wp--preset--color--surface);
  border-radius: 999px;
}
.ab-lang__link {
  display: inline-block;
  padding: .3rem .62rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--wp--preset--color--contrast-2);
  transition: background .15s ease, color .15s ease;
}
.ab-lang__link:hover { color: var(--wp--preset--color--primary); }
/* El idioma activo se marca con color Y con aria-current: el color solo no lo
   comunica a quien no lo distingue. */
.ab-lang__link.is-current {
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--primary);
}
.ab-lang__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}