/* 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: 11px !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: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #6F6A61 !important;   /* 4,82:1 sobre el fondo del pie; #8A8579 daba 3,38 y no pasaba */
  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: #6F6A61 !important;   /* 4,82:1 sobre el fondo del pie; #8A8579 daba 3,38 y no pasaba */
  font-size: 11px !important;
  margin-bottom: 10px !important;
}

.site-footer .dp-confianza--oscuro .dp-confianza__pie {
  color: #55534E !important;
  font-size: 11px !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: 11px !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: 11px !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;
}


/* ------------------------------------------------- dp-dedo-pie, 2026-09-16 */
/*
 * Los enlaces del pie medían 18px de alto con 1,4px hasta el siguiente. Un
 * dedo ocupa unos 45px: caben dos enlaces y medio. Google los señala en
 * "objetivos táctiles" y es uno de los dos únicos fallos de accesibilidad.
 *
 * Se arregla con relleno, no cambiando tamaños de letra: el pie se ve igual,
 * solo que cada enlace tiene su propia zona donde el dedo no se equivoca.
 *
 * Solo en pantallas de teléfono y tablet. En escritorio se apunta con el ratón
 * y el pie se queda exactamente como ella lo aprobó.
 */
@media (max-width: 860px) {
  .site-footer .widget_block .wp-block-list li a,
  .site-footer .widget_block .wp-block-list li strong a,
  .site-footer .widget_text p a {
    display: inline-block;
    padding-block: 5px;
    min-height: 24px;
  }

  .site-footer .widget_block .wp-block-list li {
    margin-bottom: 2px !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; }
}

/* ==========================================================================
   LAS VOCES — las reseñas como una plana de revista
   ==========================================================================

   Sustituye a la cinta que se deslizaba sola sin parar. Aquí no se mueve nada:
   se ven cuatro voces quietas y, cada ocho segundos, un fundido a otras cuatro.

   LO QUE HACE QUE ESTO SE VEA CARO ES EL AIRE, no los adornos. Ni bordes, ni
   sombras, ni fondos por reseña, ni cajas. Lo que separa una de otra es el
   hueco entre ellas.

   Los números salen de medir la referencia que eligió Natalia: su cita es de
   13px en mayúsculas, con espaciado entre letras y centrada. Lo editorial no
   viene del tamaño, viene de las mayúsculas, el espaciado y el aire. La marca
   ya tenía esa misma tipografía en sus citas, así que no se añade ni una
   fuente nueva.

   CUÁNTAS SE VEN A LA VEZ LO MANDA ESTE ARCHIVO, no el JavaScript: la variable
   --dp-voces-por-vista. El script la lee para saber cómo repartir las ocho y
   cuántos puntos dibujar. Si algún día se cambia aquí, el script se entera
   solo.
   ========================================================================== */

.dp-voces {
	--dp-voces-por-vista: 4;
	--dp-voces-aire: clamp(2.2rem, 4.5vw, 5rem);
	width: min(1120px, calc(100% - 2.5rem));
	margin-inline: auto;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	text-align: center;
}

.dp-voces__rejilla {
	display: grid;
	grid-template-columns: repeat(var(--dp-voces-por-vista), minmax(0, 1fr));
	gap: var(--dp-voces-aire);
	align-items: start;
}

.dp-voces__voz {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/*
 * EL FUNDIDO, Y POR QUÉ LAS OCHO SE APILAN EN LA MISMA FILA.
 *
 * Con el script en marcha, las ocho voces se colocan TODAS en la fila 1, y la
 * 1 y la 5 caen en la misma columna, una encima de otra. Las que no tocan se
 * quedan transparentes en su sitio.
 *
 * Si en vez de esto se quitaran del flujo, pasarían dos cosas malas: la
 * sección cambiaría de alto en cada cambio según lo largas que fueran las
 * frases (eso es CLS, salto de maqueta), y las cuatro ocultas dejarían un
 * hueco vacío debajo. Apiladas, el alto de la fila es el de la voz más larga
 * de las ocho y ya no se mueve nunca.
 *
 * La clase .dp-voces--vivo la pone el script. Sin script no hay clase, no hay
 * apilado y se leen las ocho seguidas en dos filas. Que es un final digno.
 */
.dp-voces--vivo .dp-voces__voz {
	grid-row: 1;
	transition: opacity 0.75s ease, transform 0.75s ease;
}

/*
 * CADA TRAMO DE PANTALLA LLEVA SUS PROPIAS REGLAS DE COLUMNA, y los tres tramos
 * son EXCLUYENTES (min-width y max-width a la vez). No es por gusto.
 *
 * Con las reglas de escritorio sueltas y las de móvil dentro de un @media, las
 * de escritorio ganaban igual: `:nth-child()` suma especificidad, así que
 * `.dp-voces--vivo .dp-voces__voz:nth-child(4n+2)` pesa más que
 * `.dp-voces--vivo .dp-voces__voz` aunque esta última esté dentro del @media.
 * Resultado medido en un teléfono de 390px: seguía mandando a las voces a las
 * columnas 2, 3 y 4, la rejilla se inventaba columnas que no existían y pasaba
 * de 200px de alto a 2.525px. Separando los tramos, ninguna regla se escapa al
 * tramo de al lado.
 */
@media (min-width: 1001px) {
	.dp-voces--vivo .dp-voces__voz:nth-child(4n + 1) { grid-column: 1; }
	.dp-voces--vivo .dp-voces__voz:nth-child(4n + 2) { grid-column: 2; }
	.dp-voces--vivo .dp-voces__voz:nth-child(4n + 3) { grid-column: 3; }
	.dp-voces--vivo .dp-voces__voz:nth-child(4n + 4) { grid-column: 4; }
}

.dp-voces--vivo .dp-voces__voz[data-dp-fuera] {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	pointer-events: none;
}

.dp-voces__comilla {
	display: block;
	font-family: 'Fraunces', Lora, Georgia, serif;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1;
	color: #4A7A26;
	margin-bottom: 0.75rem;
}

body #content .dp-voces .dp-voces__cita {
	margin: 0 0 1rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	quotes: none;
}

body #content .dp-voces .dp-voces__cita p {
	margin: 0 !important;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.62 !important;
	letter-spacing: 0.085em;
	text-transform: uppercase;
	font-style: normal !important;
	color: #55534E !important;
	text-wrap: pretty;
}

body #content .dp-voces .dp-voces__quien {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.045em;
	color: #4A7A26 !important;
	line-height: 1.5;
}

/* -------------------------------------------------------------- los puntos */

.dp-voces__puntos {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(2.4rem, 5vw, 4rem);
}

body #content .dp-voces .dp-voces__punto {
	/*
	 * Lo que se puede pulsar mide 24px aunque el punto se vea de 8: en un
	 * teléfono un blanco de 8px no se acierta. El punto lo dibuja el ::after.
	 */
	appearance: none;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 999px;
}

.dp-voces__punto::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #CFC9BE;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.dp-voces__punto[aria-current="true"]::after {
	background: #4A7A26;
	transform: scale(1.15);
}

body #content .dp-voces .dp-voces__punto:hover::after {
	background: #4A7A26;
}

body #content .dp-voces .dp-voces__punto:focus-visible {
	outline: 2px solid #2C4A26;
	outline-offset: 2px;
}

/* --------------------------------------------------- la señal de confianza */

body #content .dp-voces .dp-voces__nota {
	margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0 !important;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 13px !important;
	line-height: 1.7 !important;
	color: #6F6A61 !important;
	letter-spacing: 0.02em;
}

.dp-voces__estrellas {
	color: #4A7A26;
	letter-spacing: 0.12em;
	margin-right: 0.5rem;
}

