:root {
  --color-brand: #d0252e;
  --color-yellow: #d1a54b;
  --color-blue: #002b4f;
  --color-text: #212529;
  --color-text-gray: #6c757d;
  --color-border: #dee2e6;
  --color-background: #f8f9fa;
  --color-text-muted: #868e96;
  --color-hover: #ffe4af;
  --bg-body: #fff5ed;
  --border-radius: 0.375em;
  --color-white: #fff;

  --width: 100%;
  --max-width: 90%;
}

@font-face {
  font-family: 'Korolev';
  src: url('../font/korolev-medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;

}

body {
  font-size: 1rem;
  line-height: 1.5;
  font-family: 'Korolev', sans-serif;
}

/* == Utilitarios == */
a {
  text-decoration: none;
}

p {
  margin-bottom: 1rem;
}

svg {
  vertical-align: middle;
}

img {
  display: block;
}

table {
  border-collapse: collapse;
  margin-right: auto;
  margin-left: auto;
}

table td {
  border: 1px solid;
}

.line-saku {
  margin: 0.5em auto auto;
  background-color: var(--color-brand);
  height: 5px;
  width: 5%;
  display: inline-block;
  border-radius: 5px;
  border: none;
}

/* == ./Utilitarios == */

/* == Section Header == */

.site-name {
  display: none;
}

.gr-main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 0.25rem;

  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.gr-main-header .field--name-field-tipbloq-head-bloq-logo {
  width: 50%;
}

.gr-main-header .field--name-field-tipbloq-head-bloq-logo img {
  width: 100%;
  height: auto;
}

.gr-info-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gr-info-header .field--name-field-tipbloq-head-link-contact {
  display: flex;
  width: 100%;
  gap: 10px;
  justify-content: end;
}

.field--name-field-tipbloq-head-bq-hdmn {
  display: none;
}

.field--name-field-tipbloq-head-link-contact .field__item a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 700;
}

.field--name-field-tipbloq-head-link-contact svg {
  width: 20px;
  height: 20px;
}

.field--name-field-tipbloq-head-link-contact path {
  fill: var(--color-brand);
}

.field--name-field-tipbloq-head-link-contact .field__item:first-child a {
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  border-radius: 50rem;
}

.field--name-field-tipbloq-head-link-contact .field__item:last-child a {
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  border-radius: 50rem;
}

.field--name-field-tipbloq-head-link-contact .field__item:last-child .link-field-label {
  display: none;
}

.field--name-field-tipbloq-hed-lk-social {
  display: flex;
  gap: 10px;
}

.field--name-field-tipbloq-hed-lk-social a {
  background-color: var(--color-brand);
  font-size: 1.3rem;
  color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
}

.field--name-field-tipbloq-hed-lk-social svg {
  width: 20px;
  height: 20px;
}

.gr-header-redes {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: space-between;
}

.field--name-field-tipbloq-hed-lk-btn a {
  background-color: var(--color-brand);
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;

  &:hover {
    background-color: rgb(128.115942029, 27.884057971, 34.6666666667);
    color: #fff;
  }
}

/* == ./Section Header == */

/* == ALINEADO DE MEDIA EMBEBIDO == */
/* Clases que emite filter_align a partir de data-align. Core no las estiliza
   para temas custom: cada tema las define. Sin esto, el boton de alinear de
   CKEditor no tiene efecto en el front. */

.align-center {
  margin-left: auto;
  margin-right: auto;
}

/* La clase suele caer en un envoltorio sin ancho propio, asi que el margen
   automatico se aplica tambien a la imagen que lleva dentro. */
.align-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.align-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

/* == ./ALINEADO DE MEDIA EMBEBIDO == */

/* == SECTION HEADER BT_HEAD == */
/* Cabecera nueva (bt_head). Selectores tomados del HTML renderizado. */

#block-sakuraexpeditions-bt-head > .field--name-field-bt-head-bloqs-bp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 0;
}

/* Logo */
#block-sitebranding .site-logo img {
  display: block;
  max-width: 200px;
  height: auto;
}

#block-sitebranding .site-name {
  display: none;
}

/* Filas de contacto (email y telefono) */
#block-headercontact .field--name-field-bt-head-contact-parr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.hdr-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.hdr-contact-item:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.hdr-contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-brand);
}

/* Redes sociales */
#block-headersocial .field--name-field-bt-head-social-parr {
  display: flex;
  gap: 8px;
}

.hdr-social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: var(--color-white);
  transition: background-color 0.2s;
}

.hdr-social-item:hover {
  background-color: var(--color-blue);
}

.hdr-social-item svg {
  width: 18px;
  height: 18px;
}

/* Boton CTA */
#block-headercta .field--name-field-bt-head-cta-lnk a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--border-radius);
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s;
}

#block-headercta .field--name-field-bt-head-cta-lnk a:hover {
  background-color: var(--color-blue);
}

/* Selector de idioma: solo la bandera, como el diseno */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface ul.links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-link {
  display: inline-flex;
  font-size: 0;
}

#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-icon {
  display: block;
  width: 26px;
  height: auto;
}

/* == ./SECTION HEADER BT_HEAD == */

/* == SECTION FOOTER BT_FOOT == */
/* Footer nuevo (bt_foot). Selectores tomados del HTML renderizado. */

#block-sakuraexpeditions-bt-foot {
  position: relative;
  overflow: hidden;
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* Imagen de fondo: banda superior en flujo normal. Las columnas van DEBAJO,
   sobre el azul solido, no encima de la ilustracion. */
#block-sakuraexpeditions-bt-foot .ft-bg {
  line-height: 0;
}

#block-sakuraexpeditions-bt-foot .ft-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* position+z-index se mantienen: crean el contexto de apilado que necesita
   la franja roja del copyright para pintarse por encima del fondo. */
#block-sakuraexpeditions-bt-foot .ft-cols {
  position: relative;
  z-index: 1;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 40px;
}

#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-bloqs-bp {
  display: grid;
  gap: 32px;
}

/* Texto y enlaces generales del footer */
#block-sakuraexpeditions-bt-foot a {
  color: var(--color-white);
  text-decoration: none;
}

#block-sakuraexpeditions-bt-foot a:hover {
  color: var(--color-yellow);
}

/* Titulos de columna (campo heading, h3) */
#block-sakuraexpeditions-bt-foot h3 {
  margin: 0 0 16px;
  color: var(--color-white);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -- Columna 1: empresa -- */
#block-footercompany .field--name-field-bt-foot-company-log-med img {
  display: block;
  max-width: 190px;
  height: auto;
  margin-bottom: 16px;
}

#block-footercompany .field--name-field-bt-foot-company-desc-txl {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
}

#block-footercompany .field--name-field-bt-foot-company-soc-parr {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

#block-sakuraexpeditions-bt-foot .ft-social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-white);
  transition: background-color 0.2s;
}

#block-sakuraexpeditions-bt-foot .ft-social-item:hover {
  background-color: var(--color-yellow);
}

/* El color va en el svg, no en el <a>: el enlace lo pisa la regla de id
   '#block-...-bt-foot a' y el icono saldria blanco sobre blanco. */
#block-sakuraexpeditions-bt-foot .ft-social-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
}

#block-footercompany .field--name-field-bt-foot-company-legal-lnk {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}

/* -- Columnas 2 y 3: listas de links -- */
#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-links-lnk {
  display: grid;
  align-content: start;
  gap: 12px;
  font-size: 15px;
}

/* -- Columna 4: contacto -- */
/* align-content: start para que la ultima fila no se estire cuando la
   columna es mas baja que la del texto. */
#block-sakuraexpeditions-bt-foot .field--name-field-bt-foot-contact-parr {
  display: grid;
  align-content: start;
  gap: 14px;
}

/* field_group_link solo genera el <a> (y con el la clase .ft-contact-item)
   cuando la fila tiene destino. Direccion y Horario no lo tienen, asi que
   se estiliza tambien el paragraph: las 4 filas maquetan igual. */
#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact,
#block-sakuraexpeditions-bt-foot .ft-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}

#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--color-white);
}

#block-sakuraexpeditions-bt-foot .paragraph--type--pt-foot-contact p {
  margin: 0;
}

/* -- Copyright -- */
#block-footercopyright {
  position: relative;
  margin-top: 32px;
  padding: 18px 0;
  font-size: 14px;
  text-align: center;
}

/* Franja roja a sangre. Ademas de dar color al copyright, es la que corta
   la imagen de fondo justo aqui: el overflow:hidden del bloque la recorta. */
#block-footercopyright::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -100vh;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-brand);
}

#block-footercopyright p {
  margin: 0;
}

/* == ./SECTION FOOTER BT_FOOT == */


/* == Section Slider Home == */
/* Alto del chrome fijo que va encima del hero (cabecera + barra de menu).
   Medido en el sitio: 113 + 74 = 187 en escritorio. */
:root {
  --alto-chrome: 150px;
  /* Alto del banner de aviso (sitewide_alert). 0 hasta que exista; cuando el
     usuario lo cierra el nodo desaparece y :has() lo devuelve a 0 solo. */
  --alto-banner: 0px;
}

body:has([data-sitewide-alert] .sitewide-alert) {
  --alto-banner: 64px;
}

/* El hero ocupa exactamente lo que queda de pantalla bajo la cabecera.
   svh en vez de vh para que las barras del navegador movil no lo descuadren,
   y clamp para que ni se aplaste en pantallas bajas ni crezca sin limite en
   monitores altos (patron clamp() de la metodologia). */
.gr-slider-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: clamp(420px, calc(100vh - var(--alto-chrome) - var(--alto-banner)), 900px);
  height: clamp(420px, calc(100svh - var(--alto-chrome) - var(--alto-banner)), 900px);
}

