/* Estilos de index.html (portafolio principal). */
:root {
  --green:#6CBF57;
  --green-light:#6CBF57;
  --green-deep:#6CBF57;
  --amber:#F2A93B;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glass-hi:rgba(255,255,255,.55);
}
:root[data-theme="day"] {
  --bg:#0C1310;
  --bg-2:#0A110E;
  --ink:#F8F5EA;
  --ink-soft:rgba(243,240,228,.72);
  --glass:linear-gradient(145deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 46%,rgba(108,191,87,.09) 100%);
  --glass-edge:rgba(255,255,255,.22);
  --hairline:rgba(255,255,255,.16);
  --tag-bg:rgba(108,191,87,.14);
  --tag-fg:#CFE9C4;
  --tag-edge:rgba(108,191,87,.34);
  --scrim:linear-gradient(105deg,rgba(10,18,12,.9) 0%,rgba(10,18,12,.62) 42%,rgba(10,18,12,.06) 72%),
    linear-gradient(to top,rgba(10,18,12,.6),transparent 45%);
  --grain:.05;
}
:root[data-theme="night"] {
  --bg:#0A1120;
  --bg-2:#060B16;
  --ink:#F3F0E4;
  --ink-soft:rgba(243,240,228,.62);
  --glass:linear-gradient(145deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 46%,rgba(108,191,87,.09) 100%);
  --glass-edge:rgba(255,255,255,.22);
  --hairline:rgba(255,255,255,.16);
  --tag-bg:rgba(108,191,87,.1);
  --tag-fg:#6CBF57;
  --tag-edge:rgba(108,191,87,.3);
  --scrim:linear-gradient(105deg,rgba(4,8,16,.92) 0%,rgba(4,8,16,.7) 42%,rgba(4,8,16,.12) 72%),
    linear-gradient(to top,rgba(4,8,16,.7),transparent 45%);
  --grain:.08;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  background:var(--bg);
  transition:background-color .9s var(--ease);
}
body {
  background:transparent;
  color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .9s var(--ease),color .9s var(--ease);
}
img {
  max-width:100%;
  display:block;
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:var(--green-light);
}
ul {
  list-style:none;
}
::selection {
  background:rgba(108,191,87,.35);
}
[data-layer] {
  transition:opacity 1.1s var(--ease);
}
:root[data-theme="day"] [data-veil] {
  background:linear-gradient(180deg,rgba(8,14,10,.42),rgba(8,14,10,.52));
}
:root[data-theme="night"] [data-veil] {
  background:linear-gradient(180deg,rgba(4,9,14,.55),rgba(4,9,14,.66));
}
:root[data-theme="day"] [data-foliage] img {
  filter:none;
}
footer {
  position:relative;
  z-index:2;
}
:root[data-theme="day"] [data-layer="dia"] {
  opacity:1;
}
:root[data-theme="day"] [data-layer="noche"] {
  opacity:0;
}
:root[data-theme="night"] [data-layer="dia"] {
  opacity:0;
}
:root[data-theme="night"] [data-layer="noche"] {
  opacity:1;
}
[data-layer="tarde"] {
  opacity:0;
}
:root[data-cross="1"] [data-layer="tarde"] {
  opacity:1;
}
@keyframes kenburns {
  from {
    transform:scale(1.04) translate3d(0,0,0);
  }
  to {
    transform:scale(1.16) translate3d(-1.6%,-1.8%,0);
  }
}
@keyframes drift {
  from {
    transform:translate3d(-2%,0,0);
  }
  to {
    transform:translate3d(2%,-1%,0);
  }
}
@keyframes drop {
  0% {
    transform:scaleY(0);
    transform-origin:top;
  }
  50% {
    transform:scaleY(1);
    transform-origin:top;
  }
  51% {
    transform:scaleY(1);
    transform-origin:bottom;
  }
  100% {
    transform:scaleY(0);
    transform-origin:bottom;
  }
}
@keyframes breathe {
  from {
    box-shadow:0 0 20px -10px rgba(108,191,87,.18);
  }
  to {
    box-shadow:0 0 38px -8px rgba(108,191,87,.32);
  }
}
@keyframes sprout {
  from {
    transform:scaleY(0);
  }
  to {
    transform:scaleY(1);
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}
@keyframes marq {
  to {
    transform:translateX(-50%);
  }
}
[data-nav-root][data-solid="1"] {
  background:rgba(6,11,22,.74) !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  border-bottom-color:rgba(108,191,87,.34) !important;
}
[data-navlink]:hover,[data-navlink][data-active="1"] {
  color:#6CBF57 !important;
  background:rgba(108,191,87,.2) !important;
  border-color:rgba(108,191,87,.48) !important;
}
[data-navlink] i {
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
[data-navlink]:hover i,[data-navlink][data-active="1"] i {
  transform:scaleX(1);
}
[data-glass]:hover {
  border-color:var(--glass-hi) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 26px 60px -26px rgba(8,16,12,.5),
    0 0 34px -16px rgba(108,191,87,.26) !important;
}
[data-thumb]:hover [data-cta] {
  opacity:1 !important;
  transform:none !important;
}
[data-medal]:hover [data-shimmer] {
  animation:spin 2.4s linear 1;
}
:root[data-theme="day"] {
  --frame-line:rgba(255,255,255,.78);
  --frame-glow:rgba(150,200,215,.55);
}
:root[data-theme="night"] {
  --frame-line:rgba(160,220,255,.55);
  --frame-glow:rgba(90,170,220,.45);
}
[data-glass],[data-secthead],[data-info] {
  position:relative;
  border-radius:16px !important;
}
[data-glass]::before,[data-secthead]::before,[data-info]::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--frame-line);
  border-radius:10px;
  opacity:.45;
  pointer-events:none;
  z-index:0;
}
[data-glass]::after,[data-secthead]::after,[data-info]::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
  background-repeat:no-repeat;
  background-size:clamp(64px,9%,104px) auto;
  background-position:top -6px left -6px,bottom -6px right -6px;
  opacity:.85;
}
:root[data-theme="day"] [data-glass]::after, :root[data-theme="day"] [data-secthead]::after,
:root[data-theme="day"] [data-info]::after {
  background-image:url("assets/vides-dia.svg"),url("assets/vides-dia-invertida.svg");
}
:root[data-theme="night"] [data-glass]::after, :root[data-theme="night"] [data-secthead]::after,
:root[data-theme="night"] [data-info]::after {
  background-image:url("assets/vides-noche.svg"),url("assets/vides-noche-invertida.svg");
}
[data-glass],[data-secthead],[data-info] {
  box-shadow:inset 0 0 0 1px var(--frame-glow), inset 0 1px 0 rgba(255,255,255,.4),
    0 32px 80px -34px rgba(0,0,0,.7) !important;
}
[data-tile]::before,[data-tile]::after {
  display:none;
}
[data-glass] > *,[data-secthead] > *,[data-info] > * {
  position:relative;
  z-index:2;
}
[data-glass]:has(> [data-thumb])::after,[data-glass]:has(> [data-projimg])::after,[data-proj-wide]::after {
  background-position:-999px -999px,bottom -6px right -6px;
}
@media (max-width:700px) {
  [data-glass]::after,[data-secthead]::after,[data-info]::after {
    background-size:56px auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}
[data-section] {
  scroll-margin-top:88px;
}
[data-glass],[data-secthead],[data-info] {
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
}
[data-secthead] {
  padding:clamp(26px,3.4vw,40px);
  border-radius:10px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background:linear-gradient(145deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 46%,rgba(108,191,87,.09) 100%);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 32px 80px -34px rgba(0,0,0,.7);
}
[data-railcap] span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--glass-edge);
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 26px -16px rgba(8,16,12,.5);
}
[data-railcap] i {
  width:5px !important;
  border-radius:999px;
  border:1px solid var(--glass-edge);
  background:linear-gradient(to bottom,rgba(108,191,87,.75),transparent) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
[data-thumb] img,[data-projimg] img {
  filter:brightness(1.14) contrast(1.04) saturate(1.05);
}
[data-btn] {
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-color .35s var(--ease),
    border-color .35s var(--ease), color .35s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  [data-btn]:hover {
    transform:translateY(-3px);
    background:var(--green) !important;
    border-color:var(--green-light) !important;
    color:#061009 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -16px rgba(36,81,42,.55),
      0 0 30px -12px rgba(108,191,87,.34) !important;
  }
  [data-btn]:hover svg,[data-btn]:hover path {
    color:#061009 !important;
    stroke:currentColor;
  }
  [data-cta]:hover,[data-themebtn]:hover {
    background:var(--green) !important;
    border-color:var(--green-light) !important;
    color:#061009 !important;
  }
}
[data-btn]:active {
  transform:translateY(-1px) scale(.985);
}
@keyframes tilePick {
  0% {
    transform:translateY(0) scale(1) rotate(0);
  }
  22% {
    transform:translateY(-9px) scale(1.07) rotate(-3.2deg);
  }
  46% {
    transform:translateY(2px) scale(.975) rotate(2.4deg);
  }
  68% {
    transform:translateY(-4px) scale(1.03) rotate(-1.2deg);
  }
  86% {
    transform:translateY(1px) scale(.995) rotate(.5deg);
  }
  100% {
    transform:translateY(0) scale(1) rotate(0);
  }
}
@keyframes tileGlow {
  0% {
    box-shadow:0 0 0 0 rgba(108,191,87,.55);
  }
  100% {
    box-shadow:0 0 0 22px rgba(108,191,87,0);
  }
}
[data-scrollrail] {
  cursor:pointer;
}
[data-scrollrail][data-drag="1"] {
  transform:translateX(-4px) scaleX(1.66);
}
[data-scrollrail][data-drag="1"] [data-vprogress] {
  background:linear-gradient(180deg,rgba(108,191,87,.95),rgba(108,191,87,.7)) !important;
  border-color:rgba(108,191,87,.9) !important;
}
:root[data-theme="day"] [data-scrollrail] [data-vprogress] {
  background:linear-gradient(145deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.45) 100%);
}
@media (max-width:940px) {
  [data-scrollrail] {
    top:12vh !important;
    bottom:12vh !important;
    right:10px !important;
    width:10px !important;
  }
}
@media (pointer:coarse) {
  [data-scrollrail] {
    width:14px !important;
    right:8px !important;
  }
}
@media (hover:hover) and (pointer:fine) {
  [data-scrollrail]:hover {
    width:20px !important;
    transform:translateX(-4px);
  }
  [data-scrollrail]:hover [data-vprogress] {
    background:linear-gradient(180deg,rgba(108,191,87,.95),rgba(108,191,87,.7)) !important;
    border-color:rgba(108,191,87,.9) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 26px -4px rgba(108,191,87,.9) !important;
  }
}
[data-tile] {
  cursor:pointer;
  will-change:transform;
  flex:0 1 120px;
  max-width:150px;
}
[data-secthead] > p {
  margin-left:auto;
  margin-right:auto;
}
[data-secthead] > div {
  justify-content:center;
}
[data-tile] svg {
  filter:grayscale(1) brightness(1.9) contrast(1.15);
}
[data-tile][data-sel="1"] {
  animation:tilePick .82s var(--ease) both,tileGlow .82s ease-out both;
  border-color:var(--green-light) !important;
}
[data-tile][data-sel="1"] svg {
  animation:tilePick .82s var(--ease) .06s both;
}
@keyframes introBeam {
  0% {
    transform:translateY(-110%);
    opacity:0;
  }
  12% {
    opacity:1;
  }
  72% {
    transform:translateY(110%);
    opacity:1;
  }
  100% {
    transform:translateY(110%);
    opacity:0;
  }
}
@keyframes introLine {
  0% {
    transform:scaleY(0);
  }
  26% {
    transform:scaleY(1);
  }
  100% {
    transform:scaleY(1);
  }
}
@keyframes introFlash {
  0%,72% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes introSplitL {
  0%,74% {
    transform:translateX(0);
  }
  100% {
    transform:translateX(-101%);
  }
}
@keyframes introSplitR {
  0%,74% {
    transform:translateX(0);
  }
  100% {
    transform:translateX(101%);
  }
}
@media (max-width:1080px) {
  [data-burger] {
    display:grid !important;
  }
  [data-navlinks] {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column !important;
    gap:6px !important;
    align-items:stretch;
    background:rgba(6,11,22,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(108,191,87,.25);
    max-height:0 !important;
    overflow:hidden;
    padding:0 14px;
    transition:max-height .5s var(--ease);
  }
  [data-navlinks][data-open="1"] {
    max-height:560px !important;
    padding:12px 14px 18px;
  }
  /* El <ul> lleva align-items:center en el atributo style, que gana a la hoja de
         estilos: en columna eso encoge cada <li> al ancho de su texto y los botones
         salen de distinto tamaño. De ahí el !important. */
  [data-navlinks] {
    align-items:stretch !important;
  }
  [data-navlinks] li {
    width:100%;
    display:block;
  }
  [data-navlinks] li > a {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:0 18px !important;
    font-size:.76rem !important;
    border-radius:12px !important;
    text-align:center;
  }
  [data-navlinks] li > a i {
    display:none !important;
  }
  [data-rail] {
    display:none !important;
  }
  [data-railgrid] {
    grid-template-columns:1fr !important;
  }
  [data-wrap] {
    padding-left:24px !important;
    padding-right:24px !important;
  }
}
@media (max-width:940px) {
  [data-split-2] {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  [data-projects] {
    grid-template-columns:1fr !important;
  }
  [data-proj-wide] {
    grid-column:auto !important;
    grid-template-columns:1fr !important;
  }
  [data-hero-card] {
    max-width:min(560px,100%) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:linear-gradient(145deg,rgba(10,18,12,.42) 0%,rgba(10,18,12,.28) 100%) !important;
  }
  [data-portrait] {
    max-width:420px;
    aspect-ratio:4/5 !important;
  }
}
@media (max-width:600px) {
  body {
    font-size:16px;
  }
  [data-section] {
    padding-top:78px !important;
    padding-bottom:78px !important;
  }
  [data-wrap] {
    padding-left:18px !important;
    padding-right:18px !important;
  }
  [data-hero-card] {
    padding:26px 22px !important;
  }
  [data-info] {
    grid-template-columns:1fr !important;
  }
  /* En celular todos los botones del menú comparten un tamaño más compacto. */
  [data-navlinks] li > a {
    min-height:44px;
    font-size:.68rem !important;
    padding:0 14px !important;
    border-radius:10px !important;
  }
  [data-navlinks][data-open="1"] {
    max-height:520px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* La ventana del codigo: hidden tiene que ganarle al display en linea. */
[data-codigo-modal][hidden] {
  display:none !important;
}
/* ==========================================================================
   Componentes extraidos de index.html

   Antes estaban repetidos como atributos style= dentro del HTML: 122 copias
   de 26 bloques identicos, que hacian el marcado ilegible y obligaban a
   cambiar el mismo estilo en varios sitios a la vez.

   Van al FINAL de la hoja a proposito: como estilo inline ganaban a todas
   las reglas de arriba, y estando al final conservan esa misma prioridad.
   ========================================================================== */
/* Tile de tecnologia (la cuadricula de logos)  (9x) */
.sp-tile {
  /* Reinicio de boton: el navegador le pone fuente, color y relleno propios. */
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  color:inherit;
  text-align:center;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:10px;
  border:1px solid var(--glass-edge);
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 40px -26px rgba(8,16,12,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease),
    background .9s var(--ease);
}
/* Etiqueta de tecnologia dentro de una tarjeta  (16x) */
.sp-tag {
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  letter-spacing:.08em;
  padding:5px 11px;
  border-radius:999px;
  background:var(--tag-bg);
  color:var(--tag-fg);
  border:1px solid var(--tag-edge);
}
/* Enlace de la barra de navegacion  (6x) */
.sp-navlink {
  display:block;
  padding:9px 14px;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:#F3F0E4;
  border-radius:999px;
  position:relative;
  white-space:nowrap;
  background:rgba(243,240,228,.08);
  border:1px solid rgba(255,255,255,.13);
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
/* Boton redondo de solo icono (GitHub, demo)  (6x) */
.sp-btn-icono {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px;
  border-radius:999px;
  border:1px solid var(--glass-edge);
  background:var(--glass);
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.63rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
/* Tarjeta de proyecto  (4x) */
.sp-tarjeta {
  overflow:hidden;
  border-radius:10px;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 20px 50px -28px rgba(8,16,12,.4);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease),
    background .9s var(--ease);
}
/* Opcion del menu de idiomas  (5x) */
.sp-lang-op {
  text-align:left;
  padding:9px 12px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#F8F5EA;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
/* Nombre bajo el logo de cada tile  (9x) */
.sp-tile-nombre {
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  text-align:center;
  padding:0 6px;
}
/* Boton principal en forma de pildora  (3x) */
.sp-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 32px;
  border-radius:999px;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--glass-edge);
  color:var(--ink);
  background:var(--glass);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* Etiqueta de tecnologia, version grande  (5x) */
.sp-tag-grande {
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  letter-spacing:.08em;
  padding:6px 13px;
  border-radius:999px;
  background:var(--tag-bg);
  color:var(--tag-fg);
  border:1px solid var(--tag-edge);
}
/* Aviso flotante sobre la miniatura de un proyecto  (3x) */
.sp-thumb-cta {
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 13px;
  border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#08160A;
  background:#6CBF57;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
/* Antetitulo en monoespaciada sobre los titulos  (5x) */
.sp-antetitulo {
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  display:block;
  color:var(--green);
  margin-bottom:14px;
}
/* Subrayado fino del enlace de navegacion activo  (6x) */
.sp-navlink-linea {
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:1px;
  background:var(--green-light);
  display:block;
}
/* Linea vertical decorativa del lateral  (5x) */
.sp-raya {
  display:block;
  width:1px;
  height:clamp(80px,14vh,150px);
  background:linear-gradient(to bottom,var(--green),transparent);
}
/* Numero de seccion en monoespaciada verde  (5x) */
.sp-numero {
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  letter-spacing:.2em;
  color:var(--green);
}
/* Etiqueta diminuta en monoespaciada  (3x) */
.sp-etiqueta-mini {
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:6px;
}
/* Columna pegajosa de la izquierda de cada seccion  (5x) */
.sp-columna-lateral {
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
/* Capa de imagen del hero con efecto Ken Burns  (3x) */
.sp-hero-capa {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% 50%;
  animation:kenburns 34s var(--ease) infinite alternate;
}
/* Titulo de seccion en Cinzel  (3x) */
.sp-titulo-seccion {
  font-family:'Cinzel',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.12;
  margin-bottom:16px;
  color:var(--ink);
}
/* Titulo de una tarjeta de proyecto  (4x) */
.sp-tarjeta-titulo {
  font-family:'Cinzel',Georgia,serif;
  font-weight:600;
  font-size:1.3rem;
  margin-bottom:9px;
  color:var(--ink);
}
/* Marco de la miniatura de un proyecto (16/10)  (4x) */
.sp-thumb {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:rgba(255,255,255,.06);
  display:block;
}
/* Seccion principal de la pagina  (3x) */
.sp-seccion {
  position:relative;
  z-index:2;
  padding:clamp(80px,11vw,132px) 0;
  background:transparent;
  transition:background-color .9s var(--ease);
}
/* Contenedor de seccion, con posicion relativa  (2x) */
.sp-wrap-rel {
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:88px 1fr;
}
/* Imagen que cubre su caja, centrada  (2x) */
.sp-cover-50 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
/* Contenedor de seccion  (2x) */
.sp-wrap {
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:88px 1fr;
}
/* Imagen que cubre su caja, anclada abajo  (2x) */
.sp-cover-60 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
}
/* Parrafo de introduccion de seccion  (2x) */
.sp-parrafo {
  color:var(--ink-soft);
  font-weight:300;
  margin-bottom:16px;
  max-width:56ch;
  text-wrap:pretty;
}
/* Anillo de foco de los tiles: quien navega con el teclado tiene que ver
   donde esta parado. :focus-visible solo aparece con teclado, no al hacer clic. */
.sp-tile:focus-visible {
  outline:2px solid var(--green-light);
  outline-offset:3px;
}
/* Nota de la tarjeta de FIA. Ocupa el mismo sitio que la fila de botones de las
   demas tarjetas, para que el hueco se lea como una decision y no como un fallo. */
.sp-sin-enlace {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:.63rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.75;
}
/* ==========================================================================
   Hueco para la barra de desplazamiento propia

   La barra flotante va fija contra el borde derecho, por encima de todo. En
   pantallas estrechas se montaba sobre el texto y sobre el boton de menu. Aqui
   se le reserva su carril: el contenido nunca llega hasta el borde.

   Solo hace falta cuando el contenido llega al borde. Por encima de 1400px la
   pagina ya deja margen de sobra y no se toca nada.
   ========================================================================== */
:root {
  --carril:44px;
}
@media (max-width:940px) {
  :root {
    --carril:34px;
  }
}
@media (max-width:1400px) {
  .sp-wrap, .sp-wrap-rel, [data-wrap] {
    padding-right:calc(32px + var(--carril)) !important;
  }
  [data-nav-root] {
    padding-right:calc(18px + var(--carril)) !important;
  }
}
/* ==========================================================================
   Una sola barra de desplazamiento

   Se veian dos a la vez: la propia y la del navegador. Se esconde la nativa,
   pero SOLO cuando la propia esta funcionando: anim.js pone data-carril="1"
   al arrancar. Si el JavaScript no llega a cargarse, la del navegador sigue
   ahi y la pagina se puede recorrer igual.
   ========================================================================== */
:root[data-carril="1"] {
  scrollbar-width:none;
}
:root[data-carril="1"]::-webkit-scrollbar {
  width:0;
  height:0;
}
/* ==========================================================================
   Boton de menu

   Llevaba un borde grisaceo que no casaba con los otros dos botones redondos
   de la barra, que son verdes. Y las tres rayas no quedaban centradas.
   ========================================================================== */
[data-burger] {
  place-content:center;
  justify-items:center;
  gap:4.5px !important;
  border-color:rgba(108,191,87,.42) !important;
  background:rgba(243,240,228,.1) !important;
  color:var(--green-light) !important;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
[data-burger] span {
  width:17px !important;
  height:1.6px !important;
  border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
[data-burger]:hover {
  background:rgba(108,191,87,.22) !important;
  border-color:#6CBF57 !important;
}
/* Abierto: las rayas se cruzan en una equis. */
[data-burger][aria-expanded="true"] span:nth-child(1) {
  transform:translateY(6.1px) rotate(45deg);
}
[data-burger][aria-expanded="true"] span:nth-child(2) {
  opacity:0;
}
[data-burger][aria-expanded="true"] span:nth-child(3) {
  transform:translateY(-6.1px) rotate(-45deg);
}