/* 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-programa-base (programa-base.css) === */ /* ============================================================================ DoPatagonia — Rediseño visual de la página piloto Guided W Trek Torres del Paine · page-id-7093 (capa base) ---------------------------------------------------------------------------- ALCANCE: solo apariencia. No cambia textos, encabezados, enlaces, atributos alt, precios, campos de formulario, shortcodes ni etiquetas de medición. ACOTADO: todas las reglas empiezan por body.dp-programa (clase que WordPress pone en el únicamente en esta página). Ninguna otra página del sitio se ve afectada. Muchas reglas incluyen además #content, que sube la especificidad lo justo para ganarle al CSS de Astra y de Spectra sin recurrir a !important. SOBRE !important: se usa SOLO en dos situaciones, marcadas una a una: (a) para sobrescribir estilos en línea que el editor de bloques escribe en el propio HTML (font-size, color) y que no se pueden ganar de otro modo sin tocar el contenido; (b) para sobrescribir reglas que ya llevaban !important en el CSS adicional del Personalizador o en el CSS generado por Spectra. TIPOGRAFÍAS: se mantienen Inter y Lora, ya autoalojadas por Astra. No se carga ninguna fuente, script ni recurso nuevo. ============================================================================ */ /* ============================================================================ 1. FICHAS DE COLOR Y MEDIDAS ---------------------------------------------------------------------------- Se declaran sobre #content para que la cascada llegue a todo el contenido de la página sin tocar la cabecera ni el pie, que son compartidos con el resto del sitio. Contrastes verificados (WCAG 2.1): blanco sobre --dp-green ............ 12,34:1 AAA --dp-ink sobre blanco .............. 13,97:1 AAA --dp-ink-soft sobre --dp-sand ...... 7,06:1 AAA blanco sobre --dp-gold-ink ......... 6,09:1 AA (antes 3,74 y 2,24 → fallaba) --dp-gold-ink sobre blanco ......... 6,09:1 AA (antes 3,74 → fallaba) --dp-gold sobre --dp-green ......... 5,50:1 AA ============================================================================ */ body.dp-programa #content { /* Verdes: identidad principal */ --dp-green: #1E3A2F; --dp-green-deep: #152A22; --dp-green-soft: #2A4C3E; /* Grafito: texto */ --dp-ink: #2C2C2C; --dp-ink-soft: #55534E; /* Arena: fondos y separaciones */ --dp-sand: #F7F5F2; --dp-sand-deep: #EFEAE2; --dp-line: #E2DCD1; --dp-line-dark: rgba(255, 255, 255, .22); /* Dorado: acento. Dos tonos, uno para fondo oscuro y otro accesible sobre claro */ --dp-gold: #C8A96E; --dp-gold-ink: #7F5C1D; --dp-gold-ink-h: #6B4E1A; /* Geometría */ --dp-r: 14px; --dp-r-sm: 10px; --dp-gutter: 20px; --dp-max: 1120px; /* Sombras: muy contenidas, tintadas de verde en lugar de negro */ --dp-shadow: 0 1px 2px rgba(30, 58, 47, .05), 0 10px 28px -14px rgba(30, 58, 47, .18); --dp-shadow-lift: 0 2px 4px rgba(30, 58, 47, .06), 0 16px 34px -14px rgba(30, 58, 47, .26); /* Escala de ritmo vertical. NO es un valor único aplicado a todo: cada sección elige el escalón que le corresponde según su densidad. */ --dp-space-xs: 28px; --dp-space-s: 40px; --dp-space-m: 56px; --dp-space-l: 72px; /* Remapeo del azul heredado de la plantilla de Astra (#1a3a5c). Spectra y los bloques lo consumen como var(--ast-global-color-2) para los títulos, el fondo del formulario y el degradado de la sección de fotografía; redefinirlo aquí unifica los tres en un solo movimiento. */ --ast-global-color-2: var(--dp-green); /* WordPress resuelve sus variables de paleta en :root, así que --wp--preset--color--ast-global-color-2 ya viene calculada como #1a3a5c y no hereda el cambio de arriba. Las reglas .has-ast-global-color-N-color usan esta segunda variable con !important, de modo que hay que redefinirla también. Sin esto, el precio seguía saliendo en azul. El color 1 es el verde lima (#5cb829) de la plantilla, que en esta página solo lo usan los tres separadores del bloque "What's included". */ --wp--preset--color--ast-global-color-2: var(--dp-green); --wp--preset--color--ast-global-color-1: var(--dp-line); } @media (min-width: 992px) { body.dp-programa #content { --dp-gutter: 40px; --dp-space-xs: 40px; --dp-space-s: 56px; --dp-space-m: 88px; --dp-space-l: 112px; } } /* ============================================================================ 2. MARCO DE PÁGINA ---------------------------------------------------------------------------- Astra dibuja el artículo como una "tarjeta" con márgenes laterales, así que las secciones a ancho completo no llegaban al borde de la ventana: quedaban franjas blancas a los lados y un hueco de 88 px entre la cabecera y la portada. Aquí el artículo deja de tener relleno propio y cada sección se ocupa de su propio margen interior. Se evita a propósito la técnica de 100vw: con barra de desplazamiento visible provoca desbordamiento horizontal. Al anular el relleno del contenedor no hace falta. ============================================================================ */ body.dp-programa #content .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; } body.dp-programa #content .ast-article-single { padding: 0; background-color: transparent; box-shadow: none; } /* Astra hace que #content empiece 50 px ANTES de que termine la cabecera y lo compensa con un margen superior en #primary (68 px en escritorio, más 64 px de relleno en móvil). Ese es el origen del hueco en blanco de 88 px. Aquí se retira el hueco pero se conserva justo lo necesario para que la fotografía no quede por debajo de la cabecera. AVISO: --dp-header-overlap depende de la altura de la cabecera actual (barra superior de 70 px + fila principal de 90 px). Si se modifica la cabecera hay que volver a medirlo. Está aislado en una sola variable precisamente para eso. */ body.dp-programa #content { --dp-header-overlap: 50px; } body.dp-programa #content #primary { margin-top: 0; margin-bottom: 0; padding-top: 0; } @media (min-width: 922px) { body.dp-programa #content #primary { margin-top: var(--dp-header-overlap); } } /* Las secciones .alignfull ya no necesitan márgenes negativos de compensación */ body.dp-programa #content .entry-content > .alignfull, body.dp-programa #content .entry-content[data-ast-blocks-layout] > .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: none; } /* El primer bloque de Spectra traía márgenes laterales de 20 px que rompían la continuidad de las bandas de color */ body.dp-programa #content .entry-content > .wp-block-uagb-container { margin-left: 0; margin-right: 0; } /* Relleno lateral homogéneo y ancho de lectura común para todas las secciones */ body.dp-programa #content .entry-content > .wp-block-uagb-container, body.dp-programa #content .entry-content > .wp-block-cover { padding-left: var(--dp-gutter); padding-right: var(--dp-gutter); } body.dp-programa #content .uagb-container-inner-blocks-wrap, body.dp-programa #content .wp-block-cover__inner-container { max-width: var(--dp-max); margin-left: auto; margin-right: auto; } /* Todas las secciones comparten el mismo borde izquierdo (1120 px centrados). La longitud de línea del itinerario y de las FAQ se controla dentro de cada tarjeta, en el apartado correspondiente, y no estrechando la sección: así no aparecen sangrados distintos de una sección a otra. */ /* Los separadores del bloque "What's included" venían en verde lima (--ast-global-color-1, #5cb829), resto de la plantilla original de Astra */ body.dp-programa #content .wp-block-separator { border-top-color: var(--dp-line); border-top-width: 1px; background-color: transparent; color: var(--dp-line); opacity: 1; margin: 14px 0; } /* ============================================================================ 3. ESCALA TIPOGRÁFICA ---------------------------------------------------------------------------- Antes: H2 a 26/26/26/24/20/26/24 px y cuerpo a 10, 12, 14 y 16 px sin sistema, con interlineados heredados de hasta el 213 % sobre texto de 10 px. Ahora: una sola escala fluida, mínimo 14 px en cualquier texto de apoyo. El texto y la jerarquía H1–H6 no se tocan: solo su apariencia. ============================================================================ */ body.dp-programa #content .entry-content h1, body.dp-programa #content .entry-content h2, body.dp-programa #content .entry-content h3 { font-family: Lora, Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; /* evita líneas huérfanas; degrada sin efecto */ } body.dp-programa #content .entry-content h1 { font-size: clamp(34px, 6.2vw, 60px); line-height: 1.08; letter-spacing: -0.015em; } body.dp-programa #content .entry-content h2, body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.16; margin-bottom: 0.5em; } body.dp-programa #content .entry-content h3 { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.32; } /* Cuerpo de texto */ body.dp-programa #content .entry-content p, body.dp-programa #content .entry-content li { font-family: Inter, -apple-system, "Segoe UI", sans-serif; font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.65; color: var(--dp-ink); } /* Párrafo introductorio bajo cada H2: un punto por encima del cuerpo */ body.dp-programa #content .wp-block-uagb-advanced-heading + p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--dp-ink-soft); max-width: 62ch; /* longitud de línea legible; antes llegaba a 1100 px */ align-self: flex-start; /* el contenedor de Spectra es flex y centra */ } /* Solo se centra si el propio bloque pide centrado; así el párrafo comparte siempre el borde izquierdo con su encabezado */ body.dp-programa #content .wp-block-uagb-advanced-heading + p.has-text-align-center { align-self: center; margin-left: auto; margin-right: auto; } /* Los encabezados de Spectra se centran solos; se respeta esa alineación */ body.dp-programa #content .uagb-heading-text { color: var(--dp-green); } /* ============================================================================ 4. RITMO VERTICAL POR SECCIÓN ---------------------------------------------------------------------------- Antes el relleno era 48/48, 30/48, 48/30, 48/48, 48/30, 0/0, 20/48 y 64/0. Ahora cada sección recibe el escalón que le corresponde: las densas (itinerario, incluye, FAQ) respiran más que las compactas (precio). ============================================================================ */ /* Precio + tarjetas de resumen: sección compacta, pegada a la portada */ body.dp-programa #content .uagb-block-f667e985 { padding-top: var(--dp-space-s); padding-bottom: var(--dp-space-m); background-color: var(--dp-sand); } /* Galería */ body.dp-programa #content .uagb-block-f5b72319 { padding-top: var(--dp-space-m); padding-bottom: var(--dp-space-m); background-color: #FFFFFF; } /* Itinerario */ body.dp-programa #content .uagb-block-eef8012c { padding-top: var(--dp-space-m); padding-bottom: var(--dp-space-m); background-color: var(--dp-sand); } /* Qué incluye */ body.dp-programa #content .uagb-block-9da4f3ab { padding-top: var(--dp-space-m); padding-bottom: var(--dp-space-m); background-color: #FFFFFF; } /* Preguntas frecuentes */ body.dp-programa #content .uagb-block-f107aa69 { padding-top: var(--dp-space-m); padding-bottom: var(--dp-space-m); background-color: var(--dp-sand); } /* Formulario */ body.dp-programa #content .uagb-block-9b0d69d2 { padding-top: var(--dp-space-l); padding-bottom: var(--dp-space-l); background-color: var(--dp-green); background-image: linear-gradient(180deg, var(--dp-green) 0%, var(--dp-green-deep) 100%); } /* ============================================================================ 5. PORTADA ---------------------------------------------------------------------------- Antes: 88 px de blanco sobre la fotografía, título centrado a media altura sobre un cielo claro y subtítulo de 16 px con poco contraste. Ahora: la fotografía llega al borde, el texto se apoya abajo sobre un velo degradado que garantiza legibilidad sin oscurecer la montaña. ============================================================================ */ /* (a) El bloque de portada lleva en el HTML style="min-height:500px" y style="padding:48px 20px". Son estilos en línea escritos por el editor, así que solo se pueden ajustar con !important sin tocar el contenido. El encuadre de la fotografía (style="object-position:58% 0%") SÍ se respeta: es una decisión de composición tomada al montar la página y con la portada más alta sigue mostrando la cumbre. */ body.dp-programa #content .entry-content > .wp-block-cover { min-height: clamp(460px, 68vh, 620px) !important; padding-top: var(--dp-space-m) !important; padding-bottom: var(--dp-space-m) !important; padding-left: var(--dp-gutter) !important; padding-right: var(--dp-gutter) !important; align-items: flex-end; } @media (min-width: 992px) { body.dp-programa #content .entry-content > .wp-block-cover { min-height: clamp(560px, 74vh, 700px) !important; } } /* Velo degradado. z-index 0 lo coloca por encima de la imagen (z-index 0, pero posterior en el árbol) y por debajo del contenido (z-index 1). */ body.dp-programa #content .entry-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, .02) 0%, rgba(21, 42, 34, .16) 42%, rgba(21, 42, 34, .62) 100% ); } body.dp-programa #content .wp-block-cover__inner-container { position: relative; z-index: 1; width: 100%; } body.dp-programa #content .wp-block-cover h1 { color: #FFFFFF; text-shadow: 0 1px 24px rgba(21, 42, 34, .45); margin-bottom: 14px; } /* Subtítulo de la portada */ body.dp-programa #content .wp-block-cover p { color: rgba(255, 255, 255, .94); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.5; letter-spacing: 0.01em; margin-bottom: 0; text-shadow: 0 1px 16px rgba(21, 42, 34, .5); } /* La portada de Spectra traía su propio contenedor con relleno; se anula para que el texto se alinee con el resto de la retícula */ body.dp-programa #content .wp-block-cover .wp-block-uagb-container { padding: 0; background: none; } /* ============================================================================ 6. BLOQUE DE PRECIO Y LLAMADA A LA ACCIÓN ---------------------------------------------------------------------------- Se agrupa en una tarjeta blanca sobre la banda de arena. En escritorio el precio queda a la izquierda y el botón a la derecha, alineados verticalmente. El texto, el precio y la moneda no se tocan. ============================================================================ */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { background: #FFFFFF; border: 1px solid var(--dp-line); border-radius: var(--dp-r); box-shadow: var(--dp-shadow); padding: 24px 22px; margin-bottom: var(--dp-space-s); gap: 18px; } @media (min-width: 782px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { align-items: center; padding: 28px 32px; gap: 32px; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:last-child { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } } /* (a) Anteponer al estilo en línea del editor: style="font-size:10px" y style="color:#a97c34" en el rótulo "MOST POPULAR PROGRAM". 10 px era ilegible en móvil y el dorado claro no llegaba al contraste mínimo sobre blanco (3,74:1). */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(1) { font-size: 12px !important; color: var(--dp-gold-ink) !important; letter-spacing: 0.16em; line-height: 1.4; margin: 0 0 8px; } /* (a) Precio: style="font-size:22px" en línea */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2) { font-family: Lora, Georgia, serif !important; font-size: clamp(25px, 3.2vw, 34px) !important; line-height: 1.2; color: var(--dp-green); text-wrap: balance; } /* (a) Microcopia bajo el precio: style="font-size:12px" en línea */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { font-size: 15px !important; line-height: 1.55; color: var(--dp-ink-soft); margin: 0 0 16px; } @media (min-width: 782px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { text-align: right; } } /* ============================================================================ 7. TARJETAS DE RESUMEN (.dp-snapshot-grid) ---------------------------------------------------------------------------- Duración · Dificultad · Alojamiento · Experiencia. Antes: título H3 a 13 px y descripción a 12 px, sin fondo ni borde, alturas desiguales. Ahora: cuatro tarjetas iguales, 2×2 en móvil y 4 en escritorio. ============================================================================ */ body.dp-programa #content .dp-snapshot-grid { gap: 12px; align-items: stretch; } body.dp-programa #content .dp-snapshot-grid > .wp-block-column { display: flex; align-items: stretch; } /* El bloque llega con la clase --has-margin, que añade 20 px por debajo de cada columna; sumados al hueco de la retícula daban 30 px entre filas */ body.dp-programa #content .dp-snapshot-grid > .wp-block-column { margin-bottom: 0; align-self: stretch; } body.dp-programa #content .dp-snapshot-grid .uagb-infobox-margin-wrapper { margin: 0; width: 100%; } body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap { width: 100%; background: #FFFFFF; border: 1px solid var(--dp-line); border-radius: var(--dp-r); box-shadow: var(--dp-shadow); } body.dp-programa #content .dp-snapshot-grid .uagb-infobox-margin-wrapper, body.dp-programa #content .dp-snapshot-grid .uagb-ifb-content { height: 100%; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-icon-wrap svg { fill: var(--dp-gold-ink); } /* (b) El CSS adicional del Personalizador ya fija estos valores con !important dentro de @media (max-width: 767px); para cambiarlos hay que igualar el peso. Solo se altera el tamaño y el color: ningún texto cambia. */ @media (max-width: 767px) { body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap { padding: 16px 14px !important; min-height: 132px !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-icon-wrap svg { width: 22px !important; height: 22px !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-title { font-size: 15px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc { font-size: 13.5px !important; line-height: 1.45 !important; } } @media (min-width: 768px) { body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap { padding: 22px 20px; } } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-title { color: var(--dp-green); font-family: Lora, Georgia, serif; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; margin-bottom: 8px; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc { color: var(--dp-ink-soft); } /* ============================================================================ 8. GALERÍA ---------------------------------------------------------------------------- Antes: una sola columna en móvil (2.626 px de recorrido para seis fotos) y ninguna reserva de espacio, así que la página saltaba al cargar. Ahora: dos columnas en móvil y tres en escritorio, con proporción fija que reserva el espacio antes de que la imagen llegue. Las seis fotografías, su orden y sus atributos alt se conservan. ============================================================================ */ body.dp-programa #content .wp-block-uagb-image-gallery .spectra-image-gallery__layout--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; } @media (min-width: 768px) { body.dp-programa #content .wp-block-uagb-image-gallery .spectra-image-gallery__layout--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 14px; } } /* Proporción uniforme: retrato suave en móvil, algo más cuadrado en escritorio */ body.dp-programa #content .spectra-image-gallery__media--grid, body.dp-programa #content .spectra-image-gallery__media-sizer { aspect-ratio: 4 / 5; border-radius: var(--dp-r-sm); overflow: hidden; } @media (min-width: 768px) { body.dp-programa #content .spectra-image-gallery__media--grid, body.dp-programa #content .spectra-image-gallery__media-sizer { aspect-ratio: 3 / 4; } } body.dp-programa #content .spectra-image-gallery__media-thumbnail--grid { object-fit: cover; object-position: center center; border-radius: var(--dp-r-sm); } /* ============================================================================ 9. ITINERARIO (acordeón nativo de WordPress) ---------------------------------------------------------------------------- Antes: siete filas de texto sin ningún indicio visual de que se pudieran desplegar, sin separación entre ellas y con 37 px de alto de pulsación. Ahora: tarjetas blancas sobre arena, 56 px de alto mínimo y una flecha decorativa (pseudoelemento, no añade contenido ni texto). Los siete días y sus textos se conservan intactos. ============================================================================ */ body.dp-programa #content .wp-block-accordion { max-width: none; } body.dp-programa #content .wp-block-accordion-item { background: #FFFFFF; border: 1px solid var(--dp-line); border-radius: var(--dp-r); margin-bottom: 10px; overflow: hidden; } body.dp-programa #content .wp-block-accordion-item.is-open { border-color: rgba(30, 58, 47, .26); box-shadow: var(--dp-shadow); } body.dp-programa #content .wp-block-accordion-heading { margin: 0; font-size: inherit; color: var(--dp-green); } body.dp-programa #content .wp-block-accordion-heading__toggle { position: relative; display: flex; align-items: center; width: 100%; min-height: 56px; padding: 16px 52px 16px 18px; background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer; font-family: Lora, Georgia, serif; font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 600; line-height: 1.35; color: var(--dp-green); } body.dp-programa #content .wp-block-accordion-heading__toggle:hover { background: var(--dp-sand); } /* Flecha: solo decoración */ body.dp-programa #content .wp-block-accordion-heading__toggle::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--dp-gold-ink); border-bottom: 2px solid var(--dp-gold-ink); transform: rotate(45deg); transform-origin: center; } body.dp-programa #content .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after { margin-top: -2px; transform: rotate(-135deg); } body.dp-programa #content .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle { background: var(--dp-sand); } body.dp-programa #content .wp-block-accordion-panel { padding: 0 18px; } /* (a) Los párrafos del panel traen style="font-size:15px" en línea */ body.dp-programa #content .wp-block-accordion-panel p { font-size: 15.5px !important; line-height: 1.68; color: var(--dp-ink); padding-bottom: 18px; margin-top: 0; max-width: 78ch; /* longitud de línea cómoda dentro de la tarjeta */ } /* ============================================================================ 10. QUÉ INCLUYE — tres columnas ---------------------------------------------------------------------------- Alojamiento · Logística · Apoyo en terreno. Tarjetas de arena con borde sobre fondo blanco, de altura igualada, con los puntos de la lista en dorado accesible. Ningún elemento se oculta. ============================================================================ */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 16px; align-items: stretch; } @media (min-width: 782px) { body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 22px; } } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { background: var(--dp-sand); border: 1px solid var(--dp-line); border-radius: var(--dp-r); padding: 24px 22px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { color: var(--dp-green); margin-top: 0; margin-bottom: 10px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { color: var(--dp-ink-soft); font-size: 15px; margin-bottom: 14px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list { padding-left: 1.1em; margin-bottom: 0; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { font-size: 15px; line-height: 1.6; margin-bottom: 8px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::marker { color: var(--dp-gold-ink); } /* ============================================================================ 11. SECCIÓN "MAKE THIS PATAGONIA TRIP YOUR OWN" ---------------------------------------------------------------------------- Fotografía de fondo (navegación al Grey) con texto encima. Antes tenía relleno 0 por los cuatro lados, 273 px de alto en móvil y un relleno derecho del 40 % que también se aplicaba en pantallas pequeñas, comprimiendo el texto. Ahora el velo garantiza contraste y el texto respira en ambos casos. ============================================================================ */ /* LIMITACIÓN DEL RECURSO, no del diseño: grey-glacier-navigation.webp mide 680 × 450 px. Como fondo a sangre se amplía 2,1 veces a 1440 px de ancho y se ve blanda. Además, al recortarla en vertical para móvil, el encuadre por defecto deja en primer plano los chalecos salvavidas en lugar del glaciar. Aquí se elige el encuadre menos malo y se refuerza el velo; la solución real es una fotografía de mayor resolución, que hay que aprobar aparte. */ body.dp-programa #content .uagb-block-40dcf50b { min-height: 0; padding: var(--dp-space-m) var(--dp-gutter); background-position: 78% 26%; background-size: cover; } @media (min-width: 768px) { body.dp-programa #content .uagb-block-40dcf50b { background-position: center 38%; } } body.dp-programa #content .uagb-block-40dcf50b::before { background-image: linear-gradient( 180deg, rgba(21, 42, 34, .62) 0%, rgba(21, 42, 34, .88) 100% ); } @media (min-width: 992px) { body.dp-programa #content .uagb-block-40dcf50b { min-height: 540px; padding: var(--dp-space-l) var(--dp-gutter); display: flex; align-items: center; } body.dp-programa #content .uagb-block-40dcf50b::before { background-image: linear-gradient( 100deg, rgba(21, 42, 34, .93) 0%, rgba(21, 42, 34, .84) 48%, rgba(21, 42, 34, .58) 100% ); } body.dp-programa #content .uagb-block-40dcf50b .uagb-container-inner-blocks-wrap { max-width: var(--dp-max); width: 100%; } /* El texto ocupa poco más de la mitad; la fotografía respira a la derecha */ body.dp-programa #content .uagb-block-40dcf50b .uagb-container-inner-blocks-wrap > * { max-width: 58%; } } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title, body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc, body.dp-programa #content .uagb-block-40dcf50b p, body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { color: #FFFFFF; } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__source-wrap svg { fill: var(--dp-gold); } body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { margin-bottom: 10px; } /* ============================================================================ 12. PREGUNTAS FRECUENTES (bloque FAQ de Rank Math) ---------------------------------------------------------------------------- IMPORTANTE: este bloque genera los datos estructurados FAQPage. No se modifica su marcado, sus identificadores ni su contenido; tampoco se pliega. Las cinco preguntas y sus respuestas siguen visibles e indexables. ============================================================================ */ body.dp-programa #content #rank-math-faq { max-width: none; } body.dp-programa #content #rank-math-faq .rank-math-list-item { background: #FFFFFF; border: 1px solid var(--dp-line); border-radius: var(--dp-r); padding: 22px 22px 6px; margin-bottom: 12px; } body.dp-programa #content #rank-math-faq .rank-math-question { color: var(--dp-green); margin: 0 0 10px; } /* Una de las preguntas viene envuelta en ; se iguala su peso al resto sin tocar el marcado */ body.dp-programa #content #rank-math-faq .rank-math-question strong { font-weight: inherit; } body.dp-programa #content #rank-math-faq .rank-math-answer p { color: var(--dp-ink); margin-bottom: 16px; max-width: 78ch; } /* ============================================================================ 13. BOTONES ---------------------------------------------------------------------------- Antes: cuatro botones con dos dorados distintos (#a97c34 y #C8A96E), dos radios (5 y 8 px), alturas de 27, 37, 38 y 44 px y un halo beige de 40 px. Los tres primeros no alcanzaban el contraste mínimo con texto blanco. Ahora: un solo componente, 48 px de alto mínimo y 6,09:1 de contraste. Los destinos (#request-dates) y los textos no cambian. ============================================================================ */ body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px; border-radius: var(--dp-r-sm); border: 1px solid transparent; background: var(--dp-gold-ink); color: #FFFFFF; box-shadow: none; font-family: Inter, -apple-system, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; text-decoration: none; } body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link:hover, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link:focus, body.dp-programa #content .wp-block-button__link:hover, body.dp-programa #content .wp-block-button__link:focus { background: var(--dp-gold-ink-h); border-color: transparent; color: #FFFFFF; } body.dp-programa #content .uagb-buttons-repeater .uagb-button__link { color: inherit; } /* Sobre fondo oscuro (sección de fotografía) el botón se dibuja en contorno: blanco sobre verde da 12,34:1; al pasar el ratón, verde sobre dorado, 5,50:1 */ body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link { background: transparent; border-color: var(--dp-gold); color: #FFFFFF; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link:hover, body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link:focus { background: var(--dp-gold); border-color: var(--dp-gold); color: var(--dp-green); } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater .uagb-button__link { color: inherit; } /* Los botones sueltos se centran con el resto de la columna */ body.dp-programa #content .uagb-buttons__wrap { gap: 12px; } /* ============================================================================ 14. FORMULARIO DE CONSULTA ---------------------------------------------------------------------------- No se toca ni un campo, ni una validación, ni un destinatario, ni el antispam, ni los nueve campos ocultos de seguimiento, ni los identificadores .dp-booking / #request-dates / .form-inner / .form-note / .primary-btn1, que pueden estar en uso por scripts o por la medición. Solo cambia la presentación: retícula de dos columnas en escritorio, campos de 52 px, tipo de letra de 16 px para que iOS no haga zoom al enfocar, y botón de envío con contraste suficiente. ============================================================================ */ body.dp-programa #content .uagb-block-9b0d69d2 .uagb-heading-text, body.dp-programa #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap > p { color: #FFFFFF; } body.dp-programa #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap > p { color: rgba(255, 255, 255, .88); } body.dp-programa #content .wpcf7 { max-width: 760px; margin: 0 auto; } body.dp-programa #content .dp-booking { margin-top: var(--dp-space-s); } @media (min-width: 768px) { body.dp-programa #content .dp-booking { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } /* El área de texto, el antispam, el botón y la nota ocupan el ancho completo. .mb-30 es la clase que ya trae el envoltorio del área de texto. */ body.dp-programa #content .dp-booking .form-inner.mb-30, body.dp-programa #content .dp-booking .form-inner:not(.mb-20):not(.mb-30), body.dp-programa #content .dp-booking .wpcf7-turnstile, body.dp-programa #content .dp-booking .form-note { grid-column: 1 / -1; } } body.dp-programa #content .dp-booking .form-inner { max-width: none; margin: 0 0 16px; } body.dp-programa #content .dp-booking p { margin: 0; } body.dp-programa #content .dp-booking label { font-size: 14px; font-weight: 600; color: #FFFFFF; letter-spacing: 0.01em; margin-bottom: 7px; } /* La marca de campo opcional/obligatorio: 4,8:1 sobre el verde profundo */ body.dp-programa #content .dp-booking label span { font-weight: 400; color: rgba(255, 255, 255, .78); } body.dp-programa #content .dp-booking input, body.dp-programa #content .dp-booking select, body.dp-programa #content .dp-booking textarea { height: 52px; padding: 12px 14px; border: 1px solid var(--dp-line); border-radius: var(--dp-r-sm); background: #FFFFFF; color: var(--dp-ink); font-family: Inter, -apple-system, sans-serif; font-size: 16px; /* por debajo de 16 px iOS amplía al enfocar */ line-height: 1.4; } body.dp-programa #content .dp-booking textarea { height: auto; min-height: 140px; resize: vertical; } body.dp-programa #content .dp-booking input:focus, body.dp-programa #content .dp-booking select:focus, body.dp-programa #content .dp-booking textarea:focus { border-color: var(--dp-gold); box-shadow: 0 0 0 3px rgba(200, 169, 110, .38); outline: none; } body.dp-programa #content .dp-booking ::placeholder { color: #8A8880; opacity: 1; } /* Botón de envío: blanco sobre --dp-gold-ink = 6,09:1 (antes 2,24:1) */ body.dp-programa #content .dp-booking button[type="submit"] { width: 100%; min-height: 52px; padding: 15px 28px; border: 1px solid transparent; border-radius: var(--dp-r-sm); background: var(--dp-gold-ink); color: #FFFFFF; font-family: Inter, -apple-system, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; } body.dp-programa #content .dp-booking button[type="submit"]:hover { background: var(--dp-gold-ink-h); } @media (min-width: 768px) { body.dp-programa #content .dp-booking button[type="submit"] { width: auto; min-width: 260px; display: block; margin: 6px auto 0; } } body.dp-programa #content .dp-booking .form-note { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .86); margin-top: 16px; max-width: 560px; } /* Reserva de espacio para el widget antispam: evita que la página salte cuando Cloudflare Turnstile termina de dibujarse */ body.dp-programa #content .dp-booking .wpcf7-turnstile { min-height: 68px; margin-bottom: 8px; } /* Mensajes de validación de Contact Form 7: se conservan su texto y su lógica, solo se hacen legibles sobre el fondo oscuro */ body.dp-programa #content .wpcf7-not-valid-tip { color: #FFD9A8; font-size: 13.5px; margin-top: 6px; } body.dp-programa #content .wpcf7-response-output { border-radius: var(--dp-r-sm); border-width: 1px; color: #FFFFFF; font-size: 15px; padding: 14px 16px; margin: 18px 0 0; } /* ============================================================================ 15. FOCO VISIBLE Y ACCESIBILIDAD ---------------------------------------------------------------------------- El foco calculado era "white dotted 1px": invisible sobre fondos claros. Ahora hay un anillo sólido de 3 px que cambia de color según el fondo. ============================================================================ */ body.dp-programa #content a:focus-visible, body.dp-programa #content button:focus-visible, body.dp-programa #content input:focus-visible, body.dp-programa #content select:focus-visible, body.dp-programa #content textarea:focus-visible, body.dp-programa #content [tabindex]:focus-visible { outline: 3px solid var(--dp-gold-ink); outline-offset: 3px; border-radius: 4px; } /* Sobre las dos secciones oscuras el anillo pasa a dorado claro */ body.dp-programa #content .uagb-block-9b0d69d2 a:focus-visible, body.dp-programa #content .uagb-block-9b0d69d2 button:focus-visible, body.dp-programa #content .uagb-block-9b0d69d2 input:focus-visible, body.dp-programa #content .uagb-block-9b0d69d2 textarea:focus-visible, body.dp-programa #content .uagb-block-40dcf50b a:focus-visible { outline-color: var(--dp-gold); } /* El acordeón recibe el foco en el botón: se marca la tarjeta entera */ body.dp-programa #content .wp-block-accordion-heading__toggle:focus-visible { outline-offset: -3px; border-radius: var(--dp-r); } /* ============================================================================ 16. MOVIMIENTO ---------------------------------------------------------------------------- Solo transiciones de color y de la flecha del acordeón, y únicamente si la persona no ha pedido reducir el movimiento. No hay animaciones de entrada, ni desplazamientos, ni vídeo. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content .wp-block-button__link, body.dp-programa #content .dp-booking button[type="submit"], body.dp-programa #content .dp-booking input, body.dp-programa #content .dp-booking textarea, body.dp-programa #content .wp-block-accordion-heading__toggle { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } body.dp-programa #content .wp-block-accordion-heading__toggle::after { transition: transform .2s ease, margin-top .2s ease; } } /* === dopat-programa-boutique (programa-boutique.css) === */ /* ============================================================================ DoPatagonia — Capa editorial · page-id-7093 ---------------------------------------------------------------------------- Segunda dirección: menos caja y más aire. Tipografía grande, espacio generoso, hilos finos en vez de bordes, y movimiento que acompaña la lectura en lugar de decorarla. Se carga DESPUÉS de programa-base.css. Solo apariencia y comportamiento: no cambia textos, precios, enlaces, campos ni etiquetas de medición. Índice 1. Medidas y ritmo 2. Portada cinematográfica 3. Tarjeta de oferta flotante 4. Navegación de secciones (barra pegajosa) 5. Encabezados y cuerpo de texto 6. Fichas de resumen 7. Galería en mosaico + visor de fotos 8. Itinerario como línea de tiempo 9. Qué incluye, sin cajas 10. Preguntas frecuentes 11. Reseñas 12. Formulario 13. Revelado al entrar en pantalla 14. Barra fija de consulta en móvil ============================================================================ */ body.dp-programa #content { --dp-r-lg: 22px; --dp-overlap: 72px; --dp-rail: 3px; } @media (min-width: 992px) { body.dp-programa #content { --dp-overlap: 96px; --dp-space-m: 104px; --dp-space-l: 128px; } } /* ============================================================================ 2. PORTADA CINEMATOGRÁFICA ---------------------------------------------------------------------------- La fotografía respira con una ampliación muy lenta (6 % en 24 s). Es el único movimiento continuo de la página y se apaga entero si el visitante pide movimiento reducido. ============================================================================ */ body.dp-programa #content .entry-content > .wp-block-cover { min-height: clamp(440px, 62vh, 560px) !important; padding-bottom: calc(var(--dp-overlap) + 20px) !important; overflow: hidden; } @media (min-width: 992px) { body.dp-programa #content .entry-content > .wp-block-cover { min-height: clamp(560px, 74vh, 720px) !important; } } @media (prefers-reduced-motion: no-preference) { body.dp-programa #content .wp-block-cover__image-background { animation: dp-respirar 24s ease-out forwards; } } @keyframes dp-respirar { from { transform: scale(1); } to { transform: scale(1.06); } } /* Velo: arriba casi limpio, abajo firme para que el texto blanco aguante */ body.dp-programa #content .entry-content > .wp-block-cover::after { background: linear-gradient( to bottom, rgba(21, 42, 34, .00) 0%, rgba(21, 42, 34, .10) 38%, rgba(21, 42, 34, .52) 78%, rgba(21, 42, 34, .72) 100% ); } body.dp-programa #content .wp-block-cover h1 { font-size: clamp(40px, 7.4vw, 76px) !important; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 18px; text-shadow: 0 2px 30px rgba(21, 42, 34, .5); } body.dp-programa #content .wp-block-cover__inner-container p { font-size: clamp(15px, 1.4vw, 20px) !important; letter-spacing: .04em; } /* Filete dorado bajo el subtítulo, colgado del propio párrafo */ body.dp-programa #content .wp-block-cover__inner-container p::after { content: ""; display: block; width: 60px; height: 2px; margin: 20px auto 0; background: var(--dp-gold); border-radius: 2px; } body.dp-programa #content .wp-block-cover__inner-container p.has-text-align-left::after { margin-left: 0; } /* Señal de desplazamiento: la dibuja programa.js */ .dp-scroll-cue { position: absolute; left: 50%; bottom: calc(var(--dp-overlap, 72px) + 78px); transform: translateX(-50%); z-index: 2; width: 26px; height: 26px; border-right: 2px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .8); border-radius: 3px; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .dp-scroll-cue { animation: dp-cue 2.4s ease-in-out infinite; } } @keyframes dp-cue { 0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: .35; } 50% { transform: translateX(-50%) rotate(45deg) translateY(7px); opacity: .9; } } @media (max-width: 600px) { .dp-scroll-cue { display: none; } } /* ============================================================================ 3. TARJETA DE OFERTA FLOTANTE ============================================================================ */ body.dp-programa #content .uagb-block-f667e985 { position: relative; z-index: 3; margin-top: calc(var(--dp-overlap) * -1); padding-top: 0 !important; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(150%) blur(10px); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--dp-r-lg); box-shadow: 0 2px 6px rgba(21, 42, 34, .06), 0 28px 60px -28px rgba(21, 42, 34, .45); padding: 28px 24px 26px; margin-bottom: var(--dp-space-s); } @media (min-width: 782px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { padding: 34px 40px; } } /* Rótulo con filete */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(1) { display: flex; align-items: center; gap: 10px; font-size: 12px !important; letter-spacing: .18em; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(1)::before { content: ""; flex: 0 0 24px; height: 2px; background: var(--dp-gold); border-radius: 2px; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2) { font-size: clamp(29px, 3.8vw, 42px) !important; letter-spacing: -0.015em; line-height: 1.12; } /* ============================================================================ 4. NAVEGACIÓN DE SECCIONES ---------------------------------------------------------------------------- La construye programa.js con los H2 que ya existen en la página. Sirve para que una página larga se pueda recorrer sin scroll a ciegas: en Clarity el recorrido medio se queda en el 61 % en escritorio. ============================================================================ */ .dp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(255, 255, 255, .95); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--dp-line, #E2DCD1); transform: translateY(-100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility .28s; } /* Va fija y no dentro del flujo: así no interrumpe el montaje de la tarjeta de precio sobre la fotografía. */ .dp-nav.is-ready { transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { .dp-nav { transition: none; } } .dp-nav__inner { display: flex; gap: 6px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dp-nav__inner::-webkit-scrollbar { display: none; } .dp-nav__link { flex: 0 0 auto; padding: 14px 12px; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: #55534E; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .18s ease, border-color .18s ease; } .dp-nav__link:hover { color: #1E3A2F; } .dp-nav__link.is-current { color: #1E3A2F; border-bottom-color: #7F5C1D; } .dp-nav__cta { flex: 0 0 auto; margin-left: auto; padding: 9px 18px; border-radius: 8px; background: #7F5C1D; color: #FFFFFF !important; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-bottom: 0; } .dp-nav__cta:hover { background: #6B4E1A; color: #FFFFFF !important; } @media (max-width: 781px) { .dp-nav__cta { display: none; } .dp-nav__link { padding: 12px 10px; font-size: 13px; } } body.dp-programa #content [id^="dp-seccion"] { scroll-margin-top: 72px; } /* ============================================================================ 5. ENCABEZADOS Y CUERPO ============================================================================ */ body.dp-programa #content .entry-content h2, body.dp-programa #content .uagb-heading-text { font-size: clamp(28px, 3.9vw, 46px) !important; line-height: 1.14; letter-spacing: -0.015em; } body.dp-programa #content .entry-content .wp-block-uagb-advanced-heading::before { content: ""; display: block; width: 38px; height: 2px; margin: 0 0 20px; background: var(--dp-gold); border-radius: 2px; } body.dp-programa #content .entry-content .wp-block-uagb-advanced-heading:has(.has-text-align-center)::before, body.dp-programa #content .entry-content .wp-block-uagb-advanced-heading.uagb-block-f635d634::before { margin-left: auto; margin-right: auto; } body.dp-programa #content .wp-block-cover .wp-block-uagb-advanced-heading::before { display: none; } /* Cuerpo: un punto más grande y más suelto. Se lee mejor y respira. */ body.dp-programa #content .entry-content p, body.dp-programa #content .entry-content li { font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.72; } body.dp-programa #content .wp-block-uagb-advanced-heading + p { font-size: clamp(17px, 1.25vw, 19.5px) !important; line-height: 1.62; color: var(--dp-ink-soft); max-width: 62ch; } /* ============================================================================ 6. FICHAS DE RESUMEN, SIN CAJA ---------------------------------------------------------------------------- Se sustituye el marco por un hilo fino superior. Menos ruido y más aire. ============================================================================ */ body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap { background: transparent !important; border: 0 !important; border-top: 1px solid var(--dp-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 4px 8px !important; min-height: 0 !important; height: 100%; text-align: left !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-content { text-align: left !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-icon-wrap { display: inline-flex !important; align-items: center; justify-content: flex-start; width: auto; height: auto; margin: 0 0 10px !important; background: none; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-icon-wrap svg { width: 20px !important; height: 20px !important; margin: 0 !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-title { font-family: Inter, system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--dp-ink-soft) !important; margin-bottom: 6px !important; } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc { font-family: Lora, Georgia, serif !important; font-size: clamp(16px, 1.5vw, 20px) !important; line-height: 1.3 !important; color: var(--dp-green) !important; } /* ============================================================================ 7. GALERÍA EN MOSAICO Y VISOR DE FOTOS ---------------------------------------------------------------------------- Clarity registró clics muertos sobre las fotos ("Grey Glacier navigation", "Base Torres descent"): la gente intentaba ampliarlas y no pasaba nada. Ahora se abren en un visor. El mosaico da a la primera foto el doble de espacio, que es lo que convierte una retícula en una composición. ============================================================================ */ /* Retícula uniforme: el mosaico con una foto a doble tamaño dejaba huecos y alturas desiguales, porque son siete fotos. Mejor un ritmo regular. */ body.dp-programa #content .spectra-image-gallery__media-wrapper { cursor: zoom-in; border-radius: var(--dp-r); overflow: hidden; } body.dp-programa #content .spectra-image-gallery__media-wrapper:focus-visible { outline: 3px solid var(--dp-gold-ink); outline-offset: 3px; } body.dp-programa #content .spectra-image-gallery__media-thumbnail-caption-wrapper--bar-inside { background-color: transparent !important; background-image: linear-gradient(to top, rgba(21, 42, 34, .82) 0%, rgba(21, 42, 34, 0) 100%) !important; padding: 34px 16px 14px; } body.dp-programa #content .spectra-image-gallery__media-thumbnail-caption { font-family: Inter, system-ui, sans-serif; font-size: 13px !important; color: #FFFFFF !important; letter-spacing: .01em; } @media (prefers-reduced-motion: no-preference) { body.dp-programa #content .spectra-image-gallery__media-thumbnail--grid { transition: transform .6s cubic-bezier(.2, .6, .2, 1); } body.dp-programa #content .spectra-image-gallery__media-wrapper:hover .spectra-image-gallery__media-thumbnail--grid { transform: scale(1.05); } } /* Visor */ .dp-visor { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12, 24, 20, .93); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .dp-visor.is-open { opacity: 1; visibility: visible; } /* Todas las fotografías se ven a la MISMA altura, venga el archivo del tamaño que venga. Antes cada una se mostraba a su tamaño natural y una de ellas (550 px de ancho) aparecía visiblemente más pequeña que el resto. */ .dp-visor__img { height: min(72vh, 720px); width: auto; max-width: 92vw; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); } @media (max-width: 600px) { .dp-visor__img { height: auto; width: 92vw; max-height: 70vh; } } .dp-visor__pie { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: rgba(255, 255, 255, .9); padding: 0 24px; } .dp-visor__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; } .dp-visor__btn:hover { background: rgba(255, 255, 255, .26); } .dp-visor__btn:focus-visible { outline: 3px solid var(--dp-gold, #C8A96E); outline-offset: 2px; } .dp-visor__btn--cerrar { top: 18px; right: 18px; } .dp-visor__btn--prev { left: 14px; top: 50%; transform: translateY(-50%); } .dp-visor__btn--sig { right: 14px; top: 50%; transform: translateY(-50%); } /* ============================================================================ 8. ITINERARIO COMO LÍNEA DE TIEMPO ---------------------------------------------------------------------------- El hilo dorado y el punto de cada día convierten una lista de desplegables en un recorrido. Además toda la fila es pulsable: en Clarity había clics muertos al lado del texto del día. ============================================================================ */ body.dp-programa #content .wp-block-accordion { position: relative; padding-left: 26px; } body.dp-programa #content .wp-block-accordion::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 3px; background: linear-gradient( to bottom, rgba(200, 169, 110, 0) 0%, var(--dp-gold) 10%, var(--dp-gold) 90%, rgba(200, 169, 110, 0) 100% ); border-radius: 2px; } body.dp-programa #content .wp-block-accordion-item { position: relative; background: transparent; border: 0; border-bottom: 1px solid var(--dp-line); border-radius: 0; box-shadow: none; overflow: visible; } body.dp-programa #content .wp-block-accordion-item::before { content: ""; position: absolute; left: -27px; top: 25px; width: 15px; height: 15px; margin-left: 1px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--dp-gold); transition: background-color .2s ease, transform .2s ease; } body.dp-programa #content .wp-block-accordion-item.is-open::before { background: var(--dp-gold-ink); border-color: var(--dp-gold-ink); transform: scale(1.18); } body.dp-programa #content .wp-block-accordion-item.is-open { border-color: var(--dp-line); box-shadow: none; } /* Toda la fila pulsable */ body.dp-programa #content .wp-block-accordion-heading, body.dp-programa #content .wp-block-accordion-heading__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.dp-programa #content .wp-block-accordion-heading__toggle { padding: 22px 4px !important; background: transparent !important; font-size: clamp(16px, 1.3vw, 19px) !important; text-align: left; } body.dp-programa #content .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle { background: transparent !important; color: var(--dp-green); } body.dp-programa #content .wp-block-accordion-panel { padding: 0 4px 26px !important; } body.dp-programa #content .wp-block-accordion-panel p { max-width: 68ch; } /* ============================================================================ 9. QUÉ INCLUYE, SIN CAJAS ============================================================================ */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { background: transparent; border: 0; border-top: 2px solid var(--dp-gold); border-radius: 0; box-shadow: none; padding: 24px 0 0; overflow: visible; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column::before { display: none; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: clamp(19px, 1.7vw, 23px) !important; margin-bottom: 6px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-separator { display: none; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list { list-style: none; padding-left: 0; margin-left: 0; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { position: relative; font-size: 15.5px !important; line-height: 1.6; padding-left: 30px !important; margin-bottom: 14px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::marker { content: ""; } /* Marca de verificación dibujada con dos bordes girados: no añade texto al documento, así que un lector de pantalla lee la lista tal cual. */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 13px; height: 7px; border-left: 2px solid var(--dp-gold-ink); border-bottom: 2px solid var(--dp-gold-ink); transform: rotate(-45deg); border-radius: 1px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: 15px !important; color: var(--dp-ink-soft); margin-bottom: 20px; } /* ============================================================================ 10. PREGUNTAS FRECUENTES ============================================================================ */ body.dp-programa #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: 26px 0; } body.dp-programa #content #rank-math-faq .rank-math-list-item:hover { border-color: var(--dp-line); box-shadow: none; } body.dp-programa #content #rank-math-faq .rank-math-question { font-size: clamp(17px, 1.4vw, 20px) !important; margin-bottom: 10px; } body.dp-programa #content #rank-math-faq .rank-math-answer p { max-width: 72ch; } /* ============================================================================ 11. RESEÑAS ---------------------------------------------------------------------------- Estilo de la sección de opiniones reales de Tripadvisor. El contenido son bloques normales de WordPress: editables y, sobre todo, verificables. ============================================================================ */ /* Fondo claro a propósito: el verde profundo queda reservado para el formulario. Dos bandas oscuras seguidas se leían como un solo bloque. */ body.dp-programa #content .dp-reviews { background: var(--dp-sand-deep); color: var(--dp-ink); } body.dp-programa #content .dp-reviews .wp-block-group__inner-container, body.dp-programa #content .dp-reviews > .wp-block-columns { max-width: var(--dp-max); margin: 0 auto; } body.dp-programa #content .dp-reviews h2 { color: var(--dp-green) !important; text-align: left; } body.dp-programa #content .dp-reviews h2::before { content: ""; display: block; width: 38px; height: 2px; margin: 0 0 20px; background: var(--dp-gold); border-radius: 2px; } body.dp-programa #content .dp-reviews .dp-reviews__meta { font-family: Inter, system-ui, sans-serif; font-size: 14.5px; color: var(--dp-ink-soft); text-align: left; } body.dp-programa #content .dp-reviews .dp-reviews__meta a { color: var(--dp-gold-ink); text-decoration: underline; text-underline-offset: 3px; } body.dp-programa #content .dp-review { border-top: 2px solid var(--dp-gold); padding-top: 22px; } body.dp-programa #content .dp-review p { color: var(--dp-ink) !important; } body.dp-programa #content .dp-review .dp-review__texto { font-family: Lora, Georgia, serif !important; font-size: clamp(16.5px, 1.3vw, 18.5px) !important; line-height: 1.62; } body.dp-programa #content .dp-review .dp-review__firma { font-family: Inter, system-ui, sans-serif !important; font-size: 13.5px !important; color: var(--dp-ink-soft) !important; letter-spacing: .02em; } /* ============================================================================ 12. FORMULARIO ============================================================================ */ body.dp-programa #content .uagb-block-9b0d69d2 { border-radius: 0; } body.dp-programa #content #request-dates, body.dp-programa #content .dp-booking { scroll-margin-top: 80px; } /* ============================================================================ 13. REVELADO AL ENTRAR EN PANTALLA ---------------------------------------------------------------------------- Regla de oro: si el archivo de comportamiento no llega a ejecutarse, TODO se ve igualmente. La clase .dp-anim la pone programa.js, así que sin JS no hay nada oculto. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { body.dp-programa .dp-anim { opacity: 0; transform: translateY(16px); transition: opacity .62s cubic-bezier(.2, .7, .2, 1), transform .62s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; } body.dp-programa .dp-anim.dp-visible { opacity: 1; transform: none; } } /* ============================================================================ 14. BARRA FIJA DE CONSULTA EN MÓVIL ============================================================================ */ .dp-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(160%) blur(8px); border-top: 1px solid var(--dp-line, #E2DCD1); box-shadow: 0 -6px 24px -12px rgba(21, 42, 34, .35); transform: translateY(110%); visibility: hidden; transition: transform .26s cubic-bezier(.2, .7, .2, 1), visibility .26s; } .dp-cta-bar.is-visible { transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { .dp-cta-bar { transition: none; } } .dp-cta-bar__price { flex: 1 1 auto; min-width: 0; font-family: Inter, system-ui, sans-serif; font-size: 12.5px; line-height: 1.3; color: #55534E; letter-spacing: .04em; text-transform: uppercase; } .dp-cta-bar__price b { display: block; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #1E3A2F; } .dp-cta-bar__link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 8px; background: #7F5C1D; color: #FFFFFF; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; } .dp-cta-bar__link:hover, .dp-cta-bar__link:focus { background: #6B4E1A; color: #FFFFFF; } .dp-cta-bar__link:focus-visible { outline: 3px solid #7F5C1D; outline-offset: 2px; } @media (min-width: 782px) { .dp-cta-bar { display: none; } } /* ============================================================================ 15. AJUSTES DE LA SEGUNDA REVISIÓN ============================================================================ */ /* (a) La columna de texto se quedaba estrecha para el ancho disponible: el párrafo terminaba ocupando menos de la mitad de la pantalla. Se ensancha la medida y se sube un punto el cuerpo. */ @media (min-width: 992px) { body.dp-programa #content .entry-content p { max-width: 70ch; } body.dp-programa #content .wp-block-uagb-advanced-heading + p { max-width: 66ch; } body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p { font-size: 17.5px !important; } } /* (b) Las cuatro fichas de resumen igualan altura para que el hilo superior quede a la misma cota aunque un texto ocupe dos líneas. */ body.dp-programa #content .dp-snapshot-grid > .wp-block-column { display: flex; } /* (c) Menos hueco entre la tarjeta de precio y la fila de resumen. */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { margin-bottom: var(--dp-space-xs); } /* (d) La fila de resumen respira antes del primer bloque de texto. */ body.dp-programa #content .dp-snapshot-grid { margin-bottom: var(--dp-space-s); } /* (e) Las dos líneas de "Make This Patagonia Trip Your Own" venían a 12 px. Es texto de contenido, no un rótulo. */ body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { font-size: 15px !important; line-height: 1.5; } /* ============================================================================ 16. TERCERA PASADA: LO QUE SEGUÍA FLOJO ============================================================================ */ /* ---------------------------------------------------------------------------- (a) "Trip overview" era un muro de tres párrafos iguales. El primero pasa a ser entradilla: más cuerpo, color más firme y un filete dorado al costado. Los siguientes bajan a cuerpo normal. Jerarquía dentro del propio texto. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type { position: relative; padding-left: 22px; font-family: Lora, Georgia, serif !important; font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.56 !important; color: var(--dp-green) !important; max-width: 58ch; margin-bottom: 26px; } body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type::before { content: ""; position: absolute; left: 0; top: .32em; bottom: .32em; width: 3px; border-radius: 3px; background: var(--dp-gold); } /* ---------------------------------------------------------------------------- (b) La galería pasa a primer plano: rompe el ancho de lectura y ocupa casi toda la pantalla. Las fotografías son el argumento de venta de un viaje de trekking; tratarlas como ilustración era desaprovecharlas. -------------------------------------------------------------------------- */ /* La galería se queda DENTRO de la retícula de la página. El intento anterior de sacarla a todo lo ancho (margin-left 50 % + translateX) la dejaba desplazada 392 px a la izquierda: el porcentaje del margen y el de la transformación no se miden contra la misma caja. Una banda descuadrada se nota enseguida y arruina la sensación de cuidado, así que la presencia de las fotos se consigue con proporción y ritmo, no rompiendo la alineación. */ body.dp-programa #content .spectra-image-gallery__layout--grid { gap: 10px !important; } /* Señal de que la foto se puede ampliar. Es decorativa: el visor ya es accesible por teclado y el contenedor anuncia su función. */ body.dp-programa #content .spectra-image-gallery__media-wrapper::after { content: ""; position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(to right, #FFFFFF 0 100%) center / 11px 2px no-repeat, linear-gradient(to bottom, #FFFFFF 0 100%) center / 2px 11px no-repeat, rgba(21, 42, 34, .55); opacity: 0; transform: scale(.85); transition: opacity .22s ease, transform .22s ease; pointer-events: none; } body.dp-programa #content .spectra-image-gallery__media-wrapper:hover::after, body.dp-programa #content .spectra-image-gallery__media-wrapper:focus-visible::after { opacity: 1; transform: scale(1); } /* En pantalla táctil no hay hover: la señal se queda puesta, más discreta. */ @media (hover: none) { body.dp-programa #content .spectra-image-gallery__media-wrapper::after { opacity: .8; transform: scale(1); } } /* ---------------------------------------------------------------------------- (c) "Make This Patagonia Trip Your Own": era una banda verde con dos líneas diminutas. Ahora es una sección con presencia — más alto, encabezado grande, los dos argumentos en tipografía legible y el botón destacado. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-40dcf50b { padding-top: var(--dp-space-l) !important; padding-bottom: var(--dp-space-l) !important; } body.dp-programa #content .uagb-block-40dcf50b::before { background: linear-gradient( to bottom, rgba(21, 42, 34, .88) 0%, rgba(21, 42, 34, .72) 45%, rgba(21, 42, 34, .90) 100% ) !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-size: clamp(30px, 4.2vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -0.015em; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { font-size: clamp(17px, 1.3vw, 19.5px) !important; line-height: 1.6 !important; max-width: 54ch; color: rgba(255, 255, 255, .9) !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { font-size: 16px !important; line-height: 1.5; color: #FFFFFF !important; } body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { margin-bottom: 12px; } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__source-wrap svg { width: 18px !important; height: 18px !important; } /* Botón de contorno: más grande y con más contraste sobre la fotografía */ body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link { min-height: 52px; padding: 0 30px !important; border-width: 2px !important; font-size: 14.5px !important; } /* ---------------------------------------------------------------------------- (d) Sección de reseñas: márgenes y retícula -------------------------------------------------------------------------- */ body.dp-programa #content .dp-reviews { padding-top: var(--dp-space-m) !important; padding-bottom: var(--dp-space-m) !important; } body.dp-programa #content .dp-reviews h2 { margin-bottom: 10px; } body.dp-programa #content .dp-reviews .dp-reviews__meta { max-width: 62ch; margin-bottom: 44px; } body.dp-programa #content .dp-reviews .wp-block-columns { gap: 34px; } @media (max-width: 781px) { body.dp-programa #content .dp-reviews .wp-block-columns { gap: 30px; } body.dp-programa #content .dp-review { padding-top: 18px; } } /* ---------------------------------------------------------------------------- (f) BLINDAJE: ningún bloque interactivo puede quedarse oculto. El acordeón de WordPress vuelve a escribir el atributo class cada vez que se abre o se cierra un día, y en ese barrido desaparecía la clase que marca "ya revelado". Resultado: al abrir un día, su texto se desvanecía. Además de sacarlos del revelado, se deja esta red por si otro bloque hace lo mismo. -------------------------------------------------------------------------- */ body.dp-programa .wp-block-accordion-item.dp-anim, body.dp-programa .wp-block-accordion-item .dp-anim, body.dp-programa .wp-block-accordion-panel .dp-anim { opacity: 1 !important; transform: none !important; } /* ---------------------------------------------------------------------------- (g) Pie de foto: el rótulo interior conservaba el azul marino de la plantilla de Astra. Se deja solo el velo degradado del contenedor. -------------------------------------------------------------------------- */ body.dp-programa #content .spectra-image-gallery__media-thumbnail-caption, body.dp-programa #content .spectra-image-gallery__media-thumbnail-caption--bar-inside { background-color: transparent !important; background-image: none !important; padding: 0 !important; } /* (h) Proporción uniforme y algo más alta: las fotos ganan presencia sin salirse de la retícula. */ @media (min-width: 992px) { body.dp-programa #content .spectra-image-gallery__media-sizer { padding-bottom: 122% !important; } } /* (i) Los dos enlaces dentro de la frase de reseñas son enlaces en línea: la norma de tamaño mínimo no los exige, pero un poco de relleno hace el toque más cómodo sin alterar el renglón. */ body.dp-programa #content .dp-reviews__meta a { padding: 6px 2px; } /* ============================================================================ 17. CUARTA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) "QUÉ INCLUYE" EN MÓVIL: había unos 70 px muertos antes de cada grupo, y la nota de camping y refugios quedaba pegada, sin aire para explicarse. -------------------------------------------------------------------------- */ @media (max-width: 781px) { body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 0 !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 22px 0 26px; margin-bottom: 0 !important; } /* El primer grupo no necesita el hilo de separación: ya está el H2 encima */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column:first-child { padding-top: 6px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { margin-bottom: 14px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { margin-bottom: 10px; } } /* La nota de camping y refugios pasa a ser una ficha explicativa, no una posdata apretada. Es información que decide una compra: quien duda entre carpa y refugio necesita entenderla. */ body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p { background: var(--dp-sand); border-left: 3px solid var(--dp-gold); border-radius: 0 var(--dp-r-sm) var(--dp-r-sm) 0; padding: 20px 22px; margin-top: 32px; font-size: 15px !important; line-height: 1.65; max-width: 70ch; } body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p + p { background: transparent; border-left: 0; padding: 0 4px; margin-top: 18px; font-size: 14px !important; color: var(--dp-ink-soft); } /* ---------------------------------------------------------------------------- (b) "MAKE THIS PATAGONIA TRIP YOUR OWN": en móvil el título se montaba encima del texto y todo iba pegado al borde. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title-wrap { margin-bottom: 18px !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { margin: 0 !important; line-height: 1.1 !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { margin: 0 0 26px !important; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-40dcf50b { padding-top: 64px !important; padding-bottom: 64px !important; padding-left: var(--dp-gutter) !important; padding-right: var(--dp-gutter) !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-size: 30px !important; } body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { margin-bottom: 16px; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons__wrap { margin-top: 30px; } } /* ---------------------------------------------------------------------------- (c) ENLACES DE LAS RESEÑAS, DISCRETOS Se quedan (una afirmación verificable vale más que una sin fuente, y abren en pestaña nueva, así que nadie pierde tu página), pero dejan de competir con el formulario: tamaño menor, sin subrayado permanente y en gris. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-reviews__meta a { color: var(--dp-ink-soft); text-decoration: none; border-bottom: 1px solid rgba(127, 92, 29, .45); padding: 6px 1px; } body.dp-programa #content .dp-reviews__meta a:hover, body.dp-programa #content .dp-reviews__meta a:focus-visible { color: var(--dp-gold-ink); border-bottom-color: var(--dp-gold-ink); } /* ---------------------------------------------------------------------------- (d) LA FILA DE DURACIÓN / DIFICULTAD / ALOJAMIENTO / EXPERIENCIA Es lo primero que se lee después del precio: tiene que enganchar. El hilo superior se dibuja solo al aparecer, de izquierda a derecha. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap { position: relative; border-top: 0 !important; padding-top: 22px !important; transition: transform .28s cubic-bezier(.2, .7, .2, 1); } body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--dp-gold) 0%, rgba(200, 169, 110, .28) 100%); transform-origin: left center; } /* Solo se dibuja si el revelado está activo; sin JS aparece ya trazado. */ body.dp-programa .dp-anim .uagb-infobox__content-wrap::before { transform: scaleX(0); transition: transform .75s cubic-bezier(.2, .7, .2, 1) .08s; } body.dp-programa .dp-anim.dp-visible .uagb-infobox__content-wrap::before { transform: scaleX(1); } body.dp-programa #content .dp-snapshot-grid .uagb-ifb-icon-wrap svg { fill: var(--dp-gold-ink) !important; color: var(--dp-gold-ink) !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { body.dp-programa #content .dp-snapshot-grid .uagb-infobox__content-wrap:hover { transform: translateY(-3px); } } /* El dato, un punto más grande: es la respuesta que la gente busca */ body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc { font-size: clamp(17px, 1.6vw, 21px) !important; } /* ---------------------------------------------------------------------------- (e) AJUSTE FINO DE TIPOGRAFÍA Mismas familias (Inter y Lora, ya autoalojadas: no se carga nada nuevo). Lo que cambia es el ajuste: cuerpo un punto mayor en móvil y titulares algo más apretados de letra, que es lo que da aire de revista y no de plantilla. -------------------------------------------------------------------------- */ body.dp-programa #content .entry-content p, body.dp-programa #content .entry-content li { font-size: clamp(16.5px, 1.1vw, 17.5px); } body.dp-programa #content .entry-content h2, body.dp-programa #content .uagb-heading-text, body.dp-programa #content .wp-block-cover h1 { font-feature-settings: "kern" 1, "liga" 1; } body.dp-programa #content .entry-content h3 { letter-spacing: -0.005em; } /* (j) Nota: el titular, la línea de valoraciones y las tarjetas se alinean solos con la retícula de WordPress. No hay que forzar márgenes: hacerlo fue justo lo que descuadró el bloque. */ /* ---------------------------------------------------------------------------- (k) FOTOGRAFÍAS: un ajuste uniforme y muy leve. Son fotografías reales, de viaje, tomadas con lo que había. No se trata de disimularlo —esa autenticidad es parte del argumento— sino de que el conjunto se vea intencionado: un punto más de contraste y de saturación, igual para todas, hace que una serie dispar parezca una serie. Es deliberadamente suave (3 % y 6 %). Más que esto se nota, y una foto sobreprocesada se lee como falsa, que es justo lo contrario de lo que queremos. -------------------------------------------------------------------------- */ body.dp-programa #content .spectra-image-gallery__media-thumbnail--grid, body.dp-programa #content .wp-block-cover__image-background, .dp-visor__img { filter: saturate(1.06) contrast(1.03); } /* ---------------------------------------------------------------------------- (l) EL PRECIO ACOMPAÑA TAMBIÉN EN ESCRITORIO En móvil el precio viaja en la barra fija de abajo. En escritorio no viajaba: una vez pasada la tarjeta, el visitante seguía leyendo sin tenerlo delante. Ahora va en la barra de secciones, junto al botón de consulta. El texto lo pone programa.js leyéndolo de la propia página. -------------------------------------------------------------------------- */ .dp-nav__precio { flex: 0 0 auto; margin-left: auto; padding-left: 18px; font-family: 'Fraunces', Lora, Georgia, serif; font-size: 15px; font-weight: 500; color: #2C4A26; white-space: nowrap; } .dp-nav__precio + .dp-nav__cta { margin-left: 16px; } /* La barra tiene ocho secciones, el precio y el botón: por debajo de 1.280 px no caben sin recortarse, y un precio a medias es peor que ninguno. Por eso el precio aparece solo cuando hay sitio de verdad. En pantallas menores ya viaja en la barra fija de abajo. */ @media (max-width: 1279px) { .dp-nav__precio { display: none; } } /* ============================================================================ 18. QUINTA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) EL PRECIO YA NO VA EN NEGRITA. Iba todo en una línea, en negrita y con la letra apretada: se leía tenso. Ahora el rótulo va arriba, pequeño y en versalitas, y la cifra abajo, grande y de peso normal. Las palabras son exactamente las mismas. -------------------------------------------------------------------------- */ 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 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2) strong { font-weight: 400 !important; } body.dp-programa #content .dp-precio-rotulo { display: block; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dp-ink-soft); margin-bottom: 8px; } body.dp-programa #content .dp-precio-cifra { display: block; font-family: 'Fraunces', Lora, Georgia, serif; font-weight: 400; letter-spacing: -0.01em; color: var(--dp-green); } /* ---------------------------------------------------------------------------- (b) ITINERARIO SIN NEGRITAS. Los días 2 a 6 llevaban en negrita las horas, los kilómetros y el desnivel; los días 1 y 7 no tienen esos datos. El resultado era un bloque con manchas oscuras irregulares. Ahora todo va en peso normal. Nota: la negrita se quita solo en apariencia. El marcado sigue ahí, así que un buscador o un asistente de IA sigue leyendo esos datos como lo importante de cada día. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-accordion-heading__toggle, body.dp-programa #content .wp-block-accordion-heading__toggle-title { font-weight: 500 !important; } body.dp-programa #content .wp-block-accordion-panel strong, body.dp-programa #content .wp-block-accordion-panel b { font-weight: 400 !important; } /* ---------------------------------------------------------------------------- (c) "WHAT'S INCLUDED": EL SALTO DE TAMAÑOS ERA AL REVÉS. El título iba a 24 px, la frase que lo explica a 14 px y la lista a 16,5. Es decir: la explicación era MÁS PEQUEÑA que la lista que resume. Por eso el bloque se sentía inestable. Ahora el bloque usa dos tamaños y nada más: 22 px para el título y 16,5 para todo lo demás. Lo que distingue a la frase de la lista es el color, no el tamaño. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: clamp(19px, 1.5vw, 22px) !important; font-weight: 500 !important; letter-spacing: -0.01em; margin-bottom: 10px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: clamp(16.5px, 1.15vw, 17px) !important; line-height: 1.6; color: var(--dp-ink-soft); margin-bottom: 18px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { border-top-width: 1px; border-top-color: var(--dp-line); padding-top: 22px; } /* El filete dorado de cada columna pasa a ser un acento corto, no una línea completa: menos peso visual, misma función de separar. */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { position: relative; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column::after { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--dp-gold-ink); } /* ---------------------------------------------------------------------------- (d) BOTONES: EL PASO DEL RATÓN ACLARA EN VEZ DE OSCURECER. Oscurecer da sensación de "apagado". Aclarar un punto, levantar el botón dos píxeles y ponerle una sombra suave da sensación de que responde. Contraste del texto blanco sobre el azul aclarado: 5,17:1. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-button__link, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content .dp-booking button[type="submit"], .dp-cta-bar__link, .dp-nav__cta, .dp-side__cta, .ast-custom-button { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } @media (prefers-reduced-motion: reduce) { body.dp-programa #content .wp-block-button__link, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content .dp-booking button[type="submit"] { transition: background-color .18s ease; } } /* ---------------------------------------------------------------------------- (e) TARJETA DE PRECIO FLOTANTE EN ESCRITORIO. Lo mismo que hace la barra fija en el móvil, pero al lado. La construye programa.js leyendo el precio y el botón de la propia página. -------------------------------------------------------------------------- */ .dp-side { position: fixed; right: 24px; top: 50%; transform: translate(24px, -50%); z-index: 45; width: 232px; padding: 22px 20px; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(160%) blur(10px); border: 1px solid var(--dp-line, #E3DED4); border-radius: 18px; box-shadow: 0 2px 6px rgba(21, 42, 34, .06), 0 22px 48px -24px rgba(21, 42, 34, .45); opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1), visibility .28s; } .dp-side.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%); } @media (prefers-reduced-motion: reduce) { .dp-side { transition: none; } } .dp-side__rotulo { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #55534E; margin: 0 0 8px; } .dp-side__precio { display: block; font-family: 'Fraunces', Lora, Georgia, serif; font-size: 26px; font-weight: 400; line-height: 1.15; color: #2C4A26; margin: 0 0 16px; } .dp-side__cta { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border-radius: 8px; background: #0E5F94; color: #FFFFFF !important; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; text-decoration: none; } .dp-side__cta:hover, .dp-side__cta:focus { background: #1272B0; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(14, 95, 148, .8); } .dp-side__cta:focus-visible { outline: 3px solid #0E5F94; outline-offset: 3px; } /* La tarjeta necesita margen libre de verdad. Con el contenido a 1.120 px, en una pantalla de 1.470 (la más habitual en portátiles) solo quedan 175 px por lado: la tarjeta se comería el borde derecho del contenido. Solución: a partir de 1.440 px el contenido se estrecha 80 px —imperceptible al leer— y la tarjeta cabe entera en el margen, sin tapar nada. */ @media (min-width: 1440px) { body.dp-programa #content { --dp-max: 1040px; } } @media (max-width: 1439px) { .dp-side { display: none; } } /* Cuando aparece la tarjeta lateral, la barra superior sobra entera: llevaría el mismo índice y el mismo botón. Dos navegaciones a la vez es ruido, no ayuda. Por debajo de 1.440 px la barra sigue siendo la única y se queda. */ @media (min-width: 1440px) { .dp-nav { display: none; } } /* ============================================================================ 19. SEXTA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) EL PRECIO, MENOS INVASIVO Y CON OTRA FÓRMULA. "Starting price per person" pasa a "From $3,895 per person": misma promesa, dicha como la dice el sector. El rótulo y la coletilla van pequeños; la cifra manda sin gritar. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-precio-rotulo { display: inline-block; font-size: 12px; letter-spacing: .18em; margin-bottom: 4px; } body.dp-programa #content .dp-precio-cifra { display: block; margin-top: 2px; } body.dp-programa #content .dp-precio-nota { display: block; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 400; letter-spacing: .01em; color: var(--dp-ink-soft); margin-top: 6px; } /* ---------------------------------------------------------------------------- (b) TARJETA LATERAL: MÁS DISCRETA Y CON ÍNDICE DE SECCIONES. El mismo listado que ves en el móvil, aquí en vertical y en pequeño, para que en escritorio también se pueda saltar de una parte a otra sin scroll a ciegas. -------------------------------------------------------------------------- */ .dp-side { width: 186px; right: 16px; padding: 16px 16px 14px; border-radius: 16px; box-shadow: 0 1px 3px rgba(21, 42, 34, .05), 0 16px 34px -22px rgba(21, 42, 34, .35); } .dp-side__rotulo { font-size: 10.5px; letter-spacing: .18em; margin-bottom: 4px; } .dp-side__precio { font-size: 23px; margin: 0 0 2px; } .dp-side__nota { display: block; font-family: Inter, system-ui, sans-serif; font-size: 12px; color: #55534E; margin: 0 0 14px; } .dp-side__cta { min-height: 42px; font-size: 12.5px; } .dp-side__indice { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--dp-line, #E3DED4); } .dp-side__indice li { margin: 0; } .dp-side__indice a { display: block; padding: 5px 0 5px 10px; border-left: 2px solid transparent; font-family: Inter, system-ui, sans-serif; font-size: 12.5px; line-height: 1.35; color: #55534E; text-decoration: none; transition: color .16s ease, border-color .16s ease; } .dp-side__indice a:hover { color: #2C4A26; } .dp-side__indice a.is-current { color: #2C4A26; border-left-color: #4A7A26; font-weight: 600; } .dp-side__indice a:focus-visible { outline: 2px solid #0E5F94; outline-offset: 2px; } /* ============================================================================ 20. SÉPTIMA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) LOS DÍAS 5, 6 Y 7 SEGUÍAN EN NEGRITA. El título de esos tres días lleva un dentro del botón, cosa que no tienen los otros cuatro. Se neutraliza sin tocar el contenido. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-accordion-heading__toggle strong, body.dp-programa #content .wp-block-accordion-heading__toggle b, body.dp-programa #content .wp-block-accordion-heading__toggle-title strong { font-weight: inherit !important; } /* ---------------------------------------------------------------------------- (b) MÓVIL: LA PROMESA, AL LADO DEL PRECIO. "You focus on the experience" caía debajo, con un hueco grande entre medias. Ahora comparte fila con el precio: el precio a la izquierda, la frase a la derecha, y el botón a todo lo ancho debajo. -------------------------------------------------------------------------- */ @media (max-width: 781px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { display: grid !important; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "rotulo rotulo" "precio promesa" "boton boton"; column-gap: 18px; row-gap: 14px; align-items: end; } /* Las dos columnas desaparecen como cajas para que sus párrafos se coloquen directamente en la retícula. Si no, el rótulo "MOST POPULAR PROGRAM" ensancha la columna del precio y deja la frase en 90 px de ancho. */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child { display: contents; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(1) { grid-area: rotulo; margin-bottom: 0 !important; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2) { grid-area: precio; margin: 0 !important; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) { grid-area: promesa; display: contents; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { grid-area: promesa; margin: 0 0 2px !important; font-size: 13px !important; line-height: 1.4; font-style: italic; color: var(--dp-ink-soft); text-align: right; text-wrap: balance; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > .wp-block-uagb-buttons { grid-area: boton; margin: 0 !important; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type .uagb-buttons__wrap { justify-content: stretch; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type .uagb-buttons-repeater.wp-block-button__link { width: 100%; } body.dp-programa #content .dp-precio-nota { margin-top: 2px; } } /* ---------------------------------------------------------------------------- (c) "WHAT'S INCLUDED", REHECHO. Diagnóstico: tres listas sueltas, con mucho aire entre ellas y nada que las ate. Un bloque que decide una compra no puede leerse como una nota al pie. Propuesta: ficha técnica. Cada grupo va numerado, con su rótulo en versalitas sobre fondo arena, y las líneas apretadas. Se lee de un vistazo, que es como se lee esto de verdad: buscando si está incluido lo que a uno le preocupa. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { counter-reset: dp-incluye; gap: 20px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { counter-increment: dp-incluye; background: var(--dp-sand); border: 1px solid var(--dp-line); border-top: 1px solid var(--dp-line); border-radius: var(--dp-r); padding: 22px 20px 18px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column::after { display: none; } /* Número del grupo */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3::before { content: counter( dp-incluye, decimal-leading-zero ); display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--dp-gold-ink); margin-bottom: 10px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: 19px !important; font-weight: 600 !important; letter-spacing: .0em; color: var(--dp-green) !important; margin-bottom: 4px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: 14.5px !important; line-height: 1.5; color: var(--dp-ink-soft); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--dp-line); } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { font-size: 15.5px !important; line-height: 1.45; margin-bottom: 9px; padding-left: 26px !important; color: var(--dp-ink); } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li:last-child { margin-bottom: 0; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::before { top: .38em; border-width: 2px; border-color: var(--dp-gold-ink); } @media (max-width: 781px) { body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 14px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 20px 18px 16px !important; } } /* ---------------------------------------------------------------------------- (d) FICHA DE DATOS DE CADA DÍA DEL ITINERARIO. Antes cada día terminaba con un párrafo en cursiva donde se mezclaban horas, kilómetros, desnivel, comidas y extras, escrito de cuatro maneras distintas según el día. Ahora es una ficha con los mismos campos y el mismo orden en los siete días: se comparan de un vistazo y un asistente de IA los lee como datos, no como prosa. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-accordion-panel .dp-dia { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--dp-line); display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 600px) { body.dp-programa #content .wp-block-accordion-panel .dp-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } /* Los extras opcionales ocupan la fila entera: suelen ser una frase larga */ body.dp-programa #content .wp-block-accordion-panel .dp-dia li.dp-dia--ancho { grid-column: 1 / -1; } } body.dp-programa #content .wp-block-accordion-panel .dp-dia li { display: flex; align-items: baseline; gap: 12px; margin: 0 !important; padding: 0 !important; font-size: 15.5px !important; line-height: 1.45; } body.dp-programa #content .wp-block-accordion-panel .dp-dia li::before, body.dp-programa #content .wp-block-accordion-panel .dp-dia li::marker { content: none !important; display: none !important; } body.dp-programa #content .dp-dia__k { flex: 0 0 104px; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--dp-ink-soft); line-height: 1.6; } body.dp-programa #content .dp-dia__v { color: var(--dp-ink); } /* (e) La nota de camping y refugios se quedaba centrada y estrecha: la retícula de WordPress centra todo hijo con ancho máximo. Se alinea con las tres fichas. */ body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p { margin-left: 0 !important; margin-right: 0 !important; max-width: none; } /* (f) En los títulos largos, la flecha quedaba pegada al texto. */ body.dp-programa #content .wp-block-accordion-heading__toggle-title { flex: 1 1 auto; padding-right: 6px; } /* ============================================================================ 21. OCTAVA PASADA — MENOS BULTO ---------------------------------------------------------------------------- Tres cosas, todas del mismo problema: ocupaba demasiado. (a) Las fichas de "qué incluye" iban muy separadas y muy holgadas. (b) Las líneas de las listas no casaban con el resto del texto. (c) La ficha de datos de cada día se veía desordenada. ============================================================================ */ /* ---------------------------------------------------------------------------- (a) FICHAS DE "QUÉ INCLUYE": MÁS JUNTAS Y MÁS APRETADAS -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 14px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 18px 16px 15px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3::before { font-size: 10px; margin-bottom: 7px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { margin-bottom: 3px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: 13.5px !important; line-height: 1.45; margin-bottom: 12px; padding-bottom: 11px; } /* (b) Las líneas de la lista, al mismo tamaño que el cuerpo del resto de la página: antes eran un punto más grandes y desentonaban. */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { font-size: clamp(15px, 1.02vw, 15.5px) !important; line-height: 1.42; margin-bottom: 7px; padding-left: 23px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::before { left: 1px; width: 11px; height: 6px; top: .34em; } /* La nota de camping y refugios, también más contenida */ body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p { font-size: 14px !important; line-height: 1.55; padding: 16px 18px; margin-top: 24px; } body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p + p { font-size: 13px !important; padding: 0 2px; margin-top: 14px; } /* ---------------------------------------------------------------------------- (c) LA FICHA DE CADA DÍA, EN TABLA Iba en dos columnas y cada valor tenía un largo distinto, así que las parejas rótulo-valor no se alineaban entre sí: por eso se veía desordenada. Ahora es una tabla de una sola columna: los rótulos arrancan todos en la misma vertical, los valores también, y cada línea se separa de la siguiente con un hilo finísimo. Igual en el teléfono y en el escritorio, que es lo que hace que se lea como algo pensado y no como una lista suelta. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-accordion-panel .dp-dia { display: block; grid-template-columns: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--dp-line); } @media (min-width: 600px) { body.dp-programa #content .wp-block-accordion-panel .dp-dia { grid-template-columns: none; column-gap: 0; } } body.dp-programa #content .wp-block-accordion-panel .dp-dia li, body.dp-programa #content .wp-block-accordion-panel .dp-dia li.dp-dia--ancho { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; gap: 0; padding: 9px 2px !important; margin: 0 !important; border-bottom: 1px solid rgba(226, 220, 209, .6); font-size: 15.5px !important; line-height: 1.45; } body.dp-programa #content .wp-block-accordion-panel .dp-dia li:last-child { border-bottom: 0; } body.dp-programa #content .dp-dia__k { flex: none; font-size: 10.5px; letter-spacing: .12em; line-height: 1.7; } @media (max-width: 599px) { body.dp-programa #content .wp-block-accordion-panel .dp-dia li, body.dp-programa #content .wp-block-accordion-panel .dp-dia li.dp-dia--ancho { grid-template-columns: 106px minmax(0, 1fr); font-size: 15px !important; padding: 8px 0 !important; } body.dp-programa #content .dp-dia__k { font-size: 10px; letter-spacing: .1em; } } /* El párrafo del día, también un punto más contenido */ body.dp-programa #content .wp-block-accordion-panel p { font-size: clamp(15.5px, 1.02vw, 16px) !important; line-height: 1.62; } /* ============================================================================ 22. NOVENA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) "MAKE THIS PATAGONIA TRIP YOUR OWN": LA INFORMACIÓN SE PERDÍA La fotografía de fondo es buena y no hay que taparla, pero el texto blanco sobre ramas y carteles compite con ellos y se pierde. Solución: el contenido se apoya sobre un panel oscuro translúcido con un poco de desenfoque detrás. La foto se sigue viendo alrededor y por encima; el texto deja de pelearse con ella. -------------------------------------------------------------------------- */ /* El panel envuelve TODO el bloque —título, frase, los dos argumentos y el botón—, no solo la primera parte. Antes se cortaba a media sección y los argumentos volvían a quedar sueltos sobre la fotografía. */ body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { background: linear-gradient( 135deg, rgba(21, 42, 34, .84) 0%, rgba(21, 42, 34, .70) 100% ); backdrop-filter: blur(3px) saturate(120%); border-radius: var(--dp-r-lg); padding: 26px 28px 24px; max-width: 620px; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { padding: 22px 20px 20px; } } /* Los dos argumentos: más aire entre ellos, una línea que los separa y el icono alineado con la primera línea del texto. */ body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { margin-bottom: 0; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .16); } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { color: #FFFFFF !important; line-height: 1.45; } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__source-wrap { align-self: flex-start; margin-top: 2px; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { color: rgba(255, 255, 255, .92) !important; } /* ---------------------------------------------------------------------------- (b) RESEÑAS EN CARRUSEL Siete opiniones reales en vez de tres. Avanzan solas y despacio —siete segundos por tarjeta, que da tiempo a leerlas— y se paran solas en cuanto alguien pasa el ratón por encima, toca la pantalla o usa el teclado. Se mueve con desplazamiento nativo del navegador, así que en el teléfono se arrastra con el dedo igual que cualquier galería del sistema. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-reviews .wp-block-columns { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 26px !important; margin: 0; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.dp-programa #content .dp-reviews .wp-block-columns::-webkit-scrollbar { display: none; } body.dp-programa #content .dp-reviews .dp-review { flex: 0 0 calc((100% - 52px) / 3) !important; min-width: 0; scroll-snap-align: start; padding-top: 20px; } @media (max-width: 980px) { body.dp-programa #content .dp-reviews .dp-review { flex-basis: calc((100% - 26px) / 2) !important; } } /* En el teléfono, una reseña por pantalla y completa. Antes asomaba un trozo de la siguiente por el lado derecho y se veía cortada. */ @media (max-width: 640px) { body.dp-programa #content .dp-reviews .dp-review { flex-basis: 100% !important; } body.dp-programa #content .dp-reviews .wp-block-columns { gap: 18px !important; } .dp-carrusel-cuenta { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { body.dp-programa #content .dp-reviews .wp-block-columns { scroll-behavior: auto; } } /* Mandos del carrusel */ .dp-carrusel-mandos { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .dp-carrusel-boton { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--dp-line, #E3DED4); border-radius: 50%; background: #FFFFFF; color: #2C4A26; font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; } .dp-carrusel-boton:hover { border-color: #4A7A26; background: #FFFFFF; } .dp-carrusel-boton:focus-visible { outline: 3px solid #0E5F94; outline-offset: 2px; } .dp-carrusel-puntos { display: flex; gap: 7px; margin-left: 4px; } .dp-carrusel-punto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(44, 74, 38, .22); cursor: pointer; transition: background-color .2s ease, transform .2s ease; } .dp-carrusel-punto.is-current { background: #4A7A26; transform: scale(1.35); } .dp-carrusel-punto:focus-visible { outline: 2px solid #0E5F94; outline-offset: 3px; } .dp-carrusel-cuenta { margin-left: auto; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; color: var(--dp-ink-soft); } /* ---------------------------------------------------------------------------- (c) LA LÍNEA DE VALORACIONES, ALINEADA CON EL TITULAR -------------------------------------------------------------------------- */ /* El titular y la línea de valoraciones arrancaban en el borde de la pantalla mientras las tarjetas empezaban 170 px más adentro: eso era lo desalineado. Se les devuelve el mismo ancho y el mismo centrado que al resto. */ body.dp-programa #content .dp-reviews h2, body.dp-programa #content .dp-reviews .dp-reviews__meta, body.dp-programa #content .dp-reviews .wp-block-columns, body.dp-programa #content .dp-reviews .dp-carrusel-mandos { max-width: var(--dp-max); margin-left: auto !important; margin-right: auto !important; } body.dp-programa #content .dp-reviews .dp-reviews__meta { margin-bottom: 34px !important; } /* ============================================================================ 23. DÉCIMA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) LAS FRASES QUE VAN DEBAJO DE CADA TÍTULO Son las que dicen "A clear daily overview of your Patagonia experience" o "A visual glimpse of the landscapes". Iban en Inter, la letra de aplicación: justo debajo de un título con mucho carácter, sonaban a formulario. Ahora van en Fraunces, la misma del título, un punto más chicas y en gris. Así el título y su frase se leen como una sola voz. -------------------------------------------------------------------------- */ body.dp-programa #content .wp-block-uagb-advanced-heading + p { font-family: 'Fraunces', Lora, Georgia, serif !important; font-size: clamp(16px, 1.15vw, 17.5px) !important; font-weight: 400 !important; line-height: 1.5; letter-spacing: -0.005em; color: var(--dp-ink-soft) !important; max-width: 56ch; } /* ---------------------------------------------------------------------------- (b) "MAKE THIS PATAGONIA TRIP YOUR OWN" COMO BANNER Ocupaba una pantalla entera para decir dos cosas. Se queda en franja: menos alto, título más contenido y panel más justo. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-40dcf50b { padding-top: 56px !important; padding-bottom: 56px !important; } @media (min-width: 992px) { body.dp-programa #content .uagb-block-40dcf50b { padding-top: 68px !important; padding-bottom: 68px !important; } } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-size: clamp(22px, 2.1vw, 30px) !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { font-size: clamp(15px, 1.05vw, 16px) !important; margin-bottom: 18px !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-infobox__content-wrap { padding: 0 !important; max-width: none; background: none; } body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { font-size: 14.5px !important; } body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { padding: 8px 0; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons__wrap { margin-top: 20px; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link { min-height: 44px; padding: 0 24px !important; } /* ---------------------------------------------------------------------------- (c) "WHAT'S INCLUDED": MÁS VISUAL Y MENOS INVASIVO Dos cambios. El primero, tamaño: las líneas bajan de 16 a 13,5 px, que es el tamaño de los rótulos del resto de la página. El segundo, y es el que importa: cada grupo estrena un dibujo —una cama, una furgoneta, una brújula—. Un bloque de tres listas se lee como tres listas; con un dibujo arriba se reconoce de un vistazo sin leer nada. Los dibujos van en el CSS, no en el contenido: no hay imágenes que cargar ni archivos nuevos que mantener. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3::before { content: ""; display: block; width: 30px; height: 30px; margin-bottom: 12px; background-repeat: no-repeat; background-position: left center; background-size: 26px 26px; } /* Alojamiento: una cama */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column:nth-child(1) > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7A26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M3 14h18'/%3E%3Cpath d='M7 8V6.5A1.5 1.5 0 0 1 8.5 5h3V8'/%3E%3Cpath d='M3 18v2M21 18v2'/%3E%3C/svg%3E"); } /* Logística: una furgoneta */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column:nth-child(2) > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7A26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V8a1 1 0 0 1 1-1h10v9'/%3E%3Cpath d='M13 10h4l4 4v2h-2'/%3E%3Cpath d='M9 16H5'/%3E%3Ccircle cx='7' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E"); } /* Apoyo en terreno: una brújula */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column:nth-child(3) > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7A26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.6 8.4l-2.1 5.1-5.1 2.1 2.1-5.1z'/%3E%3C/svg%3E"); } /* El número (01, 02, 03) desaparece: el dibujo hace ese trabajo mejor y con los dos a la vez la esquina quedaba recargada. */ /* Tamaño: las líneas bajan de 16 a 13,5 px, el mismo que los rótulos del resto de la página. No se añade ningún tamaño nuevo a la escala. */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p, body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { font-size: 13.5px !important; line-height: 1.5; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { margin-bottom: 8px; padding-left: 21px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li::before { width: 10px; height: 5px; top: .4em; left: 0; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: 17px !important; } /* (b2) El panel se había ido al centro y los dos argumentos quedaron en columnas de 110 px, partiendo las frases cada dos palabras. Se ancla a la izquierda, en la misma vertical que el resto de la página, y se le devuelve el ancho a la fila de argumentos. */ /* El panel arrancaba en 40 px y el resto de la página en 193: se alinea con la retícula, no con el borde de la sección. */ body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { margin-left: max(0px, calc((100% - var(--dp-max)) / 2)) !important; margin-right: auto !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-block-50144208, body.dp-programa #content .uagb-block-40dcf50b .uagb-block-50144208 > .uagb-container-inner-blocks-wrap { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-block-50144208 > .uagb-container-inner-blocks-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; } @media (max-width: 600px) { body.dp-programa #content .uagb-block-40dcf50b .uagb-block-50144208 > .uagb-container-inner-blocks-wrap { grid-template-columns: 1fr; } } /* (a2) CORRECCIÓN: la regla de arriba pinta en gris las frases que van bajo cada título, y eso incluía la del formulario, que va sobre panel oscuro. Quedaba casi ilegible. Sobre fondo oscuro, blanca. */ body.dp-programa #content .uagb-block-9b0d69d2 .wp-block-uagb-advanced-heading + p, body.dp-programa #content .dp-reviews .wp-block-uagb-advanced-heading + p { color: rgba(255, 255, 255, .92) !important; } body.dp-programa #content .dp-reviews .wp-block-uagb-advanced-heading + p { color: var(--dp-ink-soft) !important; } /* (a3) CORRECCIÓN: el subtítulo de la portada también es "la frase que va debajo del título", así que se llevó el color gris de esa regla y quedó apagado sobre la fotografía. Sobre la foto va blanco, con sombra. */ body.dp-programa #content .wp-block-cover .wp-block-uagb-advanced-heading + p, body.dp-programa #content .wp-block-cover__inner-container p { color: rgba(255, 255, 255, .95) !important; text-shadow: 0 1px 18px rgba(21, 42, 34, .65); } /* ============================================================================ 24. UNDÉCIMA PASADA — EL FINAL DE LA PÁGINA ---------------------------------------------------------------------------- El formulario terminaba con 128 px de vacío antes del pie, más el hueco que queda reservado para el recuadro antispam. Sumados, la página acababa con un agujero. Se recortan los dos. ============================================================================ */ body.dp-programa #content .uagb-block-9b0d69d2 { padding-bottom: 64px !important; } @media (min-width: 992px) { body.dp-programa #content .uagb-block-9b0d69d2 { padding-bottom: 76px !important; } } /* Hueco del recuadro antispam: se ajusta a lo que ocupa de verdad (68 px) en vez de reservar 107. En el staging no se dibuja porque Cloudflare no autoriza este dominio; en producción sí aparece ahí. */ body.dp-programa #content .dp-booking .wpcf7-turnstile { margin-top: 18px; margin-bottom: 18px; min-height: 68px; } body.dp-programa #content .dp-booking .form-note { margin-top: 18px; } /* ============================================================================ 25. DUODÉCIMA PASADA — EL FORMULARIO COMO FICHA Idea: la banda azul se queda (te gusta), pero el formulario deja de flotar sobre ella y se mete en una ficha blanca. Tres motivos: 1. Se lee mejor. Etiquetas oscuras sobre blanco contrastan 13,9 a 1; las blancas sobre azul iban a 9,7. Y los campos dejan de ser manchas blancas sueltas sobre el azul. 2. Parece lo que es: un formulario de reserva, no un pie de página. Es el mismo recurso que usan las fichas de reserva de hotel. 3. El azul pasa a ser marco, no fondo de trabajo. La sección gana profundidad sin añadir ni un color nuevo. ============================================================================ */ body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { max-width: 760px; margin: 0 auto; background: #FFFFFF; border-radius: 20px; padding: 34px 34px 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, .10), 0 30px 60px -30px rgba(0, 0, 0, .55); } @media (max-width: 781px) { body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { padding: 24px 20px 22px; border-radius: 16px; } } /* Etiquetas y notas, ahora en oscuro sobre blanco */ body.dp-programa #content .dp-booking label { color: var(--dp-ink) !important; font-weight: 600; } body.dp-programa #content .dp-booking label span { color: var(--dp-ink-soft) !important; font-weight: 400; } body.dp-programa #content .dp-booking .form-note { color: var(--dp-ink-soft) !important; } /* Los campos: fondo arena muy claro, para que se distingan del blanco de la ficha sin necesidad de un borde grueso. */ body.dp-programa #content .dp-booking input, body.dp-programa #content .dp-booking select, body.dp-programa #content .dp-booking textarea { background-color: #FAF9F7 !important; border: 1px solid var(--dp-line) !important; border-radius: 10px !important; } body.dp-programa #content .dp-booking input:focus, body.dp-programa #content .dp-booking select:focus, body.dp-programa #content .dp-booking textarea:focus { background-color: #FFFFFF !important; border-color: var(--dp-cta, #0E5F94) !important; box-shadow: 0 0 0 3px rgba(14, 95, 148, .16) !important; } /* El botón, ancho completo dentro de la ficha */ body.dp-programa #content .dp-booking button[type="submit"] { width: 100%; min-height: 52px; border-radius: 10px !important; } /* El título y la frase de la sección siguen en blanco sobre el azul */ body.dp-programa #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-advanced-heading, body.dp-programa #content .uagb-block-9b0d69d2 > .uagb-container-inner-blocks-wrap > p { margin-bottom: 26px; } /* ---------------------------------------------------------------------------- Distintivo para las reseñas que hablan de ESTE programa -------------------------------------------------------------------------- */ body.dp-programa #content .dp-review--programa .dp-review__firma::before { content: "This trip"; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--dp-gold-ink); color: #FFFFFF; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; } /* ============================================================================ 26. DECIMOTERCERA PASADA — APRETAR ============================================================================ */ /* ---------------------------------------------------------------------------- (a) MÓVIL: LA PROMESA ARRANCA A LA MISMA ALTURA QUE "FROM", Y EL BOTÓN DEJA DE OCUPAR TODO EL ANCHO. -------------------------------------------------------------------------- */ @media (max-width: 781px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { align-items: start; row-gap: 12px; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { align-self: start; margin-top: 1px !important; } /* El botón, centrado y a su ancho, no pegado a los dos bordes */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type .uagb-buttons__wrap { justify-content: center; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type .uagb-buttons-repeater.wp-block-button__link { width: auto; min-width: 230px; padding: 0 28px !important; } } /* ---------------------------------------------------------------------------- (b) "WHAT'S INCLUDED": UNA VUELTA MÁS DE TUERCA -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { gap: 12px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 15px 14px 13px !important; border-radius: var(--dp-r-sm); } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3::before { width: 24px; height: 24px; background-size: 22px 22px; margin-bottom: 9px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: 15.5px !important; margin-bottom: 2px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: 13px !important; line-height: 1.45; margin-bottom: 10px; padding-bottom: 9px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { font-size: 13px !important; line-height: 1.45; margin-bottom: 6px; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 14px 14px 12px !important; } } /* ---------------------------------------------------------------------------- (c) EL PANEL DE "MAKE THIS TRIP YOUR OWN", UN POCO MÁS JUSTO -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { padding: 22px 24px 20px; max-width: 560px; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { padding: 18px 18px 16px; } } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { margin-bottom: 14px !important; } body.dp-programa #content .uagb-block-40dcf50b .wp-block-uagb-icon-list-child { padding: 7px 0; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons__wrap { margin-top: 16px; } /* ---------------------------------------------------------------------------- (d) EL FORMULARIO, MÁS CORTO Los campos bajan de 52 a 46 px, el hueco entre uno y otro de 20 a 12, y el área de texto de 120 a 92. Se leen los mismos cinco campos ocupando bastante menos pantalla: en el móvil, un formulario largo se abandona. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-booking .form-inner { margin-bottom: 12px !important; } body.dp-programa #content .dp-booking input, body.dp-programa #content .dp-booking select { height: 46px !important; padding: 8px 12px !important; } body.dp-programa #content .dp-booking textarea { min-height: 92px !important; padding: 10px 12px !important; } body.dp-programa #content .dp-booking label { margin-bottom: 4px !important; } body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { padding: 26px 26px 22px; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { padding: 20px 16px 18px; } } body.dp-programa #content .dp-booking button[type="submit"] { min-height: 48px; } body.dp-programa #content .dp-booking .wpcf7-turnstile { margin-top: 12px; margin-bottom: 12px; } body.dp-programa #content .uagb-block-9b0d69d2 { padding-top: 56px !important; } /* ============================================================================ 27. DECIMOCUARTA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) LA FRANJA CLARA ANTES DEL PIE: SE QUEDA. Son 64 px de relleno que Astra pone al final del contenido (.content-area). Llegué a quitarlos, pero a ella le gusta ese respiro entre el formulario y el pie, así que se dejan tal cual, en móvil y en escritorio. -------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- (b) TARJETA DE PRECIO EN ESCRITORIO: SE ACABA EL HUECO DEL MEDIO Las dos columnas eran mitad y mitad, así que entre el precio y el botón quedaba un vacío enorme. Ahora el precio ocupa lo que necesita, el bloque de la derecha se pega a él, y la tarjeta se estrecha. -------------------------------------------------------------------------- */ @media (min-width: 782px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { max-width: 880px; margin-left: auto; margin-right: auto; display: flex !important; align-items: center; gap: 36px; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child { flex: 0 0 auto !important; width: auto !important; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) { flex: 1 1 auto !important; width: auto !important; display: flex; align-items: center; justify-content: flex-end; gap: 24px; } /* La promesa y el botón, uno al lado del otro */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { margin: 0 !important; text-align: right; max-width: 30ch; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > .wp-block-uagb-buttons { margin: 0 !important; flex: 0 0 auto; } } /* ---------------------------------------------------------------------------- (c) "WHAT'S INCLUDED": OTRA VUELTA MÁS -------------------------------------------------------------------------- */ @media (min-width: 782px) { body.dp-programa #content .uagb-block-9da4f3ab .wp-block-columns { max-width: 920px; margin-left: 0; gap: 10px !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column { padding: 14px 13px 12px !important; } body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p { max-width: 920px; } } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3::before { width: 21px; height: 21px; background-size: 19px 19px; margin-bottom: 7px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { margin-bottom: 9px; padding-bottom: 8px; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li { margin-bottom: 5px; } /* ---------------------------------------------------------------------------- (d) EL PANEL DEL BANNER, UN POCO MÁS ANGOSTO -------------------------------------------------------------------------- */ @media (min-width: 782px) { body.dp-programa #content .uagb-block-40dcf50b > .uagb-container-inner-blocks-wrap { max-width: 500px; } } /* ---------------------------------------------------------------------------- (e) EL ÁREA DE TEXTO Y EL BOTÓN NO LLEGABAN AL BORDE DERECHO. Causa: la regla que limita los párrafos a 70 caracteres de ancho —pensada para que el texto se lea cómodo— se estaba aplicando también a los párrafos que envuelven los campos del formulario. Por eso el área de texto medía 557 px mientras los campos de arriba llegaban a 708. El formulario no es texto de lectura: se le quita el límite. -------------------------------------------------------------------------- */ body.dp-programa #content .wpcf7 p, body.dp-programa #content .dp-booking p, body.dp-programa #content .dp-booking .wpcf7-form-control-wrap, body.dp-programa #content .dp-booking .form-inner { max-width: none !important; } body.dp-programa #content .dp-booking textarea, body.dp-programa #content .dp-booking button[type="submit"] { width: 100% !important; } /* ============================================================================ 28. DECIMOQUINTA PASADA ============================================================================ */ /* ---------------------------------------------------------------------------- (a) LA TARJETA DE PRECIO, EQUILIBRADA El precio quedaba pegado al borde izquierdo y el botón nadaba en espacio por la derecha. Ahora la tarjeta es más estrecha, tiene más margen interior y los tres elementos —precio, promesa y botón— se reparten el ancho. -------------------------------------------------------------------------- */ @media (min-width: 782px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type { max-width: 720px; padding: 28px 36px !important; gap: 24px; justify-content: space-between; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) { flex: 0 1 auto !important; gap: 22px; } body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { max-width: 26ch; } } /* ---------------------------------------------------------------------------- (b) EL BOTÓN DE LA TARJETA LATERAL, EN UNA SOLA LÍNEA -------------------------------------------------------------------------- */ .dp-side__cta { white-space: nowrap; padding: 0 10px; letter-spacing: .04em; } .dp-cta-bar__link { white-space: nowrap; } /* ============================================================================ 29. DECIMOSEXTA PASADA ============================================================================ */ /* (a) MÓVIL: la promesa baja y se centra con el bloque del precio, en vez de arrancar a la altura del rótulo. Así queda parejo. */ @media (max-width: 781px) { body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child { align-self: center; margin-top: 0 !important; } } /* ---------------------------------------------------------------------------- (b) EL FORMULARIO, MÁS CORTO DE VERDAD El hueco grande era el que se reservaba para el recuadro antispam: 68 px vacíos más sus márgenes. Se deja de reservar. En el staging el recuadro no se dibuja (Cloudflare no autoriza este dominio) y ahora el formulario se cierra; en producción el recuadro aparece y ocupa lo suyo, sin agujero. -------------------------------------------------------------------------- */ body.dp-programa #content .dp-booking .wpcf7-turnstile { min-height: 0 !important; margin-top: 8px; margin-bottom: 8px; } body.dp-programa #content .dp-booking .wpcf7-turnstile:empty { margin: 0; } body.dp-programa #content .dp-booking .form-inner { margin-bottom: 10px !important; } body.dp-programa #content .dp-booking textarea { min-height: 84px !important; } body.dp-programa #content .dp-booking .form-note { margin-top: 12px; } body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { padding: 22px 26px 20px; } @media (max-width: 781px) { body.dp-programa #content .uagb-block-9b0d69d2 .wpcf7 { padding: 18px 16px 16px; } body.dp-programa #content .dp-booking .form-inner { margin-bottom: 9px !important; } } /* === dopat-escala-tipografica (escala-tipografica.css) === */ /* ============================================================================ DoPatagonia — Escala tipográfica · page-id-7093 ---------------------------------------------------------------------------- La página tenía 19 tamaños distintos, con saltos de medio píxel que no jerarquizan: solo hacen ruido. Aquí quedan OCHO pasos, y cada uno tiene un trabajo asignado. Es lo que hace que un diseño se sienta armónico aunque nadie sepa decir por qué. 1. 34 → 62 px título de portada 2. 25 → 38 px títulos de sección 3. 24 → 31 px precio 4. 18,5 → 21 px subtítulos y preguntas 5. 16,5 → 18 px datos del resumen, días del itinerario, entradilla, citas 6. 16 → 16,5 px cuerpo de texto y listas 7. 13 → 13,5 px rótulos secundarios, pies de foto, firmas 8. 11 → 11,5 px versalitas Segunda revisión: toda la escala baja un 15 % en escritorio. La anterior ocupaba demasiado y obligaba a desplazarse de más. Los botones no siguen la escala del texto: son interfaz, y van todos a 14 px. ============================================================================ */ /* 1. Título de portada */ body.dp-programa #content .wp-block-cover h1 { font-size: clamp(34px, 4.6vw, 62px) !important; } /* 2. Títulos de sección */ body.dp-programa #content .entry-content h2, body.dp-programa #content .uagb-heading-text, body.dp-programa #content .dp-reviews h2 { font-size: clamp(25px, 2.8vw, 38px) !important; } /* 3. Precio */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2) { font-size: clamp(24px, 2.3vw, 31px) !important; } /* 4. Subtítulos y preguntas */ body.dp-programa #content .entry-content h3, body.dp-programa #content #rank-math-faq .rank-math-question { font-size: clamp(18.5px, 1.45vw, 21px) !important; } /* El título de "Make this trip your own" es de portada de sección, no H3 */ body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-size: clamp(25px, 2.8vw, 38px) !important; } /* 5. Datos destacados, días del itinerario, entradilla y citas */ body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc, body.dp-programa #content .wp-block-accordion-heading__toggle, body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type, body.dp-programa #content .dp-review .dp-review__texto, body.dp-programa #content .wp-block-uagb-advanced-heading + p, body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-desc { font-size: clamp(17px, 1.25vw, 18px) !important; } /* 6. Cuerpo de texto */ body.dp-programa #content .entry-content p, body.dp-programa #content .entry-content li, body.dp-programa #content #rank-math-faq .rank-math-answer p, body.dp-programa #content .wp-block-accordion-panel p, body.dp-programa #content .uagb-block-9da4f3ab .wp-block-list li, body.dp-programa #content .uagb-block-40dcf50b .uagb-icon-list__label { font-size: clamp(16px, 1.05vw, 16.5px) !important; } /* 7. Rótulos secundarios, pies de foto, firmas, formulario */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:nth-child(2) > p:first-child, body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p, body.dp-programa #content .spectra-image-gallery__media-thumbnail-caption, body.dp-programa #content .dp-review .dp-review__firma, body.dp-programa #content .dp-reviews__meta, body.dp-programa #content #booking label, body.dp-programa #content #booking .form-note, .dp-nav__link { font-size: 13.5px !important; } /* 8. Versalitas */ body.dp-programa #content .dp-snapshot-grid .uagb-ifb-title, body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(1) { font-size: clamp(11px, .8vw, 11.5px) !important; } /* Botones: interfaz, no texto. Todos iguales. */ body.dp-programa #content .wp-block-button__link, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content #booking button[type="submit"], .dp-cta-bar__link, .dp-nav__cta { font-size: 14px !important; letter-spacing: .05em; } /* Los campos del formulario se quedan en 16 px pase lo que pase: por debajo de ese tamaño, iOS amplía la página al enfocar un campo. */ body.dp-programa #content #booking input, body.dp-programa #content #booking select, body.dp-programa #content #booking textarea { font-size: 16px !important; } /* El texto de los botones de Spectra vive en un elemento interior con su propio tamaño: sin esto, "INQUIRE HERE" se quedaba en 16 px y "CUSTOMIZE YOUR TRIP" en 14,5, rompiendo la escala. */ body.dp-programa #content .uagb-button__link, body.dp-programa #content .uagb-buttons-repeater strong, body.dp-programa #content .uagb-buttons-repeater span, body.dp-programa #content .wp-block-button__link strong { font-size: 14px !important; letter-spacing: .05em; } /* ---------------------------------------------------------------------------- CORRECCIÓN EN "WHAT'S INCLUDED" El bloque saltaba de 24 px (título) a 14 px (la frase que lo explica) y volvía a subir a 16,5 px en la lista. Es decir: la explicación era más pequeña que la lista que resume, y el ojo lo nota aunque no sepa por qué. Ahora el bloque usa dos tamaños y ninguno más: 22 px el título y 16,5 el resto. Lo que separa la frase de la lista es el color, no el tamaño. -------------------------------------------------------------------------- */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: clamp(17px, 1.3vw, 18.5px) !important; font-weight: 500 !important; } body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > p { font-size: clamp(16px, 1.05vw, 16.5px) !important; } /* ---------------------------------------------------------------------------- CONSOLIDACIÓN: DE VUELTA A OCHO TAMAÑOS Al apretar los bloques se colaron cinco tamaños nuevos —10,5 · 12 · 14 · 15,5 · 18,5— que no aportaban jerarquía: solo ruido. Cada uno vuelve al escalón que le toca. Escala final: 62 · 38 · 31 · 21 · 18 · 16 · 13,5 · 11,5 -------------------------------------------------------------------------- */ /* 10,5 y 12 → 11,5 (versalitas) */ body.dp-programa #content .dp-dia__k, body.dp-programa #content .dp-precio-rotulo { font-size: clamp(11px, .8vw, 11.5px) !important; } /* 14 → 13,5 (rótulos e interfaz) */ body.dp-programa #content .uagb-button__link, body.dp-programa #content .uagb-buttons-repeater strong, body.dp-programa #content .uagb-buttons-repeater span, body.dp-programa #content .wp-block-button__link, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content #booking button[type="submit"], body.dp-programa #content .uagb-block-9da4f3ab > .uagb-container-inner-blocks-wrap > p, .dp-cta-bar__link, .dp-nav__cta { font-size: 13.5px !important; } /* 15,5 → 16 (cuerpo) */ body.dp-programa #content .dp-dia__v, body.dp-programa #content .wp-block-accordion-panel .dp-dia li { font-size: clamp(16px, 1.05vw, 16.5px) !important; } /* 18,5 → 18 (mismo escalón que los datos destacados) */ body.dp-programa #content .uagb-block-9da4f3ab .wp-block-column > h3 { font-size: clamp(17px, 1.25vw, 18px) !important; } /* === dopat-paleta-marca (paleta-marca.css) === */ /* ============================================================================ DoPatagonia — Paleta de marca, derivada del logo · page-id-7093 ---------------------------------------------------------------------------- El logo tiene tres colores: un verde hoja (#66A03C), un azul (#0E70B0) y un gris oscuro (#4A4A4A). La paleta anterior usaba un verde bosque azulado y un dorado que no salían de ahí. Esta paleta se construye SOLO con la familia del logo: Verde profundo #2C4A26 pariente oscuro del verde del logo Verde acento #4A7A26 versión legible sobre blanco (5,12:1) Verde claro #9ACB6A acento sobre fondo oscuro (5,26:1) Azul de marca #0E5F94 llamadas a la acción (6,81:1 en blanco) Arena #F7F5F2 / #EFEAE2 fondo cálido Todos los contrastes están medidos y por encima del mínimo de 4,5:1. Para comparar sin tocar nada: ?color=dorado vuelve a la paleta anterior. ============================================================================ */ body.dp-programa #content { --dp-green: #2C4A26; --dp-green-deep: #1F3619; --dp-green-soft: #3A5C31; /* Los nombres "gold" se conservan porque son los que usa la capa base; lo que cambia es el color que hay detrás. */ --dp-gold: #9ACB6A; --dp-gold-ink: #4A7A26; --dp-gold-ink-h: #3E6B1E; --dp-line: #E3DED4; /* Llamadas a la acción: el azul del logo. Destaca sobre el verde y sobre la arena, y es color de marca, no un añadido. */ --dp-cta: #0E5F94; --dp-cta-h: #1272B0; /* aclara al pasar el ratón: 5,17:1 con blanco */ --dp-shadow: 0 1px 2px rgba(44, 74, 38, .05), 0 10px 28px -14px rgba(44, 74, 38, .18); --dp-shadow-lift: 0 2px 4px rgba(44, 74, 38, .06), 0 16px 34px -14px rgba(44, 74, 38, .26); } /* ---- Botones: azul de marca ------------------------------------------------ */ body.dp-programa #content .wp-block-button__link, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link, body.dp-programa #content #booking button[type="submit"] { background-color: var(--dp-cta) !important; border-color: var(--dp-cta) !important; color: #FFFFFF !important; } body.dp-programa #content .wp-block-button__link:hover, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link:hover, body.dp-programa #content #booking button[type="submit"]:hover, body.dp-programa #content .wp-block-button__link:focus, body.dp-programa #content .uagb-buttons-repeater.wp-block-button__link:focus { background-color: var(--dp-cta-h) !important; border-color: var(--dp-cta-h) !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(14, 95, 148, .75); } /* El botón de contorno sobre fotografía mantiene su carácter, en verde claro */ body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link { background-color: transparent !important; border-color: var(--dp-gold) !important; color: #FFFFFF !important; } body.dp-programa #content .uagb-block-40dcf50b .uagb-buttons-repeater.wp-block-button__link:hover { background-color: var(--dp-gold) !important; border-color: var(--dp-gold) !important; color: #1F3619 !important; } /* El botón de la cabecera sigue la misma regla */ .ast-custom-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(14, 95, 148, .75); } /* ---- Elementos fuera de #content (llevan color escrito a mano) ------------- */ .dp-cta-bar__link, .dp-nav__cta { background: #0E5F94; } .dp-cta-bar__link:hover, .dp-cta-bar__link:focus, .dp-nav__cta:hover { background: #1272B0; } .dp-cta-bar__link:focus-visible { outline-color: #0E5F94; } .dp-cta-bar__price b { color: #2C4A26; } .dp-nav__link:hover, .dp-nav__link.is-current { color: #2C4A26; } .dp-nav__link.is-current { border-bottom-color: #4A7A26; } .dp-visor__btn:focus-visible { outline-color: #9ACB6A; } /* ---- Foco de teclado ------------------------------------------------------- */ body.dp-programa #content a:focus-visible, body.dp-programa #content button:focus-visible, body.dp-programa #content input:focus-visible, body.dp-programa #content textarea:focus-visible { outline-color: var(--dp-gold-ink) !important; } /* Los enlaces de la línea de valoraciones se quedaban en 4,27:1 sobre la banda de arena, por debajo del mínimo. Se oscurece el texto y el subrayado se queda en verde de marca. */ body.dp-programa #content .dp-reviews__meta a { color: var(--dp-ink) !important; border-bottom-color: var(--dp-gold-ink) !important; } body.dp-programa #content .dp-reviews__meta a:hover, body.dp-programa #content .dp-reviews__meta a:focus-visible { color: var(--dp-gold-ink-h) !important; border-bottom-color: var(--dp-gold-ink-h) !important; } /* === dopat-paleta-azul (paleta-azul.css) === */ /* ============================================================================ Variante: panel del formulario en azul suave · ?color=azul ---------------------------------------------------------------------------- El azul del logo (#0E5F94) es vivo y funciona en botones pequeños, pero como fondo de un panel grande cansa. Este es el mismo azul rebajado y profundo: #17486A arriba, #123E56 abajo. Blanco encima: 9,67:1. Los titulares siguen en verde de marca: solo cambia la superficie. ============================================================================ */ body.dp-programa #content .uagb-block-9b0d69d2 { background: linear-gradient(180deg, #17486A 0%, #123E56 100%) !important; } /* Solo el titular de la sección va en blanco: las etiquetas del formulario viven ahora dentro de una ficha blanca y tienen que ir en oscuro. */ body.dp-programa #content .uagb-block-9b0d69d2 .uagb-heading-text { color: #FFFFFF !important; } body.dp-programa #content #booking input:focus, body.dp-programa #content #booking select:focus, body.dp-programa #content #booking textarea:focus { border-color: #9ACB6A !important; box-shadow: 0 0 0 3px rgba(154, 203, 106, .28) !important; } /* === 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
, 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 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
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
, así que la etiqueta NO es hija directa de .form-inner sino del
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 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
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
que envuelve a los dos (25,6 px). Con cinco campos, 270 px de nada. 3. ARRIBA SOBRABAN 20 px del
de los campos ocultos, que no se ve pero ocupa. Los campos ocultos siguen ahí y se siguen enviando: sólo se les quita la altura. RESULTADO: la ficha pasó de 940 a 604 px de alto. Mismo contenido, mismo tamaño de letra, mismo objetivo táctil de 42 px. Sólo sin los huecos. ============================================================================ */ /* 1. El ancho que faltaba. */ body.dp-form #content .dp-booking .wpcf7-form-control-wrap { display: block !important; } body.dp-form #content .dp-booking input:not([type="checkbox"]):not([type="radio"]), body.dp-form #content .dp-booking select, body.dp-form #content .dp-booking textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* En una sola columna, minmax(0,1fr) impide que el ancho de fábrica del campo estire la columna más allá del formulario. Con 1fr a secas, la columna se agranda hasta caber el campo y vuelve el desborde. */ @media (max-width: 620px) { body.dp-form #content .wpcf7-form section { grid-template-columns: minmax(0, 1fr) !important; } } /* 2. Los huecos. */ body.dp-form #content .dp-booking .form-inner p > br { display: none !important; } body.dp-form #content .wpcf7 p { margin: 0 !important; } body.dp-form #content .dp-booking .form-inner { margin-bottom: 12px !important; } body.dp-form #content .dp-booking label { line-height: 1.3 !important; margin-bottom: 4px !important; } /* 3. Los campos ocultos ocupaban 20 px. Se les quita el alto, no la presencia: un campo sin altura se sigue enviando, uno con display:none también, pero así queda claro que no se está tocando lo que viaja al correo. */ body.dp-form #content .wpcf7 form { margin: 0 !important; } body.dp-form #content .wpcf7 form > .hidden-fields-container { height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ============================================================================ EL BLANCO ENTRE LA BANDA DEL FORMULARIO Y EL PIE 2026-09-13. Natalia: "sí, déjalo más corto". Todas las páginas que llevan formulario terminan igual: la banda azul oscura con "So, Ready to Start?" y la ficha del formulario dentro. Debajo de esa banda quedaba una tira de blanco antes de empezar el pie, que hacía que la página pareciese cortada a medias. MEDIDO en About Us: teléfono 390 px 112 px de blanco escritorio 1280 159 px Salían de cuatro sitios distintos, ninguno visible: .content-area.primary padding-bottom 64 px (teléfono) .content-area.primary margin-bottom 68 px (escritorio) article padding-bottom 24 px / 90 px el contenedor raíz padding-bottom 24 px Ahora la banda de color llega hasta el pie sin nada en medio, que es como se remata una página que termina en una sección de color: los dos bloques se tocan y se lee como una pieza. OJO CON LA EXCEPCIÓN: Contact Us lleva la clase dp-form pero también dp-desnuda, y esa página NO termina en la banda oscura sino en su propia línea legal sobre fondo claro, y encima tiene el pie escondido entero. Si se le quita el respiro de abajo, el texto legal queda pegado al borde de la pantalla. Por eso :not(.dp-desnuda). ============================================================================ */ /* CORREGIDO el mismo día, después de mirar las trece páginas que llevan formulario. La primera versión de esta regla también ponía a cero el relleno de abajo de los contenedores de Spectra de primer nivel, y eso estaba mal. POR QUÉ ESTABA MAL: en About Us la banda oscura va DENTRO de otro contenedor, así que poner a cero el de fuera sólo quitaba blanco sobrante. Pero en la portada, en Programs y en las nueve páginas de programa, la banda oscura ES el contenedor de primer nivel. Ahí la regla le quitaba sus propios 56 px de relleno de abajo, y la ficha blanca del formulario quedaba pegada al pie sin nada en medio. Lo vio Natalia en la portada: "está pegado el form al footer, me gusta ese espacio con el footer". Al ir a comprobarlo, lo mismo pasaba en Programs y en las nueve de programa. Trece páginas, no una. AHORA sólo se tocan los envoltorios del TEMA, que son blancos y no pintan nada, y cada banda conserva el relleno que trae. Con eso la ficha siempre tiene sus 56 px por debajo, del color de la banda. REGLA PARA LA PRÓXIMA VEZ: nunca poner a cero el relleno de un contenedor que pinta un fondo. El relleno de un bloque con color no es aire sobrante, es lo que separa su contenido del borde. */ body.dp-form:not(.dp-desnuda) .content-area.primary { padding-bottom: 0 !important; margin-bottom: 0 !important; } body.dp-form:not(.dp-desnuda) .site-main > article { padding-bottom: 0 !important; } /* === dopat-tipografia (programa-fraunces.css) === */ /* ============================================================================ DoPatagonia — Tipografía del sitio: Fraunces ---------------------------------------------------------------------------- Fraunces sustituye a Lora en TODOS los titulares, en TODO el sitio. No se suma: se cambia. Licencia SIL Open Font License: libre, también para uso comercial, sin coste y sin permisos. Autoalojada en este plugin, así que la página no le pide nada a Google al cargar (mejor para velocidad y para privacidad). Es una serif variable con eje óptico: el navegador ajusta el dibujo de la letra según el tamaño, de modo que un titular de 76 px y un rótulo de 17 px no usan la misma forma. Eso es lo que da aire de marca cuidada. Para comparar sin tocar nada: ?letra=lora vuelve a la tipografía anterior. ============================================================================ */ /* latin-ext: solo se descarga si la página usa esos caracteres */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/fraunces-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/fraunces-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------------------- TODO EL SITIO: titulares y textos destacados -------------------------------------------------------------------------- */ body h1, body h2, body h3, body h4, body h5, body h6, body .uagb-heading-text, body .uagb-ifb-title, body .site-title, body .ast-blog-featured-section .entry-title, body .widget-title, body blockquote { font-family: 'Fraunces', Lora, Georgia, serif !important; font-optical-sizing: auto; } /* Los titulares grandes bajan de peso: Fraunces pesa ópticamente más que Lora y al mismo peso gritaba. */ body h1, body h2 { font-weight: 500 !important; letter-spacing: -0.02em; } body h3, body h4 { font-weight: 600 !important; letter-spacing: -0.005em; } /* ---------------------------------------------------------------------------- PÁGINA PILOTO: afinado propio -------------------------------------------------------------------------- */ body.dp-programa #content h1, body.dp-programa #content h2, body.dp-programa #content h3, body.dp-programa #content .uagb-heading-text, body.dp-programa #content .uagb-ifb-title, body.dp-programa #content .wp-block-accordion-heading__toggle, body.dp-programa #content #rank-math-faq .rank-math-question, body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc, body.dp-programa #content .dp-review .dp-review__texto, body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2), body.dp-programa #content .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type, .dp-cta-bar__price b { font-family: 'Fraunces', Lora, Georgia, serif !important; font-optical-sizing: auto; } /* Fraunces pesa ópticamente más que Lora al mismo tamaño: los titulares grandes bajan de peso para que no griten, y se aprieta algo el interletraje. */ body.dp-programa #content .wp-block-cover h1 { font-weight: 500 !important; letter-spacing: -0.025em; } body.dp-programa #content .entry-content h2, body.dp-programa #content .uagb-heading-text { font-weight: 500 !important; letter-spacing: -0.02em; } body.dp-programa #content .uagb-block-40dcf50b .uagb-ifb-title { font-weight: 500 !important; letter-spacing: -0.02em; } body.dp-programa #content .entry-content h3, body.dp-programa #content .wp-block-accordion-heading__toggle, body.dp-programa #content #rank-math-faq .rank-math-question { font-weight: 600 !important; letter-spacing: -0.005em; } /* El precio y los datos del resumen: peso medio, que es donde Fraunces se ve mejor, con las cifras alineadas en altura. */ body.dp-programa #content .uagb-block-f667e985 .wp-block-columns:first-of-type > .wp-block-column:first-child > p:nth-child(2), body.dp-programa #content .dp-snapshot-grid .uagb-ifb-desc { font-weight: 500 !important; font-variant-numeric: lining-nums; } body.dp-programa #content .dp-review .dp-review__texto { font-weight: 400 !important; } /* === dopat-texto (texto-source.css) === */ /* ============================================================================ DoPatagonia — Letra del texto: Source Sans 3 ---------------------------------------------------------------------------- Sustituye a Inter en el cuerpo, los rótulos, los botones y el formulario. Los títulos y los textos de lucimiento siguen en Fraunces. Por qué esta: Source Sans está dibujada a partir de la escritura a mano —las letras tienen el trazo que deja una pluma—, igual que Fraunces. Inter está dibujada para pantallas de aplicación: clarísima, pero fría. Además dibuja algo más pequeño al mismo número, así que el texto se ve menos pesado. Pesa 28 KB. Licencia SIL Open Font: libre y sin coste. Autoalojada: la página no le pide nada a Google al cargar. NOTA SOBRE EL !important: el CSS que genera Spectra para cada bloque escribe la familia con selectores muy pesados (.uagb-block-xxxx li). Sin !important, la letra solo cambiaba en media página. Las reglas de Fraunces van después en este mismo archivo, así que ganan donde deben ganar. ============================================================================ */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("https://www.dopatagonia.com/wp-content/plugins/dopatagonia-design/assets/fonts/source-sans-3-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Todo el texto ---------------------------------------------------------- */ body, body p, body li, body span, body label, body input, body select, body textarea, body button, body a, body div, body td, body th, body figcaption, body .uagb-ifb-desc, body .uagb-icon-list__label, body .rank-math-answer, body .rank-math-answer p, body .dp-dia__k, body .dp-dia__v, body .dp-nav__link, body .dp-side__rotulo, body .dp-side__nota, body .dp-side__cta, body .dp-cta-bar__link, body .dp-cta-bar__price, body .dp-review__firma, body .dp-reviews__meta, body .dp-carrusel-cuenta, body .spectra-image-gallery__media-thumbnail-caption { font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; } /* ---- Lo que se queda en Fraunces ------------------------------------------- */ body h1, body h2, body h3, body h4, body h5, body h6, body .uagb-heading-text, body .uagb-ifb-title, body .wp-block-accordion-heading__toggle, body .wp-block-accordion-heading__toggle-title, body #rank-math-faq .rank-math-question, body .dp-precio-cifra, body .dp-side__precio, body .dp-cta-bar__price b, body .dp-review__texto, body .dp-snapshot-grid .uagb-ifb-desc, body .wp-block-uagb-advanced-heading + p, body .wp-block-cover__inner-container p, body .uagb-block-f667e985 > .uagb-container-inner-blocks-wrap > p:first-of-type { font-family: 'Fraunces', Lora, Georgia, serif !important; } /* === dopat-cabecera (cabecera-marca.css) === */ /* ============================================================================ DoPatagonia — Cabecera con los colores de la marca (TODO EL SITIO) ---------------------------------------------------------------------------- La cabecera era lo último que quedaba en dorado: la banda superior en #B8965D y el botón en #C69B00. Al lado de la paleta del logo desentonaban. Regla que se aplica en todo el sitio a partir de aquí: azul = acción (botones) verde = superficie y titulares arena = fondo cálido Contrastes medidos: blanco sobre #0E5F94 = 6,81:1. Se desactiva igual que el resto: ?color=dorado ============================================================================ */ /* ---- Banda superior --------------------------------------------------------- */ .ast-above-header-bar { background-color: #0E5F94 !important; } .ast-above-header-bar, .ast-above-header-bar p, .ast-above-header-bar span, .ast-above-header-bar .ast-builder-html-element { color: #FFFFFF !important; } .ast-above-header-bar a { color: #FFFFFF !important; text-decoration: none; } .ast-above-header-bar a:hover, .ast-above-header-bar a:focus { color: #CFE6F5 !important; text-decoration: underline; } .ast-above-header-bar a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; } /* ---- Botón principal de la cabecera ---------------------------------------- */ .ast-custom-button, .ast-header-button-1 .ast-custom-button { background-color: #0E5F94 !important; border-color: #0E5F94 !important; color: #FFFFFF !important; } .ast-builder-button-wrap:hover .ast-custom-button, .ast-custom-button:hover, .ast-custom-button-link:hover .ast-custom-button, .ast-custom-button-link:focus .ast-custom-button { background-color: #0B4E7A !important; border-color: #0B4E7A !important; color: #FFFFFF !important; } .ast-custom-button-link:focus-visible .ast-custom-button { outline: 3px solid #0E5F94; outline-offset: 3px; } /* ---- Botón de menú en móvil ------------------------------------------------- */ .ast-mobile-menu-trigger-fill, .ast-mobile-menu-trigger-minimal, .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill { color: #0E5F94 !important; } .ast-mobile-menu-trigger-fill svg, .ast-mobile-menu-trigger-minimal svg, .menu-toggle svg { fill: #0E5F94 !important; color: #0E5F94 !important; } /* ============================================================================ COLORES DE MARCA EN CABECERA, MENÚ Y PIE (TODO EL SITIO) ---------------------------------------------------------------------------- Auditoría de colores: quedaban restos de la paleta anterior en sitios que no se ven a primera vista pero están en todas las páginas. #1A3A5C azul marino → menú y pie #C8A96E dorado → enlaces del pie #3B8FD4 azul claro → enlaces sueltos Todo pasa a la familia del logo: gris oscuro para el menú, verde profundo para el pie y verde claro para sus enlaces. ============================================================================ */ .main-header-menu .menu-link, .ast-header-break-point .main-header-menu .menu-link, .main-navigation .menu-link { color: #2C2C2C !important; } .main-header-menu .menu-item:hover > .menu-link, .main-header-menu .current-menu-item > .menu-link, .main-navigation .menu-item:hover > .menu-link { color: #2C4A26 !important; } /* Submenús */ .main-header-menu .sub-menu .menu-link { background-color: #2C4A26 !important; color: #FFFFFF !important; } .main-header-menu .sub-menu .menu-item:hover > .menu-link { background-color: #1F3619 !important; } /* ---- Pie ------------------------------------------------------------------- */ .site-footer .site-primary-footer-wrap { background-color: #1F3619 !important; } .site-footer a { color: #9ACB6A !important; } .site-footer a:hover { color: #FFFFFF !important; } .site-footer .widget-title, .site-footer h2, .site-footer h3 { color: #FFFFFF !important; } /* El botón del pie, al azul de marca */ .site-footer .wp-block-button__link, .site-footer .uagb-buttons-repeater.wp-block-button__link { background-color: #0E5F94 !important; border-color: #0E5F94 !important; color: #FFFFFF !important; } .site-footer .wp-block-button__link:hover, .site-footer .uagb-buttons-repeater.wp-block-button__link:hover { background-color: #1272B0 !important; border-color: #1272B0 !important; } /* Enlace de salto y enlaces sueltos con el azul claro antiguo */ .skip-link, a[style*="3B8FD4"] { color: #0E5F94 !important; } /* Últimos restos, cazados en la segunda pasada de auditoría */ footer.site-footer { background-color: #1F3619 !important; } .site-footer .footer-widget-area, .site-footer .widget_nav_menu, .site-footer .widget { color: #FFFFFF !important; } .ast-custom-button-link, .ast-custom-button-link:visited { color: #FFFFFF !important; } /* ---- Menú de móvil --------------------------------------------------------- El panel desplegable seguía en azul marino. Pasa al verde de marca, con los enlaces en blanco. */ .ast-header-break-point .main-header-menu, .ast-header-break-point .main-header-menu .menu-item, .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-popup-content .main-header-menu { background-color: #2C4A26 !important; } .ast-header-break-point .main-header-menu .menu-link, .ast-mobile-popup-content .main-header-menu .menu-link { background-color: transparent !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .14) !important; } .ast-header-break-point .main-header-menu .menu-item:hover > .menu-link, .ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link { color: #9ACB6A !important; } .custom-logo-link, .custom-logo-link:visited { color: #2C4A26 !important; } /* ---- Últimos colores ajenos al logo ------------------------------------------ Los encontró la revisión de color, uno a uno, sobre la página ya montada. */ /* El botón de la cabecera llevaba el azul viejo (#3B8FD4) en el enlace. No se veía porque el texto blanco lo tapa, pero se hereda en cuanto algo cambia. */ .ast-builder-button-wrap .menu-link, .ast-builder-button-wrap .ast-custom-button { color: #FFFFFF !important; } /* La barra de abajo del pie era negra (#191919), sin relación con la marca. Pasa a ser el verde profundo, un tono más oscuro que el pie. */ .site-below-footer-wrap, .site-below-footer-wrap .ast-builder-grid-row-container-inner { background-color: #152510 !important; } /* Lo que parecía un filete es un borde de 62 px que Astra pone encima del pie. Estaba en gris azulado (#F5F7F9) y dejaba una franja clara entre el formulario y el pie; teñido de verde claro quedaba una banda de otro verde. Se pinta del mismo verde del pie: deja de ser una franja y pasa a ser simplemente aire. */ .site-primary-footer-wrap { border-top-color: #1F3619 !important; } /* Aviso del formulario tras enviar: azul de WordPress → azul del logo. */ .wpcf7-response-output { border-color: #0E5F94 !important; } /* ============================================================================ LA FORMA DE LA CABECERA (no solo el color) Lo que se veía mal, medido sobre la página montada: · La banda de arriba ocupaba 70 px de alto para una línea de texto de 13 px, y el texto quedaba pegado al borde superior en vez de centrado. Son 70 px de la parte más valiosa de la pantalla, en todas las páginas. · El botón "Get In Touch" era un rectángulo de esquinas rectas, cuando todos los demás botones del sitio son pastillas redondas. Un botón de otra forma se lee como de otro sitio. · La cabecera no tenía ninguna línea abajo, así que al bajar la página el contenido parecía nacer flotando. · En el móvil no había ningún botón: solo el logo y las tres rayitas. ============================================================================ */ /* ---- La banda de arriba, a su altura ------------------------------------------ */ .ast-above-header-wrap .site-above-header-wrap, .ast-above-header-bar { min-height: 0 !important; } .ast-above-header-wrap .ast-builder-grid-row { min-height: 40px !important; align-items: center !important; } .ast-above-header-bar .ast-builder-html-element, .ast-above-header-bar p { margin: 0 !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; } /* ---- El botón, como todos los demás ------------------------------------------- */ .ast-custom-button, .ast-header-button-1 .ast-custom-button { border-radius: 999px !important; min-height: 42px; padding: 0 24px !important; display: inline-flex !important; align-items: center; justify-content: center; font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em; /* Astra lo pone en "capitalize" desde sus ajustes y su hoja va después, así que aquí hace falta el !important. */ text-transform: uppercase !important; white-space: nowrap; } /* ---- Una línea abajo, para que la cabecera se apoye --------------------------- */ .ast-below-header-wrap .site-below-header-wrap, .site-header .main-header-bar { border-bottom: 1px solid #E8E4DC; } /* ---- El menú ------------------------------------------------------------------ */ .main-header-menu .menu-link { font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: .005em; } /* ---- Móvil --------------------------------------------------------------------- Se probó a poner el botón "Get in touch" al lado de las tres rayitas y Natalia lo retiró. La cabecera del móvil vuelve a ser el logotipo y el menú, y el logotipo recupera su tamaño (se había achicado para hacerle sitio al botón). */ @media (max-width: 921px) { .ast-header-break-point #ast-mobile-header .ast-header-button-1, .ast-header-break-point .ast-mobile-header-wrap .ast-header-button-1 { display: none !important; } } /* ============================================================================ EL PIE, ORDENADO Lo que se veía mal, medido sobre la página montada en 1440 px: · Las tres columnas empezaban a alturas distintas: la primera a 134 px, la tercera a 223 y la segunda a 261. Nada se alineaba con nada. · La columna del medio iba centrada y con saltos de línea metidos a mano, así que quedaban cuatro renglones cortos y desiguales. · "Useful Links" era un titular grande en Fraunces y las otras dos columnas no tenían titular ninguno. · El botón era un rectángulo, cuando el resto del sitio usa pastillas. · 80 px de vacío antes de que empezara nada. ============================================================================ */ /* Las tres columnas, arriba y alineadas. */ .site-footer .site-primary-footer-wrap .ast-builder-grid-row { align-items: start !important; } .site-footer .site-primary-footer-wrap { padding-top: 46px !important; padding-bottom: 34px !important; } .site-footer .footer-widget-area-inner > *:first-child { margin-top: 0 !important; } /* Todo a la izquierda: tres columnas, tres bloques de texto que empiezan en la misma vertical. Centrado solo funciona cuando hay una cosa sola. */ .site-footer .site-primary-footer-wrap .widget, .site-footer .site-primary-footer-wrap p, .site-footer .site-primary-footer-wrap .uagb-heading-text, .site-footer .site-primary-footer-wrap .wp-block-uagb-advanced-heading { text-align: left !important; } .site-footer .site-primary-footer-wrap .menu { text-align: left !important; padding-left: 0; } /* Los tres titulares de columna, iguales entre sí. */ .site-footer .site-primary-footer-wrap .uagb-heading-text, .site-footer .site-primary-footer-wrap h3 { font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .62) !important; margin: 0 0 14px !important; } .site-footer .site-primary-footer-wrap p { font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .86) !important; } /* Los enlaces: verde claro sobre verde oscuro se lee flojo. Se suben a blanco y el verde queda para el hover. Contraste blanco sobre #1F3619: 12,6:1. */ .site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater) { color: rgba(255, 255, 255, .88) !important; text-decoration: none; } .site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover, .site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):focus-visible { color: #9ACB6A !important; text-decoration: underline; } .site-footer .site-primary-footer-wrap .menu-item { margin-bottom: 6px; } /* El botón del pie, pastilla como todos. */ .site-footer .wp-block-button__link, .site-footer .uagb-buttons-repeater { border-radius: 999px !important; min-height: 44px; padding: 0 24px !important; display: inline-flex !important; align-items: center; font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .04em; margin-top: 16px; } /* Los sellos, más chicos: ocupaban dos filas ellos solos. */ .site-footer .dp-confianza--oscuro .dp-confianza__logo { min-height: 38px; padding: 6px 10px; } .site-footer .dp-confianza--oscuro .dp-confianza__logo img { --dp-cf-alto: 24px !important; height: 24px !important; width: auto !important; } .site-footer .dp-confianza--oscuro .dp-confianza__fila { gap: 10px 12px; } .site-footer .dp-confianza--oscuro .dp-confianza__pie { font-size: 10.5px !important; } .site-footer .dp-confianza--oscuro .dp-confianza__titulo { margin-bottom: 12px !important; } @media (max-width: 921px) { .site-footer .site-primary-footer-wrap .footer-widget-area-inner { margin-bottom: 26px; } } /* El botón de la columna del medio iba centrado mientras su texto iba a la izquierda. */ .site-footer .site-primary-footer-wrap .uagb-buttons__wrap, .site-footer .site-primary-footer-wrap .wp-block-buttons { justify-content: flex-start !important; } /* ============================================================================ EL MARCO: LA BARRA DE ARRIBA Y EL PIE EL PROBLEMA, dicho por Natalia: "el color del pie no pega". Y era verdad, y no era culpa del verde: era de lo que tenía justo encima. La página terminaba con la banda del formulario en AZUL OSCURO y, sin nada en medio, empezaba el pie en VERDE OSCURO. Dos oscuros distintos, pegados, sin relación entre ellos. Juntos se peleaban. LA DECISIÓN: el pie se aparta del todo y se va al mismo color arena del resto de la página. Así la banda azul del formulario queda como el ÚNICO bloque oscuro de la portada y es lo que más destaca, que es justo donde se pide algo. El pie vuelve a ser lo que un pie debe ser: información de servicio, discreta. Y pequeño. Natalia: "más pequeño, más sobrio, más minimalista". El sistema de color queda en cuatro piezas y ni una más: · #0E5F94 azul de acción, SOLO botones · #10384F azul profundo, la banda de arriba · #2C4A26 verde del logo, titulares y enlaces del pie · #F7F5F2 arena, fondos ============================================================================ */ .ast-above-header-bar { background-color: #10384F !important; } /* ---- El pie, en claro ---------------------------------------------------------- */ .site-footer .site-primary-footer-wrap, footer.site-footer { background-color: #F7F5F2 !important; } .site-primary-footer-wrap { border-top: 1px solid #E3DED4 !important; border-top-color: #E3DED4 !important; } .site-below-footer-wrap, .site-below-footer-wrap .ast-builder-grid-row-container-inner { background-color: #EFEAE2 !important; } /* ---- Más pequeño --------------------------------------------------------------- Antes: 46 px de aire arriba, texto a 14 px y sellos de 38 px de alto. Un pie no necesita nada de eso. */ .site-footer .site-primary-footer-wrap { padding-top: 34px !important; padding-bottom: 24px !important; } .site-footer .site-below-footer-wrap { padding-top: 12px !important; padding-bottom: 12px !important; } .site-footer .site-primary-footer-wrap p { font-size: 13px !important; line-height: 1.55 !important; color: #55534E !important; } .site-footer .site-primary-footer-wrap .uagb-heading-text, .site-footer .site-primary-footer-wrap h3, .site-footer .widget-title, .site-footer h2 { font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #8A8579 !important; margin: 0 0 10px !important; } .site-footer .site-primary-footer-wrap p strong { color: #2C2C2C !important; } .site-footer .site-primary-footer-wrap .menu-item { margin-bottom: 2px; } .site-footer .site-primary-footer-wrap .menu-link { font-size: 13px !important; line-height: 1.7 !important; } /* ---- Texto y enlaces ------------------------------------------------------------ */ .site-footer .footer-widget-area, .site-footer .widget_nav_menu, .site-footer .widget, .site-footer .site-below-footer-wrap, .site-footer .site-below-footer-wrap p { color: #55534E !important; } .site-footer a, .site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater) { color: #2C4A26 !important; text-decoration: none; } .site-footer a:hover, .site-footer .site-primary-footer-wrap a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover { color: #0E5F94 !important; text-decoration: underline; } /* Los iconos de las redes eran blancos. */ .site-footer .ast-builder-social-element svg, .site-footer .ast-social-icon-image-wrap svg, .site-footer .ahfb-svg-iconset svg { fill: #2C4A26 !important; color: #2C4A26 !important; width: 15px !important; height: 15px !important; } .site-footer .ast-builder-social-element { font-size: 12.5px !important; } /* ---- Los sellos ------------------------------------------------------------------ Sobre fondo claro no hacen falta las pastillas blancas: los logotipos ya se ven solos. Fuera, y más chicos. */ .site-footer .dp-confianza--oscuro .dp-confianza__logo { background: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; } .site-footer .dp-confianza--oscuro .dp-confianza__logo img { --dp-cf-alto: 20px !important; height: 20px !important; width: auto !important; } .site-footer .dp-confianza--oscuro .dp-confianza__fila { gap: 8px 20px; } .site-footer .dp-confianza--oscuro .dp-confianza__titulo { color: #8A8579 !important; font-size: 10.5px !important; margin-bottom: 10px !important; } .site-footer .dp-confianza--oscuro .dp-confianza__pie { color: #55534E !important; font-size: 10px !important; } .site-footer .dp-confianza--oscuro a:hover .dp-confianza__pie { color: #0E5F94 !important; } /* ---- El botón -------------------------------------------------------------------- Más chico: en un pie discreto, un botón grande es lo único que no pega. */ .site-footer .wp-block-button__link, .site-footer .uagb-buttons-repeater { background-color: #0E5F94 !important; border-color: #0E5F94 !important; color: #FFFFFF !important; border-radius: 999px !important; min-height: 38px !important; padding: 0 18px !important; display: inline-flex !important; align-items: center; font-family: 'Source Sans 3', Inter, system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .04em; margin-top: 12px; } .site-footer .wp-block-button__link:hover, .site-footer .uagb-buttons-repeater:hover { background-color: #1272B0 !important; border-color: #1272B0 !important; } /* ---- Las tres columnas, arriba y a la izquierda ---------------------------------- */ .site-footer .site-primary-footer-wrap .ast-builder-grid-row { align-items: start !important; } .site-footer .footer-widget-area-inner > *:first-child { margin-top: 0 !important; } .site-footer .site-primary-footer-wrap .widget, .site-footer .site-primary-footer-wrap p, .site-footer .site-primary-footer-wrap .uagb-heading-text, .site-footer .site-primary-footer-wrap .wp-block-uagb-advanced-heading, .site-footer .site-primary-footer-wrap .menu { text-align: left !important; } .site-footer .site-primary-footer-wrap .menu { padding-left: 0; } .site-footer .site-primary-footer-wrap .uagb-buttons__wrap, .site-footer .site-primary-footer-wrap .wp-block-buttons { justify-content: flex-start !important; } @media (max-width: 921px) { .site-footer .site-primary-footer-wrap .footer-widget-area-inner { margin-bottom: 22px; } } /* ============================================================================ EL MENÚ, AL AZUL DEL MARCO Quedaba verde: el panel desplegable del móvil y el submenú del ordenador venían del reparto anterior, cuando el pie también era verde. Ahora el pie es claro y el marco es azul profundo, así que el verde del menú era el único sitio del sitio con ese color y cantaba. El verde no desaparece: sigue en los titulares, en los enlaces del pie y en el logotipo. Es color de marca, no color de superficie. ============================================================================ */ /* Panel del móvil */ .ast-header-break-point .main-header-menu, .ast-header-break-point .main-header-menu .menu-item, .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-popup-content .main-header-menu, .ast-mobile-popup-drawer .ast-mobile-popup-inner, .ast-mobile-popup-drawer .ast-mobile-popup-content { background-color: #10384F !important; } .ast-header-break-point .main-header-menu .menu-link, .ast-mobile-popup-content .main-header-menu .menu-link { background-color: transparent !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .14) !important; } .ast-header-break-point .main-header-menu .menu-item:hover > .menu-link, .ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link, .ast-header-break-point .main-header-menu .current-menu-item > .menu-link { color: #9ACB6A !important; } /* La cruz de cerrar y las flechas del panel */ .ast-mobile-popup-drawer .menu-toggle-close, .ast-mobile-popup-drawer .ast-mobile-popup-header svg, .ast-header-break-point .main-header-menu .ast-menu-toggle svg { color: #FFFFFF !important; fill: #FFFFFF !important; } /* Submenú del ordenador */ .main-header-menu .sub-menu .menu-link { background-color: #10384F !important; color: #FFFFFF !important; } .main-header-menu .sub-menu .menu-item:hover > .menu-link { background-color: #0B2B3C !important; color: #9ACB6A !important; } /* ============================================================================ EL PIE, MÁS PEQUEÑO TODAVÍA Segunda pasada: seguía sobrando aire. Un pie es información de servicio. ============================================================================ */ .site-footer .site-primary-footer-wrap { padding-top: 24px !important; padding-bottom: 16px !important; } .site-footer .site-below-footer-wrap { padding-top: 9px !important; padding-bottom: 9px !important; } .site-footer .site-primary-footer-wrap p { font-size: 12.5px !important; line-height: 1.5 !important; margin-bottom: 8px !important; } .site-footer .site-primary-footer-wrap .uagb-heading-text, .site-footer .site-primary-footer-wrap h3, .site-footer .widget-title { font-size: 10px !important; margin: 0 0 7px !important; } .site-footer .site-primary-footer-wrap .menu-link, .site-footer .site-primary-footer-wrap .wp-block-list { font-size: 12.5px !important; line-height: 1.55 !important; } .site-footer .site-primary-footer-wrap .wp-block-list li { margin-bottom: 0 !important; } .site-footer .wp-block-button__link, .site-footer .uagb-buttons-repeater { min-height: 34px !important; padding: 0 16px !important; font-size: 11px !important; margin-top: 8px; } .site-footer .dp-confianza--oscuro { margin-top: 14px !important; padding-top: 14px !important; } .site-footer .dp-confianza--oscuro .dp-confianza__logo img { --dp-cf-alto: 17px !important; height: 17px !important; } .site-footer .dp-confianza--oscuro .dp-confianza__titulo { margin-bottom: 8px !important; } .site-footer .site-below-footer-wrap p, .site-footer .ast-footer-copyright p { font-size: 11.5px !important; margin: 0 !important; } .site-footer .ast-builder-social-element { margin: 0 6px !important; } /* Los sellos del pie, apretados: quedaban dos filas con un hueco enorme entre el logotipo y su texto, y otro entre fila y fila. */ .site-footer .dp-confianza--oscuro .dp-confianza__fila { gap: 4px 16px !important; align-items: flex-start; } .site-footer .dp-confianza--oscuro .dp-confianza__marca a, .site-footer .dp-confianza--oscuro .dp-confianza__marca { padding: 0 !important; margin: 0 !important; } .site-footer .dp-confianza--oscuro .dp-confianza__pie { margin-top: 3px !important; line-height: 1.2 !important; } .site-footer .dp-confianza--oscuro .dp-confianza__logo { margin-bottom: 0 !important; } /* Los cuatro sellos en una sola fila: con 16 px de hueco el de WeTravel se caía al renglón de abajo él solo. */ .site-footer .dp-confianza--oscuro .dp-confianza__fila { gap: 4px 12px !important; flex-wrap: wrap; } .site-footer .dp-confianza--oscuro .dp-confianza__logo img { --dp-cf-alto: 15px !important; height: 15px !important; } .site-footer .dp-confianza--oscuro .dp-confianza__pie { font-size: 9.5px !important; } /* La barra de abajo: los nombres de las redes salían en gris casi blanco sobre fondo claro, no se leían. */ .site-footer .site-below-footer-wrap, .site-footer .site-below-footer-wrap a, .site-footer .ast-builder-social-element, .site-footer .ast-builder-social-element .social-item-label { color: #55534E !important; } .site-footer .site-below-footer-wrap a:hover, .site-footer .ast-builder-social-element:hover { color: #0E5F94 !important; } .site-footer .site-below-footer-wrap svg, .site-footer .ast-builder-social-element svg { fill: #55534E !important; } /* ============================================================================ EL PIE TENÍA 200 px DE AIRE MUERTO, Y LOS SELLOS NO SE LEÍAN Corregido el 2026-09-13, en la revisión estética de toda la web. LO QUE SE MIDIÓ en producción, en un teléfono de 375 px. El pie medía 861 px. 1. LA COLUMNA VACÍA. Al quitar el texto de "Not sure which Patagonia route", los dos bloques se quedaron sin contenido pero la columna del medio siguió ocupando su sitio: 22 px de la columna, 10 de margen y los dos huecos de 57 px que la rejilla pone a cada lado. 146 px de nada entre el logotipo de WeTravel y "USEFUL LINKS". Se esconde SOLA y sólo mientras esté vacía: en cuanto vuelvas a poner algo dentro, :has(.widget *) deja de cumplirse y la columna reaparece. No hay que acordarse de borrar esta regla. 2. EL BLOQUE FANTASMA DEL FINAL. Detrás de la lista de enlaces hay un bloque vacío (block-45). Como existe, la lista no era "el último" y arrastraba sus 44,8 px de margen: 67 px de blanco antes de la barra de abajo. 3. LOS HUECOS ENTRE COLUMNAS eran de 57 px, pensados para el escritorio, donde van una al lado de la otra. En el teléfono van una debajo de otra y ese hueco es el doble de lo que hace falta. 4. LOS CUATRO SELLOS. Los fui achicando (24, 20, 17 y al final 15 px) para que cupieran los cuatro en una fila, y aun así WeTravel se caía al renglón de abajo él solo. Peor: el de Sernatur es un sello CUADRADO de 240x240, y a 15 px de alto era un punto gris ilegible, justo el que más importa porque es el registro oficial. Ahora van en dos y dos, en columnas alineadas, y cada uno a la altura que le corresponde por su forma: las palabras (Tripadvisor, Google, WeTravel) a 16 px, y el sello redondo a 30, que es lo que necesita un dibujo para leerse igual que una palabra. RESULTADO: el pie pasó de 861 a 664 px. No se quitó nada de lo que dice. ============================================================================ */ /* 1. La columna del medio, mientras esté vacía. */ .site-footer .site-primary-footer-wrap .site-footer-primary-section-2:not(:has(.widget *)) { display: none !important; } /* 2. Cualquier bloque de pie sin nada dentro deja de ocupar. */ .site-footer .site-primary-footer-wrap .widget:not(:has(*)) { display: none !important; } .site-footer .site-primary-footer-wrap .widget { margin-bottom: 14px !important; } .site-footer .site-primary-footer-wrap .footer-widget-area { margin-bottom: 8px !important; } /* 3. El hueco entre columnas, sólo en el teléfono. */ @media (max-width: 780px) { .site-footer .site-primary-footer-inner-wrap { row-gap: 26px !important; } } /* 4. Los sellos: dos y dos, alineados, y cada uno a su altura. */ .site-footer .dp-confianza--oscuro .dp-confianza__fila { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; align-items: start !important; max-width: 320px; } .site-footer .dp-confianza--oscuro .dp-confianza__logo { height: 32px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .site-footer .dp-confianza--oscuro .dp-confianza__logo img { --dp-cf-alto: 16px !important; height: 16px !important; max-height: 16px !important; } /* El sello de Sernatur es cuadrado: a la altura de una palabra no se lee. */ .site-footer .dp-confianza--oscuro .dp-confianza__marca:first-child .dp-confianza__logo img { --dp-cf-alto: 30px !important; height: 30px !important; max-height: 30px !important; } /* El pie de cada sello iba centrado bajo un logotipo alineado a la izquierda, así que empezaba antes que el propio logotipo. */ .site-footer .dp-confianza--oscuro .dp-confianza__marca, .site-footer .dp-confianza--oscuro .dp-confianza__pie { text-align: left !important; font-size: 10.5px !important; } /* ============================================================================ EL ANTETÍTULO SÓLO EXISTÍA EN LA PORTADA Corregido el 2026-09-13. QUÉ PASABA: en la página de Programs, "What goes inside a program" salía como un párrafo cualquiera, en 16 px y en negro, justo encima de un titular de 30 px. En la portada la misma línea sale pequeña, en mayúsculas y en verde, que es como está pensada. POR QUÉ: la regla estaba escrita como "body.home .dp-antetitulo" y vive en home.css, que sólo se carga en la portada. Pero los bloques que escriben esa línea (experiencias.php, mapa.php y segmentos.php) se usan también fuera. Esta hoja se carga en todo el sitio, así que la regla va aquí, sin atarla a ninguna página. La de home.css puede quedarse: dice lo mismo. ============================================================================ */ #content .dp-antetitulo { display: block; margin: 0 0 8px; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 11.5px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A7A26 !important; } /* ============================================================================ EL PIE, SEGUNDA VUELTA: FUERA LOS SELLOS Y MENOS AIRE 2026-09-13. Natalia: "en el footer saca esos logos. deja más ordenado el footer, demasiado espacio, que se vea bien". LOS SELLOS: el bloque "Registered and reviewed" con Sernatur, Tripadvisor, Google y WeTravel sale del pie. Se vació su widget (el 131) desde la base de datos, con respaldo en ~/respaldos/. NO desaparecen del sitio: el mismo bloque sigue en la portada, encima del formulario, que es donde de verdad sirve, justo antes de que alguien escriba. Rato antes yo los había reordenado en dos columnas y agrandado el sello de Sernatur. Estaba mejor que antes, pero seguía siendo mucho peso al final de la página. Tenía razón en sacarlos: un pie es para orientarse, no para convencer. LOS ENLACES EN DOS COLUMNAS: eran seis en fila india, 116 px. En dos columnas son 58 y se leen igual de bien. Sólo en el teléfono; en el escritorio el pie ya tiene sus columnas. EL PIE COMPLETO, en un teléfono de 390 px: 861 px como estaba esta mañana 664 px tras quitar la columna vacía y los huecos muertos 506 px sin los sellos 436 px con los enlaces en dos columnas La mitad, sin perder un solo dato. ============================================================================ */ @media (max-width: 780px) { .site-footer .site-primary-footer-wrap .wp-block-list { columns: 2; column-gap: 16px; } .site-footer .site-primary-footer-wrap .wp-block-list li { break-inside: avoid; } .site-footer .site-below-footer-wrap { padding-top: 2px !important; padding-bottom: 4px !important; } } /* ---- Y en el escritorio, el pie se quedó cojo ---------------------------------- Al vaciar la columna del medio, la rejilla seguía siendo de tres columnas de 366 px. Con sólo dos ocupadas, el contenido terminaba en el píxel 823 de una rejilla de 1.200: 417 px de vacío pegados al borde derecho. En el teléfono no se veía porque las columnas van una debajo de otra. Ahora, cuando la del medio está vacía, son dos: los datos a la izquierda y los enlaces pegados a la derecha, que es como se resuelve un pie de toda la vida. Si algún día vuelve a haber algo en el medio, la regla de abajo devuelve las tres sola. OJO con :has(): NO se puede meter un :has() dentro de otro. La regla natural sería "si la del medio NO tiene contenido, dos columnas", pero eso se escribe :has(... :not(:has(...))) y el navegador lo descarta entero como selector inválido, sin avisar. Por eso está al revés: dos columnas por defecto, y las tres sólo si la del medio SÍ tiene algo. Un único :has(), y válido. -------------------------------------------------------------------------------- */ @media (min-width: 781px) { .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap { grid-template-columns: minmax(0, 1fr) auto !important; } .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap:has(.site-footer-primary-section-2 .widget *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ============================================================================ EL PIE, TERCERA VUELTA: LAS TRES COLUMNAS OCUPADAS 2026-09-13. Natalia: "quizás en el escritorio Facebook, Insta, Youtube y 2026 Do Patagonia all rights debería ir donde están los useful links, y useful links al medio". Tenía razón y era mejor idea que la mía. Yo había apañado el hueco de la derecha estirando las dos columnas que quedaban. Ella vio que sobraba una fila entera abajo y faltaba contenido en el medio: moviendo las redes y el aviso de derechos a la tercera columna se arreglan las dos cosas de golpe. NO se hizo con CSS. Se movió donde de verdad vive, en la configuración del pie de Astra (opción astra-settings, clave footer-desktop-items): primary_1 datos de contacto (igual) primary_2 USEFUL LINKS (antes: la columna vacía) primary_3 redes + derechos (antes: USEFUL LINKS) below_1 vacío (antes: redes + derechos) Respaldo de la opción entera antes de tocarla, 223 KB, en ~/respaldos/astra-settings-antes-de-mover-pie-2026-09-13.json Al vaciar la fila de abajo desaparece también su franja de color distinto (era #EFEAE2 sobre un pie #F7F5F2), que partía el pie en dos tonos sin ninguna razón. El pie de escritorio pasó de 309 a 227 px. Las dos reglas de aquí arriba se curan solas con este cambio: la columna del medio ya tiene contenido, así que vuelven las tres columnas y deja de esconderse. No hay que borrarlas. LO ÚNICO QUE HIZO FALTA EN CSS: dentro de la tercera columna, las redes venían centradas y el aviso de derechos alineado a la izquierda. Dos alineaciones distintas en la misma columna, y ninguna cuadraba con las otras dos columnas. Todo a la izquierda, un solo borde para el pie entero. ============================================================================ */ .site-footer .site-footer-primary-section-3 .footer-social-inner-wrap, .site-footer .site-footer-primary-section-3 .ast-builder-social-element-wrap, .site-footer .site-footer-primary-section-3 .ast-footer-copyright, .site-footer .site-footer-primary-section-3 .ast-builder-layout-element { text-align: left !important; } .site-footer .site-footer-primary-section-3 .ast-builder-social-element:first-child { margin-left: 0 !important; } /* === dopat-resenas (resenas.css) === */ /* ============================================================================ DoPatagonia — Reseñas de viajeros Un solo bloque para todo el sitio. No depende de en qué página esté: se estila por su propia clase, así que basta con poner [dopat_resenas] donde haga falta. Carrusel de desplazamiento nativo (scroll-snap): funciona con el dedo, con la rueda, con el teclado y sin JavaScript. Las flechas y los puntos son un añadido, no el mecanismo. ============================================================================ */ .dp-resenas { --dp-r-green: #2C4A26; --dp-r-gold: #C89B3C; --dp-r-ink: #2C2C2C; --dp-r-ink-soft: #55534E; --dp-r-sand: #F7F5F2; --dp-r-line: #E3DED4; --dp-r-cta: #0E5F94; max-width: 1120px; margin: 0 auto; padding: 0; } /* ---- Cabecera ---------------------------------------------------------------- */ .dp-resenas__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 22px; } .dp-resenas .dp-resenas__titulo { margin: 0 0 8px; font-family: 'Fraunces', Lora, Georgia, serif; font-weight: 500; font-size: clamp(26px, 3.1vw, 38px); line-height: 1.14; letter-spacing: -0.02em; color: var(--dp-r-green); } .dp-resenas .dp-resenas__meta { margin: 0; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--dp-r-ink-soft); } .dp-resenas .dp-resenas__meta strong { color: var(--dp-r-ink); font-weight: 700; } .dp-resenas .dp-resenas__meta a { color: var(--dp-r-ink-soft); text-decoration: underline; text-decoration-color: var(--dp-r-line); text-underline-offset: 3px; } .dp-resenas .dp-resenas__meta a:hover, .dp-resenas .dp-resenas__meta a:focus-visible { color: var(--dp-r-green); text-decoration-color: currentColor; } .dp-resenas__total { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dp-r-ink-soft); opacity: .85; } /* ---- Flechas ----------------------------------------------------------------- */ .dp-resenas__mandos { display: flex; gap: 8px; flex: 0 0 auto; } .dp-resenas__flecha { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--dp-r-line); border-radius: 999px; background: #FFFFFF; color: var(--dp-r-green); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .dp-resenas__flecha svg { width: 20px; height: 20px; } .dp-resenas__flecha:hover:not([disabled]) { background: var(--dp-r-green); border-color: var(--dp-r-green); color: #FFFFFF; } .dp-resenas__flecha[disabled] { opacity: .35; cursor: default; } .dp-resenas__flecha:focus-visible { outline: 2px solid var(--dp-r-cta); outline-offset: 2px; } /* ---- La pista ---------------------------------------------------------------- */ .dp-resenas__pista { /* Flex y no grid: con grid-auto-columns las nueve fichas se encogían para caber en el ancho en vez de salirse, y el carrusel no se desplazaba. */ display: flex; flex-wrap: nowrap; align-items: stretch; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 6px; /* Sin el margen negativo la primera ficha se pega al borde al desplazarse. */ margin: 0 -2px; } .dp-resenas__pista::-webkit-scrollbar { display: none; } .dp-resenas__pista:focus-visible { outline: 2px solid var(--dp-r-cta); outline-offset: 4px; border-radius: 16px; } /* Cuántas fichas se ven a la vez. flex-basis fija el ancho; flex-shrink a 0 es lo que impide que se apelotonen. En el teléfono se ve UNA entera, no una y el pico de la siguiente: el pico se pensó para que se notara que hay más, pero deja la reseña estrecha y se lee peor. De que hay más ya avisan los puntos. */ .dp-resena { flex: 0 0 100%; } @media (min-width: 700px) { .dp-resena { flex: 0 0 calc((100% - 18px) / 2); } } @media (min-width: 900px) { .dp-resena { flex: 0 0 calc((100% - 36px) / 3); } } /* ---- Una reseña -------------------------------------------------------------- */ .dp-resena { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; background: #FFFFFF; border: 1px solid var(--dp-r-line); border-radius: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); } .dp-resena__estrellas { font-size: 14px; letter-spacing: 2px; color: var(--dp-r-gold); line-height: 1; } .dp-resenas .dp-resena__texto { margin: 0; flex: 1 1 auto; font-family: 'Fraunces', Lora, Georgia, serif; font-size: 16.5px; font-weight: 400; line-height: 1.55; color: var(--dp-r-ink); letter-spacing: -0.005em; } .dp-resena__pie { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--dp-r-line); } .dp-resena__inicial { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--dp-r-sand); color: var(--dp-r-green); font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; } .dp-resena__firma { display: flex; flex-direction: column; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; line-height: 1.35; } .dp-resena__firma strong { font-size: 13.5px; font-weight: 600; color: var(--dp-r-ink); } .dp-resena__firma span { font-size: 11.5px; color: var(--dp-r-ink-soft); } /* ---- Puntos ------------------------------------------------------------------ */ .dp-resenas__puntos { display: flex; justify-content: center; gap: 7px; margin-top: 18px; min-height: 8px; } .dp-resenas__punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--dp-r-line); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .dp-resenas__punto[aria-current="true"] { width: 22px; background: var(--dp-r-green); } .dp-resenas__punto:focus-visible { outline: 2px solid var(--dp-r-cta); outline-offset: 3px; } /* En el teléfono las flechas sobran: se arrastra con el dedo. */ @media (max-width: 699px) { .dp-resenas__cab { display: block; } .dp-resenas__mandos { display: none; } .dp-resenas .dp-resena__texto { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .dp-resenas__pista { scroll-behavior: auto; } .dp-resenas__punto { transition: none; } } /* ---- Los puntos, agarrables con el dedo -------------------------------------- El punto mide 8 px porque más grande ensucia; el área que responde al dedo mide 44, que es el mínimo. Se consigue con relleno transparente y un fondo que solo pinta el recuadro interior. */ .dp-resenas__puntos { gap: 0; margin-top: 8px; } .dp-resenas__punto { width: 26px; height: 44px; background: none; display: inline-flex; align-items: center; justify-content: center; } .dp-resenas__punto::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--dp-r-line); transition: background-color .2s ease, width .2s ease; } .dp-resenas__punto[aria-current="true"] { width: 40px; background: none; } .dp-resenas__punto[aria-current="true"]::before { width: 22px; background: var(--dp-r-green); } .dp-resenas__punto:focus-visible { outline: 2px solid var(--dp-r-cta); outline-offset: -6px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .dp-resenas__punto::before { transition: none; } } /* Línea pequeña sobre el titular, igual que en las demás secciones. */ .dp-resenas .dp-resenas__ante { display: block; margin: 0 0 8px; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A7A26; } /* ---- La reseña entera, pinchable -------------------------------------------- Nueve clics muertos en el texto de las reseñas, medidos en grabaciones de gente real: la leen y pinchan esperando ir a la original. No existe dirección para una reseña suelta, así que se lleva al perfil de esa plataforma; y se lleva desde toda la ficha, no desde una palabra. */ .dp-resena--enlace { position: relative; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .dp-resena__fuente { color: var(--dp-r-ink-soft); text-decoration: none; } /* El enlace se estira por toda la ficha. */ .dp-resena__fuente::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; } .dp-resena__ir { display: inline-block; margin-left: 3px; opacity: 0; transform: translate(-2px, 2px); transition: opacity .16s ease, transform .16s ease; } .dp-resena--enlace:hover, .dp-resena--enlace:focus-within { border-color: #C9C2B4; box-shadow: 0 2px 5px rgba(0, 0, 0, .05), 0 14px 30px -20px rgba(0, 0, 0, .4); } .dp-resena--enlace:hover .dp-resena__ir, .dp-resena--enlace:focus-within .dp-resena__ir { opacity: 1; transform: translate(0, 0); } .dp-resena--enlace:hover .dp-resena__fuente, .dp-resena--enlace:focus-within .dp-resena__fuente { color: var(--dp-r-green); } .dp-resena__fuente:focus-visible::after { outline: 2px solid var(--dp-r-cta); outline-offset: 3px; } /* Para quien navega con lector de pantalla: el enlace tiene que decir a dónde va, no solo "Tripadvisor · May 2025". */ .dp-resena__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .dp-resena--enlace, .dp-resena__ir { transition: none; } } /* ============================================================================ LA CINTA DE CITAS Una sola fila de frases de clientes que pasa sola. Nueve reseñas reales desfilando dicen "tengo muchas" mejor que cualquier número escrito. Mismo truco que la cinta de fotos: la lista va escrita dos veces y se desplaza justo la mitad, así al volver al principio no se nota el salto. Se para al pasar el ratón, por si alguien quiere terminar de leer una. Los logotipos de abajo NO son enlaces: aquí arriba lo último que interesa es mandar a la gente a otra web. ============================================================================ */ .dp-citas { --dp-ci-vuelta: 75s; padding: 34px 0 6px; overflow: hidden; } .dp-citas__ventana { overflow: hidden; /* Se desvanece por los dos lados: se entiende que la fila sigue. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .dp-citas__pista { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; gap: 0; animation: dp-citas-vuelta var(--dp-ci-vuelta) linear infinite; } .dp-citas:hover .dp-citas__pista, .dp-citas:focus-within .dp-citas__pista { animation-play-state: paused; } @keyframes dp-citas-vuelta { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .dp-citas__pista { animation: none; } .dp-citas__ventana { overflow-x: auto; } } .dp-citas__cita { flex: 0 0 300px; width: 300px; margin: 0; padding: 0 22px; text-align: center; border-right: 1px solid #E3DED4; box-sizing: border-box; } @media (max-width: 560px) { .dp-citas__cita { flex-basis: 250px; width: 250px; padding: 0 16px; } } .dp-citas__comilla { display: block; font-family: 'Fraunces', Lora, Georgia, serif; font-size: 28px; line-height: 1; color: #4A7A26; margin-bottom: 6px; } body #content .dp-citas .dp-citas__texto { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 13px !important; font-weight: 600 !important; line-height: 1.45; letter-spacing: .03em; font-style: normal !important; text-transform: uppercase; color: #2C2C2C !important; } body #content .dp-citas .dp-citas__autor { margin: 0 !important; font-family: 'Source Sans 3', Inter, system-ui, sans-serif; font-size: 12.5px !important; font-style: italic; color: #4A7A26 !important; } /* ---- De dónde salen ------------------------------------------------------------ El negro sale de un filtro: brightness(0) deja a negro cualquier pixel que no sea transparente, así valen los mismos archivos que se usan a todo color en la franja de abajo y no hay que mantener dos versiones de cada logotipo. */ .dp-citas__marcas { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 30px; } .dp-citas__marcas li { margin: 0; } .dp-citas__marcas img { height: 18px; width: auto; display: block; filter: brightness(0); opacity: .7; } @media (max-width: 560px) { .dp-citas__marcas img { height: 15px; } } /* === dopat-preguntas (preguntas.css) === */ /* ============================================================================ DoPatagonia — Preguntas frecuentes plegadas Todo el texto sigue en el HTML: esto solo lo tapa. Google lo lee igual y los datos estructurados no cambian. ============================================================================ */ .dp-preguntas .rank-math-list-item { border-bottom: 1px solid var(--dp-line, #E3DED4); padding: 0 !important; margin: 0 !important; } .dp-preguntas .rank-math-list-item:first-child { border-top: 1px solid var(--dp-line, #E3DED4); } .dp-preguntas .rank-math-question { margin: 0 !important; padding: 0 !important; border: 0 !important; } .dp-preguntas .dp-preguntas__boton { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 60px; padding: 16px 4px !important; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: left; cursor: pointer; /* Astra pone todos los botones en mayúsculas y con su color. */ text-transform: none !important; letter-spacing: 0 !important; color: var(--dp-green, #2C4A26) !important; font-family: 'Fraunces', Lora, Georgia, serif !important; font-size: 18.5px !important; font-weight: 500 !important; line-height: 1.3; transition: color .15s ease; } .dp-preguntas .dp-preguntas__boton:hover { color: var(--dp-gold-ink, #4A7A26) !important; } .dp-preguntas .dp-preguntas__boton:focus-visible { outline: 2px solid var(--dp-cta, #0E5F94); outline-offset: -2px; } /* El signo: dos rayas que se cruzan; al abrir, la vertical desaparece. */ .dp-preguntas__mas { position: relative; flex: 0 0 auto; width: 18px; height: 18px; } .dp-preguntas__mas::before, .dp-preguntas__mas::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; transition: transform .18s ease, opacity .18s ease; } .dp-preguntas__mas::before { width: 16px; height: 2px; } .dp-preguntas__mas::after { width: 2px; height: 16px; } .dp-preguntas__boton[aria-expanded="true"] .dp-preguntas__mas::after { transform: rotate(90deg); opacity: 0; } .dp-preguntas .rank-math-answer { padding: 0 4px 20px !important; margin: 0 !important; max-width: 74ch; } .dp-preguntas .rank-math-answer[hidden] { display: none !important; } .dp-preguntas .rank-math-answer p { margin: 0 0 10px !important; } .dp-preguntas .rank-math-answer p:last-child { margin-bottom: 0 !important; } @media (max-width: 781px) { .dp-preguntas .dp-preguntas__boton { min-height: 56px; font-size: 17px !important; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .dp-preguntas .dp-preguntas__boton, .dp-preguntas__mas::before, .dp-preguntas__mas::after { transition: none; } } /* === 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-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; }