/* UltraRanger Labs and UltraRanger Designs: one stylesheet, two lights. The page sets --light on <html> (green for Labs,
   amber for Designs); everything else is the night of the logo. */
@font-face { font-family: "Fraunces"; src: url("/fuentes/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fuentes/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --night: #0B1A13; --deep: #07120D; --forest: #123826; --pine: #1D6644; --leaf: #3E9E63; --moss: #7CC67E;
  --ultra: #B8F36A; --ultra-light: #EAFFCB; --amber: #FFC24A; --amber-light: #FFEBB0;
  --cream: #FFF5E6; --paper: #F4ECDC; --bark: #B07A45;
  --light: var(--ultra); --light-soft: var(--ultra-light); --light-rgb: 184, 243, 106;
  --text: var(--cream); --text-soft: rgba(255, 245, 230, .74); --text-faint: rgba(255, 245, 230, .5);
  --line: rgba(255, 245, 230, .12); --glass: rgba(11, 26, 19, .58);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1140px; --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
html[data-house="designs"] { --light: var(--amber); --light-soft: var(--amber-light); --light-rgb: 255, 194, 74; }

* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--text); font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* nothing may widen the page on a phone (the rings round the logo reach past the screen) */
html, body { overflow-x: clip; }
.seccion { overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
::selection { background: rgba(var(--light-rgb), .35); color: var(--cream); }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------------------------------------ the top bar */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--gutter); transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s;
}
/* a little shade behind the bar, so the stars never sit on its words */
.barra::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(5, 15, 10, .55), rgba(5, 15, 10, 0)); transition: opacity .5s; }
.barra.is-scrolled::before { opacity: 0; }
.barra.is-scrolled { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); padding-block: 10px; box-shadow: 0 1px 0 var(--line); }
.barra-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.barra-marca img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--light-rgb), .45), 0 0 18px rgba(var(--light-rgb), .18); }
.barra-marca span { font: 600 19px/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40; letter-spacing: -.01em; }
.barra-marca b { font: 900 11px/1 var(--sans); letter-spacing: .3em; color: var(--light); margin-left: 6px; text-transform: uppercase; vertical-align: 2px; }
.barra nav { display: flex; align-items: center; gap: 4px; }
.barra nav a {
  position: relative; padding: 8px 12px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--text-soft);
  border-radius: 999px; transition: color .25s, background .25s;
}
.barra nav a:hover { color: var(--cream); background: rgba(255, 245, 230, .07); }
.barra nav a.pastilla { color: var(--deep); background: var(--light); box-shadow: 0 0 24px rgba(var(--light-rgb), .35); }
.barra nav a.pastilla:hover { background: var(--light-soft); }
@media (max-width: 720px) {
  .barra nav a:not(.pastilla) { display: none; }
  .barra-marca span { font-size: 17px; }
}
.barra nav a.pastilla { white-space: nowrap; }
/* the narrowest phones: the name and the button both fit on one line, in every language */
@media (max-width: 420px) {
  .barra { gap: 8px; }
  .barra-marca { gap: 8px; }
  .barra-marca img { width: 34px; height: 34px; }
  .barra-marca span { font-size: 16px; }
  .barra-marca b { letter-spacing: .2em; margin-left: 4px; font-size: 10px; }
  .barra nav a.pastilla { padding: 8px 12px; font-size: 14px; }
}

/* the languages: in the bar on a computer, over the landscape on a phone, and at the foot */
.idiomas { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(5, 15, 10, .35); }
.idiomas a { padding: 5px 9px !important; border-radius: 999px; font: 900 12px/1 var(--sans) !important; letter-spacing: .08em; text-decoration: none; color: var(--text-faint) !important; background: none !important; }
.idiomas a:hover { color: var(--cream) !important; }
.idiomas a[aria-current="true"] { color: var(--deep) !important; background: var(--light) !important; }
.barra nav .idiomas { margin-right: 8px; }
.idiomas-hero { display: none; position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(18px, 4vh, 40px); opacity: 0; transition: opacity 1s 3.2s; }
.hero.is-ready .idiomas-hero { opacity: 1; }
.pie .idiomas { margin-left: auto; }
@media (max-width: 720px) {
  .barra nav .idiomas { display: none; }
  .idiomas-hero { display: inline-flex; }
}
/* French quotes round what you'd say to Bewie */
html[lang="fr"] .pide li::before { content: "« "; }
html[lang="fr"] .pide li::after { content: " »"; }

