/* ==========================================================================
Jaguar Wetland Alliance — hoja de estilo principal
Tokens → reset → tipografía → layout → componentes → movimiento → responsive
La web es, ante todo, un archivo fotográfico. El diseño se apoya en la
imagen a sangre, en muy poco texto por pantalla y en una tipografía
grotesca sin adornos: el color lo pone la fotografía, no la interfaz.
Todo sale del logotipo, que es blanco y negro y no admite florituras.
========================================================================== */
/* --- Design tokens ------------------------------------------------------ */
:root {
/* Paleta de la Asociación JAWAL — Jaguar Wetland Alliance */
--dorado-jaguar: #C9A45C; /* principal: cabecera, bloques destacados */
--negro-jaguar: #231F20; /* rosetas y texto */
--verde-salvia: #A3B18A; /* secundario: secciones de hábitat y comunidad */
--verde-selva: #2E4436; /* fondo oscuro, siempre con texto blanco */
--verde-humedal: #3D6650; /* cabecera fija al bajar */
--arena-clara: #F1E8D5; /* fondo general de la web */
--rojo-atardecer: #B5532A; /* acento: botones (Únete, Dona) */
--blanco: #FFFFFF;
/* Roles de la interfaz, derivados de la paleta */
--canopy: var(--verde-selva);
--water: #1F3026;
--ink: var(--negro-jaguar);
--ink-2: #3A3435;
--body: #4A4344;
--muted: #7A716B;
--line: #E2E4DD;
--line-soft: #EEF0EA;
--paper: var(--blanco); /* fondo blanco limpio */
--paper-2: #F5F6F2;
--card: var(--blanco);
--heading: var(--verde-selva); /* títulos en verde oscuro */
--moss: var(--verde-selva);
--moss-deep: #22342A;
--moss-soft: #E1E4D3;
--gold: var(--dorado-jaguar);
--gold-soft: #EFE2C4;
--blason: var(--dorado-jaguar);
--clay: var(--rojo-atardecer);
--clay-soft: #F2DCCF;
--on-dark: rgba(255,255,255,.86);
--on-dark-soft: rgba(255,255,255,.6);
--on-dark-line: rgba(255,255,255,.16);
--shadow-sm: 0 1px 2px rgba(35, 31, 32, .05), 0 2px 8px rgba(35, 31, 32, .04);
--shadow-md: 0 2px 4px rgba(35, 31, 32, .04), 0 14px 34px rgba(35, 31, 32, .09);
--shadow-lg: 0 4px 8px rgba(35, 31, 32, .04), 0 30px 70px rgba(35, 31, 32, .14);
--r-sm: 2px;
--r: 3px;
--r-lg: 4px;
--r-xl: 6px;
--r-pill: 999px;
/* Swiss International es de pago (swisstypefaces.com). Si se licencia, se
copian los .woff2 en fonts/ y se descomenta el bloque @font-face de más
abajo; hasta entonces cae en Helvetica Neue, que es de la misma familia
de grotescas y sostiene el mismo carácter que el logotipo. */
--display: "Swiss International", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
--sans: "Swiss International", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--wrap: 1220px;
--gutter: clamp(1.25rem, 4vw, 2.75rem);
--section-y: clamp(4rem, 9vw, 8rem);
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--header-h: 76px;
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #F1E8D5;
--heading: #F1E8D5;
--ink-2: #E2D8C4;
--body: #C2BBAE;
--muted: #958D80;
--line: #34463A;
--line-soft: #2A3B30;
--paper: #1A2620;
--paper-2: #22322A;
--card: #26372E;
--moss: #C5D0B0;
--moss-deep: #DDE5CC;
--moss-soft: #2E4436;
--gold-soft: #3A3322;
--clay: #E08A62;
--clay-soft: #3A2A22;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
--shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.42);
--shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 30px 70px rgba(0,0,0,.55);
}
}
/* --- Swiss International ------------------------------------------------
La familia es de pago: https://www.swisstypefaces.com (hace falta licencia
web, aparte de la de escritorio). Cuando se compre, copia los .woff2 en
fonts/ con estos nombres y descomenta el bloque. Mientras tanto la web cae
en Helvetica Neue y no pide ningún archivo, así que no hay 404 ni bloqueo
de la CSP (font-src 'self').
@font-face {
font-family: "Swiss International";
src: url("../fonts/SwissIntl-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Swiss International";
src: url("../fonts/SwissIntl-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Swiss International";
src: url("../fonts/SwissIntl-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
*/
/* --- Reset -------------------------------------------------------------- */
/* Nada puede provocar desplazamiento lateral en el móvil. */
html, body { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
body {
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--body);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip; /* «hidden» rompía la cabecera fija (sticky) */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }
:focus-visible {
outline: 2px solid var(--moss);
outline-offset: 3px;
border-radius: 3px;
}
::selection { background: var(--ink); color: var(--paper); }
/* --- Typography --------------------------------------------------------- */
/* La grotesca pide más peso y menos interlínea que la serif anterior:
el titular tiene que leerse como un bloque compacto, igual que el logo. */
h1, h2, h3, h4 {
font-family: var(--display);
color: var(--heading);
line-height: 1.02;
font-weight: 700;
letter-spacing: -.032em;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.16; letter-spacing: -.022em; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.015em; }
/* Titular de gran formato: se usa en las bandas de cierre. */
.display {
font-size: clamp(2.5rem, 6vw, 4.7rem);
line-height: .98;
letter-spacing: -.04em;
}
/* Portadas. Todas las páginas abren con el titular al mismo tamaño: el héroe
del inicio y los banners de las páginas interiores se leen como una sola
pieza, y ninguno tapa la fotografía que lleva detrás. */
.hero__headline,
.page-banner h1 {
font-size: clamp(1.9rem, 4vw, 3.1rem);
line-height: 1.06;
letter-spacing: -.032em;
font-weight: 700;
}
/* El énfasis se hace con el peso, no con el color, igual que el lockup
alterna «Jaguar Wetland» en negrita y «Alliance» en redonda. */
.display em, h1 em, h2 em, blockquote em {
font-style: normal;
font-weight: 400;
color: inherit;
}
/* Excepción: hay titulares donde el énfasis sí se quiere en cursiva. */
.display em.cursiva, h1 em.cursiva, h2 em.cursiva { font-style: italic; }
p { text-wrap: pretty; }
/* Componentes que antes iban en serif. En grotesca necesitan más peso,
menos prosa entre letras y cifras de ancho fijo para que no bailen. */
.display, .stat__num, .figure-item__num, .support__amount, .way__amount,
.track__year, .panel__name, .tile__title, .individual__name, .species__name,
.species-card__name, .pub__title, .quote-band blockquote, .accordion summary {
font-weight: 700;
letter-spacing: -.03em;
}
.stat__num, .figure-item__num, .support__amount, .way__amount, .track__year {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.accordion summary { letter-spacing: -.02em; }
.quote-band blockquote { letter-spacing: -.035em; }
.eyebrow {
font-family: var(--sans);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: 1.1rem;
}
.eyebrow::before {
content: "";
width: 1.75rem;
height: 1px;
background: currentColor;
opacity: .55;
flex-shrink: 0;
}
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }
.lede {
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.5;
letter-spacing: -.006em;
color: var(--body);
}
.measure { max-width: 62ch; }
.measure-s { max-width: 48ch; }
.mono-label {
font-family: var(--mono);
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
/* --- Layout ------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }
.wrap--wide { max-width: 1480px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint { background: var(--verde-salvia); --body: var(--negro-jaguar); --muted: #3E4A36; --ink: var(--negro-jaguar); --line: rgba(35,31,32,.18); --line-soft: rgba(35,31,32,.12); color: var(--negro-jaguar); }
.section--ink { background: var(--canopy); color: var(--on-dark); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p { color: var(--on-dark); }
.section--ink .eyebrow { color: var(--dorado-jaguar); }
.section--ink .lede { color: var(--on-dark); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { text-align: center; margin-inline: auto; max-width: 44rem; }
.section-head p { margin-top: 1rem; }
.skip-link {
position: absolute;
left: 1rem; top: -4rem;
z-index: 400;
background: var(--canopy);
color: #fff;
padding: .7rem 1.1rem;
border-radius: var(--r-sm);
transition: top .18s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }
/* Regla fina de sección, usada para separar sin recurrir a más texto. */
.rule {
height: 1px;
background: var(--line-soft);
border: 0;
margin-block: clamp(2.5rem, 5vw, 4rem);
}
/* --- Buttons ------------------------------------------------------------ */
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .85rem 1.6rem;
border-radius: var(--r-pill);
border: 1px solid transparent;
font-size: .9375rem;
font-weight: 600;
letter-spacing: .005em;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition: transform .2s var(--ease), box-shadow .2s var(--ease),
background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
white-space: nowrap;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--rojo-atardecer); color: var(--blanco); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--negro-jaguar); color: var(--blanco); box-shadow: var(--shadow-md); }
/* El botón de acción es tinta plana. Sobre las bandas oscuras y sobre foto
se invierte a blanco, que es como se comporta el propio logotipo. */
.btn--clay { background: var(--rojo-atardecer); color: var(--blanco); box-shadow: none; }
.btn--clay:hover { background: var(--negro-jaguar); color: var(--blanco); box-shadow: var(--shadow-md); }
.hero .btn--clay, .cta-band .btn--clay, .figures .btn--clay, .quote-band .btn--clay,
.site-header.is-over-hero:not(.is-stuck) .btn--clay {
background: var(--rojo-atardecer); color: var(--blanco);
}
.hero .btn--clay:hover, .cta-band .btn--clay:hover, .figures .btn--clay:hover,
.quote-band .btn--clay:hover, .site-header.is-over-hero:not(.is-stuck) .btn--clay:hover {
background: var(--negro-jaguar); color: var(--blanco);
}
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--moss); color: var(--moss); background: var(--moss-soft); }
.btn--light {
background: rgba(255,255,255,.08);
color: #fff;
border-color: rgba(255,255,255,.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn--light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--sm { padding: .55rem 1.1rem; font-size: .875rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; align-items: center; }
.arrow-link {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
font-size: .9375rem;
text-decoration: none;
width: fit-content;
}
.arrow-link::after {
content: "";
width: 1.15rem; height: 1.15rem;
flex-shrink: 0;
background: currentColor;
transition: transform .25s var(--ease);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.arrow-link:hover::after { transform: translateX(5px); }
/* --- Header / nav ------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color .3s var(--ease), border-color .3s var(--ease),
box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-stuck {
background: color-mix(in srgb, var(--verde-humedal) 96%, transparent);
--hdr: #fff;
backdrop-filter: saturate(1.4) blur(16px);
-webkit-backdrop-filter: saturate(1.4) blur(16px);
border-bottom-color: rgba(255,255,255,.12);
box-shadow: var(--shadow-sm);
}
/* Cabecera fija en verde humedal: texto y logotipo en blanco, como sobre el héroe. */
.site-header.is-stuck .brand { color: #fff; }
.site-header.is-stuck .nav__links > li > a { color: rgba(255,255,255,.9); }
.site-header.is-stuck .nav__links > li > a:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-header.is-stuck .nav__links > li > a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.site-header.is-stuck .lang summary { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.3); }
.site-header.is-stuck .lang summary:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.site-header.is-stuck .nav__toggle { border-color: rgba(255,255,255,.3); }
.site-header.is-stuck .nav__toggle span,
.site-header.is-stuck .nav__toggle span::before,
.site-header.is-stuck .nav__toggle span::after { background: #fff; }
/* Sobre un héroe a sangre la cabecera arranca en blanco y sin fondo. */
.site-header.is-over-hero:not(.is-stuck) { --hdr: #fff; }
.site-header.is-over-hero:not(.is-stuck) .brand { color: #fff; }
.site-header.is-over-hero:not(.is-stuck) .nav__links > li > a { color: rgba(255,255,255,.88); }
.site-header.is-over-hero:not(.is-stuck) .nav__links > li > a:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-header.is-over-hero:not(.is-stuck) .nav__links > li > a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.site-header.is-over-hero:not(.is-stuck) .lang summary { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.3); }
.site-header.is-over-hero:not(.is-stuck) .lang summary:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.site-header.is-over-hero:not(.is-stuck) .nav__toggle { border-color: rgba(255,255,255,.3); }
.site-header.is-over-hero:not(.is-stuck) .nav__toggle span,
.site-header.is-over-hero:not(.is-stuck) .nav__toggle span::before,
.site-header.is-over-hero:not(.is-stuck) .nav__toggle span::after { background: #fff; }
/* Barra de progreso de lectura: da sensación de recorrido en páginas largas. */
.scroll-progress {
position: absolute;
left: 0; bottom: -1px;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--ink);
pointer-events: none;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--ink);
flex-shrink: 0;
transition: color .3s var(--ease), opacity .2s var(--ease);
}
.brand:hover { color: var(--ink); opacity: .7; }
/* Un único archivo, en tinta oscura. Sobre fondo oscuro se invierte por CSS,
que da un blanco limpio porque el dibujo es de una sola tinta plana. Así no
hay dos imágenes que mantener ni una segunda descarga.
Los atributos width/height del ![]()
fijan el tamaño aunque el CSS no
llegue: sin ellos el navegador lo dibujaba a tamaño original. */
.brand__logo {
height: 42px;
width: auto;
display: block;
}
@media (max-width: 520px) { .brand__logo { height: 34px; } }
.brand--footer .brand__logo { height: 52px; }
/* Hay dos archivos del logotipo, en tinta y en reserva, y se enseña uno u
otro según el fondo. No se invierte por CSS: se usan los originales tal
cual llegaron.
· cabecera sin fijar → siempre hay foto oscura detrás → reserva
· cabecera fijada → fondo hueso → tinta
· pie → oscuro siempre → reserva
· modo oscuro → reserva en todo el sitio */
.brand__logo--reserva { display: none; }
.site-header .brand__logo--tinta,
.site-footer .brand__logo--tinta { display: none; }
.site-header .brand__logo--reserva,
.site-footer .brand__logo--reserva { display: block; }
@media (prefers-color-scheme: dark) {
.brand__logo--tinta { display: none; }
.brand__logo--reserva { display: block; }
/* La cabecera fija es dorada también en modo oscuro: logo en tinta. */
}
.nav__links {
display: flex;
align-items: center;
gap: .15rem;
list-style: none;
padding: 0;
}
.nav__links a {
display: block;
padding: .5rem .85rem;
border-radius: var(--r-pill);
font-size: .9375rem;
font-weight: 550;
color: var(--ink-2);
text-decoration: none;
transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__links a:hover { background: var(--moss-soft); color: var(--moss-deep); }
.nav__links a[aria-current="page"] { color: var(--moss-deep); background: var(--moss-soft); }
.nav__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav__toggle {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--line);
border-radius: var(--r-pill);
cursor: pointer;
}
.nav__toggle span {
display: block;
width: 18px; height: 1.5px;
background: var(--ink);
position: relative;
transition: background-color .15s ease;
}
.nav__toggle span::before, .nav__toggle span::after {
content: "";
position: absolute;
left: 0;
width: 18px; height: 1.5px;
background: var(--ink);
transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
/* ==========================================================================
HÉROES
========================================================================== */
/* --- Héroe con pase de fotografías --------------------------------------- */
.hero {
position: relative;
isolation: isolate;
min-height: min(100svh, 900px);
margin-top: calc(var(--header-h) * -1);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--water);
color: #fff;
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img,
.hero__slide video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
transform: scale(1.02);
}
/* El vídeo ya tiene movimiento propio: no se le aplica el Ken Burns. */
.hero__slide--video video { transform: scale(1.07); transform-origin: 50% 0; } /* fuera la franja de datos de la cámara */
@media (max-width: 860px) {
/* En vertical se ve solo una franja del vídeo: se centra donde camina Fénix. */
.hero__slide--video video[poster*="fenix"] { object-position: 35% center; }
}
/* Ken Burns: un movimiento muy lento que evita que la foto se vea congelada. */
.hero__slide.is-active img { animation: kenburns 16s linear forwards; }
@keyframes kenburns {
from { transform: scale(1.02) translate3d(0, 0, 0); }
to { transform: scale(1.13) translate3d(-1.2%, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__slide.is-active img { animation: none; transform: scale(1.02); }
}
.hero::before, .hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.hero::before {
background: linear-gradient(to top,
rgba(8,10,8,.94) 0%, rgba(8,10,8,.74) 24%, rgba(8,10,8,.30) 56%, rgba(8,10,8,.42) 100%);
}
.hero::after {
background: linear-gradient(to right,
rgba(8,10,8,.62) 0%, rgba(8,10,8,.18) 48%, rgba(8,10,8,0) 80%);
}
.hero__inner {
position: relative;
padding-block: clamp(7rem, 14vw, 9rem) clamp(2.5rem, 5vw, 4rem);
max-width: 54rem;
width: 100%;
}
.hero h1 { color: #fff; margin-bottom: 1.5rem; }
.hero .eyebrow { color: var(--dorado-jaguar); }
.hero .lede { color: rgba(255,255,255,.86); max-width: 40rem; }
/* El titular cambia con cada foto; se cruzan con un fundido corto. */
.hero__headline { position: relative; }
.hero__line { display: none; }
.hero__line.is-active { display: block; animation: heroLine .8s var(--ease-out) both; }
@keyframes heroLine {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.hero__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,.18);
}
/* Controles del pase: puntos con temporizador visible. */
.hero__dots { display: flex; gap: .6rem; list-style: none; padding: 0; }
.hero__dot {
position: relative;
width: 3.2rem; height: 3px;
border: 0; padding: 0;
border-radius: var(--r-pill);
background: rgba(255,255,255,.28);
cursor: pointer;
overflow: hidden;
transition: background-color .2s ease;
}
.hero__dot:hover { background: rgba(255,255,255,.45); }
.hero__dot::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
transform: scaleX(0);
transform-origin: 0 50%;
}
.hero__dot[aria-current="true"]::after { animation: dotFill var(--dot-dur, 7s) linear forwards; }
.hero__dot[aria-current="true"].is-paused::after { animation-play-state: paused; }
@keyframes dotFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.hero__dot[aria-current="true"]::after { animation: none; transform: scaleX(1); }
}
.hero__caption {
font-size: .8125rem;
color: rgba(255,255,255,.62);
max-width: 32ch;
line-height: 1.45;
text-align: right;
margin-left: auto;
}
.scroll-cue {
position: absolute;
left: 50%;
bottom: 1.6rem;
transform: translateX(-50%);
display: grid;
place-items: center;
gap: .5rem;
font-size: .625rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
text-decoration: none;
z-index: 2;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue span {
display: block;
width: 1px; height: 2.2rem;
background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@media (max-width: 860px) { .scroll-cue { display: none; } }
/* --- Héroe fotográfico simple (se conserva para páginas sueltas) ---------- */
.hero-photo {
position: relative;
isolation: isolate;
min-height: min(84vh, 760px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--water);
}
.hero-photo__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 58%;
}
.hero-photo::before, .hero-photo::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.hero-photo::before {
background: linear-gradient(to top,
rgba(8,10,8,.92) 0%, rgba(8,10,8,.72) 26%, rgba(8,10,8,.28) 55%, rgba(8,10,8,.12) 100%);
}
.hero-photo::after {
background: linear-gradient(to right,
rgba(8,10,8,.60) 0%, rgba(8,10,8,.18) 46%, rgba(8,10,8,0) 78%);
}
.hero-photo__inner { padding-block: clamp(3rem, 8vw, 6rem); max-width: 46rem; position: relative; }
.hero-photo h1 { color: #fff; margin-bottom: 1.25rem; }
.hero-photo .eyebrow { color: var(--dorado-jaguar); }
.hero-photo .lede { color: rgba(255,255,255,.88); }
.hero-photo .figcaption { color: rgba(255,255,255,.58); margin-top: 2rem; }
/* --- Banner de página interior ------------------------------------------- */
.page-banner {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--water);
display: flex;
align-items: flex-end;
min-height: clamp(24rem, 52vw, 38rem);
margin-top: calc(var(--header-h) * -1);
}
.page-banner__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
}
.page-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to top, rgba(8,10,8,.94) 0%, rgba(8,10,8,.62) 40%, rgba(8,10,8,.34) 100%),
linear-gradient(to right, rgba(8,10,8,.55) 0%, rgba(8,10,8,0) 70%);
}
/* Velo suave. Cuando la portada es una fotografía que se quiere ver entera,
el degradado se levanta arriba y solo pesa abajo, bajo el titular. */
.page-banner--suave::before {
background:
linear-gradient(to bottom, rgba(8,10,8,.6) 0%, rgba(8,10,8,0) 24%),
linear-gradient(to top,
rgba(8,10,8,.93) 0%, rgba(8,10,8,.74) 20%, rgba(8,10,8,.30) 46%, rgba(8,10,8,.04) 68%, rgba(8,10,8,0) 100%);
}
/* El mural lleva su rótulo pintado arriba: la imagen se ancla por ahí. */
.page-banner--mural .page-banner__img { object-position: center top; }
/* Una escena no apaisada se queda en una tira si la banda es baja: se le da
más alto y se baja el encuadre hasta donde está la acción. */
.page-banner--escena { min-height: clamp(28rem, 64vw, 46rem); }
/* Con recorte por altura, un porcentaje alto enseña la mitad de abajo de la
fotografía, que es lo que sube la escena hasta el centro de la banda. */
.page-banner--escena .page-banner__img { object-position: center 85%; }
/* Toma aérea del dron: el jaguar está arriba a la izquierda, lejos del titular. */
.page-banner--dron { min-height: clamp(28rem, 60vw, 44rem); }
.page-banner--dron .page-banner__img { object-position: center 20%; }
.page-banner__inner {
padding-block: clamp(7rem, 13vw, 9rem) clamp(2.5rem, 6vw, 4rem);
max-width: 48rem;
position: relative;
}
.page-banner h1 { color: #fff; }
.page-banner__frase { margin: 0; }
.page-banner .eyebrow { color: var(--dorado-jaguar); }
.page-banner p { color: rgba(255,255,255,.84); margin-top: 1.15rem; }
/* Índice de anclas bajo el banner: convierte una página larga en un menú. */
.jump {
position: sticky;
top: var(--header-h);
z-index: 90;
background: color-mix(in srgb, var(--paper) 92%, transparent);
backdrop-filter: saturate(1.5) blur(14px);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
border-bottom: 1px solid var(--line-soft);
}
.jump__inner {
display: flex;
gap: .35rem;
overflow-x: auto;
scrollbar-width: none;
padding-block: .6rem;
}
.jump__inner::-webkit-scrollbar { display: none; }
.jump a {
flex-shrink: 0;
padding: .5rem .95rem;
border-radius: var(--r-pill);
font-size: .8125rem;
font-weight: 600;
color: var(--body);
text-decoration: none;
white-space: nowrap;
transition: background-color .18s var(--ease), color .18s var(--ease);
}
.jump a:hover { background: var(--moss-soft); color: var(--moss-deep); }
.jump a.is-current { background: var(--canopy); color: #fff; }
@media (prefers-color-scheme: dark) { .jump a.is-current { background: var(--moss); color: var(--negro-jaguar); } }
/* ==========================================================================
COMPONENTES DINÁMICOS
========================================================================== */
/* --- Cifras: una línea discreta, no una banda --------------------------- */
.figures {
padding-block: clamp(2.25rem, 5vw, 3.5rem);
border-top: 1px solid var(--line);
}
/* Cifras sobre una escena de cámara trampa, con velo de selva. */
.figures--foto {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: 0;
background: var(--verde-selva);
padding-block: clamp(4rem, 9vw, 6.5rem);
--ink: var(--blanco); --heading: var(--blanco); --body: rgba(255,255,255,.82); --muted: rgba(255,255,255,.72);
color: var(--blanco);
}
.figures__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover; opacity: .45;
}
.figures--foto::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to right, rgba(46,68,54,.92), rgba(46,68,54,.55));
}
.figures--foto .figure-item__num { color: var(--dorado-jaguar); }
.figures__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
}
.figure-item__num {
font-family: var(--display);
font-size: clamp(1.45rem, 2.6vw, 2rem);
line-height: 1;
letter-spacing: -.03em;
color: var(--ink);
}
.figure-item__label {
margin-top: .5rem;
font-size: .82rem;
line-height: 1.45;
color: var(--muted);
max-width: 26ch;
}
@media (max-width: 860px) { .figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.figures__grid { grid-template-columns: 1fr; gap: 1.5rem; }
.figure-item__label { max-width: none; }
}
/* --- Félidos: acordeón horizontal con la descripción al lado ------------- */
/* La altura decide el recorte: cuanto más alta es la fila, más se acerca la
fotografía al animal, porque tiene que rellenar un hueco muy vertical. Con
esta altura la ficha abierta queda casi en la proporción de la foto y el
félido se ve entero, de cuerpo completo. */
.felinos {
display: flex;
gap: .5rem;
height: clamp(21rem, 40vw, 28rem);
}
.felino {
position: relative;
isolation: isolate;
flex: 1 1 0;
min-width: 0;
border: 0;
padding: 0;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--canopy);
cursor: pointer;
text-align: left;
color: #fff;
transition: flex-grow .7s var(--ease-out);
}
.felino img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .9s var(--ease-out), filter .5s var(--ease);
filter: saturate(.75) brightness(.74);
}
.felino::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(8,10,8,.94) 6%, rgba(8,10,8,.45) 45%, rgba(8,10,8,.15) 100%);
}
.felino.is-open { flex-grow: 5.5; }
.felino.is-open img { filter: saturate(1) brightness(.86); transform: scale(1.04); }
.felino:focus-visible { outline-offset: -3px; }
.felino__idx {
position: absolute;
top: clamp(1rem, 2vw, 1.5rem);
left: clamp(1.25rem, 2.4vw, 2rem);
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .14em;
color: rgba(255,255,255,.5);
}
.felino__body {
position: absolute;
left: 0; bottom: 0;
width: 100%;
padding: clamp(1.25rem, 2.4vw, 2rem);
display: grid;
gap: .3rem;
}
.felino__nombre {
font-family: var(--display);
font-size: clamp(1.3rem, 2.2vw, 1.85rem);
line-height: 1.05;
color: #fff;
}
.felino__latin {
font-style: italic;
font-size: .875rem;
color: rgba(255,255,255,.62);
}
/* La descripción crece hacia arriba desde el nombre, pegada a la izquierda:
los animales de las fotografías están en el centro y a la derecha, y así el
texto no se les echa encima. */
.felino__texto {
/* El nombre manda y se queda pegado abajo: la descripción se coloca encima
de él, no debajo, aunque en el marcado vaya después. */
order: -1;
max-width: min(27rem, 54%);
margin-bottom: .65rem;
font-size: .875rem;
line-height: 1.6;
color: rgba(255,255,255,.88);
opacity: 0;
transform: translateY(14px);
transition: opacity .5s var(--ease) .12s, transform .6s var(--ease-out) .12s;
}
.felino.is-open .felino__texto { opacity: 1; transform: none; }
/* Cerrada es demasiado estrecha para que el texto quepa: se retira del todo. */
.felino:not(.is-open) .felino__texto { visibility: hidden; }
/* Abierta necesita más velo, pero solo por la izquierda y por abajo. */
.felino.is-open::before {
background:
linear-gradient(to top, rgba(8,10,8,.95) 6%, rgba(8,10,8,.55) 52%, rgba(8,10,8,.15) 100%),
linear-gradient(to right, rgba(8,10,8,.72) 0%, rgba(8,10,8,.22) 46%, rgba(8,10,8,0) 72%);
}
/* El jaguar de la fotografía está a la izquierda, al revés que los demás:
su párrafo y su velo se van al otro lado para no taparlo. */
.felino--derecha .felino__texto { margin-left: auto; }
.felino--derecha.is-open::before {
background:
linear-gradient(to top, rgba(8,10,8,.95) 6%, rgba(8,10,8,.55) 52%, rgba(8,10,8,.15) 100%),
linear-gradient(to left, rgba(8,10,8,.72) 0%, rgba(8,10,8,.22) 46%, rgba(8,10,8,0) 72%);
}
.felino__sin-foto {
position: absolute;
inset: 0;
z-index: -2;
display: grid;
place-items: end start;
padding: clamp(1.25rem, 2.4vw, 2rem);
padding-bottom: clamp(7rem, 14vw, 9rem);
}
@media (max-width: 860px) {
.felinos { flex-direction: column; height: auto; gap: .6rem; }
.felino { height: 15rem; flex: none; transition: height .6s var(--ease-out); }
.felino.is-open { height: 33rem; }
.felino__texto { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.felino, .felino img, .felino__texto { transition: none; }
.felino.is-open img { transform: none; }
}
/* --- Portada: misión con collage, cifras, cita y apoyo (como Impacto) ---- */
.mision {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
}
.collage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .9rem;
padding-bottom: 0;
}
.collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.collage__b { margin-top: 2.5rem; }
.collage__video { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-lg); clip-path: inset(0 round var(--r-lg)); }
/* Inicio: el vídeo del mural se ve entero (apaisado, sin recortar los lados)
y la foto del taller se superpone abajo a la izquierda. */
.collage--mural { display: block; padding: 0; }
.collage--mural .collage__b { margin: 0; width: 100%; aspect-ratio: 4 / 5; } /* vertical, a la altura del texto */
/* Más cerca del jaguar: zoom centrado en él, que además deja fuera las marcas de la cámara. */
.collage--mural .collage__video video { object-position: 42% center; transform: scale(1.06); transform-origin: 50% 20%; }
.mision--video { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .mision--video { grid-template-columns: 1fr; } }
/* Vídeo del mural: el jaguar pasa por el centro del encuadre. */
.collage__video.collage__video--centro video { object-position: 42% center; transform: scale(1.06); transform-origin: 50% 20%; }
/* Franja de dron a lo ancho, bajo la presentación de Quiénes somos. */
.franja {
margin: clamp(2.5rem, 6vw, 4rem) auto 0;
width: min(var(--wrap), 100% - 2 * var(--gutter));
aspect-ratio: 21 / 9;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--paper-2);
}
.franja video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .franja { aspect-ratio: 4 / 3; } }
.collage__video video { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; transform: scale(1.08); transform-origin: 50% 0; }
.collage__dato {
position: absolute;
right: 8%;
bottom: 0;
display: grid;
gap: .2rem;
padding: 1.1rem 1.4rem;
max-width: 15rem;
background: var(--dorado-jaguar);
color: var(--negro-jaguar);
border-radius: var(--r);
box-shadow: var(--shadow-md);
text-align: center;
}
.collage__num { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.collage__label { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.mision__texto .tabs { margin-top: .5rem; }
.cifras {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(3.5rem, 7vw, 5rem);
background: var(--verde-selva);
}
.cifras__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cifras::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(46,68,54,.9), rgba(46,68,54,.6)); }
.cifras__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(.75rem, 2vw, 1.5rem);
}
.cifra {
background: var(--dorado-jaguar);
color: var(--negro-jaguar);
border-radius: var(--r);
padding: 1.4rem 1.2rem;
text-align: center;
transition: transform .4s var(--ease-out);
}
.cifra:hover { transform: translateY(-4px); }
.cifra__num { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1; }
.cifra__label { margin-top: .5rem; font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--negro-jaguar); }
.cifras__boton { margin-top: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.btn--gold { background: var(--dorado-jaguar); color: var(--negro-jaguar); }
.btn--gold:hover { background: var(--blanco); color: var(--negro-jaguar); }
.cita {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
margin-block: clamp(4rem, 9vw, 7rem);
}
.cita__foto { overflow: hidden; }
.cita__foto img, .cita__foto video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Fuera la franja de datos de la cámara trampa. */
.cita__foto video { transform: scale(1.08); transform-origin: 50% 0; }
.cita__texto {
margin: 0 0 0 -3rem;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4rem);
background: var(--verde-selva);
position: relative;
z-index: 1;
}
.cita__texto p {
font-family: var(--display);
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.02em;
color: var(--blanco);
}
.cita__texto p::before { content: ""; display: block; width: 3rem; height: 3px; background: var(--dorado-jaguar); margin-bottom: 1.25rem; }
.apoyo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
}
/* Dos fotos iguales, una al lado de la otra: muestreo en campo y laboratorio. */
.apoyo__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.apoyo__fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 860px) {
.mision, .apoyo { grid-template-columns: 1fr; }
.cifras__grid { grid-template-columns: 1fr; }
.cita { grid-template-columns: 1fr; }
.cita__texto { margin: -2.5rem var(--gutter) 0; }
.apoyo__fotos { order: -1; }
}
/* --- Dona: cierre común de todas las páginas ---------------------------- */
.dona {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(30rem, 62vw, 40rem);
padding-block: clamp(4.5rem, 9vw, 7rem);
background: var(--negro-jaguar);
color: var(--blanco);
text-align: center;
}
.dona__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.08); transform-origin: 50% 0; /* fuera la franja de datos */
}
.dona::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(ellipse at center, rgba(20,24,20,.62) 0%, rgba(20,24,20,.78) 70%);
}
.dona__inner { display: flex; flex-direction: column; align-items: center; }
.dona .eyebrow { color: var(--dorado-jaguar); }
.dona__titulo {
max-width: 20ch;
font-size: clamp(2.1rem, 5vw, 3.6rem);
line-height: 1.05;
color: var(--blanco);
}
.dona__titulo em { font-style: normal; color: var(--dorado-jaguar); }
.dona__texto {
max-width: 54ch;
margin-top: 1.4rem;
font-size: clamp(1.02rem, 1.5vw, 1.15rem);
line-height: 1.6;
color: rgba(255,255,255,.92);
text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.dona__boton {
margin-top: 2.2rem;
padding: 1.05rem 2.6rem;
background: var(--dorado-jaguar);
color: var(--negro-jaguar);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: var(--r);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dona__boton:hover { background: var(--blanco); color: var(--negro-jaguar); transform: translateY(-2px); }
.dona__lema { margin-top: 1.6rem; font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.85); }
/* --- Pilares de la alianza (nombre encima, fotografía debajo) ------------ */
.pillars {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(.75rem, 1.6vw, 1.15rem);
list-style: none;
margin: 0;
padding: 0;
}
/* Mosaico: el nombre va sobre la fotografía y toda la pieza enlaza al pilar. */
.pillar { position: relative; display: grid; }
.pillar > * { grid-area: 1 / 1; }
.pillar__name {
align-self: end;
z-index: 2;
margin: 0;
padding: 2.5rem 1rem 1rem;
font-family: var(--display);
font-size: clamp(.95rem, 1.3vw, 1.1rem);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--blanco);
background: linear-gradient(to top, rgba(35,31,32,.85), rgba(35,31,32,0));
border-radius: 0 0 var(--r-lg) var(--r-lg);
pointer-events: none;
}
.pillar__name a { color: inherit; text-decoration: none; pointer-events: auto; }
.pillar__name a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.pillar__name a::before {
content: ""; display: block; width: 1.75rem; height: 3px; margin-bottom: .55rem;
background: var(--dorado-jaguar); transition: width .4s var(--ease-out);
}
.pillar:hover .pillar__name a::before { width: 3.5rem; }
.pillar__name a:focus-visible { outline: none; }
.pillar:focus-within { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: var(--r-lg); }
/* Cinta de fotografías en carrusel continuo: las fotos van en fila y la
cinta avanza sin parar. El JS duplica las fotos para que el bucle no
tenga salto, y la animación recorre justo la mitad de la cinta. */
.pasa {
display: flex;
width: max-content;
height: 100%;
will-change: transform;
}
.pasa.is-continuo { animation: pasa-continuo var(--dur, 24s) linear infinite; }
.pasa img { flex: none; width: 100cqw; height: 100%; padding-right: var(--pasa-gap, 0px); }
@keyframes pasa-continuo { to { transform: translateX(-50%); } }
[data-stack] { container-type: inline-size; }
[data-stack]:hover .pasa { animation-play-state: paused; }
[data-stack] .pillar__count { display: none; }
.pillar__media {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--canopy);
aspect-ratio: 4 / 5;
}
.pillar__media .pasa img { object-fit: cover; transition: transform 1s var(--ease-out); }
.pillar:hover .pillar__media .pasa img { transform: scale(1.04); }
/* Contador de fotografías: discreto, solo para saber que hay más de una. */
.pillar__count {
position: absolute;
right: .55rem;
bottom: .5rem;
z-index: 1;
display: flex;
gap: .3rem;
}
.pillar__count span {
width: .3rem; height: .3rem;
border-radius: 50%;
background: rgba(255,255,255,.4);
transition: background .4s var(--ease);
}
.pillar__count span.is-active { background: rgba(255,255,255,.95); }
/* Por debajo de la tableta la línea de cinco no cabe sin encoger la foto a
nada, así que se parte en dos filas antes que forzar el scroll lateral. */
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* --- Visión y misión: dos declaraciones del mismo tamaño ----------------- */
.declaracion {
font-size: clamp(1.15rem, 1.9vw, 1.45rem);
line-height: 1.5;
letter-spacing: -.01em;
color: var(--ink-2);
margin: 0;
}
/* --- Pilares en filas alternas: texto a un lado, fotografías al otro ------ */
.pilar-fila {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.pilar-fila + .pilar-fila { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
/* Una de cada dos cambia de lado, para que la lectura no caiga siempre igual. */
.pilar-fila:nth-child(even) .pilar-fila__foto { order: -1; }
.pilar-fila h3 {
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1.08;
letter-spacing: -.028em;
margin: 0;
}
.pilar-fila__lema {
font-weight: 700;
color: var(--ink);
font-size: clamp(1.02rem, 1.8vw, 1.2rem);
margin: .5rem 0 1.5rem;
}
.pilar-fila__texto p + p { margin-top: 1.05rem; }
/* Las tres fotografías del pilar se turnan en el mismo marco. El marco es
cuadrado y las deja enteras —sin recortar— porque unas son verticales y
otras apaisadas; lo que sobra queda en papel, como el paspartú de un marco. */
.pilar-fila__foto {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
--pasa-gap: 10px;
}
/* Dos fotografías verticales a la vista, como en una tira de contactos. */
.pilar-fila__foto .pasa img {
width: calc(50cqw + var(--pasa-gap) / 2);
object-fit: cover;
border-radius: var(--r-lg);
clip-path: inset(0 var(--pasa-gap) 0 0 round var(--r-lg));
transition: filter .5s var(--ease);
}
.pilar-fila__foto:hover .pasa img { filter: saturate(1.1); }
/* Entrada con movimiento: texto y fotografías llegan desde lados opuestos. */
.pilar-fila.reveal { transform: none; }
.pilar-fila .pilar-fila__texto,
.pilar-fila .pilar-fila__foto {
opacity: 0;
transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
.pilar-fila .pilar-fila__texto { transform: translateX(-48px); }
.pilar-fila .pilar-fila__foto { transform: translateX(48px); transition-delay: .12s; }
.pilar-fila:nth-child(even) .pilar-fila__texto { transform: translateX(48px); }
.pilar-fila:nth-child(even) .pilar-fila__foto { transform: translateX(-48px); }
.pilar-fila.is-in .pilar-fila__texto,
.pilar-fila.is-in .pilar-fila__foto { opacity: 1; transform: none; }
.pilar-fila__lema { position: relative; padding-left: 1.1rem; }
.pilar-fila__lema::before {
content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px;
background: var(--dorado-jaguar); border-radius: 2px;
}
/* Sobre fondo claro los puntos del contador tienen que ser oscuros. */
.pilar-fila__foto .pillar__count span { background: rgba(35,31,32,.2); }
.pilar-fila__foto .pillar__count span.is-active { background: var(--ink); }
@media (max-width: 860px) {
/* En móvil las filas se apilan: la entrada es vertical, no desde los lados. */
.pilar-fila .pilar-fila__texto,
.pilar-fila .pilar-fila__foto,
.pilar-fila:nth-child(even) .pilar-fila__texto,
.pilar-fila:nth-child(even) .pilar-fila__foto { transform: translateY(28px); }
.pilar-fila.is-in .pilar-fila__texto,
.pilar-fila.is-in .pilar-fila__foto,
.pilar-fila.is-in:nth-child(even) .pilar-fila__texto,
.pilar-fila.is-in:nth-child(even) .pilar-fila__foto { transform: none; }
.pilar-fila .pilar-fila__lema { margin-bottom: 1.1rem; }
.pilar-fila { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.25rem); }
.pilar-fila:nth-child(even) .pilar-fila__foto { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pasa { transition: none; }
[data-stack] { overflow-x: auto; }
.pilar-fila .pilar-fila__texto, .pilar-fila .pilar-fila__foto { opacity: 1; transform: none; }
.pillar__media .pasa img { transition: none; }
.pillar:hover .pillar__media .pasa img { transform: none; }
}
/* --- Visión y misión: al final, con pestañas ----------------------------- */
.proposito {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.proposito__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; } /* apaisado, como el vídeo */
.proposito__media img, .proposito__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La cámara trampa imprime una franja de datos abajo: se deja fuera del encuadre. */
.proposito__media video { transform: scale(1.07); transform-origin: 50% 0; }
.proposito__intro { margin: 1.1rem 0 2rem; font-weight: 700; color: var(--ink); max-width: 48ch; }
/* Sin título encima, el subtítulo abre el bloque: sin margen arriba y algo más grande. */
.proposito__intro:first-child { margin-top: 0; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; color: var(--heading); }
.tabs__list { display: flex; border-bottom: 1px solid var(--line); }
/* Misión y visión: pestañas en píldora y ficha con borde dorado. */
.mision__texto .eyebrow, .proposito__texto .eyebrow { color: var(--dorado-jaguar); }
.proposito__titulo { font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.2; margin: .4rem 0 1.6rem; }
.tabs--pildora .tabs__list {
display: inline-flex; gap: .25rem; padding: .3rem;
border: 0; border-radius: var(--r-pill); background: #ECEAE2;
}
.tabs--pildora .tabs__tab {
flex: 0 0 auto; min-width: 8.5rem; padding: .65rem 1.6rem;
border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
}
.tabs--pildora .tabs__tab[aria-selected="true"] { background: var(--verde-selva); color: var(--blanco); }
.tabs--pildora .tabs__panel {
margin-top: 1.5rem;
padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.5rem);
background: var(--blanco);
border: 1px solid var(--line);
border-left: 6px solid var(--dorado-jaguar);
border-radius: var(--r-xl);
box-shadow: var(--shadow-sm);
}
.tabs__etiqueta {
margin: 0 0 .6rem !important;
font-size: .72rem !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--dorado-jaguar) !important;
}
.tabs__claves { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tabs__claves li {
padding: .45rem .9rem; border-radius: var(--r-pill);
background: #EEF0EC; color: var(--ink); font-size: .82rem; font-weight: 600;
}
.tabs__tab {
flex: 1;
padding: .95rem 1rem;
background: var(--paper-2);
border: 0;
border-bottom: 3px solid transparent;
font-weight: 700;
font-size: 1rem;
letter-spacing: .02em;
color: var(--muted);
cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tabs__tab:hover { color: var(--heading); }
.tabs__tab[aria-selected="true"] { background: var(--verde-selva); color: var(--blanco); border-bottom-color: var(--dorado-jaguar); }
.tabs__panel { padding: 1.6rem .25rem 0; animation: tab-entra .45s var(--ease-out); }
.tabs__panel p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
@keyframes tab-entra { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 860px) {
.proposito { grid-template-columns: 1fr; }
}
/* --- Formas de apoyo: precio y detalle, y niveles de adopción ------------- */
.oferta {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line);
}
.oferta__precio { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.oferta__detalle h3 { font-size: 1.1rem; margin: 0 0 .85rem; }
/* Desglose de la cámara, cuotas del aliado y convocatoria del asistente. */
.oferta__titulo { font-weight: 700; color: var(--heading); font-size: 1.05rem; margin: 0; }
.desglose { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 20rem; font-size: .9rem; }
.desglose li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.desglose li span:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cuotas { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; width: 100%; max-width: 20rem; }
.cuotas li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.cuotas strong { font-family: var(--display); font-size: 1.25rem; color: var(--heading); line-height: 1.1; white-space: nowrap; }
.cuotas small { font-size: .85rem; color: var(--muted); }
.cuotas__nota { font-size: .9rem; color: var(--body); margin: 0; max-width: 24rem; }
.oferta__detalle .form-note { margin-top: 1.1rem; }
/* Cinco niveles de adopción: dos por fila, con la quinta centrada debajo.
La fotografía manda —ocupa el ancho entero de la ficha— y debajo va el
nombre común en grande junto al importe, y lo que incluye cada categoría. */
.niveles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 2.8vw, 2.25rem);
list-style: none;
margin: 0;
padding: 0;
}
.nivel {
grid-column: span 2;
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Seis fichas: tres por fila en escritorio. */
.niveles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nivel, .nivel:nth-child(5) { grid-column: auto; }
@media (max-width: 1000px) { .niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .niveles { grid-template-columns: 1fr; } }
.nivel__tipo {
display: inline-block; align-self: flex-start;
margin: .6rem 0 0; padding: .2rem .6rem;
font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--negro-jaguar); background: var(--dorado-jaguar); border-radius: var(--r-pill);
}
.nivel__boton { margin-top: 1.25rem; align-self: flex-start; }
.nivel__cuerpo { display: flex; flex-direction: column; flex: 1; }
.nivel__cuerpo .nivel__boton { margin-top: auto; }
.nivel__cuerpo .check-list + .nivel__boton, .nivel__cuerpo .nivel__ficha + .nivel__boton { margin-top: 1.25rem; }
.nivel__foto {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-2);
}
.nivel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.nivel:hover .nivel__foto img { transform: scale(1.03); }
.nivel__foto--vacia {
display: grid;
place-items: center;
padding: 1.5rem;
text-align: center;
border-bottom: 1px dashed var(--line);
}
.nivel__cuerpo {
flex: 1;
padding: clamp(1.35rem, 2.4vw, 1.9rem);
display: flex;
flex-direction: column;
}
/* Nombre e importe en la misma línea: no deja un hueco muerto al lado. */
.nivel__cabecera {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.nivel__nombre {
font-family: var(--display);
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.028em;
margin: 0;
}
.nivel__latin { font-style: italic; color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }
/* Ficha de la especie: lo que antes estaba en la portada, ahora plegado en su tarjeta. */
.nivel__ficha { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.nivel__ficha summary {
cursor: pointer;
font-weight: 700;
color: var(--heading);
list-style: none;
display: flex;
align-items: center;
gap: .5rem;
}
.nivel__ficha summary::-webkit-details-marker { display: none; }
.nivel__ficha summary::after {
content: "+";
margin-left: auto;
font-size: 1.3rem;
line-height: 1;
color: var(--dorado-jaguar);
transition: transform .25s var(--ease);
}
.nivel__ficha[open] summary::after { transform: rotate(45deg); }
.nivel__ficha p { margin-top: .75rem; font-size: .95rem; line-height: 1.6; }
.nivel .support__amount { font-size: clamp(1.3rem, 2vw, 1.55rem); margin: 0; }
.nivel__lema {
font-weight: 700;
color: var(--ink);
font-size: .95rem;
margin: .4rem 0 0;
}
.nivel .check-list {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line-soft);
gap: .6rem;
font-size: .9rem;
}
.nivel .check-list li { padding-left: 2rem; }
.nivel .check-list li::before { width: 1.25rem; height: 1.25rem; background-size: 11px; }
@media (max-width: 960px) {
.oferta { grid-template-columns: 1fr; }
/* Una ficha por fila: la fotografía se ve aún más grande. */
.niveles { grid-template-columns: 1fr; }
.nivel, .nivel:nth-child(5) { grid-column: auto; }
.nivel__foto { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
.nivel__foto img { transition: none; }
.nivel:hover .nivel__foto img { transform: none; }
}
/* --- Fichas del blog ----------------------------------------------------- */
.entradas {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.75rem, 3.5vw, 2.75rem);
list-style: none;
margin: 0;
padding: 0;
}
.entrada__enlace {
display: grid;
gap: .5rem;
text-decoration: none;
color: var(--ink);
}
.entrada__foto {
display: block;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--canopy);
aspect-ratio: 4 / 3;
margin-bottom: .6rem;
}
.entrada__foto img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-out);
}
.entrada__enlace:hover .entrada__foto img { transform: scale(1.04); }
.entrada__meta {
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.entrada__titulo {
font-family: var(--display);
font-size: clamp(1.15rem, 1.9vw, 1.4rem);
line-height: 1.2;
letter-spacing: -.02em;
}
.entrada__resumen { font-size: .95rem; line-height: 1.6; color: var(--body); }
.entrada__go {
margin-top: .35rem;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .02em;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.entrada__go::after { content: "→"; transition: transform .25s var(--ease); }
.entrada__enlace:hover .entrada__go::after { transform: translateX(5px); }
@media (max-width: 1000px) { .entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .entradas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.entrada__foto img { transition: none; }
.entrada__enlace:hover .entrada__foto img { transform: none; }
}
/* --- Aliados: logotipos (o nombre, mientras falte el logo) en una fila -- */
.aliados + .aliados { margin-top: clamp(3rem, 6vw, 4.5rem); }
.aliados__titulo {
text-align: center;
font-size: clamp(1.4rem, 2.6vw, 2rem);
margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.aliados__lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(1rem, 2.5vw, 2rem);
}
.aliado {
flex: 0 1 11rem;
min-height: 8.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
padding: 1.1rem;
text-align: center;
border: 1px solid var(--line);
border-radius: var(--r-lg);
transition: transform .35s var(--ease-out), border-color .35s var(--ease);
}
.aliado:hover { transform: translateY(-3px); border-color: var(--verde-salvia); }
.aliado img { width: 100%; max-width: 10rem; height: 5.5rem; object-fit: contain; }
.aliado--logo { border-color: transparent; }
.aliado--logo:hover { border-color: var(--line); }
/* Logos muy apaisados (CSIC-MNCN): más ancho para que se lean. */
/* Diez logos en dos filas de seis huecos; el CSIC-MNCN, muy apaisado, ocupa dos. */
.aliados__lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aliado--ancho { grid-column: span 2; }
.aliado--ancho img { max-width: 22rem; height: 6.5rem; }
@media (max-width: 900px) { .aliados__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aliados__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aliados__cta { text-align: center; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; font-size: .95rem; }
.aliado__nombre { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--heading); }
.aliado__sub { font-size: .78rem; line-height: 1.35; color: var(--muted); }
/* --- Fichas del equipo: foto a un lado y ficha gris al otro, dos por fila -- */
.equipo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr; /* todas las fichas igual de altas: fotos del mismo tamaño */
gap: clamp(1.25rem, 2.5vw, 1.75rem);
list-style: none;
margin: 0;
padding: 0;
}
.persona {
display: grid;
grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
gap: clamp(.75rem, 1.5vw, 1.25rem);
align-items: stretch;
}
/* Foto estrecha y alargada, de la altura de la ficha, como en Impacto. */
.persona__foto {
overflow: hidden;
background: var(--paper-2);
height: 100%;
min-height: 18rem;
}
.persona__foto img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-out);
}
.persona:hover .persona__foto img { transform: scale(1.04); }
.persona__texto {
background: var(--paper-2);
padding: clamp(1.4rem, 2.5vw, 2.25rem);
align-self: stretch;
}
.persona__nombre {
font-size: clamp(1.4rem, 2.1vw, 1.75rem);
line-height: 1.12;
color: var(--heading);
margin: 0 0 .45rem;
}
/* Cargo: etiqueta corta en mayúsculas, separada de la bio por una línea */
.persona__rol {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--moss);
margin: 0 0 1rem;
padding-bottom: .85rem;
border-bottom: 1px solid var(--line);
}
.persona__bio { font-size: .95rem; line-height: 1.65; margin: 0; color: var(--body); }
@media (max-width: 1100px) { .equipo { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .equipo { grid-auto-rows: auto; } }
@media (max-width: 560px) {
.persona { grid-template-columns: 7.5rem minmax(0, 1fr); }
.persona__foto { min-height: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
.persona__foto img { transition: none; }
.persona:hover .persona__foto img { transform: none; }
}
/* --- Mosaico de programas (texto que aparece al pasar) ------------------- */
.tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(.75rem, 1.6vw, 1.15rem);
}
.tile {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: clamp(19rem, 34vw, 26rem);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--canopy);
color: #fff;
text-decoration: none;
}
.tile:hover { color: #fff; }
.tile img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-out), filter .5s var(--ease);
filter: brightness(.72) saturate(.85);
}
.tile::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(8,10,8,.92) 0%, rgba(8,10,8,.35) 52%, rgba(8,10,8,.05) 100%);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); filter: brightness(.82) saturate(1); }
.tile__body { padding: clamp(1.5rem, 3vw, 2.25rem); width: 100%; }
.tile__num {
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .16em;
color: rgba(255,255,255,.6);
display: block;
margin-bottom: .75rem;
}
.tile__title {
font-family: var(--display);
font-size: clamp(1.35rem, 2.6vw, 1.9rem);
line-height: 1.1;
color: #fff;
max-width: 18ch;
}
/* El párrafo se despliega al pasar el cursor: la retícula se lee sin ruido. */
.tile__text {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .5s var(--ease-out), opacity .4s var(--ease);
}
.tile__text > span { overflow: hidden; }
.tile:hover .tile__text,
.tile:focus-visible .tile__text,
.tile.is-in-view .tile__text { grid-template-rows: 1fr; opacity: 1; }
.tile__text p {
font-size: .9375rem;
line-height: 1.5;
color: rgba(255,255,255,.82);
max-width: 40ch;
padding-top: .85rem;
}
.tile__go {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: 1rem;
font-size: .8125rem;
font-weight: 650;
letter-spacing: .04em;
color: #fff;
}
.tile__go::after { content: "→"; transition: transform .25s var(--ease); }
.tile:hover .tile__go::after { transform: translateX(5px); }
@media (hover: none) {
.tile__text { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }
/* --- Banda de cita a sangre ---------------------------------------------- */
.quote-band {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(26rem, 55vw, 40rem);
display: grid;
place-items: center;
text-align: center;
background: var(--water);
color: #fff;
padding-block: clamp(4rem, 9vw, 7rem);
}
.quote-band__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
}
.quote-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(8,10,8,.78), rgba(8,10,8,.62) 45%, rgba(8,10,8,.88));
}
.quote-band blockquote {
font-family: var(--display);
font-size: clamp(1.6rem, 3.8vw, 2.9rem);
line-height: 1.06;
color: #fff;
max-width: 22ch;
margin-inline: auto;
text-wrap: balance;
}
.quote-band figcaption {
margin-top: 2rem;
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
}
/* --- Carrusel horizontal de fotografías ---------------------------------- */
.rail {
display: flex;
gap: clamp(.75rem, 1.5vw, 1.15rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: .5rem;
padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
}
.rail::-webkit-scrollbar { display: none; }
.rail__item {
flex: 0 0 min(78vw, 26rem);
scroll-snap-align: start;
position: relative;
margin: 0;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--paper-2);
cursor: zoom-in;
}
.rail__item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .7s var(--ease-out);
}
.rail__item:hover img { transform: scale(1.05); }
.rail__item figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 2.5rem 1.1rem .95rem;
font-size: .8125rem;
color: rgba(255,255,255,.9);
background: linear-gradient(to top, rgba(8,10,8,.88), transparent);
}
.rail-nav { display: flex; gap: .5rem; }
.rail-nav button {
width: 2.75rem; height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.rail-nav button:hover { background: var(--canopy); border-color: var(--canopy); color: #fff; }
.rail-nav button:disabled { opacity: .3; cursor: default; }
.rail-nav button:disabled:hover { background: transparent; border-color: var(--line); color: var(--ink); }
.rail-nav svg { width: 18px; height: 18px; }
/* --- Visor de imagen ------------------------------------------------------ */
.lightbox {
position: fixed;
inset: 0;
z-index: 500;
border: 0;
padding: 0;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
background: rgba(8,10,8,.95);
display: none;
}
/* Un