:root {
  --navy: #071b2d;
  --navy-2: #0d2b43;
  --paper: #f4f5f1;
  --white: #fff;
  --red: #c9363f;
  --green: #4f7a4f;
  --earth: #b18a60;
  --ink: #102231;
  --muted: #62707a;
  --line: rgba(16, 34, 49, .14);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
img { display: block; max-width: 100%; }
button, select { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .7rem 1rem; color: var(--navy); background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.eyebrow { margin: 0 0 .8rem; color: #dfe8ec; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.dark { color: var(--red); }
.eyebrow.light { color: #85ac83; }
.section { width: min(1240px, calc(100% - 3rem)); margin-inline: auto; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; display: flex; align-items: center; width: 100%; padding: 1.15rem 3vw; color: #fff; border-bottom: 1px solid rgba(255,255,255,.16); }
.brand { display: flex; gap: .75rem; align-items: center; text-decoration: none; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand span { display: grid; line-height: 1.2; }
.brand b { font-size: .95rem; }
.brand small { margin-top: .25rem; color: #b6c6cf; font-size: .72rem; letter-spacing: .05em; }
.site-header nav { display: flex; gap: 2rem; margin-left: auto; font-size: .9rem; }
.site-header nav a { text-underline-offset: .4rem; text-decoration-color: transparent; }
.site-header nav a:hover, .site-header nav a:focus-visible { text-decoration-color: var(--red); }
.menu-button { display: none; margin-left: auto; padding: .5rem .8rem; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.45); }

.hero { position: relative; display: grid; grid-template-columns: minmax(320px, 47%) 1fr; min-height: 760px; padding: 9rem 5vw 7.5rem; overflow: hidden; color: #fff; background: var(--navy); }
.hero-backdrop { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08)), repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.12) 25%); }
.hero::after { content: ""; position: absolute; right: -8vw; bottom: -14rem; width: 40rem; height: 40rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(255,255,255,.025), 0 0 0 12rem rgba(255,255,255,.018); }
.hero-content { position: relative; z-index: 2; align-self: center; max-width: 680px; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 8vw, 8.2rem); font-weight: 400; letter-spacing: -.055em; line-height: .78; }
.hero h1 span { color: #8ab286; }
.hero h1 sup { display: inline-block; color: var(--red); font-family: var(--sans); font-size: clamp(.75rem, 1.2vw, 1rem); font-weight: 700; letter-spacing: .16em; vertical-align: top; transform: translate(.3rem, .3rem); }
.hero-phrase { margin: 2.5rem 0 1rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.16; }
.hero-intro { max-width: 570px; color: #c0cdd5; }
.primary-link { display: inline-flex; gap: 1rem; align-items: center; margin-top: 1.3rem; padding: .75rem 0; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); }
.hero-feature { position: relative; z-index: 1; align-self: center; justify-self: end; width: min(43vw, 600px); height: min(67vh, 610px); margin-left: 3rem; background: #17364d; box-shadow: 1.4rem 1.4rem 0 rgba(201,54,63,.9); }
.hero-feature img { width: 100%; height: 100%; object-fit: cover; }
.hero-feature figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 4rem 1.25rem 1.2rem; background: linear-gradient(transparent, rgba(7,27,45,.9)); }
.hero-feature b { display: block; font-family: var(--serif); font-size: 1.35rem; }
.hero-feature span { color: #d7e0e4; font-size: .8rem; }
.hero-counts { position: absolute; z-index: 2; bottom: 1.5rem; left: 5vw; display: flex; gap: 2.5rem; }
.hero-counts div { display: grid; }
.hero-counts strong { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }
.hero-counts span { color: #99acb8; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.podium-section { position: relative; padding-block: 7.5rem 6.5rem; overflow: hidden; color: #fff; background: #0b2637; }
.podium-section::before { content: ""; position: absolute; inset: 0; opacity: .65; pointer-events: none; background: radial-gradient(circle at 50% 6%, rgba(177,138,96,.22), transparent 30%), linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.05) 50%, transparent 50.1%); }
.podium-inner { position: relative; z-index: 1; }
.podium-heading { max-width: 760px; margin: 0 auto 5rem; text-align: center; }
.podium-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.podium-heading > p:last-child { max-width: 620px; margin: 1.25rem auto 0; color: #b9c9d1; font-size: 1.05rem; }
.podium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: end; max-width: 1120px; margin-inline: auto; }
.podium-card { --medal: #b8bec5; position: relative; display: grid; grid-template-rows: minmax(320px, 47vh) auto; min-width: 0; padding: 0; overflow: visible; color: #fff; text-align: left; background: #102f48; border: 1px solid rgba(255,255,255,.13); cursor: zoom-in; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.22); transition: transform .35s ease, border-color .35s ease; }
.podium-card.place-1 { --medal: #e6bf55; grid-column: 2; grid-row: 1; transform: translateY(-2rem); }
.podium-card.place-2 { --medal: #c8d0d7; grid-column: 1; grid-row: 1; }
.podium-card.place-3 { --medal: #bd7b4f; grid-column: 3; grid-row: 1; }
.podium-card:hover, .podium-card:focus-visible { z-index: 2; border-color: var(--medal); transform: translateY(-.5rem); }
.podium-card.place-1:hover, .podium-card.place-1:focus-visible { transform: translateY(-2.5rem); }
.podium-image { position: relative; min-height: 0; overflow: hidden; background: #061824; }
.podium-image::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(4,19,31,.78)); }
.podium-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease, opacity .5s ease; }
.podium-card:hover .podium-image img, .podium-card:focus-visible .podium-image img { opacity: .9; transform: scale(1.035); }
.podium-medal { position: absolute; z-index: 2; top: -1.2rem; left: 1.2rem; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; color: #071b2d; background: var(--medal); border: .35rem solid #0b2637; border-radius: 50%; box-shadow: 0 .7rem 1.5rem rgba(0,0,0,.28); }
.podium-medal strong { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.podium-medal span { margin-top: -.45rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.podium-copy { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; align-items: end; min-height: 205px; padding: 1.4rem 1.35rem 1.3rem; border-top: 4px solid var(--medal); }
.podium-place { margin: 0; color: var(--medal); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.podium-code { grid-column: 2; grid-row: 1; color: #9eb2bd; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.podium-copy h3 { grid-column: 1 / -1; margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 400; line-height: 1.02; }
.podium-author { grid-column: 1 / -1; margin: 0; color: #cbd7dd; font-size: .82rem; line-height: 1.35; }
.podium-score { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: baseline; margin-top: .45rem; }
.podium-score strong { color: var(--medal); font-family: var(--serif); font-size: 2.15rem; font-weight: 400; line-height: 1; }
.podium-score span { color: #94aab5; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.podium-note { max-width: 780px; margin: 2.25rem auto 0; color: #91a7b2; font-size: .83rem; text-align: center; }

.participants { padding-block: 6rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading h2, .gallery-topline h2, .about h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.section-heading > p { max-width: 410px; margin: 0 0 .45rem; color: var(--muted); }
.participant-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.participant-card { position: relative; min-height: 315px; padding: 0; overflow: hidden; color: #fff; text-align: left; background: var(--navy); border: 0; cursor: pointer; }
.participant-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, opacity .45s ease; }
.participant-card::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(7,27,45,.96)); }
.participant-card:hover img, .participant-card:focus-visible img { opacity: .82; transform: scale(1.035); }
.participant-card .card-copy { position: absolute; z-index: 1; right: 1.15rem; bottom: 1rem; left: 1.15rem; }
.participant-card .card-code { color: #9bc297; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.participant-card h3 { margin: .35rem 0 .2rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; line-height: 1.05; }
.participant-card p { margin: .25rem 0 0; color: #d5dfe4; font-size: .78rem; line-height: 1.35; }

.gallery-section { padding-block: 6rem 7rem; color: #fff; background: var(--navy); }
.gallery-topline { display: flex; justify-content: space-between; align-items: end; margin-bottom: 2rem; }
.gallery-topline p:last-child { color: #a9bac4; }
.filters { display: grid; grid-template-columns: 1.1fr .65fr 1.2fr auto; gap: .75rem; align-items: end; margin-bottom: 2rem; padding-block: 1.4rem; border-block: 1px solid rgba(255,255,255,.15); }
.filters label { display: grid; gap: .4rem; color: #bac9d1; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.filters select, .filters button { min-height: 46px; padding: .65rem .8rem; color: #fff; background: var(--navy-2); border: 1px solid rgba(255,255,255,.22); border-radius: 0; }
.filters select { width: 100%; text-transform: none; }
.filters option { color: var(--ink); background: #fff; }
.filters button { color: #d7e0e4; cursor: pointer; }
.filters button:hover { border-color: var(--red); }
.gallery-grid { columns: 3 280px; column-gap: 1rem; }
.photo-card { position: relative; display: block; width: 100%; margin: 0 0 1rem; padding: 0; break-inside: avoid; overflow: hidden; color: #fff; text-align: left; background: #102f48; border: 0; cursor: zoom-in; }
.photo-card img { width: 100%; height: auto; transition: transform .45s ease, opacity .45s ease; }
.photo-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(4,18,30,.94)); }
.photo-card:hover img, .photo-card:focus-visible img { opacity: .82; transform: scale(1.025); }
.photo-card .photo-caption { position: absolute; z-index: 1; right: 1rem; bottom: .85rem; left: 1rem; }
.photo-card .photo-code { margin: 0; color: #9ac096; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.photo-card h3 { margin: .25rem 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.1; }
.photo-card .photo-author { margin: 0; color: #d3dee4; font-size: .76rem; }
.empty-state { padding: 4rem 1rem; color: #c0ced6; text-align: center; border: 1px dashed rgba(255,255,255,.25); }

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; padding-block: 7rem; }
.about-lead > p:last-child { max-width: 600px; color: var(--muted); font-size: 1.08rem; }
.theme-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.theme-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.theme-list span { color: var(--red); font-size: .78rem; font-weight: 700; }
.theme-list b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.15; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 3rem; align-items: center; padding: 3rem 5vw; color: #d9e1e5; background: #04131f; border-top: 4px solid var(--red); }
.footer-brand { display: flex; gap: 1rem; align-items: center; }
.footer-brand p { margin: 0; font-size: .88rem; }
.footer-theme { display: grid; text-align: right; }
.footer-theme span { color: #85ad82; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-theme b { margin-top: .25rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; line-height: 1.2; }
.cuentamundos { width: 125px; height: auto; padding: .5rem; background: #fff; }

.lightbox { width: min(1420px, 96vw); max-width: none; height: 94vh; max-height: none; padding: 0; color: #fff; background: #04131f; border: 0; overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(5px); }
.lightbox figure { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); height: 100%; margin: 0; }
.lightbox-image-wrap { display: grid; place-items: center; min-width: 0; padding: 2.2rem 3.5rem; background: #020a10; }
.lightbox-image-wrap img { max-width: 100%; max-height: calc(94vh - 4.4rem); object-fit: contain; }
.lightbox figcaption { padding: 4.8rem 2.8rem 2rem; overflow-y: auto; border-left: 1px solid rgba(255,255,255,.12); }
.lightbox figcaption h2 { margin: .4rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; line-height: .98; }
.lightbox .photo-code { color: #90b58c; font-size: .75rem; font-weight: 700; letter-spacing: .13em; }
.lightbox-author { color: #d2dde3; font-weight: 700; }
.lightbox dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin-block: 1.5rem; padding-block: 1.1rem; color: #bdcbd3; font-size: .84rem; border-block: 1px solid rgba(255,255,255,.13); }
.lightbox dt { color: #8297a4; }
.lightbox dd { margin: 0; }
.lightbox-description { color: #c6d1d7; }
.lightbox-index { color: #738a98; font-size: .78rem; }
.lightbox-close { position: absolute; z-index: 4; top: 1rem; right: 1rem; width: 44px; height: 44px; color: #fff; background: rgba(7,27,45,.85); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; cursor: pointer; }
.lightbox-nav { position: absolute; z-index: 4; top: 50%; width: 46px; height: 62px; color: #fff; font-size: 2rem; background: rgba(7,27,45,.78); border: 1px solid rgba(255,255,255,.24); cursor: pointer; transform: translateY(-50%); }
.lightbox-nav.previous { left: .7rem; }
.lightbox-nav.next { right: calc(30% + .7rem); }

:focus-visible { outline: 3px solid #f1c75a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 8.5rem; }
  .hero-feature { width: 74%; height: 430px; margin: 3rem 0 1rem auto; }
  .hero-counts { position: relative; bottom: auto; left: auto; margin-top: 3rem; }
  .participant-strip { grid-template-columns: repeat(2, 1fr); }
  .podium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .podium-card.place-1 { grid-column: 1 / -1; grid-row: 1; width: min(100%, 470px); margin-inline: auto; transform: none; }
  .podium-card.place-2 { grid-column: 1; grid-row: 2; }
  .podium-card.place-3 { grid-column: 2; grid-row: 2; }
  .podium-card.place-1:hover, .podium-card.place-1:focus-visible { transform: translateY(-.5rem); }
  .filters { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; gap: 3rem; }
  .lightbox figure { grid-template-columns: 1fr; grid-template-rows: minmax(46vh, 58vh) 1fr; overflow-y: auto; }
  .lightbox-image-wrap { padding: 3rem 2.5rem 1rem; }
  .lightbox-image-wrap img { max-height: 52vh; }
  .lightbox figcaption { padding: 2rem; overflow: visible; border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .lightbox-nav.next { right: .7rem; }
  footer { grid-template-columns: 1fr auto; }
  .footer-theme { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (max-width: 680px) {
  .section { width: min(100% - 2rem, 1240px); }
  .site-header { flex-wrap: wrap; padding: .8rem 1rem; }
  .menu-button { display: block; }
  .site-header nav { display: none; flex-basis: 100%; flex-direction: column; gap: .4rem; margin-top: .8rem; padding: .8rem; background: rgba(4,19,31,.96); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: .5rem; }
  .hero { padding: 7.5rem 1rem 3rem; }
  .hero h1 { font-size: clamp(3.7rem, 18vw, 6rem); }
  .hero-feature { width: calc(100% - 1rem); height: 370px; box-shadow: .75rem .75rem 0 var(--red); }
  .hero-counts { gap: 1.4rem; justify-content: space-between; }
  .hero-counts strong { font-size: 1.45rem; }
  .podium-section { padding-block: 5.5rem 4.5rem; }
  .podium-heading { margin-bottom: 3rem; }
  .podium-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .podium-card, .podium-card.place-1, .podium-card.place-2, .podium-card.place-3 { grid-column: 1; width: 100%; margin: 0; transform: none; }
  .podium-card.place-1 { grid-row: 1; }
  .podium-card.place-2 { grid-row: 2; }
  .podium-card.place-3 { grid-row: 3; }
  .podium-card { grid-template-rows: minmax(310px, 56vh) auto; }
  .podium-card:hover, .podium-card:focus-visible, .podium-card.place-1:hover, .podium-card.place-1:focus-visible { transform: none; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 1rem; }
  .participants { padding-block: 4.5rem; }
  .participant-strip { grid-template-columns: 1fr; }
  .participant-card { min-height: 360px; }
  .gallery-section { padding-block: 4.5rem; }
  .gallery-topline { display: block; }
  .gallery-topline p:last-child { margin-top: 1rem; }
  .filters { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .about { padding-block: 5rem; }
  footer { grid-template-columns: 1fr; gap: 2rem; }
  .footer-theme { grid-column: auto; grid-row: auto; }
  .lightbox { width: 100vw; height: 100dvh; }
  .lightbox figure { grid-template-rows: minmax(42vh, 52vh) 1fr; }
  .lightbox-image-wrap { padding: 4rem .5rem .5rem; }
  .lightbox figcaption { padding: 1.5rem; }
  .lightbox-nav { top: 27vh; }
}