/*
 * GR11 Viajes — adaptations of the approved CSS to WordPress / GeneratePress (base kit).
 * The approved sheets (assets/css/approved/) stay literal so they can be diffed against source/;
 * everything that WordPress or GP needs goes here. Loaded after them.
 */

/* GP one-container: «.one-container .container{background-color}» reaches every .container of the design. */
.one-container .container:not(.site){background-color:transparent}

/* The design's .container also matches GP's div#page.site.container: only its padding is removed
   (GP already gives max-width:100% to full-width pages). */
.site.container{padding-left:0;padding-right:0}

/* WordPress gives the posts index (/blog/) the body class «blog», the same class as the design's post-grid section
   (section.blog in blog.css / blog-mobile.css). Without this, the body got the section's padding (64/32 px on top,
   section + curve at the bottom) and position:relative: the hero dropped below the transparent header. */
body.blog{position:static;padding:0}

/* GP's Customizer button colours print button:hover/:focus (0,1,1), stronger than the design's one-class
   buttons: keep the approved look on hover/focus. */
.menu-toggle:hover,.menu-toggle:focus{background:rgba(9,24,40,.25);color:var(--color-white)}
button.btn--primary:hover,button.btn--primary:focus{background:var(--color-brand);color:var(--color-white)}
.newsletter button[type="submit"]:hover,.newsletter button[type="submit"]:focus,
.newsletter input[type="submit"]:hover,.newsletter input[type="submit"]:focus{background:var(--color-terracotta);color:var(--color-white)}

/* GP gives links a hover colour from the Customizer; the design's link-like components keep theirs. */
a.btn:hover,a.btn:focus,a.text-link:hover,a.text-link:focus{text-decoration:none}
a.line-card:hover,a.line-card:focus{color:var(--color-white);text-decoration:none}

/* Elements hidden with the hidden attribute keep hidden even if a design rule gives them display:flex/grid. */
[hidden]{display:none!important}

/* ---------- Header (01-01): Site Header Element + gr11/component pieces ---------- */

.site-header__logo{display:block;text-decoration:none}
/* Without a logo image: the site title. */
.site-header__name{font-family:var(--font-display);font-style:italic;font-size:32px;line-height:1;text-transform:uppercase;color:var(--color-white)}

/* GP's link hover colour (a:hover, 0,1,1) would turn the menu blue: the approved links keep theirs. */
.main-nav a.main-nav__link:hover,.main-nav a.main-nav__link:focus{color:var(--color-white)}
.main-nav__link:focus-visible{outline:2px solid var(--color-white);outline-offset:4px}

/* «Viajes» has no destination of its own: it is a disclosure button with the approved .main-nav__link look
   (GP gives buttons the Customizer colours and padding). */
.main-nav button.main-nav__toggle,.main-nav button.main-nav__toggle:hover,.main-nav button.main-nav__toggle:focus{margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--color-white);line-height:inherit;cursor:pointer}
/* Current section (a trip, a trip category): same mark as the approved current page. */
.main-nav__link[aria-current="true"]{text-decoration:underline;text-decoration-color:var(--color-terracotta);text-decoration-thickness:3px;text-underline-offset:7px}
.main-nav__chevron{transition:transform .2s ease}
.main-nav__toggle[aria-expanded="true"] .main-nav__chevron{transform:rotate(180deg)}

/* The list of «Viajes» on desktop: not drawn in the approved design (approved tokens; for review).
   With navigation.js only .is-open opens it; without JS, hover and keyboard focus do. */
.main-nav__item--has-sub{position:relative}
.main-nav__submenu{position:absolute;top:100%;left:50%;z-index:30;display:none;min-width:270px;margin-top:var(--space-xs);padding:var(--space-xs);transform:translateX(-50%);border-radius:var(--radius-md);background:var(--color-white);box-shadow:var(--shadow-card)}
.main-nav__submenu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--space-xs)}
.main-nav:not(.has-js) .main-nav__item--has-sub:hover > .main-nav__submenu,
.main-nav:not(.has-js) .main-nav__item--has-sub:focus-within > .main-nav__submenu,
.main-nav__item--has-sub.is-open > .main-nav__submenu{display:block}
.main-nav a.main-nav__sublink{display:flex;align-items:center;min-height:44px;padding:0 var(--space-md);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:16px;font-weight:500;line-height:1.3;color:var(--color-ink);text-decoration:none;white-space:nowrap}
.main-nav a.main-nav__sublink:hover,.main-nav a.main-nav__sublink:focus{background:var(--color-cream);color:var(--color-brand-deep)}
.main-nav a.main-nav__sublink[aria-current="page"]{color:var(--color-terracotta)}
.main-nav a.main-nav__sublink:focus-visible{outline:2px solid var(--color-brand);outline-offset:-2px}

