/* CSS Architecture 1) Design Tokens (colors, typography, spacing) 2) Base / Elements 3) Layout 4) Components (header, hero, cards, timeline, forms, etc.) 5) Utilities 6) Responsiveness & Motion 7) Accessibility */ /* 1) Design Tokens */ :root { /* Palette (legacy + semantic aliases) */ --rojo: #c31320; /* legacy primary */ --azul: #03314b; /* legacy secondary */ --crema: #fcf0d6; --rosa: var(--rojo); --rosa-claro: #fdf1d6; /* Neutrals */ --gris-500: #6b7280; --gris-200: #e5e7eb; --gris-100: #f3f4f6; --blanco: #fff; /* Semantic color aliases for easier theming */ --color-primary: var(--rojo); --color-secondary: var(--azul); --color-secondary-solid: var(--azul); --color-accent: #d94a49; /* used in gradients/highlights */ --color-bg: var(--rosa-claro); --color-surface: var(--blanco); --color-text: #111; --color-muted: #374151; /* secondary text */ --color-divider: var(--gris-200); /* Extra accent */ --color-teal: #0ea5a4; /* celeste/turquesa */ /* Brand accent: cream */ --color-cream: var(--crema); --cream-tint: rgba(248,240,216,0.40); /* Controls */ --select-chevron: url("data:image/svg+xml;utf8,"); /* Typography */ --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-base: 16px; --line-height-base: 1.6; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Layout */ --maxw: 1100px; --radius-xl: 18px; --radius-lg: 12px; --shadow: 0 10px 25px rgba(0,0,0,.08); /* Header height token (kept in sync with .nav min-height) */ --header-h: 64px; } /* Optional: automatic dark mode based on system preference. Projects can also force dark mode with [data-theme="dark"] on or . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Palette adjustments for better contrast */ --azul: #e5e7eb; /* ensure headings/nav using --azul are legible */ --color-secondary: var(--azul); /* Solid backgrounds for chips/badges in system dark */ --color-secondary-solid: #475569; --color-bg: #0f172a; --rosa-claro: var(--color-bg); /* keep hero/bg using same token */ --color-surface: #111827; --blanco: var(--color-surface); --color-text: #e5e7eb; --color-muted: #cbd5e1; --gris-100: #1f2937; --gris-200: #475569; --gris-500: #94a3b8; /* Cream accent in dark (subtle tint) */ --color-cream: #f8f0d8; --cream-tint: rgba(248,240,216,0.12); /* Controls */ --select-chevron: url("data:image/svg+xml;utf8,"); /* Extra accent for dark legibility */ --color-teal: #5eead4; } } :root[data-theme="dark"] { --azul: #e5e7eb; --color-secondary: var(--azul); /* Solid secondary backgrounds for chips/badges */ --color-secondary-solid: #334155; --color-bg: #0f172a; --rosa-claro: var(--color-bg); --color-surface: #111827; --blanco: var(--color-surface); --color-text: #e5e7eb; --color-muted: #cbd5e1; --gris-100: #1f2937; --gris-200: #475569; --gris-500: #94a3b8; /* Cream accent in dark (subtle tint) */ --color-cream: #f8f0d8; --cream-tint: rgba(248,240,216,0.12); /* Controls */ --select-chevron: url("data:image/svg+xml;utf8,"); --color-teal: #5eead4; } /* 2) Base / Elements */ body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-base); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth scroll for in-page anchors (including “Eslogan”) */ html { scroll-behavior: smooth; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--maxw); margin: auto; padding: 0 clamp(20px, 4vw, 32px); } code { color: var(--gris-500); } /* 3) Layout: Header / Nav */ header { position: sticky; top: 0; /* Use a solid background to avoid expensive backdrop-filter repaints during scroll */ background: var(--rosa-claro); /* Removing blur greatly reduces scroll jank on many devices */ border-bottom: 1px solid var(--gris-200); z-index: 1000; } /* Ensure sections account for sticky header when scrolled into view */ #eslogan { scroll-margin-top: var(--header-h); } .nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-extrabold); color: var(--color-secondary); } .brand img { height: 34px; } nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } nav a { color: var(--color-secondary); font-weight: var(--fw-bold); padding: 8px 10px; border-radius: 8px; position: relative; transition: background-color 0.2s ease, color 0.2s ease; } nav a:hover { background: rgba(0, 47, 74, 0.14); } nav a.active, nav a[aria-current="page"] { background: rgba(0, 47, 74, 0.16); } nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; opacity: 0.7; } nav a:hover::after, nav a:focus-visible::after, nav a.active::after, nav a[aria-current="page"]::after { transform: scaleX(1); } /* Toggle button (hidden by default) */ .nav-toggle { display: none; cursor: pointer; background: var(--color-surface); border: 1px solid var(--gris-200); color: var(--color-secondary); border-radius: 999px; padding: 10px 14px; font-weight: var(--fw-extrabold); line-height: 1; box-shadow: var(--shadow); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.08s ease; } .nav-toggle:hover { background: var(--color-surface); border-color: #d1d5db; transform: translateY(-1px); } .nav-toggle:active { transform: none; } .nav-toggle:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; } .nav-toggle[aria-expanded="true"] { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); } .nav-toggle > span[aria-hidden="true"] { font-size: 18px; } /* 4) Components */ /* Hero */ .hero { position:relative; overflow:hidden; min-height:max(520px, calc(100svh - var(--header-h))); display:grid; align-items:center; background: radial-gradient(1200px 600px at 110% -10%, rgba(162,45,44,0.08), transparent 60%), radial-gradient(800px 400px at -10% 120%, rgba(32,51,73,0.06), transparent 60%), linear-gradient(120deg,var(--rosa-claro),#fff 60%); } .hero::before{ content:""; position:absolute; /* Lienzo amplio para evitar cortes visibles */ inset:-20% -22% auto 8%; height:150%; /* Color por gradientes; la silueta viene de la máscara externa */ background: radial-gradient(900px 420px at 86% 8%, rgba(162,45,44,.38), transparent 64%), radial-gradient(780px 380px at 72% 20%, rgba(32,51,73,.26), transparent 72%), radial-gradient(560px 260px at 88% 28%, var(--cream-tint), transparent 80%); pointer-events:none; /* Silueta de ola (sin bordes) como máscara alpha */ -webkit-mask-image: url('/assets/images/hero-wave-mask.svg'); mask-image: url('/assets/images/hero-wave-mask.svg'); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: right top; mask-position: right top; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; /* Simplify animation to transform-only to avoid background repaints */ animation: heroFloat 18s ease-in-out infinite alternate; will-change: transform; } .hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(36px, 8vh, 96px); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--rosa-claro) 90%); pointer-events:none; } @media (hover: none) and (pointer: coarse){ .hero::before{ animation: none; transform: none; } } @media (max-width: 768px){ .hero::before{ display: none; } .hero{ background: linear-gradient(125deg, var(--rosa-claro), #fff 70%); } } .hero-inner { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding-block:clamp(28px, 8vh, 84px); } .hero h1 { font-size:clamp(34px,4.6vw,64px); color:var(--azul); margin:0 0 12px; letter-spacing:-.01em; line-height:1.08; text-wrap:balance; } .hero h1 .accent { background:linear-gradient(90deg, #a22d2c, #d94a49); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero h1 .highlight { background-image:linear-gradient(to top, rgba(162,45,44,.22), rgba(162,45,44,0)); background-size:100% 0.5em; background-position:0 88%; background-repeat:no-repeat; } .hero p { color:#0b2540; margin:0 0 24px; max-width:62ch; font-size:clamp(16px,1.25vw,20px); font-weight:500; } .hero .eyebrow { color:var(--rojo); background:rgba(162,45,44,.08); border:1px solid rgba(162,45,44,.16); padding:4px 10px; border-radius:999px; display:inline-block; white-space: nowrap; } /* Headings refinement */ h1, h2, h3 { font-weight:800; letter-spacing:-0.01em; } h4, h5, h6 { font-weight:700; letter-spacing:-0.005em; } .actions { display:flex; gap:12px; flex-wrap:wrap; } .btn { padding:12px 16px; border-radius:999px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease; } .btn-primary { background:var(--rosa); color:var(--blanco); box-shadow:var(--shadow); } .btn-primary:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.12); } .btn-ghost { border:1px solid var(--gris-200); color:var(--color-secondary); background:transparent; } .btn-ghost:hover { transform:translateY(-1px); box-shadow:var(--shadow); background:var(--color-surface); border-color:#d1d5db; } .btn:active { transform:none; } .btn:focus-visible, nav a:focus-visible { outline:2px solid var(--azul); outline-offset:2px; } .hero-img { width:100%; border-radius:var(--radius-xl); object-fit:cover; box-shadow:var(--shadow); } /* Badges debajo del hero */ .meta-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .meta-badges .badge { background:rgba(32,51,73,.06); color:#0b2540; border:1px solid var(--gris-200); padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; } /* Sections */ section { padding:56px 0; } .section-head { margin-bottom:22px; } .eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--gris-500); font-weight:800; } h2 { font-size:clamp(22px,3.6vw,34px); color:var(--azul); margin:6px 0 8px; } .lead { color:#374151; } /* Lead size for readability */ .section-head .lead { font-size:clamp(16px,1.2vw,20px); line-height:1.7; color:#1f2937; } /* Subsections & dividers */ .subsection-head { margin:34px 0 10px; } .subsection-head h3 { font-size:clamp(18px,2.6vw,24px); color:var(--azul); margin:6px 0 0; } .divider { height:1px; background:linear-gradient(90deg, transparent, var(--gris-200), transparent); border:0; margin:28px 0 8px; } /* Eslogan (modern cards) — superseded by refined styles below */ /* Definitions moved to refined Eslogan section; keep only utility pills/notes here */ .pill-list { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:10px 0 16px; list-style:none; } .pill-list li { background:#fff; border:1px solid var(--gris-200); color:#0b2540; padding:8px 12px; border-radius:999px; box-shadow:var(--shadow); } .note { background:var(--gris-100); border:1px dashed var(--gris-200); padding:12px; border-radius:12px; color:#374151; } /* Steps (concurso) */ .steps { --steps-gap:30px; --arrow-h:20px; --pad:18px; --bubble:26px; counter-reset: step; list-style:none; margin:0; padding:0; display:grid; gap:var(--steps-gap); } .step { position:relative; background:var(--color-surface); border:1px solid var(--gris-200); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); color: var(--color-text); } .step-head { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--azul); margin-bottom:6px; } .step .bubble { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; background:var(--rosa); color:#fff; font-weight:800; font-size:14px; box-shadow:0 6px 14px rgba(162,45,44,.18); } .step-body { color:var(--color-muted); } .step-files { margin-top:6px; color:#0b2540; } .step-cta { margin-top:10px; } /* Arrow connectors (vertical flow) */ .step { overflow: visible; } .step:not(:last-child)::before { content:""; position:absolute; pointer-events:none; left: 50%; transform: translateX(-50%); top: 100%; width:3px; height: calc(var(--steps-gap) - var(--arrow-h)); background: #fff; } .step:not(:last-child)::after { content:""; position:absolute; pointer-events:none; left: 50%; top: calc(100% + var(--steps-gap) - var(--arrow-h)); transform: translateX(-50%) rotate(180deg); transform-origin: 50% 50%; width: 0; height: 0; border-left: calc(var(--arrow-h) / 2) solid transparent; border-right: calc(var(--arrow-h) / 2) solid transparent; border-bottom: var(--arrow-h) solid #fff; } /* Keep one column for clarity; arrows imply sequence */ @media(min-width:900px){ .steps{ grid-template-columns:1fr; } } /* Reduce gap between Concurso sections */ #como-participar { padding-bottom:28px; } #faq { padding-top:24px; } /* Contest rules bullets styling */ .rules ul { list-style:none; margin:0; padding:0; } .rules li { position:relative; padding-left:1.25em; margin:6px 0; line-height:1.6; } .rules li::before { content:""; position:absolute; left:0; top:.58em; width:.52em; height:.52em; border-radius:999px; background:var(--rojo); box-shadow:0 0 0 2px rgba(162,45,44,.12); } /* Eslogan – mobile truncation */ .read-more { display:none; margin-top:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--gris-200); background:#fff; color:#0b2540; font-weight:800; cursor:pointer; } .read-more:hover { box-shadow:var(--shadow); } @media(max-width:620px){ .slogan-card .read-more, .slogan-manifesto .read-more { display:inline-flex; align-items:center; gap:6px; } .mobile-truncate { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:3; } .slogan-card.expanded .mobile-truncate, .slogan-manifesto.expanded .mobile-truncate { display:block; -webkit-line-clamp:unset; } } /* Eslogan – manifiesto */ .slogan-manifesto { position:relative; background:var(--color-surface); border:1px solid var(--gris-200); border-radius:var(--radius-xl); padding:0; box-shadow:var(--shadow); overflow:hidden; } .slogan-manifesto::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:linear-gradient(180deg, var(--rosa), var(--azul)); opacity:.22; border-radius:var(--radius-xl) 0 0 var(--radius-xl); } .manifesto-lead { font-weight:800; color:var(--azul); letter-spacing:-.005em; margin:0 0 8px; } .manifesto-strap { font-weight:800; color:var(--rosa); margin:10px 0 0; } /* Instagram */ .ig { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center; background:var(--color-surface); border:1px solid var(--gris-200); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); } .ig-copy h2 { margin-top:6px; } .ig p, .ig .lead { color: var(--color-text); } .ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .ig-tile { display:block; border-radius:12px; overflow:hidden; aspect-ratio:1/1; position:relative; box-shadow:0 6px 12px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease; } .ig-tile img { width:100%; height:100%; object-fit:cover; display:block; } .ig-tile:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.10); } @media(max-width:900px){ .ig{ grid-template-columns:1fr; } .ig-grid{ grid-template-columns:repeat(3,1fr);} } @media(max-width:620px){ .ig-grid{ grid-template-columns:repeat(3,1fr);} } /* 5) Typography Utilities (readability & emphasis) */ /* Drop-in wrapper for long-form content: apply to containers with text */ .prose { color: var(--color-text); line-height: 1.8; } .prose p { margin: 0 0 0.9em; color: var(--color-muted); } .prose p.lead { color: var(--color-text); font-weight: var(--fw-semibold); font-size: clamp(17px, 1.3vw, 21px); } .prose h2, .prose h3 { color: var(--color-secondary); letter-spacing: -0.005em; margin: 1.2em 0 0.4em; line-height: 1.2; } .prose h2 { font-size: clamp(22px, 3.2vw, 32px); } .prose h3 { font-size: clamp(18px, 2.6vw, 24px); } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; } .prose strong { color: var(--color-text); font-weight: var(--fw-bold); } .prose em { color: var(--color-text); } .prose ul, .prose ol { padding-left: 1.25em; margin: 0.6em 0 0.9em; } .prose li { margin: 0.3em 0; } .prose hr { height: 1px; background: var(--color-divider); border: 0; margin: 1.4em 0; } /* Inline highlight for key phrases (works on or .highlight-inline) */ mark, .highlight-inline { background: linear-gradient(to top, rgba(162,45,44,.16), rgba(162,45,44,0)); border-radius: 4px; padding: 0 .15em; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) mark, :root:not([data-theme]) .highlight-inline { background: linear-gradient(to top, rgba(248,240,216,.18), rgba(248,240,216,0)); } } :root[data-theme="dark"] mark, :root[data-theme="dark"] .highlight-inline { background: linear-gradient(to top, rgba(248,240,216,.18), rgba(248,240,216,0)); } /* Callout block for emphasis (tips, notes) */ .callout { background: var(--gris-100); border: 1px solid var(--gris-200); border-left: 3px solid var(--color-primary); border-radius: 10px; padding: 12px 14px; color: var(--color-muted); } /* Compact pill for inline emphasis */ .badge-inline { display: inline-block; background: var(--color-secondary-solid, var(--azul)); color:#fff; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-extrabold); } /* Utility to limit measure anywhere */ .measure { max-width: 68ch; } /* Inline emphasis with weight + color (apply to ) */ .emph { font-weight: var(--fw-extrabold); color: var(--color-secondary); } .emph-primary { font-weight: var(--fw-extrabold); color: var(--color-accent); } .emph-teal { font-weight: var(--fw-extrabold); color: var(--color-teal); } @media(max-width:900px){ .hero::before{ inset:-28% -26% auto 6%; height:170%; opacity:.40; -webkit-mask-image: url('/assets/images/hero-wave-mask.svg'); mask-image: url('/assets/images/hero-wave-mask.svg'); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: right top; mask-position: right top; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } } /* Hero animation keyframes */ @keyframes heroFloat { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4%, 2%, 0) scale(1.04); } 100% { transform: translate3d(-8%, 4%, 0) scale(1.06); } } /* Heavy sections: defer rendering until near viewport for better scroll perf */ .timeline-v, .ig, .events-grid { content-visibility: auto; contain-intrinsic-size: 800px; } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none !important; } } /* 6) Dark mode component tweaks (legibility) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) header { background: linear-gradient(to bottom, var(--cream-tint), transparent), rgba(17, 24, 39, 0.8); border-bottom-color: var(--gris-200); } :root:not([data-theme]) nav a:hover { background: rgba(255,255,255,0.06); } :root:not([data-theme]) nav a.active, :root:not([data-theme]) nav a[aria-current="page"] { background: rgba(255,255,255,0.08); } :root:not([data-theme]) .nav-toggle { background: var(--color-surface); color: var(--color-text); } /* Make hero SVG overlay subtler and balanced on dark */ /* Increase visibility of the SVG on dark backgrounds */ :root:not([data-theme]) .hero::before { opacity: 1; filter: none; mix-blend-mode: normal; background: radial-gradient(900px 420px at 86% 8%, var(--cream-tint), transparent 64%), radial-gradient(820px 380px at 72% 20%, rgba(162,45,44,.30), transparent 72%), radial-gradient(520px 240px at 88% 28%, rgba(229,231,235,.10), transparent 82%); } /* Hero gradient: avoid pure white on dark */ :root:not([data-theme]) .hero { background: radial-gradient(1000px 500px at 120% -10%, var(--cream-tint), transparent 60%), radial-gradient(1200px 600px at 110% -10%, rgba(162,45,44,0.10), transparent 60%), radial-gradient(800px 400px at -10% 120%, rgba(32,51,73,0.12), transparent 60%), linear-gradient(120deg, var(--color-bg), #1f2937 60%); } /* Text legibility for hard-coded dark blues/grays */ :root:not([data-theme]) .hero p, :root:not([data-theme]) .section-head .lead, :root:not([data-theme]) .slogan-card p, :root:not([data-theme]) .slogan-manifesto p, :root:not([data-theme]) .tlv-meta, :root:not([data-theme]) .tlv-card p, :root:not([data-theme]) .note { color: var(--color-muted); } /* Inputs and selects */ :root:not([data-theme]) .filters input[type="search"], :root:not([data-theme]) .filters select { background: var(--color-surface); color: var(--color-text); border-color: var(--gris-200); } :root:not([data-theme]) .filters input[type="search"]:focus, :root:not([data-theme]) .filters select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(229,231,235,.15); } /* background-image now provided via --select-chevron token */ /* Ghost buttons */ :root:not([data-theme]) .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--gris-200); } } /* Data-attribute dark mode (same tweaks as above) */ :root[data-theme="dark"] header { background: linear-gradient(to bottom, var(--cream-tint), transparent), rgba(17, 24, 39, 0.8); border-bottom-color: var(--gris-200); } :root[data-theme="dark"] nav a:hover { background: rgba(255,255,255,0.06); } :root[data-theme="dark"] nav a.active, :root[data-theme="dark"] nav a[aria-current="page"] { background: rgba(255,255,255,0.08); } :root[data-theme="dark"] .nav-toggle { background: var(--color-surface); color: var(--color-text); } :root[data-theme="dark"] .hero::before { opacity: 1; filter: none; mix-blend-mode: normal; background: radial-gradient(900px 420px at 86% 8%, var(--cream-tint), transparent 64%), radial-gradient(820px 380px at 72% 20%, rgba(162,45,44,.30), transparent 72%), radial-gradient(520px 240px at 88% 28%, rgba(229,231,235,.10), transparent 82%); } :root[data-theme="dark"] .hero { background: radial-gradient(1000px 500px at 120% -10%, var(--cream-tint), transparent 60%), radial-gradient(1200px 600px at 110% -10%, rgba(162,45,44,0.10), transparent 60%), radial-gradient(800px 400px at -10% 120%, rgba(32,51,73,0.12), transparent 60%), linear-gradient(120deg, var(--color-bg), #1f2937 60%); } :root[data-theme="dark"] .hero p, :root[data-theme="dark"] .section-head .lead, :root[data-theme="dark"] .slogan-card p, :root[data-theme="dark"] .slogan-manifesto p, :root[data-theme="dark"] .tlv-meta, :root[data-theme="dark"] .tlv-card p, :root[data-theme="dark"] .note { color: var(--color-muted); } :root[data-theme="dark"] .filters input[type="search"], :root[data-theme="dark"] .filters select { background: var(--color-surface); color: var(--color-text); border-color: var(--gris-200); } /* background-image for dark comes from --select-chevron */ :root[data-theme="dark"] .btn-ghost { background: transparent; color: var(--color-secondary); border-color: var(--gris-200); } /* Historia */ .info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .info-card { background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow); overflow:hidden; } /* Home: justify running text only on homepage */ .home p { text-align: justify; text-justify: inter-word; hyphens: auto; } .info-card summary { cursor:pointer; list-style:none; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .info-card summary::-webkit-details-marker { display:none; } .info-card h3 { margin:0; color:var(--azul); font-size:18px; } .info-card .chev { width:16px; height:16px; border:2px solid var(--gris-500); border-left:0; border-top:0; transform:rotate(45deg); transition:transform .2s ease; } .info-card[open] .chev { transform:rotate(225deg); } .info-card .panel { padding:0 16px 16px; color:var(--color-muted); } .info-card .panel p { margin:0; } /* Eslogan (readability) */ .slogan-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; } .slogan-card { background:var(--color-surface); border:1px solid var(--gris-200); border-radius:var(--radius-xl); padding:0; box-shadow:var(--shadow); display:flex; flex-direction:column; } .slogan-card h3 { font-size:clamp(20px,2.4vw,26px); color:var(--azul); margin:4px 0 10px; letter-spacing:-.005em; } .slogan-card p { font-size:clamp(16px,1.15vw,19px); line-height:1.75; color:var(--color-muted); margin:0 0 12px; text-wrap:pretty; } .slogan-card summary { cursor:pointer; list-style:none; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .slogan-card summary::-webkit-details-marker { display:none; } .slogan-card .panel { padding:20px; } .slogan-card .chev { width:16px; height:16px; border:2px solid var(--gris-500); border-left:0; border-top:0; transform:rotate(45deg); transition:transform .2s ease; } .slogan-card[open] .chev { transform:rotate(225deg); } .slogan-list { margin-top:auto; padding:0; list-style:none; display:grid; gap:8px; color:var(--color-muted); } .slogan-list li { position:relative; padding-left:1.25em; line-height:1.7; } .slogan-list li::before { content:""; position:absolute; left:0; top:.55em; width:.55em; height:.55em; border-radius:999px; background:var(--rojo); box-shadow:0 0 0 2px rgba(162,45,44,.12); } .slogan-manifesto { position:relative; background:var(--color-surface); border:1px solid var(--gris-200); border-radius:var(--radius-xl); padding:0; box-shadow:var(--shadow); overflow:hidden; } .slogan-manifesto summary { cursor:pointer; list-style:none; padding:14px 16px; display:none; align-items:center; justify-content:space-between; gap:10px; font-weight:800; color:var(--azul); } .slogan-manifesto summary::-webkit-details-marker { display:none; } .slogan-manifesto .panel { padding:24px; } .slogan-manifesto .chev { width:16px; height:16px; border:2px solid var(--gris-500); border-left:0; border-top:0; transform:rotate(45deg); transition:transform .2s ease; } .slogan-manifesto[open] .chev { transform:rotate(225deg); } .slogan-manifesto p { font-size:clamp(16px,1.15vw,19px); line-height:1.75; color:var(--color-muted); margin:0 0 10px; text-wrap:pretty; } .slogan-manifesto .manifesto-lead { font-size:clamp(18px,1.6vw,22px); line-height:1.75; color:var(--color-text); font-weight:600; } .slogan-manifesto .manifesto-strap { color:var(--azul); font-weight:700; } @media(max-width:900px){ .slogan-layout{ grid-template-columns:1fr; } .slogan-grid{ grid-template-columns:1fr; } } /* Desktop: slogan cards not collapsible, keep titles visible */ @media(min-width:901px){ .slogan-card summary{ pointer-events:none; } .slogan-card .chev{ display:none; } } /* Timeline vertical */ .timeline-v { position:relative; margin-top:12px; } .timeline-v::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--gris-200); } .tlv-item { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; } .tlv-item .tlv-card { background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:14px; } .tlv-item .tlv-card { max-width:480px; } .tlv-item.left .tlv-card { grid-column:1; justify-self:end; } .tlv-item.right .tlv-card { grid-column:2; justify-self:start; } .tlv-item.left .tlv-card { grid-column:1; } .tlv-item.right .tlv-card { grid-column:2; } .tlv-marker { position:absolute; left:50%; top:8px; transform:translate(-50%,0); width:12px; height:12px; border-radius:999px; background:var(--rosa); border:2px solid var(--blanco); box-shadow:0 0 0 2px var(--gris-200); } /* Contenedor de media con proporción fija */ .tlv-media { width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; margin-bottom:10px; background:var(--gris-100); } .tlv-media > img, .tlv-img { width:100%; height:100%; object-fit:cover; display:block; } .tlv-meta { font-size:14px; color:var(--color-muted); margin-bottom:6px; } .tlv-year { font-weight:800; color:var(--rosa); } .tlv-epoch { color:var(--color-muted); } .tlv-card h4 { margin:0 0 6px; color:var(--azul); font-size:18px; } .tlv-card p { margin:0; color:var(--color-muted); } /* Eventos */ .events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .event-card { background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--radius-lg); box-shadow:var(--shadow); } .event-card img { width:100%; aspect-ratio:16/9; object-fit:cover; } .event-body { padding:14px 16px; } .event-date { display:block; text-align:center; font-weight:900; color:var(--color-text); } /* Filtros */ .filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; align-items:center; } .filters input[type="search"], .filters select { padding:10px 12px; border:1px solid var(--gris-200); border-radius:10px; font:inherit; background: var(--color-surface); color: var(--color-text); } /* Custom dropdown styling */ .filters select { -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:36px; /* room for chevron */ min-width:180px; line-height:1.3; background-image: var(--select-chevron); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; } /* Hide legacy arrow in old Edge/IE */ .filters select::-ms-expand { display:none; } .filters select option { font:inherit; color: var(--color-text); background: var(--color-surface); } .filters select option:checked { background:var(--gris-100); } .filters input[type="search"], .filters select { transition:border-color .15s ease, box-shadow .15s ease, background-color .2s ease; } .filters input[type="search"]:hover, .filters select:hover { border-color:#d1d5db; } .filters input[type="search"]:focus, .filters select:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(32,51,73,.15); } /* (sr-only moved to Accessibility section below) */ /* Hover en tarjetas de eventos */ .event-card { transition:transform .15s ease, box-shadow .15s ease; } .event-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.10); } /* Concurso */ .contest { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; background:var(--color-surface); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); } .contest > * { min-width:0; } .contest img { border-radius:var(--radius-lg); width:100%; height:auto; object-fit:cover; object-position:center; display:block; max-height:none; align-self:start; } /* Desktop: equalize heights of media and text without distorting image */ @media(min-width:901px){ .contest { align-items: stretch; } .contest-media > img { height:100%; align-self:stretch; object-fit:cover; } } /* Prize ribbon over the contest image */ .contest-media { position: relative; } .contest-media .prize-ribbon { position: absolute; top: 10px; left: 10px; background: var(--color-secondary-solid, var(--azul)); color: #fff; padding: 6px 10px; border-radius: 999px; font-weight: var(--fw-extrabold); font-size: 12px; letter-spacing: .01em; box-shadow: var(--shadow); } @media(max-width:620px){ .contest-media .prize-ribbon { font-size: 11px; padding: 5px 8px; } } /* Prize standalone figure (not overlayed) */ /* Prize card spanning both columns */ .contest > .prize-card { grid-column: 1 / -1; background: var(--gris-100); border: 1px solid var(--gris-200); border-left: 3px solid var(--color-primary); border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow); margin-top: 14px; } .prize-card-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "content image"; gap: 16px; align-items: start; } .prize-card-img { grid-area: image; width: 100%; height: auto; max-height: clamp(180px, 28vh, 320px); display: block; border-radius: var(--radius-lg); object-fit: contain; align-self: start; } .prize-card-content { grid-area: content; align-self: start; } .prize-card-link { display: block; line-height: 0; border-radius: var(--radius-lg); } .prize-card-link:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .prize-card h3 { margin: 0 0 6px; color: var(--azul); } .prize-card .prize-features { margin: 8px 0 6px; padding-left: 1.1em; } .prize-card .prize-features li::marker { color: var(--color-primary); } .prize-description { margin: clamp(10px, 2vw, 16px) 0 0; padding-left: clamp(12px, 2vw, 18px); border-left: 3px solid var(--color-secondary); color: var(--color-muted); line-height: 1.7; text-align: left; font-style: italic; } .prize-description p { margin: 0; } .prize-card .disclaimer { margin: 6px 0 0; font-size: 12px; color: var(--color-muted); } @media(max-width:900px){ .prize-card-inner { grid-template-columns: 1fr; grid-template-areas: "content" "image"; } /* .prize-card-img { height: auto; } */ } /* Prize callout list styling */ .prize-callout .prize-features { margin: 8px 0 6px; padding-left: 1.1em; } .prize-callout .disclaimer { margin: 0; font-size: 12px; opacity: 0.8; } .rules { background:var(--gris-100); border:1px dashed var(--gris-200); padding:14px; border-radius:12px; } .contest > div > p { color: var(--color-muted); line-height: 1.75; } .badge { background:var(--color-secondary-solid, var(--azul)); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; } .contest-thanks{ margin-top: clamp(20px, 4vw, 36px); background: var(--gris-100); border: 1px solid var(--gris-200); border-radius: var(--radius-xl); padding: clamp(18px, 4vw, 28px); display: grid; gap: clamp(12px, 3vw, 18px); justify-items: center; text-align: center; } .contest-thanks-eyebrow{ font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-500); } .contest-thanks-copy{ margin: 0; max-width: min(540px, 80%); color: var(--color-muted); font-size: medium; } .contest-thanks-logos{ display: flex; gap: clamp(16px, 5vw, 40px); flex-wrap: wrap; justify-content: center; align-items: center; } .contest-thanks-logo{ height: clamp(46px, 8vw, 80px); width: auto; max-width: min(280px, 45vw); object-fit: contain; } /* Contacto */ .contact-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; } .contact-grid > * { min-width:0; } form { display:grid; gap:12px; } .field { display:grid; gap:8px; } label { font-weight:700; color:var(--azul); } input, textarea { padding:12px; border:1px solid var(--gris-200); border-radius:10px; font:inherit; } textarea { min-height:120px; } /* Contacto: botón de envío más grande y a la derecha */ #contacto .actions { align-items: center; } #contacto .actions .btn-primary { order:1; width:33.333%; margin-left:auto; justify-content:center; } /* Mensaje de estado: en una fila aparte, no empuja el botón */ #contacto #form-status { order:2; flex: 0 0 100%; margin-left:0; min-height:1.25em; text-align:right; color: var(--color-muted); } /* Garantiza que imágenes en aside de contacto no rompan el layout */ .contact-grid .event-card img { width:100%; aspect-ratio:16/9; object-fit:fill; display:block; max-height:320px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Footer */ footer { border-top:1px solid var(--gris-200); padding:28px 0; background:var(--rosa-claro); color:#444; } .footer-grid { display:flex; justify-content:center; align-items:center; } .social { display:flex; gap:14px; } /* Responsive */ @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;} .events-grid{grid-template-columns:1fr 1fr;} .contest{grid-template-columns:1fr;} .contest img{ height:auto; max-height:unset; } .contact-grid{grid-template-columns:1fr;} .slogan-grid{grid-template-columns:1fr;} } @media(max-width:620px){ .slogan-card summary, .slogan-manifesto summary { display:flex; } } @media(max-width:620px){ .events-grid{grid-template-columns:1fr;} } @media(max-width:900px){ .info-grid{grid-template-columns:1fr 1fr;} } @media(max-width:620px){ .info-grid{grid-template-columns:1fr;} } /* Fallback para navegadores sin svh */ @supports not (height: 1svh) { .hero { min-height:max(520px, calc(100vh - var(--header-h))); } } /* Sincroniza el token de altura del header en móviles muy pequeños */ @media(max-width:520px){ :root{ --header-h: 56px; } } /* (Navbar responsive consolidated in Hamburguer section below) */ /* Timeline vertical responsive */ @media(max-width:900px){ .timeline-v::before { left:24px; } .tlv-item { grid-template-columns:1fr; } .tlv-item .tlv-card { grid-column:1 !important; margin-left:48px; max-width:none; } .tlv-marker { left:24px; } } /* Animación scroll timeline */ .tlv-item { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .tlv-item.in-view { opacity:1; transform:none; } .tlv-marker { transition:transform .6s ease; } .tlv-item.in-view .tlv-marker { transform:translate(-50%,0) scale(1.1); } /* Motion safe */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto !important; } } /* Accessibility */ .skip-link { position: absolute; top: -50px; left: 0; background: var(--azul); color: #fff; padding: 8px 12px; border-radius: 0 0 8px 0; } .skip-link:focus { top: 0; } .site-banner{ background: linear-gradient(90deg, rgba(3,49,75,0.95) 0%, rgba(12,66,95,0.95) 55%, rgba(3,49,75,0.95) 100%); color: #fff; padding: 6px 0; box-shadow: 0 4px 14px rgba(0,0,0,0.1); } .site-banner-inner{ display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; max-width: 960px; margin-inline: auto; } .site-banner-eyebrow{ font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--fw-bold); opacity: 0.9; flex: 0 0 auto; } .site-banner-body{ flex: 1; min-width: 0; display: block; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,0.08); padding: 6px 16px; color: #fff; font-size: clamp(0.8rem, 2vw, 0.92rem); font-weight: var(--fw-semibold); text-decoration: none; line-height: 1.4; cursor: pointer; position: relative; } .site-banner-body:hover, .site-banner-body:focus-visible{ background: rgba(255,255,255,0.16); } .site-banner-body:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; } .site-banner-body--static{ cursor: default; background: rgba(255,255,255,0.08); pointer-events: none; } .site-banner-body--static:hover{ background: rgba(255,255,255,0.12); } .site-banner-marquee{ display: inline-block; padding-right: 48px; white-space: nowrap; animation: site-banner-scroll 30s linear infinite; font-weight: var(--fw-medium); } @media (max-width: 640px){ .site-banner{ padding: 6px 4px; } .site-banner-inner{ flex-wrap: nowrap; justify-content: flex-start; gap: 10px; } .site-banner-body{ padding: 6px 14px; } .site-banner-marquee{ animation-duration: 20s; } } @keyframes site-banner-scroll{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .site-banner-marquee{ animation: none !important; } } /* Screen-reader-only text */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Navbar responsive (hamburger) */ @media(max-width:900px){ .nav { flex-wrap:wrap; gap:10px; } .brand img { height:30px; } .nav-toggle { display:inline-flex; align-items:center; gap:6px; } /* Hide menu by default on mobile */ #primary-nav { display:none; width:100%; } .nav.open #primary-nav { display:block; } /* Stack items vertically */ #primary-nav ul { flex-direction:column; align-items:flex-start; gap:10px; padding:10px 0; } #primary-nav a { padding:10px 12px; } } @media(max-width:520px){ .nav { min-height:56px; } #primary-nav a { padding:8px 10px; } .slogan-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; } .slogan-layout > .slogan-grid { grid-column:1 / -1; } .slogan-manifesto { grid-column:1 / -1; } } /*section de logos instituciones*/ /* ===== Logos instituciones (Responsive con Grid) ===== */ /* ===== Bloque de logos ===== */ #logos-instituciones{ display: flex; justify-content: center; padding: clamp(24px, 6vw, 56px) 0; } #logos-instituciones .logos-card{ background: var(--blanco); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(24px, 5vw, 48px); width: min(100%, 1200px); display: grid; gap: clamp(20px, 4vw, 32px); justify-items: center; text-align: center; } #logos-instituciones .logos-card-highlight{ display: grid; gap: clamp(16px, 4vw, 24px); justify-items: center; width: 100%; } #logos-instituciones .logos-card-eyebrow{ font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-500); } #logos-instituciones .logos-card-title{ font-size: clamp(1.25rem, 2.3vw, 1.9rem); color: var(--color-secondary); margin: 0; } #logos-instituciones .logos-card-ally{ display: grid; place-items: center; gap: 8px; } #logos-instituciones .logos-card-ally-eyebrow{ font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-500); } #logos-instituciones .logos-card-ally-logos{ display: flex; gap: clamp(12px, 4vw, 32px); flex-wrap: wrap; justify-content: center; align-items: center; } #logos-instituciones .logos-card-separator{ width: min(120px, 40%); height: 1px; background: linear-gradient(90deg, transparent, rgba(3,49,75,0.4), transparent); margin: clamp(12px, 3vw, 24px) auto; } #logos-instituciones .logos-card-grid{ display: grid; gap: 16px 24px; justify-items: center; /* cada logo centrado en su celda */ align-items: center; width: 100%; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } #logos-instituciones .logos-card-grid .logo, #logos-instituciones .logo--ally{ height: clamp(56px, 9vw, 110px); width: auto; max-width: 100%; object-fit: contain; } #logos-instituciones .logo--featured{ grid-column: 1 / -1; width: clamp(260px, 60vw, 520px); max-height: clamp(90px, 12vw, 160px); } @media (prefers-color-scheme: dark){ :root:not([data-theme]) #logos-instituciones .logos-card{ background: #fff; color: #111; } :root:not([data-theme]) #logos-instituciones .logos-card-title{ color: #03314b; } :root:not([data-theme]) #logos-instituciones .logos-card-eyebrow{ color: #6b7280; } :root:not([data-theme]) #logos-instituciones .logos-card-ally-eyebrow{ color: #6b7280; } } :root[data-theme="dark"] #logos-instituciones .logos-card{ background: #fff; color: #111; } :root[data-theme="dark"] #logos-instituciones .logos-card-title{ color: #03314b; } :root[data-theme="dark"] #logos-instituciones .logos-card-eyebrow{ color: #6b7280; } :root[data-theme="dark"] #logos-instituciones .logos-card-ally-eyebrow{ color: #6b7280; } /* ===== Distribución por breakpoints ===== */ /* Móvil angosto: 3 por fila */ @media (max-width: 480px){ #logos-instituciones .logos-card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } #logos-instituciones .logos-card{ margin-inline: 16px; padding-inline: clamp(16px, 6vw, 24px); } } /* Tablet: 4 por fila */ @media (min-width: 481px) and (max-width: 1023px){ #logos-instituciones .logos-card-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Desktop: EXACTO 6 por fila */ @media (min-width: 1024px){ #logos-instituciones .logos-card-grid{ grid-template-columns: repeat(6, minmax(120px, 1fr)); } }