/* ==========================================================
Fundación Visión — Design System & Styles
========================================================== */
/* --- Layer Order --- */
@layer reset, base, theme, components, utilities;
/* --- Google Fonts ---
Se cargan con + en el .
Un @import aquí bloquearía el render: el navegador tendría que descargar y
parsear este archivo antes de descubrir siquiera que necesita las fuentes. */
/* ==========================================================
LAYER: Reset
========================================================== */
@layer reset {
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-block-size: 100dvh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video, svg {
display: block;
max-inline-size: 100%;
block-size: auto;
}
a {
color: inherit;
text-decoration: none;
}
button, input, textarea, select {
font: inherit;
color: inherit;
}
ul, ol {
list-style: none;
}
}
/* ==========================================================
LAYER: Base — Design Tokens
========================================================== */
@layer base {
:root {
/* ---- Tier 1: Literal tokens ---- */
--blue-500: #0B5ED7; /* Electric blue */
--blue-600: #084298;
--blue-700: #052c65;
--blue-900: #0B192C; /* Deep navy */
--green-500: #198754;
--green-600: #146c43;
--orange-500: #F39C12; /* Golden/Sunrise orange */
--orange-600: #d68910;
--orange-700: #A16207; /* Ámbar oscuro: versión legible del acento sobre blanco */
--white: #ffffff;
--gray-50: #F8F9FA;
--gray-100: #f1f3f5;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #adb5bd;
--gray-500: #6c757d;
--gray-600: #5a6268;
--gray-700: #343a40;
--gray-800: #212529;
--gray-900: #0B192C; /* Navy base */
/* ---- Tier 2: Semantic tokens ---- */
--color-primary: var(--blue-500);
--color-primary-dark: var(--blue-600);
--color-secondary: var(--green-500);
--color-secondary-dark: var(--green-600);
--color-accent: var(--orange-500);
--color-accent-dark: var(--orange-600);
/* El acento naranja da 2.19:1 sobre blanco (WCAG AA pide 4.5:1).
Se usa solo como fondo o sobre oscuro; para texto sobre claro, usar --color-accent-text. */
--color-accent-text: var(--orange-700);
--color-bg: var(--white);
--color-bg-alt: var(--gray-50);
--color-bg-dark: var(--gray-900);
--color-text: var(--gray-700);
--color-text-muted: var(--gray-500);
--color-text-on-dark: var(--white);
/* ---- Typography ---- */
--font-heading: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
--fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--fs-md: clamp(1.0625rem, 0.95rem + 0.55vw, 1.1875rem);
--fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
--fs-xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
--fs-2xl: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
--fs-3xl: clamp(2rem, 1.2rem + 4vw, 3.5rem);
--fs-4xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
/* ---- Spacing ---- */
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* ---- Radius ---- */
--radius-sm: 0.5rem;
--radius-md: 1rem;
--radius-lg: 1.5rem;
--radius-xl: 2rem;
--radius-2xl: 2.5rem;
--radius-full: 9999px;
/* ---- Shadows ---- */
--shadow-sm: 0 2px 8px rgba(11, 25, 44, 0.04), 0 1px 2px rgba(11, 25, 44, 0.08);
--shadow-md: 0 8px 24px rgba(11, 25, 44, 0.06), 0 2px 8px rgba(11, 25, 44, 0.04);
--shadow-lg: 0 16px 40px rgba(11, 25, 44, 0.08), 0 4px 12px rgba(11, 25, 44, 0.04);
--shadow-xl: 0 24px 60px rgba(11, 25, 44, 0.1), 0 8px 24px rgba(11, 25, 44, 0.06);
/* ---- Transitions ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 200ms;
--duration-normal: 350ms;
--duration-slow: 600ms;
/* Atajos transición completa (duración + curva), usados por varios componentes */
--transition-fast: var(--duration-fast) var(--ease-out);
--transition-normal: var(--duration-normal) var(--ease-out);
/* ---- Layout ---- */
--max-width: 75rem;
--header-height: 4.5rem;
}
body {
font-family: var(--font-body);
font-size: var(--fs-base);
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
}
/* ==========================================================
LAYER: Theme (Section Backgrounds)
========================================================== */
@layer theme {
.section--light {
background: var(--color-bg);
}
.section--alt {
background: var(--color-bg-alt);
}
.section--dark {
background: var(--color-bg-dark);
color: var(--color-text-on-dark);
}
.section--gradient {
background: linear-gradient(
135deg,
var(--blue-900) 0%,
var(--gray-900) 50%,
var(--blue-700) 100%
);
color: var(--color-text-on-dark);
}
}
/* ==========================================================
LAYER: Components
========================================================== */
@layer components {
/* --- Container --- */
.container {
inline-size: min(100% - var(--space-xl) * 2, var(--max-width));
margin-inline: auto;
}
/* --- Section spacing --- */
.section {
padding-block: var(--space-5xl);
}
.section__header {
text-align: center;
margin-block-end: var(--space-3xl);
}
.section__title {
font-size: var(--fs-3xl);
color: var(--color-primary);
position: relative;
display: inline-block;
background: linear-gradient(135deg, var(--color-primary), var(--blue-700));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section--dark .section__title,
.section--gradient .section__title {
background: linear-gradient(135deg, var(--white), color-mix(in oklab, var(--white) 70%, transparent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section__title::after {
content: '';
display: block;
inline-size: 4rem;
block-size: 0.25rem;
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
border-radius: var(--radius-full);
margin-block-start: var(--space-sm);
margin-inline: auto;
}
.section__subtitle {
font-size: var(--fs-lg);
color: var(--color-text-muted);
margin-block-start: var(--space-md);
max-inline-size: 40rem;
margin-inline: auto;
}
.section--dark .section__subtitle,
.section--gradient .section__subtitle {
color: color-mix(in oklab, var(--white) 70%, transparent);
}
.project-card__description {
color: var(--color-text-muted);
font-size: var(--fs-base);
line-height: 1.6;
margin-block-end: var(--space-md);
}
.project-card__link {
margin-top: auto;
color: var(--color-primary);
font-weight: 600;
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-block;
transition: color var(--duration-fast) var(--ease-out);
}
.project-card:hover .project-card__link {
color: var(--color-accent-text);
}
/* ============================
PROJECT MODALS
============================ */
.project-modal {
margin: auto;
border: none;
background: transparent;
max-width: 800px;
width: 90%;
padding: 0;
overflow: visible;
}
.project-modal::backdrop {
background: color-mix(in oklab, var(--gray-900) 60%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.project-modal[open]::backdrop {
opacity: 1;
}
.project-modal[open] .modal__inner {
animation: modal-pop 0.4s var(--ease-spring) forwards;
}
@keyframes modal-pop {
0% {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal__inner {
background: var(--white);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
opacity: 0;
transform: scale(0.95) translateY(20px);
}
.modal__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: var(--gray-100);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--gray-600);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
z-index: 10;
}
.modal__close:hover {
background: var(--gray-200);
color: var(--gray-900);
}
.modal__content {
padding: var(--space-2xl) var(--space-xl);
max-height: 85vh;
overflow-y: auto;
}
.modal__header {
margin-bottom: var(--space-lg);
padding-right: var(--space-2xl); /* space for close btn */
}
.modal__tag {
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary);
margin-bottom: var(--space-xs);
display: block;
}
.modal__title {
font-size: var(--fs-2xl);
color: var(--color-text);
line-height: 1.2;
}
.modal__body {
color: var(--color-text-muted);
font-size: var(--fs-base);
line-height: 1.7;
margin-bottom: var(--space-xl);
}
.modal__body p {
margin-bottom: var(--space-md);
}
.modal__media {
margin-bottom: var(--space-xl);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gray-100);
}
.modal__media:empty {
display: none;
}
.modal__footer {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
border-top: 1px solid var(--gray-200);
padding-top: var(--space-lg);
}
.modal__footer:empty {
display: none;
}
/* ============================
HEADER / NAV
============================ */
.header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 1000;
block-size: var(--header-height);
background: color-mix(in oklab, var(--gray-900) 40%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-block-end: 1px solid color-mix(in oklab, var(--white) 15%, transparent);
transition: background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
backdrop-filter var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.header--scrolled {
background: color-mix(in oklab, var(--white) 80%, transparent);
backdrop-filter: blur(24px) saturate(1.8);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
border-color: transparent;
box-shadow: 0 1px 0 color-mix(in oklab, var(--gray-900) 5%, transparent), var(--shadow-sm);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
block-size: 100%;
}
.header__logo-img {
max-block-size: 3.5rem;
width: auto;
object-fit: contain;
transition: transform var(--duration-normal) var(--ease-spring),
filter var(--duration-normal) var(--ease-out);
}
.header:not(.header--scrolled) .header__logo-img,
.footer .header__logo-img {
filter: brightness(0) invert(1);
}
.header__logo:hover .header__logo-img {
transform: scale(1.05);
}
.nav__list {
display: flex;
gap: var(--space-xl);
align-items: center;
}
.nav__link {
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-on-dark);
position: relative;
padding-block: var(--space-xs);
transition: color var(--duration-fast) var(--ease-out);
}
.header--scrolled .nav__link {
color: var(--color-text);
}
.nav__link::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 0;
block-size: 2px;
background: var(--color-accent);
transition: inline-size var(--duration-normal) var(--ease-out);
}
.nav__link:hover::after {
inline-size: 100%;
}
.nav__link--cta {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
color: var(--white) !important;
padding: var(--space-xs) var(--space-lg);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
transition: transform var(--duration-fast) var(--ease-spring),
box-shadow var(--duration-fast) var(--ease-out);
}
.nav__link--cta::after {
display: none;
}
.nav__link--cta:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 4px 20px color-mix(in oklab, var(--color-accent) 40%, transparent);
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
z-index: 1001;
}
.hamburger__line {
display: block;
inline-size: 1.5rem;
block-size: 2px;
background: var(--color-text-on-dark);
border-radius: var(--radius-full);
transition: transform var(--duration-normal) var(--ease-out),
opacity var(--duration-fast);
}
.header--scrolled .hamburger__line {
background: var(--color-text);
}
.hamburger--active .hamburger__line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger--active .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger--active .hamburger__line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ============================
HERO SLIDER
============================ */
.hero {
position: relative;
block-size: 65dvh;
min-block-size: 450px;
overflow: hidden;
background: var(--color-bg-dark);
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s var(--ease-out);
}
.hero__slide--active {
opacity: 1;
}
.hero__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
var(--gray-900) 0%,
color-mix(in oklab, var(--gray-900) 70%, transparent) 30%,
transparent 100%
);
}
.hero__content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
padding: var(--space-2xl) var(--space-xl) 5rem var(--space-xl);
z-index: 2;
}
.hero__tag {
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-accent);
margin-block-end: var(--space-md);
opacity: 0;
transform: translateY(1rem);
transition: opacity 0.8s var(--ease-out) 0.2s,
transform 0.8s var(--ease-out) 0.2s;
}
.hero__slide--active .hero__tag {
opacity: 1;
transform: translateY(0);
}
.hero__title {
font-size: var(--fs-4xl);
font-weight: 900;
color: var(--white);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
max-inline-size: 50rem;
opacity: 0;
transform: translateY(1.5rem);
transition: opacity 0.8s var(--ease-out) 0.4s,
transform 0.8s var(--ease-out) 0.4s;
}
.hero__slide--active .hero__title {
opacity: 1;
transform: translateY(0);
}
.hero__subtitle {
font-size: var(--fs-lg);
color: color-mix(in oklab, var(--white) 85%, transparent);
margin-block-start: var(--space-md);
max-inline-size: 35rem;
opacity: 0;
transform: translateY(1.5rem);
transition: opacity 0.8s var(--ease-out) 0.6s,
transform 0.8s var(--ease-out) 0.6s;
}
.hero__slide--active .hero__subtitle {
opacity: 1;
transform: translateY(0);
}
/* Slider dots */
.hero__dots {
position: absolute;
inset-block-end: var(--space-2xl);
inset-inline: 0;
display: flex;
justify-content: center;
gap: var(--space-sm);
z-index: 3;
}
.hero__dot {
inline-size: 0.75rem;
block-size: 0.75rem;
border-radius: var(--radius-full);
border: 2px solid var(--white);
background: transparent;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-spring);
padding: 0;
}
.hero__dot--active {
background: var(--color-accent);
border-color: var(--color-accent);
transform: scale(1.3);
}
.hero__dot:hover:not(:disabled):not(.hero__dot--active) {
background: color-mix(in oklab, var(--white) 50%, transparent);
}
/* Slider arrows */
.hero__arrow {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 3;
background: color-mix(in oklab, var(--white) 15%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid color-mix(in oklab, var(--white) 25%, transparent);
color: var(--white);
inline-size: 3rem;
block-size: 3rem;
border-radius: var(--radius-full);
display: grid;
place-items: center;
cursor: pointer;
font-size: var(--fs-lg);
transition: background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-spring);
}
.hero__arrow:hover:not(:disabled) {
background: color-mix(in oklab, var(--white) 30%, transparent);
transform: translateY(-50%) scale(1.1);
}
.hero__arrow--prev {
inset-inline-start: var(--space-lg);
}
.hero__arrow--next {
inset-inline-end: var(--space-lg);
}
/* Scroll indicator */
.hero__scroll-indicator {
position: absolute;
inset-block-end: var(--space-lg);
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
color: var(--white);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
opacity: 0.7;
animation: bounce-scroll 2s infinite;
}
@keyframes bounce-scroll {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* ============================
ABOUT SECTION
============================ */
.about__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.about__text p {
margin-block-end: var(--space-lg);
color: var(--color-text-muted);
font-size: var(--fs-base);
/* Justificado + partición de palabras. La partición no es opcional aquí:
sin ella, justificar una columna estrecha abre "ríos" de espacio entre
palabras. `hyphens: auto` usa el diccionario del idioma declarado en
, que i18n.js actualiza al cambiar ES/EN. */
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
}
.about__cards {
display: grid;
gap: var(--space-lg);
}
.about__card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
border-inline-start: 4px solid var(--color-primary);
transition: transform var(--duration-normal) var(--ease-spring),
box-shadow var(--duration-normal) var(--ease-out);
}
.about__card:nth-child(2) {
border-inline-start-color: var(--color-secondary);
}
.about__card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.about__card-title {
font-size: var(--fs-lg);
color: var(--color-primary);
margin-block-end: var(--space-sm);
}
.about__card:nth-child(2) .about__card-title {
color: var(--color-secondary);
}
.about__card p {
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
/* ============================
STATS BAR
============================ */
.stats {
padding-block: var(--space-3xl);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--white);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
text-align: center;
}
.stat__number {
font-family: var(--font-heading);
font-size: var(--fs-3xl);
font-weight: 900;
}
.stat__label {
font-size: var(--fs-sm);
opacity: 0.85;
margin-block-start: var(--space-xs);
}
/* ============================
PROJECTS SECTION
============================ */
.projects__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.project-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
display: flex;
flex-direction: column;
block-size: 100%;
cursor: pointer;
}
.project-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.project-card__image-wrapper {
position: relative;
block-size: 14rem;
overflow: hidden;
}
.project-card__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.project-card:hover .project-card__image {
transform: scale(1.08);
}
.project-card__image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}
.project-card__logo {
position: absolute;
inset-block-end: var(--space-md);
inset-inline-start: var(--space-lg);
inline-size: 3.5rem;
block-size: 3.5rem;
object-fit: contain;
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-xs);
box-shadow: var(--shadow-md);
}
.project-card__body {
padding: var(--space-xl);
}
.project-card__title {
font-size: var(--fs-xl);
color: var(--color-text);
margin-block-end: var(--space-sm);
}
.project-card__description {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin-block-end: var(--space-lg);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.project-card__tag {
display: inline-block;
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
.project-card:nth-child(2) .project-card__tag {
background: color-mix(in oklab, var(--color-secondary) 12%, transparent);
color: var(--color-secondary);
}
.project-card:nth-child(3) .project-card__tag {
background: color-mix(in oklab, var(--color-accent) 12%, transparent);
color: var(--color-accent);
}
.project-card:nth-child(4) .project-card__tag {
background: color-mix(in oklab, var(--blue-500) 12%, transparent);
color: var(--blue-500);
}
/* ============================
DONATE SECTION
============================ */
.donate-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.donate-card__details {
padding: var(--space-3xl);
}
.donate-card__head {
display: flex;
align-items: center;
gap: var(--space-md);
margin-block-end: var(--space-xl);
}
.donate-card__head-icon {
inline-size: 3.5rem;
block-size: 3.5rem;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
.donate-card__title {
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--gray-900);
line-height: 1.2;
}
.donate-card__subtitle {
color: var(--gray-600);
font-size: var(--fs-base);
}
.donate-card__rows {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-block-end: var(--space-lg);
}
.donate-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
padding-block-end: var(--space-sm);
border-block-end: 1px solid var(--gray-100);
}
.donate-row__label {
color: var(--gray-600);
font-size: var(--fs-sm);
}
.donate-row__value {
color: var(--gray-900);
font-weight: 600;
text-align: end;
margin: 0;
}
.donate-row__value--group {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.donate-row__account {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--fs-md);
letter-spacing: 0.02em;
}
.donate-copy-btn {
inline-size: 2.25rem;
block-size: 2.25rem;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--gray-100);
border: 1px solid var(--gray-200);
color: var(--gray-700);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.donate-copy-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--white);
}
.donate-copy-btn--ok,
.donate-copy-btn--ok:hover {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--white);
}
.donate-copy-status {
font-size: var(--fs-sm);
color: var(--color-secondary-dark);
min-block-size: 1.25rem;
margin-block-end: var(--space-md);
}
.donate-note {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-md);
background: color-mix(in oklab, var(--color-secondary) 10%, transparent);
}
.donate-note__icon {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--color-secondary-dark);
}
.donate-note__text {
font-size: var(--fs-sm);
color: var(--gray-700);
line-height: 1.5;
}
.donate-card__cta {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-3xl);
color: var(--white);
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.donate-card__cta-blob {
position: absolute;
border-radius: 50%;
background: color-mix(in oklab, var(--white) 12%, transparent);
pointer-events: none;
}
.donate-card__cta-blob--1 {
inset-block-start: -50px;
inset-inline-end: -50px;
inline-size: 250px;
block-size: 250px;
}
.donate-card__cta-blob--2 {
inset-block-end: -80px;
inset-inline-start: -80px;
inline-size: 200px;
block-size: 200px;
}
.donate-card__cta-inner {
position: relative;
z-index: 1;
}
.donate-card__cta-title {
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--white);
margin-block-end: var(--space-md);
}
.donate-card__cta-text {
color: color-mix(in oklab, var(--white) 90%, transparent);
font-size: var(--fs-base);
line-height: 1.6;
margin-block-end: var(--space-xl);
}
.donate-card__cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
inline-size: 100%;
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--white);
color: var(--color-primary);
font-weight: 600;
/* El correo largo no debe desbordar en pantallas estrechas */
overflow-wrap: anywhere;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.donate-card__cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
/* ============================
CONTACT SECTION
============================ */
.contact {
position: relative;
overflow: hidden;
background: var(--gray-50);
}
/* Luces de ambiente del fondo */
.contact__ambient {
position: absolute;
inline-size: 600px;
block-size: 600px;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.contact__ambient--1 {
inset-block-start: -150px;
inset-inline-end: -100px;
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.contact__ambient--2 {
inset-block-end: -150px;
inset-inline-start: -100px;
background: color-mix(in oklab, var(--color-secondary) 10%, transparent);
}
.contact__container {
position: relative;
z-index: 1;
}
.contact__eyebrow {
/* block + fit-content: si fuera inline-block se colocaría en la misma
línea que .section__title (que también es inline-block) en pantallas anchas. */
display: block;
inline-size: fit-content;
margin-inline: auto;
padding: var(--space-xs) var(--space-md);
margin-block-end: var(--space-md);
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
color: var(--color-primary);
font-weight: 700;
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.contact__info {
display: flex;
flex-direction: column;
justify-content: center;
}
.contact__heading {
font-size: var(--fs-3xl);
font-weight: 800;
line-height: 1.1;
color: var(--gray-900);
margin-block-end: var(--space-lg);
}
.contact__heading-accent {
color: var(--color-primary);
}
.contact__lead {
font-size: var(--fs-lg);
color: var(--gray-600);
line-height: 1.6;
max-inline-size: 28rem;
margin-block-end: var(--space-2xl);
}
.contact__channels {
display: grid;
gap: var(--space-lg);
}
.contact__channel {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal), box-shadow var(--transition-normal),
border-color var(--transition-normal);
}
.contact__channel:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.contact__channel-avatar {
inline-size: 4rem;
block-size: 4rem;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
}
.contact__channel-avatar--primary {
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
.contact__channel-avatar--secondary {
background: color-mix(in oklab, var(--color-secondary) 10%, transparent);
color: var(--color-secondary);
}
.contact__channel-body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-inline-size: 0;
}
.contact__channel-title {
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--gray-900);
}
.contact__channel-value {
color: var(--gray-600);
font-size: var(--fs-base);
/* El correo no debe romper la tarjeta en móvil */
overflow-wrap: anywhere;
}
/* Form */
.contact__form {
background: var(--white);
border-radius: var(--radius-2xl);
padding: var(--space-3xl);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-100);
}
.form__group {
margin-block-end: var(--space-lg);
}
.form__label {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-500);
margin-block-end: var(--space-xs);
}
.form__input,
.form__textarea {
inline-size: 100%;
padding: var(--space-md);
border: 1px solid transparent;
border-bottom: 2px solid var(--gray-200);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: var(--fs-base);
background: var(--gray-50);
transition: all var(--duration-fast) var(--ease-out);
color: var(--gray-900);
}
.form__input:focus,
.form__textarea:focus {
outline: none;
background: var(--white);
border-bottom-color: var(--color-primary);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.form__textarea {
min-block-size: 8rem;
resize: vertical;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
border: none;
cursor: pointer;
transition: transform var(--duration-normal) var(--ease-spring),
box-shadow var(--duration-normal) var(--ease-out),
background var(--duration-fast) var(--ease-out);
min-block-size: 2.75rem;
box-shadow: var(--shadow-sm);
}
.btn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.02);
}
.btn:active:not(:disabled) {
transform: scale(0.98);
}
.btn--primary {
background: linear-gradient(135deg, var(--color-primary), var(--blue-700));
color: var(--white);
}
.btn--primary:hover:not(:disabled) {
box-shadow: 0 8px 24px color-mix(in oklab, var(--color-primary) 50%, transparent);
}
.btn--accent {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
color: var(--white);
}
.btn--accent:hover:not(:disabled) {
box-shadow: 0 8px 24px color-mix(in oklab, var(--color-accent) 50%, transparent);
}
.btn--outline {
background: transparent;
color: var(--white);
border: 2px solid color-mix(in oklab, var(--white) 40%, transparent);
}
.btn--outline:hover:not(:disabled) {
background: color-mix(in oklab, var(--white) 10%, transparent);
}
.btn--full-width {
inline-size: 100%;
}
/* ============================
FOOTER
============================ */
.footer {
background: var(--gray-900);
color: var(--color-text-on-dark);
padding-block: var(--space-3xl) var(--space-xl);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-3xl);
margin-block-end: var(--space-3xl);
}
.footer__brand p {
color: color-mix(in oklab, var(--white) 60%, transparent);
margin-block-start: var(--space-md);
font-size: var(--fs-sm);
max-inline-size: 25rem;
}
.footer__heading {
font-size: var(--fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-block-end: var(--space-lg);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__link {
font-size: var(--fs-sm);
color: color-mix(in oklab, var(--white) 60%, transparent);
transition: color var(--duration-fast) var(--ease-out),
padding-inline-start var(--duration-fast) var(--ease-out);
}
.footer__link:hover {
color: var(--white);
padding-inline-start: var(--space-xs);
}
.footer__social {
display: flex;
gap: var(--space-md);
}
.footer__social-link {
inline-size: 2.5rem;
block-size: 2.5rem;
display: grid;
place-items: center;
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--white) 10%, transparent);
color: var(--white);
font-size: var(--fs-lg);
transition: background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-spring);
}
.footer__social-link:hover {
background: var(--color-primary);
transform: scale(1.1);
}
.footer__bottom {
padding-block-start: var(--space-xl);
border-block-start: 1px solid color-mix(in oklab, var(--white) 10%, transparent);
text-align: center;
font-size: var(--fs-xs);
color: color-mix(in oklab, var(--white) 40%, transparent);
}
/* ============================
SCROLL ANIMATIONS (progressive enhancement)
============================ */
.reveal {
opacity: 0;
transform: translateY(2rem);
transition: opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
/* Scroll-driven animation for supported browsers (decorative, no fallback needed) */
@media (prefers-reduced-motion: no-preference) {
@supports ((animation-timeline: view()) and (animation-range: entry)) {
@keyframes fade-slide-in {
from {
opacity: 0;
transform: translateY(2rem);
}
}
.scroll-reveal {
opacity: 1;
transform: translateY(0);
animation: fade-slide-in auto linear backwards;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
}
}
/* ============================
MOBILE NAV OVERLAY
============================ */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 999;
background: color-mix(in oklab, var(--gray-900) 97%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xl);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-out);
}
.mobile-nav--open {
opacity: 1;
pointer-events: auto;
}
.mobile-nav__link {
font-family: var(--font-heading);
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--white);
transition: color var(--duration-fast) var(--ease-out);
}
.mobile-nav__link:hover {
color: var(--color-accent);
}
/* ============================
ACCESIBILIDAD
============================ */
/* Oculto visualmente pero disponible para lectores de pantalla */
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
inset-block-start: -100%;
inset-inline-start: var(--space-md);
z-index: 2000;
padding: var(--space-sm) var(--space-lg);
background: var(--color-primary);
color: var(--white);
font-weight: 600;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
transition: inset-block-start var(--transition-fast);
}
.skip-link:focus {
inset-block-start: 0;
}
/* Bloqueo de scroll (menú móvil y modal) sin tocar estilos en línea */
body.is-locked {
overflow: hidden;
}
/* Las no deben generar caja propia y romper el layout heredado */
.hero__slide picture,
.project-card__image-wrapper picture {
display: block;
block-size: 100%;
}
.header__logo picture,
.modal__logo-band picture,
.modal__tcai picture {
display: contents;
}
/* ============================
HEADER: acciones e idioma
============================ */
.header__logo { order: 1; }
.nav { order: 2; margin-inline-start: auto; }
.header__actions { order: 3; }
.header__actions {
display: flex;
align-items: center;
gap: var(--space-md);
margin-inline-start: var(--space-lg);
}
.lang-switch {
display: flex;
align-items: center;
padding: 3px;
gap: 2px;
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--white) 15%, transparent);
border: 1px solid color-mix(in oklab, var(--white) 25%, transparent);
transition: background var(--transition-normal), border-color var(--transition-normal);
}
.header--scrolled .lang-switch {
background: var(--gray-100);
border-color: var(--gray-200);
}
.lang-switch__btn {
padding: 0.3rem 0.7rem;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--white);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.header--scrolled .lang-switch__btn {
color: var(--gray-700);
}
.lang-switch__btn[aria-pressed='true'] {
background: var(--color-primary);
color: var(--white);
}
.lang-switch__btn:hover:not([aria-pressed='true']) {
background: color-mix(in oklab, var(--white) 20%, transparent);
}
.header--scrolled .lang-switch__btn:hover:not([aria-pressed='true']) {
background: var(--gray-200);
}
/* ============================
HERO: controles
============================ */
.hero__controls {
position: absolute;
inset-block-end: var(--space-2xl);
inset-inline: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
.hero__dots {
position: static;
display: flex;
gap: var(--space-sm);
}
.hero__pause {
inline-size: 2rem;
block-size: 2rem;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--white) 15%, transparent);
border: 1px solid color-mix(in oklab, var(--white) 30%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--white);
cursor: pointer;
transition: background var(--transition-fast);
}
.hero__pause:hover {
background: color-mix(in oklab, var(--white) 30%, transparent);
}
.hero__pause-icon--play { display: none; }
.hero__pause--paused .hero__pause-icon--pause { display: none; }
.hero__pause--paused .hero__pause-icon--play { display: block; }
/* Región de anuncios del carrusel: solo para lectores de pantalla */
.hero__live {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ============================
FORMULARIO: estado y trampa anti-spam
============================ */
/* Honeypot: fuera de pantalla, sin display:none (algunos bots lo detectan) */
.form__trap {
position: absolute;
inset-inline-start: -9999px;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
}
.btn__label { display: inline-block; }
.btn__icon { flex-shrink: 0; }
/* Enlaces de correo: el href lo pone el JS al arrancar (anti-recolectores).
Antes de eso no deben parecer pulsables. */
.js-mail { cursor: pointer; }
.js-mail:not([href]) { cursor: default; }
.btn--ok {
background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
}
.btn--error {
background: linear-gradient(135deg, #dc2626, #991b1b);
}
.form__status {
margin-block-start: var(--space-md);
font-size: var(--fs-sm);
min-block-size: 1.25rem;
text-align: center;
}
.form__status--ok { color: var(--color-secondary-dark); }
.form__status--error { color: #b91c1c; }
.form__input:invalid:not(:placeholder-shown),
.form__textarea:invalid:not(:placeholder-shown) {
border-bottom-color: #dc2626;
}
/* ============================
MODAL: bloques de contenido
============================ */
.modal__contact {
margin-block-start: var(--space-lg);
padding: var(--space-md) var(--space-lg);
background: var(--gray-50);
border-radius: var(--radius-md);
border-inline-start: 3px solid var(--color-primary);
}
.modal__contact-row {
font-size: var(--fs-sm);
color: var(--gray-700);
margin-block-end: var(--space-xs);
overflow-wrap: anywhere;
}
.modal__contact-row:last-child { margin-block-end: 0; }
.modal__logo-band {
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-xl);
background: var(--gray-100);
}
.modal__logo-band--light { background: var(--white); }
.modal__logo {
max-block-size: 120px;
inline-size: auto;
object-fit: contain;
}
.modal__logo--sm { max-block-size: 80px; }
.modal__tcai {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-xl);
padding: var(--space-xl);
background: var(--white);
}
.modal__book {
max-block-size: 220px;
inline-size: auto;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.modal__video {
position: relative;
aspect-ratio: 16 / 9;
}
.modal__video iframe {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: 0;
}
.modal__radio {
position: relative;
padding: var(--space-xl);
text-align: center;
color: var(--white);
background: linear-gradient(135deg, var(--color-primary), var(--gray-900));
}
.modal__radio-logo {
max-block-size: 70px;
inline-size: auto;
margin-inline: auto;
margin-block-end: var(--space-md);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.modal__radio-title {
font-size: var(--fs-lg);
color: var(--white);
margin-block-end: var(--space-xs);
}
.modal__radio-text {
font-size: var(--fs-sm);
opacity: 0.9;
margin-block-end: var(--space-lg);
}
.modal__radio-player {
padding: 8px;
border-radius: var(--radius-md);
background: color-mix(in oklab, var(--white) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--white) 20%, transparent);
}
.modal__radio-player iframe {
inline-size: 100%;
block-size: 75px;
border: 0;
border-radius: var(--radius-sm);
}
.modal__social-link {
inline-size: 2.75rem;
block-size: 2.75rem;
display: inline-grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--gray-200);
color: var(--color-primary);
transition: transform var(--transition-fast), background var(--transition-fast),
color var(--transition-fast);
}
.modal__social-link:hover {
transform: translateY(-2px);
background: var(--gray-50);
}
.modal__social-link--youtube { color: #FF0000; border-color: #FF0000; }
.modal__social-link--facebook { color: #1877F2; }
.modal__social-link--linktree { color: #43E660; border-color: #25b14c; }
}
/* ==========================================================
LAYER: Utilities
========================================================== */
@layer utilities {
.text-center { text-align: center; }
/* Sobre fondo claro el naranja no llega a 4.5:1; se usa la variante oscura */
.text-accent { color: var(--color-accent-text); }
}
/* ==========================================================
FOCO VISIBLE — se define fuera de las capas para que gane
siempre sobre los estilos de componente.
========================================================== */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Sobre fondos oscuros el azul no contrasta: se usa blanco */
.header:not(.header--scrolled) :focus-visible,
.hero :focus-visible,
.footer :focus-visible,
.mobile-nav :focus-visible,
.donate-card__cta :focus-visible,
.stats :focus-visible {
outline-color: var(--white);
}
.form__input:focus-visible,
.form__textarea:focus-visible {
outline-offset: 1px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
/* --- Tablet grande: el layout a dos columnas empieza a apretarse --- */
@media (max-width: 1024px) {
.about__grid,
.projects__grid,
.contact__grid,
.footer__grid {
grid-template-columns: 1fr;
}
.footer__grid {
gap: var(--space-xl);
}
.donate-card {
grid-template-columns: 1fr;
}
.donate-card__details,
.donate-card__cta {
padding: var(--space-2xl);
}
.contact__lead {
max-inline-size: none;
}
}
/* --- Tablet / móvil: navegación colapsada --- */
@media (max-width: 768px) {
.nav {
display: none;
}
.hamburger {
display: flex;
}
.section {
padding-block: var(--space-3xl);
}
.hero {
block-size: 60dvh;
min-block-size: 400px;
}
.hero__arrow {
display: none;
}
.hero__title {
font-size: var(--fs-3xl);
}
.hero__content {
padding-block-end: 6rem;
}
.stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.project-card__image-wrapper {
block-size: 12rem;
}
.contact__form {
padding: var(--space-lg);
}
.modal__content {
padding: var(--space-xl) var(--space-lg);
}
.modal__tcai {
gap: var(--space-lg);
}
.modal__book {
max-block-size: 180px;
}
}
/* --- Móvil --- */
@media (max-width: 560px) {
.container {
/* Márgenes laterales más ajustados para no perder ancho útil */
inline-size: min(100% - var(--space-lg) * 2, var(--max-width));
}
.header__logo-img {
max-block-size: 2.75rem;
}
.header__actions {
gap: var(--space-sm);
margin-inline-start: var(--space-sm);
}
.lang-switch__btn {
padding: 0.3rem 0.55rem;
}
.donate-card__details,
.donate-card__cta {
padding: var(--space-xl) var(--space-lg);
}
.donate-row {
/* Etiqueta arriba y valor abajo: en una línea el número no cabe */
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.donate-row__value {
text-align: start;
}
.contact__channel {
padding: var(--space-md);
gap: var(--space-md);
}
.contact__channel-avatar {
inline-size: 3rem;
block-size: 3rem;
}
.contact__channel-avatar svg {
inline-size: 22px;
block-size: 22px;
}
.contact__channel-title {
font-size: var(--fs-base);
}
.contact__channel-value {
font-size: var(--fs-sm);
}
.modal__logo-band,
.modal__tcai,
.modal__radio {
padding: var(--space-lg);
}
.footer__grid {
gap: var(--space-2xl);
}
}
/* --- Móviles estrechos (360px y menos) --- */
@media (max-width: 400px) {
.stats__grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.hero__controls {
inset-block-end: var(--space-lg);
}
.modal__book {
max-block-size: 150px;
}
}
/* --- Pantallas muy bajas en horizontal: el hero no debe comerse la vista --- */
@media (max-height: 480px) and (orientation: landscape) {
.hero {
block-size: 100dvh;
min-block-size: 320px;
}
.hero__scroll-indicator {
display: none;
}
}
/* ==========================================================
MOVIMIENTO REDUCIDO
========================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1;
transform: none;
}
.hero__slide--active .hero__tag,
.hero__slide--active .hero__title,
.hero__slide--active .hero__subtitle {
opacity: 1;
transform: none;
}
.hero__scroll-indicator {
animation: none;
}
}
/* ==========================================================
IMPRESIÓN
========================================================== */
@media print {
.header,
.mobile-nav,
.hero__arrow,
.hero__controls,
.hero__scroll-indicator,
.skip-link,
.contact__form,
.contact__ambient {
display: none !important;
}
body {
color: #000;
background: #fff;
}
.section {
padding-block: var(--space-lg);
break-inside: avoid;
}
a[href^='http']::after {
content: ' (' attr(href) ')';
font-size: 0.85em;
word-break: break-all;
}
}