/* Hamburger: GP's Off-Canvas only listens to «.main-navigation .menu-toggle», so the button has a .main-navigation
   wrapper that creates no box; GP's .main-navigation .menu-toggle rules (0,2,0) are set back to the approved ones. */
.site-header__toggle.main-navigation{display:contents}
.site-header__toggle .menu-toggle{display:none}
@media (max-width:767px){
  .site-header__toggle .menu-toggle,.site-header__toggle .menu-toggle:hover,.site-header__toggle .menu-toggle:focus{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin:0;padding:0;border-radius:12px;border:1.5px solid rgba(255,255,255,.6);background:rgba(9,24,40,.25);color:var(--color-white);font-size:0;line-height:1}
}
.site-header__toggle .menu-toggle:focus-visible{outline:2px solid var(--color-white);outline-offset:3px}

/* ---------- Mobile menu panel: GP Premium Off-Canvas in overlay mode (not drawn in the approved design;
   approved tokens; for review). #generate-slideout-menu selectors beat offside.css and GP's menu colours. ---------- */
#generate-slideout-menu.do-overlay{background:var(--color-brand-deep);color:var(--color-white);text-align:left}
#generate-slideout-menu.do-overlay .inside-navigation{display:block;width:100%;max-width:none;margin:0;padding:var(--space-md) var(--gutter) var(--space-3xl);text-align:left}
/* Logo row (Hook Element «Menú del móvil: logo»), at the same place as the header logo. */
#generate-slideout-menu .offcanvas-brand{display:flex;align-items:center;min-height:44px;margin-right:60px}
#generate-slideout-menu .offcanvas-brand .site-header__logo img{width:auto;height:44px}
/* «Cerrar»: same box as the hamburger, at the same place. */
#generate-slideout-menu.do-overlay button.slideout-exit,#generate-slideout-menu.do-overlay button.slideout-exit:hover,#generate-slideout-menu.do-overlay button.slideout-exit:focus{position:absolute;top:var(--space-md);right:var(--gutter);display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border-radius:12px;border:1.5px solid rgba(255,255,255,.6);background:rgba(9,24,40,.25);color:var(--color-white);font-size:18px;line-height:1}
#generate-slideout-menu button.slideout-exit:focus-visible{outline:2px solid var(--color-white);outline-offset:3px}
/* GP's panel wraps its menu in div.main-nav, the class of the approved header nav that global-mobile.css hides. */
#generate-slideout-menu.do-overlay .inside-navigation .main-nav{display:block;min-width:0;margin:var(--space-2xl) 0 0}
#generate-slideout-menu .slideout-menu li{margin:0;text-align:left}
#generate-slideout-menu .slideout-menu > li{border-bottom:1px solid rgba(255,255,255,.14)}
#generate-slideout-menu .slideout-menu > li > a,#generate-slideout-menu .slideout-menu > li > a:hover,#generate-slideout-menu .slideout-menu > li > a:focus{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:100%;min-height:64px;padding:var(--space-xs) 0;background:none;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:38px;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--color-white);text-decoration:none}
#generate-slideout-menu .slideout-menu > li[class*="current-menu-"] > a{text-decoration:underline;text-decoration-color:var(--color-terracotta-soft);text-decoration-thickness:3px;text-underline-offset:7px}
#generate-slideout-menu .slideout-menu a:focus-visible{outline:2px solid var(--color-white);outline-offset:2px}
/* «Viajes» opens in place (accordion of GP: .sfHover / .toggled-on). */
#generate-slideout-menu .slideout-menu .dropdown-menu-toggle{float:none;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;font-size:20px;line-height:1}
#generate-slideout-menu.main-navigation .main-nav ul ul,#generate-slideout-menu .slideout-menu ul.sub-menu{margin:0 0 var(--space-sm);padding:0;background:none;box-shadow:none}
#generate-slideout-menu .slideout-menu .sub-menu a,#generate-slideout-menu .slideout-menu .sub-menu a:hover,#generate-slideout-menu .slideout-menu .sub-menu a:focus{display:flex;align-items:center;width:100%;min-height:44px;padding:0 0 0 var(--space-md);background:none;font-family:var(--font-body);font-style:normal;font-weight:500;font-size:18px;line-height:1.3;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.88);text-decoration:none}
#generate-slideout-menu .slideout-menu .sub-menu li[class*="current-menu-"] > a{color:var(--color-white);text-decoration:underline;text-decoration-color:var(--color-terracotta-soft);text-decoration-thickness:2px;text-underline-offset:5px}
/* The menu item with the CSS class «cta» (Contacto) is the pill of the design. */
#generate-slideout-menu .slideout-menu > li.cta{margin-top:var(--space-xl);border-bottom:0}
#generate-slideout-menu .slideout-menu > li.cta > a,#generate-slideout-menu .slideout-menu > li.cta > a:hover,#generate-slideout-menu .slideout-menu > li.cta > a:focus{display:inline-flex;justify-content:center;width:auto;min-height:56px;padding:0 var(--space-xl);border:2px solid rgba(255,255,255,.85);border-radius:var(--radius-pill);font-size:var(--fs-btn);letter-spacing:.05em}