.dp-voces__fuentes {
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------------- más estrecho */

@media (min-width: 621px) and (max-width: 1000px) {
	/* Dos. Cuatro en una tablet dejarían tiras de tres palabras. */
	.dp-voces {
		--dp-voces-por-vista: 2;
		--dp-voces-aire: clamp(2rem, 5vw, 3rem);
	}

	/* Se apilan de dos en dos: la 1 con la 3, la 2 con la 4... */
	.dp-voces--vivo .dp-voces__voz:nth-child(2n + 1) { grid-column: 1; }
	.dp-voces--vivo .dp-voces__voz:nth-child(2n + 2) { grid-column: 2; }
}

@media (max-width: 620px) {
	/* Una sola, para que se lea de verdad. */
	.dp-voces {
		--dp-voces-por-vista: 1;
	}

	/*
	 * Todas en la misma celda: se ve una cada vez. Se repite el :nth-child
	 * para pesar lo mismo que las reglas de los otros tramos.
	 */
	.dp-voces--vivo .dp-voces__voz:nth-child(n) { grid-column: 1; }

	body #content .dp-voces .dp-voces__cita p {
		font-size: 14px !important;
		line-height: 1.7 !important;
	}
}

/* --------------------------------------------------- movimiento reducido */

/*
 * Sin fundido y sin cambio automático. Se ve el grupo que toque, quieto, y los
 * puntos siguen sirviendo para pasar de uno a otro a mano.
 */
@media (prefers-reduced-motion: reduce) {
	.dp-voces--vivo .dp-voces__voz {
		transition: none !important;
	}

	.dp-voces--vivo .dp-voces__voz[data-dp-fuera] {
		transform: none !important;
	}
}


/* === 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) === */
/* ==========================================================================
   EXPLORE SOUTHERN PATAGONIA — la carta de los seis destinos
   ==========================================================================

   Sustituye al mapa de Leaflet con sus baldosas, sus carreteras y sus
   controles de zoom. Esto es un dibujo, no software de navegación.

   TODO SALE DEL SISTEMA QUE YA EXISTE: los colores son los de paleta-marca
   (--dp-green #2C4A26, --dp-gold-ink #4A7A26, --dp-ink-soft #55534E,
   --dp-line #E3DED4, --dp-sand #F7F5F2), las tipografías son Fraunces y
   Source Sans 3, el radio y los tiempos de transición son los del resto del
   sitio, y el corte de pantalla es el de 860px que ya usaban segmentos y
   programas. Aquí no se inventa un lenguaje visual aparte.
   ========================================================================== */

.dp-carta {
	--dp-carta-verde: #2C4A26;
	--dp-carta-acento: #4A7A26;
	--dp-carta-tinta: #55534E;
	--dp-carta-linea: #E3DED4;
	width: min(1120px, calc(100% - 2.5rem));
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.dp-carta__cab {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

body #content .dp-carta .dp-carta__titulo {
	font-family: 'Fraunces', Lora, Georgia, serif !important;
	margin: 0 0 0.6rem !important;
	font-size: clamp(26px, 3.1vw, 40px) !important;
	line-height: 1.14 !important;
	color: var(--dp-carta-verde) !important;
}

body #content .dp-carta .dp-carta__bajada {
	margin: 0 !important;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--dp-carta-tinta) !important;
	max-width: 56ch;
}

/*
 * DOS COLUMNAS: los seis nombres a la izquierda, el mapa a la derecha. Y ya
 * está: la foto, la frase y los programas viven DENTRO del mapa.
 *
 * LA COLUMNA DEL MAPA ES ALGO MÁS ANCHA QUE EL DIBUJO, y eso es a propósito.
 * Sudamérica en Mercator mide 0,61 de ancho por 1 de alto, así que el dibujo
 * deja un sobrante a cada lado dentro de su columna. Ese sobrante de la
 * izquierda es donde se apoya la ficha; sin él, la foto caería encima de la
 * tierra.
 */
.dp-carta__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.dp-carta__lienzo {
	/* El ancla de la ficha, que va encima del mapa. */
	position: relative;
}

/* ------------------------------------------------- el índice de destinos */

/*
 * UN ÍNDICE DE REVISTA, NO UNA BOTONERA.
 *
 *     01 ─────────── Puerto Natales
 *
 * Antes cada destino llevaba su borde inferior y se leía como una fila de
 * casillas. Aquí lo único que hay es un número, una regla que crece al
 * activarse y el nombre. Sin bordes de caja, sin fondo, sin esquinas
 * redondeadas, sin nada que parezca un control de aplicación.
 */

.dp-carta__indice {
	display: flex;
	flex-direction: column;
	/*
	 * SIN ESTE TOPE EL ÍNDICE SE ESTIRA. La columna de texto pasó a ser la
	 * ancha (antes era la estrecha), y la regla del medio crecía hasta dejar
	 * el número pegado a un borde y el nombre al otro, con medio palmo de nada
	 * entre los dos. Se lee como un índice, no como una fila de puntos
	 * suspensivos.
	 */
	max-width: 30rem;
	margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

body #content .dp-carta .dp-carta__nombre {
	appearance: none;
	display: grid;
	grid-template-columns: auto minmax(1.5rem, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	padding: clamp(0.55rem, 1.2vw, 0.85rem) 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	color: var(--dp-carta-tinta) !important;
	transition: color 0.3s ease;
}

.dp-carta__n {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	/* #B9B2A6 daba 2,1:1 y #7E766A daba 4,481: los dos por debajo del minimo. Este da 4,749. */
	color: #7A7265;
	transition: color 0.3s ease;
}

/* La regla. Nace corta y crece al activarse: es toda la señal que hace falta. */
.dp-carta__regla {
	display: block;
	height: 1px;
	background: var(--dp-carta-linea);
	transform: scaleX(0.34);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease;
}

body #content .dp-carta .dp-carta__etiq {
	font-family: 'Fraunces', Lora, Georgia, serif;
	font-size: clamp(17px, 1.45vw, 21px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

body #content .dp-carta .dp-carta__nombre:hover .dp-carta__regla {
	transform: scaleX(0.62);
}

body #content .dp-carta .dp-carta__nombre.es-activo {
	color: var(--dp-carta-verde) !important;
}

body #content .dp-carta .dp-carta__nombre.es-activo .dp-carta__n {
	color: var(--dp-carta-acento);
}

body #content .dp-carta .dp-carta__nombre.es-activo .dp-carta__regla {
	transform: scaleX(1);
	background: var(--dp-carta-acento);
}

body #content .dp-carta .dp-carta__nombre.es-activo .dp-carta__etiq {
	font-weight: 600;
}

body #content .dp-carta .dp-carta__nombre:focus-visible {
	outline: 2px solid var(--dp-carta-verde);
	outline-offset: 3px;
}

/* ------------------------------ la ficha, encima del propio mapa --------- */

/*
 * ENCIMA DEL MAPA, PISÁNDOLO.
 *
 * Y "encima" es literal. Hubo una versión en la que la ficha quedaba en el
 * margen libre, sin llegar a tocar la tierra. Natalia: "que esto mismo se vea
 * en el mapa". Separados se leían como dos cosas, una foto y un mapa; pisando
 * el dibujo se leen como una sola lámina con su foto pegada encima.
 *
 * SE APOYA SOBRE EL MAR DEL SUROESTE, que es el único trozo grande del
 * encuadre austral donde no hay tierra: el Pacífico al oeste de Tierra del
 * Fuego. Por eso va abajo a la izquierda y no en cualquier esquina.
 *
 * Sin fondo, sin borde, sin sombra, sin esquinas redondeadas: en cuanto se le
 * pone una caja deja de ser una lámina y pasa a ser una ventana de
 * aplicación. La foto ya destaca sola contra un mapa que es casi blanco.
 */
