/* Base común de las dos versiones. Paleta: navy (fondo) + arena/crema (texto) + dorado (solo brillos y halos). */
:root{
  --navy:#0f1b36; --navy-2:#16264a; --navy-3:#1e2f55;
  --crema:#f5eee2; --arena:#d9cbb1; --arena-2:#b9ab92;
  --oro:#e3c27d; --oro-luz:rgba(242,207,134,.55);
  --rosa:#f4c7d3; --lavanda:#d9d0f2; --celeste:#c9def2; --durazno:#fbe3cf;
  --gutter:clamp(1rem,5vw,5rem); --max:80rem;
}
html{font-size:100%;scroll-behavior:auto;overflow-x:clip}
@media (min-width:1100px){html{font-size:80%}}
@media (max-width:600px){html{font-size:88%}}  /* celular: todo un poco más chico (pedido de Julieta, 2026-10-18) */  /* Julieta ve "perfecto" lo que está al 80 % */
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--crema);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:1rem;top:-4rem;z-index:50;background:var(--crema);color:var(--navy);padding:.8rem 1rem;border-radius:.5rem}
.saltar:focus{top:1rem}

/* ===== Lienzo 3D fijo detrás de todo ===== */
#lienzo{position:fixed;inset:0;width:100%;height:100%;height:100lvh;display:block;z-index:0;pointer-events:none}
.sin3d #lienzo{display:none}
#portada,#interna{position:relative;z-index:1}

/* ===== Vistas: con JavaScript se ve una a la vez; sin JavaScript, las dos en orden ===== */
.js.en-portada #interna{display:none}
.js.en-interna #portada{display:none}
.entrando #interna{animation:entrar .9s cubic-bezier(.16,1,.3,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Pista de la portada: alta para scrollear, con la escena pegada arriba */
.pista{position:relative}
.con3d .pista{height:300vh}
.pista__escena{position:relative;min-height:100svh;overflow:hidden}
.con3d .pista__escena{position:sticky;top:0;height:100svh}
.logo-respaldo{display:none}
.sin3d .logo-respaldo,.no-js .logo-respaldo{display:block}

/* ===== Botón de música (redondo, 44 px) ===== */
.musica{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;min-width:44px;padding:0 .9rem 0 .7rem;border-radius:999px;
  border:1px solid rgba(245,238,226,.28);background:rgba(15,27,54,.45);color:var(--crema);cursor:pointer;
  font:500 .78rem/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.musica__ico{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.musica__ico i{width:2px;height:4px;background:var(--crema);border-radius:1px;transition:height .3s}
.musica[aria-pressed="true"] .musica__ico i{animation:barra 1s ease-in-out infinite;background:var(--oro)}
.musica[aria-pressed="true"] .musica__ico i:nth-child(2){animation-delay:-.3s}
.musica[aria-pressed="true"] .musica__ico i:nth-child(3){animation-delay:-.6s}
@keyframes barra{0%,100%{height:4px}50%{height:14px}}
.musica--fija{position:fixed;top:1rem;right:var(--gutter);z-index:20}
.en-interna .musica--fija{display:none}
@media (max-width:640px){.musica .musica__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.musica{padding:0;justify-content:center}}

/* ===== Botón principal con halo dorado que respira (solo opacity) ===== */
.boton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.6rem;border-radius:999px;
  background:var(--crema);color:var(--navy);text-decoration:none;font:600 .82rem/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(242,207,134,.55),0 0 22px rgba(242,207,134,.28);isolation:isolate}
.boton::after{content:"";position:absolute;inset:-10px;border-radius:inherit;z-index:-1;background:radial-gradient(closest-side,rgba(242,207,134,.55),transparent);
  opacity:.25;animation:respira 3.2s ease-in-out infinite}
@keyframes respira{50%{opacity:.85}}
.boton:hover{background:#fff}
.boton--fino{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1px rgba(245,238,226,.45)}
.boton--fino::after{display:none}
.boton--fino:hover{background:rgba(245,238,226,.08)}

/* ===== Apariciones ===== */
.js [data-revelar]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js [data-revelar].visto{opacity:1;transform:none}

/* ===== Tarjeta de proyecto: piezas comunes ===== */
.etiqueta{display:inline-block;font:500 .72rem/1.2 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--arena)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tags li{font:500 .74rem/1 var(--texto);padding:.45rem .7rem;border-radius:999px;border:1px solid rgba(217,203,177,.3);color:var(--arena)}
.dato{display:flex;gap:.6rem;align-items:baseline;color:var(--crema)}
.dato::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--oro);box-shadow:0 0 10px 2px var(--oro-luz);transform:translateY(-.1rem)}

/* «reducir animaciones» no frena el movimiento: lo pidió Julieta (2026-10-18) */

/* ?captura: sin botones ni barritas, para sacar la imagen de vista previa */
.captura .entrar,.captura .barras{visibility:hidden!important}