/* ------------------------------------------------------------------------------------------------ the landscape */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #050F0A; isolation: isolate; }
.escena { position: absolute; inset: -3.5%; }
/* on a tall screen the landscape comes closer and its empty foreground goes below the fold */
@media (max-aspect-ratio: 4/5) { .escena { bottom: -22%; } }
.capa { position: absolute; inset: 0; will-change: transform; }
.capa img, .vida { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 56%) 50%; }
.vida { pointer-events: none; }
/* how it arrives: the sky first, then the dawn comes up, and the ridges rise one after the other */
.capa img { opacity: 0; transform: translate3d(0, 6%, 0); transition: opacity 1.6s var(--ease-out), transform 2.2s var(--ease-out); }
.capa.c-cielo img { transform: none; transition-duration: 2s; }
.capa.c-alba img { transform: scale(1, .55); transform-origin: 50% 57%; transition: opacity 2.4s var(--ease-out) .25s, transform 3s var(--ease-out) .25s; }
.capa.c-lejos img { transition-delay: .45s; }
.capa.c-medio img { transition-delay: .6s; }
.capa.c-cerca img { transition-delay: .75s; }
.capa.c-frente img { transform: translate3d(0, 10%, 0); transition-delay: .9s; }
/* the ranger comes last, and stands where the screen has room for him */
.capa.c-ranger img { transform: translate3d(0, 5%, 0); transition-delay: 1.15s; transition-duration: 1.8s, 2.4s; }
.c-ranger img { display: none; }
.c-ranger .r-ancho { display: block; }
@media (max-aspect-ratio: 5/4) { .c-ranger .r-ancho { display: none; } .c-ranger .r-medio { display: block; } }
/* on a phone he stands under the buttons; the arrow would land on him, and the languages go up under the bar */
@media (max-aspect-ratio: 4/5) {
  .c-ranger .r-medio { display: none; } .c-ranger .r-alto { display: block; }
  .hero .bajar { display: none; }
  .idiomas-hero { top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; left: auto; right: var(--gutter); }
}
.hero.is-ready .capa img { opacity: 1; transform: none; }
.hero.is-ready .capa.c-alba img { animation: respira 9s ease-in-out 3.2s infinite; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
/* a soft veil at the bottom so the page grows out of the forest floor */
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(to bottom, rgba(11, 26, 19, 0), var(--night)); z-index: 2; pointer-events: none; }