.dp-carta__notas {
	position: absolute;
	left: 5%;
	bottom: 0;
	width: clamp(168px, 34%, 224px);
	/*
	 * Las seis apiladas en la MISMA celda: así el bloque mide siempre lo que
	 * el más alto y no salta nada al cambiar de destino.
	 */
	display: grid;
}

.dp-carta__nota {
	grid-area: 1 / 1;
	margin: 0;
	transition: opacity 0.35s ease;
}

.dp-carta--vivo .dp-carta__nota[hidden] {
	display: block;
	opacity: 0;
	pointer-events: none;
}

/*
 * La proporción va fijada aquí y las medidas van escritas en la etiqueta
 * <img>: las dos cosas juntas reservan el hueco antes de que la foto llegue,
 * y por eso la maqueta no da ningún salto.
 */
.dp-carta__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
}

.dp-carta__pie {
	margin-top: 0.7rem;
}

/*
 * EL NOMBRE Y LAS COORDENADAS NO SE VEN AQUÍ EN ESCRITORIO: están escritos
 * junto al punto del mapa, que es donde Natalia los quiere. Siguen en el HTML
 * porque en el teléfono los rótulos del dibujo no caben y entonces SÍ se
 * enseñan estos. El dato está escrito una vez y cada pantalla usa la copia que
 * le sirve.
 */
.dp-carta__nota-lugar,
.dp-carta__nota-coords {
	display: none;
}

body.home #content .dp-carta p.dp-carta__nota-texto {
	margin: 0 0 0.55rem !important;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--dp-carta-tinta) !important;
}

body #content .dp-carta a.dp-carta__nota-todos {
	display: inline-block;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 12.5px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dp-carta-verde) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(44, 74, 38, 0.32);
	padding-bottom: 1px;
	transition: border-color 0.2s ease;
}

body #content .dp-carta a.dp-carta__nota-todos:hover,
body #content .dp-carta a.dp-carta__nota-todos:focus-visible {
	border-bottom-color: var(--dp-carta-verde);
}

body #content .dp-carta .dp-carta__nota a:focus-visible {
	outline: 2px solid var(--dp-carta-verde);
	outline-offset: 3px;
}

/* -------------------------------------------------------------- el dibujo */

.dp-carta__dibujo {
	margin-bottom: 0;
}

.dp-carta__dibujo svg {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Sin foto al lado, el dibujo recupera altura: ahora es lo unico que se
	 * mira en esta columna.
	 */
	/*
	 * 72vh: el dibujo sale de unos 0,61 x 72vh de ancho, y la columna es algo
	 * más ancha. Ese sobrante de la izquierda es donde vive la anotación.
	 */
	max-height: 72vh;
	margin-inline: auto;
}

/*
 * LA TIERRA. Relleno muy suave y un filo fino: asi se lee como un mapa de
 * revista y no como un grafico. La costa del Pacifico queda deshilachada a
 * proposito, que es como es.
 */
/*
 * EL COLOR SE PONE EN EL GRUPO, NO EN CADA TRAZADO, y esto no es cuestion de
 * gusto.
 *
 * LA ZONA MARCADA se dibuja con un <use>, que clona los trazados sin repetir
 * los 2,9 KB de contorno. Pero un clon de <use> vive en un arbol aparte: las
 * reglas de CSS que apuntan a los originales NO entran ahi. Con el `fill`
 * escrito en `.dp-carta__atlas path`, el clon se quedaba sin relleno y el
 * navegador le ponia el de fabrica: NEGRO. Un manchon negro sobre el mapa.
 *
 * `fill` y `stroke` SI se heredan. Puestos en el grupo de fuera, los trazados
 * los heredan igual, y el clon hereda los del propio <use>. Asi la zona se
 * tiñe con dos lineas y sin duplicar ni un byte de geometria.
 */
.dp-carta__atlas {
	fill: #EDE8E0;
	stroke: #DAD3C7;
	stroke-width: 1;
	stroke-linejoin: round;
}

/* `vector-effect` no se hereda, asi que este si va en cada trazado. */
.dp-carta__atlas path {
	vector-effect: non-scaling-stroke;
}

/* ===================== EL ACERCAMIENTO A LA PATAGONIA ====================
   Se entra viendo Sudamerica entera. Al pulsar el primer destino, el mapa se
   acerca 5 veces a la Patagonia austral y se queda ahi: los destinos que
   vengan despues ya no mueven el mapa.

   LO MUEVE EL CSS, NO EL JAVASCRIPT. El PHP escribe la ampliacion y el
   desplazamiento como variables en el propio <g>; el script solo pone una
   clase. Asi no hay ni un bucle de animacion en la pagina.
   ========================================================================= */

.dp-atlas__mundo {
	/*
	 * ESTAS DOS LINEAS NO SOBRAN. Sin ellas el origen de la transformacion es
	 * el centro de la caja del dibujo y no la esquina del viewBox, asi que la
	 * ampliacion calculada en PHP aterriza en otro sitio.
	 */
	transform-box: view-box;
	transform-origin: 0 0;
	transform: translate(0, 0) scale(1);
	transition: transform 640ms cubic-bezier(0.32, 0.72, 0.2, 1);
}

.dp-carta--austral .dp-atlas__mundo {
	transform: translate(var(--dp-atlas-x), var(--dp-atlas-y)) scale(var(--dp-atlas-k));
}

/*
 * EL CRUCE DE LAS DOS CAPAS. Primero entra la fina y DESPUES se va la gruesa,
 * con 340 ms de retraso. Si se cruzaran a la vez, en mitad del paso las dos
 * estarian al 50% y la tierra se veria mas clara justo entonces: dos formas
 * iguales al 50% no dan una del 100%, dan una del 75%. Como van encadenadas,
 * lo que se ve es el detalle apareciendo encima y el bloque yendose debajo,
 * mientras el ojo esta ocupado con el movimiento.
 */
.dp-atlas__austral {
	opacity: 0;
	transition: opacity 300ms ease;
}

.dp-carta--austral .dp-atlas__austral {
	opacity: 1;
}

.dp-carta--austral .dp-atlas__continente {
	opacity: 0;
	transition: opacity 200ms ease 340ms;
}

/*
 * LA ZONA MARCADA, sin parecer un control. Es la misma tierra recortada al
 * recuadro austral, un punto mas firme, con un filo de un pixel y su nombre
 * al lado. Se va en cuanto empieza el acercamiento: ya no marca nada.
 */
.dp-atlas__foco {
	fill: #E2DACA;
	stroke: #CFC5B1;
}

.dp-atlas__marco {
	fill: none;
	stroke: var(--dp-carta-acento);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.38;
}

/*
 * LOS TAMANOS DE TEXTO VAN EN UNIDADES DEL LIENZO. El viewBox mide 580 de
 * ancho y se dibuja a unos 385 px: una unidad son 0,66 px. Asi que "19" son
 * 12,5 px en pantalla, no 19.
 */
.dp-atlas__zona {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 19px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	fill: #9A9285;
}

.dp-atlas__foco,
.dp-atlas__marco,
.dp-atlas__zona {
	transition: opacity 220ms ease;
}

.dp-carta--austral .dp-atlas__foco,
.dp-carta--austral .dp-atlas__marco,
.dp-carta--austral .dp-atlas__zona {
	opacity: 0;
}

