@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");
@import url("fontawesome-all.min.css");

/*
  Astral by HTML5 UP
  html5up.net | @ajlkn
  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* ===================== */
/* Variables y utilidades */
/* ===================== */
:root{
  --brand-orange: #FF6600;
  --brand-orange-dark: #FF5722;
  --ink: #0A0A0A;
  --muted: #777;
  --panel-grad-start: #f2f2f2;
  --panel-grad-end: #ffffff;
  --bevel: rgba(0,0,0,0.08);
  --shadow-1: 0 4px 6px rgba(0,0,0,0.1), 0 12px 20px rgba(0,0,0,0.2);
}

/* Fuentes personalizadas */
.bungee-spice-regular {
  font-family: "Bungee Spice", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.zilla-slab-highlight-regular {
  font-family: "Zilla Slab Highlight", serif;
  font-weight: 400;
  font-style: normal;
}
.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 300;
  font-style: normal;
}
.rubik-doodle-shadow-regular {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-weight: 400;
  font-style: normal;
}
.tourney-subtitle {
  font-family: "Tourney", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


/* Animaciones */
.animate-up { animation: fadeUp 2.5s ease-out forwards; opacity: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
#home header h1.animate-up{ animation-delay: .05s; }
#home header h3.animate-up{ animation-delay: .2s; }
#home header p.animate-up{  animation-delay: .35s; }
@media (prefers-reduced-motion: reduce){ .animate-up{ animation: none !important; opacity: 1 !important; } }

/* ================= */
/* Reset y normalice */
/* ================= */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; }
mark { background-color: transparent; color: inherit; }
input::-moz-focus-inner { border: 0; padding: 0; }
input, select, textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; }

/* ======= */
/* Grid    */
/* ======= */
.row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; }
.row > * { box-sizing: border-box; }
.row.gtr-uniform > * > :last-child { margin-bottom: 0; }
.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }
.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }
.row > .imp { order: -1; }
.row > .col-1 { width: 8.33333%; } .row > .off-1 { margin-left: 8.33333%; }
.row > .col-2 { width: 16.66667%; } .row > .off-2 { margin-left: 16.66667%; }
.row > .col-3 { width: 25%; } .row > .off-3 { margin-left: 25%; }
.row > .col-4 { width: 33.33333%; } .row > .off-4 { margin-left: 33.33333%; }
.row > .col-5 { width: 41.66667%; } .row > .off-5 { margin-left: 41.66667%; }
.row > .col-6 { width: 50%; } .row > .off-6 { margin-left: 50%; }
.row > .col-7 { width: 58.33333%; } .row > .off-7 { margin-left: 58.33333%; }
.row > .col-8 { width: 66.66667%; } .row > .off-8 { margin-left: 66.66667%; }
.row > .col-9 { width: 75%; } .row > .off-9 { margin-left: 75%; }
.row > .col-10 { width: 83.33333%; } .row > .off-10 { margin-left: 83.33333%; }
.row > .col-11 { width: 91.66667%; } .row > .off-11 { margin-left: 91.66667%; }
.row > .col-12 { width: 100%; } .row > .off-12 { margin-left: 100%; }

/* Gutters */
.row.gtr-0 { margin-top: 0em; margin-left: 0em; }
.row.gtr-0 > * { padding: 0em 0 0 0em; }
.row.gtr-0.gtr-uniform { margin-top: 0em; }
.row.gtr-0.gtr-uniform > * { padding-top: 0em; }
.row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; }
.row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; }
.row.gtr-25.gtr-uniform { margin-top: -0.3125em; }
.row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; }
.row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; }
.row.gtr-50 > * { padding: 0.625em 0 0 0.625em; }
.row.gtr-50.gtr-uniform { margin-top: -0.625em; }
.row.gtr-50.gtr-uniform > * { padding-top: 0.625em; }
.row { margin-top: -1.25em; margin-left: -1.25em; }
.row > * { padding: 1.25em 0 0 1.25em; }
.row.gtr-uniform { margin-top: -1.25em; }
.row.gtr-uniform > * { padding-top: 1.25em; }
.row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; }
.row.gtr-150 > * { padding: 1.875em 0 0 1.875em; }
.row.gtr-150.gtr-uniform { margin-top: -1.875em; }
.row.gtr-150.gtr-uniform > * { padding-top: 1.875em; }
.row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; }
.row.gtr-200 > * { padding: 2.5em 0 0 2.5em; }
.row.gtr-200.gtr-uniform { margin-top: -2.5em; }
.row.gtr-200.gtr-uniform > * { padding-top: 2.5em; }

