/**
 * Peru Grand Travel — estilos base (mobile-first).
 * Generado por S10_css.php en PASO 3. Selectores extraídos del HTML real.
 * NO añadir @media aquí: el desktop vive en styles-desktop.css.
 */

/* ------------------------------------------------------------ TIPOGRAFÍA */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* Colores del manual de marca. */
  --c-primary: #193aba;
  --c-secondary: #1da1f2;
  --c-accent: #f7931e;

  --c-ink: #1a1f36;
  --c-body: #55607a;
  --c-muted: #8a93a8;
  --c-line: #e4e8f0;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7fb;
  /* Azul-gris frio del recuadro del icono en las tarjetas. Un unico sitio:
     si el diseno lo quiere mas o menos azul, se toca aqui. */
  --c-primary-soft: #ebedf7;
  --c-white: #ffffff;

  --font-base: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-card: 0 4px 16px rgba(26, 31, 54, .08);
  --shadow-float: 0 12px 32px rgba(26, 31, 54, .12);

  --wrap: 1200px;
  --pad-x: var(--sp-4);

  /* Ancho de la barra lateral de Tailor Made. Es un token para que la columna
     del formulario salga de `--wrap` menos esto, y no de un número escrito. */
  --tail-aside: 360px;

  /* Ídem para la barra lateral del blog. */
  --blog-aside: 320px;
}

/* ------------------------------------------------------------------ BASE */
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
p { margin: 0 0 var(--sp-4); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-secondary); }

.media--type-image .contextual, .media--type-icon .contextual, .media--view-mode-media-document-url .contextual {
    display: none;
}

/* Ancho de lectura común a las secciones del home. */
.region-content > [id^="block-perugrandtravel-home"],
.region-slider > [id^="block-perugrandtravel-home"] {
  padding-inline: var(--pad-x);
}
.region-content > [id^="block-perugrandtravel-home"] > * {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* Eyebrow: la etiqueta naranja en versalitas sobre los títulos de sección. */
.field--name-field-bt-home-tour-eyeb-txt,
.field--name-field-bt-home-present-eyeb-txt,
.field--name-field-bt-home-award-eyeb-txt,
.field--name-field-bt-home-promise-eyeb-txt,
.field--name-field-bt-home-exp-eyeb-txt,
.field--name-field-bt-home-faq-eyeb-txt,
.field--name-field-bt-home-blog-eyeb-txt {
  margin-bottom: var(--sp-2);
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-head { margin-bottom: var(--sp-6); text-align: center; }
.section-head p { color: var(--c-body); }
/* La descripcion de una seccion no se estira de lado a lado: se acota y se
   centra, si no la linea sale larguisima en escritorio. */
.section-head .field--type-text-long { max-width: 62ch; margin-inline: auto; }

/* Botones: cualquier campo link del proyecto se pinta como botón. */
[class*="field--name-field-bt-"][class*="-lnk"] a,
[class*="field--name-field-bt-"][class*="-cta-lnk"] a {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 600;
  font-size: 15px;
  transition: filter .18s ease, transform .18s ease;
}
[class*="field--name-field-bt-"][class*="-lnk"] a:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  color: var(--c-white);
}
/* El segundo CTA del hero va en contorno. */
.field--name-field-bt-home-hero-cta-lnk .field__item:nth-child(2) a {
  background: transparent;
  border: 2px solid var(--c-white);
}

/* Los enlaces de columna del footer NO son botones. */
.field--name-field-bt-foot-links-lnk a {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;
}

/* ---------------------------------------------------------------- HEADER */
.region-header {
  background: var(--c-white);
  box-shadow: 0 1px 0 var(--c-line);
}

/* ⚠️ .head-inner es el field_group: envuelve el CAMPO block_field, no los
   sub-bloques. Los 5 bloques cuelgan de un .field__item cada uno, dentro de
   .field__items. El layout va ahí, y se ordenan por posición del DOM:
   1 contacto · 2 marca · 3 menú · 4 idioma · 5 CTA. */
#block-perugrandtravel-head .head-inner { padding: 0; }
/* Rejilla en vez de columna: las dos bandas de arriba ocupan el ancho entero,
   y marca, CTA y menu comparten UNA fila — hamburguesa a la izquierda, logo en
   medio y Book Now a la derecha. Las filas se declaran todas para que ningun
   bloque caiga donde no toca. */
.head-inner > .field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--sp-3);
}
.head-inner > .field > .field__item:nth-child(1) { grid-row: 1; grid-column: 1 / -1; }  /* contacto */
.head-inner > .field > .field__item:nth-child(4) { grid-row: 2; grid-column: 1 / -1; }  /* idioma   */
/* Fila 3: logo · Book Now · hamburguesa. */
.head-inner > .field > .field__item:nth-child(2) {                                      /* marca    */
  grid-row: 3; grid-column: 1;
  min-width: 0;
  padding-left: var(--pad-x);
}
.head-inner > .field > .field__item:nth-child(5) { grid-row: 3; grid-column: 2; }       /* CTA      */
.head-inner > .field > .field__item:nth-child(3) {                                      /* menú     */
  grid-row: 3; grid-column: 3;
  padding-right: var(--pad-x);
}

/* Centrado vertical: lo da `align-items: center` de la rejilla. Los items NO
   llevan display:flex — al ponerlo se estiraban a lo ancho de su pista y el
   logo se comia la fila entera. */
/* `padding-block: 0` no bastaba: el CTA traia `padding: 0 0 16px 16px` de una
   regla posterior y esos 16px de abajo lo subian 8px respecto a los otros dos.
   Se anula el padding entero — ya no hace falta, cada uno se coloca con
   `justify-self`. */
.head-inner > .field #block-sitebranding,
.head-inner > .field #block-headerbooknow,
.head-inner > .field #block-mainnavigation { padding: 0; margin: 0; }

/* Cada uno pegado a su lado; el CTA, centrado en la pista del medio. */
.head-inner > .field > .field__item:nth-child(2) { justify-self: start; }
.head-inner > .field > .field__item:nth-child(5) { justify-self: center; }
.head-inner > .field > .field__item:nth-child(3) { justify-self: end; }

/* Aire de la fila: sin esto el logo toca el borde de la banda azul por arriba
   y el hero por abajo. Va en los tres items y no en el contenedor, porque las
   dos bandas de arriba deben seguir llegando a los bordes. */
.head-inner > .field > .field__item:nth-child(2),
.head-inner > .field > .field__item:nth-child(3),
.head-inner > .field > .field__item:nth-child(5) { padding-block: var(--sp-4); }

/* El logo manda el alto de la fila, asi que se le pone techo aqui. */
#block-sitebranding img { max-height: 40px; width: auto; }
/* Y el CTA no se parte en dos lineas. */
#block-headerbooknow a { white-space: nowrap; }

/* Banda utility: contacto e idioma sobre azul, a sangre en todo el ancho.
   Sin `width: 100vw` ni margenes negativos (sacaban barra horizontal): con
   .head-inner a padding 0 el item ya llega a los dos bordes por si solo. */
.head-inner > .field > .field__item:nth-child(1),
.head-inner > .field > .field__item:nth-child(4) {
  background: var(--c-primary);
}
#block-headercontactbar { padding: var(--sp-2) var(--pad-x) var(--sp-1); }
#block-headercontactbar .field--name-field-bt-head-contact-parr,
#block-headercontactbar .head-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: center;
  max-width: var(--wrap);
  margin-inline: auto;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
}
#block-headercontactbar .contact-item,
#block-headercontactbar .contact-item a { color: rgba(255,255,255,.92); }
#block-headercontactbar .field--name-field-pt-head-contact-lab-txt { display: none; }
/* Los SVG llegan en su color original y sobre la banda azul tienen que ir en
   blanco, como el texto. `brightness(0)` los aplana a negro e `invert(1)` los
   pasa a blanco: sirve sea cual sea el color de origen y no hay que tocar los
   ficheros ni duplicarlos. Las banderitas del selector de idioma NO entran
   aqui a proposito — en blanco no se distinguirian. */
.contact-item img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Marca + acciones. */
#block-sitebranding {
  padding: var(--sp-4) var(--pad-x);
  text-align: center;
}
#block-sitebranding img { margin-inline: auto; max-height: 46px; width: auto; }
#block-headerbooknow { padding: 0 var(--pad-x) var(--sp-4); text-align: center; }
#block-languageswitcher { padding: 0 var(--pad-x) var(--sp-2); }
#block-languageswitcher ul {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
#block-languageswitcher a,
#block-languageswitcher .is-active { color: rgba(255,255,255,.92); }
#block-languageswitcher a:hover { color: var(--c-white); }
#block-languageswitcher img { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* Selector de idioma propio (tipo de bloque bt_head_lang). Cada idioma es un
   parrafo con su bandera en SVG y su enlace.
   El <a> NO lo pone el CSS: lo envuelve `linked_field`, que mete la salida del
   campo de imagen dentro del enlace del campo hermano. Asi la bandera es un
   enlace de verdad, no una capa transparente por encima. */
.lang-list { padding: 0 var(--pad-x) var(--sp-2); }
.lang-list > .field {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
}
.lang-list .field__item,
.lang-item .field--name-field-pt-head-lang-flag-med,
.lang-item .field--name-field-media-icon,
.lang-item article { display: contents; }
.lang-item { display: flex; align-items: center; }
.lang-item a { display: block; line-height: 0; }
.lang-item img { display: block; width: 22px; height: 16px; }
.lang-item a:hover img { filter: brightness(1.12); }

/* ⚠️ EL HEADER, EN SU PROPIO CONTEXTO DE APILAMIENTO. Sin esto el desplegable
   del menú se veía pero NO se podía usar: los enlaces del segundo en adelante
   quedaban tapados por el contenido de la página y, al mover el ratón hacia
   ellos, el puntero pasaba a estar sobre la página y no sobre el submenú, se
   perdía el `:hover` y el menú se cerraba en la cara.
   La causa no era el `z-index: 30` del panel —ese valor solo compite DENTRO de
   su contexto—, sino que `#header` era `position: static` y el envoltorio del
   bloque de cabecera trae `z-index: 1`: el panel quedaba encerrado ahí dentro,
   y cualquier bloque posicionado de la página pintaba por encima.
   Verificado con `elementFromPoint`: antes, sobre "Cusco" y "Lima" respondía un
   DIV de la página y sobre "Machu Picchu" hasta el <h1> de la banda; después,
   los cuatro enlaces responden. Y explica por qué "no pasa en todos lados":
   depende de qué haya debajo en cada página. */
#header {
  position: relative;
  z-index: 50;
}

/* Menú principal.
   Drupal anida un <ul class="menu"> dentro del <li> padre: el primer nivel
   se pinta en línea y el segundo se despliega. */
/* --------------------------------------------------- MENU (TB Mega Menu)
   Base comun. El desplegable, las columnas y la barra horizontal se definen
   en styles-desktop.css; el modulo se encarga solo del modo movil por debajo
   de su breakpoint (1200), incluida la hamburguesa. */
#block-mainnavigation .tbm-link { color: var(--c-ink); font-weight: 500; }
#block-mainnavigation .tbm-link:hover { color: var(--c-primary); }
#block-mainnavigation .tbm-group-title { color: var(--c-ink); font-size: 12px; letter-spacing: .09em; }

/* La hamburguesa. El modulo la sirve con un recuadro gris, barras de 6px y
   un margen inferior que descuadraba la fila. */
#block-mainnavigation .tbm-button {
  margin: 0;
  border: 0;
  color: var(--c-ink);
}
#block-mainnavigation .tbm-button-container { margin: 0; width: 34px; height: 22px; }
#block-mainnavigation .tbm-button-container span { height: 3px; border-radius: 2px; }
#block-mainnavigation .tbm-button-container span:nth-child(2),
#block-mainnavigation .tbm-button-container span:nth-child(3) { top: calc(50% - 1.5px); }

/* ⚠️ El panel desplegable es `position: absolute; width: 100%`, o sea el 100%
   de su ANCESTRO POSICIONADO. En movil el bloque del menu vive en la columna
   estrecha de la derecha —la de la hamburguesa—, asi que el panel heredaba sus
   34px y salia cortado, con cada opcion partida en dos lineas. Quitando el
   `relative` al bloque y al nav, el ancla pasa a ser el contenedor de la
   cabecera y el panel ocupa el ancho entero. */
#block-mainnavigation { position: static; }
.tbm.tbm--mobile { position: static; }
.tbm--mobile .tbm-collapse {
  left: 0;
  right: 0;
  width: auto;
  background: var(--c-white);
  box-shadow: 0 14px 28px rgba(26, 31, 54, .12);
}

/* Los items del desplegable, sin las cajas grises de fabrica. */
.tbm--mobile .tbm-link.level-1 { padding: var(--sp-4) var(--pad-x); font-size: 16px; }
.tbm--mobile .tbm-link.level-1,
.tbm--mobile .tbm-submenu-toggle,
.tbm--mobile .tbm-submenu-toggle:hover,
.tbm--mobile .tbm-item.level-1.open > .tbm-toggle { background-color: transparent; color: var(--c-ink); }
/* Los separadores del modulo son negros al 20%; se pasan al gris del tema. */
.tbm--mobile .tbm-item { border-top-color: var(--c-line); }
/* Los enlaces de dentro, un punto mas discretos que su seccion. */
.tbm--mobile .tbm-link.level-3 { color: var(--c-body); font-size: 15px; }
.tbm--mobile .tbm-group-title { padding: var(--sp-3) var(--pad-x) 0; }


/* La miga de pan no va en la portada. */
.path-frontpage #block-perugrandtravel-breadcrumbs { display: none; }

/* ------------------------------------------------------------------ HERO */
/* En movil el hero ocupa la pantalla entera. `svh` y no `vh`: en el movil
   `100vh` mide el viewport SIN las barras del navegador, asi que al cargar el
   hero sobresale y el contenido baja de golpe cuando la barra se retrae.
   `svh` es la altura con las barras a la vista, que es lo que se ve al entrar.
   Se resta la cabecera, que va encima y no debe empujar el hero fuera. */
#block-perugrandtravel-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--head-h, 160px));
  padding: 0;
  overflow: hidden;
  background: var(--c-ink);
}
/* La cadena de alturas tiene que llegar entera hasta la <img>: el field y su
   item son bloques normales y sin esto la foto se quedaba en su alto natural
   —246px de los 430 del hero— y debajo asomaba el fondo liso. */
.field--name-field-bt-home-hero-bg-med { position: absolute; inset: 0; }
.field--name-field-bt-home-hero-bg-med,
.field--name-field-bt-home-hero-bg-med > .field__item,
.field--name-field-bt-home-hero-bg-med article,
.field--name-field-bt-home-hero-bg-med .field {
  height: 100%;
}
.field--name-field-bt-home-hero-bg-med img {
  width: 100%; height: 100%; object-fit: cover;
}
/* En movil el texto ocupa todo el ancho, asi que el velo cubre entero.
   `pointer-events: none` porque un velo decorativo no debe recibir el raton. */
#block-perugrandtravel-home-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,40,.35) 0%, rgba(10,16,40,.75) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-9) var(--pad-x) var(--sp-8);
  color: var(--c-white);
}
.hero-inner h1 { color: var(--c-white); max-width: 15ch; }
.hero-inner p { color: rgba(255,255,255,.9); max-width: 46ch; }
.field--name-field-bt-home-hero-cta-lnk {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ----------------------------------------------------------------- STATS */
/* ⚠️ El field_group envuelve el CAMPO, no los ítems: los paragraphs cuelgan
   de .field__items. El grid va ahí, no en el wrapper. Mismo patrón en
   .promise-grid y .partner-grid. */
/* Por encima del hero: si no, la tarjeta queda tapada por la imagen. */
#block-perugrandtravel-home-stat { position: relative; z-index: 2; padding-top: var(--sp-6); }
.stat-grid {
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}
.stat-grid .field__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-4);
}
.stat-item { text-align: center; }
.stat-item img { width: 32px; height: 32px; margin: 0 auto var(--sp-2); object-fit: contain; }
.field--name-field-pt-home-stat-num-txt {
  color: var(--c-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.field--name-field-pt-home-stat-lab-txt { color: var(--c-muted); font-size: 13px; }

/* ---------------------------------------------------- PRESENTACIÓN Y CKE */
#block-perugrandtravel-home-present,
#block-perugrandtravel-home-award,
#block-perugrandtravel-home-faq { padding-block: var(--sp-8); }
/* Presentacion: texto e imagen. La estructura la dan dos field_group, no HTML
   escrito en el editor; el boton es un campo `link` y hereda `.btn` del theme,
   asi que aqui no hace falta ninguna clase inventada. */
#block-perugrandtravel-home-present .present-text > * + * { margin-top: var(--sp-4); }
/* El boton salio del grupo del texto para que en movil la foto quede ENTRE el
   parrafo y el, que es el orden que pide el diseno. Fuera del grupo pierde el
   margen que le daba `> * + *`, asi que se le pone aqui. */
/* En movil el antetitulo, el titulo y el boton van centrados; el parrafo se
   queda alineado a la izquierda, que centrado se lee peor. En escritorio se
   deshace, porque esta hoja no lleva media query y llega hasta alli. */
#block-perugrandtravel-home-present .present-text > [class*="-eyeb-txt"],
#block-perugrandtravel-home-present .present-text > [class*="-tit-head"],
#block-perugrandtravel-home-present > [class*="-present-lnk"] { text-align: center; }
#block-perugrandtravel-home-present > [class*="-present-lnk"] { margin-top: var(--sp-5); }
#block-perugrandtravel-home-present .present-media { margin-top: var(--sp-5); }
/* La foto tiene que llenar su columna. Entre el field_group y la <img> hay
   cuatro envoltorios (el campo, su item, el <article> del media y el campo de
   imagen): se aplanan para que el ancho llegue entero hasta la imagen, que si
   no se queda en su tamano intrinseco y deja la columna medio vacia. */
/* El grupo tiene que ocupar su pista entera: al aplanar los envoltorios se
   quedaba con el ancho intrinseco de la imagen (480px del estilo `large`) y la
   columna salia mas estrecha que la del texto. */
#block-perugrandtravel-home-present .present-media { width: 100%; }
#block-perugrandtravel-home-present .present-media > .field,
#block-perugrandtravel-home-present .present-media .field__item,
#block-perugrandtravel-home-present .present-media article,
#block-perugrandtravel-home-present .present-media .field--name-field-media-image { display: contents; }
#block-perugrandtravel-home-present .present-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}
#block-perugrandtravel-home-award { text-align: center; }

/* La lista de premios ya no es un <ul> escrito en el editor: es un campo
   multivalor de media dentro de un field_group. Del grupo a la <img> hay
   cuatro envoltorios (el campo, su item, el <article> del media y el campo de
   imagen); se aplanan todos para que cada sello sea directamente un item del
   flex y el `gap` mida entre logos, no entre cajas vacias. */
.award-list {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  justify-content: center;
  margin: var(--sp-6) 0 0;
}
.award-list > .field,
.award-list .field__item,
.award-list article,
.award-list .field--name-field-media-icon,
.award-list .field--name-field-media-image { display: contents; }
/* Los sellos vienen en SVG cuadrado de 1080; se igualan por altura para que
   convivan con cualquier PNG que llegue despues sin descuadrar la fila. */
.award-list img {
  display: block;
  height: 96px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

/* ------------------------------------------------------------ BANDAS CTA */
#block-perugrandtravel-home-cta-tour,
#block-perugrandtravel-home-cta-news {
  position: relative;
  margin-block: var(--sp-8);
  padding: 0;
  overflow: hidden;
  background: var(--c-primary);
}
.field--name-field-bt-home-cta-tour-bg-med,
.field--name-field-bt-home-cta-news-bg-med { position: absolute; inset: 0; }
.field--name-field-bt-home-cta-tour-bg-med img,
.field--name-field-bt-home-cta-news-bg-med img { width: 100%; height: 100%; object-fit: cover; }
#block-perugrandtravel-home-cta-tour::after,
#block-perugrandtravel-home-cta-news::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(12, 25, 74, .74);
}
.cta-inner {
  position: relative; z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-7) var(--pad-x);
  color: var(--c-white);
  text-align: center;
}
.cta-inner h2 { color: var(--c-white); font-size: 24px; }
.cta-inner p { color: rgba(255,255,255,.88); }