/*
 * Los puntos y los nombres de los paises solo existen con el mapa ya
 * acercado: a la escala del continente los seis destinos son un borron de
 * 23 px y los rotulos no caben. Entran cuando el movimiento ya ha terminado.
 */
/*
 * `visibility: hidden` Y NO SOLO `opacity: 0`, y esto no es cosmética: los
 * puntos son enlaces. Con opacidad cero seguirían recibiendo el foco del
 * tabulador estando invisibles, que es la trampa clásica para quien navega sin
 * ver la pantalla. `visibility` los saca del tabulador de verdad.
 *
 * La transición lleva `visibility` al final para que el elemento siga
 * existiendo mientras se desvanece.
 */
.dp-carta__puntos,
.dp-carta__paises {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.dp-carta--austral .dp-carta__puntos,
.dp-carta--austral .dp-carta__paises {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 300ms ease 400ms, visibility 0s linear 400ms;
}

/* Los dos países, escritos en el mar y sin línea de frontera entre ellos. */
.dp-carta__paises text {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 22px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	fill: #BDB5A8;
}

/*
 * El nombre solo aparece en el punto activo. Los seis a la vez llenaban el
 * dibujo de texto pequeño; además ya están todos en el índice de al lado.
 */
.dp-carta__rotulo {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: var(--dp-carta-verde);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/*
 * LAS COORDENADAS, ESCRITAS EN EL PUNTO. Es lo que pidió Natalia: que el dato
 * viva en el mapa y no en una ficha al lado. Van un escalón por debajo del
 * nombre, en el color de acento y con las cifras de ancho fijo para que no
 * bailen al cambiar de destino.
 */
/*
 * DÓNDE SE PLANTA EL RÓTULO. En el HTML va en la misma x que el punto y es
 * esto lo que lo corre a un lado o a otro, según el destino caiga a la
 * izquierda o a la derecha del mapa. Así el teléfono puede recolocarlo sin
 * pelearse con un valor escrito en el marcado.
 */
.dp-carta__punto--izq .dp-carta__rotulo,
.dp-carta__punto--izq .dp-carta__coordenada {
	text-anchor: end;
	transform: translateX(-30px);
}

.dp-carta__punto--der .dp-carta__rotulo,
.dp-carta__punto--der .dp-carta__coordenada {
	text-anchor: start;
	transform: translateX(30px);
}

.dp-carta__coordenada {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 15px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	fill: var(--dp-carta-acento);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.dp-carta__punto.es-activo .dp-carta__rotulo,
.dp-carta__punto.es-activo .dp-carta__coordenada {
	opacity: 1;
}

/*
 * EL PUNTO ES UN ENLACE. Cursor de mano y foco visible, como cualquier otro.
 * Sin el rectángulo del foco, quien navega con el tabulador no sabría dónde
 * está: en un dibujo no hay subrayado que le sirva de pista.
 */
a.dp-carta__punto {
	cursor: pointer;
}

a.dp-carta__punto:focus-visible {
	outline: 2px solid var(--dp-carta-verde);
	outline-offset: 2px;
}

a.dp-carta__punto:hover .dp-carta__nucleo {
	fill: var(--dp-carta-acento);
}

.dp-carta__nucleo {
	fill: #C6BFB2;
	transition: fill 0.3s ease, r 0.3s ease;
}

.dp-carta__halo {
	fill: none;
	stroke: var(--dp-carta-acento);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.55);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.dp-carta__punto.es-activo .dp-carta__nucleo {
	fill: var(--dp-carta-acento);
	r: 8.5;
}

.dp-carta__punto.es-activo .dp-carta__halo {
	opacity: 1;
	transform: scale(1);
}



/* --------------------------------------------------------------- la foto */









/* ------------------------------------------- portátiles pequeños -------- */

/*
 * ENTRE 861 Y 1080 EL DIBUJO SE ENCOGE UN POCO. A esos anchos la columna del
 * mapa se queda estrecha y el sobrante de la izquierda ya no daba para la
 * ficha: la foto empezaba a pisar la costa por unos 15px. Bajando el tope de
 * alto, el dibujo adelgaza y vuelve a sobrar sitio.
 *
 * Es más barato que estrechar la ficha: la foto es lo que se mira.
 */
@media (min-width: 861px) and (max-width: 1080px) {
	.dp-carta__dibujo svg {
		max-height: 62vh;
	}
}

/* ---------------------------------------------------------------- móvil */

@media (max-width: 860px) {
	/*
	 * NO ES EL DE ESCRITORIO ENCOGIDO. En vertical, dos columnas dejarían el
	 * dibujo del ancho de un dedo y todo ilegible.
	 *
	 * EL ORDEN EN EL TELÉFONO ES OTRO:
	 *
	 *     1. los seis nombres   ¿adónde puedo ir?
	 *     2. el mapa            ¿dónde está?
	 *     3. la anotación       ¿qué viajes pasan por ahí?
	 *     4. la foto y su pie   ¿cómo es?
	 *
	 * Primero se elige y después se mira, que es al revés que en escritorio,
	 * donde las dos cosas están a la vez delante de los ojos.
	 */
	.dp-carta__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: clamp(1.4rem, 4.5vw, 2rem);
	}

	.dp-carta__indice,
	.dp-carta__lienzo {
		grid-column: 1;
		grid-row: auto;
	}

	.dp-carta__indice { order: 1; }
	.dp-carta__lienzo { order: 2; }

	/*
	 * EL TELÉFONO ENSEÑA LO MISMO QUE EL ESCRITORIO, y lo pidió Natalia
	 * expresamente: "en el celular no se ve el mapa como en el escritorio,
	 * tiene que ser los dos iguales".
	 *
	 * Hubo una versión en la que el teléfono se apañaba al revés: los rótulos
	 * del dibujo apagados y el nombre en una ficha colgada debajo del mapa.
	 * Funcionaba, pero eran dos diseños distintos, y eso se nota.
	 *
	 * LO QUE LO HACE POSIBLE es que el mapa pasa a ocupar todo el ancho. Con el
	 * dibujo a 350px en vez de a 226, una unidad del lienzo vale 0,60px y el
	 * texto ya cabe: basta con escribirlo más grande EN UNIDADES DEL LIENZO, no
	 * en píxeles.
	 */
	.dp-carta__rotulo,
	.dp-carta__coordenada {
		display: block;
	}

	/*
	 * Y EN EL TELÉFONO EL RÓTULO VA CENTRADO ENCIMA DEL PUNTO, no al lado.
	 * Al lado no cabe: con la letra más grande, "TORRES DEL PAINE" mide unas
	 * 230 unidades y el punto está a 183 del borde izquierdo, así que se salía
	 * del lienzo y se leía "03' S · 73°03' W". Centrado, el más largo ocupa de
	 * 68 a 298 de 580: cabe con holgura, y los seis caben.
	 */
	/*
	 * OJO A LOS SELECTORES: la colocación de escritorio va en
	 * `.dp-carta__punto--izq .dp-carta__rotulo`, que pesa más que un
	 * `.dp-carta__rotulo` a secas. Si el `transform` del teléfono se escribe
	 * con la clase sola, el de escritorio le gana y el rótulo se queda al lado
	 * del punto. Tiene que repetir la misma forma de selector.
	 */
	.dp-carta__punto--izq .dp-carta__rotulo,
	.dp-carta__punto--der .dp-carta__rotulo {
		text-anchor: middle;
		transform: translateY(-43px);
	}

	.dp-carta__punto--izq .dp-carta__coordenada,
	.dp-carta__punto--der .dp-carta__coordenada {
		text-anchor: middle;
		transform: translateY(-38px);
	}

	.dp-carta__rotulo {
		font-size: 29px;   /* 29 x 0,55 = 16px en pantalla */
	}

	.dp-carta__coordenada {
		font-size: 23px;   /* 12,7px */
	}

	/* Los puntos, también en unidades: uno de 3,6px no se ve ni se pulsa. */
	.dp-carta__nucleo {
		r: 8;
	}

	.dp-carta__punto.es-activo .dp-carta__nucleo {
		r: 11;
	}

	.dp-carta__halo {
		r: 26;
	}

	/*
	 * Y el nombre de la ficha se calla, igual que en escritorio: ya está
	 * escrito en el punto. Sigue en el HTML, que es lo que importa para quien
	 * lee la página sin verla.
	 */
	.dp-carta__nota-lugar,
	.dp-carta__nota-coords {
		display: none;
	}

	body.home #content .dp-carta p.dp-carta__nota-texto {
		font-size: 13px !important;
		margin-bottom: 0.5rem !important;
	}

	/*
	 * El enlace es un objetivo táctil: 44px de alto, que es el mínimo con el
	 * que un dedo acierta sin pensarlo.
	 */
	body #content .dp-carta a.dp-carta__nota-todos {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 13.5px !important;
	}

	/*
	 * LA FICHA SIGUE ENCIMA DEL MAPA, en el mismo sitio que en escritorio: el
	 * mar del suroeste, que en el encuadre austral es el único hueco grande sin
	 * tierra. Un poco más ancha en proporción, porque la pantalla es estrecha.
	 */
	.dp-carta__notas {
		left: 0;
		width: 56%;
	}

	.dp-carta__foto {
		aspect-ratio: 16 / 10;
	}

	/*
	 * EN EL TELÉFONO MANDA EL ANCHO, NO EL ALTO. Sudamérica en Mercator mide
	 * 0,61 de ancho por 1 de alto, así que con un tope de alto bajo el dibujo
	 * salía estrecho: con 44vh eran 226px en un teléfono de 390, y dejaba 132
	 * de nada a cada lado. Subiendo el tope hasta que deja de estorbar, el
	 * dibujo llena la pantalla de lado a lado, que es justo lo que hace que
	 * quepan los rótulos y la ficha encima.
	 */
	.dp-carta__dibujo svg {
		max-height: 62vh;
	}

	/*
	 * EN EL TELÉFONO EL ÍNDICE SE QUEDA PEGADO ARRIBA.
	 *
	 * El problema que planteó Natalia: en un móvil, la lista y el mapa no caben
	 * juntos en la pantalla. Sumando cabecera (175px), índice (276) y mapa
	 * (587) salían 1.038px para una pantalla útil de unos 700. Así que o miras
	 * el mapa o ves los botones, nunca las dos cosas, y para cambiar de destino
	 * hay que subir a ciegas.
	 *
	 * SOLUCIÓN: el índice se pega al borde de arriba mientras el mapa pasa por
	 * debajo. Vayas donde vayas dentro de la sección, los seis nombres están a
	 * un dedo y se ve cuál está elegido.
	 *
	 * Y ADELGAZA: 40px por fila en vez de 46, nombre a 15px, número más
	 * pequeño. Son 240px en vez de 276, y los 40px de alto por 358 de ancho
	 * siguen siendo un objetivo cómodo para el pulgar.
	 *
	 * El fondo blanco y el filo de abajo no son adorno: sin ellos el mapa se
	 * vería por debajo de los nombres al pasar.
	 */
	.dp-carta__indice {
		gap: 0;
		position: sticky;
		top: 0;
		z-index: 3;
		max-width: none;
		margin-bottom: 0;
		padding-bottom: 0.3rem;
		background: #fff;
		border-bottom: 1px solid var(--dp-carta-linea);
	}

	body #content .dp-carta .dp-carta__nombre {
		min-height: 40px;
		padding-block: 0.3rem;
		gap: 0.7rem;
	}

	body #content .dp-carta .dp-carta__etiq {
		font-size: 15px;
	}

	.dp-carta__n {
		font-size: 10px;
	}

	/*
	 * Y EL MAPA ENCOGE LO JUSTO. Con el índice pegado arriba comiendo 240px,
	 * un mapa de 587 dejaba ver menos de la mitad. A 62vh mide 524 de alto y
	 * 320 de ancho: cabe entero en lo que queda de pantalla, con los seis
	 * nombres encima todo el rato.
	 */
	.dp-carta__lienzo {
		margin-top: 0.8rem;
	}

}