/* Breakpoints Grid (xlarge, large, medium, small) */
@media screen and (max-width: 1680px) {
  .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; }
  .row > * { box-sizing: border-box; }
  .row.gtr-uniform > * > :last-child { margin-bottom: 0; }
  .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; }
  .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; }
  .row > .imp-xlarge { order: -1; }
  .row > .col-1-xlarge { width: 8.33333%; } .row > .off-1-xlarge { margin-left: 8.33333%; }
  .row > .col-2-xlarge { width: 16.66667%; } .row > .off-2-xlarge { margin-left: 16.66667%; }
  .row > .col-3-xlarge { width: 25%; } .row > .off-3-xlarge { margin-left: 25%; }
  .row > .col-4-xlarge { width: 33.33333%; } .row > .off-4-xlarge { margin-left: 33.33333%; }
  .row > .col-5-xlarge { width: 41.66667%; } .row > .off-5-xlarge { margin-left: 41.66667%; }
  .row > .col-6-xlarge { width: 50%; } .row > .off-6-xlarge { margin-left: 50%; }
  .row > .col-7-xlarge { width: 58.33333%; } .row > .off-7-xlarge { margin-left: 58.33333%; }
  .row > .col-8-xlarge { width: 66.66667%; } .row > .off-8-xlarge { margin-left: 66.66667%; }
  .row > .col-9-xlarge { width: 75%; } .row > .off-9-xlarge { margin-left: 75%; }
  .row > .col-10-xlarge { width: 83.33333%; } .row > .off-10-xlarge { margin-left: 83.33333%; }
  .row > .col-11-xlarge { width: 91.66667%; } .row > .off-11-xlarge { margin-left: 91.66667%; }
  .row > .col-12-xlarge { width: 100%; } .row > .off-12-xlarge { margin-left: 100%; }
  .row.gtr-0 { margin-top: 0em; margin-left: 0em; }
  .row.gtr-0 > * { padding: 0em 0 0 0em; }
  .row.gtr-0.gtr-uniform { margin-top: 0em; }
  .row.gtr-0.gtr-uniform > * { padding-top: 0em; }
  .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; }
  .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; }
  .row.gtr-25.gtr-uniform { margin-top: -0.3125em; }
  .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; }
  .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; }
  .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; }
  .row.gtr-50.gtr-uniform { margin-top: -0.625em; }
  .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; }
  .row { margin-top: -1.25em; margin-left: -1.25em; }
  .row > * { padding: 1.25em 0 0 1.25em; }
  .row.gtr-uniform { margin-top: -1.25em; }
  .row.gtr-uniform > * { padding-top: 1.25em; }
  .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; }
  .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; }
  .row.gtr-150.gtr-uniform { margin-top: -1.875em; }
  .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; }
  .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; }
  .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; }
  .row.gtr-200.gtr-uniform { margin-top: -2.5em; }
  .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; }
}
@media screen and (max-width: 1280px) {
  /* ... (idéntico a tu base para large) ... */
}
@media screen and (max-width: 980px) {
  /* ... (idéntico a tu base para medium) ... */
}
@media screen and (max-width: 736px) {
  /* ... (idéntico a tu base para small) ... */
}

