/* Hojas de estilo de Do Patagonia, pegadas en una sola.
   Generado solo. No editar aqui: los originales estan en
   wp-content/plugins/dopatagonia-design/assets/ */

/* === dopat-botones (botones.css) === */
/* ============================================================================
   DoPatagonia — Un solo color de botón en todo el sitio

   POR QUÉ: el dorado (#a97c34 y #c8a96e) está metido en los ajustes del tema,
   así que cada botón que no tuviera una regla propia salía dorado. Iban
   apareciendo de uno en uno según se revisaba el sitio: el de la página del
   blog, el de la página de gracias. En vez de cazarlos uno a uno, aquí se
   pinta de azul cualquier botón, y las páginas que necesiten otra cosa lo
   siguen mandando porque sus hojas se cargan después.
   ============================================================================ */

#content .wp-block-button__link,
#content .uagb-buttons-repeater,
#content .ast-button,
#content .wp-block-search__button {
  background-color: #0E5F94 !important;
  border-color: #0E5F94 !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

#content .wp-block-button__link:hover,
#content .uagb-buttons-repeater:hover,
#content .ast-button:hover {
  background-color: #1272B0 !important;
  border-color: #1272B0 !important;
}

/* Spectra mete el texto en un hijo, y el hijo lleva su propio color. */
#content .uagb-button__link {
  color: #FFFFFF !important;
}


/* === dopat-programas (programas.css) === */
/* ============================================================================
   DoPatagonia — Página de programas
   ----------------------------------------------------------------------------
   Antes: tres bandas negras con carruseles horizontales. Las tarjetas se
   cortaban por el borde derecho y había que avisar "swipe / scroll to explore"
   —cuando hay que explicar cómo se usa algo, es que no funciona—. Además no
   había ni un precio: para comparar dos programas tocaba abrir dos pestañas.

   Ahora: una sola rejilla con los nueve programas a la vista, filtros arriba,
   y en cada tarjeta lo que de verdad decide una compra: días, dificultad,
   alojamiento y precio de partida.
   ============================================================================ */

.page-id-7385 #content {
  --dp-green:      #2C4A26;
  --dp-green-deep: #1F3619;
  --dp-gold:       #9ACB6A;
  --dp-gold-ink:   #4A7A26;
  --dp-cta:        #0E5F94;
  --dp-cta-h:      #1272B0;
  --dp-ink:        #2C2C2C;
  --dp-ink-soft:   #55534E;
  --dp-sand:       #F7F5F2;
  --dp-sand-deep:  #EFEAE2;
  --dp-line:       #E3DED4;
  --dp-r:          14px;
  --dp-max:        1120px;
}

/* ---- Filtros ---------------------------------------------------------------- */

.dp-programas__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.dp-filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--dp-line);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dp-ink-soft);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.dp-filtro:hover {
  border-color: var(--dp-gold-ink);
  color: var(--dp-green);
}

.dp-filtro.is-current {
  background: var(--dp-green);
  border-color: var(--dp-green);
  color: #FFFFFF;
}

.dp-filtro__n {
  font-size: 11.5px;
  font-weight: 700;
  opacity: .6;
}

.dp-filtro:focus-visible {
  outline: 3px solid var(--dp-cta);
  outline-offset: 2px;
}

/* ---- Rejilla ---------------------------------------------------------------- */

.dp-programas__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 980px) {
  .dp-programas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dp-programas__rejilla { grid-template-columns: 1fr; gap: 16px; }
}

.dp-programa { margin: 0; }

.dp-programa[hidden] { display: none; }

.dp-programa__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r);
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dp-programa__caja:hover {
    transform: translateY(-4px);
    border-color: rgba(74, 122, 38, .5);
    box-shadow: 0 2px 6px rgba(44, 74, 38, .06), 0 22px 40px -24px rgba(44, 74, 38, .45);
  }
}

/* La tarjeta entera es pulsable, pero el enlace de verdad sigue siendo el
   título: así un lector de pantalla anuncia el destino una sola vez. */
.dp-programa__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dp-programa__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dp-sand-deep);
}

.dp-programa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.03);
}

@media (prefers-reduced-motion: no-preference) {
  .dp-programa__foto img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
  .dp-programa__caja:hover .dp-programa__foto img { transform: scale(1.045); }
}

.dp-programa__dias {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dp-green);
}

.dp-programa__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 16px;
}

.dp-programa__grupo {
  margin: 0 0 6px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-gold-ink);
}

.dp-programa__titulo {
  margin: 0 0 6px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* Dos renglones siempre, aunque el nombre quepa en uno: si no, la tarjeta de
     "Southern Patagonia Grand Journey" empujaba su tabla de datos un renglón
     más abajo que las de al lado y la fila entera se veía desalineada. */
  min-height: 2.36em;
}

.dp-programa__titulo a {
  color: var(--dp-green);
  text-decoration: none;
}

.dp-programa__sub {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.45;
  color: var(--dp-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-programa__datos {
  margin: 0 0 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--dp-line);
  display: grid;
  gap: 7px;
}

.dp-programa__datos div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.dp-programa__datos dt {
  margin: 0;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dp-ink-soft);
}

.dp-programa__datos dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--dp-ink);
}

.dp-programa__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: auto 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--dp-line);
}

.dp-programa__precio {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--dp-ink-soft);
}

.dp-programa__precio b {
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--dp-green);
}

.dp-programa__ver {
  margin-left: auto;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dp-cta);
  white-space: nowrap;
}

.dp-programa__ver::after {
  content: " →";
}

.dp-programas__vacio {
  margin: 28px 0 0;
  color: var(--dp-ink-soft);
}


/* Texto del grupo elegido */
.dp-programas__intro {
  max-width: 62ch;
  margin: -14px 0 26px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 16.5px !important;
  line-height: 1.5;
  color: var(--dp-ink-soft);
}

.dp-programas__intro[hidden] { display: none; }


/* ============================================================================
   RESTO DE LA PÁGINA: MISMO LENGUAJE QUE LA FICHA DE PROGRAMA
   ----------------------------------------------------------------------------
   Nota de mantenimiento: estas reglas repiten las de la página del W Trek.
   Cuando el diseño se extienda a más páginas conviene sacarlas a un archivo
   común y cargarlo en todas; ahora mismo duplicar es más seguro que refactorizar
   mientras seguimos moviendo cosas.
   ============================================================================ */

/* ---- Encabezado de la página ------------------------------------------------ */

.page-id-7385 #content .entry-content > .wp-block-uagb-container:first-child,
.page-id-7385 #content .uagb-block-2cec4473 {
  background: var(--dp-sand) !important;
  padding-top: 56px !important;
  padding-bottom: 44px !important;
}

.page-id-7385 #content h1,
.page-id-7385 #content .uagb-heading-text {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--dp-green) !important;
}

.page-id-7385 #content .wp-block-uagb-advanced-heading + p {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(16px, 1.15vw, 17.5px) !important;
  line-height: 1.5;
  color: var(--dp-ink-soft) !important;
  max-width: 62ch;
}

/* ---- Banda de "Tailor-Made" -------------------------------------------------- */

.page-id-7385 #content .dp-tailor {
  background: linear-gradient(135deg, var(--dp-green) 0%, var(--dp-green-deep) 100%);
  color: #FFFFFF;
}

.page-id-7385 #content .dp-tailor > * {
  max-width: var(--dp-max);
  margin-left: auto;
  margin-right: auto;
}

.page-id-7385 #content .dp-tailor__rotulo {
  margin: 0 0 10px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-gold) !important;
}

.page-id-7385 #content .dp-tailor h2 {
  margin: 0 0 12px !important;
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.14;
  color: #FFFFFF !important;
}

.page-id-7385 #content .dp-tailor p:not(.dp-tailor__rotulo) {
  margin: 0 0 22px !important;
  max-width: 64ch;
  font-size: 16px !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92) !important;
}

.page-id-7385 #content .dp-tailor .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid var(--dp-gold) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  min-height: 46px;
  padding: 0 26px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  transition: background-color .18s ease, color .18s ease;
}

.page-id-7385 #content .dp-tailor .wp-block-button__link:hover {
  background-color: var(--dp-gold) !important;
  color: var(--dp-green-deep) !important;
}

/* ---- Formulario: igual que en la ficha de programa ---------------------------
   AVISO: lo que de verdad manda sobre el formulario está en formulario.css,
   que se carga después de esta hoja y cubre las tres páginas que lo llevan.
   Lo de aquí abajo es historia y ya no decide nada; no lo edites: edita
   formulario.css. */

.page-id-7385 #content .uagb-block-9b0d69d2 {
  background: linear-gradient(180deg, #17486A 0%, #123E56 100%) !important;
  padding-top: 56px !important;
  padding-bottom: 72px !important;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .uagb-heading-text {
  color: #FFFFFF !important;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .wp-block-uagb-advanced-heading + p {
  color: rgba(255, 255, 255, .92) !important;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .wpcf7 {
  max-width: 760px;
  margin: 26px auto 0;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 22px 26px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10), 0 30px 60px -30px rgba(0, 0, 0, .55);
}

.page-id-7385 #content .dp-booking label {
  color: var(--dp-ink) !important;
  font-weight: 600;
  margin-bottom: 4px !important;
}

.page-id-7385 #content .dp-booking label span {
  color: var(--dp-ink-soft) !important;
  font-weight: 400;
}

.page-id-7385 #content .dp-booking .form-note {
  color: var(--dp-ink-soft) !important;
}

.page-id-7385 #content .dp-booking input,
.page-id-7385 #content .dp-booking select,
.page-id-7385 #content .dp-booking textarea {
  background-color: #FAF9F7 !important;
  border: 1px solid var(--dp-line) !important;
  border-radius: 10px !important;
  height: 46px !important;
  font-size: 16px !important;
}

.page-id-7385 #content .dp-booking textarea {
  height: auto !important;
  min-height: 84px !important;
}

.page-id-7385 #content .dp-booking input:focus,
.page-id-7385 #content .dp-booking select:focus,
.page-id-7385 #content .dp-booking textarea:focus {
  background-color: #FFFFFF !important;
  border-color: var(--dp-cta) !important;
  box-shadow: 0 0 0 3px rgba(14, 95, 148, .16) !important;
}

.page-id-7385 #content .dp-booking .form-inner {
  margin-bottom: 10px !important;
  max-width: none !important;
}

.page-id-7385 #content .wpcf7 p,
.page-id-7385 #content .dp-booking p {
  max-width: none !important;
}

.page-id-7385 #content .dp-booking button[type="submit"] {
  width: 100% !important;
  min-height: 48px;
  border-radius: 10px !important;
  background-color: var(--dp-cta) !important;
  color: #FFFFFF !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: .05em;
}

.page-id-7385 #content .dp-booking button[type="submit"]:hover {
  background-color: var(--dp-cta-h) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(14, 95, 148, .75);
}

.page-id-7385 #content .dp-booking .wpcf7-turnstile {
  min-height: 0 !important;
  margin: 8px 0;
}

/* La banda del formulario tiene que llegar a los dos bordes, como la del
   programa. Sin esto se quedaba como una caja blanca con márgenes. */
.page-id-7385 #content .uagb-block-9b0d69d2 {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-id-7385 #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap {
  max-width: var(--dp-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* ============================================================================
   FILTROS EN AZUL DE MARCA

   El estado elegido iba en verde, que en este sistema es color de superficie.
   El azul del logo es el de acción —botones, enlaces—, y elegir un filtro es
   una acción. Además se distingue mucho mejor de los no elegidos.
   ============================================================================ */

.dp-filtro.is-current {
  background: var(--dp-cta);
  border-color: var(--dp-cta);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -8px rgba(14, 95, 148, .9);
}

.dp-filtro:hover {
  border-color: var(--dp-cta);
  color: var(--dp-cta);
}

.dp-filtro.is-current:hover {
  background: var(--dp-cta-h);
  border-color: var(--dp-cta-h);
  color: #FFFFFF;
}


/* ============================================================================
   TARJETA DEL VIAJE A MEDIDA
   ============================================================================ */

.dp-medida {
  background: linear-gradient(150deg, var(--dp-green) 0%, var(--dp-green-deep) 100%);
  border-color: transparent;
  color: #FFFFFF;
  min-height: 260px;
}

.dp-medida .dp-programa__cuerpo {
  justify-content: center;
  padding: 26px 22px;
}

.dp-medida .dp-programa__grupo {
  color: var(--dp-gold) !important;
}

.dp-medida .dp-programa__titulo a {
  color: #FFFFFF;
}

.dp-medida__texto {
  margin: 0 0 18px !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

.dp-medida .dp-programa__pie {
  border-top-color: rgba(255, 255, 255, .22);
  padding-top: 14px;
}

.dp-medida .dp-programa__ver {
  color: var(--dp-gold);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dp-medida:hover {
    border-color: var(--dp-gold);
  }
}

/* El párrafo de entrada arrancaba 227 px más adentro que el titular: el
   contenedor de Spectra centra sus hijos (flex con align-items: center) y el
   párrafo, al ser más estrecho, se iba al medio. Se alinean todos al mismo
   borde, que además es el de las tarjetas. */
.page-id-7385 #content .uagb-block-2cec4473 .uagb-container-inner-blocks-wrap {
  align-items: flex-start !important;
  max-width: var(--dp-max);
  margin-left: auto;
  margin-right: auto;
}

.page-id-7385 #content .wp-block-uagb-advanced-heading + p {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* La rejilla comparte el mismo ancho y el mismo borde que el encabezado */
.page-id-7385 #content .dp-programas {
  max-width: var(--dp-max);
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================================
   FORMULARIO COMPACTO

   En esta página el formulario va después de una rejilla larga, y con el
   tamaño que tenía se comía el final de la página entera. Aquí no hace falta
   que grite: quien llega abajo ya eligió o ya sabe que quiere preguntar.

   Se achica todo a la vez para que siga siendo armónico, no solo más chico:
   ficha más estrecha, campos más bajos, menos aire entre ellos y titular más
   contenido.
   ============================================================================ */

.page-id-7385 #content .uagb-block-9b0d69d2 {
  padding-top: 44px !important;
  padding-bottom: 52px !important;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .uagb-heading-text {
  font-size: clamp(22px, 2.2vw, 28px) !important;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .wp-block-uagb-advanced-heading + p {
  font-size: 14.5px !important;
  max-width: 52ch;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.page-id-7385 #content .uagb-block-9b0d69d2 .wpcf7 {
  max-width: 620px;
  margin-top: 20px;
  padding: 18px 20px 16px;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 20px 44px -26px rgba(0, 0, 0, .5);
}

.page-id-7385 #content .dp-booking label {
  font-size: 12.5px !important;
  margin-bottom: 3px !important;
}

.page-id-7385 #content .dp-booking input,
.page-id-7385 #content .dp-booking select {
  height: 42px !important;
  padding: 6px 11px !important;
  border-radius: 9px !important;
}

.page-id-7385 #content .dp-booking textarea {
  /* El atributo rows del campo manda sobre min-height: hay que fijar la
     altura para que el área de texto deje de ser un rectángulo enorme. */
  height: 76px !important;
  min-height: 0 !important;
  padding: 9px 11px !important;
  border-radius: 9px !important;
}

.page-id-7385 #content .dp-booking .form-inner {
  margin-bottom: 8px !important;
}

.page-id-7385 #content .dp-booking button[type="submit"] {
  min-height: 44px;
  border-radius: 9px !important;
  margin-top: 4px;
}

.page-id-7385 #content .dp-booking .form-note {
  font-size: 12.5px !important;
  margin-top: 10px;
}

@media (max-width: 781px) {
  .page-id-7385 #content .uagb-block-9b0d69d2 .wpcf7 {
    padding: 16px 14px 14px;
  }
}

/* El formulario ya no se estila aquí: todo su detalle vive en formulario.css,
   que es común a la portada, al catálogo y a la ficha de programa, y que se
   carga después de esta hoja. Tenerlo en dos sitios era pedir que un arreglo
   se hiciera en uno y no en el otro. */

/* ----------------------------------------------------------------------------
   LA TARJETA A MEDIDA APUNTA AL FORMULARIO

   Decía "Design my trip" con el formulario justo debajo: dos veces la misma
   invitación. Ahora la flecha va hacia abajo y señala el formulario, que es
   donde se cuenta la idea. Menos palabras y más dirección.
   -------------------------------------------------------------------------- */

.dp-medida .dp-programa__ver::after {
  content: "";
}

.dp-medida .dp-programa__ver {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dp-medida .dp-programa__ver::before {
  content: "↓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--dp-gold);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .dp-medida .dp-programa__ver::before {
    animation: dp-abajo 2.6s ease-in-out infinite;
  }
}

@keyframes dp-abajo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}


/* ============================================================================
   ESCALA DE LA TARJETA DE PROGRAMA

   La tarjeta usaba siete tamaños distintos por dentro (20 · 13,5 · 12,5 · 12 ·
   11,5 · 11 · 10,5). Se reduce a tres, los mismos escalones que el resto del
   sitio: 18,5 para el nombre, 13,5 para el texto y 11,5 para los rótulos.
   Afecta al catálogo y a la portada a la vez, que para eso es un componente.
   ============================================================================ */

.dp-programa__titulo {
  font-size: 18.5px !important;
}

.dp-programa__grupo,
.dp-programa__dias,
.dp-programa__datos dt,
.dp-programa__ver {
  font-size: 11.5px !important;
}

.dp-programa__sub,
.dp-programa__datos dd,
.dp-programa__precio,
.dp-medida__texto {
  font-size: 13.5px !important;
}

.dp-programa__precio b {
  font-size: 18.5px !important;
}


/* === dopat-home (home.css) === */
/* ============================================================================
   DoPatagonia — Portada
   ----------------------------------------------------------------------------
   La portada tenía cosas buenas que se quedan: el mapa, las reseñas y el
   bloque de preguntas. Lo que cambia es lo demás:

     · Botones dorados de la paleta vieja  →  azul del logo.
     · Programas destacados hechos a mano, sin precio  →  las mismas tarjetas
       del catálogo, que se actualizan solas.
     · Tipografía y ritmo, los mismos que en el resto del sitio.

   Todo acotado a la portada.
   ============================================================================ */

body.home #content,
.page-id-5980 #content {
  --dp-green:      #2C4A26;
  --dp-green-deep: #1F3619;
  --dp-gold:       #9ACB6A;
  --dp-gold-ink:   #4A7A26;
  --dp-cta:        #0E5F94;
  --dp-cta-h:      #1272B0;
  --dp-ink:        #2C2C2C;
  --dp-ink-soft:   #55534E;
  --dp-sand:       #F7F5F2;
  --dp-sand-deep:  #EFEAE2;
  --dp-line:       #E3DED4;
  --dp-r:          14px;
  --dp-max:        1120px;
}

/* ---- Titulares --------------------------------------------------------------- */

body.home #content h1,
body.home #content h2,
body.home #content .uagb-heading-text {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--dp-green) !important;
}

body.home #content h2,
body.home #content .uagb-heading-text {
  font-size: clamp(26px, 3.1vw, 40px) !important;
  line-height: 1.14;
}

body.home #content .wp-block-uagb-advanced-heading + p {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(16px, 1.15vw, 17.5px) !important;
  line-height: 1.5;
  color: var(--dp-ink-soft) !important;
  max-width: 64ch;
}

/* ---- Portada ------------------------------------------------------------------ */

body.home #content .entry-content > .wp-block-cover {
  min-height: clamp(420px, 62vh, 560px) !important;
  align-items: flex-end;
}

@media (min-width: 992px) {
  body.home #content .entry-content > .wp-block-cover {
    min-height: clamp(520px, 70vh, 660px) !important;
  }
}