/* El "ver todos" de la parrilla de tours va CENTRADO y en version de contorno,
   no en el naranja macizo del resto de CTAs (el "See All" de experiencias si
   es naranja). Hay que igualar la especificidad de la regla generica de
   botones —dos selectores de atributo—, si no gana ella: por eso se repite el
   `[class*="-lnk"]` en vez de escribir la clase entera. */
[class*="field--name-field-bt-home-tour"][class*="-lnk"],
[class*="field--name-field-bt-home-exp"][class*="-lnk"],
[class*="field--name-field-bt-home-blog"][class*="-lnk"] {
  margin-top: var(--sp-8);
  text-align: center;
}
[class*="field--name-field-bt-home-tour"][class*="-lnk"] a,
[class*="field--name-field-bt-home-exp"][class*="-lnk"] a,
[class*="field--name-field-bt-home-blog"][class*="-lnk"] a {
  background: transparent;
  border: 2px solid var(--c-primary);
  border-radius: var(--r-md);
  color: var(--c-primary);
}
[class*="field--name-field-bt-home-tour"][class*="-lnk"] a::after,
[class*="field--name-field-bt-home-exp"][class*="-lnk"] a::after,
[class*="field--name-field-bt-home-blog"][class*="-lnk"] a::after { content: ' →'; }
[class*="field--name-field-bt-home-tour"][class*="-lnk"] a:hover,
[class*="field--name-field-bt-home-exp"][class*="-lnk"] a:hover,
[class*="field--name-field-bt-home-blog"][class*="-lnk"] a:hover {
  background: var(--c-primary);
  color: var(--c-white);
  filter: none;
}

/* --------------------------------------------------------- CARDS DE TOUR */
#block-perugrandtravel-home-tour,
#block-perugrandtravel-home-blog,
#block-perugrandtravel-home-promise,
#block-perugrandtravel-home-exp,
#block-perugrandtravel-home-partner { padding-block: var(--sp-8); }

.view-vb-prod-home .view-content,
.view-vb-ct-blog-home .view-content {
  display: grid;
  gap: var(--sp-5);
}
.tour-card, .post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  /* La esquina la marca la tarjeta, no la imagen: con `overflow: hidden` es
     este radio el que recorta la foto de arriba. En el diseno es el grande. */
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.tour-card > .views-field, .post-card > .views-field { padding-inline: var(--sp-4); }

/* ⚠️ La foto ya NO va dentro de un fieldset de views_fieldsets. Ese modulo
   decide si pinta un grupo con `trim(strip_tags($child->content))`, o sea
   mirando si queda TEXTO: una imagen es solo <img>, asi que un grupo que solo
   lleve la foto lo daba por vacio y lo ocultaba entero. Solo se salvaban las
   tarjetas con badge, porque "Best Seller" si es texto. Ahora `card-media` es
   el wrapper del propio campo de imagen. */
/* Ese `margin: 0 -16px` que habia aqui era de cuando la foto vivia dentro de
   un fieldset con relleno lateral y tenia que sangrar hasta el borde. Al pasar
   `card-media` al envoltorio del campo —cuyo relleno ya se anula en la regla de
   abajo— el margen negativo dejo de compensar nada y sacaba la foto 16 px por
   cada lado fuera de la tarjeta: el `overflow: hidden` la recortaba y la
   pildora de la etiqueta quedaba pegada al borde redondeado, medio comida.
   Medido: tarjeta 120→531, foto 105→546. */
.card-media, .post-media { position: relative; padding: 0 !important; }
.views-field-fs-card-media, .views-field-fs-post-media { padding: 0 !important; }
.card-media img, .post-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* El badge es hermano de la foto, no hijo: se ancla a la tarjeta, que empieza
   justo donde la imagen, asi que se ve en el mismo sitio de siempre. */
.tour-card, .post-card { position: relative; }
.tour-card > .card-badge,
.card-media .views-field-field-prod-badge-ref,
.post-media .views-field-field-ct-blog-tag-ref {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}
/* Las etiquetas ya son texto, no enlaces: el color va en el propio bloque.
   Se deja el selector del <a> por si algun campo vuelve a enlazar. */
.tour-card > .card-badge,
.tour-card > .card-badge a,
.card-media .views-field-field-prod-badge-ref a,
.post-media .views-field-field-ct-blog-tag-ref a { color: var(--c-white); }
.post-media .views-field-field-ct-blog-tag-ref { background: var(--c-secondary); }
/* Sin badge no debe quedar la píldora naranja vacía. */
/* ⚠️ Ocultar el badge vacio NO puede depender de que haya un <a>: las
   etiquetas pasaron a texto plano y `:not(:has(a))` los habria escondido
   todos. Lo resuelve `hide_empty` en la vista; esto queda para el caso de que
   el campo pinte un envoltorio sin contenido. */
.card-media .views-field-field-prod-badge-ref:empty,
.tour-card > .card-badge:empty { display: none; }

/* Meta: ubicación · duración a la izquierda, rating a la derecha.
   ⚠️ Cada .views-field es un DIV de bloque; con ::before/::after los
   paréntesis se irían a su propia línea. Hay que pasarlos a inline-flex. */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.3;
}
.card-meta .views-field {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.card-meta .views-field-field-prod-dest-ref {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.card-meta .views-field-field-prod-dest-ref a { color: var(--c-muted); }
/* Los detalles marcados en el catálogo llegan como una sub-vista: se aplanan
   para que fluyan en la misma línea que el destino y el rating. */
.card-meta .views-field-field-prod-detail-parr,
.card-meta .views-element-container,
.card-meta .view-vb-prod-card-detail,
.card-meta .view-vb-prod-card-detail .view-content { display: contents; }
.card-fact-row { display: contents; }
.card-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.card-fact::before {
  content: '·';
  margin-right: var(--sp-2);
  color: var(--c-muted);
}
.card-fact img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  opacity: .75;
}
/* El rating se va al extremo derecho de la misma fila. */
.card-meta .views-field-field-prod-rate-dec {
  margin-left: auto;
  padding-left: var(--sp-3);
  color: var(--c-ink);
  font-weight: 600;
}
.card-meta .views-field-field-prod-rate-dec::before {
  content: '★';
  margin-right: 4px;
  color: var(--c-accent);
}
.card-meta .views-field-field-prod-revcnt-int { margin-left: 4px; color: var(--c-muted); }
.card-meta .views-field-field-prod-revcnt-int::before { content: '('; }
.card-meta .views-field-field-prod-revcnt-int::after { content: ')'; }

/* Cuerpo: título + descripción recortada. */
.card-body { margin-top: var(--sp-3); }
.card-body .views-field-title a,
.post-body .views-field-title a {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.card-body .views-field-title a:hover { color: var(--c-primary); }
.card-body .views-field-field-anymerce-description {
  color: var(--c-body);
  font-size: 13.5px;
  line-height: 1.55;
}
.card-body .views-field-field-anymerce-description p { margin: 0; }

/* Pie de card: precio a la izquierda, botón a la derecha, misma línea.
   El botón es un render array de formulario y NO puede ir dentro del
   fieldset (P8), así que se alinean como celdas hermanas del grid. */
.tour-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
}
/* Sin min-width:0 las celdas no encogen y el contenido nowrap desborda. */
.tour-card > .views-field { grid-column: 1 / -1; min-width: 0; }
.tour-card > .views-field-fs-card-price {
  grid-column: 1;
  align-self: center;
  padding-block: var(--sp-4);
}
.tour-card > .views-field-view-anymerce-product {
  grid-column: 2;
  align-self: center;
  padding: var(--sp-4);
}
/* Mismo motivo que en la meta: el precio es un DIV, así que "From" y
   "/person" hay que alinearlos con flex o se van a líneas sueltas. */
.card-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 700;
}
.card-price .views-field { display: inline-flex; white-space: nowrap; }
/* "From" y "/person" en 11px para que la línea entre entera junto al botón:
   el formatter de Anymerce da "690,00 USD", más largo que el "$890" del
   diseño, y a 12px se partía. */
.card-price::before, .card-price::after { font-size: 11px; }
.card-price::before {
  content: 'From ';
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 400;
}
.card-price::after {
  content: ' /person';
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 400;
}
/* El CTA de la tarjeta es un enlace a la ficha, no un boton de formulario:
   hay que devolverle `display` e `inline-size` porque un <a> no trae la caja
   que traia el input. */
.views-field-view-anymerce-product a {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  /* Esquina redondeada, NO capsula: en el diseno el boton de la tarjeta tiene
     los lados rectos. La pildora se queda para los CTA de seccion. */
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.views-field-view-anymerce-product a:hover { filter: brightness(1.07); }

/* ------------------------------------------------------------- PROMESAS */
.promise-grid .field__items { display: grid; gap: var(--sp-4); }
/* La seccion va sobre el gris de seccion: sin el, las tarjetas blancas del
   diseno no se distinguen del fondo y la franja se lee como un bloque plano. */
#block-perugrandtravel-home-promise { background: var(--c-bg-alt); }
/* Las cuatro tarjetas miden lo mismo aunque el texto sea mas corto, como en el
   diseno. La rejilla ya estira el .field__item, pero el paragraph y el
   field_group de dentro se quedaban a la altura de su contenido. */
.field--name-field-bt-home-promise-parr > .field__item > .paragraph { height: 100%; }
.promise-item {
  /* ⚠️ `box-sizing` en este theme es content-box: sin esto, el relleno SE SUMA
     al 100% y la tarjeta crece 64px por debajo del contenido. */
  box-sizing: border-box;
  height: 100%;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  text-align: center;
}
/* El icono va dentro de un recuadro azul suave, no suelto: es el envoltorio del
   propio campo el que hace de caja, asi no hace falta marcado extra. */
.promise-item .field--name-field-pt-home-promise-ico-med {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: 18px;
  background: var(--c-primary-soft);
}
.promise-item img { width: 30px; height: 30px; object-fit: contain; }
.field--name-field-pt-home-promise-tit-head { font-size: 17px; font-weight: 600; color: var(--c-ink); }
.field--name-field-pt-home-promise-desc-txl { font-size: 14px; }

/* ------------------------------------------- EXPERIENCIAS (carrusel del home)
   ⚠️ Acotado a `.view-vb-exp-home`. Estas reglas nacieron sin acotar, y cuando
   la landing `/experiences` estrenó su propia tarjeta —que reutiliza los mismos
   nombres de fieldset, `exp-media` y `exp-body`, porque describen lo mismo— se
   las llevó puestas: la píldora de la categoría salía `absolute` dentro de un
   contenedor de ancho cero y el texto se partía letra a letra. */
.view-vb-exp-home .exp-media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
/* Apaisadas, como en el diseno: las tarjetas de esta seccion son una tira, no
   la retahila vertical de la landing. */
.view-vb-exp-home .exp-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* ⚠️ `tiny_slider` NO conserva `views-row`: envuelve cada fila en `.tns-item`.
   La regla apuntaba a una clase que en el carrusel no existe, así que el
   nombre —posicionado `absolute`— se colocaba respecto de la PISTA entera y
   salía estirado 5.900 px por debajo de las cuatro tarjetas. Se deja también
   `views-row` para cuando el JS del slider no llega a arrancar. */
.view-vb-exp-home .views-row,
.view-vb-exp-home .tns-item { position: relative; }
.view-vb-exp-home .exp-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgba(10,16,40,.88));
}
.view-vb-exp-home .exp-body a { color: var(--c-white); font-size: 18px; font-weight: 700; }


/* -------------------------------------------------------------- PARTNERS */
.partner-grid .field__items {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  align-items: center; justify-content: center;
}
/* Los logos llegan en color; el gris lo pone el filtro, asi que al pasar el
   raton recuperan su color sin cargar una segunda imagen. */
.partner-item img {
  width: 108px; height: 56px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: filter .2s ease, opacity .2s ease;
}
.partner-item:hover img { filter: grayscale(0); opacity: 1; }

/* ------------------------------------------------------------------- FAQ */
#block-perugrandtravel-home-faq { background: var(--c-bg-alt); }
/* El antetitulo y el titulo se centran ellos, no el bloque: centrar el bloque
   entero arrastraria tambien el texto de las preguntas del acordeon. */
.field--name-field-bt-home-faq-eyeb-txt,
.field--name-field-bt-home-faq-tit-head { text-align: center; }
.field--name-field-bt-home-faq-tit-head { margin-bottom: var(--sp-3); }
/* FAQ no usa el envoltorio `.section-head` —centrar el bloque entero arrastraria
   el texto del acordeon—, asi que la entradilla se acota y centra ella sola,
   con las mismas medidas que las de las demas secciones. */
.field--name-field-bt-home-faq-desc-txl {
  max-width: 62ch;
  margin: 0 auto var(--sp-6);
  color: var(--c-body);
  text-align: center;
}
.field--name-field-bt-home-faq-desc-txl p { margin: 0; }
.field--name-field-bt-home-faq-tit-head :is(h2, h3) { margin: 0; }
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item {
  margin-bottom: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.faq-item summary {
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--c-secondary);
  font-size: 20px;
  line-height: 1;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 var(--sp-5) var(--sp-4); margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------- FOOTER */
/* Orden real de los sub-bloques en el DOM:
   1 logo · 2 redes · 3 contacto · 4 Our Company · 5 Our Packages
   · 6 Information · 7 pagos · 8 copyright.
   Igual que en el header, el layout va en el hijo directo .field de
   .foot-cols, no en el field_group. */
/* El azul NO va en la region sino en el envoltorio de los sub-bloques: por
   encima de la ilustracion tiene que verse el fondo de la pagina, como en el
   diseno. Si se pinta la region entera, la parte transparente que el SVG deja
   sobre las montanas se rellena de azul y el degradado desaparece. */
.region-footer {
  position: relative;
  color: rgba(255,255,255,.78);
}
/* El azul lo pinta .foot-cols, que va a ancho de ventana; el limite de anchura
   baja al .field de dentro. Si se queda en .foot-cols, la banda azul se corta a
   1440 y por los lados asoma el fondo de la pagina. */
.foot-cols { background: var(--c-primary); padding-block: var(--sp-7); }
.foot-cols > .field {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.region-footer a { color: rgba(255,255,255,.78); }
.region-footer a:hover { color: var(--c-white); }
/* El logo de marca lleva el "PERÚ" en azul oscuro: sobre el footer azul
   desaparece. Se pasa a blanco por filtro en vez de servir otro archivo. */
#block-perugrandtravel-foot .site-logo img {
  max-height: 54px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Títulos de columna: versalitas con subrayado corto naranja. */
/* La columna de contacto lleva el mismo rotulo que las de enlaces. */
.field--name-field-bt-foot-contact-tit-head,
.field--name-field-bt-foot-links-tit-head {
  position: relative;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field--name-field-bt-foot-contact-tit-head :is(h1, h2, h3, h4),
.field--name-field-bt-foot-links-tit-head :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--c-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field--name-field-bt-foot-contact-tit-head::after,
.field--name-field-bt-foot-links-tit-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 34px; height: 2px;
  background: var(--c-accent);
}

/* ⛔ Los enlaces del footer NO son botones. La regla genérica de botones usa
   dos selectores de atributo, así que gana a una sola clase: hace falta
   subir la especificidad con .region-footer para desactivarla. */
.region-footer .field--name-field-bt-foot-links-lnk .field__item {
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.region-footer .field--name-field-bt-foot-links-lnk .field__item:last-child {
  border-bottom: 0;
}
.region-footer .field--name-field-bt-foot-links-lnk a {
  display: block;
  padding: var(--sp-3) 0;
  border-radius: 0;
  background: none;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 400;
  transform: none;
  filter: none;
}
.region-footer .field--name-field-bt-foot-links-lnk a:hover {
  background: none;
  color: var(--c-white);
  transform: none;
}

/* Contacto. */
.foot-contact .contact-item {
  align-items: flex-start;
  margin-bottom: var(--sp-3);
  font-size: 14px;
}
.foot-contact .field--name-field-pt-foot-contact-lab-txt { display: none; }
/* El nombre de la empresa es el primer dato y va destacado. */
.foot-contact .field__item:first-child .contact-item a {
  color: var(--c-white);
  font-weight: 700;
}
.foot-contact .contact-item img { width: 18px; height: 18px; margin-top: 3px; object-fit: contain; }

/* Barra inferior: redes · copyright · pagos. */
.social-row .field__items { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* 24 + 16 de relleno = circulo de 40: las cinco redes del diseno entran en
   una fila dentro de los 296 de la columna (5x40 + 4x12 = 248). Con los 52 de
   antes sumaban 308 y TikTok caia a una segunda fila. */
.social-item img {
  width: 24px; height: 24px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  object-fit: contain;
}
.social-item .field--name-field-pt-foot-social-lnk { display: none; }

.foot-pay .field__items { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* 48+16 = 64 de caja: las cuatro pasarelas del diseno entran en una sola fila
   dentro de los 296 de la columna (4x64 + 3x12 = 292). */
.foot-pay img {
  width: 48px; height: 26px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--c-white);
  object-fit: contain;
}

.field--name-field-bt-foot-legal-txl { font-size: 13px; text-align: center; }
.field--name-field-bt-foot-legal-txl p { margin: 0; }

/* La ilustracion del pie ES el fondo, y vive en un media editable
   (field_bt_foot_bg_med), no en una URL del tema: cambiando ese media cambia
   la cabecera del footer sin tocar CSS. El SVG viene recortado a la banda del
   arte (viewBox 0 130 1920 270) y su base es `#193ABA`, el mismo --c-primary
   del footer, asi que la union no se ve. Va a ancho completo y con la altura
   que le toque por proporcion: nunca se recorta la montana. */
.field--name-field-bt-foot-bg-med { display: block; }
.field--name-field-bt-foot-bg-med img {
  display: block;
  width: 100%;
  height: auto;
  /* Cierra la raya clara que deja el redondeo subpixel entre el borde inferior
     de la ilustracion y el azul de .foot-cols. */
  margin-bottom: -1px;
}

/* La vista Frontpage de core queda muda en un home block-driven. */
.path-frontpage .view-frontpage { display: none; }

/* ====================================================== FICHA DE TOUR (PDP) */
/* La CABECERA (migas · pildoras · H1 · rating · galeria) la pinta la vista
   `vb_prod_header` en la region `slider`, que el theme saca antes del
   contenedor. Antes vivia dentro del render de la entidad y el orden lo
   sostenia un `order` de CSS, porque el titulo de un producto de Anymerce no
   es configurable en display y el bloque `page_title` solo podia ir entero
   encima o entero debajo de la entidad. Como vista, el H1 es un campo mas:
   el orden lo decide Views y la posicion la region. Ni un `order` aqui. */

/* El theme no trae border-box global; se acota a la ficha para no mover el
   home. La cabecera vive en otra region, asi que entra tambien. */
.path-product .region-content,
.path-product .region-content *,
.path-product .region-content *::before,
.path-product .region-content *::after,
.path-product .region-slider,
.path-product .region-slider *,
.path-product .region-slider *::before,
.path-product .region-slider *::after { box-sizing: border-box; }

/* Un solo sitio donde se fija el ancho de la ficha. Los envoltorios que Views
   mete entre el bloque y la fila no pintan nada: se aplanan. */
.path-product .region-slider .views-element-container,
.path-product .region-slider .view-vb-prod-hero,
.path-product .region-slider .view-vb-prod-hero > .view-content { display: contents; }
/* ⚠️ `content-box` a proposito, y no es un descuido. El envoltorio de `main`
   —que es quien fija el ancho del resto de la pagina— queda FUERA del
   `border-box` que se acota arriba a las regiones de la ficha, asi que suma el
   relleno al max-width: 1280 + 80 = 1360 de caja, y su contenido arranca en
   120. Aqui, en `border-box`, el mismo CSS daba 1280 de caja y el contenido
   empezaba en 160: el titulo y la galeria salian 40px a la derecha de las
   migas y del texto de debajo. Medido en la ficha. */
/* ⚠️ El max-width lleva sumado el relleno, y no es un descuido. El envoltorio
   de `main` —que fija el ancho del resto de la pagina— queda FUERA del
   `border-box` que se acota arriba a las regiones de la ficha: al ser
   content-box suma el relleno y su caja real mide 1280+80, con el contenido
   arrancando en 120. Aqui, en border-box, `max-width: 1280` daba 1280 de caja
   y el contenido empezaba en 160, o sea el titulo y la galeria 40px a la
   derecha de las migas y del texto. Sumarlo en el max-width iguala las dos
   cajas; poner `box-sizing: content-box` NO vale, porque
   `.path-product .region-slider *` es mas especifico y gana. */
.pdp-hero,
.path-product .pdp-body {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* Los campos de la vista son cajas sueltas dentro de la fila; los que solo
   envuelven se aplanan para que manden los fieldsets. */
.pdp-hero > .views-field,
.pdp-hero > .views-field > .field-content { display: contents; }

/* Migas en linea, sin banda. La banda gris pretendia ir a sangre, pero el
   bloque es una celda del grid del contenedor: se quedaba en el ancho de la
   columna de contenido y se leia como un recuadro suelto en mitad de la
   pagina. Y el relleno lateral la desalineaba 40px del texto de debajo. */
.path-product #block-perugrandtravel-breadcrumbs {
  padding: 0;
  margin-bottom: var(--sp-5);
  background: none;
}
.path-product #block-perugrandtravel-breadcrumbs .breadcrumb {
  max-width: var(--wrap);
  margin-inline: auto;
}
.path-product .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-muted);
  font-size: 13px;
}
.path-product .breadcrumb li + li::before {
  content: '›';
  margin-right: var(--sp-2);
  color: var(--c-muted);
}

/* Píldoras de cabecera. */
/* Dos pildoras sobre el H1: el TIPO de tour y el distintivo comercial. Las
   dos las emite la vista `vb_prod_badges` desde un solo campo, porque el de
   detalles ya esta ocupado en los datos rapidos y un campo solo puede vivir en
   un field_group. Son etiquetas, no enlaces. */
.pdp-badges { margin-top: var(--sp-6); }
/* La fila la materializa la VISTA (fieldset `pdp-badge-pair`, I22.b), no una
   clase inventada aqui; entre el grupo y ella hay envoltorios de views que se
   aplanan. `.field-content` se aplana solo donde envuelve otra cosa: los dos
   que llevan texto SON las pildoras. */
.pdp-badges .field,
.pdp-badges .views-element-container,
.pdp-badges .view,
.pdp-badges .view-content,
.pdp-badges .views-row,
.pdp-badges .views-field-fs-pdp-badges,
.pdp-badges .views-field-fs-pdp-badges > .field-content,
.pdp-badges .views-field-fs-pdp-badge,
.pdp-badges .views-field-fs-pdp-badge > .field-content,
.pdp-badges .views-field-field-prod-detail-parr,
.pdp-badges .views-field-field-prod-detail-parr > .field-content,
.pdp-badges .views-field-field-pt-prod-detail-txt,
.pdp-badges .views-field-field-prod-badge-ref { display: contents; }
.pdp-badge-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.pdp-badges .views-field-field-prod-badge-ref > .field-content,
.pdp-badges .pdp-badge {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* El tipo de tour: azul, como el diseno. */
.pdp-badges .pdp-badge {
  background: rgba(25, 58, 186, .1);
  color: var(--c-primary);
}
/* El distintivo comercial: naranja. */
.pdp-badges .views-field-field-prod-badge-ref > .field-content {
  background: rgba(247, 147, 30, .14);
  color: var(--c-accent);
}

.path-product .page-title { margin: var(--sp-3) 0 var(--sp-2); }

/* Rating · reseñas · destinos, bajo el H1. */
.pdp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) 6px;
  margin-bottom: var(--sp-5);
  color: var(--c-muted);
  font-size: 14px;
}
.pdp-sub > .views-field { display: inline-flex; align-items: center; }
.pdp-sub .views-field-field-prod-rate-dec { color: var(--c-ink); font-weight: 600; }
.pdp-sub .views-field-field-prod-rate-dec::before {
  content: '★★★★★';
  margin-right: var(--sp-2);
  color: var(--c-accent);
  letter-spacing: 2px;
}
.pdp-sub .views-field-field-prod-revcnt-int { margin-left: 4px; }
.pdp-sub .views-field-field-prod-revcnt-int::before { content: '('; }
.pdp-sub .views-field-field-prod-revcnt-int::after { content: 'reviews)'; margin-left: .3em; }
/* El punto separador del diseno. Va como fondo y no como pseudo-elemento
   porque el ::before de este campo ya lo ocupa el marcador de mapa. */