/* ===== */
/* Basic */
/* ===== */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  background-image: url("images/overlay.png"), url("images/bg.png");
  background-repeat: repeat, no-repeat;
  background-size: auto, 110% 110%; /* antes era 100% */
  background-attachment: fixed;
  overflow-y: scroll;
  animation: drone-fly 25s ease-in-out infinite alternate;
}

@keyframes drone-fly {
  0% {
    background-position: 0% 0%, center center;
    background-size: auto, 110% 110%;
  }
  50% {
    background-position: 0% 0%, center 40%;
    background-size: auto, 115% 115%;
  }
  100% {
    background-position: 0% 0%, center top;
    background-size: auto, 110% 110%;
  }
}


body.is-preload *, body.is-preload *:before, body.is-preload *:after {
  animation: none !important; transition: none !important;
}

body, input, textarea, select {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400; color: #777777; font-size: 20pt; line-height: 1.75em;
  font-style: normal;
}

@media screen and (max-width: 1680px){ body, input, textarea, select{ font-size: 15pt; } }
@media screen and (max-width: 1280px){ body, input, textarea, select{ font-size: 14pt; } }
@media screen and (max-width: 736px){ body, input, textarea, select{ font-size: 12pt; } }
@media screen and (max-width: 360px){ body, input, textarea, select{ font-size: 11pt; } }