.hero-texto {
  position: absolute; z-index: 3; left: 50%; top: var(--word-y, 40%); transform: translate(-50%, -50%);
  width: min(92vw, 900px); text-align: center; will-change: transform, opacity;
}
.palabra { margin: 0; font-weight: 400; line-height: 1; }
.palabra .u {
  display: block; font: 600 clamp(54px, 10.4vw, 148px)/.95 var(--serif); letter-spacing: -.015em;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144; color: var(--cream);
  text-shadow: 0 6px 50px rgba(5, 15, 10, .6);
  opacity: 0; filter: blur(14px); transform: translateY(18px) scale(.985);
  transition: opacity 1.6s var(--ease-out) 1.05s, filter 1.8s var(--ease-out) 1.05s, transform 2s var(--ease-out) 1.05s;
}
.palabra .d {
  display: inline-flex; gap: .42em; margin-top: .32em; padding-left: .42em;
  font: 900 clamp(20px, 3.6vw, 52px)/1.1 var(--sans); text-transform: uppercase; color: var(--light);
}
.palabra .d span { opacity: .08; text-shadow: none; transition: opacity .5s, text-shadow .9s; }
.hero.is-ready .palabra .u { opacity: 1; filter: none; transform: none; }
/* the letters light up one by one, like the lamps of the tower */
.hero.is-ready .palabra .d span { opacity: 1; text-shadow: 0 0 22px rgba(var(--light-rgb), .55), 0 0 2px rgba(var(--light-rgb), .8); }
.hero.is-ready .palabra .d span:nth-child(1) { transition-delay: 1.9s; }
.hero.is-ready .palabra .d span:nth-child(2) { transition-delay: 2.05s; }
.hero.is-ready .palabra .d span:nth-child(3) { transition-delay: 2.2s; }
.hero.is-ready .palabra .d span:nth-child(4) { transition-delay: 2.35s; }
.hero.is-ready .palabra .d span:nth-child(5) { transition-delay: 2.5s; }
.hero.is-ready .palabra .d span:nth-child(6) { transition-delay: 2.65s; }
.hero.is-ready .palabra .d span:nth-child(7) { transition-delay: 2.8s; }
.lema {
  margin: clamp(16px, 2.4vw, 26px) auto 0; max-width: 34ch; font-size: clamp(17px, 1.9vw, 22px); font-weight: 600; color: var(--cream);
  text-shadow: 0 2px 18px rgba(5, 15, 10, .9), 0 0 2px rgba(5, 15, 10, .6);
  opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease-out) 2.4s, transform 1.2s var(--ease-out) 2.4s;
}
.botones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .botones { justify-content: center; margin-top: clamp(20px, 3vw, 30px); opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease-out) 2.65s, transform 1.2s var(--ease-out) 2.65s; }
.hero.is-ready .lema, .hero.is-ready .botones { opacity: 1; transform: none; }
/* over the dawn the plain button needs the night behind it */
.hero .boton:not(.boton-luz) { background: rgba(5, 15, 10, .5); border-color: rgba(255, 245, 230, .3); }
.hero .boton:not(.boton-luz):hover { background: rgba(5, 15, 10, .66); }

/* the arrow that says there's more: the ranger's own, nocked and pointing down */
.bajar { position: absolute; z-index: 3; left: 50%; bottom: clamp(18px, 4vh, 40px); translate: -50% 0; width: 44px; height: 64px; display: grid; place-items: center; color: var(--light); opacity: 0; transition: opacity 1s 3.2s; }
.hero.is-ready .bajar { opacity: .9; }
.bajar svg { width: 18px; height: 56px; animation: flecha 2.6s var(--ease) 3.4s infinite; filter: drop-shadow(0 0 8px rgba(var(--light-rgb), .6)); }
@keyframes flecha { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }

/* ------------------------------------------------------------------------------------------------ buttons */
.boton {
  --b: rgba(255, 245, 230, .1);
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  font: 800 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none; color: var(--cream);
  background: var(--b); border: 1px solid rgba(255, 245, 230, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .4s;
  overflow: hidden; isolation: isolate;
}
.boton:hover { transform: translateY(-2px); border-color: rgba(var(--light-rgb), .7); box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 4px rgba(var(--light-rgb), .08); }
.boton i { font-style: normal; transition: transform .35s var(--ease); }
.boton:hover i { transform: translate(3px, -2px); }
.boton-luz { color: var(--deep); background: var(--light); border-color: transparent; box-shadow: 0 0 34px rgba(var(--light-rgb), .35); }
.boton-luz:hover { background: var(--light-soft); box-shadow: 0 12px 40px rgba(var(--light-rgb), .35), 0 0 0 5px rgba(var(--light-rgb), .14); }
/* a glint crosses the bright button now and then, like light along a bowstring */
.boton-luz::after { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg) translateX(-260%); animation: destello 7s var(--ease) 4s infinite; z-index: -1; }
@keyframes destello { 0%, 82% { transform: skewX(-18deg) translateX(-260%); } 100% { transform: skewX(-18deg) translateX(720%); } }