.pdp-sub .views-field-field-prod-dest-ref {
  margin-left: var(--sp-4);
  padding-left: 15px;
  background: radial-gradient(circle at 3px 50%, currentColor 1.5px, transparent 1.7px) no-repeat left center;
}
/* El diseno pone un marcador de mapa, no un punto. Va como mascara para que
   tome el color del texto de la linea. */
.pdp-sub .views-field-field-prod-dest-ref::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background-color: currentColor;
  -webkit-mask: var(--pdp-pin) center / contain no-repeat;
  mask: var(--pdp-pin) center / contain no-repeat;
}
.pdp-sub {
  --pdp-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.pdp-sub .views-field-field-prod-dest-ref .field-content { display: inline; }

.pdp-sub .views-field-field-prod-dest-ref a { color: var(--c-muted); }

/* Galería. gallery_engine ya monta la rejilla imagen + tira; aquí solo se
   ajustan sus tokens y, en móvil, se pasa la tira a fila. */
/* Las medidas de la galeria se declaran en .pdp-media y no en el wrapper
   porque las pildoras son HERMANAS de la galeria, no descendientes: puestas
   en el wrapper, el `calc()` del `right` de .pdp-actions queda invalido y la
   barra se va a la izquierda sin decir nada. */
.pdp-media { position: relative; margin-bottom: var(--sp-6); }
/* Medidas del diseno, normalizadas al ancho del contenido (1120):
     tira 155 / imagen 955 / hueco 10  →  la tira ocupa el 13,8% del ancho
     miniatura 155x91 (proporcion 1,70) y cuatro de ellas + 3 huecos = 382,
     que es justo el alto de la imagen grande a 5/2.
   Cuadra porque la tira es una VENTANA de cuatro (`thumb_max` en S05): si
   mostrara todas, cinco miniaturas en 382 saldrian a 1,70 solo por
   casualidad, y con seis fotos ya no. */
/* Las medidas viven en variables PROPIAS del bloque, no en las del modulo:
   el modulo declara `--ge-thumb-width` en el propio wrapper, asi que un valor
   puesto en .pdp-media no entra ahi dentro —la declaracion local gana a la
   heredada— y la tira se quedaba en los 100 px de fabrica. Desde aqui se
   reparten a los dos sitios que las necesitan. */
/* La galeria tambien llega por vista (`vb_prod_gallery` anidada), asi que
   entre .pdp-media y el wrapper del modulo hay otra tanda de envoltorios. */
.pdp-media > .views-field,
.pdp-media > .views-field > .field-content,
.pdp-media .views-field-field-anymerce-media .views-element-container,
.pdp-media .view-vb-prod-gallery,
.pdp-media .view-vb-prod-gallery > .view-content { display: contents; }
.pdp-media {
  --pdp-thumb-w: 155px;
  --pdp-thumb-h: 91px;
  --pdp-gal-gap: 10px;
  /* Separacion de las pildoras respecto al borde de la imagen. */
  --pdp-gal-inset: 28px;
}
.pdp-media .gallery-engine-wrapper.gallery-engine-wrapper {
  --ge-gap: var(--pdp-gal-gap);
  --ge-thumb-width: var(--pdp-thumb-w);
  --ge-thumb-height: var(--pdp-thumb-h);
  --ge-thumb-gap: 6px;
  --ge-thumb-radius: 10px;
  /* En el diseno las cuatro miniaturas estan a color pleno; el modulo apaga
     por defecto las que no se ven para senalar la activa. */
  --ge-thumb-dim: 1;
}
.pdp-media .gallery-engine-wrapper .gallery-engine-mainimage img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.pdp-media .gallery-engine-wrapper .gallery-engine-thumbs img { border-radius: var(--ge-thumb-radius); }
/* La tira desplaza —hay mas fotos que la ventana de cuatro— y el modulo deja
   la barra a la vista a proposito, para que se note. Aqui estorba: se come 10
   de los 155 y la miniatura sale a 1,59 en vez de a 1,70. Se quita porque lo
   que la tira se mueve ya lo dicen dos cosas: el contador y las flechas, que
   son justo las que la arrastran. */
.pdp-media .gallery-engine-wrapper .gallery-engine-thumbs { scrollbar-width: none; }
.pdp-media .gallery-engine-wrapper .gallery-engine-thumbs::-webkit-scrollbar { width: 0; height: 0; }
/* La activa se marca con un aro, no apagando las demas. Va POR DENTRO
   (`offset` negativo) porque la tira desplaza y un aro por fuera lo recorta
   el overflow. */
.pdp-media .gallery-engine-wrapper .gallery-engine-thumb.active img { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.pdp-media .gallery-engine-wrapper.gallery-engine--thumbs-after { grid-template-columns: minmax(0, 1fr); }
.pdp-media .gallery-engine-wrapper.gallery-engine--thumbs-after .gallery-engine-thumbs {
  grid-row: auto;
  grid-column: 1;
  width: auto;
  flex-direction: row;
  margin-top: var(--sp-3);
}
/* Prev/next y contador: sin estilar salen como dos barras grises a todo el
   ancho bajo la imagen. El diseno navega por miniaturas, asi que se recogen
   como controles pequenos sobre la esquina inferior izquierda.
   El modulo coloca los tres como items de rejilla —prev arriba de la tira,
   next debajo, contador bajo la imagen— y los deja movibles a proposito
   (`.gallery-engine-actions { display: contents }`). Aqui se reagrupan en una
   barra flotante, que es lo que pide el diseno. */
.pdp-media .gallery-engine-wrapper .gallery-engine-actions {
  position: absolute;
  left: var(--pdp-gal-inset);
  bottom: var(--pdp-gal-inset);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
/* Dentro de la barra ya no son celdas de la columna de la tira: hay que
   soltar el ancho y el fondo que el modulo les da para esa posicion, o salen
   como dos losas grises del ancho de una miniatura. */
.pdp-media .gallery-engine-wrapper .gallery-engine-prev,
.pdp-media .gallery-engine-wrapper .gallery-engine-next {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  background: none;
}
.pdp-media .gallery-engine-wrapper .gallery-engine-prev a,
.pdp-media .gallery-engine-wrapper .gallery-engine-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: transparent;
  font-size: 0;
  box-shadow: var(--shadow-card);
}
.pdp-media .gallery-engine-wrapper .gallery-engine-prev a::before,
.pdp-media .gallery-engine-wrapper .gallery-engine-next a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--c-ink);
  border-right: 2px solid var(--c-ink);
}
.pdp-media .gallery-engine-wrapper .gallery-engine-prev a::before { transform: rotate(-135deg); margin-left: 4px; }
.pdp-media .gallery-engine-wrapper .gallery-engine-next a::before { transform: rotate(45deg); margin-right: 4px; }
.pdp-media .gallery-engine-wrapper .gallery-engine-nav--off a { opacity: .4; }
.pdp-media .gallery-engine-wrapper .gallery-engine-counter {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

/* Map / Brochure, sobre la esquina de la imagen grande. */
.pdp-actions {
  position: absolute;
  right: var(--pdp-gal-inset);
  bottom: var(--pdp-gal-inset);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Tres pildoras: Map y Brochure salen de campos del producto; Gallery la
   anade scripts.js porque no hay nada que el editor tenga que escribir. */
.pdp-actions a,
.pdp-actions .pdp-gallery-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
/* El iconito de cada pildora. Ninguna de las tres puede traerlo del contenido:
   Map es un campo `link` (no admite media), Brochure pinta el enlace del
   archivo y Gallery no es un campo. Va como mascara para que el dibujo tome el
   color del texto y cambie con el :hover, en vez de como imagen de fondo. */
.pdp-actions a::before,
.pdp-actions .pdp-gallery-pill::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--pdp-pill-icon) center / contain no-repeat;
  mask: var(--pdp-pill-icon) center / contain no-repeat;
}
.pdp-actions .views-field-field-prod-map-lnk a {
  --pdp-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.pdp-actions .file a {
  --pdp-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.pdp-actions .pdp-gallery-pill {
  --pdp-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='m4 17 5-5 4 4 3-2 4 4'/%3E%3C/svg%3E");
}
.pdp-actions a:hover,
.pdp-actions .pdp-gallery-pill:hover { color: var(--c-primary); }
/* El folleto llega envuelto en su media: se aplana para que la pildora sea el
   enlace y no herede el bloque del documento. El <span class="file"> del
   formatter pinta ademas el iconito rojo de PDF del theme base con un
   background, que aqui sobra: la pildora lleva su propio rotulo. */
.pdp-actions .views-field,
.pdp-actions .views-field > .field-content,
.pdp-actions .field--name-field-prod-broch-med,
.pdp-actions .media--type-document,
.pdp-actions .media--type-document > .field,
.pdp-actions .field__item,
.pdp-actions .file { display: contents; }

/* Los cinco datos rápidos. La versalita es la LABEL del propio campo. */
.pdp-facts {
  margin-bottom: var(--sp-7);
}
/* La rejilla va en la caja cuyos hijos SON los parrafos, no en `.pdp-facts`:
   asi entre la rejilla y sus items no queda ningun envoltorio que aplanar.
   (El separador de Views, que metia una coma entre valor y valor y por tanto
   un item anonimo por coma, se apaga en S06 — no se arregla desde aqui.) */
.pdp-facts .views-field-field-prod-detail-parr-1 { display: contents; }
.pdp-facts .views-field-field-prod-detail-parr-1 > .field-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
/* Patron 13: la etiqueta la trae la vista del catalogo (con su icono) y el
   valor lo pone el paragraph. Antes eran cinco campos con `label: above`. */
/* El item de la rejilla es el PARRAFO; la tarjeta lo rellena. */
.pdp-facts .paragraph--type--pt-prod-detail { min-width: 0; }
/* La tarjeta del diseno son DOS columnas: el icono en una pastilla a la
   izquierda, y a su derecha la etiqueta encima del valor. El icono y la
   etiqueta llegan en el mismo fieldset de la vista y el valor en otro, asi que
   se aplana todo hasta que los TRES sean items de una rejilla de la tarjeta.
   Asi no hace falta rehacer la vista para cambiar la disposicion. */
.fact-item {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  row-gap: 1px;
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-white);
}
.fact-item .field--name-field-pt-prod-detail-ref,
.fact-item .views-element-container,
.fact-item .view-vb-trip-detail,
.fact-item .view-content,
.fact-item .views-row,
.fact-item .views-field-fs-fact-head,
.fact-item .views-field-fs-fact-head > .field-content,
.fact-item .fact-head,
.fact-item .views-field-fs-fact-value,
.fact-item .views-field-fs-fact-value > .field-content,
.fact-item .fact-value { display: contents; }
/* La pastilla del icono, ocupando las dos filas. */
.fact-item .views-field-field-tax-trip-detail-ico-med {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(25, 58, 186, .07);
}
.fact-item .views-field-field-tax-trip-detail-ico-med img,
.fact-item .views-field-field-tax-trip-detail-ico-med svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
/* Etiqueta y valor, apilados en la segunda columna. */
.fact-item .views-field-name {
  grid-column: 2;
  align-self: end;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fact-item .views-field-field-pt-prod-detail-txt {
  grid-column: 2;
  align-self: start;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Cuerpo. */
.pdp-body { display: grid; gap: var(--sp-7); margin-bottom: var(--sp-8); }
.pdp-about { margin-bottom: var(--sp-6); }

/* Pestañas. Cada pestaña es un paragraph con rótulo y contenido; el contenido
   se escribe entero en CKEditor. La barra la monta el JS del theme leyendo el
   rótulo de cada panel, así que el número, el nombre y el orden los pone el
   editor. Sin JS quedan apilados con su título y se lee entero. */
.prod-tabs { margin-top: var(--sp-6); }
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-line);
}
.tab-nav li { margin: 0; padding: 0; }
.tab-nav__btn {
  padding: var(--sp-3) 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--c-body);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tab-nav__btn:hover { color: var(--c-primary); }
.tab-nav__btn.is-active {
  border-bottom-color: var(--c-primary);
  color: var(--c-primary);
}
.tab-panel + .tab-panel { margin-top: var(--sp-7); }
.tab-label {
  margin-bottom: var(--sp-4);
  color: var(--c-ink);
  font-size: 18px;
  font-weight: 700;
}
.tab-body { color: var(--c-body); }
.tab-body h3 { font-size: 18px; margin: var(--sp-6) 0 var(--sp-4); }
.tab-body > .field__item > :first-child { margin-top: 0; }

/* Tipografía del contenido de la pestaña. Es lo mínimo para que lo que salga
   de CKEditor se lea bien: NO hay clases de diseño, el editor compone con las
   opciones nativas (encabezados, listas, tablas, negrita, el botón Contenedor,
   que trae sus propios bordes y fondos). Los estilos de marca que había están
   aparcados en diseno-perugrandtravel/fase-b-pdp/estilos-ckeditor-pdp.txt. */
.tab-body h2,
.tab-body h3,
.tab-body h4 { margin: var(--sp-6) 0 var(--sp-3); }
.tab-body > .field__item > :first-child { margin-top: 0; }
.tab-body ul,
.tab-body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.tab-body li { margin-bottom: var(--sp-2); }
.tab-body table {
  width: 100%;
  margin-bottom: var(--sp-4);
  border-collapse: collapse;
}
.tab-body th,
.tab-body td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  text-align: left;
}
.tab-body th { background: var(--c-bg-alt); color: var(--c-ink); font-weight: 600; }
.tab-body img { border-radius: var(--r-md); }

/* Tarjeta lateral. Vive en la region `sidebar_right` y son DOS bloques: la
   vista con el precio y la compra, y el contenedor con lo constante. La
   tarjeta blanca es la region entera, asi que los dos se ven como una sola. */