body.home #content .wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(21, 42, 34, .00) 0%,
    rgba(21, 42, 34, .12) 40%,
    rgba(21, 42, 34, .58) 80%,
    rgba(21, 42, 34, .78) 100%
  );
}

body.home #content .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

body.home #content .wp-block-cover h1,
body.home #content .wp-block-cover .uagb-heading-text {
  color: #FFFFFF !important;
  font-size: clamp(32px, 4.6vw, 62px) !important;
  line-height: 1.06;
  text-shadow: 0 2px 28px rgba(21, 42, 34, .5);
}

/* La línea de confianza, pegada bajo los botones y legible */
body.home #content .wp-block-cover p {
  color: rgba(255, 255, 255, .95) !important;
  font-size: 13.5px !important;
  letter-spacing: .03em;
  text-shadow: 0 1px 14px rgba(21, 42, 34, .6);
}

@media (prefers-reduced-motion: no-preference) {
  body.home #content .wp-block-cover__image-background {
    animation: dp-respirar-home 26s ease-out forwards;
  }
}

@keyframes dp-respirar-home {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* ---- Botones: azul de marca --------------------------------------------------- */

body.home #content .wp-block-button__link,
body.home #content .uagb-buttons-repeater.wp-block-button__link {
  background-color: var(--dp-cta) !important;
  border-color: var(--dp-cta) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  min-height: 46px;
  padding: 0 26px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.home #content .wp-block-button__link:hover,
body.home #content .uagb-buttons-repeater.wp-block-button__link:hover {
  background-color: var(--dp-cta-h) !important;
  border-color: var(--dp-cta-h) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(14, 95, 148, .75);
}

/* El segundo botón de la portada, de contorno: dos botones macizos juntos
   compiten entre ellos y ninguno gana. */
body.home #content .wp-block-cover .uagb-buttons__wrap > div:nth-child(2) .uagb-buttons-repeater.wp-block-button__link {
  background-color: rgba(255, 255, 255, .10) !important;
  border: 2px solid rgba(255, 255, 255, .85) !important;
  color: #FFFFFF !important;
}

body.home #content .wp-block-cover .uagb-buttons__wrap > div:nth-child(2) .uagb-buttons-repeater.wp-block-button__link:hover {
  background-color: #FFFFFF !important;
  color: var(--dp-green) !important;
}

/* ---- Bandas y ritmo ------------------------------------------------------------ */

body.home #content .entry-content > .wp-block-uagb-container {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

@media (min-width: 992px) {
  body.home #content .entry-content > .wp-block-uagb-container {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

/* ---- Tarjetas de estilo de viaje ------------------------------------------------ */

body.home #content .dp-style-card-image {
  border-radius: var(--dp-r);
  overflow: hidden;
}

body.home #content .dp-style-card-image img {
  filter: saturate(1.06) contrast(1.03);
}

/* ---- "Why DoPatagonia" --------------------------------------------------------- */

body.home #content .uagb-block-269282ea .uagb-ifb-title {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: 18.5px !important;
  font-weight: 600 !important;
  color: var(--dp-green) !important;
}

body.home #content .uagb-block-269282ea .uagb-ifb-desc {
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--dp-ink-soft) !important;
}

body.home #content .uagb-block-269282ea .uagb-ifb-icon-wrap svg {
  fill: var(--dp-gold-ink) !important;
  color: var(--dp-gold-ink) !important;
}

/* ---- Preguntas frecuentes ------------------------------------------------------- */

body.home #content #rank-math-faq .rank-math-list-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dp-line);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0;
}

body.home #content #rank-math-faq .rank-math-question {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(17px, 1.4vw, 20px) !important;
  font-weight: 600 !important;
  color: var(--dp-green) !important;
  margin-bottom: 8px;
}

body.home #content #rank-math-faq .rank-math-answer p {
  font-size: 15.5px !important;
  line-height: 1.65;
  max-width: 74ch;
}

/* ---- Cierre --------------------------------------------------------------------- */

body.home #content .uagb-block-d21be03d {
  background: linear-gradient(135deg, var(--dp-green) 0%, var(--dp-green-deep) 100%) !important;
}

body.home #content .uagb-block-d21be03d .uagb-heading-text {
  color: #FFFFFF !important;
}

/* ---- Rejilla de destacados ------------------------------------------------------- */

.dp-programas--destacados .dp-programas__rejilla {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .dp-programas--destacados .dp-programas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dp-programas--destacados .dp-programas__rejilla { grid-template-columns: 1fr; }
}

.dp-programas--destacados .dp-programa__sub {
  -webkit-line-clamp: 2;
}


/* ============================================================================
   CORRECCIONES
   ============================================================================ */

/* (a) Varios titulares seguían en el azul marino de la plantilla de Astra
   ("Choose your Patagonia travel style", "Why DoPatagonia?", los títulos de
   las tarjetas de estilo). No venían de una regla de color suelta sino de una
   variable del tema, así que se cambia la variable: un solo cambio y todos los
   titulares pasan al verde de marca a la vez. */

body.home #content,
.page-id-5980 #content {
  --ast-global-color-2: #2C4A26;
  --wp--preset--color--ast-global-color-2: #2C4A26;
}

body.home #content h3,
body.home #content h4 {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  color: var(--dp-green) !important;
}

/* (b) En las tarjetas destacadas el precio se partía en dos líneas
   ("From $2,949 per / person") porque cuatro tarjetas en fila dejan poco
   ancho. Se apilan el precio y el enlace. */

@media (min-width: 1101px) {
  .dp-programas--destacados .dp-programa__pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dp-programas--destacados .dp-programa__ver {
    margin-left: 0;
  }

  .dp-programas--destacados .dp-programa__precio {
    white-space: nowrap;
  }
}

/* (c) El rótulo dorado de "Trusted by travelers" pasa al verde de marca */
body.home #content .dp-trust-highlight,
body.home #content [style*="a97c34"],
body.home #content [style*="C8A96E"] {
  color: var(--dp-gold-ink) !important;
}

/* (d) Las tres fotos de los estilos de viaje tenían alturas distintas y la
   fila quedaba desigual. Misma proporción para las tres. */
body.home #content .uagb-block-3be91077 .wp-block-column figure,
body.home #content .dp-style-card-image {
  height: auto !important;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--dp-r);
}

body.home #content .uagb-block-3be91077 .wp-block-column img,
body.home #content .dp-style-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================================
   ESCALA TIPOGRÁFICA DE LA PORTADA

   Tenía quince tamaños distintos. Quedan los mismos siete escalones que usa
   el resto del sitio:

     34 → 62 px   portada
     25 → 40 px   títulos de sección
     18,5 → 21 px subtítulos y nombres de tarjeta
     16,5 → 17,5  frases de entrada
     16 px        cuerpo
     13,5 px      rótulos y botones
     11,5 px      versalitas
   ============================================================================ */

body.home #content .wp-block-cover .uagb-heading-text,
body.home #content .wp-block-cover h1 {
  font-size: clamp(34px, 4.6vw, 62px) !important;
}

body.home #content .entry-content h2,
body.home #content .uagb-heading-text:not(.wp-block-cover .uagb-heading-text) {
  font-size: clamp(25px, 2.8vw, 38px) !important;
}

body.home #content .entry-content h3,
body.home #content .entry-content h4,
body.home #content .uagb-ifb-title,
body.home #content .dp-real-map-section h3,
body.home #content .wp-block-column strong:first-child {
  font-size: clamp(17px, 1.45vw, 18.5px) !important;
}

body.home #content .uagb-desc-text,
body.home #content .dp-real-map-subtitle,
body.home #content .wp-block-uagb-advanced-heading + p {
  font-size: clamp(16.5px, 1.25vw, 17.5px) !important;
}

body.home #content .entry-content p,
body.home #content #rank-math-faq .rank-math-answer p,
body.home #content .dp-real-map-section p {
  font-size: clamp(16px, 1.05vw, 16.5px) !important;
}

body.home #content .wp-block-button__link,
body.home #content .uagb-buttons-repeater.wp-block-button__link,
body.home #content .uagb-button__link,
body.home #content .wp-block-cover p strong {
  font-size: 13.5px !important;
}

/* El cuerpo de las fichas "Why DoPatagonia" y los pies pequeños */
body.home #content .uagb-ifb-desc {
  font-size: 13.5px !important;
}

/* Últimos tamaños sueltos: el título de las tarjetas de estilo (17), el texto
   de las fichas "Why" (14) y los dos de las reseñas (13 y 12). Cada uno a su
   escalón. Quedan siete. */
body.home #content .entry-content h3,
body.home #content .entry-content h4,
body.home #content .uagb-ifb-title,
body.home #content .dp-real-map-section h3,
body.home #content .wp-block-column strong:first-child {
  font-size: 18.5px !important;
}

body.home #content .uagb-block-269282ea .uagb-ifb-desc,
body.home #content .uagb-ifb-desc {
  font-size: 13.5px !important;
}

body.home #content .dp-review-author,
body.home #content [class*="review"] .name,
body.home #content [class*="reviewer"] {
  font-size: 13.5px !important;
}

body.home #content [class*="avatar"],
body.home #content [class*="initial"] {
  font-size: 11.5px !important;
}


/* ============================================================================
   RESTOS DE PALETA VIEJA EN LOS BLOQUES DE HTML A MANO

   El mapa y el carrusel de reseñas se escribieron con sus propios colores:
   un verde distinto (#2D5016), el dorado antiguo (#C8A96E), grises fríos
   (#666, #F5F7F9, #E0DDD8) y tres tonos de aviso en los avatares. Se alinean
   todos con el logo.
   ============================================================================ */

/* Mapa: puntos y textos */
body.home #content .dp-map-dot {
  background-color: var(--dp-gold-ink) !important;
}

body.home #content .dp-map-dot.chile {
  background-color: var(--dp-green) !important;
}

body.home #content .dp-map-list,
body.home #content .dp-real-map-section [style*="E0DDD8"] {
  border-color: var(--dp-line) !important;
}

body.home #content .dp-real-map-section p {
  color: var(--dp-ink-soft) !important;
}

/* Banda "Why DoPatagonia": el gris azulado pasa a arena */
body.home #content .uagb-block-269282ea,
body.home #content .wp-block-columns.has-ast-global-color-4-background-color {
  background-color: var(--dp-sand) !important;
}

/* Reseñas: rótulo dorado, avatares y mandos */
body.home #content .dp-reviews__title span,
body.home #content span[style*="C8A96E"] {
  color: var(--dp-gold-ink) !important;
}

body.home #content .dp-reviews__avatar {
  background-color: var(--dp-sand-deep) !important;
  color: var(--dp-green) !important;
}

body.home #content .dp-reviews__btn {
  border-color: var(--dp-line) !important;
  color: var(--dp-green) !important;
}

body.home #content .dp-reviews__btn:hover {
  border-color: var(--dp-gold-ink) !important;
}

/* Las estrellas se quedan en dorado: es el color con el que todo el mundo
   reconoce una valoración, y el logotipo de Google conserva los suyos. */

/* Últimos restos en la portada */
body.home #content .wp-block-column.has-ast-global-color-4-background-color,
body.home #content [class*="has-ast-global-color-4-background-color"] {
  background-color: var(--dp-sand) !important;
}

body.home #content .dp-reviews__badge-text {
  color: var(--dp-ink-soft) !important;
}

/* La banda de preguntas frecuentes seguía en gris azulado */
body.home #content .uagb-block-f107aa69 {
  background-color: var(--dp-sand) !important;
}

/* Tamaños sueltos del bloque de reseñas y de las fichas "Why" */
body.home #content .uagb-ifb-title {
  font-size: 18.5px !important;
}

body.home #content .dp-reviews__card-stars,
body.home #content [class*="stars"] {
  font-size: 13.5px !important;
}

body.home #content .dp-reviews__card-name,
body.home #content .dp-reviews__author span,
body.home #content .dp-reviews__card span {
  font-size: 13.5px !important;
}


/* ============================================================================
   LO NUEVO DE ESTA PASADA
   ----------------------------------------------------------------------------
   1. Portada: un titular que dice qué se vende y dónde, más largo que el
      anterior, así que necesita su propia medida.
   2. Destinos del mapa: ahora son enlaces a los programas que pasan por allí.
   3. El formulario, que antes no existía en la portada.
   ============================================================================ */

/* ---- 1. Titular de portada ---------------------------------------------------
   "Torres del Paine treks and Patagonia journeys, planned by locals" ocupa más
   que la frase anterior. Se le da una medida de lectura para que rompa en dos
   o tres líneas y no en cinco. */

body.home #content .wp-block-cover h1,
body.home #content .wp-block-cover .uagb-heading-text {
  max-width: 17ch;
  text-wrap: balance;
}

@media (max-width: 781px) {
  body.home #content .wp-block-cover h1,
  body.home #content .wp-block-cover .uagb-heading-text {
    max-width: 100%;
  }
}

/* ---- 2. Destinos del mapa ----------------------------------------------------
   La lista se genera ahora en PHP leyendo los propios programas. Cada destino
   es un enlace, y hace falta que se note que lo es. */

body.home #content .dp-map-list {
  background: #FFFFFF;
  border: 1px solid var(--dp-line);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 4px;
  align-content: start;
}

body.home #content .dp-map-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease;
}

body.home #content .dp-map-item--enlace {
  cursor: pointer;
}

body.home #content .dp-map-item--enlace:hover,
body.home #content .dp-map-item--enlace:focus-visible {
  background: var(--dp-sand);
}

body.home #content .dp-map-item--enlace:focus-visible {
  outline: 2px solid var(--dp-cta);
  outline-offset: 2px;
}

body.home #content .dp-map-item__cuerpo {
  display: block;
}

body.home #content .dp-map-item__nombre {
  display: block;
  margin: 0 0 3px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: 18.5px !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--dp-ink);
}

body.home #content .dp-map-item--enlace:hover .dp-map-item__nombre {
  color: var(--dp-green);
}

body.home #content .dp-map-item__texto {
  display: block;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--dp-ink-soft);
}

/* El pie dice cuántos programas pasan por ahí. Sale de leer los programas de
   verdad: si no hay ninguno, no se escribe nada y el destino no es enlace. */
/* En el teléfono el nombre del programa ocupa dos líneas y la flecha se
   quedaba colgando a la derecha. Que fluya con el texto. */
body.home #content .dp-map-item__pie {
  display: block;
  text-wrap: pretty;
  margin-top: 6px;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dp-cta);
}

body.home #content .dp-map-item__flecha {
  display: inline-block;
  margin-left: 5px;
  transition: transform .16s ease;
}

body.home #content .dp-map-item--enlace:hover .dp-map-item__flecha {
  transform: translateX(3px);
}

body.home #content .dp-map-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  body.home #content .dp-map-item,
  body.home #content .dp-map-item__flecha {
    transition: none;
  }
}

/* ---- 3. Bloque de reseñas ----------------------------------------------------
   El aspecto lo pone resenas.css, que es común a todo el sitio. Aquí solo se
   le quita a Astra el ancho que le impondría. */

body.home #content .uagb-block-7fa10c21 .uagb-container-inner-blocks-wrap {
  max-width: 1120px;
  margin-inline: auto;
}

/* ---- 4. Formulario de la portada ---------------------------------------------
   El detalle del formulario está en formulario.css, que es el archivo común a
   las tres páginas que lo llevan. Aquí solo el destino del ancla: la cabecera
   fija tapaba el titular al saltar desde un botón. */

body.home #get-in-touch {
  scroll-margin-top: 90px;
}

/* Las reglas de tamaño de la portada alcanzan a cualquier <p>, y el texto de
   la reseña es un <p>. Se le devuelve el suyo, que es el mismo escalón que
   usa el bloque en el resto del sitio. */
body.home #content .dp-resena__texto {
  font-size: 16.5px !important;
}

body.home #content .dp-resenas__meta,
body.home #content .dp-resena__firma strong {
  font-size: 13.5px !important;
}

body.home #content .dp-resenas__total,
body.home #content .dp-resena__firma span,
body.home #content .dp-resena__estrellas {
  font-size: 13.5px !important;
}

body.home #content .dp-resena__inicial {
  font-size: 11.5px !important;
}

/* El titular del formulario cae sobre el panel azul, y la regla general de la
   portada lo pintaba de verde: ilegible. Mismo caso que el párrafo de debajo,
   que además heredaba la serif de los subtítulos. */
body.home #content #get-in-touch h2,
body.home #content #get-in-touch .uagb-heading-text {
  color: #FFFFFF !important;
}

body.home #content #get-in-touch .wp-block-uagb-advanced-heading + p,
body.home #content #get-in-touch p.has-small-font-size {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  color: #FFFFFF !important;
  max-width: 460px;
  margin-inline: auto;
}

/* ---- Dos tamaños que se habían escapado de la escala -------------------------
   Las preguntas frecuentes venían en 17 px, un escalón que no existe en el
   resto del sitio; y el asterisco de "campo obligatorio" en 13. */

body.home #content .rank-math-question,
body.home #content #rank-math-faq .rank-math-question {
  font-size: 18.5px !important;
}

body.home #content .dp-booking label span {
  font-size: 11.5px !important;
}

/* ---- Tarjetas de estilo de viaje: los tres botones a la misma altura ---------
   Los textos miden distinto, así que cada botón caía donde acababa su párrafo
   y los tres quedaban a tres alturas. La columna pasa a ser una caja vertical
   y el botón se empuja al fondo. */

body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column {
  display: flex;
  flex-direction: column;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column > p {
  flex: 1 1 auto;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column > .wp-block-uagb-buttons {
  margin-top: auto;
  padding-top: 6px;
}

/* ---- Destinos del mapa: en dos columnas --------------------------------------
   Seis destinos uno debajo de otro hacían una columna larguísima, sobre todo
   en el teléfono, donde la lista va debajo del mapa. Se reparten en dos, y el
   texto de cada uno se recorta a dos renglones: lo que importa es el nombre y
   a qué programa lleva. */

@media (max-width: 1023px) {
  body.home #content .dp-map-list {
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
  }

  body.home #content .dp-map-item {
    padding: 11px 8px;
    grid-template-columns: 11px minmax(0, 1fr);
    gap: 9px;
    /* Sin esto, el nombre del programa en un solo renglón imponía un ancho
       mínimo mayor que la columna y la segunda fila se salía por la derecha. */
    min-width: 0;
  }

  body.home #content .dp-map-item__cuerpo {
    min-width: 0;
  }

  body.home #content .dp-map-item__nombre {
    font-size: 17px !important;
  }

  /* En dos columnas no cabe la descripción sin cortarla a la mitad, y media
     frase con puntos suspensivos no informa de nada. Se queda lo que decide:
     el nombre del destino y a dónde lleva. La descripción sigue estando en el
     escritorio, donde hay sitio. */
  body.home #content .dp-map-item__texto {
    display: none;
  }

  body.home #content .dp-map-item__pie {
    display: block;
    white-space: normal;
    font-size: 11.5px !important;
    line-height: 1.35;
    margin-top: 4px;
  }
}

/* En pantallas muy estrechas dos columnas aprietan demasiado: vuelve a una. */
@media (max-width: 379px) {
  body.home #content .dp-map-list {
    grid-template-columns: 1fr;
  }
}

/* ---- La entradilla de las preguntas frecuentes -------------------------------
   "Clear answers about guided and self-guided trips…" no es la bajada del
   bloque de titular, es un párrafo suelto. WordPress da a los párrafos sueltos
   el ancho estrecho y centrado del contenido, mientras que el titular va a lo
   ancho: por eso empezaban en sitios distintos. Se alinea con su titular. */