/* ------------------------------------------------------------------------------------------------ sections */
main { position: relative; z-index: 1; }
.seccion { position: relative; padding: clamp(84px, 12vw, 150px) 0; }
.seccion + .seccion { padding-top: clamp(40px, 6vw, 80px); }
/* the first one grows out of the forest floor, already dark */
main > .seccion:first-child { padding-top: clamp(40px, 6vw, 90px); }
.sobre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 900 13px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--light); }
.sobre::before { content: ""; width: 26px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
h2 { margin: 0 0 22px; font: 500 clamp(38px, 5.6vw, 72px)/1.02 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144; text-wrap: balance; }
h2 em { font-style: italic; color: var(--light); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
h3 { margin: 0 0 8px; font: 600 24px/1.2 var(--serif); font-variation-settings: "SOFT" 50, "opsz" 36; }
p { margin: 0 0 1em; }
.entrada { font-size: clamp(18px, 1.7vw, 21px); color: var(--text-soft); max-width: 56ch; }
.entrada strong { color: var(--cream); font-weight: 700; }

/* appearing as you get to them */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms), filter 1s var(--ease-out) var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* the night between sections: a few stars, and the light of the house low on the horizon */
.noche { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.noche::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 245, 230, .7), transparent 60%), radial-gradient(1px 1px at 28% 62%, rgba(255, 245, 230, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 30%, rgba(255, 245, 230, .6), transparent 60%), radial-gradient(1px 1px at 64% 78%, rgba(255, 245, 230, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 82% 22%, rgba(255, 245, 230, .65), transparent 60%), radial-gradient(1px 1px at 91% 56%, rgba(255, 245, 230, .5), transparent 60%),
    radial-gradient(1px 1px at 6% 84%, rgba(255, 245, 230, .4), transparent 60%), radial-gradient(1.2px 1.2px at 56% 8%, rgba(255, 245, 230, .55), transparent 60%);
  background-size: 640px 520px;
}

/* ------------------------------------------------------------------------------------------------ Bewie */
.bewie { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 6vw, 90px); }
.gota { position: relative; aspect-ratio: 1; width: min(100%, 470px); justify-self: center; }
.gota-agua {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0A1530;
  box-shadow: inset 0 0 0 1px rgba(160, 240, 235, .25), inset 0 -30px 60px rgba(0, 0, 0, .35), 0 40px 90px rgba(0, 0, 0, .45), 0 0 120px rgba(60, 210, 200, .12);
  animation: flota 7s ease-in-out infinite;
}
.gota-agua video, .gota-agua img { width: 100%; height: 100%; object-fit: cover; }
/* the glass of the drop: a highlight on top, and a ring that slowly turns */
.gota-agua::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 40% at 32% 18%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(80% 60% at 70% 100%, rgba(60, 210, 200, .16), transparent 60%); pointer-events: none; }
.gota-anillo { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(160, 240, 235, .22); animation: gira 60s linear infinite; }
.gota-anillo::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #8FF0E6; box-shadow: 0 0 14px #8FF0E6; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-14px) rotate(.6deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
.pide { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
.pide li {
  padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--cream);
  background: rgba(255, 245, 230, .06); border: 1px solid var(--line);
}
.pide li::before { content: "“"; color: var(--light); margin-right: 2px; }
.pide li::after { content: "”"; color: var(--light); margin-left: 1px; }
.letra-chica { font-size: 14px; color: var(--text-faint); }
.letra-chica a { color: var(--text-soft); text-underline-offset: 3px; text-decoration-color: rgba(255, 245, 230, .3); }
.letra-chica a:hover { color: var(--light); }
.de-marca { margin-top: 26px; font: 800 14px/1 var(--sans); color: var(--text-soft); letter-spacing: .02em; }
.de-marca b { color: #8FF0E6; }
@media (max-width: 880px) {
  .bewie { grid-template-columns: 1fr; }
  .gota { order: -1; width: min(78vw, 360px); }
}

/* the second app: the sky it writes on */
.app-dos { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(30px, 5vw, 80px); margin-top: clamp(70px, 9vw, 120px); }
.app-dos h3 { font: 500 clamp(32px, 4.2vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144; margin-bottom: 16px; }
.app-dos h3 em { font-style: italic; color: #FFD27A; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.fuegos { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #1A2340 0%, #0A0F22 55%, #05070F 100%); box-shadow: inset 0 0 0 1px rgba(255, 245, 230, .1), 0 40px 90px rgba(0, 0, 0, .45); }
.fuegos canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 880px) { .app-dos { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ the river: from one house to the other */
.rio { position: relative; height: clamp(300px, 46vw, 560px); overflow: hidden; margin: clamp(30px, 5vw, 60px) 0 0; border-block: 1px solid var(--line); background: #050F0A; }
.rio img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; will-change: transform; }
.rio::before, .rio::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 12%; z-index: 2; background: linear-gradient(to right, var(--night), transparent); pointer-events: none; }
.rio::after { inset: 0 0 0 auto; background: linear-gradient(to left, var(--night), transparent); }
.rio-texto { position: absolute; z-index: 3; inset: auto 0 clamp(18px, 4vw, 40px); display: flex; justify-content: center; pointer-events: none; }
.rio-texto span { font: 900 12px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; background: rgba(5, 15, 10, .55); backdrop-filter: blur(6px); color: var(--cream); border: 1px solid var(--line); }
.rio-texto span b { color: var(--amber); }
html[data-house="designs"] .rio-texto span b { color: var(--ultra); }

/* ------------------------------------------------------------------------------------------------ designs */
.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(34px, 5vw, 56px); }
.cabeza .entrada { margin: 0; }
.temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.tema {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none;
  background: linear-gradient(160deg, rgba(255, 245, 230, .07), rgba(255, 245, 230, .02)); border: 1px solid var(--line);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s, opacity 1s var(--ease-out) var(--d, 0ms), filter 1s var(--ease-out) var(--d, 0ms);
}
.tema.reveal { transform: perspective(1100px) translateY(26px); }
.tema.reveal.is-in { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); }
.tema::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--light-rgb), .16), transparent 45%); }
.tema:hover { border-color: rgba(var(--light-rgb), .45); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.tema:hover::after { opacity: 1; }
.tema-foto { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #0E1E17; }
.tema-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tema:hover .tema-foto img { transform: scale(1.045); }
.tema-texto { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; }
.tema-nombre { font: 600 23px/1.2 var(--serif); font-variation-settings: "SOFT" 50, "opsz" 36; color: var(--cream); }
.tema-linea { color: var(--text-soft); font-size: 16px; line-height: 1.5; }
.tema-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--text-faint); }
.tema-ir { color: var(--light); }
.tema-ir i { font-style: normal; display: inline-block; transition: transform .35s var(--ease); }
.tema:hover .tema-ir i { transform: translate(3px, -3px); }
@media (max-width: 760px) { .temas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ the ranger */
.ranger { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 7vw, 100px); }
.medalla { position: relative; width: min(100%, 480px); aspect-ratio: 1; justify-self: center; }
.medalla-disco { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--light-rgb), .3), 0 40px 100px rgba(0, 0, 0, .5), 0 0 140px rgba(var(--light-rgb), .1); }
.medalla .logo-svg { width: 100%; height: 100%; }
.medalla .logo-svg .astro { transition: opacity .8s var(--ease), filter .8s; }
.medalla .logo-svg > circle, .medalla .logo-svg > path { transition: opacity .8s var(--ease); }
/* the sky goes quiet and only the three molecules keep shining */
.medalla.ver .logo-svg > circle { opacity: .12; }
.medalla.ver .logo-svg .astro { filter: drop-shadow(0 0 4px rgba(var(--light-rgb), 1)) drop-shadow(0 0 10px rgba(var(--light-rgb), .6)) brightness(2); }
.medalla-halo { position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(var(--light-rgb), .14); }
.medalla-halo:nth-child(2) { inset: -18%; border-style: dashed; border-color: rgba(var(--light-rgb), .08); animation: gira 120s linear infinite reverse; }
.astro-nombre {
  position: absolute; z-index: 2; translate: -50% -50%; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font: 800 12px/1 var(--sans); letter-spacing: .08em; color: var(--deep); background: var(--light);
  box-shadow: 0 0 20px rgba(var(--light-rgb), .5); opacity: 0; scale: .7; transition: opacity .5s var(--ease), scale .6s var(--ease); pointer-events: none;
}
.medalla.ver .astro-nombre { opacity: 1; scale: 1; }
.medalla.ver .astro-nombre:nth-of-type(2) { transition-delay: .12s; }
.medalla.ver .astro-nombre:nth-of-type(3) { transition-delay: .24s; }
.boton-astro { margin-top: 8px; cursor: pointer; font-family: var(--sans); }
.boton-astro[aria-pressed="true"] { border-color: var(--light); color: var(--light); }
@media (max-width: 880px) { .ranger { grid-template-columns: 1fr; } .medalla { width: min(80vw, 380px); } }