.path-product .region-sidebar-right {
  align-self: start;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.path-product .region-sidebar-right .views-element-container,
.path-product .region-sidebar-right .view-vb-prod-aside,
.path-product .region-sidebar-right .view-vb-prod-aside > .view-content,
.path-product .region-sidebar-right .pdp-buy,
.path-product .region-sidebar-right .pdp-buy > .views-field,
.path-product .region-sidebar-right .pdp-buy > .views-field > .field-content { display: contents; }
.pdp-price { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
/* El rotulo lo pone la LEYENDA del fieldset de la vista, no un field_group. */
.pdp-price h4,
.pdp-price .views-field-pdp-price-label {
  display: block;
  margin: 0 0 var(--sp-1);
  padding: 0;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-price .views-field-field-anymerce-price,
.pdp-price .field--name-field-anymerce-price {
  display: inline-block;
  color: var(--c-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
}
.pdp-price .views-field-field-prod-pxnote-txt,
.pdp-price .field--name-field-prod-pxnote-txt {
  display: inline-block;
  margin-left: 6px;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 400;
}
.pdp-price .views-field-field-prod-pxnote-txt::before,
.pdp-price .field--name-field-prod-pxnote-txt::before { content: '/ '; }

.path-product .region-sidebar-right .anymerce-add-to-cart { padding: 0 var(--sp-5) var(--sp-5); }
.path-product .region-sidebar-right .anymerce-quantity { margin-bottom: var(--sp-3); }
.path-product .region-sidebar-right .anymerce-quantity label {
  display: block;
  margin-bottom: 4px;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.path-product .region-sidebar-right .anymerce-quantity__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-base);
  font-size: 14px;
}
.path-product .region-sidebar-right .anymerce-add-to-cart-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.path-product .region-sidebar-right .anymerce-add-to-cart-btn:hover { filter: brightness(1.07); }
.path-product .region-sidebar-right .url-textfield { display: none; }

/* Linea de separacion entre las piezas del contenedor. */
.path-product .region-sidebar-right .field--name-field-bt-prod-side-bloqs-bp > .field__item + .field__item {
  border-top: 1px solid var(--c-line);
}
/* Y entre el bloque del precio y el del contenedor. */
.path-product .region-sidebar-right .block + .block { border-top: 1px solid var(--c-line); }
.path-product .region-sidebar-right .prod-quote { padding: 0 var(--sp-5) var(--sp-5); }
/* ⛔ La regla genérica de botones usa DOS selectores de atributo y también
   captura field--name-field-bt-prod-quote-lnk: hay que subir especificidad. */
.path-product .region-sidebar-right .prod-quote a,
.path-product .region-sidebar-right .prod-quote .field__item > span {
  display: block;
  padding: 12px 20px;
  border: 2px solid var(--c-primary);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-primary);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transform: none;
}
.path-product .region-sidebar-right .prod-quote a:hover,
.path-product .region-sidebar-right .prod-quote .field__item > span:hover {
  background: var(--c-primary);
  color: var(--c-white);
  filter: none;
  transform: none;
}

.prod-help,
.prod-pay,
.prod-trust { padding: var(--sp-5); }
.prod-help h1, .prod-help h2, .prod-help h3, .prod-help h4,
.prod-pay h1, .prod-pay h2, .prod-pay h3, .prod-pay h4,
.prod-trust h1, .prod-trust h2, .prod-trust h3, .prod-trust h4 {
  margin: 0 0 var(--sp-4);
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Tira de metodos de pago: los mismos media que el pie, en su propio bloque,
   asi que el tamano y la separacion se deciden aqui sin tocar el footer. */
.prod-pay .field--name-field-bt-prod-pay-med {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
/* Seis logos en dos filas de tres, como el diseno: con `flex: 1 1 0` los seis
   se metian en una sola fila y cada caja quedaba en nada. La rejilla reparte
   el ancho de la columna y la caja no depende de cuantos logos haya. */
.prod-pay .field--name-field-bt-prod-pay-med .field__item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  background: var(--c-white);
}
.prod-pay .field--name-field-bt-prod-pay-med img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.help-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.help-item:last-child { margin-bottom: 0; }
.help-item > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.help-item > *:nth-child(2),
.help-item > *:nth-child(3) { grid-column: 2; }
.help-item img {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  object-fit: contain;
}
.field--name-field-pt-prod-help-lab-txt {
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field--name-field-pt-prod-help-lnk a {
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 500;
}
.trust-grid .field__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.trust-item {
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-align: center;
}
.trust-item img {
  width: 22px;
  height: 22px;
  margin: 0 auto var(--sp-2);
  object-fit: contain;
}
.field--name-field-pt-prod-trust-tit-txt {
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 600;
}
.field--name-field-pt-prod-trust-sub-txt {
  color: var(--c-muted);
  font-size: 10px;
  line-height: 1.3;
}

/* Cierre: relacionados sobre banda gris y sellos sobre blanco. */
.path-product #block-perugrandtravel-prod-related {
  padding: var(--sp-8) var(--pad-x);
  background: var(--c-bg-alt);
}
.path-product #block-perugrandtravel-prod-related > * {
  max-width: var(--wrap);
  margin-inline: auto;
}
#block-perugrandtravel-prod-related h2 {
  margin-bottom: var(--sp-6);
  font-size: 26px;
}
.view-vb-prod-related .view-content { display: grid; gap: var(--sp-5); }
.path-product #block-perugrandtravel-prod-award {
  padding: var(--sp-8) var(--pad-x);
  text-align: center;
}
.path-product #block-perugrandtravel-prod-award > * {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* ================================================== DESTINOS (landing y árbol)

   Tres listados con la MISMA tarjeta y el mismo CSS, porque son tres displays
   de una sola vista:

     page_1   /destinations          rejilla de todos los destinos
     block_1  /peru, /peru/cusco…    los hijos del término de la ruta
     block_2  /destinations          el destacado, en horizontal

   El diseño no distingue la landing de la página de un destino: las dos son
   "banda de título + rótulo de sección + rejilla de tarjetas".

   ⚠️ CÓMO SE ACOTA ESTO — y cómo NO.

   NUNCA por la ruta. Un alias es contenido: cambia, se traduce, y cada término
   nuevo trae el suyo. Estilar `.path-inca-trail-tours` significa que el CSS se
   rompe en cuanto alguien crea una categoría, que es justo lo contrario de lo
   que tiene que pasar.

   El theme ya deja dos enganches estables en el <body> de una página de
   término:

     taxonomy-vocabulary--tax_dest    el vocabulario  → UNA regla, la heredan
                                      todos sus términos, hoy y los que vengan
     taxonomy-term--2                 el término concreto → solo para una
                                      excepción deliberada, nunca para el patrón

   Y en las páginas que son de VISTA y no de término —`/destinations`,
   `/experiences`— no hay clase de vocabulario, pero tampoco hace falta la de
   ruta: la propia vista se identifica con `.view-vb-dest-list.view-display-id-page_1`.

   Debajo casi todo cuelga del ID del bloque, que tampoco depende del contenido. */

/* ⚠️ AQUI NO VA NINGUNA BANDA.
   Este bloque es el titulo GENERICO: sale en toda pagina que no tenga cabecera
   propia, y eso incluye "Page not found". Pintarlo como hero convertia un 404 en
   una banda azul de 200 px con el titulo en blanco, y lo mismo habria pasado con
   cualquier pagina futura. La banda es cosa de las paginas de TERMINO y la pone
   `vb_term_hero`, que trae la foto y el lema del propio termino.
   Aqui solo ancho de lectura. */
#block-perugrandtravel-page-title {
  padding: var(--sp-7) var(--pad-x) 0;
}
#block-perugrandtravel-page-title .page-title {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* Las migas, en su propia barra clara. Una sola instancia: antes había una
   copia por contexto en `slider` y esta regla listaba los cinco IDs. */
#block-perugrandtravel-breadcrumbs {
  padding: var(--sp-3) var(--pad-x);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
}
#block-perugrandtravel-breadcrumbs .breadcrumb {
  max-width: var(--wrap);
  margin-inline: auto;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-muted);
  font-size: 13px;
}
.breadcrumb li + li::before {
  content: '›';
  margin-right: var(--sp-2);
  color: var(--c-muted);
}

/* Envoltura de las tres secciones: fondo gris y ancho de lectura. */
#block-perugrandtravel-dest-feat-child,
#block-perugrandtravel-dest-child {
  padding: var(--sp-7) var(--pad-x) 0;
  background: var(--c-bg-alt);
}
#block-perugrandtravel-dest-feat-child > *,
#block-perugrandtravel-dest-child > * {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* Rótulo de sección: la barra naranja del diseño. Vale para el rótulo de los
   dos bloques y para la cabecera de la vista de la landing, que es de donde
   sale "All Destinations". */
#block-perugrandtravel-dest-feat-child > h2,
#block-perugrandtravel-dest-child > h2,
.view-vb-dest-list .view-header {
  position: relative;
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

/* -------------------------------------------------------- LA TARJETA */
/* Los envoltorios de views_fieldsets son <span> en línea: sin esto la tarjeta
   no puede ser una columna flexible porque sus hijos reales están un nivel más
   abajo. `display: contents` los borra de la caja sin tocar el marcado. */
.view-vb-dest-list .dest-card > .views-field > .field-content { display: contents; }

.view-vb-dest-list .dest-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.view-vb-dest-list .dest-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

/* La imagen y todo lo que va ENCIMA de ella. */
.view-vb-dest-list .dest-media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--c-ink);
}
.view-vb-dest-list .dest-media .views-field-field-tax-dest-thumb-med,
.view-vb-dest-list .dest-media .field-content,
.view-vb-dest-list .dest-media article.media,
.view-vb-dest-list .dest-media .field--name-field-media-image,
.view-vb-dest-list .dest-media .field__item { height: 100%; }
.view-vb-dest-list .dest-media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo inferior: sin él el nombre en blanco se pierde en las fotos claras. */
.view-vb-dest-list .dest-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(10,16,40,0) 0%, rgba(10,16,40,.82) 100%);
}

/* El antetítulo, sobre la foto en la tarjeta pequeña. */
.view-vb-dest-list .dest-media .views-field-field-tax-dest-eyeb-txt {
  position: absolute;
  z-index: 1;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(25, 58, 186, .9);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 600;
}
/* El término raíz no tiene padre: la píldora quedaría vacía. */
.view-vb-dest-list .dest-media .views-field-field-tax-dest-eyeb-txt:empty { display: none; }

.view-vb-dest-list .dest-name {
  position: absolute;
  z-index: 1;
  inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
}
.view-vb-dest-list .dest-name .views-field-name a {
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
}
.view-vb-dest-list .dest-name .views-field-name a:hover { color: var(--c-white); }
.view-vb-dest-list .dest-name .views-field-field-tax-dest-tag-txt {
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.4;
}

/* El cuerpo empuja el pie al fondo: así todas las tarjetas de una fila
   terminan la línea de datos a la misma altura aunque el texto no cuadre. El
   `flex` va en el envoltorio del campo, que es el ítem flexible. */
.view-vb-dest-list .dest-card > .views-field-fs-dest-body { flex: 1; }
.view-vb-dest-list .dest-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.6;
}

/* Tres datos en una tarjeta de 280 px van justos: en rejilla de tres columnas
   iguales cada uno tiene su sitio, y sin `min-width: 0` una columna de rejilla
   no baja de su contenido más ancho y empuja a las otras. */
.view-vb-dest-list .dest-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-inline: var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.view-vb-dest-list .dest-foot > .views-field { min-width: 0; }
/* Rótulo encima y dato debajo: los dos salen del mismo campo Custom text. */
.view-vb-dest-list .dest-foot .stat-lab,
.view-vb-dest-list .dest-foot .stat-val { display: block; }
.view-vb-dest-list .dest-foot .stat-lab {
  color: var(--c-muted);
  font-size: 11px;
  line-height: 1.5;
}
.view-vb-dest-list .dest-foot .stat-val {
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* En la tarjeta estrecha el tercer dato va SIN rótulo y en naranja, como el
   diseño: "Tours Available" no cabe en un tercio de 280 px y el número se
   entiende solo. El texto sigue en el marcado —lo lee un lector de pantalla— y
   en la tarjeta ancha, que tiene sitio, sí se ve. */
/* Sin rótulo la celda tiene una línea menos, así que se ancla ABAJO para que
   el número quede a la altura de los otros dos valores. */
.view-vb-dest-list .dest-card:not(.dest-card--wide) .views-field-nothing-2 {
  align-self: end;
  text-align: right;
}
.view-vb-dest-list .dest-card:not(.dest-card--wide) .views-field-nothing-2 .stat-lab {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.view-vb-dest-list .dest-card:not(.dest-card--wide) .views-field-nothing-2 .stat-val {
  color: var(--c-accent);
}

/* ------------------------------------------------ EL DESTACADO (block_2) */
/* Misma tarjeta, en horizontal: la foto a un lado y la ficha al otro. En el
   destacado el distintivo del padre NO va sobre la foto sino de antetítulo,
   así que `.dest-media` se aplana con `display: contents` y sus tres piezas
   —foto, distintivo y nombre— pasan a ser celdas de la tarjeta. */
.view-vb-dest-list .dest-card--wide { display: grid; position: relative; }
.view-vb-dest-list .dest-card--wide .views-field-fs-dest-media,
.view-vb-dest-list .dest-card--wide .dest-media { display: contents; }
.view-vb-dest-list .dest-card--wide .dest-media::after { content: none; }
.view-vb-dest-list .dest-card--wide .views-field-field-tax-dest-thumb-med {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-ink);
}
.view-vb-dest-list .dest-card--wide .views-field-field-tax-dest-thumb-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view-vb-dest-list .dest-card--wide .views-field-field-tax-dest-eyeb-txt {
  position: static;
  padding: 0;
  margin: var(--sp-5) var(--sp-5) 0;
  border-radius: 0;
  background: none;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.view-vb-dest-list .dest-card--wide .dest-name {
  position: static;
  margin: var(--sp-2) var(--sp-5) 0;
}
.view-vb-dest-list .dest-card--wide .dest-name .views-field-name a {
  color: var(--c-ink);
  font-size: 26px;
}
.view-vb-dest-list .dest-card--wide .dest-name .views-field-name a:hover { color: var(--c-primary); }
.view-vb-dest-list .dest-card--wide .dest-name .views-field-field-tax-dest-tag-txt {
  color: var(--c-secondary);
  font-size: 14px;
  font-weight: 500;
}
.view-vb-dest-list .dest-card--wide .dest-body {
  flex: none;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: 14px;
}
.view-vb-dest-list .dest-card--wide .dest-foot {
  grid-template-columns: repeat(3, max-content);
  gap: var(--sp-5);
  margin-inline: var(--sp-5);
  border-top: 0;
  padding-bottom: 0;
}
/* La píldora "Featured" es un campo de texto de la vista, no un adorno del CSS:
   así el rótulo se traduce. Se ancla a la TARJETA porque en el destacado la
   foto es una celda más de la rejilla y no envuelve nada. */
.view-vb-dest-list .dest-card--wide .views-field-nothing-3 {
  position: absolute;
  z-index: 1;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 600;
}

/* Los dos botones. El primero macizo, el segundo en contorno. */
.view-vb-dest-list .dest-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) var(--sp-5) var(--sp-6);
}
.view-vb-dest-list .dest-cta a {
  display: inline-block;
  padding: 11px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 600;
  transition: filter .18s ease;
}
.view-vb-dest-list .dest-cta a:hover { filter: brightness(1.07); color: var(--c-white); }
.view-vb-dest-list .dest-cta .views-field-nothing-5 a {
  border-color: var(--c-primary);
  background: transparent;
  color: var(--c-primary);
}
.view-vb-dest-list .dest-cta .views-field-nothing-5 a:hover {
  filter: none;
  background: var(--c-primary);
  color: var(--c-white);
}

/* ---------------------------------------- LA BANDA DE UN DESTINO (block_4) */
/* La descripcion del termino sale del bloque de contenido principal, que no
   lleva contenedor: en /packages el texto iba de 0 a 1521 mientras el titulo y
   las migas estaban en 120→1400, o sea era lo unico de la pagina sin alinear.
   Se le da la misma caja que al resto para que arranque bajo el titulo. */
.path-taxonomy #block-perugrandtravel-content {
  /* `border-box` explicito: aqui el reseteo no llega y con `content-box` el
     relleno se SUMA al max-width (1360 + 80 = 1440) y el texto se quedaba 40 px
     por fuera del titulo a cada lado. */
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad-x) * 2);
  margin-inline: auto;
  padding: var(--sp-6) var(--pad-x);
}
.path-taxonomy #block-perugrandtravel-content p { margin: 0 0 var(--sp-4); }
.path-taxonomy #block-perugrandtravel-content p:last-child { margin-bottom: 0; }

/* Sustituye al bloque `page_title`, que solo sabía pintar el nombre. Aquí van
   nombre y lema sobre la foto del propio destino. */
.view-display-id-block_4 .view-content,
.view-display-id-block_4 .dest-hero,
.view-vb-term-hero .view-content,
.view-vb-term-hero .dest-hero { display: contents; }
#block-perugrandtravel-dest-hero,
#block-perugrandtravel-term-hero-exp,
#block-perugrandtravel-term-hero-cat {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
/* La foto de fondo. El selector NO nombra el campo de un vocabulario concreto:
   la vista declara los tres y solo pinta el que tiene valor, asi que se engancha
   por el sufijo y sirve para el que venga.
   ⚠️ Van los DOS sufijos. Cuando las taxonomias estrenaron pareja miniatura +
   hero, las vistas pasaron a pintar `_hero_med` y aqui solo estaba `-thumb-med`:
   la foto se quedaba `static`, entraba en el flujo en vez de ir de fondo, y el
   velo oscuro del ::after la tapaba entera. Resultado medido en /trek: bloque
   de 850 px, azul marino y sin nada visible, con la foto de 1521x571 dentro. */
.dest-hero > .views-field[class*="-thumb-med"],
.dest-hero > .views-field[class*="-hero-med"] {
  position: absolute;
  inset: 0;
}
.dest-hero > .views-field[class*="-thumb-med"] article,
.dest-hero > .views-field[class*="-thumb-med"] .field,
.dest-hero > .views-field[class*="-thumb-med"] .field__item,
.dest-hero > .views-field[class*="-thumb-med"] .field-content,
.dest-hero > .views-field[class*="-hero-med"] article,
.dest-hero > .views-field[class*="-hero-med"] .field,
.dest-hero > .views-field[class*="-hero-med"] .field__item,
.dest-hero > .views-field[class*="-hero-med"] .field-content { height: 100%; }
#block-perugrandtravel-dest-hero img,
#block-perugrandtravel-term-hero-exp img,
#block-perugrandtravel-term-hero-cat img { width: 100%; height: 100%; object-fit: cover; }
#block-perugrandtravel-dest-hero::after,
#block-perugrandtravel-term-hero-exp::after,
#block-perugrandtravel-term-hero-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,16,40,.86) 0%, rgba(10,16,40,.45) 100%);
}
.dhero-body {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
}
.dhero-body .page-title { margin-bottom: var(--sp-2); color: var(--c-white); }
/* El lema, blanco sobre la foto. Se engancha por SUFIJO y no por el nombre de
   un campo concreto: la banda la comparten los tres vocabularios y cada uno
   trae el suyo —`_tag_txt` en destinos y categorias, `_desc_txl` en
   experiencias—. Estando solo el de destinos, en /packages y demas el lema
   heredaba el color de texto normal y se leia gris apagado sobre el azul. */
.dhero-body [class*="-tag-txt"],
.dhero-body [class*="-desc-txl"] {
  color: rgba(255, 255, 255, .88);
  font-size: 17px;
}
.dhero-body [class*="-desc-txl"] p { margin: 0; }

/* --------------------------------------------------------- LAS REJILLAS */
.view-vb-dest-list .view-content {
  display: grid;
  gap: var(--sp-4);
}