body.home #content .uagb-block-f7c17eb2 + p {
  margin-inline: 0 auto !important;
  max-width: 62ch;
  text-align: left;
}

/* Las preguntas frecuentes se probaron en dos columnas y se volvió atrás: se
   quedan como estaban, una debajo de otra. Lo único que cambia de ese bloque
   es la alineación de su entradilla, unas líneas más arriba. */

/* Dos redacciones del pie del destino: el nombre del programa donde hay sitio,
   y "View program" en el teléfono, donde la lista va a dos columnas. */
body.home #content .dp-map-item__pie-corto { display: none; }

@media (max-width: 1023px) {
  body.home #content .dp-map-item__pie-largo { display: none; }
  body.home #content .dp-map-item__pie-corto { display: inline; }
}

@media (max-width: 379px) {
  body.home #content .dp-map-item__pie-largo { display: inline; }
  body.home #content .dp-map-item__pie-corto { display: none; }
  body.home #content .dp-map-item__texto { display: block; }
}

/* ---- "Why DoPatagonia": las cuatro razones, en una línea ---------------------
   Con el icono al lado, al título le quedaban 200 px y dos de los cuatro
   ("Routes checked in person", "Itineraries that make sense") se partían en
   dos renglones: sus textos arrancaban más abajo y la fila se veía desigual.

   El icono pasa arriba. El título dispone entonces del ancho completo de la
   columna, entra en un renglón, y las cuatro razones quedan alineadas. */

@media (min-width: 782px) {
  body.home #content .wp-block-columns:has(.uagb-infobox__content-wrap) .uagb-infobox__content-wrap {
    display: block;
  }

  body.home #content .uagb-infobox__content-wrap .uagb-ifb-icon-wrap {
    margin: 0 0 10px !important;
    float: none !important;
  }

  body.home #content .uagb-infobox__content-wrap .uagb-ifb-content {
    padding-left: 0 !important;
  }

  body.home #content .uagb-ifb-title {
    font-size: 17px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Si alguna vez un título no cupiera, más vale que se encoja un punto a que
     se parta y descoloque la fila otra vez. */
  @supports (font-size: clamp(1px, 1vw, 2px)) {
    body.home #content .uagb-ifb-title {
      font-size: clamp(15px, 1.2vw, 17px) !important;
    }
  }

  body.home #content .uagb-ifb-desc {
    margin-top: 4px !important;
  }
}

/* En el teléfono las cuatro razones se apilaban: dos y dos ocupan la mitad. */
@media (max-width: 781px) {
  body.home #content .wp-block-columns:has(.uagb-infobox__content-wrap) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
  }

  body.home #content .wp-block-columns:has(.uagb-infobox__content-wrap) > .wp-block-column {
    flex-basis: auto !important;
    margin: 0 !important;
  }

  body.home #content .uagb-infobox__content-wrap {
    display: block;
  }

  body.home #content .uagb-infobox__content-wrap .uagb-ifb-icon-wrap {
    margin: 0 0 8px !important;
  }

  body.home #content .uagb-infobox__content-wrap .uagb-ifb-content {
    padding-left: 0 !important;
  }

  body.home #content .uagb-ifb-title {
    font-size: 16px !important;
    line-height: 1.22;
  }
}

/* ---- Antetítulos y etiquetas -------------------------------------------------
   Idea tomada de haciendola.com: cada sección abre con una línea pequeña en
   mayúsculas que dice de qué va, y cada opción lleva una etiqueta que responde
   "¿esta soy yo?". Es lo que separa "Where do I start" de la parrilla de
   programas: una dice qué se compra, la otra cuál te toca. */

body.home #content .dp-antetitulo {
  display: block;
  margin: 0 0 8px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-gold-ink) !important;
}

body.home #content .dp-etiqueta {
  display: inline-block;
  /* La columna es una caja vertical y estiraba la etiqueta de lado a lado;
     tiene que medir lo que mide su texto. */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px !important;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--dp-sand-deep);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dp-green) !important;
  line-height: 1.5;
}

/* La primera de las tres es la más pedida: se nota, pero sin gritar. */
body.home #content .wp-block-column:first-child .dp-etiqueta {
  background: var(--dp-green);
  color: #FFFFFF !important;
}

/* ---- "Choose your Patagonia travel style", sin fotos -------------------------
   PRUEBA, 12 de septiembre. Para deshacerla basta con borrar este bloque: el
   contenido de la página no se ha tocado, solo se deja de enseñar la foto.

   Por qué: con los programas y el mapa ya arriba, esta era la TERCERA rejilla
   de tarjetas con foto de la misma página, y las tres se parecían. Aquí la
   pregunta no es "¿cuál compro?" (eso lo contestan las tarjetas de programa,
   que llevan precio), sino "¿cuál soy yo?". Para eso no hace falta foto: hace
   falta una etiqueta, un nombre y una línea.

   Lo que gana la página: unos 600 px menos y una repetición menos. */

body.home #content .wp-block-columns:has(.dp-style-card-image) .dp-style-card-image {
  display: none;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column {
  padding: 22px 22px 20px !important;
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r);
  background: #FFFFFF;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column > h3 {
  margin: 0 0 8px !important;
}

/* :not(.dp-etiqueta) porque la etiqueta también es un párrafo, y esta regla
   le estaba pisando el color: texto gris sobre verde oscuro, ilegible. */
body.home #content .wp-block-columns:has(.dp-style-card-image) > .wp-block-column > p:not(.dp-etiqueta) {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--dp-ink-soft) !important;
}

/* El botón azul macizo competía con el de las tarjetas de programa. Aquí basta
   con un enlace: es un paso intermedio, no el final del embudo. */
body.home #content .wp-block-columns:has(.dp-style-card-image) .wp-block-uagb-buttons {
  margin-top: 4px !important;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) .wp-block-button__link {
  padding: 0 !important;
  line-height: 1.4 !important;
  background: none !important;
  border: 0 !important;
  color: var(--dp-cta) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 0 !important;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) .wp-block-button__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El texto vive en un <div> dentro del enlace, y ese div llevaba el blanco
   del botón macizo: al quitar el fondo azul se quedó blanco sobre blanco,
   invisible. Hay que pintar el hijo, no solo el enlace. */
body.home #content .wp-block-columns:has(.dp-style-card-image) .uagb-button__link {
  color: var(--dp-cta) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.home #content .wp-block-columns:has(.dp-style-card-image) .uagb-button__link::after {
  content: " →";
}

/* Alineado a la izquierda como el resto de la ficha, no centrado. */
body.home #content .wp-block-columns:has(.dp-style-card-image) .uagb-buttons__wrap {
  justify-content: flex-start !important;
}

/* ---- La línea de actividades -------------------------------------------------
   Natalia hace bastante más que trekking —navegaciones, estancia, pingüineras,
   caminatas cortas, kayak— y en la portada no se veía. Pero no cabía otra
   sección: la portada ya es larga y el 59 % no pasa del primer cuarto.

   Así que va como UNA LÍNEA debajo del subtítulo de los programas. Ocupa 30 px
   y nombra las nueve cosas. No es una sección: es una etiqueta de contenido. */

body.home #content .dp-actividades {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 7px;
  /* WordPress centra los párrafos sueltos; esta línea va alineada con el
     titular de su sección, como todo lo demás. */
  margin: 14px auto 0 0 !important;
  padding: 0;
  max-width: none;
  text-align: left;
}

body.home #content .dp-actividades span {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--dp-line);
  border-radius: 999px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dp-ink-soft);
  background: #FFFFFF;
  white-space: nowrap;
}

@media (max-width: 781px) {
  body.home #content .dp-actividades {
    gap: 5px 6px;
    margin-top: 12px !important;
  }
  body.home #content .dp-actividades span { padding: 3px 9px; }
}

/* ============================================================================
   LAS NOTAS DE TEXTO

   Natalia quería sacar las preguntas frecuentes de la portada, pero sin perder
   lo que decían. En vez de un acordeón de seis preguntas al final, su
   contenido se reparte como dos párrafos cortos en los sitios donde había
   mucho hueco y poco texto: debajo de los programas y debajo del mapa.

   Para Google es el mismo contenido, y para quien lee es una frase en su
   sitio en vez de seis desplegables que nadie abría (Clarity: cero
   interacciones con las preguntas en doce grabaciones).
   ============================================================================ */

body #content .dp-nota {
  max-width: 760px;
  margin: 22px auto 0 !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #55534E !important;
  text-align: center;
}

@media (max-width: 780px) {
  body #content .dp-nota { text-align: left; font-size: 14px !important; }
}

/* ============================================================================
   EL FORMULARIO DEL FINAL DE LA PORTADA

   Estaba roto y no se veía hasta quitar el express de arriba: el contenedor
   tenía flex-direction: row, así que el titular, el párrafo y el formulario se
   repartían el ancho en tres columnas de 154 px cada una. El resultado eran
   campos cortados a media palabra ("Roughly when? For exar") y media banda
   azul vacía a la izquierda.

   Se arregla poniéndolo en columna, que es como está en Contact Us y en
   Quiénes somos, donde el mismo bloque siempre se vio bien.
   ============================================================================ */

#content #get-in-touch > .uagb-container-inner-blocks-wrap {
  flex-direction: column !important;
  align-items: center !important;
  max-width: 760px !important;
  margin-left: auto;
  margin-right: auto;
}

#content #get-in-touch .wp-block-uagb-advanced-heading,
#content #get-in-touch > .uagb-container-inner-blocks-wrap > p,
#content #get-in-touch .wp-block-contact-form-7-contact-form-selector {
  width: 100% !important;
  max-width: 100% !important;
}

#content #get-in-touch .uagb-heading-text,
#content #get-in-touch > .uagb-container-inner-blocks-wrap > p {
  text-align: center !important;
}

#content #get-in-touch .uagb-heading-text {
  margin-bottom: 8px !important;
}

/* ============================================================================
   LOS BOTONES DEL HERO: EL QUE SE BORRABA AL TOCARLO

   EL FALLO: Spectra genera, para el botón de contorno del hero, estas dos
   reglas propias:

       .uagb-block-a414e130 .uagb-buttons-repeater:hover  .uagb-button__link { color: var(--ast-global-color-2) }
       .uagb-block-a414e130 .uagb-buttons-repeater:focus  .uagb-button__link { color: var(--ast-global-color-2) }

   y otra que pone el borde en #333. Ese color es el azul marino oscuro del
   tema. Sobre una foto oscura, texto oscuro y borde oscuro = no se ve nada.

   En el ordenador el efecto dura lo que dura el ratón encima. EN EL MÓVIL NO:
   al tocar, el :focus SE QUEDA PEGADO, así que el botón se queda vacío. Eso
   es lo que Natalia vio: "cuando la toco se borra todo".

   LA SOLUCIÓN: al tocarlo se rellena de blanco y las letras se van al azul
   profundo. Se invierte, que es lo que un botón de contorno tiene que hacer, y
   se ve siempre.
   ============================================================================ */

#content .wp-block-cover .uagb-buttons-repeater:hover,
#content .wp-block-cover .uagb-buttons-repeater:focus,
#content .wp-block-cover .uagb-buttons-repeater:focus-visible,
#content .wp-block-cover .uagb-buttons-repeater:active {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

#content .wp-block-cover .uagb-buttons-repeater:hover .uagb-button__link,
#content .wp-block-cover .uagb-buttons-repeater:focus .uagb-button__link,
#content .wp-block-cover .uagb-buttons-repeater:focus-visible .uagb-button__link,
#content .wp-block-cover .uagb-buttons-repeater:active .uagb-button__link,
#content .wp-block-cover .uagb-buttons-repeater:hover,
#content .wp-block-cover .uagb-buttons-repeater:focus {
  color: #10384F !important;
}

#content .wp-block-cover .uagb-buttons-repeater:hover .uagb-button__icon > svg,
#content .wp-block-cover .uagb-buttons-repeater:focus .uagb-button__icon > svg {
  fill: #10384F !important;
}

/* Y que se vea por dónde va el teclado. */
#content .wp-block-cover .uagb-buttons-repeater:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 3px;
}


/* === dopat-formulario (formulario.css) === */
/* ============================================================================
   DoPatagonia — El formulario de consulta

   ARCHIVO ÚNICO para las tres páginas que lo llevan: la portada, el catálogo
   y la ficha de programa. Se carga el último, así que manda sobre lo que
   hubiera antes. Si mañana el formulario aparece en otra página, se añade su
   id a los selectores de aquí y ya.

   Diseño: banda azul suave, ficha blanca encima, campos en dos columnas, y
   todo lo más compacto posible sin apretar los objetivos táctiles.
   ============================================================================ */

body.dp-form #content .uagb-block-9b0d69d2 .wpcf7 {
  max-width: 620px;
  margin: 20px auto 0;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 20px 44px -26px rgba(0, 0, 0, .5);
}

@media (max-width: 781px) {
  body.dp-form #content .uagb-block-9b0d69d2 .wpcf7 {
    padding: 16px 14px 14px;
  }
}

/* ---- Dos columnas -----------------------------------------------------------
   OJO con el selector: la sección se llama .dp-booking y está DENTRO del <form>,
   no al revés. ".dp-booking form section" no casa con nada; el bueno es
   ".wpcf7-form section". Con el equivocado el formulario se veía en una sola
   columna y midiendo 900 px de alto. */

body.dp-form #content .wpcf7-form section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  justify-items: stretch !important;
  align-items: start;
}

@media (max-width: 620px) {
  body.dp-form #content .wpcf7-form section {
    grid-template-columns: 1fr;
  }
}

body.dp-form #content .dp-booking .form-inner {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 8px !important;
}

/* El mensaje, el antispam y el botón ocupan las dos columnas */
body.dp-form #content .dp-booking .form-inner.mb-30,
body.dp-form #content .dp-booking .form-inner:has(textarea),
body.dp-form #content .dp-booking .form-inner:has(button),
body.dp-form #content .dp-booking .form-inner:has(.wpcf7-turnstile),
body.dp-form #content .dp-booking .form-note {
  grid-column: 1 / -1;
}

body.dp-form #content .dp-booking .form-inner p,
body.dp-form #content .dp-booking .wpcf7-form-control-wrap,
body.dp-form #content .wpcf7 p {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Etiquetas y campos ------------------------------------------------------ */

body.dp-form #content .dp-booking label {
  display: block;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 12.5px !important;
  font-weight: 600;
  color: #2C2C2C !important;
  margin-bottom: 3px !important;
}

body.dp-form #content .dp-booking label span {
  font-weight: 400;
  color: #55534E !important;
}

body.dp-form #content .dp-booking input,
body.dp-form #content .dp-booking select {
  height: 42px !important;
  padding: 6px 11px !important;
  border-radius: 9px !important;
  background-color: #FAF9F7 !important;
  border: 1px solid #E3DED4 !important;
  /* 16 px es el mínimo: por debajo, iOS amplía la página al enfocar. */
  font-size: 16px !important;
}

body.dp-form #content .dp-booking textarea {
  height: 76px !important;
  min-height: 0 !important;
  padding: 9px 11px !important;
  border-radius: 9px !important;
  background-color: #FAF9F7 !important;
  border: 1px solid #E3DED4 !important;
  font-size: 16px !important;
  width: 100% !important;
}

/* El texto de ejemplo va más chico que lo que se escribe. Se puede porque iOS
   mide el tamaño del campo, no el del texto de ejemplo. */
body.dp-form #content .dp-booking ::placeholder {
  font-size: 13px !important;
  color: #9A968E !important;
  opacity: 1;
}

body.dp-form #content .dp-booking input:focus,
body.dp-form #content .dp-booking select:focus,
body.dp-form #content .dp-booking textarea:focus {
  background-color: #FFFFFF !important;
  border-color: #0E5F94 !important;
  box-shadow: 0 0 0 3px rgba(14, 95, 148, .16) !important;
}

/* ---- Botón y nota ------------------------------------------------------------ */

body.dp-form #content .dp-booking button[type="submit"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 44px;
  margin-top: 4px;
  border-radius: 9px !important;
  background-color: #0E5F94 !important;
  color: #FFFFFF !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: .05em;
}

body.dp-form #content .dp-booking button[type="submit"]:hover {
  background-color: #1272B0 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(14, 95, 148, .75);
}

body.dp-form #content .dp-booking .form-note {
  font-size: 12.5px !important;
  color: #55534E !important;
  margin-top: 10px;
}

body.dp-form #content .dp-booking .wpcf7-turnstile {
  min-height: 0 !important;
  margin: 8px 0;
}

/* ---- La banda que lo rodea --------------------------------------------------- */

body.dp-form #content .uagb-block-9b0d69d2 {
  padding-top: 44px !important;
  padding-bottom: 52px !important;
}

body.dp-form #content .uagb-block-9b0d69d2 .uagb-heading-text {
  font-size: clamp(22px, 2.2vw, 28px) !important;
}

body.dp-form #content .uagb-block-9b0d69d2 .wp-block-uagb-advanced-heading + p {
  font-size: 13.5px !important;
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  color: rgba(255, 255, 255, .92) !important;
}


/* ============================================================================
   LA BANDA AZUL

   Estaba escrita en programas.css, acotada al catálogo. Al llevar el
   formulario a la portada apareció con el azul plano del bloque en vez del
   degradado, y se vio el problema: el aspecto de la banda vivía en la hoja de
   otra página. Aquí queda para las tres, y como esta hoja se carga la última,
   es la que manda.
   ============================================================================ */

body.dp-form #content .uagb-block-9b0d69d2 {
  background: linear-gradient(180deg, #17486A 0%, #123E56 100%) !important;
  padding-top: 44px !important;
  padding-bottom: 52px !important;
  /* A los dos bordes: si no, queda como una caja con márgenes. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body.dp-form #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

body.dp-form #content .uagb-block-9b0d69d2 .uagb-heading-text {
  color: #FFFFFF !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
}

body.dp-form #content .uagb-block-9b0d69d2 .wp-block-uagb-advanced-heading + p,
body.dp-form #content .uagb-block-9b0d69d2 p.has-small-font-size {
  color: rgba(255, 255, 255, .92) !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}


/* ---- Contraste del texto de ejemplo ------------------------------------------
   Los ejemplos de dentro de los campos ("Example: 2 adults, 3 friends") estaban
   en un gris de 2,8:1 sobre el fondo del campo: por debajo del mínimo legible.
   Llevan información útil, así que se oscurecen hasta 5,1:1. */

body.dp-form #content .dp-booking ::placeholder {
  color: #6E6A63 !important;
  opacity: 1;
}


/* ============================================================================
   EL FORMULARIO CORTO

   El largo vive al final de la página y, según Clarity, ahí llega 1 de cada
   10 visitas. Este es el MISMO formulario —mismo correo, mismos campos
   ocultos, misma redirección— con dos campos escondidos y puesto arriba,
   donde sí está la gente.

   Nombre, correo y fechas. Con eso Natalia ya puede contestar; el resto se
   pregunta respondiendo.
   ============================================================================ */

body #content .dp-form-corto .wpcf7 {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Los dos campos que sobran aquí, y el pie. Siguen en el HTML y se envían
   vacíos: por eso tuvieron que dejar de ser obligatorios. */
body #content .dp-form-corto .form-inner:has(textarea),
body #content .dp-form-corto .form-inner:has([name="group-size"]),
body #content .dp-form-corto .form-note {
  display: none !important;
}

/* En una línea: tres campos y el botón. */
body #content .dp-form-corto .dp-booking {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

body #content .dp-form-corto .form-inner {
  margin: 0 !important;
  min-width: 0;
}

body #content .dp-form-corto .form-inner:has(button) {
  grid-column: auto;
}