.field--name-field-tipbloq-sldh-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

/* El envoltorio del media (div.contextual-region > field--name-field-media-image
   > img) no hereda el 100%: la foto se pintaba a su proporcion natural, mas
   alta que el hero, y el contenedor recortaba la caja por arriba en vez de
   centrar con object-fit. Toda la cadena al 100% para que cover encaje. */
.field--name-field-tipbloq-sldh-img > *,
.field--name-field-tipbloq-sldh-img > * > *,
.field--name-field-tipbloq-sldh-img > * > * > * {
  height: 100%;
  width: 100%;
}

.field--name-field-tipbloq-sldh-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Sombra sobre el hero: el mismo degradado inferior que el hero de tour,
   copiado de condetraveladventures. Va en ::after y el contenido por encima. */
.gr-slider-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.15);
}

.gr-slider-hero .slider__gr-content {
  position: relative;
  z-index: 2;
}

/* Logueado, la barra de Drupal empuja la pagina y el hero se salia por abajo.
   Drupal no expone la altura como variable CSS, solo como clases del body. */
body.toolbar-fixed .gr-slider-hero {
  height: clamp(420px, calc(100vh - var(--alto-chrome) - var(--alto-banner) - 39px), 900px);
  height: clamp(420px, calc(100svh - var(--alto-chrome) - var(--alto-banner) - 39px), 900px);
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .gr-slider-hero {
  height: clamp(420px, calc(100vh - var(--alto-chrome) - var(--alto-banner) - 79px), 900px);
  height: clamp(420px, calc(100svh - var(--alto-chrome) - var(--alto-banner) - 79px), 900px);
}

.field--name-field-tipbloq-sldh-img .field--type-image,
.field--name-field-tipbloq-sldh-img .field__item {
  height: 100%;
}

/* Imagen: patron clamp + object-fit de la metodologia. Antes el alto lo
   heredaba de un selector comodin '*', que afectaba a todo lo de dentro. */
.field--name-field-tipbloq-sldh-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slider__gr-content {
  position: relative;
  height: 100%;
  width: 100%;
}

/* min-height:0 y overflow evitan que el contenido empuje los botones fuera
   del hero cuando la pantalla es baja. */
.slider__gr-content .container-aux {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  height: 100%;
  gap: clamp(10px, 2vh, 26px);
  padding: clamp(16px, 3vh, 40px) 20px;
  color: white;
  text-align: center;
}

.slider__gr-content h1 {
  margin: 0;
  padding: 0;
  color: white;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.1;
}

.slider__gr-content .field--name-field-tipbloq-sldh-title,
.slider__gr-content .field--name-field-tipbloq-sldh-body {
  margin: 0;
}

.slider__gr-content .field--name-field-tipbloq-sldh-body {
  font-size: clamp(13px, 1.6vh, 15px);
}

.slider__gr-content .field--name-field-tipbloq-sldh-links {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

/* Los dos botones comparten estilo, copiado del hero de salkantaytrekking.com:
   fondo negro al 60%, borde blanco fino, sin radio, con sombra. */
.slider__gr-content .field--name-field-tipbloq-sldh-links a {
  display: inline-block;
  padding: clamp(0.8rem, 1.8vh, 1rem) 2rem;
  border-radius: 0;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border: 0.8px solid #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.slider__gr-content .field--name-field-tipbloq-sldh-links a:hover {
  background: rgba(0, 0, 0, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* == ./Section Slider Home == */

/* == Section About Us Home == */
.gr-abt-home {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;

  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.gr-abt-home .field--name-field-tipbloq-abt-img {
  width: 50%;
}

.gr-abt-home .field--name-field-tipbloq-abt-img img {
  width: 100%;
  height: auto;
}

.gr-abt-home .field--name-field-tipbloq-abt-body {
  font-size: 14px;
}

.gr-abt-home .field--name-field-tipbloq-abt-gallery .field__item:not(:first-child) {
  display: none;
}

.gr-abt-home .field--name-field-tipbloq-abt-gallery img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

/* == ./Section About Us Home == */

/* == Section Inca Trail Home == */
#block-sakuraexpeditions-bloqcamincahome {
  background-color: var(--color-background);
}

.gr-inctrail-main {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
}

.gr-inctrail-main .field--name-field-tip-bloq-caminc-title {
  text-align: center;
  color: var(--color-brand);

  &:after {
    content: '';
    height: 4px;
    width: 150px;
    background: linear-gradient(to right,
        var(--color-brand) 33.33%,
        var(--color-yellow) 33.33% 66.66%,
        var(--color-blue) 66.66% 100%);
    border-radius: 2px;
    display: block;
    margin: 10px auto;
  }
}

.gr-inctrail-main .field--name-field-tip-bloq-caminc-body {
  text-align: center;
  font-size: 14px;
}

.view-vista-tour-cam-inca,
.view-vista-tax-paq-tour {
  margin-top: 20px;
}

.view-vista-tour-cam-inca>.view-content,
.view-vista-tax-paq-tour>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-tour-cam-inca>.view-content>.views-row,
.view-vista-tax-paq-tour>.view-content>.views-row {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
}

.view-vista-tour-cam-inca .field-pgtour-thumbnail,
.view-vista-tax-paq-tour .field-pgtour-thumbnail {
  height: 280px;
}

.view-vista-tour-cam-inca .field-pgtour-thumbnail *,
.view-vista-tax-paq-tour .field-pgtour-thumbnail * {
  height: 100%;
}

.view-vista-tour-cam-inca .field-pgtour-thumbnail img,
.view-vista-tax-paq-tour .field-pgtour-thumbnail img {
  width: 100%;
  object-fit: cover;
}

.view-vista-tour-cam-inca .field-pgtour-det-tours,
.view-vista-tax-paq-tour .field-pgtour-det-tours {
  position: absolute;
  top: 10px;
  right: 10px;
}

.view-vista-tour-cam-inca .field-pgtour-det-tours .views-row,
.view-vista-tax-paq-tour .field-pgtour-det-tours .views-row {
  display: flex;
  gap: 5px;
  font-size: 13px;

  background: hsla(0, 0%, 100%, 0.95);
  color: var(--color-blue);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  z-index: 3;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.view-vista-tour-cam-inca .field-pgtour-det-tours svg,
.view-vista-tax-paq-tour .field-pgtour-det-tours svg {
  width: 18px;
  height: 18px;
}

.view-vista-tour-cam-inca .tour__gr-content,
.view-vista-tax-paq-tour .tour__gr-content {
  padding: 1.5rem;
}

.view-vista-tour-cam-inca .field-pgtour-introduction,
.view-vista-tax-paq-tour .field-pgtour-introduction {
  padding-bottom: 10px;
}

.view-vista-tour-cam-inca .gr-tour-booking,
.view-vista-tax-paq-tour .gr-tour-booking {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-vista-tour-cam-inca .views-field-title,
.view-vista-tax-paq-tour .views-field-title {
  margin-bottom: 10px;
}

.view-vista-tour-cam-inca .views-field-title *,
.view-vista-tax-paq-tour .views-field-title * {
  color: var(--color-text);
}

.view-vista-tour-cam-inca .field-pgtour-price,
.view-vista-tax-paq-tour .field-pgtour-price {
  flex: 1;
  border-right: 1px solid var(--color-border);
  display: flex;
  color: var(--color-text-gray);
  font-size: 13px;
  text-transform: uppercase;
  flex-direction: column;
}

.view-vista-tour-cam-inca .field-pgtour-price .price,
.view-vista-tax-paq-tour .field-pgtour-price .price {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-brand);
  letter-spacing: -0.04em;
  text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
}

.view-vista-tour-cam-inca .field-pgtour-link-content,
.view-vista-tax-paq-tour .field-pgtour-link-content {
  flex: 1;
}

.view-vista-tour-cam-inca .field-pgtour-link-content a,
.view-vista-tax-paq-tour .field-pgtour-link-content a {
  background: var(--color-brand);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.view-vista-tour-cam-inca .field-pgtour-difficulty,
.view-vista-tax-paq-tour .field-pgtour-difficulty {
  margin-top: 15px;
  margin-bottom: 15px;
}

.view-vista-tour-cam-inca .field-pgtour-difficulty .difficulty-rating,
.view-vista-tax-paq-tour .field-pgtour-difficulty .difficulty-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.view-vista-tour-cam-inca .field-pgtour-difficulty .stars,
.view-vista-tax-paq-tour .field-pgtour-difficulty .stars {
  display: flex;
  gap: 2px;
}

.view-vista-tour-cam-inca .field-pgtour-difficulty .dot,
.view-vista-tax-paq-tour .field-pgtour-difficulty .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e9ecef;
  border: 2px solid rgb(222, 226, 230);
  transition: all 0.3s ease;
}

.view-vista-tour-cam-inca .field-pgtour-difficulty .dot.active,
.view-vista-tax-paq-tour .field-pgtour-difficulty .dot.active {
  background: linear-gradient(135deg,
      var(--color-blue) 0%,
      rgb(37.0283018868, 99.2358490566, 119.9716981132) 100%);
  border-color: var(--color-blue);
  box-shadow: 0 0 8px rgba(25, 67, 81, 0.4);
}

/* == ./Section Inca Trail Home == */

/* == Slider Tours Machu Picchu Train == */
.gr-slider-machu {
  position: relative;
}

.gr-slider-machu .field--name-field-tipbloq-sld-machh-img {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* position:relative en el contenedor: sin el, el 100% del velo se media
   contra el envoltorio absoluto (631px) y no contra la foto (680px), y
   quedaba una franja sin cubrir abajo. Velo uniforme y mas claro. */
.gr-slider-machu .field--name-field-tipbloq-sld-machh-img .field--type-image {
  position: relative;
}

.gr-slider-machu .field--name-field-tipbloq-sld-machh-img .field--type-image:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.gr-slider-machu .field--name-field-tipbloq-sld-machh-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gr-slider-machu .field--name-field-tipbloq-sld-machh-img * {
  height: 100%;
}

.gr-machu-content {
  position: relative;
  color: white;
  padding: 8% 20px;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-title {
  text-align: center;
  margin-bottom: 10px;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-title h2 {
  font-size: 2rem;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-body {
  font-size: 14px;
  text-align: center;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-links svg {
  width: 20px;
  height: 20px;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-links a {
  padding: 10px;
  font-size: 16px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
  text-transform: uppercase;
}

.field--name-field-tipbloq-sld-machh-links .field__item:first-child a {
  background-color: var(--color-brand);
  color: white;
  text-align: center;
  border: 2px solid var(--color-brand);

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg,
        rgb(149.0579710145, 32.4420289855, 40.3333333333) 0%,
        rgb(128.115942029, 27.884057971, 34.6666666667) 100%);
    border: 1px solid rgb(128.115942029, 27.884057971, 34.6666666667);
  }
}

.field--name-field-tipbloq-sld-machh-links .field__item:last-child a {
  border: 2px solid white;
  border-radius: 0.5rem;
  color: white;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    background-color: hsla(0, 0%, 100%, 0.2);
    border-color: #fff;
    backdrop-filter: blur(10px);
  }
}

/* == ./Slider Tours Machu Picchu Train == */

/* == Section Best Machu Picchu == */
#block-sakuraexpeditions-bloqbestmachuhm {
  padding: 2rem 0;
}

.gr-bestmachu-main {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.gr-bestmachu-main .field--name-field-tipbloq-bestmhm-title {
  text-align: center;
  color: var(--color-brand);

  &:after {
    content: '';
    height: 4px;
    width: 150px;
    background: linear-gradient(to right,
        var(--color-brand) 33.33%,
        var(--color-yellow) 33.33% 66.66%,
        var(--color-blue) 66.66% 100%);
    border-radius: 2px;
    display: block;
    margin: 10px auto;
  }
}

.gr-bestmachu-main .field--name-field-tipbloq-bestmhm-body {
  text-align: center;
  font-size: 14px;
}

.view-vista-tourh-best-inca>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-tourh-best-inca>.view-content>.views-row {
  height: 400px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.view-vista-tourh-best-inca .field-pgtour-thumbnail {
  position: absolute;
  width: 100%;
  height: 100%;
}

.view-vista-tourh-best-inca .field-pgtour-thumbnail * {
  height: 100%;
}

.view-vista-tourh-best-inca .field-pgtour-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.view-vista-tourh-best-inca .gr-tour-content {
  position: relative;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.85) 100%);
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 20px;
}

.view-vista-tourh-best-inca .field-pgtour-det-tours {
  position: absolute;
  top: 10px;
  right: 10px;
}

.view-vista-tourh-best-inca .view-parg-detl-tourh .views-row {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 0.8em;
  color: black;
  padding: 3px 8px;
  border-radius: 5px;
  background-color: white;
  line-height: 1;
}

.view-vista-tourh-best-inca .field-pgtour-title a {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  color: white;
  font-weight: 700;
  font-size: 22px;
}

.view-vista-tourh-best-inca .views-field-title {
  margin-bottom: 10px;
}

.view-vista-tourh-best-inca .field-pgtour-pricing .field-price {
  background: var(--color-brand);
  padding: 8px 22px;
  border-radius: 10px;
  border: 2px solid var(--color-brand);
  display: inline-flex;
  font-size: 13px;
  color: #fff;
  gap: 5px;
  align-items: center;

  & .price {
    font-size: 20px;
    font-weight: 700;
    color: white;
  }
}

.view-vista-tourh-best-inca .field-pgtour-link-content {
  display: block;
}

.view-vista-tourh-best-inca .field-pgtour-link-content a {
  background-color: var(--color-yellow);
  color: #fff;
  padding: 8px 20px;
  font-size: 1rem;
  display: inline-block;
  border-radius: 0.375rem;
}

.view-vista-tourh-best-inca .gr-trour-booking {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-vista-tourh-best-inca .field-pgtour-introduction {
  font-size: 13px;
}

/* == ./Section Best Machu Picchu == */

/* == Section Salkantay Trek == */
#block-sakuraexpeditions-bloqsalkatrekhm {
  background-color: var(--color-background);
}

.gr-salka-main {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
}

.gr-salka-main .field--name-field-tipbloq-salktr-title {
  text-align: center;
  color: var(--color-brand);

  &:after {
    content: '';
    height: 4px;
    width: 150px;
    background: linear-gradient(to right,
        var(--color-brand) 33.33%,
        var(--color-yellow) 33.33% 66.66%,
        var(--color-blue) 66.66% 100%);
    border-radius: 2px;
    display: block;
    margin: 10px auto;
  }
}

.gr-salka-main .field--name-field-tipbloq-salktr-body {
  text-align: center;
  font-size: 14px;
}

.view-vista-tourh-salka-trek>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-tourh-salka-trek>.view-content>.views-row {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
}

.view-vista-tourh-salka-trek .field-pgtour-thumbnail {
  height: 280px;
}

.view-vista-tourh-salka-trek .field-tax-dettour-iconw1 {
  position: absolute;
  top: 10px;
  right: 10px;
}

.view-vista-tourh-salka-trek .field-tax-dettour-iconw1 .views-row {
  display: flex;
  gap: 5px;
  font-size: 13px;
  background: hsla(0, 0%, 100%, 0.95);
  color: var(--color-blue);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.view-vista-tourh-salka-trek .field-pgtour-thumbnail * {
  height: 100%;
}

.view-vista-tourh-salka-trek .field-pgtour-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-vista-tourh-salka-trek .gr-tour-content {
  padding: 1.5rem;
}

.view-vista-tourh-salka-trek .views-field-title {
  margin-bottom: 10px;
}

.view-vista-tourh-salka-trek .views-field-title a {
  color: var(--color-text);
}

.view-vista-tourh-salka-trek .field-pgtour-introduction {
  margin-bottom: 10px;
}

.view-vista-tourh-salka-trek .field-pgtour-difficulty {
  margin-top: 15px;
  margin-bottom: 15px;
}

.view-vista-tourh-salka-trek .field-pgtour-difficulty .difficulty-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.view-vista-tourh-salka-trek .field-pgtour-difficulty .stars {
  display: flex;
  gap: 2px;
}

.view-vista-tourh-salka-trek .field-pgtour-difficulty .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e9ecef;
  border: 2px solid rgb(222, 226, 230);
  transition: all 0.3s ease;
}

.view-vista-tourh-salka-trek .field-pgtour-difficulty .dot.active {
  background: linear-gradient(135deg,
      var(--color-blue) 0%,
      rgb(37.0283018868, 99.2358490566, 119.9716981132) 100%);
  border-color: var(--color-blue);
  box-shadow: 0 0 8px rgba(25, 67, 81, 0.4);
}

.view-vista-tourh-salka-trek .gr-tour-booking {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-vista-tourh-salka-trek .field-pgtour-price {
  flex: 1;
  border-right: 1px solid var(--color-border);
  display: flex;
  color: var(--color-text-gray);
  font-size: 13px;
  text-transform: uppercase;
  flex-direction: column;

  & .price {
    font-size: 30px;
    font-weight: bold;
    color: var(--color-brand);
    letter-spacing: -0.04em;
    text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
  }
}

.view-vista-tourh-salka-trek .field-pgtour-link-content {
  flex: 1;
}

.view-vista-tourh-salka-trek .field-pgtour-link-content a {
  background: var(--color-brand);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.gr-slider-trust {
  position: relative;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-img .field--type-image {
  position: relative;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-img .field--type-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-img * {
  height: 100%;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gr-slider-trust .gr-slider-content {
  position: relative;
  color: white;
  padding: 8% 20px;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-title {
  text-align: center;
  margin-bottom: 10px;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-title h2 {
  font-size: 28px;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-body {
  text-align: center;
  font-size: 13px;
}

.gr-slider-trust .field--name-field-tipbloq-sld-trust-parg-tru {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.paragraph--type--tip-parag-sld-trust {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: hsla(0, 0%, 100%, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid hsla(0, 0%, 100%, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon .field--type-image {
  height: auto;
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon svg {
  width: 24px;
  height: 24px;
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon path {
  fill: var(--color-yellow);
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-title {
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-title h3 {
  font-size: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-body {
  font-size: 13px;
}

/* == ./Section Salkantay Trek == */

/* == Section certifications == */
.gr-cert-main {
  padding: 2rem 0;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.gr-cert-main .field--name-field-tipbloq-cert-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gr-cert-main .field--name-field-tipbloq-cert-imgs img {
  object-fit: contain;
  width: 100%;
  height: 110px;
}

/* == ./Section certifications == */

/* == Section List Blogs Home == */
/* Word "Ajustes requeridos": fondo ligeramente plomo para el segmento. */
#block-sakuraexpeditions-bloqbloghm {
  background-color: #eef0f3;
}

.gr-bloghm-main {
  padding: 2rem 0;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.gr-bloghm-main .field--name-field-tipbloq-bloghm-title {
  text-align: center;
  color: var(--color-brand);

  &:after {
    content: '';
    height: 4px;
    width: 150px;
    background: linear-gradient(to right,
        var(--color-brand) 33.33%,
        var(--color-yellow) 33.33% 66.66%,
        var(--color-blue) 66.66% 100%);
    border-radius: 2px;
    display: block;
    margin: 10px auto;
  }
}

.gr-bloghm-main .field--name-field-tipbloq-bloghm-body {
  text-align: center;
  font-size: 14px;
}

.view-vista-list-blog-hm>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-list-blog-hm>.view-content>.views-row {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: auto 60%;
}

.view-vista-list-blog-hm .field-blog-thumbnail * {
  height: 100%;
}

.view-vista-list-blog-hm .field-blog-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.view-vista-list-blog-hm .gr-post-content {
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.view-vista-list-blog-hm .field-blog-title {
  margin-bottom: 10px;
}

.view-vista-list-blog-hm .field-blog-title a {
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  font-size: 14px;
}

.view-vista-list-blog-hm .field-blog-introduction {
  font-size: 13px;
}

.view-vista-list-blog-hm .gr-blog-authored {
  display: flex;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.view-vista-list-blog-hm .field-blog-authoredby {
  color: #868e96;
  font-size: 0.75rem;
}

.view-vista-list-blog-hm .field-blog-authoredon {
  color: #868e96;
  font-size: 0.75rem;
  margin-top: 5px;
}

/* == ./Section List Blogs Home == */

/* ===  Reviews === */
/* Las resenas vienen del modulo reviews_widget (widget de Tripadvisor) con su
   propio CSS de fabrica; aqui solo la cabecera de la seccion. */

.gr-reviews-main {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.gr-reviews-main .section-head {
  text-align: center;
  margin-bottom: 30px;
}

.gr-reviews-main .section-head h2 {
  color: var(--color-blue);
  font-weight: 700;
  margin-bottom: 10px;
}

.gr-reviews-main .section-head p {
  color: #6c757d;
  margin: 0;
}
/* ===  ./Reviews === */

/* == Section Footer == */

.gr-footer-main {
  background-color: var(--color-blue);
  padding-bottom: 1rem;
}

.field--name-field-tipbloq-ft-bq-ftreser {
  background-color: var(--color-yellow);
  color: #fff;
  text-align: center;
  padding: 20px;
}

.field--name-field-tipbloq-ft-bq-ftreser p {
  margin: 0;
}

.gr-footer-main .field--name-field-tipbloq-ft-background {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  line-height: 0;
}

.gr-footer-main .field--name-field-tipbloq-ft-background img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.gr-footer-blocks {
  width: var(--width);
  max-width: var(--max-width);
  margin: -200px auto 0;
}

.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title {
  margin-bottom: 10px;
  margin-top: 10px;
}

.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title:after {
  content: '';
  background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
  display: block;
  height: 1px;
  text-align: left;
  border-radius: 0;
  margin-top: 5px;
}

.gr-footer-blocks .field--name-field-tipbloq-ftsaku-title h2 {
  font-size: 16px;
  color: white;
  font-weight: 700;
}

.gr-footer-blocks .field--name-field-tipbloq-ftsaku-values a {
  color: white;
  font-size: 13px;
}

.gr-footer-blocks .field--name-field-tipbloq-ftconts-title {
  margin-bottom: 10px;
  margin-top: 15px;
}

.gr-footer-blocks .field--name-field-tipbloq-ftconts-title:after {
  content: '';
  background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
  display: block;
  height: 1px;
  text-align: left;
  border-radius: 0;
  margin-top: 5px;
}

.gr-footer-blocks .field--name-field-tipbloq-ftconts-title h2 {
  font-size: 16px;
  color: white;
  font-weight: 700;
}

.gr-footer-blocks .field--name-field-tipbloq-ftconts-values a {
  color: white;
  font-size: 13px;
}

.gr-footer-blocks .field--name-field-tipbloq-desti-title {
  margin-bottom: 10px;
  margin-top: 15px;
}

.gr-footer-blocks .field--name-field-tipbloq-desti-title:after {
  content: '';
  background: linear-gradient(45deg, rgb(203, 196, 196), transparent);
  display: block;
  height: 1px;
  text-align: left;
  border-radius: 0;
  margin-top: 5px;
}

.gr-footer-blocks .field--name-field-tipbloq-desti-title h2 {
  font-size: 16px;
  color: white;
  font-weight: 700;
}

/* == ./Section Footer == */

/* == SECTION  TAX BLOG == */
.view-vista-tax-blog-slider>.view-content>.views-row {
  position: relative;
}

.view-vista-tax-blog-slider .field-tax-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.media-image-only,
.field--type-image {
  height: 100%;
}

.view-vista-tax-blog-slider .field-tax-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-vista-tax-blog-slider .gr-taxblog-content {
  position: relative;
  padding: 20% 0;
}

.gr-taxblog-content {
  color: white;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.gr-taxblog-content h1 {
  padding: 0;
  margin: 0;
}

.view-vista-tax-blog-slider .field-tax-image .field--type-image::before {
  content: '';
  position: absolute;
  background: #0000002e;
  height: 100%;
  width: 100%;
}

.view-vista-tax-blog-slider .field-tax-body {
  font-size: 14px;
  margin-top: 10px;
}

.view-vista-tax-list-blog {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.view-vista-tax-list-blog>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-tax-list-blog>.view-content>.views-row {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  height: 220px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.view-vista-tax-list-blog .gr-blog-content {
  padding: 15px;
  font-size: 13px;
}

.view-vista-tax-list-blog .field-blog-thumbnail {
  height: 220px;
}

.view-vista-tax-list-blog .field-blog-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.view-vista-tax-list-blog .field-blog-introduction {}

.view-vista-tax-list-blog .field-blog-title {
  margin-bottom: 10px;
}

.view-vista-tax-list-blog .field-blog-title a {
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.view-vista-tax-list-blog .gr-authored-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  color: var(--color-text-muted);
  border-top: 1px solid #e9ecef;
  padding-top: 8px;
  text-transform: capitalize;
}

.taxonomy-vocabulary--tax-blog #contenedor {
  padding: 2rem 0;
}

/* == ./SECTION  TAX BLOG == */

/* == PAGINA SINGLE BLOG == */
.view-vista-slider-blog .view-content {
  position: relative;
}

.view-vista-slider-blog .field-thumbnail {
  position: absolute;
  width: 100%;
  height: 100%;

  & .field--type-image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.7) 100%);
  }

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.view-vista-slider-blog .slider__content {
  position: relative;
  padding: 15% 0;
  color: white;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

.view-vista-slider-blog .field-title h1 {
  font-size: 1.5em;
  margin: 0 0 10px;
}

.view-vista-slider-blog .field-authored {
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}

.page-node-type-page-blog #contenedor {
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* == ./PAGINA SINGLE BLOG == */

/* == PAGINA ABOUT US == */
.view-vista-slider-about-us {}

.view-vista-slider-about-us .field-abtus-slider {
  max-height: 100px;
  height: auto;
  overflow: hidden;
}

.view-vista-slider-about-us .field-abtus-slider img {
  width: 100%;
  margin-top: -80px;
}

/* == ./PAGINA ABOUT US == */

.node--type-page-about-us {
  width: 75%;
  margin: 0 auto;
}

.node--type-page-about-us .advanced-container:nth-child(1) {
  h3 {
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-color: var(--color-yellow);
    text-decoration-thickness: 3px;
  }

}

.node--type-page-about-us .advanced-container:nth-child(2) {
  flex-direction: column-reverse;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) img {
  border-radius: 1rem 1rem 0 0;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) .advanced-container {
  flex-direction: row;
  display: flex;
  margin: 0;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(1) .advanced-container .advanced-column p {
  background-color: var(--color-blue);
  color: white;
  border-radius: 0 0 1rem 1rem;
  border: none;
  width: 100%;
  font-size: 1rem;
  text-align: center;
  margin: 0;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(2) h3 {
  margin-bottom: 1rem;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-column:nth-child(2) h3 span {
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 3px;
}

.node--type-page-about-us .advanced-container:nth-child(2) .advanced-container p {
  color: var(--color-brand);
  border: 1px solid var(--color-yellow);
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  margin: 1rem;
}

.node--type-page-about-us .advanced-container:nth-child(3) .advanced-column {
  margin: 1rem 0;

  h3 {
    color: var(--color-blue);
    text-decoration: underline;
    text-decoration-color: var(--color-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    font-size: 1.5rem;
  }

  p {
    margin: 0;
  }


  .advanced-container {

    .advanced-column:nth-child(1) {
      box-shadow: 1px 1px 1px var(--color-blue);
      border-radius: 1.5rem;
      padding: 1rem;
      margin: 0.5rem 0.5rem;

      h5 {
        color: var(--color-brand);
        font-size: 1.2rem;
        text-decoration: underline;
        text-decoration-color: var(--color-yellow);
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;
      }
    }

    .advanced-column:nth-child(2) {
      box-shadow: 1px 1px 1px var(--color-blue);
      border-radius: 1.5rem;
      padding: 1rem;
      margin: 0.5rem 0.5rem;

      h5 {
        color: var(--color-brand);
        font-size: 1.2rem;
        text-decoration: underline;
        text-decoration-color: var(--color-yellow);
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;
      }
    }

    .advanced-column:nth-child(3) {
      box-shadow: 1px 1px 1px var(--color-blue);
      border-radius: 1.5rem;
      padding: 1rem;
      margin: 0.5rem 0.5rem;

      h5 {
        color: var(--color-brand);
        font-size: 1.2rem;
        text-decoration: underline;
        text-decoration-color: var(--color-yellow);
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;
      }
    }
  }
}

.node--type-page-about-us .advanced-container:nth-child(4) {
  .advanced-column {
    margin: auto 0;

    h3 {
      color: var(--color-brand);
      font-size: 1.5rem;
      text-decoration: underline;
      text-decoration-color: var(--color-yellow);
      text-decoration-thickness: 3px;
      text-underline-offset: 6px;
    }

    p {
      margin: auto 0;
    }
  }

  .advanced-column {
    img {
      display: none;
    }
  }
}

.node--type-page-about-us .advanced-container:nth-child(5) {
  .advanced-column {

    img {
      margin-top: 2rem;
      border-radius: 1rem 1rem 0 0;

    }

    h6 {
      color: var(--color-brand);
      font-size: 1.2rem;
      text-decoration: underline;
      text-decoration-color: var(--color-yellow);
      text-underline-offset: 3px;
      text-decoration-thickness: 3px;
      margin-bottom: 0.5rem;
    }

    p {
      box-shadow: 2px 2px 1px 1px var(--color-blue);
      border-radius: 0rem 0rem 1rem 1rem;
      padding: 0.5rem;
    }

  }

}



/* == PAGINA TOUR == */
/* Estilos generales solo para la pagina tour */

@scope (.page-node-type-package-tour) {
  main {}

  #contenedor {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
  }

  .entity-ref-tab-formatter-tabs>ul {
    list-style: none;
    display: flex;
    background-color: var(--color-blue);
    border-radius: var(--border-radius);
    margin-top: 40px;
    align-items: center;
    overflow: auto;
  }

  .entity-ref-tab-formatter-tabs>ul a {}

  .entity-ref-tab-formatter-tabs>ul a {
    padding: 10px 20px;
    position: relative;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    gap: 5px;
    align-items: center;

    :hover {
      color: var(--color-hover);
    }
  }

  .entity-ref-tab-formatter-tabs>ul a::after {
    position: absolute;
    transition: all 0.5s;
    width: var(--width);
    height: 100px;
    border-radius: 3px;
    background: linear-gradient(to right,
        rgb(226, 126, 9) 17%,
        rgb(226, 126, 9) 17%,
        rgb(226, 126, 9) 42%,
        #ffe4af 42%);
    top: 0;
    left: 0;
  }

  .entity-ref-tab-formatter-tabs>ul svg {
    width: 24px;
    height: 24px;
  }

  .field--name-field-pgtour-short-description {
    background-color: white;
    padding: 20px;
    border-radius: var(--border-radius);
  }

  .field--name-field-pgtour-parag-tabs-tour {
    background-color: white;
  }

  .tabs-items {
    background-color: white;
    border: 1px solid #dee2e6;
    padding: 20px;
    border-radius: 15px;
    margin-top: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tabs-items ul {
    padding-left: 1rem;
  }

  /* Tarjetas de detalles: etiqueta arriba, valor debajo, alineadas a la
     izquierda y con el icono pequeno, como el diseno de referencia.
     Antes eran neumorficas, centradas y con el icono a 55px. */
  .view-parg-detl-tour {
    .view-content {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 8px;
      background-color: var(--color-background);
      transition: background-color 0.2s ease;

      &:hover {
        background-color: #eceff1;
      }
    }

    .field-parg-icon>.field__item {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    /* Tablero "Agrandar iconos de tours": iban a 24px y se perdian al lado
       del texto. Se cambia aqui dentro porque la proximidad de @scope gana a
       la especificidad de cualquier regla de fuera. */
    .field-parg-icon svg {
      width: 32px;
      height: 32px;
    }

    .field-parg-icon path {
      fill: var(--color-text-muted);
    }

    /* Ojo: aqui habia 'font-size: bold', que no es una declaracion valida. */
    .field-parg-name {
      font-size: 13px;
      font-weight: 400;
      color: var(--color-text-muted);
      text-align: left;
      line-height: 1.3;
    }

    .field-parg-valor {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-text);
      text-align: left;
      line-height: 1.3;
    }
  }

  .views-field-field-pgtour-parag-det-tour {
    > .field-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: auto;
      margin: 1rem 0;
    }
  }
}

/* ./Estilos generales solo para la pagina tour */
.block-views-blockvista-tour-booking-block-1 {
  margin-top: 10px;
}

#block-sakuraexpeditions-bloqpricingtour {
  border: 1px solid #dee2e6;
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top:30px;
  
}

#block-sakuraexpeditions-bloqpricingtour .field--name-field-tipbloq-trpring-descrip {
  text-align: center;
}

.view-vista-tour-booking {
  background-color: white;
  padding: 15px;
  border-radius: var(--border-radius);
  position: relative;
  

  >.view-content {}
  .views-field-title{
    text-align: left;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-gray);
    line-height: 1.35;
    margin: 0;
  }

  .views-field-field-pgtour-price {
    text-align: left;
    margin-bottom: 30px;
    margin-top: 20px;
    color: var(--color-blue);
    font-size: 13px;
    line-height: 1.2;

    .price {
      color: var(--color-blue);
      font-size: 30px;
      font-weight: 700;
    }

    .field-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .field-custom-booking {
    position: absolute;
    top: 20px;
    left: 15px;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: var(--border-radius);
    color: white;
    background-color: var(--color-blue);
  }

  .vw__field-enquire-now a {
    background: var(--color-blue);
    color: var(--color-white);
    padding: 10px 20px;
    font-size: 0.80rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    width: 100%;
    text-align: center;
    box-shadow: 6px 7px 11px rgba(0,0,0,0.28),
                -4px -4px 8px rgba(255,255,255,0.5),
                inset 1px 1px 2px rgba(255,255,255,0.22),
                inset -2px -2px 3px rgba(0,0,0,0.18);
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
    border-radius: 0.4rem;
    &:hover{
      transform: translateY(-2px);
      box-shadow: 8px 10px 14px rgba(0,0,0,0.3),
                  -5px -5px 9px rgba(255,255,255,0.55);
    }
    &:active{
      transform: translateY(2px);
      box-shadow: 3px 3px 6px rgba(0,0,0,0.25),
                  inset 3px 3px 5px rgba(0,0,0,0.2);
    }
  }
  .vw__field-wha-enquire-now a{
    background: var(--color-blue);
    color: var(--color-white);
    padding: 10px 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    width: 100%;
    text-align: center;
    box-shadow: 6px 7px 11px rgba(0,0,0,0.28),
                -4px -4px 8px rgba(255,255,255,0.5),
                inset 1px 1px 2px rgba(255,255,255,0.22),
                inset -2px -2px 3px rgba(0,0,0,0.18);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.4rem;
    &:hover{
      transform: translateY(-2px);
      box-shadow: 8px 10px 14px rgba(0,0,0,0.3),
                  -5px -5px 9px rgba(255,255,255,0.55);
    }
    &:active{
      transform: translateY(2px);
      box-shadow: 3px 3px 6px rgba(0,0,0,0.25),
                  inset 3px 3px 5px rgba(0,0,0,0.2);
    }
  }

  .vw__field-link-booking {}

  .vw__field-link-booking a {
    color: var(--color-white);
    background-color: var(--color-yellow);
    font-size: 1rem;
    padding: 8px 20px;
    border-radius: 0.375rem;
    text-transform: uppercase;
    box-shadow:
              7px 8px 12px rgba(0,0,0,0.25),
              -4px -4px 8px rgba(255,255,255,0.65),
              inset 2px 2px 3px rgba(255,255,255,0.35),
              inset -2px -2px 4px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    margin: auto;
    width: 70%;
    display: block;
    text-align: center;
    &:hover{
      transform: translateY(-2px);
      box-shadow: 9px 11px 15px rgba(0,0,0,0.28),
                  -5px -5px 9px rgba(255,255,255,0.7),
                  inset 3px 3px 5px rgba(0,0,0,0.18),
                  inset -2px -2px -2px 4px rgba(255,255,255,0.25);
    }

    &:active{
      transform: translateY(2px);

      box-shadow: 3px 3px 6px rgba(0,0,0,0.18),
      inset 3px 3px 5px rgba(0,0,0,0.18),
      inset -2px -2px 4px rgba(255,255,255, 0.25);
    }
  }
}

.gr__booking-links {
  display: flex;
  flex-direction:row;
  gap: 20px;
  margin-bottom: 10px;
  align-items: center;
  

  >.views-field {
    width: 100%;
  }
}

/* == CAJA DE RESERVA: ajustes de ancho, alto y tipografia fluida ==
   Los botones tenian sombras neumorficas de 4 capas y BOOK NOW iba al 70%
   con margin:auto. Se igualan los tres a ancho completo y misma altura.
   Tamanos con clamp(), que es lo que manda paso2-scripts.md para responsive
   sin abrir un tercer archivo de breakpoint. */

#block-sakuraexpeditions-bloqpricingtour {
  padding: 16px;
}

.view-vista-tour-booking {
  padding: 0;
}

/* Word "Cambios faltantes": nombre del tour mas grande en la caja de reserva. */
.view-vista-tour-booking .views-field-title {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.25;
}

.view-vista-tour-booking .views-field-field-pgtour-price {
  margin-top: 10px;
  margin-bottom: 18px;
}

.view-vista-tour-booking .views-field-field-pgtour-price .price {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.view-parg-detl-tour .field-parg-name {
  font-size: clamp(11px, 0.9vw, 13px);
}

.view-parg-detl-tour .field-parg-valor {
  font-size: clamp(13px, 1.1vw, 15px);
}

/* Los tres botones, con la misma caja */
.view-vista-tour-booking .vw__field-link-booking a,
.view-vista-tour-booking .gr__booking-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 0.4rem;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.view-vista-tour-booking .vw__field-link-booking a {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 700;
}

.view-vista-tour-booking .vw__field-link-booking a:hover,
.view-vista-tour-booking .gr__booking-links a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.view-vista-tour-booking .vw__field-link-booking a:active,
.view-vista-tour-booking .gr__booking-links a:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Los dos de contacto, a la misma altura aunque uno parta en dos lineas */
.gr__booking-links {
  gap: 12px;
  margin-bottom: 0;
  align-items: stretch;
}

/* flex:1 1 0 y no width:100%: dentro de un contenedor flex, width no impide
   que el item se encoja al ancho de su texto. Asi cada boton ocupa la mitad
   exacta y cuadra con las dos columnas de tarjetas de arriba. */
.gr__booking-links > .views-field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

/* Hay un .field-content intermedio que tambien es item flex y se encogia al
   ancho del texto: sin esta regla los .views-field median 183 pero el boton
   de dentro solo 130. */
.gr__booking-links > .views-field > .field-content {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

/* == ./CAJA DE RESERVA == */

.view-vista-slider-tour {
  position: relative;
}

.view-vista-slider-tour .views-field-title {
  z-index: 2;
}

/* Titulo del hero: linea de acento + titular en mayusculas, como el diseno
   de referencia. La linea usa el rojo de marca; con cambiar la variable
   pasa a dorado. */
.view-vista-slider-tour .views-field-title h1 {
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
}

/* Subtitulo del hero: la duracion del tour. Es un bloque hermano del slider
   dentro de la misma region, asi que se posiciona contra ella. */
.region-slider {
  position: relative;
}

#block-sakuraexpeditions-hero-tour-dur {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: var(--color-white);
  font-size: 15px;
}

.view-vista-slider-tour .views-field-title h1::before {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  margin: 0 auto 14px;
  background-color: var(--color-brand);
}

.open-gallery {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;

  background: hsla(0, 0%, 100%, 0.15);
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  display: inline-flex;
  font-size: 11px;
  color: white;
  gap: 5px;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
}

/* Solo aplicar para mobile */
@media (max-width: 1023px) {
  .view-vista-slider-tour {
    overflow: hidden;
    height: 450px;

    >.view-content {
      height: 100%;
    }

    .gallery-grid {
      height: 100%;
      position: relative;

      /* El velo plano #00000082 tapaba la foto entera. Se sustituye por el
         degradado inferior, que solo oscurece donde va el texto. */
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0.5) 80%,
            rgba(0, 0, 0, 0.7) 90%,
            rgba(0, 0, 0, 0.9) 100%);
      }

      >a:not(:first-child) {
        display: none;
      }
    }

    .image-gallery {
      height: 100%;
    }

    .views-field-field-pgtour-slider-image {
      position: absolute;
      height: 100%;
      width: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .views-field-title {
      position: relative;
    }

    .views-field-title {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 52px;
    }

    h1 {
      margin: 0;
      color: white;
      text-align: center;
    }
  }
}

.field--name-field-pgtour-short-description {
  border: 1px solid #dee2e6;
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === SECTION  RELATED TOURS === */

#block-sakuraexpeditions-bloqrelatedtours {
  background-color: #fdf5ed;
  margin-top: 30px;
}

.related__group-main {
  --padding: 1rem;
  width: var(--width);
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

.field--name-field-tip-bloq-reltr-title {
  margin-bottom: 20px;
}

.field--name-field-tip-bloq-reltr-title h2 {
  text-align: center;
  font-size: 2em;
}

.view-vista-related-tours>.view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.view-vista-related-tours>.view-content>.views-row {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.view-vista-related-tours .related__group-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.view-vista-related-tours .related__field-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

.view-vista-related-tours .related__field-title {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 15px;
}

.view-vista-related-tours .related__field-title a {
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
}

.view-vista-related-tours .related__field-description {
  font-size: 16px;
}

.view-vista-related-tours .related__field-details {
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 1.2;
  font-size: 14px;
}

.view-vista-related-tours .related__field-details ol {
  list-style: disc;
}

.view-vista-related-tours .paragraph--type--tip-parag-deta-tour {
  display: flex;
  gap: 8px;
}

.view-vista-related-tours .field--name-field-tipparag-dettour-taxdettou {
  font-weight: 700;
}

.view-vista-related-tours .field--name-field-tipparag-dettour-taxdettou::after {
  content: ':';
}

.view-vista-related-tours .field--name-field-tipparag-dettour-difvalue {
  display: none;
}

.view-vista-related-tours .related__group-princing {
  display: flex;
  margin-top: auto;
  justify-content: space-between;
  padding-top: 15px;
  align-items: center;
  border-top: 1px solid var(--color-border);
}

.view-vista-related-tours .related__field-price {
  display: flex;
  flex-direction: column;
  text-align: start;
  color: var(--color-text-gray);
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1.2;
}

.view-vista-related-tours .related__field-linktx a {
  background: var(--color-brand);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(170, 37, 46, 0.3);
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.view-vista-related-tours .related__field-price .price {
  font-size: 30px;
  font-weight: bold;
  color: var(--color-brand);
  letter-spacing: -0.04em;
  text-shadow: 0 2px 4px rgba(170, 37, 46, 0.1);
}

/* === SECTION  RELATED TOURS === */

/* == ./PAGINA TOUR == */

/* == PAGINA CATEGORIA == */

/* == ./PAGINA CATEGORIA == */
/* === SECCION BOTON FLOTANTE ===*/
#block-sakuraexpeditions-bloqwhatsapp .contextual .trigger {
  right: 0px;
  top: -30px;
}

#block-sakuraexpeditions-bloqwhatsapp .contextual-region .contextual .contextual-links {
  top: -40px;
}

#block-sakuraexpeditions-bloqwhatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
}

.field--name-field-tipbloq-what-link a {
  background-color: #25d366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  text-decoration: none;
}

.field--name-field-tipbloq-what-link svg {
  width: 35px;
  height: 35px;
  fill: white;
}

.field--name-field-tipbloq-what-link path {
  fill: white;
}

.field--name-field-tipbloq-what-link a:hover {
  transform: scale(1.1);
  background-color: #128c7e;
}

/* === ./SECCION BOTON FLOTANTE ===*/

/* === SECCION TOC JS */
/* === SECCION TOC JS */
/* Contenedor principal */
.page-node-type-page-blog #sidebar_right {
  height: 100%;
}

.page-node-type-page-blog .region-sidebar-right {
  height: 100%;
}

.toc-js-container {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.toc-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #333;
  display: inline-block;
  padding-bottom: 5px;
}

.toc-js-container ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-js-container ul ul {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.toc-js-container li {
  margin-bottom: 0.75rem;
}

.toc-js-container a {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.2s ease;
  font-size: 0.95rem;
  line-height: 1.4;
}

.toc-js-container a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.toc-js-container .toc-active>a {
  color: var(--color-brand);
  font-weight: 600;
}

.toc-js-container .toc-active {
  padding-left: 10px;
  margin-left: -13px;
}

/* === ./SECCION TOC JS */

/* == PAGINA CATEGORIA TOURS (TAX) == */
.view-vista-tax-paq-tour {
  width: 90%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.view-vista-slider-tax-paq>.view-content {
  position: relative;
  height: 450px;
}

.view-vista-slider-tax-paq .tax-field-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.view-vista-slider-tax-paq .tax-field-image ::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.7;
  background: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* height:100% en el img necesita que TODA la cadena tenga altura definida.
   Entre .tax-field-image y el <img> hay dos envoltorios del media sin altura
   (uno de ellos el .contextual-region), asi que el porcentaje quedaba
   indeterminado y la imagen salia a su alto natural, desbordando la banda. */
.view-vista-slider-tax-paq .tax-field-image > *,
.view-vista-slider-tax-paq .tax-field-image > * > *,
.view-vista-slider-tax-paq .tax-field-image > * > * > * {
  height: 100%;
}

.view-vista-slider-tax-paq .tax-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.view-vista-slider-tax-paq .gr-slider-content {
  position: relative;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  text-align: center;
}

.view-vista-slider-tax-paq .tax-field-name h1 {
  margin: 0;
  color: white;
}

.view-vista-slider-tax-paq .tax-field-description {
  margin-top: 10px;
}

/* == ./PAGINA CATEGORIA TOURS (TAX) == */



.webform--wf_contactenos #contenedor {
  width: 100%;
  max-width: 85%;
  margin: 0 auto;
}

#edit-wf-contactenos-layout {
  flex-direction: column-reverse;
}

#edit-wf-contactenos-det>.field--name-field-media-image img {
  width: 100%;
  max-width: 10%;
  margin: 0 auto;
}

#edit-wf-contactenos-det>.field--name-field-media-image img {
  width: 100%;
  height: auto;
}

#edit-wf-contactenos-det>p {
  font-size: 1rem;
  font-weight: 100;
}

#edit-wf-contactenos-det ul {
  list-style: none;
}

#edit-wf-contactenos-det .icon-message {
  color: var(--color-blue);
  border: 1px solid var(--color-brand);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 1rem;
}

#edit-wf-contactenos-det>.advanced-container {
  color: var(--color-blue);
  border: 1px solid var(--color-brand);
  padding: 10px;
  border-radius: 10px;
}

#edit-wf-contactanos-titulo-form h2 {
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

#edit-wf-contactenos-nomb-comp {
  width: 100%;
  padding: 10px;
  color: var(--color-blue);
  border: 1px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: -1px 1px 1px 1px var(--color-yellow);

}

#edit-wf-contactenos-nomb-comp--description {
  color: var(--color-blue);
}

#edit-wf-contactenos-correo {
  width: 100%;
  padding: 10px;
  color: var(--color-blue);
  border: 1px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: -1px 1px 1px 1px var(--color-yellow);
}

#edit-wf-contactenos-correo--description {
  color: var(--color-blue);
}


#edit-wf-contactenos-celular {
  width: 100%;
  padding: 10px 10px 10px 50px;
  color: var(--color-blue);
  border: 1px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: -1px 1px 1px 1px var(--color-yellow);
}

#edit-wf-contactenos-celular--description {
  color: var(--color-blue);
}

.iti {
  width: 100%;
}

#edit-wf-contactenos-mensaje {
  width: 100%;
  padding: 10px;
  color: var(--color-blue);
  border: 1px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: -1px 1px 1px 1px var(--color-yellow);
}

#edit-wf-contactenos-mensaje--description {
  color: var(--color-blue);
}

#edit-actions-submit {
  background-color: var(--color-brand);
  color: white;
  float: right;
  padding: 10px 20px;
  border: 1 solid var(--color-brand);
  border-radius: 3px;
  margin-bottom: 1rem;
}

#edit-wf-contactenos-ubi iframe {
  width: 100%;
}

/* aqui tenemos letras con linea dorada*/

.txt-under::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--color-yellow);
  margin-bottom: 1rem;
}



/*usando el icono datos*/
.dt-dato{
  display: inline-flex;
  align-items: center;
}

.dt-dato::before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 3px;
  background-image: url("./../resources/icons/datos.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*usando el icono de recomendaciones*/

.dt-check{
  display: flex;
  align-items: flex-start;
}

.dt-check::before{
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 3px;
  margin-top: 6px;
  flex-shrink: 0;
  background-image: url("./../resources/icons/check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}


/*lista de datos tecnicos*/

.dt-tec{
  list-style-type: none;
}

.dt-tec::before{
  content: "";
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 10px;
  background-image: url("./../resources/icons/cube.svg");
  background-size: contain;
  background-repeat: no-repeat;
}



/*usando el icono d estrella*/


.dt-star::before{
  content: "";
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 10px;
  margin-top: 4px;
  background-image: url("./../resources/icons/star-model.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*usando el icono de marcadura de mapa*/

.dt-maplu::before{
  content: "";
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 10px;
  margin-top: 4px;
  background-image: url("./../resources/icons/maplu.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*usando el icono de incluye*/

.i-incluye{
  display: inline-flex;
  align-items: center;
}

.i-incluye::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background-image: url("./../resources/icons/incluye.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*usando el icono de no incluye*/



.i-noincluye::before{
  content: "";
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 3px;
  margin-top: 2px;
  background-image: url("./../resources/icons/noincluye.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*usando el icono de flecha*/
.p-flecha{
  display: inline-flex;
  align-items: center;
}

.p-flecha::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background-image: url("./../resources/icons/puntoflecha.svg");
  background-size: contain;
  background-repeat: no-repeat;
}


.view-vista-parr-tax-det-pag-paq-tou .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.view-vista-parr-tax-det-pag-paq-tou .view-content .views-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-vista-parr-tax-det-pag-paq-tou .view-content .views-row .views-field-field-tax-dettour-icon svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}




/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 2: cabecera
   ========================================================================== */

/* Fuera los iconos de redes sociales. Se oculta el field__item entero para que
   no quede el hueco del contenedor. */
#block-sakuraexpeditions-bt-head .field__item:has(.hdr-social-item) {
  display: none;
}

/* BOOK NOW en azul y algo mas largo. */
#block-headercta .field--name-field-bt-head-cta-lnk a {
  background-color: var(--color-blue);
  padding-left: 32px;
  padding-right: 32px;
}

/* Iconos de correo y telefono en azul. Los dos svg usan fill="currentColor",
   asi que basta con el color heredado; se mantienen los mismos iconos. */
#block-sakuraexpeditions-bt-head .hdr-contact-item svg {
  color: var(--color-blue);
}

/* Banderas fuera: los idiomas pasan a texto EN / ES. El texto real del enlace
   se anula con font-size 0 y se repone por hreflang, que no depende del idioma
   en que este la pagina. */
/* Solo la bandera. Los PNG tienen proporciones distintas (24x12 la britanica,
   18x12 la espanola): con height fijo salian de ancho desigual. Caja fija y
   object-fit cover para que las dos midan lo mismo. */
/* Por CLASE, no por id: el id del bloque (#block-languageswitcher) sale de su
   etiqueta y en /es/ se convierte en #block-alternadordeidioma. */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .language-icon {
  display: block;
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

/* `flex`, no `inline-flex`: en linea el enlace apoya en la linea base y el li
   crece 7px por debajo de la bandera, que queda alta respecto al resto. */
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface li,
#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface a {
  display: flex;
  align-items: center;
  line-height: 0;
  font-size: 0;
  text-decoration: none;
}

#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#block-sakuraexpeditions-bt-head .block-language-blocklanguage-interface .is-active a {
  text-decoration: underline;
}

/* Cabecera mas delgada: el logo manda la altura. */
#block-sakuraexpeditions-bt-head .site-logo img {
  max-width: 180px;
  height: auto;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 2: menu desplegable
   Mas aire entre tipos de tour y filas mas finas, para que quepan mas
   alternativas sin que el panel crezca.
   ========================================================================== */

.tbm-subnav .tbm-item,
.tbm-submenu .tbm-item {
  margin-bottom: 2px;
}

.tbm-submenu .tbm-link {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.3;
}

.tbm-submenu .tbm-column + .tbm-column {
  padding-left: 28px;
}

.tbm-submenu .tbm-block > .tbm-link,
.tbm-submenu .tbm-item.level-2 > .tbm-link {
  margin-bottom: 6px;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 4: botones de las tarjetas de tour
   Los botones que van SOBRE una fotografia usan el blanco translucido de los
   botones del slider principal; el resto se queda en rojo de marca.
   ========================================================================== */

/* Solo la vista que va sobre fotografia (Inca Trail). Salkantay son tarjetas
   blancas y con este estilo el boton desaparecia: se queda con el rojo. */
.view-vista-tourh-best-inca .field-pgtour-link-content a {
  background: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  padding: 12px 40px;
  font-size: 1.05rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.view-vista-tourh-best-inca .field-pgtour-link-content a:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 4: experiencias vivenciales
   Solo el texto manda, la imagen crece y los botones son blancos y mas largos.
   ========================================================================== */

/* El campo real es field-tipbloq-sld-machh-links; los botones pasan al blanco
   translucido del slider principal y se alargan. */
.gr-machu-content .field--name-field-tipbloq-sld-machh-links a,
.field--name-field-tipbloq-sld-machh-links .field__item:first-child a {
  background: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  padding-left: 38px;
  padding-right: 38px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.gr-machu-content .field--name-field-tipbloq-sld-machh-links a:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Solo el texto manda: un velo uniforme lo hace legible de lado a lado de la
   foto, en vez del oscurecido parcial que dejaba media frase sobre el fondo
   claro. */
/* El velo de vivenciales es el del propio tema (.field--type-image:before);
   aqui solo se le da ancla y se aclara, ver la seccion Slider Machu. */

.gr-machu-content {
  z-index: 2;
}

/* Iconos de "More than a journey" subidos como PNG (D10): se pintan con <img>
   y no como SVG en linea, asi que hay que darles caja. */
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 7: pie de pagina
   ========================================================================== */

/* Los colores de arriba de la imagen se funden con el blanco de la pagina. */
#block-sakuraexpeditions-bt-foot .ft-bg {
  position: relative;
}

/* El azul de la imagen del pie es #012143; el del bloque era el de marca
   (#002b4f) y se veia la costura justo donde acaba la foto. */
#block-sakuraexpeditions-bt-foot {
  background-color: #012143;
}

#block-sakuraexpeditions-bt-foot .ft-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0.85) 35%,
      rgba(255, 255, 255, 0.45) 65%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 8: paginas de tour
   ========================================================================== */

/* La linea de acento pasa de roja a amarilla. */
.view-vista-slider-tour .views-field-title h1::before {
  background-color: var(--color-yellow);
}

/* Duracion mas grande y en mayusculas. */
.view-vb-pgtour-hero-dur .views-row,
.view-vb-pgtour-hero-dur .field-content {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* En movil la galeria es de una columna y ya ocupa lo que necesita; el alto
   del hero se sube solo en escritorio, donde estan las tres fotos. */

/* Primer parrafo de la ficha: capital amarilla que le da peso. */
.field--name-field-pgtour-short-description > p:first-of-type::first-letter {
  color: var(--color-yellow);
  font-size: 3.2em;
  font-weight: 700;
  line-height: 0.85;
  float: left;
  padding-right: 10px;
  padding-top: 4px;
}

/* Menos sangria en el itinerario. */
.field--name-field-pgtour-parag-itinerary ul,
.field--name-field-pgtour-parag-itinerary ol,
.paragraph--type--tip-parag-itinerary ul,
.paragraph--type--tip-parag-itinerary ol {
  padding-left: 18px;
  margin-left: 0;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 9: caja de reserva y caracteristicas
   ========================================================================== */

/* El BOOK NOW amarillo pasa a rojo de marca. */
.vw__field-link-booking a,
.view-vista-tour-booking .vw__field-link-booking a {
  background-color: var(--color-brand);
}

/* Titulos de las caracteristicas mas grandes. */
.gr-details-descrip .field-parg-taxo,
.gr-details-descrip .field-content:first-child {
  font-size: 1.05rem;
}

/* ==========================================================================
   CAMBIOS REQUERIDOS (PDF) - pagina 10: mas tours
   Segmento mas reducido y con el mismo blanco del resto de la pagina.
   ========================================================================== */

#block-sakuraexpeditions-bloqrelatedtours {
  background-color: #fff;
  margin-top: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* == Banner de aviso (sitewide_alert) == */
/* El modulo inyecta <div data-sitewide-alert> encima de todo el sitio por
   hook_page_top y solo trae un gris de fabrica. Patron del banner de
   x-tremetourbulencia: banda del color de marca, mensaje centrado y el enlace
   del mensaje vestido de boton. */
[data-sitewide-alert] .sitewide-alert {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 48px 8px 16px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

[data-sitewide-alert] .sitewide-alert > span {
  display: block;
}

/* El modulo pone el campo inline-block y el <p> trae margenes del tema. */
[data-sitewide-alert] .sitewide-alert .field--name-message {
  display: block;
}

[data-sitewide-alert] .sitewide-alert p {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}

[data-sitewide-alert] .sitewide-alert strong {
  font-weight: 700;
}

/* Word "Ajustes requeridos": flecha al inicio del texto. */
[data-sitewide-alert] .sitewide-alert p::before {
  content: "➤";
  font-size: 16px;
  line-height: 1;
}

[data-sitewide-alert] .sitewide-alert a.alerta-btn {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background-color: var(--color-brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-sitewide-alert] .sitewide-alert a.alerta-btn:hover,
[data-sitewide-alert] .sitewide-alert a.alerta-btn:focus-visible {
  background-color: var(--color-yellow);
  color: #fff;
}

[data-sitewide-alert] .sitewide-alert .close {
  position: absolute;
  top: 50%;
  right: 8px;
  float: none;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

[data-sitewide-alert] .sitewide-alert .close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   TABLERO "EDICION WEB" - lista "Formatos de diseno"
   ========================================================================== */

/* "Centrado de texto": el nombre del tour y el precio, centrados en la caja
   de reserva; el boton y los detalles ya lo estaban. */
.view-vista-tour-booking .views-field-title,
.view-vista-tour-booking .views-field-field-pgtour-price,
.view-vista-tour-booking .view__field-price {
  text-align: center;
}

/* "Disminuir tamano de botones": el "View Tour" de las tarjetas, mas delgado.
   Solo baja el relleno vertical: el ancho lo sigue marcando el texto. */
.view-vista-tour-cam-inca .field-pgtour-link-content a,
.view-vista-tax-paq-tour .field-pgtour-link-content a,
.view-vista-tourh-best-inca .field-pgtour-link-content a,
.view-vista-tourh-salka-trek .field-pgtour-link-content a {
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
}

/* "Resaltar informacion": los tres datos del bloque de experiencias
   vivenciales pasan de texto suelto a etiquetas, con el mismo cristal que
   los iconos de la franja de confianza. */
.field--name-field-tipbloq-sld-machh-aditi {
  /* En movil el campo venia en bloque y cada etiqueta ocupaba todo el ancho. */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* En movil el campo va en columna: sin esto cada etiqueta se estiraria a
     todo el ancho y dejaria de parecer una etiqueta. */
  align-items: flex-start;
}

.field--name-field-tipbloq-sld-machh-aditi .field__item {
  padding: 7px 16px;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 999px;
  background: hsla(0, 0%, 100%, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

/* "Alinear el texto": la franja de confianza acaba a la misma altura en los
   tres segmentos aunque el texto de uno ocupe dos lineas. El desnivel gordo
   venia de un parrafo vacio en el texto espanol, ya quitado. */
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-body {
  min-height: 3.5em;
}

/* El tercer texto viene envuelto en <p> y los otros dos son texto suelto: el
   margen del parrafo lo bajaba 16px respecto a sus vecinos. */
.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-body > p:first-child {
  margin-top: 0;
}

.paragraph--type--tip-parag-sld-trust .field--name-field-tipparg-sld-tru-body > p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   VENTANA DE CONSULTA (webform wf_consulta_ahora)
   Tarjeta "Ventana de Reserva Ahora" del tablero. Dos columnas: la izquierda
   con la fotografia y el texto encima, la derecha con los campos. En movil
   van una debajo de otra, que es lo que hace ya el flexbox de webform.
   ========================================================================== */

.consulta-panel {
  position: relative;
  height: 100%;
  padding: 30px 26px 44px;
  border-radius: 10px;
  background-image:
    linear-gradient(180deg, rgba(0, 43, 79, 0.82), rgba(0, 43, 79, 0.95)),
    url("/sites/default/files/2026-09/A6703214%20%281%29.jpg");
  background-position: center;
  background-size: cover;
  color: #fff;
}

/* La linea de montanas del pie del panel, como en la maqueta de la tarjeta. */
.consulta-panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 78px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolyline points='0,36 26,24 46,31 72,9 98,29 122,17 148,33 172,23 200,34' fill='none' stroke='%23d1a54b' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}

.consulta-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

/* La rayita corta delante del antetitulo, como en el diseno. */
.consulta-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: var(--color-yellow);
}

.consulta-panel-titulo {
  margin: 0 0 16px;
  padding-bottom: 14px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.1;
  color: #fff;
  position: relative;
}

.consulta-panel-titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  background-color: var(--color-brand);
}

.consulta-panel-texto {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: hsla(0, 0%, 100%, 0.88);
}

.consulta-campos {
  padding: 26px 24px;
}

.consulta-titulo {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--color-brand);
}

/* En la maqueta el titulo va entero en rojo. */
.consulta-titulo span {
  color: inherit;
}

.consulta-obligatorios {
  margin: 0 0 18px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.consulta-campos .form-item {
  margin-bottom: 12px;
}

.consulta-campos label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-blue);
}

.consulta-campos input[type="text"],
.consulta-campos input[type="email"],
.consulta-campos input[type="tel"],
.consulta-campos input[type="date"],
.consulta-campos input[type="number"],
.consulta-campos select,
.consulta-campos textarea {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--color-text);
  background-color: #fff;
}

.consulta-campos input:focus,
.consulta-campos select:focus,
.consulta-campos textarea:focus {
  outline: 2px solid hsla(210, 100%, 25%, 0.25);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

/* En la maqueta el boton y el enlace de WhatsApp comparten linea. Con rejilla
   sale solo: todo ocupa las dos columnas menos esos dos, que caen uno en cada
   una de la misma fila. */
.consulta-campos {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
}

.consulta-campos > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.consulta-campos .form-actions {
  grid-column: 1;
  margin: 6px 0 0;
}

/* El de WhatsApp no es el hijo de la rejilla: webform lo envuelve. El que
   manda es el envoltorio que va justo detras del boton. */
.consulta-campos > .form-actions + div {
  grid-column: 2;
  align-self: center;
  margin: 6px 0 0;
  padding-left: 16px;
}

.consulta-campos > .form-actions + div .consulta-whatsapp {
  margin: 0;
}

.consulta-campos .form-actions .webform-button--submit {
  padding: 11px 26px;
  border: none;
  border-radius: 6px;
  background-color: var(--color-brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.consulta-campos .form-actions .webform-button--submit:hover {
  background-color: #b21f27;
}

.consulta-whatsapp {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.consulta-whatsapp a {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: underline;
}

/* La misma ventana cuando se abre en dialogo desde los botones de reserva. */
.ui-dialog.consulta-modal .ui-dialog-titlebar {
  display: none;
}

.ui-dialog.consulta-modal .ui-dialog-content {
  padding: 0;
}

.ui-dialog.consulta-modal .webform-submission-form {
  margin: 0;
}

/* La ventana en si: webform la abre con el dialogo de jQuery UI, que trae su
   barra de titulo con el nombre interno del formulario y un marco blanco. Se
   quita el titulo (se deja la X) y el relleno, para que el panel de la foto
   llegue al borde. */
.ui-dialog:has(.consulta-campos) .ui-dialog-titlebar {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  /* El contenido del dialogo va con z-index 100: por debajo de eso la barra
     queda tapada y el aspa ni se ve ni se puede pulsar. */
  z-index: 101;
  padding: 0;
  border: none;
  background: none;
}

.ui-dialog:has(.consulta-campos) .ui-dialog-title {
  display: none;
}

/* La X de jQuery UI es un icono de 20px sin fondo: sobre el blanco del
   formulario no se veia. Se le pone caja propia y el aspa se dibuja aqui. */
.ui-dialog:has(.consulta-campos) .ui-dialog-titlebar-close {
  position: relative;
  width: 34px;
  height: 34px;
  margin: 10px 12px 0 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-blue);
  cursor: pointer;
  transition: color 0.2s ease;
  /* jQuery UI esconde el texto de sus botones de icono con text-indent
     -9999px y overflow hidden: sin esto el aspa se dibuja fuera de la caja.
     Al devolverlos a su sitio asoma la palabra "Close", que va suelta en el
     boton y no se puede seleccionar: se apaga con font-size 0 y el aspa lleva
     su propio tamano. */
  text-indent: 0;
  overflow: visible;
  font-size: 0;
}

.ui-dialog:has(.consulta-campos) .ui-dialog-titlebar-close:hover {
  color: var(--color-brand);
}

.ui-dialog:has(.consulta-campos) .ui-dialog-titlebar-close .ui-icon {
  display: none;
}

.ui-dialog:has(.consulta-campos) .ui-dialog-titlebar-close::before {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.ui-dialog:has(.consulta-campos) .ui-dialog-content {
  padding: 0;
}

.ui-dialog:has(.consulta-campos) .webform-flex--container {
  height: 100%;
}

/* Cuando aparece la barra vertical del dialogo, el ancho de las dos columnas
   ya estaba calculado y sobraban 16px: salia una barra horizontal. */
.ui-dialog:has(.consulta-campos) .ui-dialog-content {
  overflow-x: hidden;
}

.ui-dialog:has(.consulta-campos) .webform-submission-form,
.ui-dialog:has(.consulta-campos) .webform-flexbox {
  max-width: 100%;
}

/* El boton de enviar lo mueve webform a la barra de abajo del dialogo. */
.ui-dialog:has(.consulta-campos) .ui-dialog-buttonpane {
  margin: 0;
  padding: 12px 24px;
  border: none;
  background-color: #fff;
}

.ui-dialog:has(.consulta-campos) .ui-dialog-buttonpane .webform-button--submit,
.ui-dialog:has(.consulta-campos) .ui-dialog-buttonpane .ui-button {
  padding: 11px 26px;
  border: none;
  border-radius: 6px;
  background-color: var(--color-brand);
  color: #fff;
  font-weight: 700;
}