/* ------------------------------- LA PÁGINA DE UN DESTINO (landing de término)
   Aquí no hay clase de ruta a la que agarrarse —los alias son `/peru/cusco`—,
   así que todo cuelga del render del término y del bloque de sus tours. */

/* El render del término se queda vacío (ver S05): la foto y el nombre los pinta
   la banda de `slider` y la descripción sale en las tarjetas. Lo único que
   sigue emitiendo la vista de core del término es su canal RSS, que el diseño
   no tiene. */
.view-taxonomy-term .feed-icons { display: none; }

/* Los tours del destino. Las tarjetas ya se pintan solas —comparten la clase
   `tour-card` con las de la portada—; lo que faltaba era la rejilla y la
   envoltura de sección. */
#block-perugrandtravel-bvg-term-dest,
#block-perugrandtravel-bvg-term-cat,
#block-perugrandtravel-bvg-term-exp {
  padding: var(--sp-8) var(--pad-x);
  background: var(--c-bg-alt);
}
#block-perugrandtravel-bvg-term-dest > *,
#block-perugrandtravel-bvg-term-cat > *,
#block-perugrandtravel-bvg-term-exp > * {
  max-width: var(--wrap);
  margin-inline: auto;
}
#block-perugrandtravel-bvg-term-dest > h2,
#block-perugrandtravel-bvg-term-cat > h2,
#block-perugrandtravel-bvg-term-exp > h2 {
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  font-size: 19px;
}
.view-vb-prod-dest .view-content,
.view-vb-prod-cat .view-content,
.view-vb-prod-exp .view-content {
  display: grid;
  gap: var(--sp-5);
}

/* ⛔ PENDIENTE DE BORRAR — lo que queda del bloque.
   La ENVOLTURA de la pagina (fondo, ancho y rotulos de seccion) ya se retiro:
   `/experiences` y `/destinations` estan condenadas y su chrome no tenia por que
   seguir vivo. Lo unico que queda aqui es la TARJETA, que es un componente y la
   reutiliza el bloque de destacadas y el futuro nodo.
   ============================================================================
   Este CSS viste la LANDING `/experiences`, que es un display de página de
   `vb_exp_list`. Esa página se retira: la landing pasa a ser un NODO y el
   display de página de la vista se elimina, para que la URL tenga un solo
   dueño (conclusión unánime del debate, ver
   `reference_debate_landing_vocabulario_editable.md`).

   Se deja puesto —y no se borra ya— porque hoy es el único listado que existe
   y quitarlo dejaría la página rota en el interin. Se retira EN EL MISMO PASO
   en que se cree el nodo, no antes ni después.

   Qué se lleva por delante:
     · todo lo de aquí abajo hasta el fin del bloque
     · las 4 reglas de `#block-perugrandtravel-exp-pick`
     · las reglas de EXPERIENCIAS del @media de escritorio
     · el display `page_1` de `vb_exp_list` y el bloque `_exp_pick` (S06 y S08)

   ⚠️ Lo que SÍ se queda: `.exp-card` y sus piezas. La tarjeta la usa también
   el bloque de destacadas y la reutilizará el nodo; solo muere la envoltura de
   la página.
   ========================================================================== */

/* ================================================== EXPERIENCIAS (/experiences)

   Dos listados con la MISMA tarjeta, como en destinos: la rejilla de la página
   de la vista y las dos destacadas de arriba, que son la misma tarjeta en
   horizontal con la foto de fondo. La clase la pone el estilo de la vista
   (`exp-card` / `exp-card--wide`), no el id del display. */


.view-vb-exp-list .view-content {
  display: grid;
  gap: var(--sp-4);
}

/* ---------------------------------------------------------- LA TARJETA */
.view-vb-exp-list .exp-card > .views-field > .field-content { display: contents; }

.view-vb-exp-list .exp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.view-vb-exp-list .exp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.view-vb-exp-list .exp-card .exp-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-ink);
}
.view-vb-exp-list .exp-card .exp-media .views-field-field-tax-exp-viaje-thumb-med,
.view-vb-exp-list .exp-card .exp-media .views-field-field-tax-exp-viaje-thumb-med .field-content,
.view-vb-exp-list .exp-card .exp-media article.media,
.view-vb-exp-list .exp-card .exp-media .field--name-field-media-image,
.view-vb-exp-list .exp-media .field__item { height: 100%; }
.view-vb-exp-list .exp-media img { width: 100%; height: 100%; object-fit: cover; }

/* Los distintivos, en fila sobre la esquina de la foto. */
.view-vb-exp-list .exp-card .exp-tags {
  position: absolute;
  z-index: 1;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.view-vb-exp-list .exp-card .exp-tags .views-field {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(25, 58, 186, .92);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.view-vb-exp-list .exp-tags .views-field a { color: var(--c-white); }
/* La píldora de "Staff Pick" se distingue de la categoría. */
.view-vb-exp-list .exp-tags .views-field-nothing-2 { background: var(--c-accent); }

.view-vb-exp-list .exp-body { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.view-vb-exp-list .exp-card .exp-body .views-field-name a {
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.view-vb-exp-list .exp-body .views-field-name a:hover { color: var(--c-primary); }
.view-vb-exp-list .exp-card .exp-body .views-field-field-tax-exp-viaje-desc-txl {
  margin-top: var(--sp-2);
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.6;
}

/* Las tres píldoras de duración, dificultad y tamaño de grupo. */
.view-vb-exp-list .exp-card .exp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-inline: var(--sp-4);
}
.view-vb-exp-list .exp-card .exp-meta .views-field {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-bg-alt);
  color: var(--c-body);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* El cuerpo empuja el pie al fondo para que todas las tarjetas de una fila
   terminen la línea a la misma altura. */
.view-vb-exp-list .exp-card > .views-field-fs-exp-body { flex: 1; }

.view-vb-exp-list .exp-card .exp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-inline: var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.view-vb-exp-list .exp-star { color: var(--c-accent); margin-right: 3px; }
.view-vb-exp-list .exp-rate { color: var(--c-ink); font-size: 13px; font-weight: 600; }
.view-vb-exp-list .exp-rev { color: var(--c-muted); font-size: 12px; margin-left: 4px; }
.view-vb-exp-list .exp-from { color: var(--c-muted); font-size: 11px; margin-right: 4px; }
.view-vb-exp-list .exp-price { color: var(--c-primary); font-size: 16px; font-weight: 700; }

/* -------------------------------------------- LAS DOS DESTACADAS (--wide) */
/* La foto deja de ser una banda arriba y pasa a ser el FONDO de la tarjeta: el
   texto va encima, en blanco. La rejilla coloca el cuerpo cruzando el ancho y
   deja el pie a la derecha de las píldoras, que es la franja del diseño. */
.view-vb-exp-list .exp-card--wide {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto auto;
  min-height: 240px;
  background: var(--c-ink);
}
.view-vb-exp-list .exp-card--wide:hover { transform: none; }
.view-vb-exp-list .exp-card--wide .views-field-fs-exp-media {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.view-vb-exp-list .exp-card--wide .exp-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.view-vb-exp-list .exp-card--wide .views-field-fs-exp-media { position: relative; }
.view-vb-exp-list .exp-card--wide .exp-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,40,.15) 0%, rgba(10,16,40,.55) 45%, rgba(10,16,40,.9) 100%);
  pointer-events: none;
}
.view-vb-exp-list .exp-card--wide .views-field-fs-exp-body {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  flex: none;
}
.view-vb-exp-list .exp-card--wide .exp-body { padding: 0 var(--sp-5) var(--sp-3); }
.view-vb-exp-list .exp-card--wide .exp-body .views-field-name a { color: var(--c-white); font-size: 20px; }
.view-vb-exp-list .exp-card--wide .exp-body .views-field-field-tax-exp-viaje-desc-txl {
  color: rgba(255, 255, 255, .82);
}
.view-vb-exp-list .exp-card--wide .views-field-fs-exp-meta {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 3;
  align-self: center;
}
.view-vb-exp-list .exp-card--wide .exp-meta { margin: 0 0 var(--sp-5) var(--sp-5); }
.view-vb-exp-list .exp-card--wide .exp-meta .views-field {
  background: rgba(255, 255, 255, .16);
  color: var(--c-white);
}
.view-vb-exp-list .exp-card--wide .views-field-fs-exp-foot {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 3;
  align-self: center;
}
.view-vb-exp-list .exp-card--wide .exp-foot {
  margin: 0 var(--sp-5) var(--sp-5) 0;
  padding: 0;
  border-top: 0;
}
.view-vb-exp-list .exp-card--wide .exp-rate,
.view-vb-exp-list .exp-card--wide .exp-price { color: var(--c-white); }
.view-vb-exp-list .exp-card--wide .exp-rev,
.view-vb-exp-list .exp-card--wide .exp-from { color: rgba(255, 255, 255, .75); }
/* En el diseño la valoración va con las píldoras y el precio a la derecha del
   todo. Como los dos son hijos del mismo pie, aquí van juntos a la derecha: se
   pierde esa separación, pero no se esconde un dato para imitar el mockup. */
.view-vb-exp-list .exp-card--wide .exp-foot { gap: var(--sp-5); }

/* ---------------------------------- DESTACADOS DE UNA LANDING DE TERMINO */
/* La misma tarjeta de tour, en horizontal y con la foto de FONDO. Se engancha a
   la clase de fila que pone el estilo de la vista, asi que sirve igual en las
   landings de destino, de categoria y de experiencia sin repetir una regla. */
#block-perugrandtravel-feat-term-dest,
#block-perugrandtravel-feat-term-cat,
#block-perugrandtravel-feat-term-exp {
  padding: var(--sp-7) var(--pad-x) 0;
  background: var(--c-bg-alt);
}
#block-perugrandtravel-feat-term-dest > *,
#block-perugrandtravel-feat-term-cat > *,
#block-perugrandtravel-feat-term-exp > * {
  max-width: var(--wrap);
  margin-inline: auto;
}
#block-perugrandtravel-feat-term-dest > h2,
#block-perugrandtravel-feat-term-cat > h2,
#block-perugrandtravel-feat-term-exp > h2 {
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 19px;
  font-weight: 700;
}

.tour-card--wide {
  position: relative;
  /* `.tour-card` es una REJILLA con `align-content: start`; el
     `justify-content: flex-end` que habia aqui es de flex y no hacia nada, asi
     que el texto se quedaba pegado arriba en vez de apilarse sobre la foto. */
  align-content: end;
  min-height: 240px;
  border: 0;
  background: var(--c-ink);
}
/* La foto sale del flujo para que el texto se apile encima con
   `justify-content: flex-end`; si se queda dentro, titulo, meta y precio se
   montan unos sobre otros arriba.
   ⚠️ Antes esto apuntaba a `> .views-field-fs-card-media`, el fieldset que
   envolvia la foto. Cuando la foto salio del fieldset —views_fieldsets oculta
   un grupo cuyo unico hijo es una imagen— la clase `card-media` paso al
   envoltorio del propio campo y el selector dejo de casar: la ficha destacada
   se quedaba con la foto arriba y el texto debajo, como una de la parrilla. */
.tour-card--wide > .card-media {
  position: absolute;
  inset: 0;
  padding: 0;
  height: auto;
  margin: 0;
}
.tour-card--wide .card-media .field-content,
.tour-card--wide .card-media article,
.tour-card--wide .card-media .field,
.tour-card--wide .card-media .field__item { height: 100%; }
.tour-card--wide .card-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
/* El velo va sobre la foto pero por DEBAJO del texto, que sube con z-index. */
.tour-card--wide .card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,40,.15) 0%, rgba(10,16,40,.55) 45%, rgba(10,16,40,.92) 100%);
}
/* El texto sube por encima del velo. Se excluyen la foto y la pildora, que van
   fuera del flujo: esta regla tiene la MISMA especificidad que las suyas y va
   despues, asi que sin el `:not()` les devolvia `position: relative` y la foto
   se quedaba a media tarjeta mientras la pildora se estiraba en una barra
   naranja de lado a lado. */
.tour-card--wide > .views-field:not(.card-media):not(.card-badge) {
  position: relative;
  z-index: 1;
}
.tour-card--wide .card-meta { margin-top: 0; }
.tour-card--wide > .views-field:last-child { padding-bottom: var(--sp-4); }
.tour-card--wide .views-field-title a,
.tour-card--wide .views-field-title { color: var(--c-white); font-size: 20px; }
.tour-card--wide .card-meta { color: rgba(255, 255, 255, .85); }
.tour-card--wide .card-meta a { color: rgba(255, 255, 255, .85); }
/* La nota y el numero de resenas traen color propio —tinta y gris— del estilo
   de la tarjeta clara, y sobre la foto se perdian: solo se veia la estrella. */
.tour-card--wide .card-meta .views-field-field-prod-rate-dec { color: var(--c-white); }
.tour-card--wide .card-meta .views-field-field-prod-revcnt-int { color: rgba(255, 255, 255, .7); }
.tour-card--wide .views-field-field-anymerce-description {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.55;
}
.tour-card--wide .card-price,
.tour-card--wide .card-price * { color: var(--c-white); }

/* =========================================================== CONTACT US */
/* ⚠️ TODO acotado. Los enganches son el ID del bloque —que no depende del
   contenido— y `.webform--wf_cont_gen`, la clase que el theme pone en el
   <body> a partir del ID DEL WEBFORM, que es configuración.
   NUNCA `.path-contact-us`: la ruta la decide un ajuste del webform y puede
   cambiar; y nunca un bloque genérico como `page_title`, que es lo que dejó
   el 404 pintado como si fuera una banda. */

/* ------------------------------------------------------------ LA BANDA */
#block-perugrandtravel-cont-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.field--name-field-bt-cont-hero-bg-med { position: absolute; inset: 0; }
.field--name-field-bt-cont-hero-bg-med article,
.field--name-field-bt-cont-hero-bg-med .field,
.field--name-field-bt-cont-hero-bg-med .field__item { height: 100%; }
.field--name-field-bt-cont-hero-bg-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#block-perugrandtravel-cont-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 16, 40, .82) 0%, rgba(10, 16, 40, .45) 100%);
}
.cont-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
  color: var(--c-white);
}
.cont-hero-inner h1 { margin-bottom: var(--sp-3); color: var(--c-white); }
.cont-hero-inner p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, .9);
}

/* -------------------------------------------------- LA FRANJA DE CONTENIDO */
/* La región pone el fondo y el margen lateral; los bloques de dentro ya no
   ponen el suyo o se sumarían. */
body.webform--wf_cont_gen .region-content {
  padding: var(--sp-7) var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
body.webform--wf_cont_gen .region-content > * { padding-inline: 0; }

/* Rótulo de entrada con la barra naranja, igual que los de destinos. */
.cont-intro { max-width: var(--wrap); margin-inline: auto; }
.cont-intro h2 {
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 22px;
  line-height: 1.2;
}
.cont-intro p { margin: 0 0 var(--sp-6); max-width: 78ch; }

/* ---------------------------------------------- LA TARJETA DEL FORMULARIO */
/* `webform_section` emite <section class="webform-section"> con su <h2>: la
   tarjeta blanca del diseño sale del propio formulario, sin plantilla. */
.webform--wf_cont_gen .form-item { margin-bottom: var(--sp-4); }
.webform--wf_cont_gen .form-item label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 600;
}
.webform--wf_cont_gen .form-text,
.webform--wf_cont_gen .form-email,
.webform--wf_cont_gen .form-tel,
.webform--wf_cont_gen .form-select,
.webform--wf_cont_gen .form-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.45;
}
.webform--wf_cont_gen .form-textarea { min-height: 130px; resize: vertical; }
.webform--wf_cont_gen .form-text:focus,
.webform--wf_cont_gen .form-email:focus,
.webform--wf_cont_gen .form-tel:focus,
.webform--wf_cont_gen .form-select:focus,
.webform--wf_cont_gen .form-textarea:focus {
  border-color: var(--c-secondary);
  outline: 2px solid rgba(29, 161, 242, .35);
  outline-offset: 1px;
}
.webform--wf_cont_gen ::placeholder { color: var(--c-muted); opacity: 1; }

/* La separación de las dos filas la da el gap, no los márgenes de Webform: a
   partir de 768 px `webform.element.flexbox.css` pone `margin: 0 0.5em` en
   cada columna y `margin: 0` en el .form-item de dentro. */
.webform--wf_cont_gen .webform-flexbox { margin: 0 0 var(--sp-4); gap: var(--sp-4); }
.webform--wf_cont_gen .webform-flex--container { margin: 0; }
.webform--wf_cont_gen .webform-flex--container > .form-item { margin: 0; }