/* ------------------------------------------------------------------------------------------------ the free theme */
.regalo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.regalo figure { margin: 0; }
.regalo figure img { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border: 1px solid var(--line); }
.regalo figcaption { margin-top: 12px; font-size: 14px; color: var(--text-faint); }
.etiqueta { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--light); color: var(--light); font: 900 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 20px rgba(var(--light-rgb), .2); }
.descargas { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.descargas a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-radius: 14px;
  background: rgba(255, 245, 230, .05); border: 1px solid var(--line); text-decoration: none; overflow: hidden;
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.descargas a:hover, .descargas a:focus-visible { background: rgba(var(--light-rgb), .08); border-color: rgba(var(--light-rgb), .6); transform: translateX(4px); }
.descargas .que { font-weight: 800; }
.descargas .que small { display: block; font-weight: 600; color: var(--text-faint); font-size: 14px; }
.descargas .peso { display: flex; align-items: center; gap: 10px; color: var(--light); font-weight: 800; font-size: 14px; white-space: nowrap; }
.descargas .flecha { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(var(--light-rgb), .5); overflow: hidden; }
.descargas .flecha svg { width: 12px; height: 14px; transition: transform .45s var(--ease); }
.descargas a:hover .flecha svg { animation: baja .9s var(--ease) infinite; }
@keyframes baja { 0% { transform: translateY(-18px); } 45%, 60% { transform: translateY(0); } 100% { transform: translateY(18px); } }
.nota { color: var(--text-faint); font-size: 15px; }
.primero { background: rgba(var(--light-rgb), .12); border-color: rgba(var(--light-rgb), .45) !important; }
@media (max-width: 880px) { .regalo { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ say hello */
.hola { text-align: center; }
.hola h2 { margin-inline: auto; }
.correo {
  display: inline-flex; align-items: center; gap: 14px; margin: 10px 0 30px; padding: 10px 10px 10px 26px; border-radius: 999px;
  border: 1px solid rgba(var(--light-rgb), .4); background: rgba(var(--light-rgb), .06); font: 600 clamp(17px, 2.4vw, 26px)/1 var(--serif);
  font-variation-settings: "SOFT" 50, "opsz" 36; text-decoration: none; transition: border-color .3s, background .3s; max-width: 100%;
}
.correo:hover { border-color: var(--light); background: rgba(var(--light-rgb), .1); }
.correo a { text-decoration: none; overflow-wrap: anywhere; }
.copiar { cursor: pointer; border: 0; padding: 12px 16px; border-radius: 999px; background: var(--light); color: var(--deep); font: 900 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: background .3s, transform .3s var(--ease); }
.copiar:hover { background: var(--light-soft); transform: scale(1.04); }
.redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 20px auto 0; text-align: left; }
.red { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 245, 230, .03); }
.red-quien { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 19px/1.2 var(--serif); }
.red-quien img { width: 40px; height: 40px; border-radius: 50%; }
.red-quien small { display: block; font: 700 13px/1.3 var(--sans); color: var(--text-faint); }
.red ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.red a { display: inline-flex; gap: 6px; padding: 8px 13px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none; color: var(--text-soft); background: rgba(255, 245, 230, .06); transition: color .25s, background .25s; }
.red a:hover { color: var(--deep); background: var(--light); }
.red.designs a:hover { background: var(--amber); }
.red.labs a:hover { background: var(--ultra); }
@media (max-width: 640px) { .redes { grid-template-columns: 1fr; } .correo { padding-left: 18px; gap: 10px; } }

/* ------------------------------------------------------------------------------------------------ the foot */
.pie { position: relative; padding: 60px 0 40px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 14px; }
.pie .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pie a { color: var(--text-soft); text-decoration: none; }
.pie a:hover { color: var(--light); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-marca { display: flex; align-items: center; gap: 12px; }
.pie-marca img { width: 30px; height: 30px; border-radius: 50%; }

/* ------------------------------------------------------------------------------------------------ for those who'd rather it stays still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}