/* --------------------------------------------------- movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	body #content .dp-carta .dp-carta__nombre,
	.dp-carta__rotulo,
	.dp-carta__nucleo,
	.dp-carta__halo,
	.dp-carta--vivo .dp-carta__nota,
	.dp-carta__coordenada,
	.dp-atlas__mundo,
	.dp-atlas__austral,
	.dp-atlas__continente,
	.dp-atlas__foco,
	.dp-atlas__marco,
	.dp-atlas__zona,
	.dp-carta__puntos,
	.dp-carta__paises {
		/*
		 * El acercamiento SIGUE OCURRIENDO, pero de golpe. Quien pide menos
		 * movimiento quiere ver el mismo sitio sin que nada se deslice, no
		 * quedarse sin la mitad de la informacion.
		 */
		transition: none !important;
	}
}


/* === 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;
  }
  /*
   * DOS POR DOS EXACTAS, NO TRES Y UNA.
   *
   * Con `flex-wrap` las cuatro opciones caben tres arriba y una suelta debajo,
   * porque los textos miden distinto ("On my own" es corto, "With family" no).
   * Esa cuarta huérfana se ve como un descuido.
   *
   * Con una rejilla de dos columnas el reparto no depende del largo del texto:
   *   On my own    |  As a couple
   *   With family  |  In a group
   *
   * `1fr 1fr` las hace iguales de ancho y `align-items: stretch` (el valor de
   * partida de la rejilla) iguales de alto, así que si una necesita dos líneas
   * las cuatro crecen a la vez y la retícula no se descuadra.
   */
  .dp-segmentos__pestanas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .dp-segmentos .dp-segmentos__pestana {
    padding: 0 10px;
    font-size: 13.5px;
    min-height: 50px;
    width: 100%;
    /* centrado en los dos ejes aunque el texto salte a dos líneas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    hyphens: none;
  }

  .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-relato (relato.css) === */
/* ==========================================================================
   "PATAGONIA IS NOT ONE TRIP" — el relato y las puertas
   ==========================================================================

   CUARTA Y ÚLTIMA VUELTA, 2026-09-14. Clarity dijo que esta sección se comía
   alrededor del 20% de la portada. Historial de altura, de punta a punta:

     3,20 pantallas  →  2,77  →  2,49  →  AHORA

   Y cada vez con MÁS texto dentro, no con menos.

     · el texto va a la izquierda, con una franja ancha de aire a la derecha
     · cinco niveles de tamaño, del rótulo de 13px al cierre de 50px
     · seis frases sueltas; la cursiva marca la Patagonia que NO se camina
     · las curvas de nivel cubren TODO el fondo, con la misma opacidad
     · las dos fotos se tocan en el centro y se abren como puertas
     · las puertas son una BANDA APAISADA, no dos paneles verticales
     · se retiró la tira de etiquetas: esos conceptos van dentro del relato

   COLORES Y TIPOS SON LOS DEL SISTEMA: crema #f7f5f2, verde #2C4A26, Fraunces
   y Source Sans 3. Ni una fuente ni un color nuevo.
   ========================================================================== */

.dp-relato,
.dp-puertas {
	--dp-relato-fondo: #f7f5f2;
	--dp-relato-tinta: #2c4a26;
	--dp-relato-apagado: 0.19;
	--dp-curvas-op: 0.07;
	--dp-cordal-op: 0.055;
	--dp-suave: rgba(44, 74, 38, 0.86);
	/*
	 * --dp-medio es para el texto pequeño que HAY QUE PODER LEER: el rótulo de
	 * arriba y el inventario de experiencias. Medido sobre el azul noche, el
	 * --dp-tenue de al lado da 3,9 a 1 de contraste y a 13px eso no pasa el
	 * mínimo de accesibilidad, que son 4,5. Con 0,66 salen 5,5 a 1.
	 * --dp-tenue se queda para lo que es decoración: reglas, pies de lámina.
	 */
	--dp-medio: rgba(44, 74, 38, 0.68);
	--dp-tenue: rgba(44, 74, 38, 0.5);
}

/* ======================== LOS TONOS DE LA SECCIÓN =========================
   ELEGIDO: noche #1A3A5C, el azul de la cabecera y del logo. Se probo contra
   el crema #F7F5F2 y el verde hondo #1F3619 y gano el azul.

   El crema sigue siendo el valor de partida de las variables, asi que quitar
   la clase .dp-tono--noche devuelve la seccion a claro sin tocar nada mas.

   TODO CUELGA DE TRES VARIABLES: fondo, tinta y la opacidad de las curvas.
   Cambiar de tono no toca ni una regla de maqueta, solo esos tres valores.
   ========================================================================= */

.dp-relato.dp-tono--noche,
.dp-puertas.dp-tono--noche {
	--dp-relato-fondo: #1A3A5C;
	--dp-relato-tinta: #F1F4F7;
	--dp-curvas-op: 0.11;
	--dp-cordal-op: 0.085;
	--dp-suave: rgba(241, 244, 247, 0.82);
	--dp-medio: rgba(241, 244, 247, 0.66);
	--dp-tenue: rgba(241, 244, 247, 0.5);
}

/* El botón del cierre se invierte en los dos tonos oscuros. */
.dp-tono--noche .dp-puertas__cta-flecha {
	background: var(--dp-relato-tinta);
	color: var(--dp-relato-fondo);
}

body.home #content .dp-tono--noche a.dp-puertas__cta:focus-visible {
	outline-color: var(--dp-relato-tinta);
}