.webform--wf_cont_gen .webform-section {
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.webform--wf_cont_gen .webform-section-title {
  margin-bottom: var(--sp-5);
  font-size: 20px;
}

/* El botón naranja, centrado. */
.webform--wf_cont_gen .webform-actions {
  margin-top: var(--sp-5);
  text-align: center;
}
/* ⚠️ La flecha es DECORACIÓN y por eso NO va en el texto del botón: un lector
   de pantalla la leería y habría que repetirla en cada traducción. Va como
   `background-image` y no como `::after` porque el botón que emite
   `webform_actions` es un <input type="submit"> —elemento REEMPLAZADO— y ahí
   los pseudo-elementos no se generan. El efecto es el mismo: dibujo puro,
   fuera del árbol accesible y fuera del .po. */
.webform--wf_cont_gen .webform-button--submit {
  padding: 13px 48px 13px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 16px 16px;
  color: var(--c-white);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.webform--wf_cont_gen .webform-button--submit:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* La confirmación responde en la misma página (confirmation_type: message). */
.webform--wf_cont_gen .webform-confirmation {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------- LA TARJETA "OUR HQ" */
.cont-hq-card {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.cont-hq-card .field--name-field-bt-cont-hq-tit-head h2 {
  margin-bottom: var(--sp-3);
  font-size: 20px;
}
.cont-hq-card .field--name-field-bt-cont-hq-desc-txl p {
  margin: 0;
  font-size: 15px;
}
.field--name-field-bt-cont-hq-item-parr {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
/* Cada dato: pastilla del ícono a la izquierda ocupando las dos filas, rótulo
   pequeño gris arriba y valor en negrita debajo. Mismo patrón que el dato
   rápido de la ficha de tour. */
.hq-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: center;
}
.hq-item .field--name-field-pt-cont-hq-item-ico-med {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(247, 147, 30, .12);
}
.hq-item .field--name-field-pt-cont-hq-item-ico-med img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.field--name-field-pt-cont-hq-item-lab-txt {
  grid-column: 2;
  align-self: end;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field--name-field-pt-cont-hq-item-val-txt {
  grid-column: 2;
  align-self: start;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* El aviso del final, en caja con fondo suave. */
.cont-hq-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
}
.field--name-field-bt-cont-hq-note-tit-txt {
  margin-bottom: var(--sp-1);
  color: var(--c-ink);
  font-weight: 600;
}
.cont-hq-note p { margin: 0; font-size: 14px; }
/* =========================================================== TAILOR MADE */
/* ⚠️ TODO acotado, y a lo que NO es contenido. Los dos enganches son el ID del
   bloque de Block layout y `.webform--wf_tail`, la clase que el theme pone en
   el <body> a partir del ID DEL WEBFORM —configuración, no una ruta—. Vale
   igual en `/tailor-made` y en `/tailor-made/confirmation`, que es la otra
   pantalla de la misma entrega. NUNCA `.path-tailor-made`: la ruta la decide
   `page_submit_path`, un ajuste que se cambia desde la interfaz. */

/* ------------------------------------------------------------ LA BANDA */
#block-perugrandtravel-tail-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.field--name-field-bt-tail-hero-bg-med { position: absolute; inset: 0; }
.field--name-field-bt-tail-hero-bg-med article,
.field--name-field-bt-tail-hero-bg-med .field,
.field--name-field-bt-tail-hero-bg-med .field__item { height: 100%; }
.field--name-field-bt-tail-hero-bg-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#block-perugrandtravel-tail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 16, 40, .82) 0%, rgba(10, 16, 40, .35) 100%);
}
.tail-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
  color: var(--c-white);
}
.tail-hero-inner h1 { margin-bottom: var(--sp-3); color: var(--c-white); }
.tail-hero-inner p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, .9);
}

/* -------------------------------------------------- LA FRANJA DE CONTENIDO */
body.webform--wf_tail .region-content {
  padding: var(--sp-7) var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
body.webform--wf_tail .region-content > * { padding-inline: 0; }

/* --------------------------------------------------------- HOW IT WORKS */
#block-perugrandtravel-tail-steps {
  max-width: var(--wrap);
  margin: 0 auto var(--sp-7);
}
.tail-steps-head { margin-bottom: var(--sp-6); text-align: center; }
.field--name-field-bt-tail-steps-eyeb-txt {
  margin-bottom: var(--sp-2);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tail-steps-head h2 { margin: 0; color: var(--c-ink); font-size: 24px; }

/* Las cuatro tarjetas. `counter` y no un campo de número: el "01" se deriva de
   la POSICIÓN, así que reordenar los pasos los renumera solo. Un campo
   obligaría al editor a renumerarlos a mano y a nadie le avisaría si se
   desincroniza. */
.field--name-field-bt-tail-steps-parr {
  display: grid;
  gap: var(--sp-4);
  counter-reset: tailstep;
}
.tail-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
/* El distintivo va DENTRO de la tarjeta, arriba a la izquierda, no montado
   sobre el borde. Y como ítem del flujo —no `absolute`— para que la tarjeta
   le reserve su sitio sin tener que calcular el `padding-top` a mano. */
.tail-step::before {
  counter-increment: tailstep;
  content: counter(tailstep, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
}
.field--name-field-pt-tail-step-tit-txt {
  margin-bottom: var(--sp-2);
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 600;
}
.field--name-field-pt-tail-step-txl p {
  margin: 0;
  color: var(--c-body);
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------------------------- RÓTULO DE ENTRADA DEL FORMULARIO */
#block-perugrandtravel-tail-intro { max-width: var(--wrap); margin-inline: auto; }
.field--name-field-bt-tail-intro-tit-head h2 {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 22px;
  line-height: 1.2;
}

/* --------------------------------------------- LA TARJETA DEL FORMULARIO */
/* UNA sola tarjeta con líneas divisorias, no seis tarjetas sueltas: es lo que
   pinta el diseño y hay que mirarlo de cerca para verlo. La tarjeta es el
   propio <form>, cuya clase sale del ID DEL WEBFORM —configuración, como la
   del <body>—, y las franjas son sus hijos de primer nivel: el select de
   destinos, el fieldset de tipo de viaje y las cuatro `webform_section`.
   Así la línea cruza de borde a borde y el contenido queda metido, que es lo
   que no cuadraba. */
.webform--wf_tail #block-perugrandtravel-content { max-width: var(--wrap); margin-inline: auto; }
.webform--wf_tail .webform-submission-wf-tail-form {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
/* ⚠️ RESET DE LOS FIELDSET INTERNOS. Webform envuelve en un <fieldset> todo
   grupo de opciones —duración, fechas, grupo, adultos, niños, hotel, método de
   contacto: siete— y el navegador les pone su borde `2px groove` y un relleno
   propio. Salían con recuadro y muesca de <legend>, que no está en el diseño.
   Y sobre todo: **un <fieldset> trae `min-width: min-content` de fábrica**, que
   no es la anchura automática de los demás elementos. Dentro de una columna de
   rejilla eso impide que el bloque encoja por debajo de su contenido, así que
   el formulario se desbordaba de su columna y se metía por debajo de la barra
   lateral —que además pinta por encima, porque su `position: sticky` crea
   contexto de apilamiento—. `min-width: 0` es lo que lo arregla; el borde es
   solo estética.
   Va ANTES de la regla de las franjas, que es más específica y se impone. */
.webform--wf_tail .webform-submission-wf-tail-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Las franjas. Se seleccionan por POSICIÓN en el formulario y no una a una,
   para que una sección nueva entre sola. Los campos ocultos y el señuelo
   antispam no son `.form-item` ni `fieldset`, así que quedan fuera. */
.webform--wf_tail .webform-submission-wf-tail-form > .form-item,
.webform--wf_tail .webform-submission-wf-tail-form > fieldset {
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* La primera no lleva línea: sería el borde de la tarjeta repetido. */
.webform--wf_tail .webform-submission-wf-tail-form > .form-item-wf-tail-dest { border-top: 0; }

.webform--wf_tail .form-item { margin-bottom: var(--sp-4); }
.webform--wf_tail .form-item label,
.webform--wf_tail .webform-section-title,
.webform--wf_tail .fieldset-legend {
  color: var(--c-ink);
  font-weight: 600;
}
/* ⚠️ El rótulo de una pregunta NO siempre es un <label>. Todo lo que Webform
   monta como composite —`webform_select_other`, `webform_radios_other`,
   `webform_checkboxes_other`, y los `radios`/`checkboxes` con envoltorio— saca
   su título en un <legend>, que NO cae bajo `.form-item > label` y se quedaba
   con el estilo del navegador: 16 px, 700 y en color de cuerpo, frente a los
   13/600 en tinta de los campos normales. Eran siete preguntas descuadradas.
   El <legend> va aquí y no en una regla aparte para que no se puedan
   desincronizar. */
.webform--wf_tail .form-item > label,
.webform--wf_tail fieldset > legend,
.webform--wf_tail .fieldset-legend {
  display: block;
  float: none;
  width: auto;
  margin-bottom: var(--sp-2);
  padding: 0;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 600;
}
/* Cada grupo de opciones, separado del siguiente: el hueco lo daba el relleno
   del <fieldset> que acabamos de quitar. */
.webform--wf_tail .webform-section fieldset { margin-bottom: var(--sp-5); }
.webform--wf_tail .webform-flex--container > fieldset { margin-bottom: 0; }
/* El <select> de `webform_select_other` va dentro de un `.form-item` propio
   cuyo rótulo Webform ya marca `visually-hidden` (WebformOtherBase:123), así
   que el legend es el único título: lo que sobra es el margen doble. */
.webform--wf_tail .webform-select-other--wrapper .form-item { margin-bottom: 0; }
.webform--wf_tail .webform-select-other-input { margin-top: var(--sp-3); }

/* Las DOS preguntas sueltas del principio están, en el diseño, al mismo nivel
   que los títulos de sección —no al de un rótulo de campo—, así que comparten
   tamaño con ellos. Va después de la regla de arriba para poder pisarla. */
.webform--wf_tail .webform-section-title,
.webform--wf_tail .webform-submission-wf-tail-form > .form-item-wf-tail-dest > label,
.webform--wf_tail .webform-submission-wf-tail-form > fieldset > legend {
  margin: 0 0 var(--sp-5);
  color: var(--c-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.webform--wf_tail .description,
.webform--wf_tail .webform-element-description {
  color: var(--c-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}

/* ------------------------------------ LA DESCRIPCIÓN, EN LA MISMA LÍNEA */
/* "Select all that apply", "(optional)", "We reply within 24–48 hours": el
   diseño los pone al lado del rótulo. `#description_display` no tiene esa
   opción, pero NO hace falta tocar el marcado — hacen falta tres tratamientos
   porque Webform emite tres estructuras distintas:
   a) `<label>` y `<div class="description">` YA son hermanos → inline-block;
   b) `webform_section` mete la descripción en `.webform-section-wrapper`, en
      otra rama → `display: contents` aplana el envoltorio y la sube a hermana
      del `<h2>` (el patrón "Nivel 1.5" de la metodología);
   c) un `<legend>` NO se deja: el navegador lo renderiza aparte y ni
      `inline-block` ni `display: contents` lo mueven —probado—. Ahí va
      `float: left`, y lo que viene detrás se baja con `clear`. */

/* a) destinos y notas */
.webform--wf_tail .form-item-wf-tail-dest > label,
.webform--wf_tail .form-item-wf-tail-dest > .description,
.webform--wf_tail .form-item-wf-tail-notes > label,
.webform--wf_tail .form-item-wf-tail-notes > .description { display: inline-block; }
.webform--wf_tail .form-item-wf-tail-dest > .description,
.webform--wf_tail .form-item-wf-tail-notes > .description { margin-left: var(--sp-2); }
.webform--wf_tail .form-item-wf-tail-dest > .select2,
.webform--wf_tail .form-item-wf-tail-notes > .form-textarea-wrapper { display: block; }

/* b) las cuatro secciones */
.webform--wf_tail .webform-section > .webform-section-wrapper { display: contents; }
.webform--wf_tail .webform-section > .webform-section-title { display: inline-block; }
.webform--wf_tail .webform-section-wrapper > .description {
  display: inline-block;
  margin: 0 0 var(--sp-4) var(--sp-2);
}

/* c) el fieldset de tipo de viaje */
.webform--wf_tail .webform-submission-wf-tail-form > fieldset > legend {
  float: left;
  width: auto;
  margin-right: var(--sp-2);
}
.webform--wf_tail .webform-submission-wf-tail-form > fieldset > .fieldset-wrapper > .description { display: inline-block; }
.webform--wf_tail .webform-submission-wf-tail-form > fieldset > .fieldset-wrapper > .js-webform-checkboxes {
  clear: both;
  padding-top: var(--sp-4);
}
/* Los controles que van justo detrás de un rótulo en línea empiezan en su
   propia línea porque ocupan el ancho entero. */
.webform--wf_tail .form-item > .description { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------- LOS CONTROLES */
/* ⚠️ El campo NO mide lo mismo que la píldora. Medido sobre el diseño, la
   relación alto-de-campo / alto-de-píldora es ~1,20 (56 frente a 47): el campo
   respira y la píldora es compacta. Estaban los dos a 47 y por eso la rejilla
   se veía apretada. Se toca el relleno, no una altura fija, para que el campo
   siga creciendo si el texto se traduce a dos líneas. */
.webform--wf_tail .form-text,
.webform--wf_tail .form-email,
.webform--wf_tail .form-tel,
.webform--wf_tail .form-date,
.webform--wf_tail .form-number,
.webform--wf_tail .form-select,
.webform--wf_tail .form-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 16px var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.45;
}
.webform--wf_tail .form-textarea { min-height: 110px; resize: vertical; }
.webform--wf_tail .form-text:focus,
.webform--wf_tail .form-email:focus,
.webform--wf_tail .form-tel:focus,
.webform--wf_tail .form-date:focus,
.webform--wf_tail .form-number:focus,
.webform--wf_tail .form-select:focus,
.webform--wf_tail .form-textarea:focus {
  border-color: var(--c-secondary);
  outline: 2px solid rgba(29, 161, 242, .35);
  outline-offset: 1px;
}
.webform--wf_tail ::placeholder { color: var(--c-muted); opacity: 1; }

/* Mismo criterio que en contacto: la separación de las filas la da el gap,
   porque `webform.element.flexbox.css` mete sus propios márgenes a 768 px. */
.webform--wf_tail .webform-flexbox { margin: 0 0 var(--sp-5); gap: var(--sp-5); }
.webform--wf_tail .webform-flex--container { margin: 0; }
.webform--wf_tail .webform-flex--container > .form-item { margin: 0; }

/* ---------------------------------------------- PÍLDORAS (radios y checks) */
/* El aspecto de píldora del diseño es CSS, no un elemento distinto: son los
   `radios` y `checkboxes` nativos con el input oculto y el <label> pintado.
   `appearance: none` en vez de `display: none` —el input sigue en el árbol de
   accesibilidad y sigue recibiendo el foco— y el aro de foco se traslada al
   label con `:focus-visible + label`. */
.webform--wf_tail .form-item-wf-tail-trip-type-checkboxes-adventure,
.webform--wf_tail .form-item-wf-tail-days-radios,
.webform--wf_tail .form-item-wf-tail-flex,
.webform--wf_tail .form-item-wf-tail-group,
.webform--wf_tail .form-item-wf-tail-contact-via { margin: 0; }

.webform--wf_tail .webform-options-display-buttons,
.webform--wf_tail #edit-wf-tail-trip-type-checkboxes,
.webform--wf_tail #edit-wf-tail-days-radios,
.webform--wf_tail #edit-wf-tail-flex,
.webform--wf_tail #edit-wf-tail-group,
.webform--wf_tail #edit-wf-tail-contact-via {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.webform--wf_tail #edit-wf-tail-trip-type-checkboxes .form-item,
.webform--wf_tail #edit-wf-tail-days-radios .form-item,
.webform--wf_tail #edit-wf-tail-flex .form-item,
.webform--wf_tail #edit-wf-tail-group .form-item,
.webform--wf_tail #edit-wf-tail-contact-via .form-item { margin: 0; flex: 1 1 auto; }

.webform--wf_tail #edit-wf-tail-trip-type-checkboxes input,
.webform--wf_tail #edit-wf-tail-days-radios input,
.webform--wf_tail #edit-wf-tail-flex input,
.webform--wf_tail #edit-wf-tail-group input,
.webform--wf_tail #edit-wf-tail-contact-via input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.webform--wf_tail #edit-wf-tail-trip-type-checkboxes label,
.webform--wf_tail #edit-wf-tail-days-radios label,
.webform--wf_tail #edit-wf-tail-flex label,
.webform--wf_tail #edit-wf-tail-group label,
.webform--wf_tail #edit-wf-tail-contact-via label {
  display: block;
  margin: 0;
  padding: 11px var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.webform--wf_tail #edit-wf-tail-trip-type-checkboxes input:checked + label,
.webform--wf_tail #edit-wf-tail-days-radios input:checked + label,
.webform--wf_tail #edit-wf-tail-group input:checked + label {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-white);
}
/* Las dos del diseño que se marcan en claro y no en sólido. */
.webform--wf_tail #edit-wf-tail-flex input:checked + label,
.webform--wf_tail #edit-wf-tail-contact-via input:checked + label {
  border-color: var(--c-primary);
  background: rgba(25, 58, 186, .07);
  color: var(--c-primary);
}
.webform--wf_tail #edit-wf-tail-trip-type-checkboxes input:focus-visible + label,
.webform--wf_tail #edit-wf-tail-days-radios input:focus-visible + label,
.webform--wf_tail #edit-wf-tail-flex input:focus-visible + label,
.webform--wf_tail #edit-wf-tail-group input:focus-visible + label,
.webform--wf_tail #edit-wf-tail-contact-via input:focus-visible + label {
  outline: 2px solid rgba(29, 161, 242, .55);
  outline-offset: 2px;
}

/* El campo libre de "Other" y el de días exactos van debajo, a todo el ancho. */
.webform--wf_tail .webform-checkboxes-other-input,
.webform--wf_tail .webform-radios-other-input { margin-top: var(--sp-4); }

/* ------------------------------------------------ CATEGORÍA DE HOTEL (2×2) */
/* La descripción de cada opción la emite el propio elemento a partir del
   ` -- ` de la opción; aquí solo se coloca. */
.webform--wf_tail #edit-wf-tail-hotel {
  display: grid;
  gap: var(--sp-3);
}
.webform--wf_tail #edit-wf-tail-hotel .form-item { margin: 0; }
.webform--wf_tail #edit-wf-tail-hotel input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.webform--wf_tail #edit-wf-tail-hotel label {
  display: block;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.webform--wf_tail #edit-wf-tail-hotel input:checked + label {
  border-color: var(--c-primary);
  background: rgba(25, 58, 186, .05);
}
.webform--wf_tail #edit-wf-tail-hotel input:checked + label,
.webform--wf_tail #edit-wf-tail-hotel input:checked + label .description {
  color: var(--c-primary);
}
.webform--wf_tail #edit-wf-tail-hotel input:focus-visible + label {
  outline: 2px solid rgba(29, 161, 242, .55);
  outline-offset: 2px;
}
.webform--wf_tail #edit-wf-tail-hotel .description {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
}

/* --------------------------------------------------- CASILLA DE MOVILIDAD */
.webform--wf_tail .form-item-wf-tail-access {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.webform--wf_tail .form-item-wf-tail-access input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--c-primary);
}
.webform--wf_tail .form-item-wf-tail-access label {
  margin: 0;
  color: var(--c-body);
  font-size: 14px;
  font-weight: 400;
}

/* ------------------------------------------------------ TELÉFONO Y PAÍS */
/* La bandera y el prefijo los pinta `intl-tel-input` sobre el propio <input>:
   el envoltorio que inyecta tiene que ocupar el ancho de la columna o el campo
   sale a la mitad. */
.webform--wf_tail .iti { width: 100%; }
.webform--wf_tail .iti__flag-container { z-index: 2; }
/* Y select2 sustituye el <select> por su propio marcado; se le da la misma
   altura y borde que a los campos de texto para que la fila no baile. */
.webform--wf_tail .select2-container { width: 100% !important; }
/* select2 pinta su propio marcado: hay que darle la misma altura y el mismo
   radio que a los campos de texto o la fila baila. */
.webform--wf_tail .select2-container--default .select2-selection--multiple,
.webform--wf_tail .select2-container--default .select2-selection--single {
  min-height: 56px;
  padding: 9px var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.webform--wf_tail .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.webform--wf_tail .select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px; }
.webform--wf_tail .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 3px 4px 3px 0;
  padding: 4px var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 600;
}
.webform--wf_tail .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 6px;
  color: rgba(255, 255, 255, .8);
}

/* ------------------------------------------------------------ EL BOTÓN */
.webform--wf_tail .webform-actions {
  margin-top: var(--sp-6);
  text-align: center;
}
/* ⚠️ La flecha va como `background-image` y NO como `::after`: el botón de
   `webform_actions` es un <input type="submit">, elemento REEMPLAZADO, y los
   navegadores no le generan pseudo-elementos. Tampoco va en `#submit__label`,
   que la metería en el .po y la leería un lector de pantalla. */