/* ---------- Shared components (not drawn in the approved design: approved tokens only) ---------- */

/* YouTube background of the home and trip heroes (template-parts/components/hero-video.php + hero-video.js).
   Inside .hero__media / .trip-hero__media, over the photo and under the veil. It covers the box like
   object-fit:cover (16:9 frame, container query units) and fades in only while playing.
   The frame is at least 240 px taller than the box (120 px cut at the top and at the bottom): YouTube paints the
   video title and channel over the top of the player and its logo at the bottom, and they must stay out of view.
   Width and height are the same 16:9 proportion, so on mobile it takes the full height and is cut at the sides. */
.hero-video{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none}
.hero-video__frame{position:absolute;top:50%;left:50%;width:max(calc(177.78cqh + 426.67px),100cqw);height:max(calc(100cqh + 240px),56.25cqw);max-width:none;transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-video.is-playing .hero-video__frame{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
/* «Pausar vídeo» / «Reproducir vídeo» (WCAG 2.2.2): moved by the JS to the hero, above veil and content. */
.hero-video__toggle{position:absolute;right:var(--space-lg);bottom:calc(var(--curve-h, 90px) + var(--space-sm));z-index:5;display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-md);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-pill);background:rgba(9,24,40,.45);color:var(--color-white);font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1;cursor:pointer}
.hero-video__toggle:hover,.hero-video__toggle:focus{background:rgba(9,24,40,.7);color:var(--color-white)}
.hero-video__toggle:focus-visible{outline:2px solid var(--color-white);outline-offset:3px}
.hero-video__toggle-icon{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero-video__toggle.is-paused .hero-video__toggle-icon{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
@media (max-width:767px){.hero-video__toggle{right:var(--space-md);bottom:calc(var(--curve-h, 48px) + var(--space-xs))}}

/* Empty trip category archive and empty blog list / search without results. */
.trips__empty,.blog-empty__text{margin:0;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--color-text)}
.trips__empty a{color:var(--color-brand);font-weight:500}
.blog-empty{max-width:640px;margin:0 auto;padding:var(--space-xl) 0;text-align:center}
.blog-empty .search-form{display:flex;gap:var(--space-xs);justify-content:center;margin-top:var(--space-lg)}

/* Blog pagination: with many pages (search, future years) the approved single row would overflow on mobile; it wraps
   instead. No visual change while it fits (5 pages = approved). «…» keeps the circle of .page-numbers. */
.pagination .nav-links{flex-wrap:wrap;row-gap:var(--space-xs)}

/* Notice that only editors see (empty featured list, missing piece). */
.gr11-editor-notice{margin:0;padding:var(--space-sm) var(--space-md);border-left:4px solid var(--color-terracotta);background:var(--color-sand);color:var(--color-ink);font-family:var(--font-body);font-size:15px}

/* ---------- Calendar of the home (01-05): gr11/departures with the class calendar__list ---------- */
/* The home v3 rows have no partner variant, but the real upcoming departures include shared tours (Big Trail
   Challenge, Eleven Riders). The approved variants of source/04-calendario-de-viajes (calendar.css is not loaded on
   the home) are copied here scoped to the home list, with the same values; plus the approved robustness rules
   (hover arrow, focus) of that sheet. */
.calendar__list{--size-partner:44px}
.calendar__list .cal-row__info{min-width:0}
.calendar__list .cal-row__month,.calendar__list .cal-row__day,.calendar__list .cal-row__range>span{white-space:nowrap}
.calendar__list .cal-row__arrow svg{transition:transform .2s ease}
.calendar__list .cal-row:hover .cal-row__arrow svg,.calendar__list .cal-row:focus-visible .cal-row__arrow svg{transform:translateX(3px)}
.calendar__list .cal-row:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}
.calendar__list .cal-row--static{grid-template-columns:72px minmax(0,1fr)}
.calendar__list .cal-row--partner{grid-template-columns:72px minmax(0,1fr) var(--size-partner) 44px}
.calendar__list .cal-row--static.cal-row--partner{grid-template-columns:72px minmax(0,1fr) var(--size-partner)}
.calendar__list .cal-row__partner{display:flex;align-items:center;justify-content:center;width:var(--size-partner);height:var(--size-partner);overflow:hidden;flex:none;background:var(--color-white)}
.calendar__list .cal-row__partner img{width:100%;height:100%;object-fit:contain}
.calendar__list .cal-row__partner--riders img{object-fit:cover;object-position:47% 50%}
.calendar__list .cal-row__partner--btc img{border-radius:var(--radius-sm)}
/* GP's link hover colour (a:hover, 0,1,1) would tint the row text. */
.calendar__list a.cal-row:hover,.calendar__list a.cal-row:focus{color:var(--color-ink)}
@media (max-width:767px){
  .calendar__list{--size-partner:36px}
  .calendar__list .cal-row{position:relative}
  .calendar__list .cal-row__arrow::after{content:"";position:absolute;right:8px;top:50%;width:48px;height:48px;transform:translateY(-50%)}
  .calendar__list .cal-row--static{grid-template-columns:60px minmax(0,1fr)}
  .calendar__list .cal-row--partner{grid-template-columns:60px minmax(0,1fr) var(--size-partner) 40px;column-gap:var(--space-sm)}
  .calendar__list .cal-row--static.cal-row--partner{grid-template-columns:60px minmax(0,1fr) var(--size-partner);column-gap:var(--space-md)}
  .calendar__list .cal-row__partner--btc img{border-radius:8px}
}