body #content .dp-form-corto label {
  display: block;
  margin-bottom: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82) !important;
}

/* Solo el asterisco de "obligatorio", que en el corto sobra. El texto de las
   casillas también vive dentro de un <span> y no se puede tocar. */
body #content .dp-form-corto .form-inner > label > span { display: none; }

body #content .dp-form-corto .dp-elige .wpcf7-list-item-label { display: inline !important; }

body #content .dp-form-corto input[type="text"],
body #content .dp-form-corto input[type="email"] {
  height: 46px !important;
  min-height: 46px !important;
  width: 100% !important;
  border-radius: 10px !important;
}

body #content .dp-form-corto button[type="submit"] {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 26px !important;
  white-space: nowrap;
}

/* El captcha ocupa sitio aunque sea invisible. */
body #content .dp-form-corto .wpcf7-turnstile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body #content .dp-form-corto .wpcf7-response-output {
  margin: 12px 0 0 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .5) !important;
}

@media (max-width: 900px) {
  body #content .dp-form-corto .dp-booking {
    grid-template-columns: 1fr 1fr;
  }
  body #content .dp-form-corto .form-inner:has(button) {
    grid-column: 1 / -1;
  }
  body #content .dp-form-corto button[type="submit"] { width: 100% !important; }
}

@media (max-width: 560px) {
  body #content .dp-form-corto .dp-booking {
    grid-template-columns: 1fr;
  }
}

/* El texto que acompaña al formulario corto. */
body #content .dp-form-corto .dp-form-corto__gancho {
  margin: 0 0 14px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 15px !important;
  line-height: 1.45;
  color: rgba(255, 255, 255, .9) !important;
  text-align: center;
}

body #content .dp-form-corto .dp-form-corto__gancho strong {
  color: #FFFFFF !important;
}

body #content .dp-form-corto > .uagb-container-inner-blocks-wrap {
  max-width: 1120px;
  margin-inline: auto;
}

/* ---- Ajustes finos del formulario corto --------------------------------------
   Las reglas del formulario largo llevan .page-id-XXXX y ganan por
   especificidad, así que aquí hacen falta unos cuantos !important. Se han
   dejado los mínimos: el ancho del botón, los márgenes que sobran y la altura
   de cada campo. */

body #content .dp-form-corto .form-inner:has(button) {
  grid-column: auto !important;
  margin-bottom: 0 !important;
}

body #content .dp-form-corto .form-inner {
  margin-bottom: 0 !important;
}

/* El <p> que Contact Form 7 mete alrededor de cada campo traía 25 px de aire
   por debajo: en un formulario de una línea eso son 25 px de más. */
body #content .dp-form-corto .form-inner p {
  margin: 0 !important;
}

body #content .dp-form-corto label {
  min-height: 0 !important;
  line-height: 1.3 !important;
}

/* El botón tiene que quedar a la altura de los campos, no del texto. */
body #content .dp-form-corto .form-inner:has(button) p {
  margin: 0 !important;
}


/* ============================================================================
   LAS CASILLAS DE "¿CUÁNDO?"

   En vez de escribir la fecha, se toca una casilla. Contact Form 7 las pinta
   como casillas de toda la vida; aquí se convierten en pastillas, que en un
   teléfono se aciertan con el dedo sin apuntar.

   La casilla de verdad sigue ahí, invisible pero funcionando: así el teclado
   y los lectores de pantalla siguen entendiéndolo como lo que es.
   ============================================================================ */

body #content .dp-elige .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body #content .dp-elige .wpcf7-list-item {
  margin: 0 !important;
}

body #content .dp-elige .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 16px;
  border: 1px solid var(--dp-linea-form, #DDD8CE);
  border-radius: 999px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2C2C2C !important;
  transition: border-color .15s ease, background-color .15s ease;
}

body #content .dp-elige .wpcf7-list-item label:hover {
  border-color: #2C4A26;
  background: #F7F5F2;
}

/* El cuadradito: se dibuja aquí, no lo pinta el navegador. */
body #content .dp-elige input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 !important;
  border: 1.5px solid #C9C2B4;
  border-radius: 5px;
  background: #FFFFFF;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

body #content .dp-elige input[type="checkbox"]:checked {
  background: #2C4A26;
  border-color: #2C4A26;
}

body #content .dp-elige input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body #content .dp-elige .wpcf7-list-item:has(:checked) label {
  border-color: #2C4A26;
  background: #EFEAE2;
}

body #content .dp-elige input[type="checkbox"]:focus-visible {
  outline: 2px solid #0E5F94;
  outline-offset: 2px;
}

body #content .dp-elige .wpcf7-list-item-label {
  line-height: 1.2;
}

/* ---- Dentro del formulario corto ---------------------------------------------- */

/* Las fechas exactas no se piden arriba: eso es del formulario largo. */
body #content .dp-form-corto .dp-fechas {
  display: none !important;
}

/* Las casillas van en su propia fila, encima de los tres campos. */
body #content .dp-form-corto .dp-elige {
  grid-column: 1 / -1;
  margin-bottom: 4px !important;
}

/* Las casillas arriba y los tres campos debajo, SOLO donde hay más de una
   columna. En el teléfono la rejilla es de una columna y forzar filas metía
   los tres campos en la misma: salía una letra por renglón. */
@media (min-width: 561px) {
  body #content .dp-form-corto .dp-elige { grid-row: 1; }
  body #content .dp-form-corto .form-inner:not(.dp-elige) { grid-row: 2; }
}

/* En una columna, cada campo ocupa su propia fila y todo el ancho. */
@media (max-width: 560px) {
  body #content .dp-form-corto .form-inner {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-width: 0;
  }
  body #content .dp-form-corto .dp-elige .wpcf7-list-item > label {
    width: 100%;
  }
  body #content .dp-form-corto button[type="submit"] {
    width: 100% !important;
  }
}

body #content .dp-form-corto .dp-elige label:first-child,
body #content .dp-form-corto .dp-elige > label {
  color: rgba(255, 255, 255, .82) !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item label {
  color: #2C2C2C !important;
}

/* Ya no hay tres campos, hay dos y el botón. */
body #content .dp-form-corto .dp-booking {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
  body #content .dp-form-corto .dp-booking {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body #content .dp-form-corto .dp-booking {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #content .dp-elige .wpcf7-list-item label { transition: none; }
}

/* ---- Dos remates de las casillas ----------------------------------------------
   1. Las reglas del formulario largo dan altura fija a TODOS los input, y eso
      deformaba el cuadradito hasta convertirlo en una pastilla.
   2. Las etiquetas del corto salían en el color del formulario largo (oscuro)
      sobre el panel azul. */

body #content .dp-elige input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

body #content .dp-form-corto .form-inner > label {
  color: rgba(255, 255, 255, .85) !important;
}

/* ---- Corrección de selectores -------------------------------------------------
   Contact Form 7 envuelve cada campo en un <p>, así que la etiqueta NO es hija
   directa de .form-inner sino del <p> de dentro. Los selectores anteriores
   apuntaban un nivel más arriba y no llegaban a nada. */

body #content .dp-form-corto .form-inner p > label {
  display: block;
  margin-bottom: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85) !important;
}

/* El asterisco de obligatorio, fuera del formulario corto. */
body #content .dp-form-corto .form-inner p > label > span {
  display: none;
}

/* Las pastillas: alto de dedo y su tamaño real. Las reglas del formulario
   largo alcanzan a cualquier <label> de dentro y las aplastaban. */
body #content .dp-elige .wpcf7-list-item > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid #DDD8CE !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #2C2C2C !important;
  cursor: pointer;
}

body #content .dp-elige .wpcf7-list-item:has(:checked) > label {
  border-color: #2C4A26 !important;
  background: #EFEAE2 !important;
}

body #content .dp-elige .wpcf7-list-item-label {
  display: inline !important;
  font-size: 13.5px !important;
  color: #2C2C2C !important;
}

/* El cuadradito salía 22 px de ancho por 17 de alto: en una caja flexible hay
   que fijarle también la base, no solo el ancho. */
body #content .dp-elige input[type="checkbox"] {
  flex: 0 0 17px !important;
}

/* ---- Los dos grupos de casillas ------------------------------------------------
   "Qué tipo de viaje" y "con quién". Se pueden marcar varias, y la etiqueta lo
   dice: alguien puede querer trekking Y comfort, o venir en pareja dentro de
   un grupo. */

body #content .dp-elige > p > label em {
  display: inline;
  margin-left: 8px;
  font-style: normal;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  opacity: .72;
}

/* En el formulario corto los dos grupos van arriba, uno debajo del otro. */
body #content .dp-form-corto .dp-elige {
  grid-column: 1 / -1;
  margin-bottom: 2px !important;
}

@media (min-width: 561px) {
  body #content .dp-form-corto .dp-elige--que { grid-row: 1; }
  body #content .dp-form-corto .dp-elige--quien { grid-row: 2; }
  body #content .dp-form-corto .form-inner:not(.dp-elige) { grid-row: 3; }
}

/* Con dos filas de pastillas encima, un poco menos de aire entre ellas. */
body #content .dp-form-corto .dp-elige .wpcf7-checkbox {
  gap: 7px;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item > label {
  min-height: 38px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item-label {
  font-size: 13px !important;
}

/* ---- Todas las pastillas del mismo tamaño --------------------------------------
   Con las pastillas al ancho de su texto, "Trekking" salía chiquitita y
   "Comfort & scenic" el doble: parecían tener distinta importancia cuando son
   la misma pregunta. Se reparten en una rejilla de columnas iguales, así que
   todas miden lo mismo diga lo que diga cada una. */

body #content .dp-elige .wpcf7-checkbox {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body #content .dp-elige .wpcf7-list-item {
  margin: 0 !important;
  min-width: 0;
}

body #content .dp-elige .wpcf7-list-item > label {
  width: 100%;
  justify-content: flex-start;
}

body #content .dp-elige .wpcf7-list-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En pantallas medianas y en el teléfono, dos y dos. */
@media (max-width: 900px) {
  body #content .dp-elige .wpcf7-checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Muy estrecho: una debajo de otra, a todo el ancho. */
@media (max-width: 400px) {
  body #content .dp-elige .wpcf7-checkbox {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Iguales sí, pero no enormes: a todo el ancho quedaban 250 px por pastilla y
   el texto perdido en la esquina. Se acota el grupo y se centra el contenido
   dentro de cada una. */
body #content .dp-elige .wpcf7-checkbox {
  max-width: 760px;
}

body #content .dp-elige .wpcf7-list-item > label {
  justify-content: center;
}

@media (max-width: 900px) {
  body #content .dp-elige .wpcf7-checkbox { max-width: none; }
}

/* ---- Cada formulario con lo suyo ------------------------------------------------
   Las casillas son SOLO del express de arriba. El formulario completo (final
   de la portada, fichas de programa y Contact Us) se queda genérico: quien
   llega ahí ya está escribiendo, no eligiendo.

   Se esconden con CSS y no se borran del formulario porque los dos comparten
   la misma plantilla; se envían vacías y ya. */

body #content .wpcf7:not(.dp-form-corto .wpcf7) .dp-elige,
body:not(.x) #content .uagb-block-9b0d69d2 .dp-elige {
  display: none !important;
}

/* Y el campo de fechas vuelve a verse en el completo. */
body #content .uagb-block-9b0d69d2 .dp-fechas {
  display: block !important;
}

/* ============================================================================
   EXPRESS: las casillas, a lo minimalista

   Las pastillas blancas sobre el azul metían ocho manchas y mucho aire muerto,
   sobre todo en el teléfono. Fuera el fondo, fuera el borde: queda el
   cuadradito y el texto en blanco, alineados en rejilla.
   ============================================================================ */

body #content .dp-form-corto .dp-elige .wpcf7-checkbox {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  max-width: none;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item > label {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100%;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item:has(:checked) > label {
  background: none !important;
  border: 0 !important;
  font-weight: 700 !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item-label {
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

/* El cuadradito, dibujado para fondo oscuro. */
body #content .dp-form-corto .dp-elige input[type="checkbox"] {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  border: 1.5px solid rgba(255, 255, 255, .55) !important;
  border-radius: 5px !important;
  background: transparent !important;
}

body #content .dp-form-corto .dp-elige input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, .9) !important;
}

body #content .dp-form-corto .dp-elige input[type="checkbox"]:checked {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* La marca, en el azul del fondo. */
body #content .dp-form-corto .dp-elige input[type="checkbox"]:checked::after {
  left: 6px;
  top: 3px;
  border-color: #17486A;
}

body #content .dp-form-corto .dp-elige input[type="checkbox"]:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px;
}

/* Menos aire entre los dos grupos y sus títulos. */
body #content .dp-form-corto .dp-elige {
  margin-bottom: 0 !important;
}

body #content .dp-form-corto .dp-elige p > label {
  margin-bottom: 9px !important;
}

body #content .dp-form-corto .dp-elige--quien p > label {
  margin-top: 16px !important;
}

@media (max-width: 900px) {
  body #content .dp-form-corto .dp-elige .wpcf7-checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
}

/* En el teléfono, todo pegado al borde izquierdo y sin cajas: es una lista. */
@media (max-width: 560px) {
  body #content .dp-form-corto .dp-elige .wpcf7-checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  body #content .dp-form-corto .dp-elige .wpcf7-list-item > label {
    min-height: 26px !important;
  }
  body #content .dp-form-corto .dp-elige .wpcf7-list-item-label {
    font-size: 13.5px !important;
  }
  /* Los campos, más juntos: sobraba medio dedo entre uno y otro. */
  body #content .dp-form-corto .form-inner:not(.dp-elige) {
    margin-bottom: 12px !important;
  }
  body #content .dp-form-corto .form-inner p > label {
    margin-bottom: 4px !important;
  }
}

/* ============================================================================
   EXPRESS, SEGUNDA PASADA: más chico y ordenado

   Natalia: "está súper mal, desordenado, los títulos no se entienden, hazlo
   más pequeño". Tenía razón en las tres cosas:

     · Los rótulos iban en versalitas espaciadas, del mismo tamaño y peso que
       un antetítulo de sección. El ojo los leía como titulares, no como el
       nombre de un campo, y por eso "no se entendía nada".
     · "WHAT KIND OF TRIP? Pick as many as you like" metía la pregunta y la
       instrucción en el mismo renglón, con el mismo aspecto.
     · Todo iba a 1.120 px de ancho y con mucho aire entre campos, así que en
       el móvil eran cuatro pantallas de formulario.

   Se carga después que todo lo anterior, así que manda.
   ============================================================================ */

/* La ficha, más estrecha: un formulario de cuatro campos no necesita
   1.120 px. */
body #content .dp-form-corto > .uagb-container-inner-blocks-wrap {
  max-width: 720px !important;
}

body #content .dp-form-corto {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* El gancho, en una línea y más chico. */
body #content .dp-form-corto .dp-form-corto__gancho {
  font-size: 14px !important;
  line-height: 1.45;
  margin: 0 auto 18px !important;
  max-width: 520px;
}

/* Los rótulos: pequeños, en minúscula y sin espaciado. Un rótulo es una
   etiqueta, no un titular. */
body #content .dp-form-corto label,
body #content .dp-form-corto .form-inner > label,
body #content .dp-form-corto .dp-elige > label,
body #content .dp-form-corto .dp-elige label:first-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, .72) !important;
  margin-bottom: 5px !important;
}

/* La instrucción de las casillas, en cursiva y aún más chica: se ve que es
   una aclaración y no parte de la pregunta. */
body #content .dp-form-corto .dp-elige > label em,
body #content .dp-form-corto .dp-elige label em {
  font-style: italic;
  font-weight: 400;
  font-size: 11px !important;
  opacity: .75;
}

/* Campos más bajos y juntos. */
body #content .dp-form-corto input[type="text"],
body #content .dp-form-corto input[type="email"] {
  height: 42px !important;
  border-radius: 8px !important;
}

body #content .dp-form-corto .form-inner {
  margin-bottom: 12px !important;
}

body #content .dp-form-corto .dp-elige {
  margin-bottom: 10px !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-checkbox {
  gap: 6px 14px !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item > label {
  min-height: 26px !important;
  font-size: 13px !important;
}

body #content .dp-form-corto .dp-elige .wpcf7-list-item-label {
  font-size: 13px !important;
}

body #content .dp-form-corto .dp-elige input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
}

body #content .dp-form-corto button[type="submit"] {
  min-height: 46px !important;
  margin-top: 4px;
}

/* Nombre y correo se quedan uno debajo del otro en el móvil: probado a dos
   columnas y a 375 px cada campo quedaba en 160 px, que es peor que el
   renglón de más. */

/* ---- El express, tercera pasada ------------------------------------------------
   Natalia: "no sure where to start ponelo como un título, ordenalo mejor, el
   botón quizás de otro color, ponerle un poco más angosto".

   El gancho era un párrafo con la pregunta en negrita al principio, así que la
   pregunta y la explicación se leían como un bloque de texto sin jerarquía.
   Ahora la pregunta es un titular de verdad y la explicación va debajo, más
   chica. */

body #content .dp-form-corto > .uagb-container-inner-blocks-wrap {
  max-width: 600px !important;
}

body #content .dp-form-corto .dp-form-corto__titulo {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-size: clamp(22px, 2.3vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em;
  color: #FFFFFF !important;
  text-align: center;
  margin: 0 0 8px !important;
}

body #content .dp-form-corto .dp-form-corto__gancho {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, .78) !important;
  margin: 0 auto 20px !important;
  max-width: 460px;
}

/* El botón: era azul sobre azul y casi no se veía. Blanco sobre la banda
   oscura es lo que más contrasta (14,9:1) y no mete un color nuevo. */
body #content .dp-form-corto button[type="submit"] {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #17486A !important;
  font-weight: 700 !important;
}

body #content .dp-form-corto button[type="submit"]:hover,
body #content .dp-form-corto button[type="submit"]:focus-visible {
  background: #EAF2F8 !important;
  border-color: #EAF2F8 !important;
  color: #0E3F5E !important;
}

/* ============================================================================
   EL FORMULARIO ESTABA DESCUADRADO Y MEDÍA DE MÁS
   Corregido el 2026-09-13, en la revisión estética de toda la web.

   LO QUE SE MIDIÓ en producción, en un teléfono de 375 px:

   1. LOS CAMPOS SE SALÍAN DE SU CAJA. El formulario medía 307 px de ancho y
      los campos 320. Trece píxeles de más, que en pantalla se veían como que
      la etiqueta estaba bien puesta y el recuadro de escribir corrido hacia
      la derecha, casi pegado al borde de la ficha.
      POR QUÉ: en todo este archivo se le daba a los campos alto, color, borde
      y esquina, pero nunca ancho. Sin ancho, el navegador usa el atributo
      size="40" que trae Contact Form 7 de fábrica, que son 40 letras, unos
      320 px. Cuando la ficha era más ancha no se notaba; en el teléfono sí.

   2. CADA FILA MEDÍA 122 px PARA 68 px DE CONTENIDO. Los 54 restantes salían
      de dos sitios: un <br> que Contact Form 7 mete entre la etiqueta y el
      campo (una línea entera en blanco, 26 px) y el margen de abajo del <p>
      que envuelve a los dos (25,6 px). Con cinco campos, 270 px de nada.

   3. ARRIBA SOBRABAN 20 px del <fieldset> de los campos ocultos, que no se ve
      pero ocupa. Los campos ocultos siguen ahí y se siguen enviando: sólo se
      les quita la altura.

   RESULTADO: la ficha pasó de 940 a 604 px de alto. Mismo contenido, mismo
   tamaño de letra, mismo objetivo táctil de 42 px. Sólo sin los huecos.
   ============================================================================ */