strong, b, h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #363636; }
h1 { font-size: 2.5em; letter-spacing: -0.015em; }
h2 { font-size: 2.0em; letter-spacing: -0.015em; }
h3, h4, h5, h6 { font-size: 1.5em; letter-spacing: -0.015em; }
@media screen and (max-width: 736px) {
  h1 { font-size: 1.75em; } h2 { font-size: 1.375em; } h3, h4, h5, h6 { font-size: 1em; }
}
blockquote { border-left: solid 0.5em #ddd; padding: 1em 0 1em 2em; font-style: italic; }
em, i { font-style: italic; }
hr { border: 0; border-top: solid 1px #ddd; padding: 1.5em 0 0 0; margin: 1.75em 0 0 0; }
sub { position: relative; top: 0.5em; font-size: 0.8em; }
sup { position: relative; top: -0.5em; font-size: 0.8em; }
br.clear { clear: both; }
p, ul, ol, dl, table, blockquote, form { margin-bottom: 2em; }

/* Table */
table { width: 100%; }
table.default tbody tr { border-bottom: solid 1px #f4f4f4; }
table.default td { padding: 0.5em 1em; }
table.default th { text-align: left; font-weight: 400; padding: 0.5em 1em; }
table.default thead { border-bottom: solid 2px #f4f4f4; }

/* Form */
form label { display: block; font-weight: 400; color: #363636; margin: 0 0 1em 0; }
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
  border: 0; background: #f4f4f4; padding: 0.75em; width: 100%;
  transition: background-color .25s ease-in-out;
}
form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus {
  background: #f8f8f8;
}
form input[type="text"], form input[type="email"], form input[type="password"], form select { line-height: 1.35em; }
form ::-webkit-input-placeholder { color: #999; } form :-moz-placeholder { color: #999; }
form ::-moz-placeholder { color: #999; } form :-ms-input-placeholder { color: #999; }

/* Sections / Article */
section, article { margin-bottom: 3em; }
section > :last-child, section:last-child, article > :last-child, article:last-child { margin-bottom: 0; }
header { margin: 0 0 1.5em 0; }
header > p { margin: 0.5em 0 0 0; color: #aaa; }
@media screen and (max-width: 736px) { header { margin: 0 0 1em 0; } }

/* Images */
.image { display: inline-block; }
.image img { display: block; width: 100%; }
.image.fit { display: block; width: 100%; }
.image.featured { display: block; width: 100%; margin: 0 0 2em 0; }
.image.left { float: left; margin: 0 2em 2em 0; }
.image.centered { display: block; margin: 0 0 2em 0; }
.image.centered img { margin: 0 auto; width: auto; }

/* Tarjetas para las grillas de Notas (#work) y Cartografía (#maps) */
#text .image.fit,
#maps .image.fit {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;             /* recorta la imagen al radio */
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

#text .image.fit img,
#maps .image.fit img {
  display: block;
  width: 100%;
  transition: transform .35s ease;
  will-change: transform;
}

/* Hover "eleva" la tarjeta y hace un leve zoom en la imagen */
#text .image.fit:hover,
#maps .image.fit:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

#text .image.fit:hover img,
#maps .image.fit:hover img {
  transform: scale(1.04);
}

/* Accesibilidad: enfoque visible si navegas con teclado */
#text .image.fit:focus-within,
#maps .image.fit:focus-within {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(255,102,0,0.18), 0 10px 20px rgba(0,0,0,0.18);
}

/* Respeta preferencias del usuario si prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  #text .image.fit,
  #maps .image.fit {
    transition: none;
  }
  #text .image.fit img,
  #maps .image.fit img {
    transition: none;
  }
}


/* Buttons */
input[type="button"], input[type="submit"], input[type="reset"], button, .button {
  transition: background-color .25s ease-in-out;
  display: inline-block; background-color: #222; color: #fff; border: 0; cursor: pointer; outline: 0; padding: .7em 1.5em;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover { background-color: #333; }
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active, .button:active { background-color: #444; }
input[type="button"].alt, input[type="submit"].alt, input[type="reset"].alt, button.alt, .button.alt { background-color: #777; }
input[type="button"].alt:hover, input[type="submit"].alt:hover, input[type="reset"].alt:hover, button.alt:hover, .button.alt:hover { background-color: #888; }
input[type="button"].alt:active, input[type="submit"].alt:active, input[type="reset"].alt:active, button.alt:active, .button.alt:active { background-color: #999; }
input[type="button"].small, input[type="submit"].small, input[type="reset"].small, button.small, .button.small { font-size: .75em; }
input[type="button"].large, input[type="submit"].large, input[type="reset"].large, button.large, .button.large { font-size: 1.25em; padding: .5em 1.25em; }
input[type="button"].xlarge, input[type="submit"].xlarge, input[type="reset"].xlarge, button.xlarge, .button.xlarge { font-size: 1.5em; padding: .5em 1.25em; }
@media screen and (max-width: 736px){ input[type="button"], input[type="submit"], input[type="reset"], button, .button { width: 100%; } }

/* Lists */
ul { list-style: disc; padding-left: 1em; } ul li { padding-left: .5em; }
ol { list-style: decimal; padding-left: 1.25em; } ol li { padding-left: .25em; }

/* Actions */
ul.actions { list-style: none; padding-left: 0; }
ul.actions li { display: inline-block; padding-left: 0; margin: 0 0 0 .5em; }
ul.actions li:first-child { margin-left: 0; }
@media screen and (max-width: 736px) {
  ul.actions li { display: block; margin: .75em 0 0 0; }
  ul.actions li:first-child { margin-top: 0; }
}

/* Icons */
.icon { text-decoration: none; position: relative; }
.icon:before {
  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
  display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1;
  text-transform: none !important; font-family: 'Font Awesome 5 Free'; font-weight: 400;
}
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }
.icon:before { line-height: inherit; }
.icon > .label { display: none; }

/* Nav */
#nav { text-align: center; height: 4.25em; cursor: default; }
#nav a {
  position: relative; display: inline-block; color: var(--brand-orange);
  width: 1em; height: 1em; line-height: .9em; font-size: 2.5em;
  margin: 0 .25em; opacity: .85; outline: 0;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.35));
  transition: opacity .25s ease-in-out, color .25s ease-in-out;
}
#nav a.icon:before { padding-right: 0; }
#nav a:before { font-size: 0.8em; }
#nav a:after {
  content: ''; display: block; position: absolute;
  left: 50%; bottom: -0.75em; margin-left: -0.5em;
  border-bottom: solid 0em #ffffff; border-left: solid 0.5em transparent; border-right: solid 0.5em transparent;
  transition: border-bottom-width .25s ease-in-out;
}
#nav a span {
  display: block; position: absolute; background: var(--ink); color: #fff;
  top: -2.75em; font-size: .3em; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,.5);
  height: 2.25em; line-height: 2.25em; left: 50%; border-radius: 5px; opacity: 0;
  transition: opacity .25s ease-in-out; width: 7.5em; margin-left: -2.75em;
  box-shadow: var(--shadow-1);
}
#nav a span:after {
  content: ''; position: absolute; bottom: -0.4em; left: 50%; margin-left: -0.6em;
  border-top: solid 0.6em var(--ink); border-left: solid 0.6em transparent; border-right: solid 0.6em transparent;
}
#nav a:hover { opacity: 1.0; color: var(--brand-orange-dark); }
#nav a:hover span { opacity: 1.0; }
#nav a.active { opacity: 1.0; }
#nav a.active:after { border-bottom-width: 0.5em; }
@media screen and (max-width: 980px) { #nav a span { display: none; } }

/* Wrapper */
#wrapper {
  width: 45em; margin: 0 auto; min-height: 100vh; max-width: 100%; padding: 4em 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 1s ease-in-out;
}
body.is-preload #wrapper { opacity: 0; }
@media screen and (max-width: 1280px) {
  #wrapper { padding: 3em 0; max-width: calc(100% - 6em); }
}
@media screen and (max-width: 980px) {
  #wrapper { padding: 1.5em 0; max-width: calc(100% - 8em); }
}
@media screen and (max-width: 736px) {
  #wrapper { padding: 1em 0; max-width: calc(100% - 2em); }
}
@media screen and (max-width: 360px) {
  #wrapper { padding: 1em 0; max-width: 100%; }
}

/* Main */
#main {
  position: relative; overflow: hidden; width: 100%;
  background: linear-gradient(145deg, var(--panel-grad-start), var(--panel-grad-end));
  border: 1px solid var(--bevel); box-shadow: var(--shadow-1);
  transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
  border-radius: 20px;
}
#main:before {
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
#main > .panel {
  transition: opacity 0.25s ease-in-out; margin-bottom: 0; position: relative;
  padding: 3.5em 2.5em 2.5em 2.5em; width: 100%;
}
#main > .panel.inactive { opacity: 0; }
@media screen and (max-width: 736px) {
  #main > .panel { padding: 2em 1.5em 1.5em 1.5em; }
}
#main > .panel.intro {
  padding: 0; height: 20em; display: flex; flex-direction: row; align-items: center;
}
#main > .panel.intro .pic {
  text-decoration: none; position: relative; flex-grow: 0; flex-shrink: 0; width: 17em; height: 100%;
}
#main > .panel.intro .pic:before {
  content: ''; position: absolute; top: 0; left: 0; background: url("images/overlay.png"); width: 100%; height: 100%; z-index: 1;
}
#main > .panel.intro .pic img {
  position: relative; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