/* ------------------------------------------------------------------ relato */

.dp-relato {
	position: relative;
	overflow: hidden;
	background: var(--dp-relato-fondo);
	/*
	 * Menos aire arriba y abajo que antes. Parte de la sensación de "me tiene
	 * atrapado" venía de aquí, no solo del tamaño de la letra. Tercera vuelta:
	 * de 7vw a 5,4vw, que en una pantalla de 1.280 son 40px menos por lado.
	 */
	padding-block: clamp(2.1rem, 3.7vw, 3.7rem);
}

.dp-relato__lineas {
	position: relative;
	z-index: 1;
	/*
	 * A LA IZQUIERDA, con una franja ancha de aire a la derecha. El texto ocupa
	 * poco más de la mitad del ancho útil y el resto se deja respirar: eso es
	 * lo que hace que se lea como una plana de revista y no como un cartel.
	 */
	width: min(1120px, calc(100% - 2.5rem));
	margin-inline: auto;
	text-align: left;
}

body.home #content .dp-relato .dp-relato__ante {
	display: block;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--dp-medio) !important;
	margin: 0 0 clamp(1rem, 2.2vw, 1.6rem) !important;
}

/*
 * CINCO ESCALONES, NO UN CARTEL.
 *
 *   13px   el rótulo de arriba
 *   63px   el titular
 *   17px   la entradilla, en dos párrafos
 *   40px   las seis frases
 *   50px   el cierre
 *
 * Todo con clamp(), así que en el teléfono la misma escala se comprime sola.
 * Antes las frases medían 72px y por eso la sección se comía la pantalla: lo
 * que hace que algo se lea como editorial no es el tamaño, es que haya varios
 * tamaños.
 */
body.home #content .dp-relato h2.dp-relato__linea--titulo {
	font-family: 'Fraunces', Lora, Georgia, serif !important;
	font-size: clamp(33px, 4.3vw, 63px) !important;
	line-height: 1.05 !important;
	font-weight: 600 !important;
	letter-spacing: -0.018em;
	color: var(--dp-relato-tinta) !important;
	/* Poco aire: justo debajo va la frase comercial, que es su remate. */
	margin: 0 0 clamp(0.7rem, 1.4vw, 1.15rem) !important;
	max-width: 15ch;
}

/*
 * LA ENTRADILLA, EN DOS PÁRRAFOS. Pequeña y en la tipografía de texto, no en
 * la de titulares: dice lo que se vende y tiene que sonar a alguien hablando.
 *
 * El primero reconoce lo que la gente vino a buscar (el W, el O, guiado o
 * autoguiado). El segundo da el giro. Van separados porque son dos ideas
 * distintas y el punto y aparte es lo que deja respirar al giro.
 */
body.home #content .dp-relato .dp-relato__intro {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important;
	font-size: clamp(14.5px, 1.2vw, 17px) !important;
	line-height: 1.6 !important;
	letter-spacing: 0.005em;
	color: var(--dp-suave) !important;
	margin: 0 0 0.45rem !important;
	max-width: 46ch;
}

body.home #content .dp-relato .dp-relato__intro--giro {
	margin: 0 0 clamp(1.2rem, 2.2vw, 1.85rem) !important;
}

body.home #content .dp-relato .dp-relato__linea {
	font-family: 'Fraunces', Lora, Georgia, serif !important;
	font-size: clamp(23px, 2.75vw, 40px) !important;
	line-height: 1.16 !important;
	font-weight: 400 !important;
	letter-spacing: -0.012em;
	color: var(--dp-relato-tinta) !important;
	/*
	 * SEIS FRASES SUELTAS Y UN SOLO HUECO ENTRE ELLAS. En la vuelta anterior
	 * iban de dos en dos, con un hueco pequeño dentro de la pareja y uno
	 * grande entre parejas. La redacción nueva no va en parejas: son seis
	 * frases seguidas, así que el ritmo lo lleva la cursiva y no el aire.
	 */
	margin: 0 0 clamp(0.32rem, 0.7vw, 0.6rem) !important;
	max-width: 36ch;
	text-wrap: pretty;
}

/*
 * LA CURSIVA NO ES DECORACIÓN, ES UNA CLASIFICACIÓN: marca las frases de la
 * Patagonia que NO se camina (el glaciar desde el agua, el día en la estancia,
 * los paseos cortos). La redonda se queda con lo que la gente vino buscando.
 * Son tres de seis, con una sangría pequeña. Ponerla en las seis sería el
 * cliché de revista de moda.
 */
body.home #content .dp-relato .dp-relato__linea--italica {
	font-style: italic;
	padding-left: clamp(1.2rem, 3.5vw, 3.2rem);
	color: var(--dp-suave) !important;
}

body.home #content .dp-relato .dp-relato__linea--cierre {
	font-size: clamp(27px, 3.4vw, 50px) !important;
	font-style: italic;
	margin-top: clamp(1.4rem, 2.7vw, 2.3rem) !important;
	max-width: 22ch;
}

.dp-relato .dp-pal {
	transition: opacity 0.25s ease-out;
}

.dp-relato--vivo .dp-pal {
	opacity: var(--dp-relato-apagado);
}

.dp-relato--vivo .dp-pal.dp-pal--viva {
	opacity: 1;
}

/* ---------------------------------------------------- el campo de terreno */

