/**
 * Peru Grand Travel — desktop.
 * TODO va dentro del @media: la base es styles-mobile.css.
 */

@media (min-width: 1024px) {
  :root { --pad-x: 40px; }

  h1 { font-size: 56px; }
  h2 { font-size: 36px; }
  h3 { font-size: 20px; }

  /* -------------------------------------------------------------- HEADER */
  /* Dos filas: banda azul (contacto | idiomas) y fila blanca
     (logo | menú | CTA). El grid va en .field__items, que es donde viven
     realmente los sub-bloques; .head-inner solo envuelve el campo. */
  /* El aire de abajo lo ponen ahora las propias piezas de la fila (mas abajo),
     no la cabecera: dejarlo en los dos sitios sumaba 24 px debajo del logo
     contra 12 encima y volvia a descentrar la franja. */
  #block-perugrandtravel-head .head-inner {
    position: relative;
    padding: 0 var(--pad-x);
  }
  /* La banda se estira con `inset-inline: 0`, NO con `width: 100vw`: `100vw`
     incluye la barra de scroll y sacaba 8px de barra horizontal en toda la
     web (scrollWidth 1529 > clientWidth 1521). .head-inner ya mide el ancho
     completo de la ventana, asi que 0/0 pinta lo mismo sin desbordar. */
  #block-perugrandtravel-head .head-inner::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 44px;
    background: var(--c-primary);
  }
  .head-inner > .field {
    position: relative;
    z-index: 1;
    display: grid;
    /* El logo con suelo propio: `auto` deja que el menu —que con `nowrap`
       pide mucho— le robe la pista y lo encoja hasta ser ilegible. */
    grid-template-columns: minmax(210px, auto) 1fr auto;
    align-items: center;
    column-gap: var(--sp-6);
    max-width: var(--wrap);
    margin-inline: auto;
  }
  /* Reseteo de lo que la hoja movil deja puesto: alli la cabecera es una
     rejilla de 3 columnas con el logo encogible, y aqui el logo manda su
     propio ancho. `styles-mobile.css` no lleva media query, asi que todo lo
     suyo llega hasta aqui y hay que deshacerlo explicitamente. */
  .head-inner > .field > .field__item:nth-child(2) {
    min-width: auto;
    justify-self: auto;
    padding-left: 0;
  }
  .head-inner > .field > .field__item:nth-child(3),
  .head-inner > .field > .field__item:nth-child(5) {
    justify-self: auto;
    padding-right: 0;
  }
  /* La fila del menu iba pegada a la banda azul: 0 arriba contra los 12 px de
     relleno inferior de .head-inner, asi que las tres piezas colgaban del
     borde en vez de quedar centradas en su franja. Medido: logo 92→154 con la
     banda acabando en 92 y la cabecera en 166. Mismo aire por los dos lados. */
  .head-inner > .field > .field__item:nth-child(2),
  .head-inner > .field > .field__item:nth-child(3),
  .head-inner > .field > .field__item:nth-child(5) { padding-block: var(--sp-3); }
  #block-sitebranding img { max-height: 62px; }
  /* tb_megamenu trae su propio gris (#f5f5f5) en `.tbm`, que dibujaba una
     banda por detras del menu y solo por detras del menu: blanco a los lados y
     gris en medio. La cabecera la pinta el tema, no el modulo. */
  #block-mainnavigation .tbm { background: transparent; }

  /* Banda azul. */
  .head-inner > .field > .field__item:nth-child(1),
  .head-inner > .field > .field__item:nth-child(4) {
    grid-row: 1;
    height: 44px;
    display: flex;
    align-items: center;
    width: auto;
    margin-left: 0;
    background: none;
  }
  .head-inner > .field > .field__item:nth-child(1) { grid-column: 1 / 3; }
  .head-inner > .field > .field__item:nth-child(4) { grid-column: 3; justify-content: flex-end; }
  /* Fila blanca. */
  .head-inner > .field > .field__item:nth-child(2) { grid-row: 2; grid-column: 1; }
  .head-inner > .field > .field__item:nth-child(3) { grid-row: 2; grid-column: 2; }
  .head-inner > .field > .field__item:nth-child(5) { grid-row: 2; grid-column: 3; justify-self: end; }

  #block-headercontactbar { padding: 0; }
  #block-headercontactbar .head-contact,
  #block-headercontactbar .field--name-field-bt-head-contact-parr {
    justify-content: flex-start;
    gap: var(--sp-6);
    margin: 0;
  }
  #block-languageswitcher { padding: 0; }
  .lang-list { padding: 0; }
  #block-sitebranding { padding: var(--sp-3) 0 0; text-align: left; }
  #block-sitebranding img { margin-inline: 0; max-height: 62px; }
  #block-headerbooknow { padding: var(--sp-3) 0 0; text-align: right; }

  /* ------------------------------------------------------- MENU (TB Mega Menu)
     Las clases son del modulo (`tbm-*`); aqui se le quita su piel de fabrica y
     se pone la de la marca. El modulo resuelve hover, teclado y modo movil por
     debajo de su breakpoint, asi que NO se toca nada de eso. */
  /* ⚠️ La cabecera es `grid-template-columns: auto 1fr auto` (logo · menu ·
     CTA). La pista `1fr` nace con `min-width: auto`, o sea que NO se encoge por
     debajo de lo que pida su contenido: al poner `nowrap` en los items el menu
     paso a pedir 1112px y dejo la columna del logo en 7px. `min-width: 0` le
     devuelve el reparto a la rejilla. */
  #block-mainnavigation { min-width: 0; }
  #block-mainnavigation .tbm-nav { justify-content: center; flex-wrap: nowrap; }

  /* Lo que trae el modulo y sobra: una linea vertical entre items y un fondo
     gris al pasar por encima. El diseno no lleva ni separadores ni cajas. */
  #block-mainnavigation .tbm-item.level-1 { border-right: 0; }
  #block-mainnavigation .tbm-link.level-1:hover,
  #block-mainnavigation .tbm-link.level-1:focus { background-color: transparent; }
  #block-mainnavigation .tbm-submenu-toggle,
  #block-mainnavigation .tbm-submenu-toggle:hover,
  #block-mainnavigation .tbm-submenu-toggle:focus { background-color: transparent; color: inherit; }

  /* La barra. `nowrap` es lo que impide que "Peru Packages" caiga a dos lineas
     y deje los items con alturas distintas. */
  #block-mainnavigation .tbm-link.level-1 {
    padding: var(--sp-4) var(--sp-2);
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
  }
  #block-mainnavigation .tbm-item.level-1:hover > .tbm-link-container > .tbm-link,
  #block-mainnavigation .tbm-item.level-1.open > .tbm-link-container > .tbm-link,
  #block-mainnavigation .tbm-item.level-1.open > .tbm-link-container > .tbm-submenu-toggle {
    color: var(--c-primary);
  }

  /* El panel, alineado con el contenido de la cabecera y no colgando del item.
     Para eso el <li> deja de ser el ancestro posicionado y pasa a serlo el
     contenedor de la cabecera, que ya es `relative`. */
  /* `relative` EXPLICITO. Drupal clava el lapiz contextual en la esquina del
     elemento con `contextual-region` —este bloque— y para eso necesita que
     este posicionado. Hubo un intento de dejarlo `static` para que el panel de
     About se estirase de lado a lado de la pagina: el panel salia bien, pero el
     lapiz subia hasta la rejilla de la cabecera y aterrizaba a 164 px del
     bloque, dentro de la banda azul. Manda el lapiz: el panel ancla al menu.
     Medido con esto puesto: desvio del lapiz -6 px, igual que el de la barra de
     contacto y el de Book Now. */
  #block-mainnavigation { position: relative; }
  #block-mainnavigation .tbm { position: static; }
  /* Solo se estira a lo ancho el panel que de verdad tiene varias columnas —hoy
     "About Us", con sus cuatro—. Los demas menus son una sola columna `span12`
     con cuatro enlaces en vertical: al heredar el ancho completo pintaban un
     panel de 1280 px con los enlaces apretados a la izquierda y el 80 % en
     blanco. `.tbm-column + .tbm-column` es la senal de que hay mas de una. */
  #block-mainnavigation .tbm-item.level-1:has(.tbm-column + .tbm-column) { position: static; }
  #block-mainnavigation .tbm-item.level-1:has(.tbm-column + .tbm-column) > .tbm-submenu {
    left: 0;
    right: 0;
    width: auto;
    /* Con el panel anclado al menu ya no hay margen de pagina que haga de
       relleno: se lo pone el propio panel, o la ultima columna se come el
       borde. */
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    border: 0;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    box-shadow: 0 18px 34px rgba(26, 31, 54, .10);
  }

  /* El desplegable corriente: cuelga de su propia opcion y mide lo que pide su
     contenido. */
  #block-mainnavigation .tbm-item.level-1:not(:has(.tbm-column + .tbm-column)) { position: relative; }
  #block-mainnavigation .tbm-item.level-1:not(:has(.tbm-column + .tbm-column)) > .tbm-submenu {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 220px;
    padding: var(--sp-3) 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 34px rgba(26, 31, 54, .10);
  }
  #block-mainnavigation .tbm-subnav .tbm-link.level-2 {
    display: block;
    padding: var(--sp-2) var(--sp-5);
    color: var(--c-body);
    font-size: 14px;
    white-space: nowrap;
  }
  #block-mainnavigation .tbm-subnav .tbm-link.level-2:hover {
    background: var(--c-bg-alt);
    color: var(--c-primary);
  }

  /* ⚠️ El color va en el CONTENEDOR, no en el propio titulo. El modulo pinta
     `.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link.no-link` con
     `color: inherit !important`, y un `!important` gana incluso a un estilo
     inline —comprobado—, asi que la unica via limpia es darle el color a quien
     hereda. Los titulos de columna son `no-link` por ser <span> sin destino. */
  #block-mainnavigation .tbm-item.tbm-group > .tbm-link-container { color: var(--c-ink); }
  /* Con el panel a lo ancho del menu, "AWARDS & RECOGNITION" no cabe en una
     linea de columna y se salia del panel: se le deja partir.
     El selector repite la cadena entera del modulo —que pone `nowrap` en
     `.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link`— porque con
     `#block-mainnavigation .tbm-group-title` a secas gana la suya. */
  #block-mainnavigation .tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link.tbm-group-title {
    white-space: normal;
  }
  #block-mainnavigation .tbm-group-title {
    position: relative;
    padding: 0 0 var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
  }
  #block-mainnavigation .tbm-group-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px; height: 2px;
    background: var(--c-accent);
  }

  /* Los enlaces de cada columna. */
  #block-mainnavigation .tbm-subnav.level-2 .tbm-link.level-3 {
    padding: var(--sp-2) 0;
    color: var(--c-body);
    font-size: 14px;
  }
  #block-mainnavigation .tbm-subnav.level-2 .tbm-link.level-3:hover { color: var(--c-primary); }

  /* El "View All" de cada columna: ultimo enlace, en naranja y con su flecha. */
  #block-mainnavigation .tbm-item.level-3:last-child .tbm-link.level-3 {
    margin-top: var(--sp-3);
    color: var(--c-accent);
    font-size: 13px;
    font-weight: 600;
  }

  /* ---------------------------------------------------------------- HERO */
  /* El `100svh` es SOLO para movil: aqui el alto lo sigue dando el contenido
     con su padding, como estaba. (styles-mobile.css no lleva media query, asi
     que lo suyo llega hasta aqui y hay que deshacerlo.) */
  #block-perugrandtravel-home-hero { min-height: 0; display: block; }

  /* El velo solo tiene que hacer legible el texto, que vive en la mitad
     izquierda: se va apagando y a partir del 70% la foto queda limpia. Antes
     terminaba en .45 y oscurecia la imagen entera. */
  #block-perugrandtravel-home-hero::after {
    background: linear-gradient(
      90deg,
      rgba(10, 16, 40, .82) 0%,
      rgba(10, 16, 40, .68) 28%,
      rgba(10, 16, 40, .28) 52%,
      rgba(10, 16, 40, 0) 70%
    );
  }
  .hero-inner { padding: 150px var(--pad-x) 130px; }
  .hero-inner h1 { font-size: 56px; }
  .hero-inner p { font-size: 17px; }

  /* --------------------------------------------------------------- STATS */
  #block-perugrandtravel-home-stat { padding-top: 0; }
  .stat-grid { margin-top: -70px; padding: var(--sp-6) var(--sp-7); }
  .stat-grid .field__items { grid-template-columns: repeat(4, 1fr); }
  .stat-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    text-align: left;
  }
  .field__item + .field__item .stat-item { border-left: 1px solid var(--c-line); padding-left: var(--sp-6); }
  .stat-item img { margin: 0; width: 38px; height: 38px; }
  .field--name-field-pt-home-stat-num-txt { font-size: 30px; }

  /* -------------------------------------------------------- PRESENTACIÓN */

  /* ----------------------------------------------------------- BANDAS CTA */
  .cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    padding: var(--sp-8) var(--pad-x);
    text-align: left;
  }
  .cta-inner h2 { font-size: 30px; max-width: 22ch; margin-bottom: var(--sp-2); }
  .cta-inner p { margin: 0; }
  .cta-inner > [class*="-lnk"] { flex: 0 0 auto; }

  /* --------------------------------------------------------------- GRIDS */
  .view-vb-prod-home .view-content { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .view-vb-ct-blog-home .view-content { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .promise-grid .field__items { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

  .card-body .views-field-title a { font-size: 18px; }
  .card-price { font-size: 18px; }
  .view-vb-prod-home .view-content { gap: var(--sp-5); }



  /* -------------------------------------------------------------- FOOTER */
  .region-footer::before { height: 210px; }
  .foot-cols > .field {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-7) var(--sp-6);
  }
  /* Fila 1: el logo, solo, alineado a la izquierda. */
  .foot-cols > .field > .field__item:nth-child(1) { grid-row: 1; grid-column: 1 / -1; }
  /* Fila 2: contacto y las tres columnas de enlaces. */
  .foot-cols > .field > .field__item:nth-child(3) { grid-row: 2; grid-column: 1; }
  .foot-cols > .field > .field__item:nth-child(4) { grid-row: 2; grid-column: 2; }
  .foot-cols > .field > .field__item:nth-child(5) { grid-row: 2; grid-column: 3; }
  .foot-cols > .field > .field__item:nth-child(6) { grid-row: 2; grid-column: 4; }
  /* Fila 3: redes · copyright · pagos, separada por una línea. */
  .foot-cols > .field > .field__item:nth-child(2),
  .foot-cols > .field > .field__item:nth-child(8),
  .foot-cols > .field > .field__item:nth-child(7) {
    grid-row: 3;
    align-self: center;
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .foot-cols > .field > .field__item:nth-child(2) { grid-column: 1; }
  .foot-cols > .field > .field__item:nth-child(8) { grid-column: 2 / 4; }
  .foot-cols > .field > .field__item:nth-child(7) { grid-column: 4; }
  .foot-pay .field__items { justify-content: flex-end; }

  /* Secciones más aireadas. */
  #block-perugrandtravel-home-present,
  #block-perugrandtravel-home-award,
  #block-perugrandtravel-home-tour,
  #block-perugrandtravel-home-promise,
  #block-perugrandtravel-home-exp,
  #block-perugrandtravel-home-blog,
  #block-perugrandtravel-home-faq,
  #block-perugrandtravel-home-partner { padding-block: var(--sp-9); }

  /* En el diseno los sellos de las entidades ocupan casi todo el ancho util;
     en movil van mas chicos para que entren tres por fila. */
  .partner-grid .field__items { gap: var(--sp-5) var(--sp-8); }
  .partner-item img { width: 132px; height: 68px; }

  /* Los sellos crecen y se separan; en movil van a 96px para que quepan dos
     por fila. */
  /* El hueco se mide entre cajas, pero cada sello trae aire dentro de su
     lienzo cuadrado: con 32px de gap el blanco que se ve entre logos ronda los
     70px del diseno. */
  .award-list { gap: var(--sp-5) var(--sp-6); margin-top: var(--sp-7); }
  .award-list img { height: 150px; max-width: 200px; }
  /* El hueco sobre el "ver todos" tiene que ser el mismo que el relleno
     inferior del bloque, o el boton queda descentrado entre la parrilla y la
     seccion siguiente. En movil son los --sp-8 del CSS base; aqui, --sp-9. */
  [class*="field--name-field-bt-home-tour"][class*="-lnk"],
  [class*="field--name-field-bt-home-exp"][class*="-lnk"],
  [class*="field--name-field-bt-home-blog"][class*="-lnk"] { margin-top: var(--sp-9); }

  /* ---------------------------------------------------- FICHA DE TOUR (PDP) */
  .path-product .page-title { font-size: 40px; }

  /* La tira de miniaturas vuelve a su columna a la derecha de la imagen. */
  .pdp-media .gallery-engine-wrapper.gallery-engine-wrapper { --ge-side-width: var(--pdp-thumb-w); }
  .pdp-media .gallery-engine-wrapper.gallery-engine--thumbs-after { grid-template-columns: minmax(0, 1fr) auto; }
  .pdp-media .gallery-engine-wrapper.gallery-engine--thumbs-after .gallery-engine-thumbs {
    grid-row: 1 / 5;
    grid-column: 2;
    width: var(--ge-side-width);
    flex-direction: column;
    /* El modulo separa la tira de las flechas que van a sus extremos; aqui
       las flechas no estan ahi, y ese margen dejaba el bloque 6 px mas alto
       que la imagen, asi que las pildoras no apoyaban donde debian. */
    margin-block: 0;
  }
  /* Las píldoras van sobre la imagen grande, no sobre la tira. */
  .pdp-actions { right: calc(var(--pdp-thumb-w) + var(--pdp-gal-gap) + var(--pdp-gal-inset)); }

  .pdp-facts .views-field-field-prod-detail-parr-1 > .field-content {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  /* Las DOS columnas ya no son del cuerpo de la entidad: son la PAGINA.
     `#contenido` y su region se aplanan para que el bloque de la entidad, los
     relacionados y los sellos suban a la rejilla de `#contenedor` junto a la
     barra lateral. Asi la tarjeta va al lado del cuerpo y los relacionados
     siguen cruzando el ancho entero, que es lo que pide el diseno. */
  .path-product #contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 0 var(--sp-8);
    align-items: start;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }
  .path-product #contenido,
  .path-product .region-content { display: contents; }
  /* El cuerpo ya no fija su ancho: lo fija la rejilla de la pagina. */
  .path-product .pdp-body { max-width: none; padding-inline: 0; }
  /* ⚠️⚠️ LAS FILAS 1–10 ESTÁN RESERVADAS PARA LOS BLOQUES DEL SISTEMA.
     Mensajes, migas, pestañas primarias, pestañas secundarias, acciones de
     administración y título de página van SUELTOS, sin fila declarada, y el
     navegador los auto-coloca en orden de DOM: las seis primeras filas.
     Nuestros bloques empiezan en la 11.

     Sin esa reserva, las filas explícitas 1..5 eran nuestras y los del sistema
     —que se auto-colocan DESPUÉS de todo lo declarado— caían al FINAL de la
     página. Medido con sesión iniciada en /tailor-made: las migas en y=3916 y
     las pestañas de edición en y=3970, lo último de todo.

     No se ven al maquetar porque para un visitante anónimo no se renderizan.
     Las filas vacías no cuestan nada: esta rejilla no tiene `row-gap`.

     Y la contrapartida: en estas rejillas TODOS nuestros bloques declaran su
     fila. Uno sin declarar se cuela en la banda reservada y sale por encima
     del contenido — le pasó a `prod-related` y a `prod-award` en cuanto el
     cuerpo pasó de la fila 1 a la 11. */
  .path-product #block-perugrandtravel-content { grid-column: 1; grid-row: 11; min-width: 0; }
  /* ⚠️ El `sticky` NO va en el item de la rejilla. Un elemento pegajoso se
     mueve dentro de su BLOQUE CONTENEDOR, que aqui es la rejilla entera —no su
     fila—, asi que al bajar se deslizaba por encima de los tours relacionados.
     Puesto en la region de dentro, su contenedor es `#sidebar_right`, que si
     esta acotado a la primera fila, y la tarjeta se para donde debe. */
  .path-product #sidebar_right { grid-column: 2; grid-row: 11; align-self: stretch; }
  .path-product .region-sidebar-right { position: sticky; top: var(--sp-5); }
  /* Lo de debajo cruza las dos columnas. Con fila declarada: sin ella se
     colaba en la banda reservada y salía ENCIMA del cuerpo del tour. */
  .path-product #block-perugrandtravel-prod-related,
  .path-product #block-perugrandtravel-prod-award { grid-column: 1 / -1; }
  .path-product #block-perugrandtravel-prod-related { grid-row: 12; }
  .path-product #block-perugrandtravel-prod-award { grid-row: 13; }


  .view-vb-prod-related .view-content { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  #block-perugrandtravel-prod-related h2 { font-size: 30px; }
  .path-product #block-perugrandtravel-prod-related,
  .path-product #block-perugrandtravel-prod-award { padding-block: var(--sp-9); }

  /* ------------------------------------------------------------ DESTINOS */

  #block-perugrandtravel-dest-feat-child > h2,
  #block-perugrandtravel-dest-child > h2,
  .view-vb-dest-list .view-header { font-size: 22px; }

  /* Cuatro por fila, como el diseño. El destacado no entra aquí: es un solo
     ítem y su tarjeta es la que se parte en dos columnas. */
  .view-vb-dest-list.view-display-id-block_1 .view-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  /* Foto a la izquierda a mitad de ancho; lo demás apilado a la derecha.
     La ALTURA de la tarjeta la fija la foto por su proporción.
     ⚠️ La quinta fila `1fr` no es decorativa. Un ítem que cruza varias filas
     reparte su altura ENTRE ellas al medir la rejilla —no es espacio libre, así
     que `align-content` no lo evita—, y las cuatro celdas de la derecha se
     separaban con huecos iguales. Una fila `fr` se lleva todo ese sobrante,
     porque las `fr` cobran antes que las `auto`, y el texto se queda arriba con
     el hueco al pie: justo donde el diseño pone los dos botones. */
  .view-vb-dest-list .dest-card--wide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .view-vb-dest-list .dest-card--wide .views-field-field-tax-dest-thumb-med {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: 3 / 2;
    height: 100%;
  }
  /* ⚠️ El ítem de la rejilla es el `.views-field-fs-*`, NO el div de dentro:
     `display: contents` sobre el `.field-content` quita la caja de ESE span y
     nada más, así que el envoltorio del campo sigue generando la suya. */
  .view-vb-dest-list .dest-card--wide .views-field-field-tax-dest-eyeb-txt,
  .view-vb-dest-list .dest-card--wide .views-field-fs-dest-name,
  .view-vb-dest-list .dest-card--wide .views-field-fs-dest-body,
  .view-vb-dest-list .dest-card--wide .views-field-fs-dest-foot,
  .view-vb-dest-list .dest-card--wide .views-field-fs-dest-cta { grid-column: 2; }
  .view-vb-dest-list .dest-card--wide:hover { transform: none; }

  #block-perugrandtravel-dest-hero .page-title,
  #block-perugrandtravel-term-hero-exp .page-title,
  #block-perugrandtravel-term-hero-cat .page-title { font-size: 44px; }
  .dhero-body { padding-block: var(--sp-9); }

  #block-perugrandtravel-bvg-term-dest > h2,
  #block-perugrandtravel-bvg-term-cat > h2,
  #block-perugrandtravel-bvg-term-exp > h2 { font-size: 22px; }
  .view-vb-prod-dest .view-content,
  .view-vb-prod-cat .view-content,
  .view-vb-prod-exp .view-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  /* -------------------------------------------------------- EXPERIENCIAS */

  .view-vb-exp-list.view-display-id-block_1 .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .view-vb-exp-list .exp-card--wide { min-height: 258px; }
  .view-vb-exp-list .exp-card--wide .exp-body .views-field-name a { font-size: 22px; }

  #block-perugrandtravel-feat-term-dest > h2,
  #block-perugrandtravel-feat-term-cat > h2,
  #block-perugrandtravel-feat-term-exp > h2 { font-size: 22px; }
  .view-display-id-block_2 .view-content:has(.tour-card--wide) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  /* Con la entradilla dentro, 258 px no daban: titulo, meta y precio se salian
     por el borde inferior. El diseno pide una ficha proporcion ~7/3. */
  .tour-card--wide { min-height: 360px; }

  /* ------------------------------------------------------------ CONTACT US */
  .cont-hero-inner { padding-block: var(--sp-9); }
  .cont-hero-inner h1 { font-size: 48px; }
  .cont-hero-inner p { font-size: 17px; }

  /* Las dos columnas del diseño. El grid va en la REGIÓN porque no hay
     envoltorio propio y el theme es intocable: el formulario es el bloque
     `system_main_block` y la tarjeta es un bloque hermano.
     Todo hijo ocupa el ancho completo salvo esos dos — así un bloque que
     aparezca mañana (los mensajes de Drupal, sin ir más lejos) no parte la
     fila de dos columnas. */
  body.webform--wf_cont_gen .region-content {
    display: grid;
    grid-template-columns: 62fr 38fr;
    align-items: start;
    column-gap: var(--sp-6);
    box-sizing: content-box;
    max-width: var(--wrap);
    margin-inline: auto;
  }
  body.webform--wf_cont_gen .region-content > * { grid-column: 1 / -1; }
  /* ⚠️⚠️ LAS FILAS 1–10 ESTÁN RESERVADAS PARA LOS BLOQUES DEL SISTEMA.
     Mensajes, migas, pestañas primarias, pestañas secundarias, acciones de
     administración y título de página van SUELTOS, sin fila declarada, y el
     navegador los auto-coloca en orden de DOM: las seis primeras filas.
     Nuestros bloques empiezan en la 11.

     Sin esa reserva, las filas explícitas 1..5 eran nuestras y los del sistema
     —que se auto-colocan DESPUÉS de todo lo declarado— caían al FINAL de la
     página. Medido con sesión iniciada en /tailor-made: las migas en y=3916 y
     las pestañas de edición en y=3970, lo último de todo.

     No se ven al maquetar porque para un visitante anónimo no se renderizan.
     Las filas vacías no cuestan nada: esta rejilla no tiene `row-gap`.

     Y la contrapartida: en estas rejillas TODOS nuestros bloques declaran su
     fila. Uno sin declarar se cuela en la banda reservada y sale por encima
     del contenido — le pasó a `prod-related` y a `prod-award` en cuanto el
     cuerpo pasó de la fila 1 a la 11. */
  /* Aquí las filas no son un lujo: sin declararlas, la columna de la derecha
     depende del ORDEN DE DOM, y basta con que se renderice una pestaña —o con
     que un peso cambie al guardar /admin/structure/block— para que la tarjeta
     HQ caiga DEBAJO del formulario en vez de a su lado. Verificado. */
  body.webform--wf_cont_gen #block-perugrandtravel-cont-intro { grid-row: 11; }
  body.webform--wf_cont_gen #block-perugrandtravel-content { grid-column: 1; grid-row: 12; }
  body.webform--wf_cont_gen #block-perugrandtravel-cont-hq { grid-column: 2; grid-row: 12; }
  body.webform--wf_cont_gen #block-perugrandtravel-home-partner { grid-row: 13; }

  .cont-intro h2 { font-size: 26px; }
  .webform--wf_cont_gen .webform-section { padding: var(--sp-7) var(--sp-6); }
  .webform--wf_cont_gen .webform-section-title { font-size: 24px; }
  .cont-hq-card { padding: var(--sp-6); }
  .cont-hq-card .field--name-field-bt-cont-hq-tit-head h2 { font-size: 22px; }

  /* ----------------------------------------------------------- TAILOR MADE */
  .tail-hero-inner { padding-block: var(--sp-9); }
  .tail-hero-inner h1 { font-size: 48px; }
  .tail-hero-inner p { font-size: 17px; }

  .tail-steps-head h2 { font-size: 30px; }
  .field--name-field-bt-tail-steps-parr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  /* Las dos columnas del diseño. Mismo patrón que en `/contact-us`: la rejilla
     va en la REGIÓN porque el formulario es el bloque `system_main_block` y la
     barra lateral son bloques hermanos, y el theme es intocable.
     Todo hijo cruza el ancho entero salvo el formulario — así un bloque que
     aparezca mañana (los mensajes de Drupal) no parte la fila de dos columnas. */
  /* Las dos columnas del diseño. La rejilla va en `#contenedor` y NO en la
     región: `#sidebar_right` es hermano de `#contenido`, así que una rejilla
     puesta en `.region-content` nunca lo alcanza —la barra lateral caía
     entera debajo de la página—. Con `#contenido` y su región aplanados, los
     cinco bloques y la barra suben a la misma rejilla. Mismo patrón que la
     ficha de tour.
     El fondo gris lo pinta `#contenedor`, que ocupa el ancho de la ventana. */

  /* ⚠️ LA PRIMERA PISTA ES `1fr`, NO UN ANCHO CALCULADO. Con
     `calc(var(--wrap) - ...)` las dos pistas suman `--wrap` SIEMPRE, también
     cuando la ventana mide menos: entre 1024 y ~1250 px las columnas no
     cabían, la rejilla se desbordaba y —con `justify-content: center`— el
     formulario y la barra lateral acababan MONTADOS uno sobre otro. Se ve
     igual con el zoom del navegador subido, que es como reducir la ventana.
     Ahora el ancho lo fija el RELLENO, no las pistas:
     `max(--pad-x, (100% - --wrap) / 2)` centra el contenido a `--wrap` cuando
     hay sitio y cae al relleno mínimo cuando no lo hay. El fondo sigue a
     sangre porque el relleno va por dentro de `#contenedor`, que no lleva
     `max-width`. */
  body.webform--wf_tail #contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tail-aside);
    align-items: start;
    column-gap: var(--sp-6);
    padding: var(--sp-7) max(var(--pad-x), calc((100% - var(--wrap)) / 2)) 0;
    background: var(--c-bg-alt);
  }
  /* La franja de sellos va sobre BLANCO, no sobre el gris: el gris del diseño
     termina con la banda azul. El blanco tiene que llegar a los bordes de la
     ventana, y el bloque solo mide lo que su columna de la rejilla.
     ⚠️ Se hace con `box-shadow` de radio 0 y extensión enorme, NO con
     `width: 100vw` ni márgenes negativos: `100vw` incluye la barra de scroll y
     saca una barra horizontal. Una sombra no cuenta para el desbordamiento, y
     el `clip-path` la recorta arriba y abajo para que solo pinte a los lados.
     Verificado: scrollWidth 1433 < innerWidth 1440, sin barra.
     Y `#contenedor` pierde su relleno inferior, o quedaría un dedo de gris por
     debajo del blanco. */
  body.webform--wf_tail #block-perugrandtravel-home-partner {
    padding-block: var(--sp-8);
    background: var(--c-white);
    box-shadow: 0 0 0 100vmax var(--c-white);
    clip-path: inset(0 -100vmax);
  }
  /* El aire entre el formulario y la banda de cierre, medido en el diseño. */
  #block-perugrandtravel-tail-cta { margin-top: var(--sp-9); }
  body.webform--wf_tail #contenido,
  body.webform--wf_tail .region-content { display: contents; }
  body.webform--wf_tail #contenedor > *,
  body.webform--wf_tail .region-content > * { grid-column: 1 / -1; }

  /* Fila explícita para cada pieza. Sin ellas, la barra lateral se coloca
     donde caiga; con ellas, un bloque nuevo que aparezca mañana se va detrás y
     no se mete entre el formulario y la barra. */
  /* ⚠️⚠️ LAS FILAS 1–10 ESTÁN RESERVADAS PARA LOS BLOQUES DEL SISTEMA.
     Mensajes, migas, pestañas primarias, pestañas secundarias, acciones de
     administración y título de página van SUELTOS, sin fila declarada, y el
     navegador los auto-coloca en orden de DOM: las seis primeras filas.
     Nuestros bloques empiezan en la 11.

     Sin esa reserva, las filas explícitas 1..5 eran nuestras y los del sistema
     —que se auto-colocan DESPUÉS de todo lo declarado— caían al FINAL de la
     página. Medido con sesión iniciada en /tailor-made: las migas en y=3916 y
     las pestañas de edición en y=3970, lo último de todo.

     No se ven al maquetar porque para un visitante anónimo no se renderizan.
     Las filas vacías no cuestan nada: esta rejilla no tiene `row-gap`.

     Y la contrapartida: en estas rejillas TODOS nuestros bloques declaran su
     fila. Uno sin declarar se cuela en la banda reservada y sale por encima
     del contenido — le pasó a `prod-related` y a `prod-award` en cuanto el
     cuerpo pasó de la fila 1 a la 11. */
  body.webform--wf_tail #block-perugrandtravel-tail-steps { grid-row: 11; }
  body.webform--wf_tail #block-perugrandtravel-tail-intro { grid-row: 12; }
  body.webform--wf_tail #block-perugrandtravel-content {
    grid-column: 1;
    grid-row: 13;
    min-width: 0;
    max-width: none;
  }
  body.webform--wf_tail #block-perugrandtravel-tail-cta { grid-row: 14; }
  body.webform--wf_tail #block-perugrandtravel-home-partner { grid-row: 15; }
  /* ⚠️ El `sticky` NO va en el item de la rejilla: un elemento pegajoso se
     mueve dentro de su BLOQUE CONTENEDOR, que aquí sería la rejilla ENTERA, y
     al bajar se deslizaría sobre la banda de cierre. Va en la región de
     dentro, cuyo contenedor sí es `#sidebar_right`. Es el mismo fallo que ya
     mordió en la ficha de tour. */
  body.webform--wf_tail #sidebar_right {
    grid-column: 2;
    grid-row: 13;
    padding: 0;
    background: none;
  }
  body.webform--wf_tail .region-sidebar-right {
    position: sticky;
    top: var(--sp-5);
  }

  /* ⚠️ Hay que soltar TAMBIÉN el `margin-inline: auto` del móvil, no solo el
     `max-width`: un item de rejilla con anchura automática y las dos márgenes
     en `auto` deja de estirarse y se encoge a su contenido. Con el rótulo se
     veía —salía centrado y de 443 px en vez de pegado al margen izquierdo—;
     con la banda de cierre no, solo quedaba 111 px más estrecha de la cuenta. */
  #block-perugrandtravel-tail-steps,
  #block-perugrandtravel-tail-intro,
  #block-perugrandtravel-tail-cta {
    max-width: none;
    margin-inline: 0;
  }
  #block-perugrandtravel-tail-steps { margin-bottom: var(--sp-8); }
  .field--name-field-bt-tail-intro-tit-head h2 { font-size: 26px; }
  /* El diseño deja más aire entre la línea divisoria y el título siguiente que
     los 32 px que había: medido, ~1,15 veces el alto de una píldora. */
  .webform--wf_tail .webform-submission-wf-tail-form > .form-item,
  .webform--wf_tail .webform-submission-wf-tail-form > fieldset { padding: 40px; }
  .webform--wf_tail .webform-section-title,
  .webform--wf_tail .webform-submission-wf-tail-form > .form-item-wf-tail-dest > label,
  .webform--wf_tail .webform-submission-wf-tail-form > fieldset > legend { font-size: 22px; }

  /* Categoría de hotel: la rejilla 2×2 del diseño. */
  .webform--wf_tail #edit-wf-tail-hotel { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Las cinco píldoras de duración y de grupo se reparten la fila a partes
     iguales, como en el diseño; el resto siguen ajustándose al texto. */
  .webform--wf_tail #edit-wf-tail-days-radios .form-item,
  .webform--wf_tail #edit-wf-tail-flex .form-item,
  .webform--wf_tail #edit-wf-tail-group .form-item,
  .webform--wf_tail #edit-wf-tail-contact-via .form-item { flex: 1 1 0; }

  .webform--wf_tail .webform-button--submit { font-size: 17px; }

  .tail-cta-text h2 { font-size: 28px; }
  /* La banda de cierre pasa a dos columnas: texto a la izquierda, botones a la
     derecha. Cruza el ancho entero, por debajo de las dos columnas. */
  #block-perugrandtravel-tail-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-7);
    text-align: left;
  }
  .tail-cta-text p { margin-bottom: 0; max-width: 60ch; }
  .field--name-field-bt-tail-cta-lnk { flex: 0 0 auto; justify-content: flex-end; }

  #block-perugrandtravel-tail-why,
  #block-perugrandtravel-tail-talk { padding: var(--sp-5) var(--sp-6); }
  .field--name-field-bt-tail-photo-med img { height: 170px; }

  /* ------------------------------------------------------------------ BLOG */
  .blog-hero-inner { padding-block: var(--sp-9); }
  .blog-hero-inner h1 { font-size: 44px; }
  .blog-hero-inner p { font-size: 16px; }

  /* Las dos columnas. Misma solución que en `/tailor-made`: la rejilla va en
     `#contenedor` porque `#sidebar_right` es HERMANO de `#contenido`, y el
     ancho lo fija el relleno con `max()` —no las pistas— para que no se
     desborde en ventanas estrechas. */
  .page-vocabulary-page-type-tax-tag-blog #contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--blog-aside);
    align-items: start;
    column-gap: var(--sp-6);
    padding: var(--sp-7) max(var(--pad-x), calc((100% - var(--wrap)) / 2)) var(--sp-8);
    background: var(--c-bg-alt);
  }
  .page-vocabulary-page-type-tax-tag-blog #contenido,
  .page-vocabulary-page-type-tax-tag-blog .region-content { display: contents; }
  .page-vocabulary-page-type-tax-tag-blog #contenedor > *,
  .page-vocabulary-page-type-tax-tag-blog .region-content > * { grid-column: 1 / -1; }
  /* Las regiones ya no ponen su fondo ni su relleno: lo pone `#contenedor`. */
  .page-vocabulary-page-type-tax-tag-blog .region-content,
  .page-vocabulary-page-type-tax-tag-blog #sidebar_right { padding: 0; background: none; }

  /* Fila explícita para cada pieza: sin ellas la barra lateral se coloca donde
     caiga, y un bloque nuevo se metería entre medias. */
  /* ⚠️⚠️ LAS FILAS 1–10 ESTÁN RESERVADAS PARA LOS BLOQUES DEL SISTEMA.
     Mensajes, migas, pestañas primarias, pestañas secundarias, acciones de
     administración y título de página van SUELTOS, sin fila declarada, y el
     navegador los auto-coloca en orden de DOM: las seis primeras filas.
     Nuestros bloques empiezan en la 11.

     Sin esa reserva, las filas explícitas 1..5 eran nuestras y los del sistema
     —que se auto-colocan DESPUÉS de todo lo declarado— caían al FINAL de la
     página. Medido con sesión iniciada en /tailor-made: las migas en y=3916 y
     las pestañas de edición en y=3970, lo último de todo.

     No se ven al maquetar porque para un visitante anónimo no se renderizan.
     Las filas vacías no cuestan nada: esta rejilla no tiene `row-gap`.

     Y la contrapartida: en estas rejillas TODOS nuestros bloques declaran su
     fila. Uno sin declarar se cuela en la banda reservada y sale por encima
     del contenido — le pasó a `prod-related` y a `prod-award` en cuanto el
     cuerpo pasó de la fila 1 a la 11. */
  /* El cuerpo de la `vocabulary_page` hoy no pinta nada, pero lleva fila igual:
     el día que el editor escriba algo ahí, sin declararla saldría arriba del
     todo, entre las pestañas y las migas. */
  .page-vocabulary-page-type-tax-tag-blog #block-perugrandtravel-content { grid-row: 11; grid-column: 1 / -1; }
  .page-vocabulary-page-type-tax-tag-blog #block-perugrandtravel-blog-feat { grid-row: 12; grid-column: 1 / -1; }
  .page-vocabulary-page-type-tax-tag-blog #block-perugrandtravel-blog-grid { grid-row: 13; grid-column: 1; min-width: 0; }
  .page-vocabulary-page-type-tax-tag-blog #sidebar_right { grid-row: 13; grid-column: 2; }

  /* Por debajo de 1200 px la barra lateral baja, como en móvil. */
  @media (max-width: 1199px) {
    .page-vocabulary-page-type-tax-tag-blog #contenedor { grid-template-columns: minmax(0, 1fr); }
    .page-vocabulary-page-type-tax-tag-blog #block-perugrandtravel-blog-grid,
    .page-vocabulary-page-type-tax-tag-blog #sidebar_right { grid-column: 1; }
    .page-vocabulary-page-type-tax-tag-blog #sidebar_right { grid-row: 14; margin-top: var(--sp-6); }
  }

  #block-perugrandtravel-blog-feat h2,
  #block-perugrandtravel-blog-grid h2 { font-size: 22px; }
  #block-perugrandtravel-blog-grid { margin-top: 0; }

  /* La rejilla de tres. */
  #block-perugrandtravel-blog-grid .view-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .post-card { display: flex; flex-direction: column; }
  .post-card .post-body { flex: 1; display: flex; flex-direction: column; }
  .post-card .post-more { margin-top: auto; }

  /* La tarjeta destacada, en horizontal: foto a la izquierda, texto a la
     derecha. Es la misma tarjeta, solo cambia la dirección. */
  /* ⚠️ Las filas van DECLARADAS. Con `grid-row: 1 / -1` sobre filas implícitas
     la línea `-1` no existe —solo hay líneas explícitas que contar—, así que el
     tramo se queda en una fila: la foto ocupaba una sola y el cuerpo caía
     DEBAJO de ella, en la primera columna, en vez de al lado del titular.
     Medido: el cuerpo salía a x=73 (columna 1) en vez de x=610. Y también hay
     que decir la columna de cada pieza: con auto-colocación, el que sobra se va
     donde quepa. */
  .post-card--feat {
    display: grid;
    grid-template-columns: 42fr 58fr;
    grid-template-rows: auto 1fr;
    align-items: stretch;
  }
  .post-card--feat .views-field-fs-post-media { grid-column: 1; grid-row: 1 / -1; min-width: 0; }
  .post-card--feat .views-field-fs-post-meta { grid-column: 2; grid-row: 1; }
  .post-card--feat .views-field-fs-post-body { grid-column: 2; grid-row: 2; }
  .post-card--feat .post-media,
  .post-card--feat .post-media .field,
  .post-card--feat .post-media .field__item,
  .post-card--feat .post-media article { height: 100%; }
  .post-card--feat .post-media img { width: 100%; max-width: 100%; height: 100%; min-height: 280px; }
  .post-card--feat .post-meta { padding: var(--sp-6) var(--sp-6) 0; }
  .post-card--feat .post-body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
  .post-card--feat .post-body .views-field-title { font-size: 24px; }

  .post-mini img { height: 130px; }

  /* ---------------------------------------------------------------- ABOUT US */
  .about-hero-inner { padding-block: var(--sp-9); }
  .about-hero-inner h1 { font-size: 44px; }
  .about-hero-inner p { font-size: 16px; }

  .about-rich h2 { font-size: 32px; }
  .about-rich .field > .advanced-container { margin-bottom: var(--sp-9); }
  #block-perugrandtravel-about-grid > h2 { font-size: 28px; }
  #block-perugrandtravel-about-grid .view-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .about-card .views-field-field-ct-about-us-thumb-med img { height: 260px; }

  /* Por debajo de 1200 px las dos columnas no caben con holgura —una barra
     lateral de 360 px deja el formulario en 550 y las píldoras se rompen—, así
     que la barra baja debajo, como en móvil. Es un @media ANIDADO dentro del de
     1024 (CSS válido) para no partir el archivo en dos.
     ⚠️ Va AQUÍ, al final, y no junto a la declaración de la rejilla: las reglas
     que colocan cada pieza (`grid-column: 2`, `grid-row: 3`) tienen la misma
     especificidad, así que si este bloque va antes lo pisan y la barra vuelve a
     la segunda columna —creándola implícitamente aunque la rejilla declare una
     sola—. Comprobado: salían dos columnas de 448 px. */
  @media (max-width: 1199px) {
    body.webform--wf_tail #contenedor { grid-template-columns: minmax(0, 1fr); }
    body.webform--wf_tail #block-perugrandtravel-content,
    body.webform--wf_tail #sidebar_right { grid-column: 1; }
    /* Fila declarada, no `auto`: con `auto` la barra se auto-colocaría en la
       banda reservada a los bloques del sistema y saldría arriba del todo.
       Aquí baja debajo del formulario, así que las dos piezas que van después
       corren una fila. Sin esto, la barra y la banda de cierre compartirían
       celda y se pintarían una encima de la otra. */
    body.webform--wf_tail #sidebar_right { grid-row: 14; }
    body.webform--wf_tail #block-perugrandtravel-tail-cta { grid-row: 15; }
    body.webform--wf_tail #block-perugrandtravel-home-partner { grid-row: 16; }
    body.webform--wf_tail .region-sidebar-right { position: static; }
    body.webform--wf_tail .region-sidebar-right { display: grid; gap: var(--sp-4); }
  }

  /* ------------------------------------------------ LA PÁGINA DEL ARTÍCULO */
  /* Las dos columnas. Misma solución que en `/blog` y en `/tailor-made`: la
     rejilla va en `#contenedor` porque `#sidebar_right` es HERMANO de
     `#contenido`, y el ancho lo fija el relleno con `max()` —no las pistas—
     para que no se desborde en ventanas estrechas. */
  .page-node-type-ct-blog #contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--blog-aside);
    align-items: start;
    column-gap: var(--sp-6);
    padding: var(--sp-6) max(var(--pad-x), calc((100% - var(--wrap)) / 2)) var(--sp-8);
    background: var(--c-bg-alt);
  }
  .page-node-type-ct-blog #contenido,
  .page-node-type-ct-blog .region-content { display: contents; }
  .page-node-type-ct-blog #contenedor > *,
  .page-node-type-ct-blog .region-content > * { grid-column: 1 / -1; }
  /* Las regiones ya no ponen su fondo ni su relleno: lo pone `#contenedor`. */
  .page-node-type-ct-blog .region-content,
  .page-node-type-ct-blog #sidebar_right { padding: 0; background: none; }
  .page-node-type-ct-blog .region-sidebar-right { max-width: none; }

  /* ⚠️⚠️ LAS FILAS 1–10 ESTÁN RESERVADAS PARA LOS BLOQUES DEL SISTEMA.
     Mensajes, migas, pestañas primarias, pestañas secundarias, acciones de
     administración y título de página van SUELTOS, sin fila declarada, y el
     navegador los auto-coloca en orden de DOM: las seis primeras filas.
     Nuestros bloques empiezan en la 11.

     Sin esa reserva, las filas explícitas 1..5 eran nuestras y los del sistema
     —que se auto-colocan DESPUÉS de todo lo declarado— caían al FINAL de la
     página. Medido con sesión iniciada en /tailor-made: las migas en y=3916 y
     las pestañas de edición en y=3970, lo último de todo.

     No se ven al maquetar porque para un visitante anónimo no se renderizan.
     Las filas vacías no cuestan nada: esta rejilla no tiene `row-gap`.

     Y la contrapartida: en estas rejillas TODOS nuestros bloques declaran su
     fila. Uno sin declarar se cuela en la banda reservada y sale por encima
     del contenido — le pasó a `prod-related` y a `prod-award` en cuanto el
     cuerpo pasó de la fila 1 a la 11. */
  .page-node-type-ct-blog #block-perugrandtravel-content { grid-row: 11; grid-column: 1; min-width: 0; }
  .page-node-type-ct-blog #sidebar_right { grid-row: 11; grid-column: 2; }
  /* ⚠️ COLUMNA 1, no `1 / -1`. La sección se queda bajo el artículo y NO se mete
     debajo de la barra lateral: el hueco de la derecha queda vacío a propósito,
     que es como lo pinta el diseño. */
  #block-perugrandtravel-post-rel { grid-row: 12; grid-column: 1; padding-inline: 0; }

  /* La barra lateral acompaña la lectura. ⚠️ El `sticky` va en la REGIÓN de
     dentro, no en el item de la rejilla: un elemento pegajoso se mueve dentro
     de su BLOQUE CONTENEDOR, que en el item sería la rejilla entera, y al
     bajar se deslizaría sobre los artículos relacionados. */
  .page-node-type-ct-blog .region-sidebar-right {
    position: sticky;
    top: var(--sp-5);
  }

  .page-node-type-ct-blog .region-slider { padding: var(--sp-6) max(var(--pad-x), calc((100% - var(--wrap)) / 2)) 0; }
  .post-hero { height: 420px; }
  /* Medido por PROPORCIÓN sobre la maqueta, que viene a escala desconocida: el
     titular ocupa un 3,1 % del ancho de la banda y el relleno un 3,0 %. Sobre
     los 1185 px de banda que da `--wrap` a 1280, salen 37 px y 35 px. */
  .post-hero-inner { padding: var(--sp-6); }
  .post-hero-inner h1 { font-size: 37px; max-width: 24ch; }
  .post-hero .post-meta { font-size: 14px; }
  .post-hero .post-meta > .views-field::before { width: 16px; height: 16px; background-size: 16px 16px; }

  .post-layout > .post-body { padding: var(--sp-8); }
  .post-layout > .post-body .field--name-body { font-size: 17px; margin-bottom: var(--sp-6); }
  .post-layout > .post-body h2 { font-size: 24px; }
  .post-layout > .post-body p { font-size: 16px; }

  .blog-promo {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--sp-5);
    padding: var(--sp-5);
  }
  .blog-promo [class*="-tit-txt"] { grid-column: 1; grid-row: 2; margin-top: var(--sp-1); font-size: 16px; }
  .blog-promo [class*="-thumb-med"] { grid-column: 2; grid-row: 1 / 3; }
  .blog-promo [class*="-thumb-med"] img { width: 132px; height: 84px; margin-top: 0; }
  .blog-promo [class*="-lnk"] { grid-column: 3; grid-row: 1 / 3; }

  #block-perugrandtravel-post-rel { padding-top: var(--sp-8); }
  #block-perugrandtravel-post-rel h2 { font-size: 24px; }
  #block-perugrandtravel-post-rel .view-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con dos columnas, las líneas cambian: la vertical en las celdas impares y
     la horizontal solo en las dos primeras. El `+ .post-card--rel` del móvil se
     anula, o pintaría una línea de más en la segunda columna. */
  #block-perugrandtravel-post-rel .post-card--rel + .post-card--rel { border-top: 0; }
  #block-perugrandtravel-post-rel .post-card--rel:nth-child(odd) { border-right: 1px solid var(--c-line); }
  #block-perugrandtravel-post-rel .post-card--rel:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }

  /* Por debajo de 1200 px la barra lateral baja, como en móvil. Va al final y
     no junto a la declaración de la rejilla: las reglas que colocan cada pieza
     tienen la misma especificidad, así que puesto antes lo pisan y la barra
     vuelve a la segunda columna. */
  @media (max-width: 1199px) {
    .page-node-type-ct-blog #contenedor { grid-template-columns: minmax(0, 1fr); }
    .page-node-type-ct-blog #block-perugrandtravel-content,
    .page-node-type-ct-blog #sidebar_right { grid-column: 1; }
    .page-node-type-ct-blog #sidebar_right { grid-row: 12; margin-top: var(--sp-6); }
    #block-perugrandtravel-post-rel { grid-row: 13; }
    .page-node-type-ct-blog .region-sidebar-right { position: static; }
  }

  /* Presentacion: texto e imagen en dos columnas. La estructura la dan dos
     field_group (`present-text` y `present-media`), que cuelgan DIRECTAMENTE
     del bloque —no hay envoltorio `.content` de por medio—, asi que la rejilla
     va en el propio bloque. */
  /* ⚠️ El ancho se centra con RELLENO, no con `max-width` + `margin: auto`.
     Los demas bloques ocupan el ancho entero de la ventana y el lapiz de los
     enlaces contextuales se ancla a su borde derecho; encoger el bloque lo
     arrastraba hacia dentro y quedaba descolocado respecto a los otros.
     El `max()` evita que el relleno salga negativo en pantallas estrechas. */
  /* Con el boton fuera del grupo del texto, el bloque pasa a tener TRES hijos.
     Se colocan por areas para que en escritorio siga igual: texto y boton
     apilados en la columna izquierda y la foto ocupando la derecha entera. */
  #block-perugrandtravel-home-present {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "texto media"
      "boton media";
    grid-template-rows: auto auto;
    align-content: center;
    gap: var(--sp-4) var(--sp-8);
    padding-inline: max(var(--pad-x), calc((100% - var(--wrap)) / 2));
  }
  /* Reseteo del centrado de movil: aqui las tres piezas van a la izquierda. */
  #block-perugrandtravel-home-present .present-text > [class*="-eyeb-txt"],
  #block-perugrandtravel-home-present .present-text > [class*="-tit-head"],
  #block-perugrandtravel-home-present > [class*="-present-lnk"] { text-align: left; }
  #block-perugrandtravel-home-present .present-text { grid-area: texto; }
  /* `justify-self: start` no basta aqui: computa a `start` y aun asi la caja se
     queda centrada en su pista —medido, 340 en una columna que empieza en 120—.
     Lo que si la pega a la izquierda es dejar el margen derecho en `auto`. */
  #block-perugrandtravel-home-present > [class*="-present-lnk"] {
    grid-area: boton;
    width: max-content;
    margin: var(--sp-2) auto 0 0;
  }
  #block-perugrandtravel-home-present .present-media {
    grid-area: media;
    align-self: center;
    margin-top: 0;
  }

}

/* ======================================================= PANTALLAS ANCHAS */
/* A 1200 px de contenido, un monitor de 1920 deja 360 px de margen a cada
   lado y la pagina se ve como una tira estrecha en el centro.
   Se sube EL TOKEN y no el ancho de una pantalla suelta: asi crecen a la vez
   la cabecera, el pie, la banda del titulo y el contenido, que es lo unico
   que evita que unas piezas queden alineadas y otras no. Las 25 reglas que
   usan `var(--wrap)` lo heredan sin tocarlas. */
/* Dos escalones, no uno. Con 1320 de golpe el contenido se quedaba a 53 px del
   borde en un portatil de 1440 —casi a sangre—; y un solo salto no arregla el
   monitor de 1920, que es donde de verdad se ve la tira estrecha.
   `--pad-x` se queda en los 40 px del bloque de 1024. */
@media (min-width: 1440px) {
  :root { --wrap: 1280px; }
}

@media (min-width: 1800px) {
  :root { --wrap: 1440px; --tail-aside: 400px; }
}