/* Las tipografias se cargan desde el de index.html, NO con un @import
aqui. Un @import dentro de una hoja de estilos obliga al navegador a
descargar y analizar primero este archivo y solo despues pedir la hoja de
Google Fonts: son dos peticiones en serie que bloquean el dibujado de la
pagina. Con + las dos
peticiones salen en paralelo. */
:root {
color-scheme: light;
--bg: #f4f0e7;
--bg-soft: #fcfaf5;
--surface: rgba(255, 255, 255, 0.7);
--surface-strong: rgba(255, 255, 255, 0.88);
--surface-dark: rgba(18, 43, 40, 0.76);
--line: rgba(25, 66, 61, 0.12);
--line-strong: rgba(25, 66, 61, 0.22);
--text: #153633;
--text-muted: #4f6f6b;
--text: #153633;
--text-muted: #4f6f6b;
/* --text-soft se usa en textos pequenos (0.88rem: resumen de resultados,
etiqueta de tipo en las tarjetas). El valor anterior (#6a8783) daba solo
3.4:1 sobre el fondo y no llegaba al minimo WCAG AA de 4.5:1 para texto
pequeno (medido con contraste.py). El nuevo mantiene el tono pero pasa:
4.75:1 sobre --bg y 5.20:1 sobre las tarjetas. */
--text-soft: #52706a;
--accent: #1e8b71;
--accent-deep: #0f5d4d;
/* Version del acento OSCURA, solo para TEXTO pequeno sobre fondos claros.
--accent (#1e8b71) esta pensado para fondos, botones e iconos (minimo
WCAG 3:1, que cumple), pero como COLOR DE TEXTO no llega: 3.7:1 sobre el
fondo y 4.2:1 sobre blanco. Los textos que lo usaban (flecha "Abrir" de
las tarjetas y las etiquetas flotantes del formulario, ambas < 1rem)
fallaban AA. Este tono pasa en los tres fondos (5.3 / 5.8 / 6.0).
Verificado con contraste.py; no cambiar sin recalcular. */
--accent-text: #127058;
--accent-soft: #d8efe6;
--accent-warm: #ff8a63;
--accent-soft: #d8efe6;
--accent-warm: #ff8a63;
--shadow-soft: 0 20px 50px rgba(17, 43, 39, 0.08);
--shadow-card: 0 30px 70px rgba(14, 43, 38, 0.16);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-md: 18px;
--radius-sm: 14px;
--content-width: min(1180px, calc(100vw - 2rem));
/* Alto real del encabezado fijo. Se usa para que al saltar a una seccion
con un enlace #ancla el titulo no quede escondido detras de el, y para
colocar el menu desplegable en movil.
Es una variable y no un numero suelto porque el encabezado ENCOGE en
pantallas pequenas (menos relleno, y en <=680px se oculta el texto de la
marca): mas abajo se reajusta en cada breakpoint. Si se dejara fijo en
88px, en movil sobraria espacio al saltar a una seccion. */
--header-height: 88px;
--font-sans: "Manrope", sans-serif;
--font-display: "Cormorant Garamond", serif;
--transition: 220ms ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-width: 320px;
background:
radial-gradient(circle at top left, rgba(141, 222, 190, 0.24), transparent 26rem),
radial-gradient(circle at top right, rgba(255, 214, 173, 0.36), transparent 24rem),
linear-gradient(180deg, #fcf9f2 0%, #f5f1e6 48%, #eff5ef 100%);
color: var(--text);
font-family: var(--font-sans);
line-height: 1.6;
overflow-x: hidden;
}
body.nav-open {
overflow: hidden;
}
.reveal-pending {
opacity: 0;
transform: translateY(34px);
transition:
opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-pending.is-visible {
opacity: 1;
transform: translateY(0);
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
::selection {
background: rgba(30, 139, 113, 0.18);
color: var(--text);
}
.ambient-orbs {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 0;
}
.orb {
position: absolute;
border-radius: 999px;
filter: blur(16px);
opacity: 0.55;
animation: drift 14s ease-in-out infinite;
}
.orb-a {
width: 18rem;
height: 18rem;
top: 4rem;
left: -3rem;
background: rgba(140, 213, 190, 0.45);
}
.orb-b {
width: 12rem;
height: 12rem;
top: 18rem;
right: 8vw;
background: rgba(255, 196, 143, 0.4);
animation-delay: -3s;
}
.orb-c {
width: 14rem;
height: 14rem;
bottom: 12rem;
left: 58vw;
background: rgba(195, 226, 255, 0.42);
animation-delay: -7s;
}
/* ---------------------------------------------------------------------------
Orden de apilamiento (por que el encabezado se veia borroso)
---------------------------------------------------------------------------
ANTES .site-header, main y .site-footer compartian z-index: 1. Al empatar,
CSS pinta encima al que va despues en el HTML, y main va despues del header:
por eso el contenido se dibujaba SOBRE el encabezado al desplazarse. Como el
header es semitransparente y lleva backdrop-filter: blur(18px), el resultado
no era un solapamiento limpio sino una mezcla borrosa de ambos.
La solucion no es quitar el blur ni soltar el encabezado, sino dar a cada
capa su nivel, sin empates:
0 -> fondos ambientales (.ambient-orbs)
1 -> contenido (main, .site-footer)
100 -> encabezado: siempre por encima del contenido
isolation: isolate en main es la otra mitad del arreglo: encierra ahi dentro
cualquier contexto de apilamiento que creen las tarjetas al animarse
(transform en :hover crea uno nuevo), de modo que por muy alto que suban no
pueden escapar por encima del encabezado. */
main,
.site-footer {
position: relative;
z-index: 1;
}
main {
isolation: isolate;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
width: min(1200px, calc(100vw - 1rem));
margin: 0 auto;
margin-top: 0.75rem;
padding: 0.95rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: rgba(252, 250, 245, 0.72);
border: 1px solid rgba(21, 54, 51, 0.08);
border-radius: 999px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 18px 45px rgba(23, 53, 49, 0.08);
transition:
transform var(--transition),
box-shadow var(--transition),
background var(--transition);
}
/* Al desplazarse se sube la opacidad del fondo de 0.72 a 0.97. Con 0.72 el
texto que pasaba por detras se transparentaba y se leia a traves del
encabezado, que es lo que se percibia como "borroso". Con 0.97 el fondo es
practicamente opaco y el contenido ya no se cuela, pero se conserva el toque
de cristal del diseno.
El -webkit- es necesario para Safari, que aun no acepta la forma sin prefijo:
sin el, en iPhone y Mac no habia efecto cristal en absoluto. */
.site-header.is-scrolled {
background: rgba(252, 250, 245, 0.97);
box-shadow: 0 22px 55px rgba(23, 53, 49, 0.12);
}
/* Red de seguridad para navegadores SIN backdrop-filter (Firefox con la opcion
desactivada, o navegadores antiguos). Ahi un fondo semitransparente deja ver
el texto de detras con total nitidez, asi que se pone opaco del todo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
background: rgba(252, 250, 245, 0.98);
}
.site-header.is-scrolled {
background: #fcfaf5;
}
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
.brand-mark {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, #78bca7 100%);
color: #fff;
font-weight: 800;
letter-spacing: 0.06em;
box-shadow: 0 14px 30px rgba(30, 139, 113, 0.2);
}
.brand-copy {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.brand-copy strong {
font-size: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.brand-copy span {
color: var(--text-soft);
font-size: 0.85rem;
}
.site-nav {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.site-nav a {
padding: 0.75rem 1rem;
border-radius: 999px;
color: var(--text-muted);
font-weight: 700;
font-size: 0.95rem;
transition:
color var(--transition),
background var(--transition),
transform var(--transition);
}
.site-nav a:hover,
.site-nav a.is-active {
color: var(--text);
background: rgba(30, 139, 113, 0.12);
transform: translateY(-1px);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(30, 139, 113, 0.12);
}
.nav-toggle span {
position: absolute;
width: 1.2rem;
height: 2px;
background: var(--text);
border-radius: 999px;
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle span:nth-child(1) {
transform: translateY(-5px);
}
.nav-toggle span:nth-child(3) {
transform: translateY(5px);
}
body.nav-open .nav-toggle span:nth-child(1) {
transform: rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
transform: rotate(-45deg);
}
main {
padding-bottom: 6rem;
}
section {
scroll-margin-top: calc(var(--header-height) + 2rem);
}
.hero,
.section {
width: var(--content-width);
margin: 0 auto;
}
.hero {
padding: 5rem 0 3.5rem;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
.eyebrow,
.section-kicker,
.mini-kicker {
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--accent-deep);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.75rem;
}
.eyebrow::before,
.section-kicker::before,
.mini-kicker::before {
content: "";
width: 2.4rem;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.hero h1,
.section-heading h2,
.hero-spotlight h2,
.story-panel h3,
.contact-copy h2 {
margin: 0;
font-family: var(--font-display);
line-height: 0.94;
letter-spacing: -0.03em;
}
.hero h1 {
font-size: clamp(3.4rem, 7vw, 6.6rem);
/* max-width: 11ch; ← ELIMINADO para que el título se muestre completo */
}
.hero-text,
.section-heading p,
.hero-spotlight p,
.story-panel p,
.contact-copy p,
.contact-notes span {
color: var(--text-muted);
font-size: clamp(1rem, 1.8vw, 1.08rem);
}
.hero-text {
max-width: 39rem;
margin: 1.4rem 0 0;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 2rem;
}
.primary-button,
.secondary-button,
.text-link,
.chip {
transition:
transform var(--transition),
box-shadow var(--transition),
background var(--transition),
color var(--transition),
border-color var(--transition);
}
.primary-button,
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.3rem;
padding: 0.95rem 1.4rem;
border-radius: 999px;
font-weight: 800;
border: 1px solid transparent;
}
.primary-button {
/* Antes: gradiente de --accent a --accent-warm (cobre). El extremo cobre
dejaba el texto blanco a 2.7:1 (y en la zona media 3.5:1), por debajo del
4.5:1 que exige AA para el texto del boton. El gradiente oscuro pasa:
blanco sobre el extremo claro da 5.3:1. Verificado con contraste.py. */
background: linear-gradient(135deg, #17795f 0%, var(--accent-deep) 130%);
color: #fff;
box-shadow: 0 18px 35px rgba(30, 139, 113, 0.24);
}
.primary-button:hover,
.secondary-button:hover,
.journey-card:hover,
.featured-card:hover,
.chip:hover,
.text-link:hover {
transform: translateY(-2px);
}
.secondary-button {
background: rgba(255, 255, 255, 0.58);
color: var(--text);
border-color: rgba(21, 54, 51, 0.12);
}
.stat-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
margin-top: 2.1rem;
}
.stat-card {
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(21, 54, 51, 0.08);
backdrop-filter: blur(10px);
}
.stat-card strong {
display: block;
font-size: 1.8rem;
line-height: 1;
}
.stat-card span {
display: block;
margin-top: 0.35rem;
color: var(--text-soft);
font-size: 0.88rem;
}
.hero-social {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.8rem;
}
.hero-social a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.95rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(21, 54, 51, 0.08);
color: var(--text-muted);
font-weight: 700;
font-size: 0.92rem;
}
.hero-social a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.9);
}
.hero-visual {
position: relative;
display: grid;
gap: 1rem;
}
.hero-image-frame {
position: relative;
min-height: clamp(26rem, 45vw, 40rem);
overflow: hidden;
border-radius: min(3rem, 5vw);
box-shadow: var(--shadow-card);
animation: heroBgSlideshow 24s infinite;
background-size: cover;
background-position: center;
}
/* El hero rota tres fondos. Cada paso se declara dos veces: primero la imagen
de siempre (PNG/JPG) y despues la version WebP elegida con image-set().
Los navegadores que entienden image-set() se quedan con la segunda linea y
se ahorran un 65% de peso; los que no, descartan esa linea entera, que es
invalida para ellos, y usan la primera. Se generan con optimizar_webp.py. */
@keyframes heroBgSlideshow {
0%, 20% {
background-image: url('../../images/hero_urdaibai.png');
background-image: image-set(url('../../images/hero_urdaibai.webp') type('image/webp'),
url('../../images/hero_urdaibai.png') type('image/png'));
}
25%, 45% {
background-image: url('../../images/pic02.jpg');
background-image: image-set(url('../../images/pic02.webp') type('image/webp'),
url('../../images/pic02.jpg') type('image/jpeg'));
}
50%, 70% {
background-image: url('../../images/banner.jpg');
background-image: image-set(url('../../images/banner.webp') type('image/webp'),
url('../../images/banner.jpg') type('image/jpeg'));
}
75%, 100% {
background-image: url('../../images/hero_urdaibai.png');
background-image: image-set(url('../../images/hero_urdaibai.webp') type('image/webp'),
url('../../images/hero_urdaibai.png') type('image/png'));
}
}
.hero-media {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(12, 36, 34, 0.08) 0%, rgba(12, 36, 34, 0.56) 100%),
linear-gradient(120deg, rgba(255, 255, 255, 0.05) 5%, transparent 48%);
}
.hero-image-frame::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.28);
}
.hero-spotlight {
position: absolute;
right: 1rem;
bottom: -2rem;
width: min(24rem, calc(100vw - 3rem));
padding: 1.4rem;
border-radius: var(--radius-lg);
background: var(--surface-dark);
color: #eff7f4;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 25px 60px rgba(9, 35, 30, 0.25);
backdrop-filter: blur(18px);
transform-style: preserve-3d;
transition: transform 180ms ease-out;
}
.hero-spotlight p,
.hero-spotlight li,
.text-link {
color: rgba(239, 247, 244, 0.82);
}
.hero-spotlight h2 {
margin-top: 0.4rem;
font-size: clamp(2rem, 4vw, 2.8rem);
}
.spotlight-list {
margin: 1.2rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.75rem;
}
.spotlight-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
font-size: 0.95rem;
}
.spotlight-list .icon {
color: #c8ffe1;
margin-top: 0.1rem;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.2rem;
font-weight: 800;
}
.text-link::after {
content: "\2192";
font-size: 1rem;
}
.section {
padding-top: 7rem;
}
.section-heading {
max-width: 42rem;
margin-bottom: 2.2rem;
}
.section-heading h2 {
font-size: clamp(2.4rem, 4.9vw, 4.4rem);
}
.section-heading p {
margin: 1rem 0 0;
}
.featured-grid,
.archive-grid,
.story-layout,
.contact-layout {
display: grid;
gap: 1.2rem;
}
.featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.featured-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--surface-strong);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
min-height: 26rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
/* Entrada escalonada de las tarjetas destacadas: se animan cuando su seccion
se revela, no al cargar la pagina. El retardo de cada una lo calcula app.js
y lo deja en --card-delay. */
.featured-section.is-visible .featured-card {
animation: card-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: var(--card-delay, 0ms);
}
@keyframes card-rise {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.featured-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12, 36, 34, 0.04) 10%, rgba(12, 36, 34, 0.72) 92%);
}
.featured-media {
position: absolute;
inset: 0;
}
/* El que envuelve la imagen de la tarjeta es display:inline por
defecto, y un inline no tiene altura: el height:100% del img de abajo
dejaria de funcionar y la foto se desbordaria o colapsaria. Con esto el
picture ocupa la tarjeta completa y el img vuelve a medir 100% dentro. */
.featured-media picture {
display: block;
width: 100%;
height: 100%;
}
.featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-content {
position: absolute;
inset: auto 0 0;
z-index: 1;
padding: 1.5rem;
display: grid;
gap: 0.8rem;
color: #f7fffb;
}
.featured-meta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
width: fit-content;
padding: 0.38rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.featured-content h3 {
margin: 0;
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 0.95;
font-family: var(--font-display);
}
.featured-content p {
margin: 0;
color: rgba(247, 255, 251, 0.82);
}
.featured-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 800;
}
.featured-link::after {
content: "\2192";
}
.archive-shell {
padding: clamp(1.1rem, 2.5vw, 1.75rem);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.52);
border: 1px solid rgba(21, 54, 51, 0.09);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(18px);
}
.archive-controls {
display: grid;
gap: 1rem;
}
.search-field {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.95rem 1.05rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(21, 54, 51, 0.08);
}
.search-field .icon {
color: var(--text-soft);
}
.search-field input {
width: 100%;
border: 0;
background: transparent;
color: var(--text);
outline: none;
}
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.chip {
padding: 0.7rem 1rem;
border: 1px solid rgba(21, 54, 51, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--text-muted);
font-weight: 800;
}
.chip.active {
background: linear-gradient(135deg, var(--accent-soft), rgba(255, 138, 99, 0.22));
color: var(--accent-deep);
border-color: rgba(30, 139, 113, 0.18);
}
.results-summary {
margin: 1rem 0 0;
color: var(--text-soft);
font-weight: 700;
}
.archive-grid {
margin-top: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-height: clamp(26rem, 58vh, 40rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.35rem 0.65rem 0.35rem 0.35rem;
scroll-padding-top: 0.5rem;
scrollbar-width: thin;
scrollbar-color: rgba(30, 139, 113, 0.35) transparent;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.1rem, #000 calc(100% - 1.6rem), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 1.1rem, #000 calc(100% - 1.6rem), transparent 100%);
}
.archive-grid::-webkit-scrollbar {
width: 8px;
}
.archive-grid::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(30, 139, 113, 0.3);
}
.archive-grid::-webkit-scrollbar-thumb:hover {
background: rgba(30, 139, 113, 0.5);
}
.archive-grid:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.load-more-row {
display: flex;
justify-content: center;
margin-top: 1.1rem;
}
.load-more-row[hidden] {
display: none;
}
.load-more-btn {
padding: 0.75rem 1.4rem;
border-radius: 999px;
border: 1px solid rgba(30, 139, 113, 0.22);
background: rgba(255, 255, 255, 0.85);
color: var(--accent-deep);
font-weight: 800;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.load-more-btn:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(21, 54, 51, 0.12);
}
.journey-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.9rem;
align-items: center;
padding: 1rem 1.05rem;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(21, 54, 51, 0.08);
}
.journey-card:hover {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 35px rgba(21, 54, 51, 0.09);
}
.journey-icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: linear-gradient(135deg, rgba(30, 139, 113, 0.18), rgba(255, 138, 99, 0.24));
color: var(--accent-deep);
}
.journey-body {
min-width: 0;
}
.journey-body strong,
.journey-body span {
display: block;
}
.journey-body strong {
color: var(--text);
font-size: 1rem;
}
.journey-body span {
margin-top: 0.2rem;
color: var(--text-soft);
font-size: 0.88rem;
}
.journey-arrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
/* --accent-text y no --accent: es texto de 0.88rem sobre fondo claro y
el acento normal no llega a 4.5:1 (daba 3.7:1). Ver contraste.py. */
color: var(--accent-text);
font-size: 0.88rem;
font-weight: 800;
}
.journey-arrow::after {
content: "\2197";
font-size: 1rem;
}
.journey-card.is-external .journey-icon {
background: linear-gradient(135deg, rgba(63, 147, 255, 0.18), rgba(255, 138, 99, 0.2));
}
.external-badge {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 0.45rem;
padding: 0.22rem 0.48rem;
border-radius: 999px;
background: rgba(63, 147, 255, 0.12);
color: #2265a8;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.empty-state,
.noscript-panel {
padding: 1.4rem;
border-radius: var(--radius-md);
border: 1px dashed rgba(21, 54, 51, 0.18);
color: var(--text-soft);
background: rgba(255, 255, 255, 0.6);
}
.story-layout {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.story-panel {
padding: clamp(1.3rem, 2vw, 1.7rem);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(21, 54, 51, 0.09);
box-shadow: var(--shadow-soft);
}
.story-panel h3 {
font-size: clamp(2rem, 4vw, 3rem);
}
.story-panel p {
margin: 1rem 0 0;
}
.story-highlights {
margin: 1.1rem 0 0;
padding-left: 1.2rem;
color: var(--text-muted);
}
.story-highlights li + li {
margin-top: 0.55rem;
}
.story-panel-accent {
background:
linear-gradient(160deg, rgba(17, 77, 65, 0.9), rgba(41, 112, 97, 0.82)),
linear-gradient(120deg, rgba(255, 138, 99, 0.2), transparent 55%);
color: #f6fffc;
box-shadow: var(--shadow-card);
}
.story-panel-accent p,
.story-panel-accent .season-badge {
color: rgba(246, 255, 252, 0.88);
}
.quote-mark {
display: inline-block;
font-family: var(--font-display);
font-size: 5rem;
line-height: 0.8;
}
.season-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-top: 1.4rem;
padding: 0.8rem 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
font-weight: 700;
}
.contact-layout {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
}
.contact-copy,
.contact-form {
padding: clamp(1.3rem, 2vw, 1.8rem);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(21, 54, 51, 0.09);
box-shadow: var(--shadow-soft);
}
.contact-copy h2 {
font-size: clamp(2.6rem, 5vw, 4.2rem);
}
.contact-notes {
display: grid;
gap: 0.9rem;
margin-top: 1.5rem;
}
.contact-notes strong {
display: block;
margin-bottom: 0.15rem;
}
.contact-form {
display: grid;
gap: 1rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.field-group {
display: grid;
gap: 0.45rem;
}
.field-group span {
color: var(--text-muted);
font-weight: 700;
font-size: 0.92rem;
}
/* ---------------------------------------------------------------------------
Enlace para saltar al contenido
---------------------------------------------------------------------------
Quien navega con teclado o lector de pantalla tenia que recorrer toda la
cabecera en cada carga antes de llegar al contenido. Este enlace es el primer
elemento de la pagina: esta oculto hasta que recibe el foco, y entonces
aparece arriba para saltar directamente al contenido principal. */
.skip-link {
position: absolute;
left: 50%;
top: -100px;
transform: translateX(-50%);
z-index: 1200;
padding: 0.85rem 1.4rem;
background: var(--accent);
color: #fff;
font-weight: 600;
border-radius: 0 0 0.9rem 0.9rem;
box-shadow: 0 10px 30px rgba(23, 53, 49, 0.28);
transition: top var(--transition);
}
.skip-link:focus {
top: 0;
}
/* ---------------------------------------------------------------------------
Trampa antispam (honeypot)
---------------------------------------------------------------------------
El formulario tiene un campo "website" que las personas no deben ver ni
rellenar: si llega relleno, lo ha hecho un bot y contact.php descarta el
envio. FALTABA ESTA REGLA, asi que el campo se estaba viendo en la pagina
como un input normal con el texto "No rellenes este campo".
No se usa display:none ni visibility:hidden a proposito: los bots modernos
los detectan y saltan el campo. Sacarlo de la pantalla con position
absolute es mas dificil de distinguir para ellos.
tabindex="-1" en el HTML ya lo saca del recorrido del tabulador, y
aria-hidden lo oculta a los lectores de pantalla: asi nadie que navegue con
teclado o lector cae en la trampa por error. */
.honeypot {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------------------------------------------------------------------------
Foco visible al navegar con teclado
---------------------------------------------------------------------------
Varios elementos llevaban outline:none, lo que deja a quien navega con el
tabulador sin ninguna pista de donde esta. :focus-visible solo se activa con
teclado (no al hacer clic con el raton), asi que devuelve la accesibilidad
sin ensuciar el diseno para quien usa raton o pantalla tactil. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* El campo trampa nunca debe recibir foco visible aunque se le fuerce */
.honeypot input:focus-visible {
outline: none;
}
.field-group input,
.field-group textarea {
width: 100%;
padding: 0.95rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(21, 54, 51, 0.11);
background: rgba(255, 255, 255, 0.82);
color: var(--text);
outline: none;
transition:
border-color var(--transition),
box-shadow var(--transition),
background var(--transition);
}
.field-group input:focus,
.field-group textarea:focus {
border-color: rgba(30, 139, 113, 0.42);
box-shadow: 0 0 0 4px rgba(30, 139, 113, 0.12);
background: #fff;
}
.field-group input[aria-invalid="true"],
.field-group textarea[aria-invalid="true"] {
border-color: rgba(195, 76, 52, 0.52);
box-shadow: 0 0 0 4px rgba(195, 76, 52, 0.12);
}
.field-group textarea {
resize: vertical;
min-height: 10rem;
}
.form-feedback {
min-height: 1.4rem;
margin: 0;
color: var(--text-soft);
font-size: 0.92rem;
}
.form-feedback.is-error {
color: #b3452d;
}
.form-feedback.is-success {
color: var(--accent-deep);
}
.site-footer {
width: var(--content-width);
margin: 0 auto;
padding-bottom: 3rem;
color: var(--text-soft);
font-size: 0.92rem;
}
.site-footer p {
margin: 0;
}
.site-footer p + p {
margin-top: 0.4rem;
}
@keyframes drift {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(12px, -18px, 0) scale(1.04);
}
}
.typewriter.is-typing {
border-right: 2px solid var(--accent);
animation: blink 0.75s step-end infinite;
}
@keyframes blink { 50% { border-color: transparent } }
.journey-card-shine {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 60%);
transform: translateX(-100%);
transition: transform 0.6s;
pointer-events: none;
}
.journey-card:hover .journey-card-shine {
transform: translateX(100%);
}
/* El preloader tapa TODA la pantalla (z-index 9999) y quien lo retira es el JS
al dispararse el evento "load". Eso es un punto unico de fallo: si el JS no
llega a ejecutarse (error, bloqueador, o una imagen externa que nunca
termina), el visitante se queda ante una pantalla opaca para siempre y sin
forma de seguir.
Esta animacion es la red de seguridad: en CSS puro, sin depender de JS, el
preloader se desvanece solo a los 3 segundos. Si el JS funciona (lo normal),
le anade la clase .hidden mucho antes y esto ni se nota. */
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
animation: preloaderFailsafe 0.6s ease 3s forwards;
}
@keyframes preloaderFailsafe {
to {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
/* Anula la red de seguridad: si el JS ya lo ha ocultado, la animacion no
debe devolverlo a la vista al terminar. */
animation: none;
}
.preloader-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
animation: pulse 2s infinite ease-in-out;
}
.preloader-text {
font-weight: 800;
color: var(--accent-deep);
letter-spacing: 0.05em;
text-transform: uppercase;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
.floating-label { position: relative; }
.floating-label input, .floating-label textarea {
border: 1px solid var(--line-strong);
padding: 1rem;
background: transparent;
}
.floating-label label {
position: absolute;
left: 1rem;
top: 1rem;
transition: 0.2s ease all;
pointer-events: none;
color: var(--text-muted);
}
.floating-label input:focus ~ label,
.floating-label textarea:focus ~ label,
.floating-label input:not(:placeholder-shown) ~ label,
.floating-label textarea:not(:placeholder-shown) ~ label {
top: -0.6rem;
left: 0.8rem;
font-size: 0.75rem;
background: white;
padding: 0 0.4rem;
/* --accent-text y no --accent: texto de 0.75rem sobre blanco, el acento
normal daba 4.2:1 (por debajo del 4.5 de AA). Ver contraste.py. */
color: var(--accent-text);
}
.scroll-top-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
background: var(--accent);
color: white;
border: none;
border-radius: 50%;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.scroll-top-btn.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1080px) {
.hero {
grid-template-columns: 1fr;
padding-top: 4rem;
}
.hero-visual {
order: -1;
}
.hero-image-frame {
min-height: 24rem;
}
.hero-spotlight {
position: relative;
right: auto;
bottom: auto;
width: 100%;
margin-top: -2rem;
}
.featured-grid,
.story-layout,
.contact-layout {
grid-template-columns: 1fr;
}
.featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
:root {
--content-width: min(100vw - 1rem, 1180px);
}
.site-header {
width: min(100vw - 1rem, 1180px);
padding-inline: 0.85rem;
}
.nav-toggle {
display: inline-flex;
position: relative;
flex-shrink: 0;
}
.site-nav {
position: fixed;
inset: calc(var(--header-height) + 0.5rem) 1rem auto 1rem;
display: grid;
gap: 0.35rem;
padding: 0.8rem;
background: rgba(252, 250, 245, 0.96);
border: 1px solid rgba(21, 54, 51, 0.08);
border-radius: 1.2rem;
box-shadow: 0 25px 60px rgba(23, 53, 49, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity var(--transition),
transform var(--transition),
visibility var(--transition);
}
body.nav-open .site-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-nav a {
width: 100%;
background: rgba(255, 255, 255, 0.7);
}
.archive-grid,
.form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.site-header {
gap: 0.75rem;
}
.brand-copy span {
display: none;
}
.hero {
padding-top: 3rem;
}
.hero h1 {
font-size: clamp(2.4rem, 8vw, 4rem);
max-width: none;
}
.stat-strip,
.featured-grid {
grid-template-columns: 1fr;
}
.hero-social {
gap: 0.55rem;
}
.hero-social a {
width: calc(50% - 0.28rem);
justify-content: center;
}
.journey-card {
grid-template-columns: auto minmax(0, 1fr);
}
.archive-grid {
grid-template-columns: 1fr;
max-height: min(70vh, 34rem);
padding-right: 0.45rem;
}
.journey-arrow {
grid-column: 2;
justify-self: start;
}
.contact-copy,
.contact-form,
.story-panel,
.archive-shell,
.featured-card {
border-radius: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
/* EXCEPCION al "animation: none" de arriba. Esa regla apaga todas las
animaciones, y eso incluiria la red de seguridad que retira el preloader
cuando el JS falla. Resultado: quien reduce el movimiento se quedaria
atrapado ante una pantalla opaca, que es justo el fallo que queriamos
evitar. Aqui se restaura, pero instantanea (sin desvanecido), que es lo
que esa preferencia realmente pide: nada de movimiento, no "nada de
funcionar". */
.preloader {
animation: preloaderFailsafe 0.01ms linear 3s forwards !important;
}
.preloader.hidden {
animation: none !important;
}
.reveal-pending {
opacity: 1;
transform: none;
}
.ambient-orbs {
display: none;
}
}