/*
 * MÁS SUPERFICIE, NO MÁS CONTRASTE. Las curvas cubren ahora toda la sección
 * en vez de un rincón, pero siguen al 0,07. Si se ven antes que el texto,
 * están mal: la regla es esa y no el tamaño.
 */
.dp-terreno {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	opacity: var(--dp-terreno-visible, 1);
	color: var(--dp-relato-tinta);
}





/* El monte, abajo del todo y cortado. Nunca detrás del texto, siempre bajo él. */




/*
 * El pie lleva el mismo prefijo `body.home #content` que el resto de la hoja,
 * que es el que usa home.css para el tamaño de los párrafos de la portada.
 *
 * NOTA DE PRUEBAS: si este pie se mide a 16px, mirar la caché antes que el
 * selector. Al vaciar uploads/dopat-css/ cambia el nombre de la hoja
 * combinada, pero la página servida desde la caché de WP Engine puede seguir
 * apuntando al nombre viejo. Recargar con otro parámetro en la dirección.
 */
body.home #content .dp-relato .dp-terreno__pie {
	position: absolute;
	right: 0;
	bottom: 1.4rem;
	margin: 0 !important;
	text-align: right;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 11px !important;
	line-height: 1.7 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: currentColor !important;
	opacity: 0.3;
}

.dp-terreno__pie span {
	display: block;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

/* ----------------------------------------------------------- las puertas */

.dp-puertas {
	background: var(--dp-relato-fondo);
}

.dp-puertas__pista {
	/*
	 * LAS TRES LÍNEAS DE ABAJO NO SOBRAN. Astra le mete a los elementos sueltos
	 * dentro de .entry-content un `max-width: 1200px` con márgenes automáticos.
	 * Sin anularlo, las puertas medían 1.200px en una pantalla de 1.440 y
	 * quedaban 120px de crema a cada lado: dejaban de ser puertas y parecían
	 * dos fotos flotando. Medido el 2026-09-14.
	 */
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	/*
	 * LA PIEZA ENTERA MIDE 1,14 PANTALLAS: 88svh pegados más 26svh de recorrido.
	 * Historial: 1,65 → 1,42 → 1,36 → 1,14.
	 *
	 * AQUÍ ESTABA EL GASTO DE VERDAD, no en el texto. Bajar el trozo pegado de
	 * 100svh a 88 y el recorrido de 36 a 26 quita más de un cuarto de pantalla
	 * sin tocar una sola palabra. Las puertas acaban de abrirse tras unas 19svh
	 * de scroll, que sigue sobrando para que se entienda el gesto, y el mensaje
	 * se queda a la vista el resto del camino.
	 *
	 * Y QUE EL TROZO PEGADO NO LLENE LA PANTALLA ES BUENO: por arriba y por
	 * abajo asoma lo que hay antes y después, así que nunca da la sensación de
	 * estar atrapado en una pantalla que no avanza.
	 */
	height: calc(88svh + 26svh);
}

.dp-puertas__pin {
	position: sticky;
	/*
	 * El alto pegado es una variable para poder acortarlo en el teléfono sin
	 * tocar nada más, y `top` lo centra: si el pin mide menos que la pantalla,
	 * se queda en medio en vez de pegado arriba.
	 */
	--dp-pin-alto: 88svh;
	top: calc((100svh - var(--dp-pin-alto)) / 2);
	height: var(--dp-pin-alto);
	/*
	 * El recorte es obligatorio: sin él, las hojas al abrirse se salen del
	 * documento y aparece una barra horizontal en toda la página.
	 */
	overflow: hidden;
	display: grid;
	place-items: center;
	/*
	 * ABIERTO POR DEFECTO. Si no hay JavaScript las hojas están fuera y se ve
	 * el mensaje con su botón. Cerrarlas es lo que hace el script, y solo
	 * cuando ya está en marcha.
	 */
	--dp-puertas-avance: 1;
}

.dp-puertas--vivo .dp-puertas__pin {
	--dp-puertas-avance: 0;
}

.dp-puertas__mensaje {
	position: relative;
	z-index: 1;
	text-align: center;
	width: min(620px, calc(100% - 3rem));
	padding-block: 2rem;
}

body.home #content .dp-puertas h3.dp-puertas__titulo {
	font-family: 'Fraunces', Lora, Georgia, serif !important;
	margin: 0 0 0.8rem !important;
	font-size: clamp(30px, 3.8vw, 54px) !important;
	line-height: 1.08 !important;
	font-weight: 600 !important;
	letter-spacing: -0.018em;
	color: var(--dp-relato-tinta) !important;
}

body.home #content .dp-puertas .dp-puertas__texto {
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	margin: 0 auto 1.8rem !important;
	font-size: clamp(15px, 1.05vw, 17px) !important;
	line-height: 1.6 !important;
	color: var(--dp-suave) !important;
	max-width: 40ch;
}

body.home #content .dp-puertas a.dp-puertas__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dp-relato-tinta) !important;
	text-decoration: none;
	padding: 0.4rem 0.2rem;
}

.dp-puertas__cta-texto {
	border-bottom: 1px solid var(--dp-tenue);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.dp-puertas__cta-flecha {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--dp-relato-tinta);
	color: #fff;
	flex: 0 0 auto;
	transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.home #content .dp-puertas a.dp-puertas__cta:hover .dp-puertas__cta-flecha,
body.home #content .dp-puertas a.dp-puertas__cta:focus-visible .dp-puertas__cta-flecha {
	transform: translateX(4px);
}

body.home #content .dp-puertas a.dp-puertas__cta:hover .dp-puertas__cta-texto {
	border-bottom-color: var(--dp-relato-tinta);
}

body.home #content .dp-puertas a.dp-puertas__cta:focus-visible {
	outline: 3px solid var(--dp-relato-tinta);
	outline-offset: 4px;
	border-radius: 4px;
}

/*
 * LA BANDA APAISADA.
 *
 * Antes las dos fotos iban de arriba abajo de la pantalla: dos paneles
 * verticales de 100svh que en el teléfono eran una pared. Ahora van dentro de
 * una franja centrada y horizontal.
 *
 * `min(62svh, 52vw)` es lo que la mantiene apaisada SIEMPRE. Sin el 52vw, en
 * una pantalla alta y estrecha el tope en svh daría una banda casi cuadrada;
 * con él la proporción del par nunca baja de 16:9.
 *
 * DE ANCHO VA A SANGRE, y eso tiene una consecuencia que conviene dejar
 * escrita: en una pantalla ancha y baja el par sale MÁS apaisado que 16:9
 * (2,58:1 en 1.440x900). Es lo que pasa cuando manda el tope de alto y el
 * ancho es el de la pantalla. Se eligió respetar el tope de alto, que es lo
 * que encoge la sección; llegar a 16:9 exacto a 1.440 pediría 810px, o sea
 * 90svh, justo lo contrario de lo que se busca. Y ponerle márgenes a los lados
 * no es opción: una puerta con márgenes es una tarjeta.
 */
.dp-puertas__banda {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: min(62svh, 52vw);
	transform: translateY(-50%);
	z-index: 2;
}

/*
 * LAS DOS HOJAS. Media banda cada una, tocándose exactamente en el centro:
 * sin hueco, sin tarjeta, sin sombra, sin esquinas redondeadas. El 50,4% y el
 * -0,4% de más son para que no se vea la costura entre las dos cuando el
 * navegador redondea los píxeles.
 */
.dp-puertas__hoja {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.4%;
	z-index: 2;
	overflow: hidden;
	will-change: transform;
}

.dp-puertas__hoja--izq {
	left: -0.4%;
	transform: translate3d(calc(var(--dp-puertas-avance) * -101%), 0, 0);
}