.webform--wf_tail .webform-button--submit {
  width: 100%;
  max-width: 420px;
  padding: 15px 52px 15px 34px;
  border: 0;
  border-radius: var(--r-md);
  background-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 17px 17px;
  color: var(--c-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.webform--wf_tail .webform-button--submit:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* Las tres promesas de debajo del botón. El check es DECORACIÓN —el mismo en
   las tres— y por eso es un pseudo-elemento y no un carácter del texto. */
.tail-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  color: var(--c-muted);
  font-size: 13px;
}
.tail-reassure span::before {
  content: '✓';
  margin-right: 6px;
  color: var(--c-accent);
  font-weight: 700;
}

/* -------------------------------------------------- PANTALLA DE GRACIAS */
/* `confirmation_type: page` pinta esto en `/tailor-made/confirmation`, con el
   marco de la página entero: por eso los bloques se colocan en las DOS rutas. */
.webform--wf_tail .webform-confirmation {
  padding: var(--sp-8) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.webform--wf_tail .webform-confirmation__message::before {
  content: '';
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: rgba(25, 58, 186, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193aba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}
.webform--wf_tail .tail-confirm-lead {
  margin: 0 auto var(--sp-3);
  max-width: 48ch;
  color: var(--c-body);
  font-size: 17px;
}
.webform--wf_tail .tail-confirm-note {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--c-muted);
  font-size: 14px;
}
.webform--wf_tail .webform-confirmation__back {
  margin-top: var(--sp-5);
  text-align: center;
}
/* ⚠️ El enlace de volver NO lleva clase propia: Webform solo la pone en el
   envoltorio `.webform-confirmation__back`. */
.webform--wf_tail .webform-confirmation__back a {
  display: inline-block;
  padding: 14px var(--sp-6);
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 700;
  text-decoration: none;
}

/* ------------------------------------------------------- BARRA LATERAL */
/* ⚠️ `#sidebar_right` NO cuelga de `.region-content`: es hermano de
   `#contenido` dentro de `#contenedor`. Por eso el fondo y el margen lateral
   de la franja hay que dárselos aparte, y por eso la rejilla de dos columnas
   del escritorio va en `#contenedor` y no en la región. */
body.webform--wf_tail #sidebar_right {
  padding: 0 var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
body.webform--wf_tail .region-sidebar-right {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
#block-perugrandtravel-tail-why,
#block-perugrandtravel-tail-talk {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
}
#block-perugrandtravel-tail-why {
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.field--name-field-bt-tail-why-tit-head h3 {
  margin: 0 0 var(--sp-4);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field--name-field-bt-tail-why-item-txt .field__item {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.5;
}
.field--name-field-bt-tail-why-item-txt .field__item:last-child { margin-bottom: 0; }
.field--name-field-bt-tail-why-item-txt .field__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

/* La tarjeta azul. */
#block-perugrandtravel-tail-talk { background: var(--c-primary); color: var(--c-white); }
.field--name-field-bt-tail-talk-tit-head h3 {
  margin: 0 0 var(--sp-2);
  color: var(--c-white);
  font-size: 16px;
}
.field--name-field-bt-tail-talk-txl p {
  margin: 0 0 var(--sp-4);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.5;
}
.tail-talk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.field--name-field-pt-tail-talk-ico-med {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16);
}
.field--name-field-pt-tail-talk-ico-med img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.field--name-field-pt-tail-talk-lnk a {
  color: var(--c-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.field--name-field-pt-tail-talk-lnk a:hover { text-decoration: underline; }

#block-perugrandtravel-tail-photo { overflow: hidden; border-radius: var(--r-lg); }
.field--name-field-bt-tail-photo-med img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

/* ----------------------------------------------------- BANDA DE CIERRE */
#block-perugrandtravel-tail-cta {
  max-width: var(--wrap);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-primary);
  color: var(--c-white);
  text-align: center;
}
.tail-cta-text h2 { margin: 0 0 var(--sp-2); color: var(--c-white); font-size: 22px; }
.tail-cta-text p {
  margin: 0 0 var(--sp-5);
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  line-height: 1.6;
}
.field--name-field-bt-tail-cta-lnk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.field--name-field-bt-tail-cta-lnk a {
  display: inline-block;
  padding: 13px var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
/* El primer enlace es el naranja y el segundo el de contorno: lo decide el
   ORDEN de los valores del campo, no una clase que el editor tendría que
   escribir. */
.field--name-field-bt-tail-cta-lnk .field__item:first-child a {
  background: var(--c-accent);
  color: var(--c-white);
}
.field--name-field-bt-tail-cta-lnk .field__item:nth-child(2) a {
  border-color: rgba(255, 255, 255, .55);
  color: var(--c-white);
}

/* ================================================================= BLOG */
/* ⚠️ El enganche es `page-vocabulary-page-type-tax-tag-blog`, la clase que el
   módulo `vocabulary_types` pone en el <body> a partir del ID DEL VOCABULARIO.
   NUNCA `.path-blog`: la ruta es un alias y un alias es contenido. Es la misma
   fila que `taxonomy-vocabulary--{vid}` en las páginas de término, y sobrevive
   a que alguien cambie la URL desde la interfaz. */

/* --------------------------------------------------------- LA BANDA */
#block-perugrandtravel-blog-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.views-field-field-tax-tag-blog-hero-med { position: absolute; inset: 0; }
.views-field-field-tax-tag-blog-hero-med article,
.views-field-field-tax-tag-blog-hero-med .field,
.views-field-field-tax-tag-blog-hero-med .field__item { height: 100%; }
.views-field-field-tax-tag-blog-hero-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#block-perugrandtravel-blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 16, 40, .84) 0%, rgba(10, 16, 40, .25) 100%);
}
.blog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
  color: var(--c-white);
}
.blog-hero-inner h1 { margin-bottom: var(--sp-3); color: var(--c-white); }
.blog-hero-inner p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------ LA FRANJA DE CONTENIDO */
.page-vocabulary-page-type-tax-tag-blog .region-content {
  padding: var(--sp-7) var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
.page-vocabulary-page-type-tax-tag-blog #sidebar_right {
  padding: 0 var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
/* El rótulo de sección con la barra naranja. Sale del TÍTULO DEL DISPLAY de
   cada vista —"Featured Article", "Latest Travel Articles"—, no de la etiqueta
   del bloque: un bloque de vista ignora la etiqueta de Block layout. */
#block-perugrandtravel-blog-feat h2,
#block-perugrandtravel-blog-grid h2 {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1.2;
}
/* En una sola columna la rejilla necesita separarse del destacado; en dos, esa
   separación la da el hueco de la rejilla y el margen descuadraría el rótulo
   respecto de la caja de filtro de al lado. */
#block-perugrandtravel-blog-grid { margin-top: var(--sp-7); }

/* ------------------------------------------------------ TARJETA COMÚN */
.page-vocabulary-page-type-tax-tag-blog .post-media img { aspect-ratio: auto; }

.post-card {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.post-media { position: relative; }
.post-media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
/* El distintivo de categoría. Un solo color —el naranja de marca— y no uno por
   categoría: colorear por tid o por nombre desde el CSS se rompe en cuanto el
   editor crea una categoría nueva, que es justo lo que la regla prohíbe. */
.post-media .views-field-field-ct-blog-tag-ref {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.post-body { padding: var(--sp-5); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-5) var(--sp-5) 0;
  color: var(--c-muted);
  font-size: 12px;
}
/* Los separadores entre los datos de la meta son DECORACIÓN: van como
   pseudo-elemento y no como caracteres del texto, que entrarían en el .po. */
/* ⚠️ El separador va al FINAL del elemento anterior (`::after`), no al principio
   del siguiente. Puesto como `::before` cae DENTRO del relleno izquierdo que
   reserva el icono, así que el punto se comía el hueco del dibujo y el texto se
   montaba encima. Medido: el 2.º y el 3.º se quedaban con `padding-left: 0`. */
.post-meta > .views-field:not(:last-child)::after {
  content: '·';
  margin-left: var(--sp-3);
  color: var(--c-muted);
}
/* Y el icono de cada dato, igual: es el MISMO en todas las filas, así que es
   dibujo y no contenido. Va como `background-image` del propio campo —no como
   un `content` con un glifo—, para que no lo lea un lector de pantalla ni haya
   que subir un media por artículo. */
.post-meta > .views-field {
  display: inline-flex;
  align-items: center;
  padding-left: 18px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}
.post-meta .views-field-field-ct-blog-read-ert {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.post-meta .views-field-created {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}
.post-meta .views-field-uid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
/* El autor va en tinta, no en gris: en el diseño destaca sobre el resto. */
.post-meta .views-field-uid { color: var(--c-ink); font-weight: 700; }
.post-body h3,
.post-body .views-field-title {
  margin: 0 0 var(--sp-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.post-body .views-field-title a {
  color: var(--c-ink);
  text-decoration: none;
}
.post-body .views-field-title a:hover { color: var(--c-primary); }
.post-body .views-field-body {
  margin-bottom: var(--sp-4);
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.6;
}
.post-body .views-field-body p { margin: 0; }
/* La flecha va como `background-image` y no como carácter: fuera del texto,
   fuera del .po y fuera del árbol de accesibilidad. */
.post-more a {
  display: inline-block;
  padding-right: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193aba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") right center / 13px 13px no-repeat;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ----------------------------------------------- LA TARJETA DESTACADA */
.post-card--feat .post-media img { height: 240px; }
.post-card--feat .post-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.post-card--feat .post-body .views-field-title { font-size: 22px; }
.post-card--feat .post-body .views-field-body { font-size: 14px; }
/* Las etiquetas del artículo. `separator: ''` no hace falta: el hueco lo pone
   el flex, y así los valores siguen siendo <div> independientes. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.post-tags .field__item {
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(25, 58, 186, .08);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 600;
}
/* En el destacado el enlace es un botón, no un texto con flecha. */
.post-card--feat .post-more a {
  padding: 12px 40px 12px var(--sp-5);
  border-radius: var(--r-md);
  background-color: var(--c-primary);
  background-position: right 18px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  color: var(--c-white);
  font-size: 14px;
}

/* --------------------------------------------------- LA BARRA LATERAL */
#block-perugrandtravel-blog-filter,
#block-perugrandtravel-blog-pop {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
#block-perugrandtravel-blog-pop { margin-top: var(--sp-4); }
#block-perugrandtravel-blog-filter > h2,
#block-perugrandtravel-blog-pop h2 {
  margin: 0 0 var(--sp-4);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* ------------------------------------------- LA CAJA DE FILTRO (BEF) */
/* El buscador, las píldoras y el "View All Tags" son UN solo formulario
   expuesto, así que la tarjeta del diseño es el bloque entero — sin pegar dos
   cajas por CSS. El "View All Tags" lo pone el `soft_limit` de BEF, no nosotros:
   enseña 12 de 14 y el enlace revela el resto. */
#block-perugrandtravel-blog-filter .views-exposed-form { display: block; }
#block-perugrandtravel-blog-filter .form--inline { display: block; }
#block-perugrandtravel-blog-filter .form--inline > .form-item { margin: 0 0 var(--sp-4); }

/* El buscador, con su lupa. El icono es decoración: `background-image`, no un
   carácter ni un media. */
#block-perugrandtravel-blog-filter .form-text {
  box-sizing: border-box;
  width: 100%;
  padding: 12px var(--sp-4) 12px 42px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") 15px center / 17px 17px no-repeat;
  color: var(--c-ink);
  font-family: var(--font-base);
  font-size: 14px;
}
#block-perugrandtravel-blog-filter .form-text:focus {
  border-color: var(--c-secondary);
  outline: 2px solid rgba(29, 161, 242, .3);
  outline-offset: 1px;
}
#block-perugrandtravel-blog-filter ::placeholder { color: var(--c-muted); opacity: 1; }

/* El rótulo "Tags" del grupo. BEF lo saca como <legend> del fieldset. */
#block-perugrandtravel-blog-filter fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#block-perugrandtravel-blog-filter legend {
  display: block;
  width: auto;
  margin-bottom: var(--sp-3);
  padding: 0;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
}

/* Las píldoras. Mismo mecanismo que las del formulario Tailor Made: el input
   sigue en el árbol de accesibilidad y recibe foco, y lo que se pinta es el
   <label>. Aquí el estado activo sale GRATIS con `:checked` — que es lo que la
   opción nativa no podía dar. */
/* Ladrillos: las píldoras se reparten la fila. `flex: 1 0 auto` deja que cada
   una parta de su ancho de texto y CREZCA hasta rellenar el renglón, así que
   caben tres cortas o dos largas sin decidirlo nosotros. Sin `shrink` (el 0),
   porque una etiqueta partida en dos líneas se ve peor que una fila de dos.
   ⚠️ El contenedor es `.bef-checkboxes`, el de dentro: BEF anida DOS
   `.form-checkboxes` y el de fuera lleva además el enlace del soft limit. */
#block-perugrandtravel-blog-filter .bef-checkboxes {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-2);
  row-gap: var(--sp-3);
}
#block-perugrandtravel-blog-filter .form-type-checkbox {
  flex: 1 0 auto;
  /* El `margin: 0 0 16px` viene de `form--inline`, que BEF pone en este mismo
     contenedor. Con él, el hueco entre filas lo mandaba el margen y no el
     `row-gap`, y salían 24px verticales contra 8 horizontales. */
  margin: 0;
  /* Tope de crecimiento. Cuando el último ladrillo se queda solo en su fila,
     sin tope se estira a los 270px enteros y, blanco y justo encima del botón
     naranja, se lee como un segundo botón. Nunca recorta una píldora normal:
     la etiqueta más larga que hay mide 119px, un 44% del ancho. */
  max-width: 65%;
}
#block-perugrandtravel-blog-filter .form-type-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#block-perugrandtravel-blog-filter .form-type-checkbox label {
  display: block;
  text-align: center;
  margin: 0;
  /* Acolchado lateral ajustado: con 16px, "Cusco + Trekking + Peru Travel" se
     pasaba por ocho píxeles y la fila se partía en dos. Con 12 entra la tercera
     y las etiquetas largas siguen cayendo de dos en dos. */
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#block-perugrandtravel-blog-filter .form-type-checkbox input:checked + label {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-white);
}
#block-perugrandtravel-blog-filter .form-type-checkbox input:focus-visible + label {
  outline: 2px solid rgba(29, 161, 242, .55);
  outline-offset: 2px;
}
#block-perugrandtravel-blog-filter .form-type-checkbox label:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* "View All Tags": el enlace del soft limit, con aspecto de botón naranja. */
#block-perugrandtravel-blog-filter .bef-soft-limit-link {
  display: block;
  margin-top: var(--sp-4);
  padding: 13px var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
#block-perugrandtravel-blog-filter .bef-soft-limit-link:hover { filter: brightness(1.07); }

/* Los botones. Con `autosubmit` el de enviar lo tapa `js-hide` de core, así que
   en la práctica solo se ve "Clear filters" —y solo cuando hay filtro puesto—.
   Sin JS reaparece el de enviar, que es justo lo que se quiere. */
#block-perugrandtravel-blog-filter .form-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
#block-perugrandtravel-blog-filter .form-actions input {
  flex: 1;
  /* Core deja 13px de margen lateral en los botones de acción. */
  margin: 0;
  padding: 10px var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-alt);
  color: var(--c-body);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#block-perugrandtravel-blog-filter .form-actions input:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* La lista de populares: miniatura arriba, fecha y título debajo. */
.post-mini { margin-bottom: var(--sp-5); }
.post-mini:last-child { margin-bottom: 0; }
.post-mini img {
  display: block;
  width: 100%;
  height: 110px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  object-fit: cover;
}
.post-mini .views-field-created {
  margin-bottom: 2px;
  color: var(--c-muted);
  font-size: 11px;
}
.post-mini .views-field-title a {
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.post-mini .views-field-title a:hover { color: var(--c-primary); }

/* ============================================================= ABOUT US */
/* Enganche: `page-vocabulary-page-type-tax-tag-about-us`, la clase que pone
   `vocabulary_types` a partir del ID del vocabulario. Nunca `.path-about-us`. */

/* ------------------------------------------------------------ LA BANDA */
#block-perugrandtravel-about-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.views-field-field-tax-tag-about-us-hero-med { position: absolute; inset: 0; }
.views-field-field-tax-tag-about-us-hero-med article,
.views-field-field-tax-tag-about-us-hero-med .field,
.views-field-field-tax-tag-about-us-hero-med .field__item { height: 100%; }
.views-field-field-tax-tag-about-us-hero-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#block-perugrandtravel-about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 16, 40, .82) 0%, rgba(10, 16, 40, .30) 100%);
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--pad-x);
  color: var(--c-white);
}
.about-hero-inner h1 { margin-bottom: var(--sp-3); color: var(--c-white); }
.about-hero-inner p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .88);
}

/* -------------------------------------------------- LA FRANJA DE CONTENIDO */
.page-vocabulary-page-type-tax-tag-about-us .region-content {
  padding: var(--sp-7) var(--pad-x) var(--sp-8);
  background: var(--c-bg-alt);
}
.page-vocabulary-page-type-tax-tag-about-us #block-perugrandtravel-content,
#block-perugrandtravel-about-grid {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* -------------------------------------- EL ÁREA QUE COMPONE EL EDITOR */
/* ⚠️ Aquí NO se estila sección por sección. Esta zona la compone el editor con
   el contenedor avanzado: mañana puede reordenar los bloques, partirlos en tres
   columnas o añadir uno nuevo. Colgar reglas de "la primera sección" o "la
   tercera" es exactamente lo que la regla prohíbe — añadir contenido rompería
   el estilo.
   Lo que se define aquí es la TIPOGRAFÍA y el ritmo; la maquetación (columnas,
   hueco, fondo, relleno) sale de los `data-*` que el propio módulo escribe y
   pinta con su `container.css`. */
.about-rich { color: var(--c-body); }
/* ⚠️ El contenedor NO es hijo directo de `.about-rich`: entre medias está el
   envoltorio del campo de texto (`.field.field--name-…`). Con `>` la regla no
   casaba nada. Se acota a `.field > .advanced-container` y no a un descendiente
   suelto, para no darle también el margen a los contenedores ANIDADOS —el
   módulo permite meter uno dentro de otro—. */
.about-rich .field > .advanced-container { margin-bottom: var(--sp-8); }
.about-rich h2 {
  margin: 0 0 var(--sp-4);
  color: var(--c-ink);
  font-size: 26px;
  line-height: 1.25;
}
.about-rich p { margin: 0 0 var(--sp-4); line-height: 1.7; }
.about-rich p:last-child { margin-bottom: 0; }
.about-rich img { display: block; width: 100%; border-radius: var(--r-lg); }

/* El antetítulo naranja en versalitas. Es una clase del texto —la escribe quien
   redacta desde el editor—, no una regla de posición. */
.about-eyebrow {
  margin-bottom: var(--sp-2) !important;
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.about-center { text-align: center; }

/* El ícono de las tarjetas. Entra como <img> desde el editor, así que la caja
   redondeada la pone el CSS: el editor elige el dibujo, no el envoltorio. */
.about-rich img.about-icon {
  /* ⚠️ `box-sizing` en este theme es content-box, así que el relleno SE SUMA:
     44 + 11 + 11 daba una caja de 66 px, medio icono más grande de lo pensado.
     Se fija la caja y se deja que el relleno coma por dentro. */
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--r-md);
  background: rgba(25, 58, 186, .07);
}
.about-rich p:has(> img.about-icon) { margin-bottom: var(--sp-4); }
/* Sobre fondo oscuro, el ícono se invierte con su caja. */
.about-rich .advanced-column[data-background="#193aba"] img.about-icon {
  background: rgba(255, 255, 255, .16);
  filter: brightness(0) invert(1);
}
.about-value-name {
  margin-bottom: var(--sp-2) !important;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
}

/* Una columna con fondo es una tarjeta: se le da el redondeo y el borde que el
   contenedor no pone. Vale para las tres declaraciones y para los cinco
   valores, y para la sexta tarjeta que el editor añada mañana. */
.about-rich .advanced-column[data-background] {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
/* Y si el fondo que eligió es oscuro, el texto se invierte. El selector va por
   el VALOR del atributo, que es lo que el editor decide, no por la posición. */
.about-rich .advanced-column[data-background="#193aba"],
.about-rich .advanced-column[data-background="#193aba"] p { color: var(--c-white); }
.about-rich .advanced-column[data-background="#193aba"] { border-color: transparent; }

/* ------------------------------------------ LA REJILLA INSTITUCIONAL */
#block-perugrandtravel-about-grid { margin-top: var(--sp-7); }
#block-perugrandtravel-about-grid > h2 {
  margin: 0 0 var(--sp-5);
  color: var(--c-ink);
  font-size: 24px;
  text-align: center;
}
#block-perugrandtravel-about-grid .view-content {
  display: grid;
  gap: var(--sp-4);
}
/* La tarjeta es la foto con el texto encima, no foto y luego texto. */
.about-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-ink);
}
.about-card .views-field-field-ct-about-us-thumb-med img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}
/* `pointer-events: none` NO es opcional: el velo cubre la tarjeta entera con
   `inset: 0`, asi que sin esto se traga los clics y la foto —que ES la
   tarjeta— deja de llevar a la ficha aunque el <a> este en el HTML. Un velo
   decorativo nunca debe recibir el raton. */