#main > .panel.intro .pic .arrow {
  display: block; position: absolute; right: 0; top: 50%; margin-top: -1.375em; width: 2.75em; height: 2.75em;
  background: rgba(0, 0, 0, 0.75); color: #ffffff; text-align: center; line-height: 2.75em; font-size: 1.5em; z-index: 1;
  transition: width .15s ease-in-out, padding-right .15s ease-in-out;
}
#main > .panel.intro .pic .arrow:before { position: relative; padding-right: 0; top: 0.125em; }
#main > .panel.intro .pic .arrow span { display: block; text-indent: -9999px; }
#main > .panel.intro .pic:hover .arrow { width: 3em; padding-right: 0.25em; }
#main > .panel.intro header {
  flex-grow: 1; flex-shrink: 1; padding: 3.5em 2.5em; margin-bottom: 0; width: 100%;
}
#main > .panel.intro header h1 { line-height: 1.25em; margin-bottom: 0; }
#main > .panel.intro header p { letter-spacing: -0.015em; font-size: 1.25em; margin: 0.25em 0 0 0; }

/* Centrar títulos de secciones */
#main article header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main article header h2 {
  margin-bottom: 0.3em;
  order: 1;
}

/* Subtítulos con tipografía Tourney */
#main article header h3.tourney-subtitle {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.3em;
  color: var(--muted);
  letter-spacing: 0.02em;
  order: 2;
}