.dp-puertas__hoja--der {
	right: -0.4%;
	transform: translate3d(calc(var(--dp-puertas-avance) * 101%), 0, 0);
}

.dp-puertas__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * EL ENCUADRE, Y AQUÍ EL SEGUNDO NÚMERO ES EL QUE IMPORTA.
 *
 * LA IZQUIERDA: las Torres salían descabezadas en pantallas anchas y bajas, y
 * Natalia lo vio. El porqué: la foto es 4:3 (1,333) y el hueco cambia de
 * proporción con la pantalla. En 1.440x900 el hueco es 1,30 y no recorta casi
 * nada; en un portátil de 1.512x850 es 1,45 y entonces SÍ recorta por arriba y
 * por abajo, y las puntas de las torres están pegadas al borde de arriba. Con
 * el encuadre al 24% el recorte se lo lleva la grava del suelo, que no la
 * echa de menos nadie, y las torres quedan enteras en cualquier pantalla.
 *
 * LA DERECHA es un original VERTICAL (1.920x2.560) metido en un hueco
 * apaisado: se ve poco más de la mitad de la altura. Al 64% se tira el cielo
 * azul vacío de arriba y quedan dentro las dos cosas que importan, el frente
 * del glaciar y la viajera de la pasarela.
 *
 * Y el primer número corre el motivo hacia AFUERA en cada hoja, lejos de la
 * costura del centro, que es donde un corte se vería mal.
 */
.dp-puertas__img--izq {
	object-position: 46% 24%;
}

.dp-puertas__img--der {
	object-position: 55% 64%;
}

/* ------------------------------------------------------------------ móvil */

@media (max-width: 860px) {
	body.home #content .dp-relato .dp-relato__linea,
	body.home #content .dp-relato .dp-relato__intro {
		max-width: none;
	}

	body.home #content .dp-relato h2.dp-relato__linea--titulo {
		max-width: 14ch;
	}

	body.home #content .dp-relato .dp-relato__linea--cierre {
		max-width: 18ch;
	}

	body.home #content .dp-relato .dp-relato__linea--italica {
		padding-left: 1rem;
	}

	/*
	 * EN EL TELÉFONO LA BANDA ES 4:3 CLAVADO. `75vw` de alto sobre el ancho de
	 * la pantalla da exactamente cuatro a tres, que es lo que se pidió; el
	 * 56svh es solo un tope por si alguien navega en horizontal.
	 */
	.dp-puertas__banda {
		height: min(52svh, 75vw);
	}

	/*
	 * Y el trozo pegado a la pantalla también encoge: 66svh en vez de 88. Con
	 * la banda a 4:3 sobraba medio teléfono de fondo vacío arriba y abajo.
	 */
	.dp-puertas__pin {
		--dp-pin-alto: 66svh;
	}

	.dp-puertas__pista {
	/*
	 * LAS TRES LÍNEAS DE ABAJO NO SOBRAN. Astra le mete a los elementos sueltos
	 * dentro de .entry-content un `max-width: 1200px` con márgenes automáticos.
	 * Sin anularlo, las puertas medían 1.200px en una pantalla de 1.440 y
	 * quedaban 120px de crema a cada lado: dejaban de ser puertas y parecían
	 * dos fotos flotando. Medido el 2026-09-14.
	 */
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
		/*
		 * Menos recorrido: en el teléfono cada pantalla cuesta más dedo. Con el
		 * pin a 66svh, la pieza entera mide 0,86 pantallas en vez de 1,04.
		 */
		height: calc(66svh + 20svh);
	}

	/* Las curvas se quedan, pero más grandes y con menos densidad a la vista. */
	.dp-terreno__curvas {
		inset: -20%;
		width: 140%;
		height: 140%;
	}

	.dp-terreno__monte {
		height: 26%;
	}

	body.home #content .dp-relato .dp-terreno__pie {
		font-size: 11px !important;
		bottom: 0.8rem;
		/*
		 * Alineado con el texto, no pegado al filo. Con `right: 0` la última
		 * letra quedaba tocando el borde de la pantalla y parecía cortada.
		 */
		right: 1.25rem;
	}
}

/* --------------------------------------------------- movimiento reducido */

/*
 * Sin encendido de palabras, sin puertas y sin desvanecer el terreno. Se ve
 * una composición quieta con todo a la vista: el texto a color lleno, las dos
 * fotos abiertas y el mensaje con su botón en medio.
 */
@media (prefers-reduced-motion: reduce) {
	.dp-relato--vivo .dp-pal,
	.dp-relato .dp-pal {
		opacity: 1 !important;
		transition: none !important;
	}

	.dp-terreno {
		opacity: 1 !important;
	}

	.dp-puertas__pista {
	/*
	 * LAS TRES LÍNEAS DE ABAJO NO SOBRAN. Astra le mete a los elementos sueltos
	 * dentro de .entry-content un `max-width: 1200px` con márgenes automáticos.
	 * Sin anularlo, las puertas medían 1.200px en una pantalla de 1.440 y
	 * quedaban 120px de crema a cada lado: dejaban de ser puertas y parecían
	 * dos fotos flotando. Medido el 2026-09-14.
	 */
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
		height: auto;
	}

	.dp-puertas__pin {
		position: static;
		height: auto;
		min-height: 70svh;
		padding-block: clamp(3rem, 8vw, 5rem);
	}

	.dp-puertas--vivo .dp-puertas__pin {
		--dp-puertas-avance: 1;
	}

	.dp-puertas__banda,
	.dp-puertas__hoja {
		display: none;
	}
}

/* ===================== LA CAPA CARTOGRÁFICA, SEGUNDA VERSIÓN =============
   Solo con ?fondo=v2; ver relato.php.

   Las curvas son isolíneas calculadas de un relieve, no trazos decorativos.
   Los dos cordales son el Paine y el Fitz Roy, cada uno en un extremo y los
   dos cortados por el borde de abajo.

   MÁS SUPERFICIE, NO MÁS CONTRASTE: las líneas siguen al 0,07 y los cordales
   al 0,055. La regla no cambia porque el dibujo sea mejor.
   ========================================================================= */

.dp-terreno__relieve {
	position: absolute;
	inset: -6%;
	display: block;
	width: 112%;
	height: 112%;
}

.dp-terreno__isolineas path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: var(--dp-curvas-op);
	stroke-linejoin: round;
	stroke-linecap: round;
}

/*
 * Los dos cordales, uno en cada esquina de abajo y cortados por el borde.
 * Nunca centrados bajo el titular: eso los convertiría en un logotipo.
 */
.dp-cordal {
	position: absolute;
	bottom: -1px;
	display: block;
	height: clamp(120px, 17vw, 230px);
	width: 48%;
}

.dp-cordal--izq { left: -4%; }
.dp-cordal--der { right: -4%; }

.dp-cordal__paine,
.dp-cordal__fitz {
	fill: currentColor;
	opacity: var(--dp-cordal-op);
}

@media (max-width: 860px) {
	/*
	 * En el teléfono se queda UN cordal, el del Paine, y más ancho. Dos
	 * perfiles a ese ancho se tocan en el centro y dejan de leerse como dos
	 * paisajes distantes. Menos elementos, no elementos más pequeños.
	 */
	.dp-cordal--der {
		display: none;
	}

	.dp-cordal--izq {
		width: 108%;
		left: -6%;
		height: clamp(96px, 26vw, 150px);
	}

	/* Menos densidad de curvas: se agranda el encuadre para que entren menos. */
	.dp-terreno__relieve {
		inset: -26%;
		width: 152%;
		height: 152%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-terreno--v2 {
		opacity: 1 !important;
	}
}


/* === 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;
}