/* 1. El ancho que faltaba. */
body.dp-form #content .dp-booking .wpcf7-form-control-wrap {
  display: block !important;
}

body.dp-form #content .dp-booking input:not([type="checkbox"]):not([type="radio"]),
body.dp-form #content .dp-booking select,
body.dp-form #content .dp-booking textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* En una sola columna, minmax(0,1fr) impide que el ancho de fábrica del campo
   estire la columna más allá del formulario. Con 1fr a secas, la columna se
   agranda hasta caber el campo y vuelve el desborde. */
@media (max-width: 620px) {
  body.dp-form #content .wpcf7-form section {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2. Los huecos. */
body.dp-form #content .dp-booking .form-inner p > br {
  display: none !important;
}

body.dp-form #content .wpcf7 p {
  margin: 0 !important;
}

body.dp-form #content .dp-booking .form-inner {
  margin-bottom: 12px !important;
}

body.dp-form #content .dp-booking label {
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

/* 3. Los campos ocultos ocupaban 20 px. Se les quita el alto, no la presencia:
   un campo sin altura se sigue enviando, uno con display:none también, pero
   así queda claro que no se está tocando lo que viaja al correo. */
body.dp-form #content .wpcf7 form {
  margin: 0 !important;
}

body.dp-form #content .wpcf7 form > .hidden-fields-container {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ============================================================================
   EL BLANCO ENTRE LA BANDA DEL FORMULARIO Y EL PIE
   2026-09-13. Natalia: "sí, déjalo más corto".

   Todas las páginas que llevan formulario terminan igual: la banda azul oscura
   con "So, Ready to Start?" y la ficha del formulario dentro. Debajo de esa
   banda quedaba una tira de blanco antes de empezar el pie, que hacía que la
   página pareciese cortada a medias.

   MEDIDO en About Us:
       teléfono 390 px    112 px de blanco
       escritorio 1280    159 px

   Salían de cuatro sitios distintos, ninguno visible:
       .content-area.primary   padding-bottom  64 px (teléfono)
       .content-area.primary   margin-bottom   68 px (escritorio)
       article                 padding-bottom  24 px / 90 px
       el contenedor raíz      padding-bottom  24 px

   Ahora la banda de color llega hasta el pie sin nada en medio, que es como se
   remata una página que termina en una sección de color: los dos bloques se
   tocan y se lee como una pieza.

   OJO CON LA EXCEPCIÓN: Contact Us lleva la clase dp-form pero también
   dp-desnuda, y esa página NO termina en la banda oscura sino en su propia
   línea legal sobre fondo claro, y encima tiene el pie escondido entero. Si se
   le quita el respiro de abajo, el texto legal queda pegado al borde de la
   pantalla. Por eso :not(.dp-desnuda).
   ============================================================================ */

/* CORREGIDO el mismo día, después de mirar las trece páginas que llevan
   formulario. La primera versión de esta regla también ponía a cero el relleno
   de abajo de los contenedores de Spectra de primer nivel, y eso estaba mal.

   POR QUÉ ESTABA MAL: en About Us la banda oscura va DENTRO de otro contenedor,
   así que poner a cero el de fuera sólo quitaba blanco sobrante. Pero en la
   portada, en Programs y en las nueve páginas de programa, la banda oscura ES
   el contenedor de primer nivel. Ahí la regla le quitaba sus propios 56 px de
   relleno de abajo, y la ficha blanca del formulario quedaba pegada al pie sin
   nada en medio.

   Lo vio Natalia en la portada: "está pegado el form al footer, me gusta ese
   espacio con el footer". Al ir a comprobarlo, lo mismo pasaba en Programs y en
   las nueve de programa. Trece páginas, no una.

   AHORA sólo se tocan los envoltorios del TEMA, que son blancos y no pintan
   nada, y cada banda conserva el relleno que trae. Con eso la ficha siempre
   tiene sus 56 px por debajo, del color de la banda.

   REGLA PARA LA PRÓXIMA VEZ: nunca poner a cero el relleno de un contenedor que
   pinta un fondo. El relleno de un bloque con color no es aire sobrante, es lo
   que separa su contenido del borde. */

body.dp-form:not(.dp-desnuda) .content-area.primary {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.dp-form:not(.dp-desnuda) .site-main > article {
  padding-bottom: 0 !important;
}


/* === dopat-tipografia (programa-fraunces.css) === */
/* ============================================================================
   DoPatagonia — Tipografía del sitio: Fraunces
   ----------------------------------------------------------------------------
   Fraunces sustituye a Lora en TODOS los titulares, en TODO el sitio.
   No se suma: se cambia.

   Licencia SIL Open Font License: libre, también para uso comercial, sin coste
   y sin permisos. Autoalojada en este plugin, así que la página no le pide
   nada a Google al cargar (mejor para velocidad y para privacidad).

   Es una serif variable con eje óptico: el navegador ajusta el dibujo de la
   letra según el tamaño, de modo que un titular de 76 px y un rótulo de 17 px
   no usan la misma forma. Eso es lo que da aire de marca cuidada.

   Para comparar sin tocar nada:  ?letra=lora  vuelve a la tipografía anterior.
   ============================================================================ */

/* latin-ext: solo se descarga si la página usa esos caracteres */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------------------
   TODO EL SITIO: titulares y textos destacados
   -------------------------------------------------------------------------- */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .uagb-heading-text,
body .uagb-ifb-title,
body .site-title,
body .ast-blog-featured-section .entry-title,
body .widget-title,
body blockquote {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-optical-sizing: auto;
}

/* Los titulares grandes bajan de peso: Fraunces pesa ópticamente más que Lora
   y al mismo peso gritaba. */
body h1,
body h2 {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

body h3,
body h4 {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}


/* ----------------------------------------------------------------------------
   PÁGINA PILOTO: afinado propio
   -------------------------------------------------------------------------- */

body.dp-programa #content h1,
body.dp-programa #content h2,
body.dp-programa #content h3,
body.dp-programa #content .uagb-heading-text,
body.dp-programa #content .uagb-ifb-title,
body.dp-programa #content .wp-block-accordion-heading__toggle,
body.dp-programa #content #rank-math-faq .rank-math-question,
body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc,
body.dp-programa #content .dp-review .dp-review__texto,
body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type
  > .wp-block-column:first-child > p:nth-child(2),
body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type,
.dp-cta-bar__price b {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
  font-optical-sizing: auto;
}

/* Fraunces pesa ópticamente más que Lora al mismo tamaño: los titulares
   grandes bajan de peso para que no griten, y se aprieta algo el interletraje. */
body.dp-programa #content .wp-block-cover h1 {
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

body.dp-programa #content .entry-content h2,
body.dp-programa #content .uagb-heading-text {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

body.dp-programa #content .entry-content h3,
body.dp-programa #content .wp-block-accordion-heading__toggle,
body.dp-programa #content #rank-math-faq .rank-math-question {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}

/* El precio y los datos del resumen: peso medio, que es donde Fraunces se ve
   mejor, con las cifras alineadas en altura. */
body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type
  > .wp-block-column:first-child > p:nth-child(2),
body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc {
  font-weight: 500 !important;
  font-variant-numeric: lining-nums;
}

body.dp-programa #content .dp-review .dp-review__texto {
  font-weight: 400 !important;
}


/* === dopat-texto (texto-source.css) === */
/* ============================================================================
   DoPatagonia — Letra del texto: Source Sans 3
   ----------------------------------------------------------------------------
   Sustituye a Inter en el cuerpo, los rótulos, los botones y el formulario.
   Los títulos y los textos de lucimiento siguen en Fraunces.

   Por qué esta: Source Sans está dibujada a partir de la escritura a mano —las
   letras tienen el trazo que deja una pluma—, igual que Fraunces. Inter está
   dibujada para pantallas de aplicación: clarísima, pero fría. Además dibuja
   algo más pequeño al mismo número, así que el texto se ve menos pesado.
   Pesa 28 KB.

   Licencia SIL Open Font: libre y sin coste. Autoalojada: la página no le pide
   nada a Google al cargar.

   NOTA SOBRE EL !important: el CSS que genera Spectra para cada bloque escribe
   la familia con selectores muy pesados (.uagb-block-xxxx li). Sin !important,
   la letra solo cambiaba en media página. Las reglas de Fraunces van después
   en este mismo archivo, así que ganan donde deben ganar.
   ============================================================================ */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/source-sans-3-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Todo el texto ---------------------------------------------------------- */

body,
body p,
body li,
body span,
body label,
body input,
body select,
body textarea,
body button,
body a,
body div,
body td,
body th,
body figcaption,
body .uagb-ifb-desc,
body .uagb-icon-list__label,
body .rank-math-answer,
body .rank-math-answer p,
body .dp-dia__k,
body .dp-dia__v,
body .dp-nav__link,
body .dp-side__rotulo,
body .dp-side__nota,
body .dp-side__cta,
body .dp-cta-bar__link,
body .dp-cta-bar__price,
body .dp-review__firma,
body .dp-reviews__meta,
body .dp-carrusel-cuenta,
body .spectra-image-gallery__media-thumbnail-caption {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
}

/* ---- Lo que se queda en Fraunces ------------------------------------------- */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .uagb-heading-text,
body .uagb-ifb-title,
body .wp-block-accordion-heading__toggle,
body .wp-block-accordion-heading__toggle-title,
body #rank-math-faq .rank-math-question,
body .dp-precio-cifra,
body .dp-side__precio,
body .dp-cta-bar__price b,
body .dp-review__texto,
body .dp-snapshot-grid .uagb-ifb-desc,
body .wp-block-uagb-advanced-heading + p,
body .wp-block-cover__inner-container p,
body .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type {
  font-family: 'Fraunces', Lora, Georgia, serif !important;
}


/* === dopat-cabecera (cabecera-marca.css) === */
/* ============================================================================
   DoPatagonia — Cabecera con los colores de la marca (TODO EL SITIO)
   ----------------------------------------------------------------------------
   La cabecera era lo último que quedaba en dorado: la banda superior en
   #B8965D y el botón en #C69B00. Al lado de la paleta del logo desentonaban.

   Regla que se aplica en todo el sitio a partir de aquí:
       azul  = acción (botones)
       verde = superficie y titulares
       arena = fondo cálido

   Contrastes medidos: blanco sobre #0E5F94 = 6,81:1.

   Se desactiva igual que el resto:  ?color=dorado
   ============================================================================ */

/* ---- Banda superior --------------------------------------------------------- */

.ast-above-header-bar {
  background-color: #0E5F94 !important;
}

.ast-above-header-bar,
.ast-above-header-bar p,
.ast-above-header-bar span,
.ast-above-header-bar .ast-builder-html-element {
  color: #FFFFFF !important;
}

.ast-above-header-bar a {
  color: #FFFFFF !important;
  text-decoration: none;
}

.ast-above-header-bar a:hover,
.ast-above-header-bar a:focus {
  color: #CFE6F5 !important;
  text-decoration: underline;
}

.ast-above-header-bar a:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* ---- Botón principal de la cabecera ---------------------------------------- */

.ast-custom-button,
.ast-header-button-1 .ast-custom-button {
  background-color: #0E5F94 !important;
  border-color: #0E5F94 !important;
  color: #FFFFFF !important;
}

.ast-builder-button-wrap:hover .ast-custom-button,
.ast-custom-button:hover,
.ast-custom-button-link:hover .ast-custom-button,
.ast-custom-button-link:focus .ast-custom-button {
  background-color: #0B4E7A !important;
  border-color: #0B4E7A !important;
  color: #FFFFFF !important;
}

.ast-custom-button-link:focus-visible .ast-custom-button {
  outline: 3px solid #0E5F94;
  outline-offset: 3px;
}

/* ---- Botón de menú en móvil ------------------------------------------------- */

.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill {
  color: #0E5F94 !important;
}

.ast-mobile-menu-trigger-fill svg,
.ast-mobile-menu-trigger-minimal svg,
.menu-toggle svg {
  fill: #0E5F94 !important;
  color: #0E5F94 !important;
}


/* ============================================================================
   COLORES DE MARCA EN CABECERA, MENÚ Y PIE (TODO EL SITIO)
   ----------------------------------------------------------------------------
   Auditoría de colores: quedaban restos de la paleta anterior en sitios que no
   se ven a primera vista pero están en todas las páginas.

     #1A3A5C  azul marino   → menú y pie
     #C8A96E  dorado        → enlaces del pie
     #3B8FD4  azul claro    → enlaces sueltos

   Todo pasa a la familia del logo: gris oscuro para el menú, verde profundo
   para el pie y verde claro para sus enlaces.
   ============================================================================ */

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.main-navigation .menu-link {
  color: #2C2C2C !important;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-navigation .menu-item:hover > .menu-link {
  color: #2C4A26 !important;
}

/* Submenús */
.main-header-menu .sub-menu .menu-link {
  background-color: #2C4A26 !important;
  color: #FFFFFF !important;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link {
  background-color: #1F3619 !important;
}

/* ---- Pie ------------------------------------------------------------------- */

.site-footer .site-primary-footer-wrap {
  background-color: #1F3619 !important;
}

.site-footer a {
  color: #9ACB6A !important;
}

.site-footer a:hover {
  color: #FFFFFF !important;
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
  color: #FFFFFF !important;
}

/* El botón del pie, al azul de marca */
.site-footer .wp-block-button__link,
.site-footer .uagb-buttons-repeater.wp-block-button__link {
  background-color: #0E5F94 !important;
  border-color: #0E5F94 !important;
  color: #FFFFFF !important;
}

.site-footer .wp-block-button__link:hover,
.site-footer .uagb-buttons-repeater.wp-block-button__link:hover {
  background-color: #1272B0 !important;
  border-color: #1272B0 !important;
}

/* Enlace de salto y enlaces sueltos con el azul claro antiguo */
.skip-link,
a[style*="3B8FD4"] {
  color: #0E5F94 !important;
}

/* Últimos restos, cazados en la segunda pasada de auditoría */
footer.site-footer {
  background-color: #1F3619 !important;
}

.site-footer .footer-widget-area,
.site-footer .widget_nav_menu,
.site-footer .widget {
  color: #FFFFFF !important;
}

.ast-custom-button-link,
.ast-custom-button-link:visited {
  color: #FFFFFF !important;
}

/* ---- Menú de móvil ---------------------------------------------------------
   El panel desplegable seguía en azul marino. Pasa al verde de marca, con los
   enlaces en blanco. */
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .menu-item,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-content .main-header-menu {
  background-color: #2C4A26 !important;
}

.ast-header-break-point .main-header-menu .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-link {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link {
  color: #9ACB6A !important;
}

.custom-logo-link,
.custom-logo-link:visited {
  color: #2C4A26 !important;
}

/* ---- Últimos colores ajenos al logo ------------------------------------------
   Los encontró la revisión de color, uno a uno, sobre la página ya montada. */

/* El botón de la cabecera llevaba el azul viejo (#3B8FD4) en el enlace. No se
   veía porque el texto blanco lo tapa, pero se hereda en cuanto algo cambia. */
.ast-builder-button-wrap .menu-link,
.ast-builder-button-wrap .ast-custom-button {
  color: #FFFFFF !important;
}

/* La barra de abajo del pie era negra (#191919), sin relación con la marca.
   Pasa a ser el verde profundo, un tono más oscuro que el pie. */
.site-below-footer-wrap,
.site-below-footer-wrap .ast-builder-grid-row-container-inner {
  background-color: #152510 !important;
}

/* Lo que parecía un filete es un borde de 62 px que Astra pone encima del pie.
   Estaba en gris azulado (#F5F7F9) y dejaba una franja clara entre el
   formulario y el pie; teñido de verde claro quedaba una banda de otro verde.
   Se pinta del mismo verde del pie: deja de ser una franja y pasa a ser
   simplemente aire. */
.site-primary-footer-wrap {
  border-top-color: #1F3619 !important;
}

/* Aviso del formulario tras enviar: azul de WordPress → azul del logo. */
.wpcf7-response-output {
  border-color: #0E5F94 !important;
}

/* ============================================================================
   LA FORMA DE LA CABECERA (no solo el color)

   Lo que se veía mal, medido sobre la página montada:

     · La banda de arriba ocupaba 70 px de alto para una línea de texto de
       13 px, y el texto quedaba pegado al borde superior en vez de centrado.
       Son 70 px de la parte más valiosa de la pantalla, en todas las páginas.
     · El botón "Get In Touch" era un rectángulo de esquinas rectas, cuando
       todos los demás botones del sitio son pastillas redondas. Un botón de
       otra forma se lee como de otro sitio.
     · La cabecera no tenía ninguna línea abajo, así que al bajar la página el
       contenido parecía nacer flotando.
     · En el móvil no había ningún botón: solo el logo y las tres rayitas.
   ============================================================================ */

/* ---- La banda de arriba, a su altura ------------------------------------------ */

.ast-above-header-wrap .site-above-header-wrap,
.ast-above-header-bar {
  min-height: 0 !important;
}

.ast-above-header-wrap .ast-builder-grid-row {
  min-height: 40px !important;
  align-items: center !important;
}

.ast-above-header-bar .ast-builder-html-element,
.ast-above-header-bar p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

/* ---- El botón, como todos los demás ------------------------------------------- */

.ast-custom-button,
.ast-header-button-1 .ast-custom-button {
  border-radius: 999px !important;
  min-height: 42px;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  /* Astra lo pone en "capitalize" desde sus ajustes y su hoja va después,
     así que aquí hace falta el !important. */
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* ---- Una línea abajo, para que la cabecera se apoye --------------------------- */

.ast-below-header-wrap .site-below-header-wrap,
.site-header .main-header-bar {
  border-bottom: 1px solid #E8E4DC;
}

/* ---- El menú ------------------------------------------------------------------ */

.main-header-menu .menu-link {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}

/* ---- Móvil ---------------------------------------------------------------------
   Se probó a poner el botón "Get in touch" al lado de las tres rayitas y
   Natalia lo retiró. La cabecera del móvil vuelve a ser el logotipo y el menú,
   y el logotipo recupera su tamaño (se había achicado para hacerle sitio al
   botón). */

@media (max-width: 921px) {
  .ast-header-break-point #ast-mobile-header .ast-header-button-1,
  .ast-header-break-point .ast-mobile-header-wrap .ast-header-button-1 {
    display: none !important;
  }
}

/* ============================================================================
   EL PIE, ORDENADO

   Lo que se veía mal, medido sobre la página montada en 1440 px:

     · Las tres columnas empezaban a alturas distintas: la primera a 134 px,
       la tercera a 223 y la segunda a 261. Nada se alineaba con nada.
     · La columna del medio iba centrada y con saltos de línea metidos a mano,
       así que quedaban cuatro renglones cortos y desiguales.
     · "Useful Links" era un titular grande en Fraunces y las otras dos
       columnas no tenían titular ninguno.
     · El botón era un rectángulo, cuando el resto del sitio usa pastillas.
     · 80 px de vacío antes de que empezara nada.
   ============================================================================ */

/* Las tres columnas, arriba y alineadas. */
.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
  align-items: start !important;
}

.site-footer .site-primary-footer-wrap {
  padding-top: 46px !important;
  padding-bottom: 34px !important;
}

.site-footer .footer-widget-area-inner > *:first-child {
  margin-top: 0 !important;
}

/* Todo a la izquierda: tres columnas, tres bloques de texto que empiezan en
   la misma vertical. Centrado solo funciona cuando hay una cosa sola. */
.site-footer .site-primary-footer-wrap .widget,
.site-footer .site-primary-footer-wrap p,
.site-footer .site-primary-footer-wrap .uagb-heading-text,
.site-footer .site-primary-footer-wrap .wp-block-uagb-advanced-heading {
  text-align: left !important;
}

.site-footer .site-primary-footer-wrap .menu {
  text-align: left !important;
  padding-left: 0;
}

/* Los tres titulares de columna, iguales entre sí. */
.site-footer .site-primary-footer-wrap .uagb-heading-text,
.site-footer .site-primary-footer-wrap h3 {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .62) !important;
  margin: 0 0 14px !important;
}

.site-footer .site-primary-footer-wrap p {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, .86) !important;
}