@media screen and (max-width: 736px) {
  #main article header h3.tourney-subtitle {
    font-size: 1em;
    margin-bottom: 0.8em;
  }
}


@media screen and (max-width: 980px) {
  #main > .panel.intro { flex-direction: column; height: auto; }
  #main > .panel.intro .pic { height: 25em; width: 100%; }
  #main > .panel.intro header { padding: 4em; text-align: center; }
}
@media screen and (max-width: 736px) {
  #main > .panel.intro .pic { height: 20em; }
  #main > .panel.intro header { padding: 2.75em 2em 2.5em 2em; }
  #main > .panel.intro header p { font-size: 1em; margin: 0.25em 0 0 0; }
}

/* Footer */
#footer { color: rgba(255, 255, 255, 0.45); text-align: center; padding: 2em 0 0 0; font-size: 0.75em; }
#footer a { color: rgba(255, 255, 255, 0.65); transition: color .25s ease-in-out; }
#footer a:hover { color: white; }
#footer .copyright { list-style: none; padding-left: 0; }
#footer .copyright li {
  display: inline-block; padding-left: 1em; margin-left: 1em; border-left: solid 1px rgba(255, 255, 255, 0.25); line-height: 1;
}
#footer .copyright li:first-child { padding-left: 0; margin-left: 0; border-left: 0; }
@media screen and (max-width: 736px) {
  #footer .copyright li { padding-left: 0.5em; margin-left: 0.5em; }
}

/* =============================== */
/* Mejores visuales finales (extra) */
/* =============================== */

/* H2 ya NO tiene línea naranja */
.panel header h2{
  position: relative; 
  display: inline-block; 
  padding-bottom: 0;
  margin-bottom: 0.3em;
}

/* La línea naranja ahora va DEBAJO del subtítulo h3 */
.panel header h3.tourney-subtitle {
  position: relative;
  display: inline-block;
  padding-bottom: .25em;
}

.panel header h3.tourney-subtitle:after{
  content:''; 
  position:absolute; 
  left:0; 
  bottom:-.25em; 
  width:100%; 
  height:4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark));
  opacity: .85;
}

/* Botones/inputs pulidos */
.button, input[type="submit"]{
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-orange-dark));
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  border-radius: 10px;
  color:#fff;
}
form input[type="text"], form input[type="email"], form textarea{
  border-radius:10px; border:1px solid rgba(0,0,0,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
form input:focus, form textarea:focus{
  outline:0; background:#fff; border-color:var(--brand-orange); box-shadow: 0 0 0 4px rgba(255,102,0,.15);
}


/* ---------------------------------- */
/* Glow de imagen del hero            */
/* ---------------------------------- */
@keyframes pulse-glow {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 10px rgba(255, 102, 0, 0.28),   /* var(--brand-orange) */
      0 0 20px rgba(255, 87, 34, 0.28);   /* var(--brand-orange-dark) */
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 25px rgba(255, 102, 0, 0.58),
      0 0 40px rgba(255, 87, 34, 0.58);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 10px rgba(255, 102, 0, 0.28),
      0 0 20px rgba(255, 87, 34, 0.28);
  }
}

#home .jumplink.pic img {
  animation: pulse-glow 4s infinite ease-in-out;
  border-radius: 12px;
  will-change: transform, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
  #home .jumplink.pic img { animation: none; }
}

/* ---------------------------------- */
/* Glow blanco en icono activo del nav*/
/* ---------------------------------- */
@keyframes pulse-glow-white {
  0% {
    text-shadow: 
      0 0 6px rgba(255, 255, 255, 0.4), 
      0 0 12px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 
      0 0 14px rgba(255, 255, 255, 0.9), 
      0 0 28px rgba(255, 255, 255, 0.6);
  }
  100% {
    text-shadow: 
      0 0 6px rgba(255, 255, 255, 0.4), 
      0 0 12px rgba(255, 255, 255, 0.3);
  }
}

