/* Base y primitivos ========================================================
   Los mismos ladrillos que usa raycast: contenedor de 1204, botón claro sobre
   oscuro, título de sección en dos líneas (blanca + gris del mismo tamaño),
   enlace con flecha, y el "brillo" de 1px blanco al 5% por dentro que llevan
   todas sus cajas. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-bg-100);
  color:var(--color-fg);
  font-family:var(--font-cuerpo);
  font-size:var(--texto-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--color-acento);outline-offset:3px;border-radius:4px}
::selection{background:var(--color-acento);color:var(--color-sobre-acento)}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.contenedor{width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:24px}
/* Ninguna línea de texto corrido pasa de ~68 caracteres. Medido contra
   raycast: sus párrafos van a 35-40ch y los míos llegaban a 155, que es un
   muro de texto por mucho que el color y el tamaño coincidan. */
p{max-width:68ch}
.contenedor--sm{max-width:var(--container-sm-width)}
.contenedor--xs{max-width:var(--container-xs-width)}

/* ── sección ── */
.seccion{padding-block:var(--seccion-y);position:relative}

.titulo-seccion{
  text-align:center;
  display:flex;flex-direction:column;
  font-size:var(--texto-xl);      /* medido en raycast: 20px, no 26 */
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.3;
  text-wrap:balance;
}
.titulo-seccion b{font-weight:400;color:var(--color-fg)}
.titulo-seccion span{color:var(--color-fg-300)}
.titulo-seccion--izq{text-align:left;align-items:flex-start}

/* ── botones ── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding-inline:16px;
  border:0;border-radius:var(--radius);
  font-size:var(--texto-sm);font-weight:400;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-rapida) var(--curva),
             color var(--t-rapida) var(--curva),
             transform var(--t-rapida) var(--curva),
             box-shadow var(--t-rapida) var(--curva);
}
.boton--claro{background:var(--color-boton-bg);color:var(--color-boton-fg)}
.boton--claro:hover{background:var(--color-boton-bg-hover);transform:translateY(-1px)}
.boton--claro:active{transform:translateY(0)}

/* LA ÚNICA DESVIACIÓN DELIBERADA DE LA REFERENCIA, escrita aquí para que no se
   lea como un descuido: raycast pone su CTA en blanco porque su acento es un
   rojo con el que el texto no se lee. Aquí el acento SÍ es legible en negro
   —es la regla del video system— y esto es una landing de captación: gastar el
   color de marca en decoración y dejar en gris el botón que da de comer es
   perder la única batalla que importa. */
.lista .boton--claro,
.navbar .boton--claro,
.paso__cta .boton--claro,
.paso__pie .boton--claro,
.cierre .boton--claro{background:var(--color-acento);color:var(--color-sobre-acento)}
.lista .boton--claro:hover,
.paso__pie .boton--claro:hover,
.navbar .boton--claro:hover{background:var(--color-acento-vivo);box-shadow:var(--glow-acento)}

.boton--acento{background:var(--color-acento);color:var(--color-sobre-acento);font-weight:400}
.boton--acento:hover{background:var(--color-acento-vivo);box-shadow:var(--glow-acento)}

.boton--fantasma{
  background:var(--color-bg-200);color:var(--color-fg);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.boton--fantasma:hover{background:var(--color-bg-300)}

/* La pastilla del final del hero: borde, fondo casi negro y flecha que empuja */
.pastilla{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  margin:0 auto;
  height:44px;padding-inline:20px;
  border-radius:999px;
  background:rgba(22,22,22,.7);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  font-size:var(--texto-sm);color:var(--color-fg-200);
  transition:color var(--t-rapida) var(--curva), background-color var(--t-rapida) var(--curva);
}
.pastilla:hover{color:var(--color-fg);background:rgba(31,31,31,.85)}
.pastilla span{transition:transform var(--t-rapida) var(--curva)}
.pastilla:hover span{transform:translateX(3px)}

/* Enlace con flecha (el ArrowLink de raycast) */
.flecha{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--texto-sm);color:var(--color-fg-200);
  transition:color var(--t-rapida) var(--curva);
}
.flecha:hover{color:var(--color-fg)}
.flecha svg{transition:transform var(--t-rapida) var(--curva)}
.flecha:hover svg{transform:translateX(3px)}

/* Botones circulares de carrusel */
.redondo{
  width:44px;height:44px;border-radius:999px;border:0;
  background:var(--color-bg-200);color:var(--color-fg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.redondo:hover:not(:disabled){background:var(--color-bg-300);color:var(--color-fg)}
.redondo:disabled{opacity:.35;cursor:default}

/* Etiqueta monoespaciada: la voz "de taller" del video system */
.mono{
  font-family:var(--font-mono);
  font-size:var(--texto-xs);
  letter-spacing:.04em;
  color:var(--color-fg-300);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* El input del pie era el único campo de la página sin gesto de hover. */
.lista--pie input:hover{background:rgba(0,0,0,.42)}

/* ═══ ORDEN DE PINTADO ══════════════════════════════════════════════════════
   El sistema no tenía regla de quién pinta encima de quién, y el texto perdió
   TRES VECES DE TRES: el velo de la galería sobre su pie de tarjeta (1,83:1),
   la escena del producto sobre el rótulo del dock (2,27:1) y la máscara del
   muro sobre los títulos de sus fichas. `getComputedStyle` decía que los tres
   estaban bien —el color declarado es correcto— y el píxel decía que no.

   La regla, de una vez: TODA capa decorativa vive por debajo de 0, y todo
   contenedor de texto que conviva con una se levanta explícitamente. */
.velo,.pintada,.grano,.resplandor,
.galeria__pieza figure::after{z-index:-1}
.galeria__pieza figcaption,
.dock__globo,
.muro__ficha span{position:relative;z-index:3}