/* Los enlaces: verde claro sobre verde oscuro se lee flojo. Se suben a blanco
   y el verde queda para el hover. Contraste blanco sobre #1F3619: 12,6:1. */
.site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater) {
  color: rgba(255, 255, 255, .88) !important;
  text-decoration: none;
}

.site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover,
.site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):focus-visible {
  color: #9ACB6A !important;
  text-decoration: underline;
}

.site-footer .site-primary-footer-wrap .menu-item {
  margin-bottom: 6px;
}

/* El botón del pie, pastilla como todos. */
.site-footer .wp-block-button__link,
.site-footer .uagb-buttons-repeater {
  border-radius: 999px !important;
  min-height: 44px;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin-top: 16px;
}

/* Los sellos, más chicos: ocupaban dos filas ellos solos. */
.site-footer .dp-confianza--oscuro .dp-confianza__logo {
  min-height: 38px;
  padding: 6px 10px;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo img {
  --dp-cf-alto: 24px !important;
  height: 24px !important;
  width: auto !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__fila {
  gap: 10px 12px;
}

.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  font-size: 10.5px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__titulo {
  margin-bottom: 12px !important;
}

@media (max-width: 921px) {
  .site-footer .site-primary-footer-wrap .footer-widget-area-inner {
    margin-bottom: 26px;
  }
}

/* El botón de la columna del medio iba centrado mientras su texto iba a la
   izquierda. */
.site-footer .site-primary-footer-wrap .uagb-buttons__wrap,
.site-footer .site-primary-footer-wrap .wp-block-buttons {
  justify-content: flex-start !important;
}

/* ============================================================================
   EL MARCO: LA BARRA DE ARRIBA Y EL PIE

   EL PROBLEMA, dicho por Natalia: "el color del pie no pega". Y era verdad, y
   no era culpa del verde: era de lo que tenía justo encima.

   La página terminaba con la banda del formulario en AZUL OSCURO y, sin nada
   en medio, empezaba el pie en VERDE OSCURO. Dos oscuros distintos, pegados,
   sin relación entre ellos. Juntos se peleaban.

   LA DECISIÓN: el pie se aparta del todo y se va al mismo color arena del
   resto de la página. Así la banda azul del formulario queda como el ÚNICO
   bloque oscuro de la portada y es lo que más destaca, que es justo donde se
   pide algo. El pie vuelve a ser lo que un pie debe ser: información de
   servicio, discreta.

   Y pequeño. Natalia: "más pequeño, más sobrio, más minimalista".

   El sistema de color queda en cuatro piezas y ni una más:
     · #0E5F94  azul de acción, SOLO botones
     · #10384F  azul profundo, la banda de arriba
     · #2C4A26  verde del logo, titulares y enlaces del pie
     · #F7F5F2  arena, fondos
   ============================================================================ */

.ast-above-header-bar {
  background-color: #10384F !important;
}

/* ---- El pie, en claro ---------------------------------------------------------- */

.site-footer .site-primary-footer-wrap,
footer.site-footer {
  background-color: #F7F5F2 !important;
}

.site-primary-footer-wrap {
  border-top: 1px solid #E3DED4 !important;
  border-top-color: #E3DED4 !important;
}

.site-below-footer-wrap,
.site-below-footer-wrap .ast-builder-grid-row-container-inner {
  background-color: #EFEAE2 !important;
}

/* ---- Más pequeño ---------------------------------------------------------------
   Antes: 46 px de aire arriba, texto a 14 px y sellos de 38 px de alto. Un pie
   no necesita nada de eso. */

.site-footer .site-primary-footer-wrap {
  padding-top: 34px !important;
  padding-bottom: 24px !important;
}

.site-footer .site-below-footer-wrap {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.site-footer .site-primary-footer-wrap p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #55534E !important;
}

.site-footer .site-primary-footer-wrap .uagb-heading-text,
.site-footer .site-primary-footer-wrap h3,
.site-footer .widget-title,
.site-footer h2 {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #8A8579 !important;
  margin: 0 0 10px !important;
}

.site-footer .site-primary-footer-wrap p strong {
  color: #2C2C2C !important;
}

.site-footer .site-primary-footer-wrap .menu-item {
  margin-bottom: 2px;
}

.site-footer .site-primary-footer-wrap .menu-link {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* ---- Texto y enlaces ------------------------------------------------------------ */

.site-footer .footer-widget-area,
.site-footer .widget_nav_menu,
.site-footer .widget,
.site-footer .site-below-footer-wrap,
.site-footer .site-below-footer-wrap p {
  color: #55534E !important;
}

.site-footer a,
.site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater) {
  color: #2C4A26 !important;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover {
  color: #0E5F94 !important;
  text-decoration: underline;
}

/* Los iconos de las redes eran blancos. */
.site-footer .ast-builder-social-element svg,
.site-footer .ast-social-icon-image-wrap svg,
.site-footer .ahfb-svg-iconset svg {
  fill: #2C4A26 !important;
  color: #2C4A26 !important;
  width: 15px !important;
  height: 15px !important;
}

.site-footer .ast-builder-social-element {
  font-size: 12.5px !important;
}

/* ---- Los sellos ------------------------------------------------------------------
   Sobre fondo claro no hacen falta las pastillas blancas: los logotipos ya se
   ven solos. Fuera, y más chicos. */

.site-footer .dp-confianza--oscuro .dp-confianza__logo {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo img {
  --dp-cf-alto: 20px !important;
  height: 20px !important;
  width: auto !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__fila {
  gap: 8px 20px;
}

.site-footer .dp-confianza--oscuro .dp-confianza__titulo {
  color: #8A8579 !important;
  font-size: 10.5px !important;
  margin-bottom: 10px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  color: #55534E !important;
  font-size: 10px !important;
}

.site-footer .dp-confianza--oscuro a:hover .dp-confianza__pie {
  color: #0E5F94 !important;
}

/* ---- El botón --------------------------------------------------------------------
   Más chico: en un pie discreto, un botón grande es lo único que no pega. */

.site-footer .wp-block-button__link,
.site-footer .uagb-buttons-repeater {
  background-color: #0E5F94 !important;
  border-color: #0E5F94 !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin-top: 12px;
}

.site-footer .wp-block-button__link:hover,
.site-footer .uagb-buttons-repeater:hover {
  background-color: #1272B0 !important;
  border-color: #1272B0 !important;
}

/* ---- Las tres columnas, arriba y a la izquierda ---------------------------------- */

.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
  align-items: start !important;
}

.site-footer .footer-widget-area-inner > *:first-child {
  margin-top: 0 !important;
}

.site-footer .site-primary-footer-wrap .widget,
.site-footer .site-primary-footer-wrap p,
.site-footer .site-primary-footer-wrap .uagb-heading-text,
.site-footer .site-primary-footer-wrap .wp-block-uagb-advanced-heading,
.site-footer .site-primary-footer-wrap .menu {
  text-align: left !important;
}

.site-footer .site-primary-footer-wrap .menu {
  padding-left: 0;
}

.site-footer .site-primary-footer-wrap .uagb-buttons__wrap,
.site-footer .site-primary-footer-wrap .wp-block-buttons {
  justify-content: flex-start !important;
}

@media (max-width: 921px) {
  .site-footer .site-primary-footer-wrap .footer-widget-area-inner {
    margin-bottom: 22px;
  }
}

/* ============================================================================
   EL MENÚ, AL AZUL DEL MARCO

   Quedaba verde: el panel desplegable del móvil y el submenú del ordenador
   venían del reparto anterior, cuando el pie también era verde. Ahora el pie
   es claro y el marco es azul profundo, así que el verde del menú era el único
   sitio del sitio con ese color y cantaba.

   El verde no desaparece: sigue en los titulares, en los enlaces del pie y en
   el logotipo. Es color de marca, no color de superficie.
   ============================================================================ */

/* Panel del móvil */
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .menu-item,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-content .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content {
  background-color: #10384F !important;
}

.ast-header-break-point .main-header-menu .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-link {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link {
  color: #9ACB6A !important;
}

/* La cruz de cerrar y las flechas del panel */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-popup-header svg,
.ast-header-break-point .main-header-menu .ast-menu-toggle svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Submenú del ordenador */
.main-header-menu .sub-menu .menu-link {
  background-color: #10384F !important;
  color: #FFFFFF !important;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link {
  background-color: #0B2B3C !important;
  color: #9ACB6A !important;
}

/* ============================================================================
   EL PIE, MÁS PEQUEÑO TODAVÍA

   Segunda pasada: seguía sobrando aire. Un pie es información de servicio.
   ============================================================================ */

.site-footer .site-primary-footer-wrap {
  padding-top: 24px !important;
  padding-bottom: 16px !important;
}

.site-footer .site-below-footer-wrap {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.site-footer .site-primary-footer-wrap p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.site-footer .site-primary-footer-wrap .uagb-heading-text,
.site-footer .site-primary-footer-wrap h3,
.site-footer .widget-title {
  font-size: 10px !important;
  margin: 0 0 7px !important;
}

.site-footer .site-primary-footer-wrap .menu-link,
.site-footer .site-primary-footer-wrap .wp-block-list {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.site-footer .site-primary-footer-wrap .wp-block-list li {
  margin-bottom: 0 !important;
}

.site-footer .wp-block-button__link,
.site-footer .uagb-buttons-repeater {
  min-height: 34px !important;
  padding: 0 16px !important;
  font-size: 11px !important;
  margin-top: 8px;
}

.site-footer .dp-confianza--oscuro {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo img {
  --dp-cf-alto: 17px !important;
  height: 17px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__titulo {
  margin-bottom: 8px !important;
}

.site-footer .site-below-footer-wrap p,
.site-footer .ast-footer-copyright p {
  font-size: 11.5px !important;
  margin: 0 !important;
}

.site-footer .ast-builder-social-element {
  margin: 0 6px !important;
}

/* Los sellos del pie, apretados: quedaban dos filas con un hueco enorme entre
   el logotipo y su texto, y otro entre fila y fila. */
.site-footer .dp-confianza--oscuro .dp-confianza__fila {
  gap: 4px 16px !important;
  align-items: flex-start;
}

.site-footer .dp-confianza--oscuro .dp-confianza__marca a,
.site-footer .dp-confianza--oscuro .dp-confianza__marca {
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo {
  margin-bottom: 0 !important;
}

/* Los cuatro sellos en una sola fila: con 16 px de hueco el de WeTravel se
   caía al renglón de abajo él solo. */
.site-footer .dp-confianza--oscuro .dp-confianza__fila {
  gap: 4px 12px !important;
  flex-wrap: wrap;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo img {
  --dp-cf-alto: 15px !important;
  height: 15px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  font-size: 9.5px !important;
}

/* La barra de abajo: los nombres de las redes salían en gris casi blanco
   sobre fondo claro, no se leían. */
.site-footer .site-below-footer-wrap,
.site-footer .site-below-footer-wrap a,
.site-footer .ast-builder-social-element,
.site-footer .ast-builder-social-element .social-item-label {
  color: #55534E !important;
}

.site-footer .site-below-footer-wrap a:hover,
.site-footer .ast-builder-social-element:hover {
  color: #0E5F94 !important;
}

.site-footer .site-below-footer-wrap svg,
.site-footer .ast-builder-social-element svg {
  fill: #55534E !important;
}

/* ============================================================================
   EL PIE TENÍA 200 px DE AIRE MUERTO, Y LOS SELLOS NO SE LEÍAN
   Corregido el 2026-09-13, en la revisión estética de toda la web.

   LO QUE SE MIDIÓ en producción, en un teléfono de 375 px. El pie medía 861 px.

   1. LA COLUMNA VACÍA. Al quitar el texto de "Not sure which Patagonia route",
      los dos bloques se quedaron sin contenido pero la columna del medio siguió
      ocupando su sitio: 22 px de la columna, 10 de margen y los dos huecos de
      57 px que la rejilla pone a cada lado. 146 px de nada entre el logotipo de
      WeTravel y "USEFUL LINKS".
      Se esconde SOLA y sólo mientras esté vacía: en cuanto vuelvas a poner algo
      dentro, :has(.widget *) deja de cumplirse y la columna reaparece. No hay
      que acordarse de borrar esta regla.

   2. EL BLOQUE FANTASMA DEL FINAL. Detrás de la lista de enlaces hay un bloque
      vacío (block-45). Como existe, la lista no era "el último" y arrastraba
      sus 44,8 px de margen: 67 px de blanco antes de la barra de abajo.

   3. LOS HUECOS ENTRE COLUMNAS eran de 57 px, pensados para el escritorio,
      donde van una al lado de la otra. En el teléfono van una debajo de otra
      y ese hueco es el doble de lo que hace falta.

   4. LOS CUATRO SELLOS. Los fui achicando (24, 20, 17 y al final 15 px) para
      que cupieran los cuatro en una fila, y aun así WeTravel se caía al
      renglón de abajo él solo. Peor: el de Sernatur es un sello CUADRADO de
      240x240, y a 15 px de alto era un punto gris ilegible, justo el que más
      importa porque es el registro oficial.
      Ahora van en dos y dos, en columnas alineadas, y cada uno a la altura que
      le corresponde por su forma: las palabras (Tripadvisor, Google, WeTravel)
      a 16 px, y el sello redondo a 30, que es lo que necesita un dibujo para
      leerse igual que una palabra.

   RESULTADO: el pie pasó de 861 a 664 px. No se quitó nada de lo que dice.
   ============================================================================ */

/* 1. La columna del medio, mientras esté vacía. */
.site-footer .site-primary-footer-wrap .site-footer-primary-section-2:not(:has(.widget *)) {
  display: none !important;
}

/* 2. Cualquier bloque de pie sin nada dentro deja de ocupar. */
.site-footer .site-primary-footer-wrap .widget:not(:has(*)) {
  display: none !important;
}

.site-footer .site-primary-footer-wrap .widget {
  margin-bottom: 14px !important;
}

.site-footer .site-primary-footer-wrap .footer-widget-area {
  margin-bottom: 8px !important;
}

/* 3. El hueco entre columnas, sólo en el teléfono. */
@media (max-width: 780px) {
  .site-footer .site-primary-footer-inner-wrap {
    row-gap: 26px !important;
  }
}

/* 4. Los sellos: dos y dos, alineados, y cada uno a su altura. */
.site-footer .dp-confianza--oscuro .dp-confianza__fila {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  align-items: start !important;
  max-width: 320px;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__logo img {
  --dp-cf-alto: 16px !important;
  height: 16px !important;
  max-height: 16px !important;
}

/* El sello de Sernatur es cuadrado: a la altura de una palabra no se lee. */
.site-footer .dp-confianza--oscuro .dp-confianza__marca:first-child .dp-confianza__logo img {
  --dp-cf-alto: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
}

/* El pie de cada sello iba centrado bajo un logotipo alineado a la izquierda,
   así que empezaba antes que el propio logotipo. */
.site-footer .dp-confianza--oscuro .dp-confianza__marca,
.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  text-align: left !important;
  font-size: 10.5px !important;
}

/* ============================================================================
   EL ANTETÍTULO SÓLO EXISTÍA EN LA PORTADA
   Corregido el 2026-09-13.

   QUÉ PASABA: en la página de Programs, "What goes inside a program" salía
   como un párrafo cualquiera, en 16 px y en negro, justo encima de un titular
   de 30 px. En la portada la misma línea sale pequeña, en mayúsculas y en
   verde, que es como está pensada.

   POR QUÉ: la regla estaba escrita como "body.home .dp-antetitulo" y vive en
   home.css, que sólo se carga en la portada. Pero los bloques que escriben esa
   línea (experiencias.php, mapa.php y segmentos.php) se usan también fuera.

   Esta hoja se carga en todo el sitio, así que la regla va aquí, sin atarla a
   ninguna página. La de home.css puede quedarse: dice lo mismo.
   ============================================================================ */

#content .dp-antetitulo {
  display: block;
  margin: 0 0 8px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4A7A26 !important;
}

/* ============================================================================
   EL PIE, SEGUNDA VUELTA: FUERA LOS SELLOS Y MENOS AIRE
   2026-09-13. Natalia: "en el footer saca esos logos. deja más ordenado el
   footer, demasiado espacio, que se vea bien".

   LOS SELLOS: el bloque "Registered and reviewed" con Sernatur, Tripadvisor,
   Google y WeTravel sale del pie. Se vació su widget (el 131) desde la base de
   datos, con respaldo en ~/respaldos/. NO desaparecen del sitio: el mismo
   bloque sigue en la portada, encima del formulario, que es donde de verdad
   sirve, justo antes de que alguien escriba.

   Rato antes yo los había reordenado en dos columnas y agrandado el sello de
   Sernatur. Estaba mejor que antes, pero seguía siendo mucho peso al final de
   la página. Tenía razón en sacarlos: un pie es para orientarse, no para
   convencer.

   LOS ENLACES EN DOS COLUMNAS: eran seis en fila india, 116 px. En dos
   columnas son 58 y se leen igual de bien. Sólo en el teléfono; en el
   escritorio el pie ya tiene sus columnas.

   EL PIE COMPLETO, en un teléfono de 390 px:
       861 px  como estaba esta mañana
       664 px  tras quitar la columna vacía y los huecos muertos
       506 px  sin los sellos
       436 px  con los enlaces en dos columnas
   La mitad, sin perder un solo dato.
   ============================================================================ */

@media (max-width: 780px) {

  .site-footer .site-primary-footer-wrap .wp-block-list {
    columns: 2;
    column-gap: 16px;
  }

  .site-footer .site-primary-footer-wrap .wp-block-list li {
    break-inside: avoid;
  }

  .site-footer .site-below-footer-wrap {
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
}

/* ---- Y en el escritorio, el pie se quedó cojo ----------------------------------
   Al vaciar la columna del medio, la rejilla seguía siendo de tres columnas de
   366 px. Con sólo dos ocupadas, el contenido terminaba en el píxel 823 de una
   rejilla de 1.200: 417 px de vacío pegados al borde derecho. En el teléfono no
   se veía porque las columnas van una debajo de otra.

   Ahora, cuando la del medio está vacía, son dos: los datos a la izquierda y
   los enlaces pegados a la derecha, que es como se resuelve un pie de toda la
   vida. Si algún día vuelve a haber algo en el medio, la regla de abajo
   devuelve las tres sola.

   OJO con :has(): NO se puede meter un :has() dentro de otro. La regla natural
   sería "si la del medio NO tiene contenido, dos columnas", pero eso se escribe
   :has(... :not(:has(...))) y el navegador lo descarta entero como selector
   inválido, sin avisar. Por eso está al revés: dos columnas por defecto, y las
   tres sólo si la del medio SÍ tiene algo. Un único :has(), y válido.
   -------------------------------------------------------------------------------- */

@media (min-width: 781px) {

  .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap:has(.site-footer-primary-section-2 .widget *) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ============================================================================
   EL PIE, TERCERA VUELTA: LAS TRES COLUMNAS OCUPADAS
   2026-09-13. Natalia: "quizás en el escritorio Facebook, Insta, Youtube y
   2026 Do Patagonia all rights debería ir donde están los useful links, y
   useful links al medio".

   Tenía razón y era mejor idea que la mía. Yo había apañado el hueco de la
   derecha estirando las dos columnas que quedaban. Ella vio que sobraba una
   fila entera abajo y faltaba contenido en el medio: moviendo las redes y el
   aviso de derechos a la tercera columna se arreglan las dos cosas de golpe.

   NO se hizo con CSS. Se movió donde de verdad vive, en la configuración del
   pie de Astra (opción astra-settings, clave footer-desktop-items):

       primary_1  datos de contacto        (igual)
       primary_2  USEFUL LINKS             (antes: la columna vacía)
       primary_3  redes + derechos         (antes: USEFUL LINKS)
       below_1    vacío                    (antes: redes + derechos)

   Respaldo de la opción entera antes de tocarla, 223 KB, en
   ~/respaldos/astra-settings-antes-de-mover-pie-2026-09-13.json

   Al vaciar la fila de abajo desaparece también su franja de color distinto
   (era #EFEAE2 sobre un pie #F7F5F2), que partía el pie en dos tonos sin
   ninguna razón. El pie de escritorio pasó de 309 a 227 px.

   Las dos reglas de aquí arriba se curan solas con este cambio: la columna del
   medio ya tiene contenido, así que vuelven las tres columnas y deja de
   esconderse. No hay que borrarlas.

   LO ÚNICO QUE HIZO FALTA EN CSS: dentro de la tercera columna, las redes
   venían centradas y el aviso de derechos alineado a la izquierda. Dos
   alineaciones distintas en la misma columna, y ninguna cuadraba con las otras
   dos columnas. Todo a la izquierda, un solo borde para el pie entero.
   ============================================================================ */

.site-footer .site-footer-primary-section-3 .footer-social-inner-wrap,
.site-footer .site-footer-primary-section-3 .ast-builder-social-element-wrap,
.site-footer .site-footer-primary-section-3 .ast-footer-copyright,
.site-footer .site-footer-primary-section-3 .ast-builder-layout-element {
  text-align: left !important;
}

.site-footer .site-footer-primary-section-3 .ast-builder-social-element:first-child {
  margin-left: 0 !important;
}


/* === dopat-resenas (resenas.css) === */
/* ============================================================================
   DoPatagonia — Reseñas de viajeros

   Un solo bloque para todo el sitio. No depende de en qué página esté: se
   estila por su propia clase, así que basta con poner [dopat_resenas] donde
   haga falta.

   Carrusel de desplazamiento nativo (scroll-snap): funciona con el dedo, con
   la rueda, con el teclado y sin JavaScript. Las flechas y los puntos son un
   añadido, no el mecanismo.
   ============================================================================ */

.dp-resenas {
  --dp-r-green:     #2C4A26;
  --dp-r-gold:      #C89B3C;
  --dp-r-ink:       #2C2C2C;
  --dp-r-ink-soft:  #55534E;
  --dp-r-sand:      #F7F5F2;
  --dp-r-line:      #E3DED4;
  --dp-r-cta:       #0E5F94;

  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

/* ---- Cabecera ---------------------------------------------------------------- */

.dp-resenas__cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
}

.dp-resenas .dp-resenas__titulo {
  margin: 0 0 8px;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--dp-r-green);
}

.dp-resenas .dp-resenas__meta {
  margin: 0;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dp-r-ink-soft);
}

.dp-resenas .dp-resenas__meta strong {
  color: var(--dp-r-ink);
  font-weight: 700;
}

.dp-resenas .dp-resenas__meta a {
  color: var(--dp-r-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--dp-r-line);
  text-underline-offset: 3px;
}

.dp-resenas .dp-resenas__meta a:hover,
.dp-resenas .dp-resenas__meta a:focus-visible {
  color: var(--dp-r-green);
  text-decoration-color: currentColor;
}

.dp-resenas__total {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--dp-r-ink-soft);
  opacity: .85;
}

/* ---- Flechas ----------------------------------------------------------------- */

.dp-resenas__mandos {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.dp-resenas__flecha {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--dp-r-line);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--dp-r-green);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.dp-resenas__flecha svg { width: 20px; height: 20px; }

.dp-resenas__flecha:hover:not([disabled]) {
  background: var(--dp-r-green);
  border-color: var(--dp-r-green);
  color: #FFFFFF;
}

.dp-resenas__flecha[disabled] {
  opacity: .35;
  cursor: default;
}

.dp-resenas__flecha:focus-visible {
  outline: 2px solid var(--dp-r-cta);
  outline-offset: 2px;
}

/* ---- La pista ---------------------------------------------------------------- */

.dp-resenas__pista {
  /* Flex y no grid: con grid-auto-columns las nueve fichas se encogían para
     caber en el ancho en vez de salirse, y el carrusel no se desplazaba. */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0 6px;
  /* Sin el margen negativo la primera ficha se pega al borde al desplazarse. */
  margin: 0 -2px;
}

.dp-resenas__pista::-webkit-scrollbar { display: none; }

.dp-resenas__pista:focus-visible {
  outline: 2px solid var(--dp-r-cta);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Cuántas fichas se ven a la vez. flex-basis fija el ancho; flex-shrink a 0
   es lo que impide que se apelotonen.

   En el teléfono se ve UNA entera, no una y el pico de la siguiente: el pico
   se pensó para que se notara que hay más, pero deja la reseña estrecha y se
   lee peor. De que hay más ya avisan los puntos. */
.dp-resena { flex: 0 0 100%; }

@media (min-width: 700px) {
  .dp-resena { flex: 0 0 calc((100% - 18px) / 2); }
}

@media (min-width: 900px) {
  .dp-resena { flex: 0 0 calc((100% - 36px) / 3); }
}

/* ---- Una reseña -------------------------------------------------------------- */

.dp-resena {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  background: #FFFFFF;
  border: 1px solid var(--dp-r-line);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.dp-resena__estrellas {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--dp-r-gold);
  line-height: 1;
}

.dp-resenas .dp-resena__texto {
  margin: 0;
  flex: 1 1 auto;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--dp-r-ink);
  letter-spacing: -0.005em;
}

.dp-resena__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dp-r-line);
}

.dp-resena__inicial {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--dp-r-sand);
  color: var(--dp-r-green);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.dp-resena__firma {
  display: flex;
  flex-direction: column;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  line-height: 1.35;
}

.dp-resena__firma strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dp-r-ink);
}

.dp-resena__firma span {
  font-size: 11.5px;
  color: var(--dp-r-ink-soft);
}

/* ---- Puntos ------------------------------------------------------------------ */

.dp-resenas__puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  min-height: 8px;
}

.dp-resenas__punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dp-r-line);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}

.dp-resenas__punto[aria-current="true"] {
  width: 22px;
  background: var(--dp-r-green);
}

.dp-resenas__punto:focus-visible {
  outline: 2px solid var(--dp-r-cta);
  outline-offset: 3px;
}

/* En el teléfono las flechas sobran: se arrastra con el dedo. */
@media (max-width: 699px) {
  .dp-resenas__cab { display: block; }
  .dp-resenas__mandos { display: none; }
  .dp-resenas .dp-resena__texto { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-resenas__pista { scroll-behavior: auto; }
  .dp-resenas__punto { transition: none; }
}

/* ---- Los puntos, agarrables con el dedo --------------------------------------
   El punto mide 8 px porque más grande ensucia; el área que responde al dedo
   mide 44, que es el mínimo. Se consigue con relleno transparente y un fondo
   que solo pinta el recuadro interior. */

.dp-resenas__puntos {
  gap: 0;
  margin-top: 8px;
}

.dp-resenas__punto {
  width: 26px;
  height: 44px;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dp-resenas__punto::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dp-r-line);
  transition: background-color .2s ease, width .2s ease;
}

.dp-resenas__punto[aria-current="true"] {
  width: 40px;
  background: none;
}

.dp-resenas__punto[aria-current="true"]::before {
  width: 22px;
  background: var(--dp-r-green);
}

.dp-resenas__punto:focus-visible {
  outline: 2px solid var(--dp-r-cta);
  outline-offset: -6px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .dp-resenas__punto::before { transition: none; }
}

/* Línea pequeña sobre el titular, igual que en las demás secciones. */
.dp-resenas .dp-resenas__ante {
  display: block;
  margin: 0 0 8px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4A7A26;
}

/* ---- La reseña entera, pinchable --------------------------------------------
   Nueve clics muertos en el texto de las reseñas, medidos en grabaciones de
   gente real: la leen y pinchan esperando ir a la original. No existe
   dirección para una reseña suelta, así que se lleva al perfil de esa
   plataforma; y se lleva desde toda la ficha, no desde una palabra. */

.dp-resena--enlace {
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dp-resena__fuente {
  color: var(--dp-r-ink-soft);
  text-decoration: none;
}

/* El enlace se estira por toda la ficha. */
.dp-resena__fuente::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px;
}

.dp-resena__ir {
  display: inline-block;
  margin-left: 3px;
  opacity: 0;
  transform: translate(-2px, 2px);
  transition: opacity .16s ease, transform .16s ease;
}

.dp-resena--enlace:hover,
.dp-resena--enlace:focus-within {
  border-color: #C9C2B4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05), 0 14px 30px -20px rgba(0, 0, 0, .4);
}

.dp-resena--enlace:hover .dp-resena__ir,
.dp-resena--enlace:focus-within .dp-resena__ir {
  opacity: 1;
  transform: translate(0, 0);
}

.dp-resena--enlace:hover .dp-resena__fuente,
.dp-resena--enlace:focus-within .dp-resena__fuente {
  color: var(--dp-r-green);
}

.dp-resena__fuente:focus-visible::after {
  outline: 2px solid var(--dp-r-cta);
  outline-offset: 3px;
}

/* Para quien navega con lector de pantalla: el enlace tiene que decir a dónde
   va, no solo "Tripadvisor · May 2025". */
.dp-resena__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .dp-resena--enlace,
  .dp-resena__ir { transition: none; }
}

/* ============================================================================
   LA CINTA DE CITAS

   Una sola fila de frases de clientes que pasa sola. Nueve reseñas reales
   desfilando dicen "tengo muchas" mejor que cualquier número escrito.

   Mismo truco que la cinta de fotos: la lista va escrita dos veces y se
   desplaza justo la mitad, así al volver al principio no se nota el salto.
   Se para al pasar el ratón, por si alguien quiere terminar de leer una.

   Los logotipos de abajo NO son enlaces: aquí arriba lo último que interesa
   es mandar a la gente a otra web.
   ============================================================================ */

.dp-citas {
  --dp-ci-vuelta: 75s;
  padding: 34px 0 6px;
  overflow: hidden;
}

.dp-citas__ventana {
  overflow: hidden;
  /* Se desvanece por los dos lados: se entiende que la fila sigue. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dp-citas__pista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: max-content;
  gap: 0;
  animation: dp-citas-vuelta var(--dp-ci-vuelta) linear infinite;
}

.dp-citas:hover .dp-citas__pista,
.dp-citas:focus-within .dp-citas__pista {
  animation-play-state: paused;
}

@keyframes dp-citas-vuelta {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-citas__pista { animation: none; }
  .dp-citas__ventana { overflow-x: auto; }
}

.dp-citas__cita {
  flex: 0 0 300px;
  width: 300px;
  margin: 0;
  padding: 0 22px;
  text-align: center;
  border-right: 1px solid #E3DED4;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .dp-citas__cita { flex-basis: 250px; width: 250px; padding: 0 16px; }
}

.dp-citas__comilla {
  display: block;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 28px;
  line-height: 1;
  color: #4A7A26;
  margin-bottom: 6px;
}

body #content .dp-citas .dp-citas__texto {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45;
  letter-spacing: .03em;
  font-style: normal !important;
  text-transform: uppercase;
  color: #2C2C2C !important;
}

body #content .dp-citas .dp-citas__autor {
  margin: 0 !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 12.5px !important;
  font-style: italic;
  color: #4A7A26 !important;
}

/* ---- De dónde salen ------------------------------------------------------------
   El negro sale de un filtro: brightness(0) deja a negro cualquier pixel que no
   sea transparente, así valen los mismos archivos que se usan a todo color en la
   franja de abajo y no hay que mantener dos versiones de cada logotipo. */

.dp-citas__marcas {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 30px;
}

.dp-citas__marcas li { margin: 0; }

.dp-citas__marcas img {
  height: 18px;
  width: auto;
  display: block;
  filter: brightness(0);
  opacity: .7;
}

@media (max-width: 560px) {
  .dp-citas__marcas img { height: 15px; }
}


/* === dopat-confianza (confianza.css) === */
/* ============================================================================
   DoPatagonia — Franja de confianza

   Una sola línea, muy tranquila, con el registro de SERNATUR y las tres
   plataformas donde hay reseñas públicas. Fondo azul profundo, el mismo de la
   banda del formulario, para que las dos bandas oscuras de la página se
   reconozcan como la misma familia.

   Los logotipos vienen recortados del sello que ya estaba en el pie, así que
   son los mismos de siempre; lo único nuevo es que tienen fondo transparente
   y que debajo va el dato real.
   ============================================================================ */

.dp-confianza {
  --dp-cf-fondo: #17486A;
  --dp-cf-claro: rgba(255, 255, 255, .72);

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 30px 20px 28px;
  background: var(--dp-cf-fondo);
}

/* Variante clara: sin banda de color, sobre el fondo que haya. Va como pie
   del bloque de reseñas, separada por un filete para que se lea como "de
   aquí salen estas reseñas" y no como un bloque suelto. */
.dp-confianza--claro {
  --dp-cf-claro: #55534E;
  width: auto;
  max-width: 1120px;
  margin: 26px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid #E3DED4;
  background: none;
}

.dp-confianza--claro .dp-confianza__titulo {
  margin: 0 0 16px !important;
  text-align: center;
  color: #55534E !important;
}

.dp-confianza--claro .dp-confianza__fila {
  justify-content: center;
  gap: 10px 42px;
}

.dp-confianza--claro .dp-confianza__marca a:hover,
.dp-confianza--claro .dp-confianza__marca a:focus-visible {
  background: rgba(0, 0, 0, .045);
}

.dp-confianza--claro .dp-confianza__marca a:focus-visible {
  outline-color: #0E5F94;
}

.dp-confianza--claro .dp-confianza__logo {
  height: 46px;
}

.dp-confianza--claro .dp-confianza__pie {
  margin-top: 5px;
  font-size: 11.5px !important;
}

@media (max-width: 781px) {
  .dp-confianza--claro .dp-confianza__fila {
    justify-content: center;
    gap: 12px 20px;
  }
  .dp-confianza--claro .dp-confianza__logo { height: 34px; }
}

.dp-confianza .dp-confianza__titulo {
  margin: 0 auto 22px !important;
  max-width: 1120px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dp-cf-claro) !important;
}

.dp-confianza__fila {
  list-style: none;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1120px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 14px 46px;
}

.dp-confianza__marca {
  margin: 0 !important;
  flex: 0 1 auto;
  text-align: center;
}

.dp-confianza__marca a {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  padding: 6px 8px;
  transition: background-color .16s ease;
}

.dp-confianza__marca a:hover,
.dp-confianza__marca a:focus-visible {
  background: rgba(255, 255, 255, .07);
}

.dp-confianza__marca a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Cada logotipo con la altura que le toca, no la misma para todos: uno es un
   sello redondo, otro un búho con la palabra debajo y el tercero una palabra
   suelta. A la misma altura de caja se ven de tamaños muy distintos, así que
   la altura de cada uno viene puesta en el propio HTML (--dp-cf-alto). */
.dp-confianza__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}