.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 40, 0) 40%, rgba(10, 16, 40, .85) 100%);
  pointer-events: none;
}
.about-body {
  position: absolute;
  z-index: 1;
  right: var(--sp-4);
  bottom: var(--sp-4);
  left: var(--sp-4);
}
/* El círculo naranja del ícono. */
.about-body .views-field-field-ct-about-us-ico-med {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-accent);
}
.about-body .views-field-field-ct-about-us-ico-med img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.about-body .views-field-title a {
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.about-body .views-field-title a:hover { text-decoration: underline; }

/* ==================================================== LA PÁGINA DEL ARTÍCULO */
/* Gancho: `.page-node-type-ct-blog`, la clase de BUNDLE que pone el theme. No
   `.path-node` (vale para cualquier contenido) ni una ruta: el alias del
   artículo es contenido y cambia si el editor cambia el titular. */

/* ------------------------------------------------------- LA BANDA DEL HERO */
/* Foto, degradado y texto apilados en la MISMA celda de una rejilla de una
   sola casilla. Sin posicionamiento absoluto: así la altura la marca el
   contenido y un titular de tres líneas no se sale de la foto. */
.page-node-type-ct-blog .region-slider { padding: 0 var(--pad-x) var(--sp-6); }
.post-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* ⚠️ LA FILA VA DECLARADA. Con `height` a secas la CAJA se recorta pero la
     fila implícita sigue siendo automática y se estira al alto NATURAL de la
     foto: la capa del texto crecía a 790 px y el titular se salía por debajo
     del recorte. `minmax(0, 1fr)` ata la fila al alto de la caja. */
  grid-template-rows: minmax(0, 1fr);
  max-width: var(--wrap);
  /* ⚠️ ALTO FIJO, no `min-height`. La foto está en la misma celda de la rejilla
     y con `min-height` la fila crece hasta el alto NATURAL de la imagen: salían
     790 px en vez de recortar. Con la fila acotada, el `object-fit: cover` de
     abajo ya tiene contra qué recortar. */
  height: 320px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.post-hero > .views-field { grid-area: 1 / 1; min-width: 0; }
/* La foto ocupa la casilla entera y recorta por el centro. */
.post-hero .views-field-field-ct-blog-thumb-med,
.post-hero .views-field-field-ct-blog-thumb-med .field-content,
.post-hero .views-field-field-ct-blog-thumb-med article,
.post-hero .views-field-field-ct-blog-thumb-med .field { display: contents; }
.post-hero .views-field-field-ct-blog-thumb-med .field__item { grid-area: 1 / 1; }
.post-hero .views-field-field-ct-blog-thumb-med img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El velo. Va como capa propia y no como `filter` sobre la foto para que el
   texto no se oscurezca con ella. */
.post-hero .views-field-fs-post-hero {
  z-index: 1;
  align-self: stretch;
  display: grid;
  align-items: end;
  background: linear-gradient(180deg, rgba(10, 20, 45, .15) 0%, rgba(10, 20, 45, .78) 100%);
}
/* ⚠️ El `<span class="field-content">` que Views mete entre el campo y el
   fieldset se aplana: es un `span` en línea y, si no, la caja de dentro no
   puede ocupar el alto. */
.post-hero .views-field-fs-post-hero > .field-content { display: contents; }
.post-hero-inner {
  padding: var(--sp-6);
  color: var(--c-white);
}

/* Los distintivos. Views los saca como <li> gracias a `multi_type: ul`. */
.post-badges .item-list ul,
.post-badges ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.post-badges li {
  /* El theme le da `margin-left: 15px` a todo `li`: sin esto el distintivo
     quedaba 15 px más a la derecha que el titular. */
  margin: 0;
  /* Alto medido por proporción: en la maqueta el distintivo ocupa un 4,4 % del
     alto de la banda —unos 19 px sobre los 420 nuestros—. Con el relleno de 5
     salían 27 y se veía como un botón. */
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.post-hero-inner h1 {
  margin: 0;
  color: var(--c-white);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.14;
}

/* La firma.
   ⚠️ EL ICONO VA EN UN `::before`, y por eso hay que APAGAR ANTES el de la
   tarjeta del listado. La regla `.post-meta > .views-field` de más arriba pinta
   el icono como `background-image` del PROPIO campo, con `padding-left` para
   hacerle hueco, y esa regla alcanza también a la banda porque `post-meta` es
   la misma clase. Sin el `background-image: none` de aquí abajo salían DOS
   iconos por dato: el del fondo y el del pseudo.
   Con `::before` el icono es una caja aparte, así que el hueco lo da el `gap`
   del flex y no un relleno calculado a ojo. */
.post-hero .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
}
.post-hero .post-meta > .views-field {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 0;
  background-image: none;
}
/* Y se apaga el punto separador de la tarjeta: en el diseño lo que separa es el
   aire, no un carácter. */
.post-hero .post-meta > .views-field::after { content: none; }
.post-hero .post-meta > .views-field::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background: center / 15px 15px no-repeat;
}
/* El autor también en blanco. La regla de la tarjeta lo pone en tinta y en
   negrita porque allí destaca sobre fondo claro; sobre la foto era ilegible. */
.post-hero .post-meta .views-field-uid { color: inherit; font-weight: 400; }
/* Persona. */
.post-hero .post-meta > .views-field-uid::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
/* Calendario. */
.post-hero .post-meta > .views-field-created::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}
/* Reloj. */
.post-hero .post-meta > .views-field-field-ct-blog-read-ert::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- LA TARJETA DEL CUERPO */
/* La tarjeta blanca del diseño es el GRUPO `post-body`, no el bloque entero:
   las píldoras de etiquetas van fuera de la tarjeta, sobre el gris.

   ⚠️⚠️ TODO ESTO VA ACOTADO A `.post-layout`. La clase `post-body` NO es solo
   del artículo: es también el fieldset del cuerpo de la TARJETA del listado
   (`fs_post_body` en `$blog_card_fields`). Sin acotar, las nueve tarjetas de
   `/blog` y las cuatro de "Blogs You Might Like" heredaban el relleno de 64 px,
   el fondo blanco y la sombra: medido, una tarjeta del listado pasó a 262×918.
   Tercera vez que una clase compartida de fieldset muerde en esta página. */
.page-node-type-ct-blog .region-content { padding: var(--sp-6) var(--pad-x) var(--sp-8); }
.post-layout > .post-body {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
/* La entradilla, primer campo de la tarjeta. Un punto más grande que el cuerpo
   y sin el margen de arriba, que la tarjeta ya pone su relleno. */
.post-layout > .post-body .field--name-body {
  margin-bottom: var(--sp-5);
  color: var(--c-body);
  font-size: 16px;
  line-height: 1.75;
}
.post-layout > .post-body .field--name-body p:last-child { margin-bottom: 0; }
.post-layout > .post-body h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1.3;
}
.post-layout > .post-body h2:first-child { margin-top: 0; }
.post-layout > .post-body p {
  margin: 0 0 var(--sp-4);
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.8;
}
.post-layout > .post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.post-layout > .post-body figcaption {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

/* Las píldoras de cierre. */
.post-tags .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.post-tags .field__item {
  padding: 7px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-body);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------- LAS PROMOS DENTRO DEL ARTÍCULO */
/* Párrafos embebidos con el botón de CKEditor. El color y el rótulo los
   distingue el TIPO de párrafo, que es lo que pone la clase del envoltorio
   (`blog-promo--tour` / `--post`): no hay ningún selector de variante que el
   editor pueda dejar mal. */
/* En móvil se APILA: a 279 px de ancho las tres columnas del diseño no caben
   —el texto se estrangulaba y la tarjeta pasaba de 137 a 370 px de alto—. El
   rótulo y la flecha comparten la primera fila, y debajo van el titular y la
   foto a todo lo ancho. Las tres columnas vuelven en escritorio. */
.blog-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
}
.blog-promo--tour { background: #fdf0e6; }
.blog-promo--post { background: #eaf0fe; }

.blog-promo [class*="-kick-txt"] {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.blog-promo--tour [class*="-kick-txt"] { color: var(--c-accent); }
.blog-promo--post [class*="-kick-txt"] { color: var(--c-primary); }

.blog-promo [class*="-tit-txt"] {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.blog-promo [class*="-thumb-med"] {
  grid-column: 1 / -1;
  grid-row: 3;
}
.blog-promo [class*="-thumb-med"] article,
.blog-promo [class*="-thumb-med"] .field { display: contents; }
.blog-promo [class*="-thumb-med"] img {
  width: 100%;
  height: 140px;
  margin-top: var(--sp-2);
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
}

/* La flecha. El TEXTO del enlace existe y es el nombre accesible ("View this
   tour"); lo que se esconde es su caja de texto, no el enlace. La flecha es
   un pseudo-elemento, o sea decoración pura: no hay nada que traducir. */
.blog-promo [class*="-lnk"] {
  grid-column: 2;
  grid-row: 1;
}
.blog-promo [class*="-lnk"] a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--c-white);
  font-size: 0;
  text-decoration: none;
}
.blog-promo [class*="-lnk"] a::after {
  content: '→';
  font-size: 18px;
  line-height: 1;
}
.blog-promo--tour [class*="-lnk"] a { background: var(--c-accent); }
.blog-promo--post [class*="-lnk"] a { background: var(--c-primary); }

/* ----------------------------------------------------- LA BARRA LATERAL */
.page-node-type-ct-blog #sidebar_right { padding: 0 var(--pad-x) var(--sp-8); }
.page-node-type-ct-blog .region-sidebar-right {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--wrap);
  margin-inline: auto;
}
.page-node-type-ct-blog .region-sidebar-right > .block {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
}

/* 1. El índice. La lista la construye `toc_js` en el navegador leyendo los H2
      de `.post-body`; aquí solo se le da forma. */
.toc-title {
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
}
.toc-js ul { margin: 0; padding: 0; list-style: none; }
.toc-js li { margin: 0; }
.toc-js a {
  display: block;
  padding: 7px 0 7px var(--sp-3);
  border-left: 2px solid var(--c-line);
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.toc-js a:hover { color: var(--c-primary); }
/* La entrada activa la marca el propio módulo mientras se baja. */
.toc-js a.is-active-link,
.toc-js .is-active-li > a {
  border-left-color: var(--c-accent);
  color: var(--c-ink);
  font-weight: 700;
}

/* 2. La tarjeta de ayuda. */
.blog-help {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.blog-help .field--name-field-bt-blog-help-ico-med img {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: var(--c-primary);
  filter: brightness(0) invert(1);
}
.blog-help h3 { margin: 0; color: var(--c-ink); font-size: 15px; }
.blog-help .field--name-field-bt-blog-help-lnk a {
  display: block;
  padding: 10px var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* 3. Las pestañas y sus listas. */
.quicktabs-tabs {
  display: flex;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  list-style: none;
}
.quicktabs-tabs li { margin: 0; }
.quicktabs-tabs a {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.quicktabs-tabs .active a,
.quicktabs-tabs li[aria-selected="true"] a { color: var(--c-ink); }

.side-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.side-post + .side-post { border-top: 1px solid var(--c-line); }
.side-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 800;
}
.side-post .views-field-field-ct-blog-thumb-med article,
.side-post .views-field-field-ct-blog-thumb-med .field { display: contents; }
.side-post .views-field-field-ct-blog-thumb-med img {
  width: 56px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
}
.side-body a {
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.side-body a:hover { color: var(--c-primary); }
.side-body .views-field-created { margin-top: 3px; color: var(--c-muted); font-size: 11px; }

/* ------------------------------------------- "BLOGS YOU MIGHT LIKE" */
#block-perugrandtravel-post-rel {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-7) var(--pad-x) 0;
}
/* El rótulo y el "View all blogs" comparten renglón. Para que puedan, se
   aplanan los dos envoltorios que Views mete en medio: así el <h2> del bloque,
   la rejilla y el enlace de más son hermanos en la misma cuadrícula. */
#block-perugrandtravel-post-rel .views-element-container,
#block-perugrandtravel-post-rel .view { display: contents; }
#block-perugrandtravel-post-rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: var(--sp-5);
}
#block-perugrandtravel-post-rel h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--c-ink);
  font-size: 22px;
}
/* ⚠️ FILA DECLARADA. Sin ella el enlace se auto-coloca DESPUÉS del panel, que
   ocupa la fila entera, y caía al pie de la sección en vez de a la derecha del
   rótulo. */
#block-perugrandtravel-post-rel .more-link {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: right;
}
#block-perugrandtravel-post-rel .more-link a {
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
#block-perugrandtravel-post-rel .more-link a::after { content: ' →'; }

/* Los cuatro van en UN SOLO panel blanco con separadores, no en cuatro
   tarjetas sueltas: el fondo y el borde los pone la rejilla, y las líneas de
   dentro son bordes de cada celda. Por eso `gap: 0`. */
#block-perugrandtravel-post-rel .view-content {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  overflow: hidden;
}

/* La tarjeta relacionada es HORIZONTAL y compacta: texto a la izquierda, foto
   pequeña a la derecha. No es la tarjeta del listado —esa lleva la foto grande
   arriba— aunque comparta las clases de fieldset, así que todo va acotado con
   el modificador `--rel` que pone el `row_class` de la vista. */
#block-perugrandtravel-post-rel .post-card--rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  /* ⚠️ LAS FILAS VAN DECLARADAS. Sin ellas, el `grid-row: 1 / -1` de la foto se
     resuelve contra una rejilla que no tiene filas explícitas y el navegador
     inventa filas de más: la tarjeta se iba a 253 px cuando sus piezas suman
     112. Es la misma trampa de las filas implícitas de la banda del hero. */
  grid-template-rows: auto auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-5);
  /* ⚠️ Se anula el borde de `.post-card`, la clase de la tarjeta del listado que
     esta fila también lleva: pintaba un recuadro completo en cada celda además
     de los separadores del panel. */
  border: 0;
  border-radius: 0;
  background: none;
}
/* Las líneas de dentro del panel: vertical entre columnas y horizontal entre
   filas. En una sola columna solo queda la horizontal. */
#block-perugrandtravel-post-rel .post-card--rel + .post-card--rel {
  border-top: 1px solid var(--c-line);
}
/* Los envoltorios que Views mete entre el campo y el fieldset se aplanan, o la
   rejilla de arriba solo vería tres cajas en vez de sus piezas. */
#block-perugrandtravel-post-rel .post-card--rel > .views-field,
#block-perugrandtravel-post-rel .post-card--rel > .views-field > .field-content { display: contents; }

/* La foto, cuadrada y arriba. ⚠️ NO se estira al alto de la tarjeta: entre el
   fieldset y el `<img>` hay seis envoltorios sin alto definido, así que un
   `height: 100%` no se resuelve (salía 100×67) y aplanarlos con
   `display: contents` convierte en elemento de rejilla hasta la etiqueta oculta
   del campo, que añade filas. Con la tarjeta ya compacta no hace falta. */
#block-perugrandtravel-post-rel .post-media {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
}
#block-perugrandtravel-post-rel .post-media img {
  width: 100px;
  height: 100px;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
}
#block-perugrandtravel-post-rel .post-meta {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
}
#block-perugrandtravel-post-rel .post-body {
  grid-column: 1;
  grid-row: 2;
  padding: 0;
}
/* El distintivo, aquí como TEXTO naranja y no como píldora sobre la foto: en
   una foto de 100 px no cabe. */
#block-perugrandtravel-post-rel .post-body .views-field-field-ct-blog-tag-ref {
  margin-bottom: var(--sp-1);
  color: var(--c-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#block-perugrandtravel-post-rel .post-body .views-field-title a {
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
#block-perugrandtravel-post-rel .post-more {
  margin-top: var(--sp-2);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ------------------------------------------------ LISTAS DEL PLUGIN STYLE */
/* Clases que el editor aplica desde el desplegable Style de CKEditor
   (`li.included` / `li.not-included`). El icono es un SVG del TEMA, no un
   media ni un data-uri: asi el editor no tiene que subir nada y el fichero
   viaja versionado con el repo. Mismo patron que condetravel, x-treme y
   sakura. Dentro del editor lo pinta `css/editor.css`, declarado en el
   .info.yml con `ckeditor5-stylesheets`.

   El icono va en un ::before ABSOLUTO, no en el background del li. La razon
   es que un fondo se recorta a la caja del elemento, asi que para meterlo en
   la franja de la vineta hay que tirar del li con un margen negativo — y ese
   margen se come la sangria de la lista y deja el icono pegado al borde de la
   columna. Es lo que hacen condetravel y x-treme con su `margin-left: -25px`,
   y solo les cuadra porque tiran menos de lo que su UL tiene de relleno.

   Un pseudoelemento absoluto SI puede salirse, con `left` negativo. Entonces
   el li se queda sin padding ni margen: su texto cae donde caeria el de un li
   normal, y el icono flota en el hueco del marcador. Sin numeros magicos y
   sin !important. */
li.included,
li.not-included,
li.highlight,
li.packing,
li.important {
  /* LOS MANDOS. Cambiar aqui afecta a los cinco iconos; para tocar uno solo,
     redefinir la variable en su propia regla:
       li.highlight { --li-icon-size: 14px; } */
  --li-icon-size: 20px;   /* tamano del icono */
  --li-icon-x: -32px;     /* posicion respecto al texto; negativo lo lleva a
                             la franja donde iria la vineta */
  --li-icon-y: 50%;       /* respaldo: centro del item entero */

  position: relative;
  list-style: none;
}
li.included::before,
li.not-included::before,
li.highlight::before,
li.packing::before,
li.important::before {
  content: "";
  position: absolute;
  left: var(--li-icon-x);
  top: var(--li-icon-y);
  transform: translateY(-50%);
  width: var(--li-icon-size);
  height: var(--li-icon-size);
  background-image: var(--li-icon-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
li.included { --li-icon-img: url('../images/listas/included.svg'); }
li.not-included { --li-icon-img: url('../images/listas/not-included.svg'); }
li.highlight { --li-icon-img: url('../images/listas/highlight.svg'); }
li.packing { --li-icon-img: url('../images/listas/packing.svg'); }
li.important { --li-icon-img: url('../images/listas/important.svg'); }
/* La unidad lh es el alto de una linea, asi que esto centra el icono en la
   PRIMERA, no en el item entero. Importa porque muchos items ocupan dos
   lineas: con el 50% de respaldo el icono se iria al medio del parrafo. */
/* Un icono de 20px no cabe donde cabe una vineta de 5, asi que la lista que
   los lleva ensancha su sangria. Sin esto el icono queda a ras del borde de la
   columna, a la misma altura que el h3 y los parrafos de alrededor: medido, el
   h3, el parrafo, la UL y el icono caian los cuatro en el mismo pixel. */
ul:has(> li.included),
ul:has(> li.not-included),
ul:has(> li.highlight),
ul:has(> li.packing),
ul:has(> li.important) { padding-left: 44px; }
@supports (height: 1lh) {
li.included,
li.not-included,
li.highlight,
li.packing,
li.important { --li-icon-y: calc(1lh / 2); }
}

/* Cajas de aviso. La clase pone SOLO el color de fondo; el resto del
   blockquote (margenes, relleno, filete) se queda como lo tenga el tema o el
   editor. El icono no va aqui: se aplica aparte con `li.important`. */
blockquote.important { background: #FFF8EE; }
blockquote.tip       { background: #F1FAF4; }
blockquote.info      { background: #F0F4FE; }