#nav a.active {
  animation: pulse-glow-white 2.5s infinite ease-in-out;
  color: var(--brand-orange) !important;
  opacity: 1 !important;
}


/* === Modal — versión afinada === */

/* fondo */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
}

/* caja del modal: mismo ancho que #main (≈ ancho del wrapper) */
.modal-content{
  background: linear-gradient(145deg, var(--panel-grad-start), var(--panel-grad-end));
  color: var(--ink);
  margin: auto;
  padding: 2.5em 3em;
  width: 45em;                 /* igual que #wrapper */
  max-width: calc(100% - 6em); /* mismo margen lateral que el wrapper en desktop */
  max-height: calc(100vh - 6em);
  overflow: auto;
  border: 1px solid var(--bevel);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
  animation: fadeIn .35s ease;
  position: relative;          /* para posicionar el botón de cierre */
}

/* breakpoints para que siga el mismo comportamiento del wrapper */
@media screen and (max-width: 980px){
  .modal-content{ max-width: calc(100% - 8em); }
}
@media screen and (max-width: 736px){
  .modal-content{ max-width: calc(100% - 2em); padding: 1.75em 1.5em; }
}
@media screen and (max-width: 360px){
  .modal-content{ max-width: 100%; padding: 1.25em; border-radius: 14px; }
}

/* botón de cierre: tamaño compacto (NO más recuadro enorme) */
/* Botón cerrar */
.modal .close{
  position:absolute;
  top:12px; 
  right:12px;
  width:36px; 
  height:36px;             
  display:flex; 
  align-items:center; 
  justify-content:center;  /* centra la X horizontal y vertical */
  border:0; 
  border-radius:10px;
  background: rgba(0,0,0,.6);
  color:#fff; 
  font-size:1.25rem; 
  line-height:1;
  cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.modal .close:hover{ 
  background: rgba(0,0,0,.8); 
  transform: translateY(-1px); 
}

/* Título "Sobre mí": misma tipografía/estética que h2 de secciones */
.modal-content h2{
  text-align:center;
  margin: 0 0 .75em;
  font-family: "Rubik Doodle Shadow", system-ui;  /* igual que secciones */
  font-weight: 400;
}
.modal-content h2::after{
  content:'';
  display:block;
  width:120px; height:4px;
  margin:.35em auto 0;
  border-radius:2px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark));
}

/* Texto del modal: interlineado más cerrado y tamaño -1 "punto" aprox */
.modal-content p{
  font-size: .95em;         /* ~5% menor que el cuerpo */
  line-height: 1.6;         /* más compacto que 1.75 */
  color:#333;
}

/* animación entrada (ya usada) */
@keyframes fadeIn{ from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }



/* ===== Glitch con VIDEO (intro) ===== */
:root{
  /* ya usas estas variables; las aprovecho para estilos */
  --brand-orange: #FF6600;
  --ink: #0A0A0A;
}

#intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;               /* negro para fundido inicial */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity .6s ease;
  /* bloquea interacción/scroll mientras está visible */
}

#intro-overlay.hide{
  opacity: 0;
  pointer-events: none;
}

#intro-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mezcla para que luzca "por encima" del fondo */
  mix-blend-mode: screen;          /* prueba también lighten/overlay según tu clip */
  filter: contrast(115%) saturate(120%) brightness(105%);
}

/* Botón "Saltar intro" */
#skip-intro{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: .45rem .7rem;
  font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#skip-intro:hover{
  background: rgba(0,0,0,.75);
  border-color: rgba(255,255,255,.4);
}

/* Si el usuario prefiere menos movimiento, no mostramos el intro */
@media (prefers-reduced-motion: reduce){
  #intro-overlay{ display: none !important; }
}