.dp-confianza__logo img {
  height: var(--dp-cf-alto, 38px);
  width: auto;
  display: block;
}

/* WeTravel no tiene logotipo entre los archivos, así que va escrito. El
   !important es porque las reglas de color de la portada alcanzan a
   cualquier texto de dentro de #content. */
.dp-confianza .dp-confianza__palabra {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 23px !important;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #FFFFFF !important;
}

.dp-confianza .dp-confianza__pie {
  display: block;
  margin-top: 8px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--dp-cf-claro) !important;
  white-space: nowrap;
}

@media (max-width: 781px) {
  .dp-confianza {
    padding: 24px 16px 22px;
  }

  .dp-confianza__fila {
    gap: 18px 26px;
  }

  .dp-confianza__logo { height: 32px; }
  .dp-confianza__logo img { max-height: 32px; }
  .dp-confianza__marca:first-child .dp-confianza__logo img { max-height: 38px; }
  .dp-confianza__palabra { font-size: 18px; }
  .dp-confianza .dp-confianza__pie { font-size: 11.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-confianza__marca a { transition: none; }
}

/* ============================================================================
   VERSIÓN OSCURA, para el pie de página

   En el pie estaba una sola imagen con los tres logotipos y un fondo azul
   pegado dentro. Eso tenía dos problemas: el azul no es del logo y chocaba
   con el verde, y el número del registro de SERNATUR quedaba dentro de una
   foto, así que ni Google ni un lector de pantalla lo veían.

   Aquí cada logotipo va en su pastilla blanca, que es lo único que funciona
   sobre fondo oscuro: el de Tripadvisor es negro y el de Google es de cuatro
   colores, ninguno de los dos se ve sobre verde.
   ============================================================================ */

.dp-confianza--oscuro {
  /* La versión base es una banda azul de lado a lado. En el pie no: es una
     columna más, así que se le quita el ancho de pantalla y el fondo. */
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.dp-confianza--oscuro .dp-confianza__titulo {
  color: rgba(255, 255, 255, .72) !important;
  text-align: left;
}

.dp-confianza--oscuro .dp-confianza__fila {
  justify-content: flex-start;
  gap: 14px 18px;
}

.dp-confianza--oscuro .dp-confianza__logo {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.dp-confianza--oscuro .dp-confianza__pie {
  color: rgba(255, 255, 255, .80) !important;
}

.dp-confianza--oscuro a:hover .dp-confianza__pie,
.dp-confianza--oscuro a:focus-visible .dp-confianza__pie {
  color: #FFFFFF !important;
  text-decoration: underline;
}


/* === dopat-marquesina (marquesina.css) === */
/* ============================================================================
   DoPatagonia — Marquesina de razones

   Las razones pasan en una línea, sin parar: entran por la derecha, cruzan y
   salen por la izquierda. En cuanto la última sale, vuelve a empezar y el
   salto no se ve.

   Cómo funciona: la lista está escrita dos veces seguidas y la pista se mueve
   exactamente la mitad de su ancho. Al llegar al final, lo que se ve en
   pantalla es idéntico a lo que se veía al principio, así que volver al cero
   es invisible.

   Todo es CSS. Si el archivo no cargara, las fichas siguen ahí, quietas, y se
   pueden arrastrar con el dedo.
   ============================================================================ */

.dp-marquesina {
  --dp-mq-vuelta: 46s;
  --dp-mq-verde:  #2C4A26;
  --dp-mq-ink:    #2C2C2C;
  --dp-mq-suave:  #55534E;
  --dp-mq-linea:  #E3DED4;

  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 6px 0 10px;
  overflow: hidden;
}

/* Se desvanece en los dos bordes: así parece que las fichas salen de la
   página y no que se cortan contra un borde invisible. */
.dp-marquesina::before,
.dp-marquesina::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 7vw, 90px);
  z-index: 2;
  pointer-events: none;
}

.dp-marquesina::before {
  left: 0;
  background: linear-gradient(to right, var(--dp-sand, #F7F5F2), rgba(247, 245, 242, 0));
}

.dp-marquesina::after {
  right: 0;
  background: linear-gradient(to left, var(--dp-sand, #F7F5F2), rgba(247, 245, 242, 0));
}

.dp-marquesina__pista {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: dp-mq-correr var(--dp-mq-vuelta) linear infinite;
  will-change: transform;
}

/* Justo la mitad: la pista lleva la lista dos veces. */
@keyframes dp-mq-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Al pasar el ratón se para, para poder leer la que interesa. */
.dp-marquesina:hover .dp-marquesina__pista,
.dp-marquesina:focus-within .dp-marquesina__pista {
  animation-play-state: paused;
}

.dp-marquesina__ficha {
  flex: 0 0 auto;
  width: 306px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--dp-mq-linea);
  border-radius: 12px;
}

.dp-marquesina__icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--dp-mq-verde);
}

.dp-marquesina__icono svg {
  width: 26px;
  height: 26px;
  display: block;
}

.dp-marquesina__texto {
  display: block;
  min-width: 0;
}

.dp-marquesina .dp-marquesina__texto strong {
  display: block;
  margin-bottom: 3px;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--dp-mq-ink);
}

.dp-marquesina .dp-marquesina__texto span {
  display: block;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dp-mq-suave);
}

