/* ==========================================================================
VEGAS DEL VERDE — base.css · v2 «Vende la escapada»
Reset, tipografía, utilidades de layout, animación de entrada y botones.
Depende de tokens.css (cargarlo SIEMPRE antes que este archivo).
v2: display Fraunces (antes Poiret One) · títulos de sección SIN
mayúsculas · botón primario con el acento cálido (coral) en vez del verde.
========================================================================== */
/* ==========================================================================
0. LAS DOS FUENTES DE MARCA, ALOJADAS EN EL PROPIO SITIO
Antes se cargaban con un a fonts.googleapis.com, con
font-display: swap (parpadeo garantizado: pinta con la fuente del
sistema y salta a la real cuando llega) y después con display: optional
PRECARGADO —que sólo evita el parpadeo si el archivo llega desde el CDN
de Google en la ventanita de ~100ms que el navegador da antes de
resignarse—. Ese margen depende de una red que no controlamos: en la
práctica seguía fallando.
Alojando el propio woff2 el archivo es del mismo origen que el resto del
sitio: nada de negociar con un servidor externo, nada de esperar su
round-trip. Con display: optional pedido a un archivo que ya está en el
propio dominio, casi nunca llega tarde a esa ventana. Son los DOS únicos
archivos que hacen falta —el subconjunto «latin», que cubre el español
entero (ñ, tildes, ¿¡, «»)— porque el sitio no tiene texto en otro
alfabeto; los otros subconjuntos que trae Google (vietnamese, greek,
cyrillic…) sobraban.
Son fuentes VARIABLES: un solo archivo cubre todo el rango de peso
300–700, por eso `font-weight: 300 700` (un rango, no un número) y por
eso tokens.css puede pedir cualquier --peso-* sin más archivos.
`font-optical-sizing: auto` (ya declarado donde se usa Fraunces) activa
el eje óptico del propio archivo sin necesitar un peso aparte.
Los archivos viven en styles/fonts/ y se precargan desde el de
cada página (ver herramientas/precargar-fuentes.js) para que empiecen a
bajar en el primer instante, antes incluso de que el navegador termine
de parsear este CSS. */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: optional;
src: url('fonts/dm-sans-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;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: optional;
src: url('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;
}
/* ==========================================================================
1. RESET MODERNO
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* el header fijo no debe tapar el destino de un ancla */
scroll-padding-top: calc(var(--alto-header) + var(--esp-md));
}
body {
min-height: 100vh;
min-height: 100svh;
background-color: var(--color-fondo);
color: var(--color-texto);
font-family: var(--fuente-cuerpo);
font-size: var(--fs-cuerpo);
font-weight: var(--peso-normal);
line-height: var(--alto-linea-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
img {
background-color: rgb(var(--gris-verde-rgb) / 0.25);
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
overflow-wrap: break-word;
text-wrap: pretty;
}
ul[class],
ol[class] {
list-style: none;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
:target {
scroll-margin-top: calc(var(--alto-header) + var(--esp-md));
}
/* ==========================================================================
2. TIPOGRAFÍA
========================================================================== */
/* Los titulares van en Fraunces con --peso-display, que en v3 baja a 320:
serif enorme y FINO, el gesto del referente. font-optical-sizing deja que
Fraunces afine el contraste según el cuerpo.
El tracking cerrado de v2 (--track-display, negativo) se cambia por
--tracking-display (+0.04em): un peso 320 a cuerpo de display necesita
aire entre letras, no cierre, o los astas finas se empastan. */
h1,
h2,
h3,
h4 {
font-family: var(--fuente-display);
font-weight: var(--peso-display);
font-optical-sizing: auto;
font-variation-settings: var(--ejes-display);
line-height: var(--alto-linea-titulo);
/* DUEÑO ÚNICO del tracking de titulares. Antes aquí vivía --track-titulo
(el token de v2, NEGATIVO: -0.005em) y sólo h1/h2 lo corregían uno a uno,
así que todo h3/h4 y todo modificador que volviera a declarar el token
se salía del sistema en dirección contraria a la pactada. Ahora el valor
se declara una sola vez para los cuatro y NADIE vuelve a redeclararlo. */
letter-spacing: var(--tracking-display);
color: var(--color-texto);
text-wrap: balance;
}
h1 {
font-size: var(--fs-h1);
line-height: var(--alto-linea-apretado);
}
/* Los h2 se quedan en caja de frase a propósito: son frases largas en
español («Un refugio natural a veinte minutos de Bucaramanga») y en
mayúsculas espaciadas ocuparían tres líneas y gritarían. Sólo el rótulo
diminuto (.eyebrow) va en caps. */
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
}
h4 {
font-size: var(--fs-h4);
}
/* h5/h6 NO son titulares: son micro-etiquetas. Se quedan en la fuente de
etiqueta y son, con .eyebrow, el único sitio donde sobreviven las caps. */
h5,
h6 {
font-family: var(--fuente-titulo);
font-size: var(--fs-pequeno);
font-weight: var(--peso-medio);
line-height: var(--alto-linea-titulo);
color: var(--color-texto);
text-transform: uppercase;
letter-spacing: var(--track-caps);
text-wrap: balance;
}
p {
max-width: var(--medida);
}
p + p {
margin-top: var(--esp-sm);
}
strong,
b {
font-weight: var(--peso-medio);
}
em {
font-style: italic;
}
small {
font-size: var(--fs-pequeno);
}
/* Listas de contenido (sin clase) */
ul:not([class]),
ol:not([class]) {
padding-left: 1.25em;
max-width: var(--medida);
}
ul:not([class]) li + li,
ol:not([class]) li + li {
margin-top: var(--esp-3xs);
}
ul:not([class]) li::marker {
color: var(--color-acento-texto);
}
/* Lista con hojita — para enumeraciones de servicios */
.lista-hojas {
display: flex;
flex-direction: column;
gap: var(--esp-2xs);
list-style: none;
padding: 0;
max-width: var(--medida);
}
/* La sangría de la hojita y la palabra más larga del ítem son las dos cosas
que fijan el min-content de la lista. Como .lista-hojas suele vivir en una
columna flex con `align-items: flex-start` (los carriles de #planes y el
sendero de #naturaleza), la lista se dimensiona a fit-content y ese
min-content es su suelo: con la raíz tipográfica agrandada, 1.6em de
sangría más «acondicionamiento» superaban el ancho de la columna y el
texto sobrante quedaba recortado por body{overflow-x:hidden}, sin scroll
posible, o sea ILEGIBLE. Se acota la sangría contra el viewport (la hojita
mide 0.62em, así que 9vw la sigue despejando) y se permite partir la
palabra sólo cuando no cabe entera: `anywhere` —y no `break-word`— porque
es el único valor que además REBAJA el min-content, que es lo que hace
que la lista pueda ceder en vez de desbordar. */
.lista-hojas > li {
position: relative;
padding-left: min(1.6em, 9vw);
overflow-wrap: anywhere;
}
.lista-hojas > li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 0.62em;
height: 0.62em;
border-radius: 0 var(--radio-full) 0 var(--radio-full);
background-color: var(--color-acento);
}
/* ==========================================================================
3. ENLACES Y FOCO
========================================================================== */
a {
color: var(--color-acento-texto);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
transition: color var(--transicion-rapida);
}
a:hover {
color: var(--color-texto);
}
/* Foco: verde bosque sobre claro (10.7:1) y amarillo sobre oscuro (7.3:1).
Ambos muy por encima del 3:1 que pide WCAG para elementos no textuales. */
:focus-visible {
outline: 2px solid var(--verde-bosque);
outline-offset: 3px;
border-radius: var(--radio-xs);
}
.seccion--oscura :focus-visible,
.sobre-oscuro :focus-visible,
.pie-sitio :focus-visible {
outline-color: var(--color-destacado);
}
::selection {
background-color: rgb(var(--coral-rgb) / 0.3);
color: var(--color-texto);
}
.saltar-contenido {
position: absolute;
left: var(--esp-sm);
top: var(--esp-sm);
z-index: var(--z-saltar);
padding: var(--esp-2xs) var(--esp-md);
background-color: var(--verde-bosque);
color: var(--color-texto-inverso);
border-radius: var(--radio-full);
font-size: var(--fs-pequeno);
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--transicion);
}
.saltar-contenido:focus-visible {
transform: translateY(0);
color: var(--color-texto-inverso);
}
/* Sólo para lectores de pantalla */
.solo-lectores {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
4. LAYOUT
========================================================================== */
.contenedor {
width: 100%;
max-width: calc(var(--ancho-contenedor) + var(--padding-contenedor) * 2);
margin-inline: auto;
padding-inline: var(--padding-contenedor);
}
.contenedor--estrecho {
--ancho-contenedor: var(--ancho-sm);
}
.contenedor--medio {
--ancho-contenedor: var(--ancho-md);
}
.contenedor--ancho {
--ancho-contenedor: var(--ancho-xl);
}
.seccion {
position: relative;
padding-block: var(--esp-seccion);
scroll-margin-top: calc(var(--alto-header) + var(--esp-md));
}
.seccion--compacta {
padding-block: var(--esp-seccion-sm);
}
.seccion--amplia {
padding-block: var(--esp-seccion-lg);
}
.seccion--alt {
background-color: var(--color-fondo-alt);
}
.seccion--oscura {
background-color: var(--color-fondo-oscuro);
color: var(--color-texto-inverso);
}
/* Hermana neutra de .seccion--oscura: misma mecánica exacta (fondo + texto
inverso + titulares + enlaces con :not(.btn)), sólo cambia el fondo. Es la
banda gris carbón que puntúa la página crema. .seccion--carbon-suave es la
misma banda un punto más abierta, para dos bandas seguidas. */
.seccion--carbon {
background-color: var(--color-fondo-carbon);
color: var(--color-texto-inverso);
}
.seccion--carbon-suave {
background-color: var(--color-fondo-carbon-suave);
color: var(--color-texto-inverso);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4,
.seccion--oscura h5,
.seccion--oscura h6,
.seccion--carbon h1,
.seccion--carbon h2,
.seccion--carbon h3,
.seccion--carbon h4,
.seccion--carbon h5,
.seccion--carbon h6,
.seccion--carbon-suave h1,
.seccion--carbon-suave h2,
.seccion--carbon-suave h3,
.seccion--carbon-suave h4,
.seccion--carbon-suave h5,
.seccion--carbon-suave h6 {
color: var(--color-texto-inverso);
}
/* :not(.btn) es OBLIGATORIO. Sin él, «.seccion--oscura a» (0,1,1) gana por
especificidad al color propio de «.btn-whatsapp» (0,1,0) y repinta los
botones de las secciones oscuras. En v1 eso dejaba dos CTA en menta sobre
menta —ilegibles— en #cultura y #aves. */
.seccion--oscura a:not(.btn) {
color: var(--color-acento-inverso);
}
.seccion--oscura a:not(.btn):hover {
color: var(--color-texto-inverso);
}
/* Sobre carbón neutro el coral claro se ensucia; el enlace va en crema con
subrayado, que es como distingue el referente los enlaces en negativo.
El :not(.btn) es tan obligatorio aquí como arriba, por lo mismo. */
.seccion--carbon a:not(.btn),
.seccion--carbon-suave a:not(.btn) {
color: var(--color-texto-inverso);
text-decoration-color: var(--color-borde-inverso);
}
.seccion--carbon a:not(.btn):hover,
.seccion--carbon-suave a:not(.btn):hover {
text-decoration-color: currentColor;
}
.seccion--carbon :focus-visible,
.seccion--carbon-suave :focus-visible {
outline-color: var(--color-destacado);
}
.seccion--carbon .entradilla,
.seccion--carbon-suave .entradilla {
color: var(--color-texto-inverso-suave);
}
/* Grids */
.grid {
display: grid;
gap: var(--gap);
}
.grid-2 {
display: grid;
gap: var(--gap);
grid-template-columns: 1fr;
}
.grid-3,
.grid-4 {
display: grid;
gap: var(--gap);
grid-template-columns: 1fr;
}
/* Rejilla que se adapta sola: la opción preferida para tarjetas */
.grid-auto {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.grid-auto--ancha {
grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.grid-auto--estrecha {
grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
@media (min-width: 40em) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 60em) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Utilidades sueltas */
.apilar {
display: flex;
flex-direction: column;
gap: var(--esp-sm);
align-items: flex-start;
}
.fila {
display: flex;
flex-wrap: wrap;
gap: var(--esp-sm);
align-items: center;
}
.centrado {
text-align: center;
}
.centrado p,
.centrado .entradilla {
margin-inline: auto;
}
.medida-corta {
max-width: var(--medida-corta);
}
.sin-margen {
margin: 0;
}
/* ==========================================================================
5. ENCABEZADO DE SECCIÓN (antetítulo + título en caps)
========================================================================== */
.seccion-encabezado {
display: flex;
flex-direction: column;
gap: var(--esp-xs);
max-width: var(--medida);
margin-bottom: var(--gap-lg);
}
.seccion-encabezado.centrado {
align-items: center;
margin-inline: auto;
}
/* EL .eyebrow ES AHORA EL ÚNICO CAPS ESPACIADO DE NIVEL SECCIÓN.
Ese tratamiento se le retiró a .titulo-seccion en v2: si todo grita,
nada destaca. El antetítulo grita; el título habla. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-family: var(--fuente-titulo);
font-size: var(--fs-eyebrow);
font-weight: var(--peso-medio);
text-transform: uppercase;
/* v3: el tracking baja de 0.26em a --tracking-rotulo (0.16em). El CUERPO
no se toca: --fs-eyebrow tiene suelo de 12,5 px puesto adrede. */
letter-spacing: var(--tracking-rotulo);
/* el tracking sobra tras la última letra y descuadra el centrado */
margin: 0 calc(var(--tracking-rotulo) * -1) 0 0;
/* El coral se retira: en el sistema del referente el rótulo es un dato de
servicio en gris neutro, no un acento. 6.1:1 sobre crema. */
color: var(--color-texto-suave);
}
.eyebrow::before {
content: "";
width: clamp(1.5rem, 4vw, 2.75rem);
height: 1px;
background-color: currentColor;
flex: none;
opacity: 0.75;
}
.centrado .eyebrow::after {
content: "";
width: clamp(1.5rem, 4vw, 2.75rem);
height: 1px;
background-color: currentColor;
flex: none;
opacity: 0.75;
}
/* Sobre fondo oscuro (bosque o carbón) el rótulo sigue siendo neutro: crema
al 78 %, 7.2:1 sobre bosque y 11.1:1 sobre carbón.
`.seccion--carbon-suave` FALTABA en esta lista y es la trampa: la sección
sí invertía su color de texto, pero el antetítulo se quedaba con el gris
de --color-texto-suave, que está calculado contra la crema, y sobre la
banda oscura caía a 2.4:1. No se veía porque hasta ahora ninguna sección
usaba esa variante; en cuanto una la use, el rótulo desaparece. */
.seccion--oscura .eyebrow,
.seccion--carbon .eyebrow,
.seccion--carbon-suave .eyebrow {
color: var(--color-texto-inverso-suave);
}
/* v1: MAYÚSCULAS ESPACIADAS EN TODOS LOS TÍTULOS. v2: caja alta y baja.
El caps espaciado destruye la silueta de la palabra y frena la lectura;
con un display de carácter como Fraunces ya no hace ninguna falta. */
.titulo-seccion {
font-family: var(--fuente-display);
font-size: var(--fs-h2);
font-weight: var(--peso-display);
font-optical-sizing: auto;
font-variation-settings: var(--ejes-display);
text-transform: none;
letter-spacing: var(--tracking-display);
line-height: var(--alto-linea-titulo);
text-wrap: balance;
margin: 0;
}
/* Los modificadores de tamaño SÓLO cambian el cuerpo. El tracking lo pone
.titulo-seccion (y, en los , la regla de titulares): si un modificador
lo vuelve a declarar, reintroduce el valor de v2 y saca al titular del
sistema. Los tres tamaños comparten --tracking-display. */
.titulo-seccion--sm {
font-size: var(--fs-h3);
}
.titulo-seccion--xs {
font-size: var(--fs-h4);
}
.titulo-display {
font-family: var(--fuente-display);
font-size: var(--fs-h1);
font-weight: var(--peso-display);
font-optical-sizing: auto;
font-variation-settings: var(--ejes-display);
letter-spacing: var(--tracking-display);
line-height: var(--alto-linea-apretado);
text-transform: none;
}
/* Única excepción de caps a tamaño display: el logotipo del hero, porque
ES el logotipo. Va en la fuente de etiqueta, nunca en el display serif. */
.titulo-logotipo {
font-family: var(--fuente-titulo);
font-weight: var(--peso-ligero);
text-transform: uppercase;
letter-spacing: var(--track-caps);
margin-inline-end: calc(var(--track-caps) * -1);
}
.entradilla {
font-size: var(--fs-grande);
font-weight: var(--peso-ligero);
line-height: var(--alto-linea-suelto);
color: var(--color-texto-suave);
max-width: var(--medida);
}
.seccion--oscura .entradilla {
color: var(--color-texto-inverso-suave);
}
.nota {
font-size: var(--fs-pequeno);
color: var(--color-texto-suave);
}
.credito {
font-size: var(--fs-micro);
letter-spacing: 0.04em;
color: var(--color-texto-suave);
}
/* Regla decorativa fina */
.regla {
border: 0;
height: 1px;
background-color: var(--color-borde-suave);
margin-block: var(--esp-lg);
}
/* ==========================================================================
6. ANIMACIÓN DE ENTRADA POR SCROLL
Sin JS todo queda visible; el script añade .js al y .visible a
cada elemento cuando entra en pantalla (IntersectionObserver).
========================================================================== */
.js .reveal {
opacity: 0;
transform: translate3d(0, var(--desplazamiento-reveal), 0);
transition:
opacity var(--transicion-reveal),
transform var(--transicion-reveal);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.js .reveal--izq {
transform: translate3d(calc(var(--desplazamiento-reveal) * -1), 0, 0);
}
.js .reveal--der {
transform: translate3d(var(--desplazamiento-reveal), 0, 0);
}
.js .reveal--zoom {
transform: scale(0.96);
}
.js .reveal--velo {
transform: none;
clip-path: inset(0 0 18% 0);
transition:
opacity var(--transicion-reveal),
clip-path var(--transicion-reveal);
}
.js .reveal.visible {
opacity: 1;
transform: none;
clip-path: inset(0 0 0 0);
will-change: auto;
}
/* ==========================================================================
ICONOS QUE SE DIBUJAN SOLOS
Los 35 iconos del sitio comparten firma: viewBox de 24, `fill="none"` y
`stroke="currentColor"`. Al ser puro trazo se pueden pintar como los pinta
una mano: se oculta el trazo con un guion tan largo como el propio camino
y se recoge el desfase hasta cero.
POR QUÉ LA CLASE LA PONE JAVASCRIPT Y NO EL HTML
El truco necesita `pathLength="1"` en cada forma para que todas terminen a
la vez, sin importar que una sea un círculo y otra un camino de diez
curvas. Ese atributo lo escribe js/app.js. Si el JS no corre, la clase no
se añade, estas reglas no aplican y los iconos se ven enteros y quietos:
el trazo NUNCA se esconde sin que exista quien lo devuelva.
`:not([stroke-dasharray])` deja fuera las formas que ya traen su propio
guion —la línea de puntos del icono de tiquete—: ahí el patrón punteado ES
el dibujo, y sobrescribirlo lo destruiría.
El disparador es la SECCIÓN, no cada icono, porque el encargo es que al
llegar a esa parte se dibujen TODAS A LA VEZ.
DOS CLASES DE FORMA, Y ES LA DIFERENCIA ENTRE QUE SE VEA BIEN O NO
Un camino de trazo continuo se puede recorrer: el guion viaja por él y la
forma nace. Pero un camino que contiene VARIOS trazos sueltos —los puntos
de un calendario, la perforación de un tiquete, los detalles del árbol—
no se puede recorrer, porque el guion tiene que atravesar también los
saltos invisibles de un trazo al siguiente: los detalles van saliendo de
uno en uno con tiempos muertos en medio y el conjunto se ve entrecortado.
Por eso js/app.js los separa y los marca `data-traza="detalle"`: esos no
se dibujan, se posan al final, cuando el contorno ya está hecho.
========================================================================== */
.js .icono-traza > :not([stroke-dasharray]):not([data-traza="detalle"]) {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.js .traza-lista .icono-traza > :not([stroke-dasharray]):not([data-traza="detalle"]) {
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--dur-traza) var(--ease-traza);
}
/* Los detalles sueltos: aparecen enteros, ya cerrado el contorno. */
.js .icono-traza > [data-traza="detalle"] {
opacity: 0;
}
.js .traza-lista .icono-traza > [data-traza="detalle"] {
opacity: 1;
transition: opacity var(--dur-traza-detalle) var(--ease);
/* Entra cuando al contorno le queda el último tercio: se solapan, así que
no hay pausa entre una cosa y otra. */
transition-delay: calc(var(--dur-traza) * 0.66);
}
/* Rearme instantáneo al salir de pantalla. Sin esto el trazo se DES-dibuja
durante los 2,4 s de vuelta, y quien baja y sube antes de que termine lo
encuentra a medias: la siguiente entrada arranca desde donde quedara y el
dibujado sale distinto cada vez —el «a veces sí, a veces no»—. La clase la
pone y la quita js/app.js dentro del mismo fotograma. */
.js .rearmando .icono-traza > * {
transition: none;
}
/* Sin movimiento: el icono aparece dibujado, nunca a medio pintar. */
@media (prefers-reduced-motion: reduce) {
.js .icono-traza > :not([stroke-dasharray]):not([data-traza="detalle"]) {
stroke-dashoffset: 0;
transition: none;
}
.js .icono-traza > [data-traza="detalle"] {
opacity: 1;
transition: none;
}
}
/* ==========================================================================
LA MARIPOSA DEL CLIC
Un guiño de marca, no una confirmación de acción: al pulsar cualquier
enlace o botón del sitio nace una mariposa en el punto exacto del clic y
sube hasta perderse. La crea js/app.js con uno de los recortes de
img/plan-vecino/ y la destruye sola al terminar; aquí sólo vive el
movimiento.
Dos estados por transform, no @keyframes: nace centrada en el punto del
clic, pequeña y opaca; sube, gira un poco y se desvanece. El desfase X lo
fija --clic-deriva por instancia, para que dos clics seguidos no dibujen
la misma trayectoria.
Bajo prefers-reduced-motion el propio app.js no llega a crear el
elemento: no hace falta un estado estático de repuesto aquí.
========================================================================== */
.clic-mariposa {
position: fixed;
z-index: var(--z-menu);
inline-size: var(--tam-pin);
block-size: auto;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
opacity: 0.95;
transition:
transform var(--dur-mariposa) var(--ease-salida),
opacity var(--dur-mariposa) var(--ease);
}
.clic-mariposa.sube {
transform:
translate(calc(-50% + var(--clic-deriva, 0px)), calc(-50% - 9rem))
scale(0.85)
rotate(var(--clic-giro, -10deg));
opacity: 0;
}
/* Escalonado: aplicar a un contenedor para retrasar a sus hijos .reveal */
.reveal-secuencia > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-secuencia > .reveal:nth-child(2) { --reveal-delay: 90ms; }
.reveal-secuencia > .reveal:nth-child(3) { --reveal-delay: 180ms; }
.reveal-secuencia > .reveal:nth-child(4) { --reveal-delay: 270ms; }
.reveal-secuencia > .reveal:nth-child(5) { --reveal-delay: 360ms; }
.reveal-secuencia > .reveal:nth-child(6) { --reveal-delay: 450ms; }
.reveal-secuencia > .reveal:nth-child(n + 7) { --reveal-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js .reveal {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
.reveal-secuencia > .reveal {
--reveal-delay: 0ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
7. BOTONES
========================================================================== */
/* v3: ESQUINA VIVA EN TODO EL SISTEMA DE BOTONES. La píldora era el gesto de
v2; el referente es cuadrado sin excepción, y media píldora + media caja
sería lo peor de los dos. El radio se pone a 0 explícitamente (no se borra
la línea) para que quede claro que es una decisión, no un olvido.
El padding se abre a 0.8em/2em (≈10 × 28 px al cuerpo del botón) y el
min-height de 2.75rem se conserva intacto: es el objetivo táctil. */
/* ANCHO MÍNIMO INTRÍNSECO — el fallo de accesibilidad que arregla el bloque
de abajo. El ancho que el botón EXIGE es font-relativo (rótulo en caps +
--tracking-rotulo + dos rellenos en em); el ancho que TIENE se lo fija el
viewport. En cuanto el usuario agranda el tamaño de fuente del navegador
(WCAG 1.4.4 «Resize text») el primero adelanta al segundo, y como .btn es
un inline-flex centrado, la etiqueta se salía dibujada POR LOS DOS LADOS
del filete —hasta 39 px— o el botón rompía su columna. Cuatro palancas:
· min-width: 0 ......... lo hace comprimible como ítem flex;
· max-width: 100% ...... lo ata a su carril, nunca al viewport;
· overflow-wrap: anywhere baja su min-content de «la palabra más larga
con tracking» a un carácter, que es lo que permite que ceda de verdad;
· el min() del relleno lateral mide el aire contra el VIEWPORT, no
contra la fuente, así que deja de crecer justo cuando no cabe.
El min() no toca el diseño a tamaño de fuente por defecto: 9vw sólo gana
a 2em por debajo de ~336 px de ancho, y con la raíz normal a esa anchura
2em ya son menores. Sólo actúa cuando la raíz está agrandada. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: 0.8em min(2em, 9vw);
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
min-height: 2.75rem;
border: 1px solid transparent;
border-radius: 0;
font-family: var(--fuente-titulo);
font-size: var(--fs-pequeno);
font-weight: var(--peso-medio);
line-height: 1;
text-transform: uppercase;
letter-spacing: var(--tracking-rotulo);
text-decoration: none;
text-align: center;
cursor: pointer;
transition:
background-color var(--transicion),
border-color var(--transicion),
color var(--transicion),
transform var(--transicion-rapida),
box-shadow var(--transicion);
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn svg,
.btn img {
width: 1.15em;
height: 1.15em;
flex: none;
}
/* PRIMARIO — el acento CÁLIDO. Éste es el «atrévete».
Relleno coral + etiqueta tinta = 4.8:1 (AA para texto pequeño).
El borde --color-accion-borde no es decorativo: el relleno coral sólo
contrasta 2.9:1 contra la crema y WCAG 1.4.11 pide 3:1 en el contorno
del componente; el borde terracota lo sube a 5.3:1. NO LO QUITES. */
/* La sombra --sombra-accion se retira: en este sistema nada flota. El borde
terracota se queda, porque no es decoración sino el 3:1 de contorno. */
.btn-primario {
background-color: var(--color-accion);
border-color: var(--color-accion-borde);
color: var(--color-accion-texto);
}
.btn-primario:hover {
background-color: var(--color-accion-hover);
border-color: var(--color-accion-hover);
color: var(--color-texto-inverso);
}
/* Secundario — contorno verde. El botón «cuéntame más», nunca el «reserva». */
/* El relleno es TRANSPARENTE, así que el filete es lo único que dibuja el
límite del control y WCAG 1.4.11 le exige 3:1 contra el fondo que tenga
detrás. Al 40 % de alfa daba 2.16:1 sobre la crema y 2.09:1 sobre la salvia:
fallaba en los dos fondos del sitio y el botón se leía como texto suelto.
A plena opacidad sube a 10.66:1 sobre crema y 9.16:1 sobre salvia, sigue
siendo 1px y no cambia ni la geometría ni el peso frente al .btn-whatsapp
relleno. NO LE BAJES EL ALFA: por debajo de 0.55 vuelve a incumplir. */
.btn-secundario {
background-color: transparent;
border-color: var(--verde-bosque);
color: var(--verde-bosque);
}
.btn-secundario:hover {
background-color: var(--verde-bosque);
border-color: var(--verde-bosque);
color: var(--color-texto-inverso);
}
/* WhatsApp — es el CTA de conversión del sitio: comparte el cálido del
primario. Antes era verde menta y competía con el fondo verde. */
/* Sigue RELLENO —es el único botón de conversión del sitio y tiene que pesar
más que los fantasmas— pero ahora cuadrado, sin sombra y con el tracking
de rótulo, como el resto del sistema. */
.btn-whatsapp {
background-color: var(--color-accion);
border-color: var(--color-accion-borde);
color: var(--color-accion-texto);
}
.btn-whatsapp:hover {
background-color: var(--color-accion-hover);
border-color: var(--color-accion-hover);
color: var(--color-texto-inverso);
}
/* Destacado — amarillo del logo, 9.5:1 con tinta. Para un solo CTA por
pantalla como mucho (el del hero, o el del sendero). */
/* Mismo criterio que el secundario: el filete al 25 % de alfa era todavía más
flojo (el amarillo del logo tampoco llega a 3:1 contra la crema por sí
solo), así que el borde va a bosque pleno y es él quien da el contorno. */
.btn-destacado {
background-color: var(--color-destacado);
border-color: var(--verde-bosque);
color: var(--tinta);
}
.btn-destacado:hover {
background-color: var(--verde-bosque);
border-color: var(--verde-bosque);
color: var(--color-destacado);
}
/* Sobre foto o fondo oscuro */
.btn-claro {
background-color: rgb(var(--crema-rgb) / 0.92);
color: var(--tinta);
backdrop-filter: var(--blur-vidrio);
-webkit-backdrop-filter: var(--blur-vidrio);
}
.btn-claro:hover {
background-color: var(--crema);
color: var(--tinta);
}
/* BOTÓN FANTASMA — el botón por defecto del sistema v3: fondo transparente,
filete de 1px y etiqueta en caps espaciadas. Es el que debería llevar todo
lo que no sea el CTA de WhatsApp.
Se declaran los dos nombres a la vez —.btn-fantasma (el que ya existía y
está en el marcado) y .btn--fantasma (la convención BEM del rediseño)—
porque no me toca editar el HTML y así funciona el que se escriba.
Sobre CLARO hereda el color del texto: `currentColor` en el borde es lo
que hace que el mismo botón sirva sobre crema y sobre foto sin variante. */
.btn-fantasma,
.btn--fantasma {
background-color: transparent;
border-color: currentColor;
color: var(--color-texto);
}
.btn-fantasma:hover,
.btn--fantasma:hover {
background-color: rgb(var(--tinta-rgb) / 0.06);
color: var(--color-texto);
}
/* Sobre cualquier fondo oscuro el fantasma se invierte solo. El filete al
20 % de crema es demasiado tenue para WCAG 1.4.11 en el estado de reposo,
así que sube a crema plena en el hover y el foco lo cubre aparte. */
.seccion--oscura .btn-fantasma,
.seccion--oscura .btn--fantasma,
.seccion--carbon .btn-fantasma,
.seccion--carbon .btn--fantasma,
.seccion--carbon-suave .btn-fantasma,
.seccion--carbon-suave .btn--fantasma,
.sobre-oscuro .btn-fantasma,
.sobre-oscuro .btn--fantasma,
.pie-sitio .btn-fantasma,
.pie-sitio .btn--fantasma {
color: var(--color-texto-inverso);
}
.seccion--oscura .btn-fantasma:hover,
.seccion--oscura .btn--fantasma:hover,
.seccion--carbon .btn-fantasma:hover,
.seccion--carbon .btn--fantasma:hover,
.seccion--carbon-suave .btn-fantasma:hover,
.seccion--carbon-suave .btn--fantasma:hover,
.sobre-oscuro .btn-fantasma:hover,
.sobre-oscuro .btn--fantasma:hover,
.pie-sitio .btn-fantasma:hover,
.pie-sitio .btn--fantasma:hover {
background-color: rgb(var(--crema-rgb) / 0.12);
color: var(--color-texto-inverso);
}
/* Modificadores de tamaño. Sobrescriben el padding entero, así que tienen que
repetir el min() contra el viewport o reintroducen el desbordamiento de
.btn con otro número (el CTA del sendero se salía 34,9 px de su columna
precisamente por los 2,2em de aquí). Los topes en vw están elegidos para
que a tamaño de fuente por defecto NUNCA ganen: 11vw = 2,2em de --fs-cuerpo
a 320 px, y 5vw queda por encima de 1,15em de --fs-micro. */
.btn-grande {
padding: 1.05em min(2.2em, 11vw);
min-height: 3.25rem;
font-size: var(--fs-cuerpo);
}
.btn-pequeno {
padding: 0.6em min(1.15em, 5vw);
min-height: 2.25rem;
font-size: var(--fs-micro);
}
.btn-bloque {
display: flex;
width: 100%;
}
/* Enlace con flecha, para CTAs de bajo peso.
EL CORAL SE QUEDA AQUÍ, A PROPÓSITO. En v3 los rótulos en caps espaciadas
migraron a gris (.eyebrow, §5), pero esto no es un rótulo: es un ENLACE, y
el color es lo único que lo señala como pulsable —no lleva subrayado y
comparte fuente, cuerpo y tracking con las micro-etiquetas de su alrededor—.
Si se le quita el acento, deja de distinguirse de una etiqueta muerta. Mismo
criterio que .pildora con el radio: la regla general manda salvo cuando la
forma (o el color) es lo que comunica la función. Si algún día se decide
pasarlo a gris, hay que devolverle el subrayado en el mismo movimiento. */
.enlace-flecha {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--fuente-titulo);
font-size: var(--fs-pequeno);
font-weight: var(--peso-medio);
text-transform: uppercase;
letter-spacing: var(--tracking-rotulo);
text-decoration: none;
color: var(--color-acento-texto);
}
.enlace-flecha::after {
content: "→";
transition: transform var(--transicion-rapida);
}
.enlace-flecha:hover::after {
transform: translateX(0.3em);
}
.grupo-botones {
display: flex;
flex-wrap: wrap;
gap: var(--esp-sm);
align-items: center;
}
/* ==========================================================================
8. TARJETAS E IMÁGENES (base compartida; cada sección la extiende)
========================================================================== */
/* v3: ni radio ni sombra. La separación de la tarjeta contra la crema la hace
el filete de 1px que ya estaba (--color-borde-suave), que ahora es el único
recurso: si una tarjeta necesita destacar más, se le sube el borde, nunca
se le pone sombra. Se retira `box-shadow` de la transición porque ya no
hay ninguna sombra que transicionar. */
.tarjeta {
background-color: var(--color-superficie);
border: 1px solid var(--color-borde-suave);
border-radius: 0;
overflow: hidden;
transition: transform var(--transicion);
}
.tarjeta__cuerpo {
padding: var(--esp-md);
display: flex;
flex-direction: column;
gap: var(--esp-2xs);
}
/* FOTOGRAFÍA A ESQUINA VIVA. Es el cambio que más se nota del rediseño: la
foto llega al borde del marco sin redondeo y sin sombra. Nada de lo que
contiene una imagen lleva radio en v3. */
.marco {
position: relative;
overflow: hidden;
border-radius: 0;
box-shadow: none;
background-color: rgb(var(--gris-verde-rgb) / 0.3);
}
.marco > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-lenta) var(--ease-suave);
}
.marco--3-2 { aspect-ratio: 3 / 2; }
.marco--4-3 { aspect-ratio: 4 / 3; }
.marco--1-1 { aspect-ratio: 1 / 1; }
.marco--16-9 { aspect-ratio: 16 / 9; }
.marco--retrato { aspect-ratio: 4 / 5; }
a:hover > .marco > img,
.tarjeta:hover .marco > img,
.marco--zoom:hover > img {
transform: scale(var(--escala-hover));
}
figure {
margin: 0;
}
figcaption {
margin-top: var(--esp-2xs);
font-size: var(--fs-micro);
color: var(--color-texto-suave);
}
/* Cifra destacada (101 aves, 4 hectáreas, 347 plantas…) */
.cifra {
display: block;
font-family: var(--fuente-display);
font-size: var(--fs-cifra);
font-weight: var(--peso-fuerte);
font-optical-sizing: auto;
font-variation-settings: var(--ejes-display);
line-height: 1;
letter-spacing: var(--tracking-display);
color: var(--color-acento-texto);
}
/* Sobre bosque las cifras van en amarillo del logo (7.3:1): son el dato
que hay que ver antes que nada (101 aves, 347 plantas, 4 hectáreas). */
.seccion--oscura .cifra {
color: var(--color-destacado);
}
.cifra + .cifra-etiqueta {
display: block;
margin-top: var(--esp-2xs);
font-family: var(--fuente-titulo);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-rotulo);
color: var(--color-texto-suave);
}
.seccion--oscura .cifra-etiqueta {
color: var(--color-texto-inverso-suave);
}
/* Etiqueta / píldora */
/* La píldora es etiqueta de dato, no CTA: se queda en verde y en voz baja
para no competir con el coral de los botones.
EXCEPCIÓN DELIBERADA AL «todo cuadrado»: la píldora CONSERVA --radio-full.
Mide 0.4em de alto útil y su lectura como chip depende de la forma; a
esquina viva se confunde con un botón pequeño, que es justo lo que no es.
Las esquinas vivas mandan en foto, tarjeta y botón; en los chips, no. */
.pildora {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.4em 0.9em;
border-radius: var(--radio-full);
background-color: rgb(var(--verde-bosque-rgb) / 0.07);
border: 1px solid var(--color-borde-suave);
font-family: var(--fuente-titulo);
font-size: var(--fs-micro);
font-weight: var(--peso-medio);
text-transform: uppercase;
letter-spacing: var(--tracking-rotulo);
color: var(--verde-bosque);
}
.pildora--destacada {
background-color: rgb(var(--amarillo-rgb) / 0.3);
border-color: rgb(var(--verde-oliva-rgb) / 0.3);
}
.seccion--oscura .pildora {
background-color: rgb(var(--crema-rgb) / 0.1);
border-color: var(--color-borde-inverso);
color: var(--color-acento);
}
/* Sobre bosque la píldora destacada invierte: el amarillo pasa de relleno a
TEXTO (5.6:1). Mezclar el relleno ámbar de la versión clara con el texto
menta de la versión oscura daba 4.1:1 y no pasaba AA. */
.seccion--oscura .pildora--destacada {
background-color: rgb(var(--amarillo-rgb) / 0.12);
border-color: rgb(var(--amarillo-rgb) / 0.4);
color: var(--color-destacado);
}
/* Sobre carbón el menta del negativo verde no pega: la banda neutra pide
componentes neutros. Píldora y cifra van en crema y amarillo, que son los
dos que mantienen el contraste contra un gris del 17 % de luminancia. */
.seccion--carbon .pildora,
.seccion--carbon-suave .pildora {
background-color: rgb(var(--crema-rgb) / 0.08);
border-color: var(--color-borde-inverso);
color: var(--color-texto-inverso);
}
.seccion--carbon .cifra,
.seccion--carbon-suave .cifra {
color: var(--color-destacado);
}
.seccion--carbon .cifra-etiqueta,
.seccion--carbon-suave .cifra-etiqueta {
color: var(--color-texto-inverso-suave);
}
/* ==========================================================================
ÁREAS TÁCTILES
Sólo en punteros gruesos (dedo). En escritorio el ratón acierta un objetivo
de 36 px sin esfuerzo, así que ampliarlo allí sólo estropearía la densidad
del diseño; en un móvil, en cambio, 36 px se falla —y más aún si a quien
toca le tiembla el pulso o lleva la letra del sistema agrandada.
Referencia: 44 px (WCAG 2.5.5 / Apple HIG). Se amplía el ÁREA, nunca el
cuerpo de letra, para que la composición no se mueva.
========================================================================== */
@media (pointer: coarse), (max-width: 63.99em) {
/* La lista con coma es un O: puntero grueso O pantalla por debajo de
1024 px. Con `pointer: coarse` a secas esto no se puede comprobar desde
un navegador de escritorio —y ahí se queda sin verificar—, así que el
ancho entra como segunda vía: por debajo de 1024 px se toca con el dedo
casi siempre. En un ratón sobre una ventana estrecha lo único que pasa
es que los objetivos quedan algo más holgados, que no molesta. */
.marca {
min-height: 2.75rem;
}
.btn-pequeno {
min-height: 2.75rem;
padding-inline: 1.35em;
}
/* Enlace de texto con flecha: es en la práctica un botón, así que se le da
altura de botón sin tocar el tamaño de la tipografía. */
.enlace-flecha {
min-height: 2.75rem;
padding-block: 0.5rem;
}
.idiomas__opcion {
min-width: 2.75rem;
min-height: 2.75rem;
}
/* Las píldoras de las galerías de aves abren el visor: mismo trato. */
.nat-chip,
.exp-foto button,
button.nat-obra {
min-height: 2.75rem;
}
/* Enlaces del pie: van apilados en una columna estrecha, así que se tocan
con el pulgar y se fallan con facilidad si miden 23 px de alto. */
.pie__lista a,
.pie__legal-enlaces a,
.pie__enlace-mapa,
.pie__idioma,
.pie__social {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
}
/* Los dos últimos rezagados: el enlace de las aves del hero y las
coordenadas del mapa, que se copian tocándolas. */
.hero__aves-enlace,
.hero__bajar,
.ubi-coordenadas a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
}
}
/* ==========================================================================
PANTALLAS ESTRECHAS: QUE NADA SE CORTE EN SILENCIO
Un hijo de grid o de flex trae `min-width: auto`, que le impide encogerse
por debajo del ancho mínimo de su contenido. Con la letra del sistema
agrandada —lo que hace mucha gente mayor— ese mínimo crece, la pista de la
rejilla crece con él y el bloque se sale de la pantalla. Como el body lleva
`overflow-x: hidden`, no aparece barra horizontal: el contenido simplemente
se recorta, que es peor, porque no se nota.
Medido a 320 px con la raíz en 24 px: 88 elementos cortados antes de esta
regla, 8 después. `:where()` no suma especificidad, así que cualquier regla
de sección la sigue pisando si de verdad necesita un mínimo.
========================================================================== */
@media (max-width: 63.99em) {
/* `span` entra en la lista porque varios componentes lo usan como columna
de un flex (el sello de Naturaleza, sin ir más lejos). En un span de
verdad inline, `min-width` no hace nada, así que no estorba. */
main :where(div, section, article, ul, ol, li, figure, form, header, p, span,
h1, h2, h3, h4, h5, h6),
.pie-sitio :where(div, ul, li, p, span) {
min-width: 0;
}
/* Correos, teléfonos, coordenadas y URLs son tokens largos sin espacios:
si no se les deja partir, fijan un mínimo enorme ellos solos. */
a,
span,
strong,
dd,
dt,
figcaption {
overflow-wrap: break-word;
}
/* Botones y antetítulos son inline-flex: sin esto se quedan al ancho de su
etiqueta y se salen. Con la letra en 24 px, «Atrévete a un plan distinto»
medía 565 px sobre una pantalla de 305. Se permite que la etiqueta pase a
dos líneas antes que salirse.
`.pie__social` —el botón fantasma de Instagram del pie— es inline-flex
igual que un `.btn` pero no lleva esa clase, así que se quedaba fuera de
la red. A 320 px con la raíz en 24 px medía 296,8 px dentro de una
`.pie__marca` de 264,8 y su borde derecho caía en x=324,4: el
`overflow-x: hidden` del body se comía los últimos 4 px, justo el borde
del botón. */
.btn,
.eyebrow,
.pie__social {
max-width: 100%;
min-width: 0;
}
.btn {
white-space: normal;
text-align: center;
}
/* Último recurso para titulares largos —el inglés los tiene más largos que
el español— cuando la letra del sistema está muy agrandada: antes partir
la palabra con guion que salirse de la pantalla. */
h1,
h2,
h3 {
hyphens: auto;
overflow-wrap: anywhere;
}
}