/* ---------- About us of the home (01-06) ---------- */
/* The approved reset (img{display:block;max-width:100%}) has no height:auto, so in the approved render the
   height="842" attribute of the photo wins over aspect-ratio:5/2 (and 16/5 on mobile): the photo is 842 px tall,
   cropped with object-fit:cover. GP's reset sets img{height:auto}, which brought the ratio back (664 px section
   instead of 1114). QA compares with the approved render, so its height is restored here. */
.about__media .about__img{height:842px}

/* Images that WordPress wraps in <picture> keep the approved crop rules on the img. */
.trip-card__media picture,.post-card__media picture,.hero__media picture,.post-hero__media picture,.trip-hero__media picture{display:contents}

/* Trip card without price (e.g. «precio a consultar»): the approved footer is space-between with the price on the
   left, so a lone «Ver viaje» button would jump to the left. It stays on the right, where the design puts it.
   On mobile the approved footer is a column with the button at 100% width, so nothing changes there. */
@media (min-width:768px){.trip-card__footer > .btn:only-child{margin-left:auto}}

/* ---------- Trip hero (03-02): gr11/trip «Cabecera del viaje», inside GP's article of single-trip.php ---------- */
/* GP's link hover colour (a:hover, 0,1,1) would tint the booking card links and the «Ver galería» button. */
.trip-hero a.btn--terracotta:hover,.trip-hero a.btn--terracotta:focus,
.trip-hero a.btn--ghost-light:hover,.trip-hero a.btn--ghost-light:focus{color:var(--color-white)}
.trip-hero a.booking-card__mail:hover,.trip-hero a.booking-card__mail:focus{color:var(--color-brand-deep)}
/* trip.css repeats the home v3 .btn rule (border:2px solid transparent, min-height, padding) after global.css, so
   on the trip page it would reset the variants of global.css: their approved values are put back (same values).
   :where() keeps them at one class, as in the approved sheet, so the approved context rules still win. */