@media (max-width: 781px) {
  .dp-marquesina__ficha {
    width: 268px;
    padding: 14px 15px;
  }
  .dp-marquesina .dp-marquesina__texto strong { font-size: 16px; }
}

/* Quien tiene las animaciones desactivadas en su sistema no ve nada moverse:
   las fichas se quedan quietas y se arrastran con el dedo. */
@media (prefers-reduced-motion: reduce) {
  .dp-marquesina__pista {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .dp-marquesina__ficha { scroll-snap-align: start; }
  .dp-marquesina__ficha[aria-hidden="true"] { display: none; }
}

/* Una razón comprobable se enseña como enlace. */
.dp-marquesina__ficha--enlace {
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.dp-marquesina__ficha--enlace:hover,
.dp-marquesina__ficha--enlace:focus-visible {
  border-color: var(--dp-mq-verde);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.dp-marquesina__ficha--enlace:focus-visible {
  outline: 2px solid #0E5F94;
  outline-offset: 2px;
}

.dp-marquesina__ficha--enlace .dp-marquesina__texto strong::after {
  content: " ↗";
  font-size: .8em;
  color: var(--dp-mq-verde);
}

@media (prefers-reduced-motion: reduce) {
  .dp-marquesina__ficha--enlace { transition: none; }
}

/* El desvanecido de los bordes se quedaba en 26 px en un teléfono de 375, y a
   esa anchura no se lee como un desvanecido sino como un corte. Se le da el
   mismo peso relativo que en el escritorio.
   Añadido el 2026-09-13. */
@media (max-width: 780px) {
  .dp-marquesina::before,
  .dp-marquesina::after {
    width: 44px;
  }
}


/* === dopat-mapa (mapa.css) === */
/* ============================================================================
   DoPatagonia — Mapa de la Patagonia austral

   El mapa manda: ocupa todo el ancho y es alto. Debajo, los seis nombres en
   una fila. La explicación de cada destino ya no está en una caja aparte: sale
   en una burbuja al pinchar el punto o el nombre.
   ============================================================================ */

.dp-mapa {
  --dp-mp-verde:  #2C4A26;
  --dp-mp-claro:  #4A7A26;
  --dp-mp-ink:    #2C2C2C;
  --dp-mp-suave:  #55534E;
  --dp-mp-linea:  #E3DED4;
  --dp-mp-cta:    #0E5F94;
  --dp-mp-arena:  #F7F5F2;

  max-width: 1120px;
  margin: 0 auto;
}

.dp-mapa__cab {
  margin: 0 0 22px;
}

.dp-mapa .dp-mapa__titulo {
  margin: 0 0 8px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 38px) !important;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--dp-mp-verde) !important;
}

.dp-mapa .dp-mapa__bajada {
  margin: 0 !important;
  max-width: 62ch;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.5;
  color: var(--dp-mp-suave) !important;
}

/* ---- El mapa ----------------------------------------------------------------- */

.dp-mapa__marco {
  position: relative;
  border: 1px solid var(--dp-mp-linea);
  border-radius: 16px;
  overflow: hidden;
  background: #E9EEF2;
}

.dp-mapa__lienzo {
  width: 100%;
  height: clamp(380px, 52vh, 560px);
}

/* Mientras Leaflet no ha cargado, el hueco no debe verse roto. */
.dp-mapa:not(.dp-mapa--listo) .dp-mapa__lienzo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, #E9EEF2 0 14px, #E4EAEF 14px 28px);
}

/* ---- Los puntos --------------------------------------------------------------- */

.dp-mapa__pin {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .15s ease;
}

.dp-mapa__pin--chile     { background: var(--dp-mp-verde); }
.dp-mapa__pin--argentina { background: var(--dp-mp-claro); }

.leaflet-marker-icon:hover .dp-mapa__pin,
.leaflet-marker-icon:focus-visible .dp-mapa__pin {
  transform: scale(1.22);
}

/* ---- Rótulos ------------------------------------------------------------------ */

.dp-mapa__rotulo.leaflet-tooltip {
  background: #FFFFFF;
  border: 1px solid var(--dp-mp-linea);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  padding: 3px 10px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dp-mp-ink);
  white-space: nowrap;
}

.dp-mapa__rotulo.leaflet-tooltip::before { display: none; }

/* ---- La burbuja --------------------------------------------------------------- */

.dp-mapa__burbuja .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 18px 40px -22px rgba(0, 0, 0, .5);
  padding: 4px;
}

.dp-mapa__burbuja .leaflet-popup-content {
  margin: 14px 16px;
  line-height: 1.5;
}

.dp-mapa__burbuja .dp-mapa__ficha { display: block; }

/* ---- Las fichas --------------------------------------------------------------- */

/* Fuera del mapa las fichas no se enseñan: su sitio es la burbuja. Se quedan
   en el HTML —no se borran— para que las lea Google y para que, si el mapa no
   cargara, sigan estando. */
.dp-mapa--listo .dp-mapa__fichas {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dp-mapa__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dp-mapa .dp-mapa__nombre {
  margin: 0 0 5px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: 18.5px !important;
  line-height: 1.2;
  color: var(--dp-mp-ink) !important;
}

.dp-mapa .dp-mapa__texto {
  margin: 0 !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--dp-mp-suave) !important;
}

.dp-mapa .dp-mapa__enlace {
  display: inline-block;
  margin-top: 9px;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dp-mp-cta) !important;
  text-decoration: none;
}

.dp-mapa .dp-mapa__enlace:hover,
.dp-mapa .dp-mapa__enlace:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- La fila de nombres ------------------------------------------------------- */

.dp-mapa__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.dp-mapa__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--dp-mp-linea);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  /* Astra pone TODOS los botones en mayúsculas; aquí son nombres de lugares y
     tienen que leerse como en el mapa. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--dp-mp-ink);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.dp-mapa__chip:hover {
  border-color: var(--dp-mp-verde);
  background: var(--dp-mp-arena);
}

.dp-mapa__chip.es-activo {
  background: var(--dp-mp-verde);
  border-color: var(--dp-mp-verde);
  color: #FFFFFF;
}

.dp-mapa__chip:focus-visible {
  outline: 2px solid var(--dp-mp-cta);
  outline-offset: 2px;
}

.dp-mapa__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dp-mapa__punto--chile     { background: var(--dp-mp-verde); }
.dp-mapa__punto--argentina { background: var(--dp-mp-claro); }
.dp-mapa__chip.es-activo .dp-mapa__punto { background: #FFFFFF; }

@media (max-width: 781px) {
  .dp-mapa__lienzo { height: 420px; }
  .dp-mapa__fila { gap: 7px; }
  .dp-mapa__chip { min-height: 40px; padding: 0 13px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-mapa__pin,
  .dp-mapa__chip { transition: none; }
}


/* === dopat-segmentos (segmentos.css) === */
/* ============================================================================
   DoPatagonia — "¿Quién viaja?"

   Cuatro pestañas y un panel. Sin JavaScript se ven los cuatro paneles uno
   debajo de otro: se lee todo igual, solo que sin gracia.
   ============================================================================ */

.dp-segmentos {
  --dp-sg-verde: #2C4A26;
  --dp-sg-claro: #4A7A26;
  --dp-sg-ink:   #2C2C2C;
  --dp-sg-suave: #55534E;
  --dp-sg-linea: #E3DED4;
  --dp-sg-arena: #F7F5F2;
  --dp-sg-cta:   #0E5F94;

  max-width: 1120px;
  margin: 0 auto;
}

.dp-segmentos__cab { margin: 0 0 22px; }

.dp-segmentos .dp-segmentos__titulo {
  margin: 0 0 8px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 38px) !important;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--dp-sg-verde) !important;
}

.dp-segmentos .dp-segmentos__bajada {
  margin: 0 !important;
  max-width: 60ch;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.5;
  color: var(--dp-sg-suave) !important;
}

/* ---- Pestañas ----------------------------------------------------------------- */

.dp-segmentos__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.dp-segmentos .dp-segmentos__pestana {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--dp-sg-linea);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  /* Astra pone todos los botones en mayúsculas. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--dp-sg-ink);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.dp-segmentos .dp-segmentos__pestana:hover {
  border-color: var(--dp-sg-verde);
  background: var(--dp-sg-arena);
}

.dp-segmentos .dp-segmentos__pestana.es-activa {
  background: var(--dp-sg-verde);
  border-color: var(--dp-sg-verde);
  color: #FFFFFF;
}

.dp-segmentos .dp-segmentos__pestana:focus-visible {
  outline: 2px solid var(--dp-sg-cta);
  outline-offset: 2px;
}

/* ---- Panel -------------------------------------------------------------------- */

/* OJO: el navegador esconde lo que lleva [hidden] con display:none, pero una
   regla de clase con display:grid le gana. Sin esta línea se veían los cuatro
   paneles a la vez. */
.dp-segmentos__panel[hidden] {
  display: none !important;
}

.dp-segmentos__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--dp-sg-linea);
  border-radius: 16px;
  background: #FFFFFF;
}

.dp-segmentos .dp-segmentos__h3 {
  margin: 0 0 10px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 25px) !important;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--dp-sg-verde) !important;
}

.dp-segmentos .dp-segmentos__texto {
  margin: 0 0 16px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.55;
  color: var(--dp-sg-ink) !important;
  max-width: 58ch;
}

.dp-segmentos .dp-segmentos__datos {
  list-style: none;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-segmentos .dp-segmentos__datos li {
  margin: 0 !important;
  padding: 5px 12px 5px 26px;
  position: relative;
  border-radius: 8px;
  background: var(--dp-sg-arena);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dp-sg-verde);
}

.dp-segmentos .dp-segmentos__datos li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 4px;
  margin-top: -3px;
  border-left: 2px solid var(--dp-sg-claro);
  border-bottom: 2px solid var(--dp-sg-claro);
  transform: rotate(-45deg);
}

.dp-segmentos .dp-segmentos__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--dp-sg-cta);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
  transition: background-color .16s ease;
}

.dp-segmentos .dp-segmentos__cta:hover,
.dp-segmentos .dp-segmentos__cta:focus-visible {
  background: #1272B0;
}

/* ---- La cita ------------------------------------------------------------------ */

.dp-segmentos__cita {
  margin: 0 !important;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--dp-sg-arena);
}

.dp-segmentos .dp-segmentos__cita blockquote {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dp-sg-ink);
}

.dp-segmentos .dp-segmentos__cita figcaption {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--dp-sg-suave);
}

/* Sin cita, el texto usa todo el ancho. */
.dp-segmentos__panel:not(:has(.dp-segmentos__cita)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .dp-segmentos__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 22px 20px;
  }
  .dp-segmentos__pestanas { gap: 7px; }
  .dp-segmentos .dp-segmentos__pestana { padding: 0 15px; font-size: 13.5px; }
  .dp-segmentos .dp-segmentos__texto { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-segmentos .dp-segmentos__pestana,
  .dp-segmentos .dp-segmentos__cta { transition: none; }
}


/* === dopat-experiencias (experiencias.css) === */
/* ============================================================================
   DoPatagonia — "Patagonia is not one trip"

   Texto a un lado, cuatro fotos al otro. Las fotos hacen el trabajo: en un
   segundo se ve que aquí no todo es caminar.
   ============================================================================ */

.dp-experiencias {
  --dp-ex-verde: #2C4A26;
  --dp-ex-claro: #4A7A26;
  --dp-ex-ink:   #2C2C2C;
  --dp-ex-suave: #55534E;
  --dp-ex-linea: #E3DED4;
  --dp-ex-cta:   #0E5F94;

  max-width: 1120px;
  margin: 0 auto 34px;
}

.dp-experiencias .dp-experiencias__titulo {
  margin: 0 0 12px !important;
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 38px) !important;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--dp-ex-verde) !important;
}

.dp-experiencias .dp-experiencias__intro {
  margin: 0 0 18px !important;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.55;
  color: var(--dp-ex-ink) !important;
  max-width: 56ch;
}

/* ---- La lista ----------------------------------------------------------------- */

.dp-experiencias .dp-experiencias__lista {
  list-style: none;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: grid;
  gap: 7px 18px;
}

.dp-experiencias .dp-experiencias__lista li {
  margin: 0 !important;
  padding-left: 22px;
  position: relative;
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dp-ex-ink);
}

.dp-experiencias .dp-experiencias__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--dp-ex-claro);
  border-bottom: 2px solid var(--dp-ex-claro);
  transform: rotate(-45deg);
}

.dp-experiencias .dp-experiencias__cierre {
  margin: 0 0 20px !important;
  padding-top: 16px;
  border-top: 1px solid var(--dp-ex-linea);
  font-family: 'Fraunces', Lora, Georgia, serif;
  font-size: 18.5px !important;
  line-height: 1.4;
  color: var(--dp-ex-verde) !important;
  max-width: 46ch;
}

.dp-experiencias .dp-experiencias__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--dp-ex-cta);
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
  transition: background-color .16s ease;
}

.dp-experiencias .dp-experiencias__cta:hover,
.dp-experiencias .dp-experiencias__cta:focus-visible {
  background: #1272B0;
}

@media (min-width: 900px) {
  .dp-experiencias .dp-experiencias__lista {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .dp-experiencias { margin-bottom: 26px; }
  .dp-experiencias .dp-experiencias__cierre { font-size: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-experiencias .dp-experiencias__cta { transition: none; }
}

/* ============================================================================
   LA CINTA DE FOTOS

   Doce fotos suyas pasando sin parar. Mismo truco que la cinta de razones: la
   lista va escrita dos veces y se desplaza justo la mitad, así al volver al
   principio no se nota el salto.

   Se para al pasar el ratón, por si alguien quiere mirar una.
   ============================================================================ */

.dp-cinta {
  --dp-ci-vuelta: 70s;

  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 2px 0;
}

.dp-cinta::before,
.dp-cinta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(30px, 8vw, 110px);
  z-index: 2;
  pointer-events: none;
}

.dp-cinta::before {
  left: 0;
  background: linear-gradient(to right, var(--dp-sand, #F7F5F2), rgba(247, 245, 242, 0));
}

.dp-cinta::after {
  right: 0;
  background: linear-gradient(to left, var(--dp-sand, #F7F5F2), rgba(247, 245, 242, 0));
}

.dp-cinta__pista {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: dp-cinta-correr var(--dp-ci-vuelta) linear infinite;
  will-change: transform;
}

@keyframes dp-cinta-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.dp-cinta:hover .dp-cinta__pista {
  animation-play-state: paused;
}

.dp-cinta .dp-cinta__foto {
  flex: 0 0 auto;
  width: 268px;
  height: 200px;
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #EFEAE2;
}

.dp-cinta .dp-cinta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Una de cada tres, más alta: una cinta perfectamente regular parece un
   catálogo de piedra. */
.dp-cinta .dp-cinta__foto:nth-child(3n) {
  width: 200px;
}

@media (max-width: 781px) {
  .dp-cinta .dp-cinta__foto { width: 200px; height: 148px; }
  .dp-cinta .dp-cinta__foto:nth-child(3n) { width: 148px; }
  .dp-cinta__pista { gap: 9px; }
}

/* Sin animaciones: se quedan quietas y se arrastran con el dedo. */
@media (prefers-reduced-motion: reduce) {
  .dp-cinta__pista {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .dp-cinta .dp-cinta__foto { scroll-snap-align: start; }
  .dp-cinta .dp-cinta__foto[aria-hidden="true"] { display: none; }
}


/* === dopat-ritmo-movil (ritmo-movil.css) === */
/* ============================================================================
   DoPatagonia — El mismo margen para todos, en el móvil

   EL PROBLEMA: cada bloque tenía su propio margen lateral. Midiendo en una
   pantalla de 375 px, el texto empezaba a 29 px en el titular, a 49 en la
   presentación, a 59 en los pasos, a 55 en las reseñas y a 71 en los sellos.
   Cinco sangrías distintas bajando por la misma página. Por separado cada
   bloque está bien; juntos se ven descuadrados, y eso es exactamente lo que
   se nota en el teléfono.

   LA SOLUCIÓN: en el móvil, todos los bloques propios ocupan el ancho de la
   pantalla y llevan el mismo margen de 20 px. Da igual dentro de qué
   contenedor de Spectra hayan caído.
   ============================================================================ */

@media (max-width: 780px) {
  .dp-sobre,
  .dp-pasos,
  .dp-equipo,
  .dp-contacto,
  .dp-resenas,
  .dp-confianza--claro,
  .dp-archivo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  /* El separador de arriba de los sellos, al mismo ancho que el resto. */
  .dp-confianza--claro { margin-top: 26px !important; }
}

/* ============================================================================
   Lo que sobra arriba en el teléfono
   Añadido el 2026-09-13 tras medir la primera pantalla en un móvil de 375 px.

   LO QUE SE MIDIÓ:
     · Contact Us: la cabecera ocupa 86 px y la primera línea de texto no
       empezaba hasta el píxel 200. En medio, 114 px de blanco: 64 de relleno
       del tema (.content-area) y 24 más del artículo. Sobre una pantalla de
       812 px, la cuarta parte de lo primero que se ve era el logotipo y nada.
     · Portada: un bloque espaciador vacío de 68 px entre la cabecera y la
       fotografía, que en el escritorio se nota poco y en el teléfono empuja la
       montaña fuera de la primera pantalla.

   POR QUÉ IMPORTA: la campaña de Google entra casi toda por teléfono. Esos
   130 px son la diferencia entre ver el titular y el botón al abrir, o tener
   que arrastrar para descubrir de qué va la página.

   Sólo por debajo de 781 px. En el escritorio no cambia nada.
   ============================================================================ */

@media (max-width: 780px) {

  .dp-form .content-area.primary,
  .dp-desnuda .content-area.primary {
    padding-top: 16px !important;
  }

  .dp-form .site-main > article,
  .dp-desnuda .site-main > article {
    padding-top: 0 !important;
  }

  /* El espaciador vacío con el que abre la portada. */
  .home .entry-content > .wp-block-spacer:first-child,
  .page-id-5980 .entry-content > .wp-block-spacer:first-child {
    display: none !important;
  }
}

/* ============================================================================
   El boton mientras se esta enviando
   Anadido el 2026-09-13 junto con assets/formulario-guardia.js.

   Sin esto, apagar el boton se veria como un fallo: sigue igual pero no
   responde. Con esto se ve lo que es, un envio en marcha.
   ============================================================================ */

.wpcf7-form .primary-btn1[disabled],
.wpcf7-form button[type="submit"][disabled],
.wpcf7-form input[type="submit"][disabled] {
  opacity: .72;
  cursor: progress;
  pointer-events: none;
}