:where(.single-trip) .btn--primary{border-color:var(--color-brand)}
:where(.single-trip) .btn--ghost-light{border-color:rgba(255,255,255,.85)}
:where(.single-trip) .btn--outline{border-color:var(--color-brand-deep)}
:where(.single-trip) .btn--light{border-color:var(--color-white)}
:where(.single-trip) .btn--sm{min-height:46px;padding:0 var(--space-lg);font-size:19px}
:where(.single-trip) .btn--lg{min-height:60px;padding:0 40px;font-size:23px}
/* The hero is the first thing of the trip content: no top margin from GP's entry content. */
.single-trip .entry-content > .trip-hero:first-child{margin-top:0}
/* Pause button of the YouTube background: the booking card (desktop) and «Ver galería» (mobile) take the bottom
   corners, so on the trip it goes top right, under the header. */
.trip-hero .hero-video__toggle{top:calc(58px + var(--space-lg)*2 + var(--space-md));bottom:auto;right:var(--gutter)}
@media (max-width:767px){.trip-hero .hero-video__toggle{top:calc(44px + var(--space-md)*3);right:var(--gutter)}}

/* ---------- Trip information (03-05): section.trip-info of patterns/trip-template.php ---------- */
/* «Incluye» / «No incluye» titles are GB texts with an icon: GB wraps the icon in span.gb-shape (no class of its own),
   so the approved .inclusions__badge / --yes / --no values are drawn on it. --no is the column of the list-cross. */
.inclusions__title .gb-shape{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-brand-deep);color:var(--color-white)}
.inclusions__col:has(.list-cross) .inclusions__title .gb-shape{background:var(--color-terracotta-soft);color:var(--color-terracotta)}
@media (max-width:767px){.inclusions__title .gb-shape{width:36px;height:36px}}
/* GP's main.min.css sets dt{font-weight:700}; the approved reset leaves the browser's normal weight, so the
   «Inicio» / «Fin» labels of the price card are regular in the design. */
.departure dt{font-weight:400}
/* GP's link hover colour (a:hover, 0,1,1) would tint «Reservar plaza». */
.price-card a.btn--light:hover,.price-card a.btn--light:focus{color:var(--color-brand-deep)}
/* Changes round 4: «Grupo mínimo / máximo» and «Idioma del viaje» before the buttons, as auxiliary data: body font,
   smaller than the «Inicio» / «Fin» labels (16/15 px) and in their same soft white. Not in the approved design. */
.price-card__facts{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:4px;font-family:var(--font-body);font-size:14px;line-height:1.4;color:rgba(255,255,255,.88)}
.price-card__facts:first-child{margin-top:0}
.price-card__facts + .price-card__cta{margin-top:var(--space-lg)}
@media (max-width:767px){.price-card__facts{margin-top:var(--space-lg);font-size:13px}.price-card__facts + .price-card__cta{margin-top:var(--space-md)}}

/* ---------- Trip gallery (03-09): core Gallery with the class trip-gallery__grid ---------- */
/* The approved ul.trip-gallery__grid > li.trip-gallery__item is figure.wp-block-gallery > figure.wp-block-image here:
   the approved grid and item values (trip.css / trip-mobile.css) carried over to that markup, so every photo the client
   adds gets them too. Core's flex gallery sizes each figure with :not(#individual-image) (1,3,1): one more class wins. */
.trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0}
.trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){width:auto;max-width:none;margin:0;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--color-line)}
.trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
@media (min-width:768px) and (max-width:1100px){
  .trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,1fr);gap:10px}
  .trip-gallery .trip-gallery__grid.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){aspect-ratio:1/1;border-radius:14px}
}

/* ---------- Trip video (03-10): facade; the iframe replaces the poster when the play button is pressed ---------- */
.video-facade__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
/* GP's button:hover/:focus colours (0,1,1) would repaint the approved play button. */
.video-facade__play:hover,.video-facade__play:focus{background:var(--color-terracotta);border-color:rgba(255,255,255,.9)}
.video-facade__play:focus-visible{outline:3px solid var(--color-white);outline-offset:4px}

/* ---------- Trip contact (03-11): section.trip-contact#reservar + gr11/trip «Acciones de contacto» ---------- */
/* GP's link hover colour (a:hover, 0,1,1) would tint «Reservar plaza» and the contact links on the blue veil. */
.trip-contact a.btn--terracotta:hover,.trip-contact a.btn--terracotta:focus,
.trip-contact a.contact-link:hover,.trip-contact a.contact-link:focus{color:var(--color-white)}
/* The approved sheet has no focus style for the pill links: visible focus with the approved tokens. */
.trip-contact a.contact-link:focus-visible{outline:3px solid var(--color-white);outline-offset:3px}

/* ---------- Trip booking bar (03-13): Hook Element on generate_after_footer, a direct child of body ---------- */
/* GP's link hover colour (a:hover, 0,1,1) would tint the button text; the approved bar has no hover/focus style. */
.booking-bar a.btn--terracotta:hover,.booking-bar a.btn--terracotta:focus{color:var(--color-white)}
.booking-bar a.btn--terracotta:focus-visible{outline:3px solid var(--color-brand-deep);outline-offset:2px}
@media (max-width:767px){
  /* Keeps the bar above the home indicator of phones; the approved padding is the minimum. */
  .booking-bar{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  /* While the cookie notice (GDPR Cookie Compliance, fixed at the bottom) is open it would cover the bar entirely:
     booking-bar.js writes the notice's height here, so the bar sits just above it. 0px once the notice is answered. */
  .booking-bar{bottom:var(--gr11-bottom-notice-offset,0px)}
  /* Joinchat (if installed) would cover the bar: its bubble moves up the height of the bar (~72px). */
  .single-trip .joinchat{--bottom:82px}
}

/* ---------- Reading body of posts and pages (07-03): GP's #primary and sidebar inside the approved .post-layout ---------- */
/* single.php / page.php print div.post-body > div.container.post-layout inside GP's .site-content (body.has-post-body). */
.has-post-body .site-content{display:block;padding:0}
.has-post-body .post-layout > .content-area,
.has-post-body .post-layout > .is-right-sidebar,
.has-post-body .post-layout > .is-left-sidebar{width:auto;min-width:0}
.has-post-body.one-container .site-main{margin:0}
.has-post-body .site-main > *{margin-bottom:0}
.has-post-body .inside-article{padding:0}
.has-post-body .entry-content:not(:first-child){margin-top:0}
/* Pages (no sidebar): one reading column of the approved width, centred. */
.post-layout--single{grid-template-columns:minmax(0,var(--content-w));justify-content:center}
/* Groups with a background colour in the content (migrate-builder-content: old Elementor sections with a photo or
   video behind, e.g. the white Genomada logo): headings take the group's text colour, no outer margins inside. */
.entry-content .wp-block-group.has-background{border-radius:var(--radius-md,20px);margin:0 0 32px}
.entry-content .wp-block-group.has-background.has-text-color .wp-block-heading{color:inherit}
.entry-content .wp-block-group.has-background > :first-child{margin-top:0}
.entry-content .wp-block-group.has-background > :last-child{margin-bottom:0}
/* Sticky sidebar (notes 07: top 96px on desktop): the approved align-items:start leaves the column as tall as the
   banners, so nothing could stick. Only the sidebar column is stretched; its look does not change. */
@media (min-width:1101px) and (min-height:821px){
  .has-post-body .post-layout > .is-right-sidebar{align-self:stretch}
  .has-post-body .inside-right-sidebar,.has-post-body .post-sidebar{height:100%}
}
/* Banners: GP's a:hover colour would tint the texts; the approved hover only changes the border. */
.promo:hover,.promo:focus{color:var(--color-ink)}
.promo .gb-shape{display:inline-flex;flex:none}

/* ==========================================================================
   Changes round 1 (owner's requests, 2026-11-01)
   ========================================================================== */

/* 1-2. Blog index, blog categories, tags, search and 404: the compact hero has the same height as the blog post
   hero (480 px desktop, 360 px mobile, the values of approved/blog-post.css). Photo and curve unchanged. */
body:is(.blog,.category,.tag,.search,.error404,.archive:not(.tax-trip_category)){--hero-compact-h:480px}

/* GB shape blocks wrap each curve in span.gb-shape: the approved markup has the svg straight in the section. */
.gb-shape:has(> svg.curve){display:contents}

/* 17. Buttons inside the text of posts and pages: GP's link colour (.entry-content a and its :hover) painted the
   label in the same blue as the button. The label is white in every state; the background is not touched. */
.entry-content .wp-block-button .wp-block-button__link:not(.has-text-color):is(:link,:visited,:hover,:focus,:active){color:var(--color-white)}

/* 24-27. One booking button per upcoming edition (gr11_trip_booking_buttons) and «Web del viaje»: stacked with
   the approved small gap (the contact actions are already a grid with its own approved gap). */
.single-trip :not(.trip-contact__actions) > a.btn--block + a.btn--block{margin-top:var(--space-sm)}
/* 26. «Web del viaje»: secondary (outlined) button in the white booking card, with the approved brand tokens. */
.single-trip a.btn.trip-external-btn,.single-trip a.btn.trip-external-btn:visited{background:transparent;color:var(--color-brand-deep);border:2px solid var(--color-brand-deep)}
.single-trip a.btn.trip-external-btn:hover,.single-trip a.btn.trip-external-btn:focus-visible{background:var(--color-brand-deep);color:var(--color-white)}

/* changes-2. Two or more upcoming editions: «Fechas» of the booking card lists one dd per edition (same approved
   type), stacked with a small gap. With one edition the card is the approved one. */
.booking-facts dd + dd{margin-top:var(--space-2xs)}
/* changes-3. The owner removed «Duración» from the white booking card of the hero: «Fechas» is the only column, so it
   takes the whole width of the card (the approved grid was 1fr 1fr) with the same type, gap and dashed rule. */
.trip-hero__card .booking-facts{grid-template-columns:1fr}

/* 22. «Mapa de la ruta»: the owner asked for the map at 50% of the row (approved 5fr 7fr) and the map is a file the
   client uploads in any proportion, so it is shown whole (no 4/5 crop that would cut towns off the route). */
@media (min-width:1101px){.itinerary__layout.has-map{grid-template-columns:1fr 1fr}}
.route-map__frame{aspect-ratio:auto}
.route-map__frame img{height:auto;object-fit:contain}

/* changes-7. Blue buttons: GP's Customizer link hover colour (a:hover, a:focus, a:active → var(--color-brand), 0,1,1)
   beat the approved one-class .btn--primary (0,1,0) and the label turned blue on the blue background. The background
   and the normal state stay as approved (gallery.css / blog-post.css hover to brand-deep); the label stays white on a
   plain click focus and turns to the approved pearl/cream token on hover and on keyboard focus (:focus-visible).
   Covers trip cards (home, trip categories), gallery cards, home hero and about, «Web del viaje» and the buttons
   inside posts and pages. */
a.btn--primary:is(:focus,:active),button.btn--primary:is(:focus,:active){color:var(--color-white)}
a.btn--primary:is(:hover,:focus-visible),button.btn--primary:is(:hover,:focus-visible),
.single-trip a.btn.trip-external-btn:is(:hover,:focus-visible),
.entry-content .wp-block-button .wp-block-button__link:not(.has-text-color):is(:hover,:focus-visible){color:var(--color-cream)}
/* The approved .entry-content a (0,1,1) underlines in brand blue and beats the approved .wp-block-button__link
   {text-decoration:none} (0,1,0): invisible on the brand background, it showed up as a blue line on the hover
   background. Buttons keep the approved «no underline». */
.entry-content a.wp-block-button__link{text-decoration:none}

/* 12. Genomada logo in the footer, now a link to genomada.com. */
.site-footer__brand2-link{display:contents}

/* changes-5. GP's main.min.css gives every direct child of .site-main «margin-bottom:20px» (.site-main>*, and
   .site-main .gallery 1.5em). The sections of the pages built by sections (home, calendar, gallery) and of the PHP
   templates are direct children of main.site-main, so a 20 px strip of the cream page background showed between
   them: visible above and below «Otras formas de viajar» (terracotta), hidden elsewhere where the colours match but
   still adding height. In the approved HTML the sections abut and the curves (top/bottom:-1px) close the joins.
   Targeted by data-section (stored in each block's own attributes), so it survives saving the page in the editor. */
.site-main > [data-section]{margin-bottom:0}
/* changes-6. Same join, made independent of the data-section attribute: in the «Página por secciones» template (home,
   calendar, gallery) nothing placed straight in main.site-main keeps GP's 20 px, so a section whose attributes lose
   data-section, or a block the owner adds between two sections, can't open a cream strip under a curve again. An empty
   paragraph left by the inserter between two sections is not printed. */
.page-template-sections .site-main > *{margin-bottom:0}
.page-template-sections .site-main > p:empty{display:none}

/* changes-8. Compact heroes of the PHP templates (gr11_render_hero: blog index, blog categories, tags, search, 404,
   posts and pages). The approved archive hero (blog.css) was 360 px with the text pinned to the bottom (flex-end) and
   only curve-h − 8 px under it, so the title sat on the curve; round 1 raised the hero to 480 px and the 120 extra px
   all went above the title, leaving it even lower in the photo. The posts/pages hero (blog-post.css) has the same
   flex-end with a 1-line title. Now the text block is centred vertically between the approved top padding (under the
   header) and the curve, with the post hero's approved bottom space (curve-h + 16 px; mobile + 24 px) in both, so
   the eyebrow moves with the title. Height, photo, veil and curve unchanged; a title of several lines fills the box
   as before (the hero grows only if the text needs it, as it already did). */
body:is(.blog,.category,.tag,.search,.error404,.archive:not(.tax-trip_category)) .hero.hero--compact,
.post-hero.hero--compact{align-items:center}
body:is(.blog,.category,.tag,.search,.error404,.archive:not(.tax-trip_category)) .hero--compact .hero__content{padding-bottom:calc(var(--curve-h) + var(--space-md))}

@media (max-width:767px){
  body:is(.blog,.category,.tag,.search,.error404,.archive:not(.tax-trip_category)) .hero--compact .hero__content{padding-bottom:calc(var(--curve-h) + var(--space-lg))}

  body:is(.blog,.category,.tag,.search,.error404,.archive:not(.tax-trip_category)){--hero-compact-h:360px}

  /* 7. YouTube background on mobile: covered by the general .hero-video__frame rule (full height, cut at the
     sides, centred). 11/20. «Quiénes somos»: the seal is removed; the photo keeps the 842 px height of the approved
     mobile render (rule of the About us block above). */

  /* 13. Trip hero: the approved 300 px top padding left the text halfway down the screen; it starts under the
     header now. */
  .trip-hero__content{padding-top:132px}

  /* 14-16. Compact heroes (calendar, gallery, blog, categories, posts and pages): overflow:hidden clipped the 1 px
     overlap of the bottom curve (bottom:-1px), and on high-density screens a hairline of the hero background showed
     under it. The photo is already clipped by its own media box, so the hero lets the curve overlap the next section. */
  :is(.page-hero,.hero--compact):has(> .page-hero__media, > .hero__media){overflow:visible}
  :is(.page-hero,.hero--compact) > .curve--bottom,
  :is(.page-hero,.hero--compact) > .gb-shape > .curve--bottom{bottom:-2px}
}

/* changes-9. Footer legal menu on mobile (owner's request): the approved global-mobile.css keeps
   .site-footer__legal as a wrapping row (flex-wrap:wrap; gap space-xs space-lg). Here the links stack in a column,
   aligned left under the copyright. No extra gap: each link keeps the approved 44 px touch target (min-height), so
   the rows follow the same 44 px rhythm as the footer column menus above. Desktop unchanged (approved row, gap
   space-lg). */
@media (max-width:767px){
  .site-footer__legal{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
}

/* changes-10. Home hero title at 80 px on desktop (owner's request; approved home.css uses var(--fs-h1) = 100px
   above 1100 px and 80px on tablet). Only the front page: body.home + the hero section of the home-hero pattern.
   Other heroes (trip, trip category, blog, gallery, calendar, posts, pages) keep their approved size. Mobile
   (≤767 px, --fs-h1:48px) unchanged. The selector uses classes that GenerateBlocks keeps when Inicio is saved. */
@media (min-width:768px){
  body.home .hero[data-section="Hero"] .gb-text.hero__title,
  body.home .hero:not(.hero--compact) .gb-text.hero__title{font-size:80px}
}