/* ============================================================
   UNDICI TATTOO — hoja de estilos
   Sacada del index.html el 25/08/2026. Estaban 577 renglones
   dentro del HTML, y el estandar de Comanda lo prohibe:
   "Todo el CSS metido dentro del index.html. Hoja aparte, siempre."
   ============================================================ */

    :root {
      color-scheme: dark;
      --spin-outer: 110s;
      --spin-middle: 72s;
      --spin-core: 46s;
      --radius: 22px;
    }

    * { box-sizing: border-box; }

    html, body {
      min-height: 100%;
      margin: 0;
      background: #050505;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    .hero-scroll {
      position: relative;
      height: 260svh;
      background: #050505;
    }

    .hero {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      isolation: isolate;
      background: #050505;
    }

    .hero__background {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 148vmax;
      height: 148vmax;
      background: url("tattoo-background.webp") center / cover no-repeat;
      transform-origin: center;
      filter: contrast(1.06) brightness(.72);
      will-change: transform;
    }

    .hero__background--outer {
      z-index: -5;
      animation: mural-spin-cw var(--spin-outer) linear infinite;
    }

    .hero__background--middle {
      z-index: -4;
      -webkit-mask-image: radial-gradient(circle,
        transparent 0 27%,
        rgba(0,0,0,.35) 31%,
        #000 36% 61%,
        rgba(0,0,0,.35) 66%,
        transparent 70%);
      mask-image: radial-gradient(circle,
        transparent 0 27%,
        rgba(0,0,0,.35) 31%,
        #000 36% 61%,
        rgba(0,0,0,.35) 66%,
        transparent 70%);
      animation: mural-spin-ccw var(--spin-middle) linear infinite;
    }

    .hero__background--core {
      z-index: -3;
      -webkit-mask-image: radial-gradient(circle,
        #000 0 28%,
        rgba(0,0,0,.65) 32%,
        transparent 37%);
      mask-image: radial-gradient(circle,
        #000 0 28%,
        rgba(0,0,0,.65) 32%,
        transparent 37%);
      animation: mural-spin-cw var(--spin-core) linear infinite;
    }

    .hero__shade {
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        radial-gradient(circle at 50% 52%, transparent 28%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.76) 100%),
        linear-gradient(180deg, rgba(0,0,0,.34), transparent 30%, transparent 70%, rgba(0,0,0,.58));
      pointer-events: none;
    }

    .hero__art-frame {
      position: absolute;
      z-index: -1;
      inset: 0;
      display: grid;
      /* place-content centra la FILA dentro del marco; place-items centra la
         imagen dentro de la fila. Hacen falta las dos: la fila se auto-dimensiona
         a la imagen, asi que sin place-content la imagen se queda arriba. */
      place-content: center;
      place-items: center;
      overflow: hidden;
      transform: none;
      pointer-events: none;
      user-select: none;
    }

    .hero__foreground {
      display: block;
      width: auto;
      height: 130svh;
      max-width: none;
      /* La cabeza no esta en el centro del recorte: cae en el 57% de ancho
         y el 47% de alto. Se desplaza la imagen para dejarla clavada en el
         centro del hero, que es donde el mural tiene el hueco. */
      transform: translate(-7%, 3%);
      /* el recorte viene cortado a cuchillo en los lados */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    }

    .hero__copy {
      position: absolute;
      z-index: 2;
      /* 25/08/2026: subido de 7svh a 21svh. A 7 quedaba pegado al borde
         de abajo y el hero se veia descompensado — mucho aire arriba y
         nada abajo. */
      inset: auto 7vw clamp(6rem, 30svh, 20rem);
      max-width: 34rem;
      text-shadow: 0 2px 18px #000;
      will-change: opacity, transform;
    }

    .hero__copy--second {
      z-index: 3;
      opacity: 0;
      transform: translateY(3rem);
      pointer-events: none;
    }

    .hero__eyebrow {
      margin: 0 0 .8rem;
      color: rgba(255,255,255,.65);
      font-size: .72rem;
      letter-spacing: .28em;
      text-transform: uppercase;
    }

    .hero h1 {
      max-width: 10ch;
      margin: 0;
      color: #f5f4f0;
      font-family: Georgia, serif;
      font-size: clamp(3rem, 9.5vw, 6.5rem);
      font-weight: 400;
      line-height: .8;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }

    .hero h2 {
      max-width: 11ch;
      margin: 0;
      font-family: Georgia, serif;
      font-size: clamp(3rem, 9vw, 6.4rem);
      font-weight: 400;
      line-height: .84;
      letter-spacing: -.06em;
    }

    .hero__hint {
      margin: 1.2rem 0 0;
      color: rgba(255,255,255,.68);
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .studio-section {
      position: relative;
      display: grid;
      align-items: end;
      min-height: 118svh;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(4rem, 9vw, 8rem) 7vw;
      background: #060606;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .studio__media {
      position: absolute;
      z-index: -3;
      inset: -10%;
      overflow: hidden;
      background: center 38% / cover no-repeat;   /* la imagen la pone .medio-cargado */
      filter: grayscale(.95) contrast(1.12) brightness(.7);
      transform: translate3d(0, 0, 0) scale(1.08);
      will-change: transform;
    }

    .studio__media::after {
      content: "";
      position: absolute;
      inset: -15%;
      background: linear-gradient(112deg,
        transparent 34%,
        rgba(255,255,255,.03) 43%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.03) 57%,
        transparent 66%);
      transform: translateX(-72%);
      animation: studio-light 11s ease-in-out infinite;
      pointer-events: none;
    }

    .studio__shade {
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.35) 48%, transparent 78%),
        linear-gradient(180deg, rgba(0,0,0,.14) 0%, transparent 45%, rgba(0,0,0,.78) 100%),
        radial-gradient(circle at 72% 45%, transparent 24%, rgba(0,0,0,.32) 78%);
      pointer-events: none;
    }

    .studio__copy {
      width: min(90vw, 47rem);
      text-shadow: 0 2px 20px #000;
    }

    .studio--motion-ready .studio__copy {
      opacity: 0;
      transform: translateY(3rem);
      transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.2,.7,.2,1);
    }

    .studio--motion-ready.is-visible .studio__copy {
      opacity: 1;
      transform: translateY(0);
    }

    .studio__eyebrow {
      margin: 0 0 1rem;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
    }

    .studio-section h2 {
      max-width: 9ch;
      margin: 0;
      font-family: Georgia, serif;
      font-size: clamp(3.5rem, 8vw, 7.8rem);
      font-weight: 400;
      line-height: .84;
      letter-spacing: -.065em;
    }

    .studio__lead {
      max-width: 46ch;
      margin: 1.5rem 0 0;
      color: rgba(255,255,255,.74);
      font-size: clamp(.96rem, 1.3vw, 1.15rem);
      line-height: 1.55;
    }

    .designs-section {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 125svh;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(4rem, 8vw, 8rem) 6vw;
      background: #030303;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .designs__stage {
      position: absolute;
      z-index: -3;
      inset: -9%;
      overflow: hidden;
      background: #050505;
      transform: translate3d(0, 0, 0) scale(1.07);
      will-change: transform;
    }

    .designs__image,
    .designs__angel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 25%;
    }

    .designs__image {
      filter: grayscale(1) contrast(1.12) brightness(.53);
    }

    .designs__angel {
      opacity: .74;
      filter: grayscale(1) contrast(1.2) brightness(1.38);
      mix-blend-mode: screen;
      will-change: transform;
      pointer-events: none;
    }

    .designs__angel--left {
      -webkit-mask-image: radial-gradient(ellipse 25% 28% at 24% 24%, #000 0 42%, transparent 76%);
      mask-image: radial-gradient(ellipse 25% 28% at 24% 24%, #000 0 42%, transparent 76%);
      animation: angel-float-left 5.2s ease-in-out infinite alternate;
    }

    .designs__angel--right {
      -webkit-mask-image: radial-gradient(ellipse 30% 31% at 74% 25%, #000 0 38%, transparent 74%);
      mask-image: radial-gradient(ellipse 30% 31% at 74% 25%, #000 0 38%, transparent 74%);
      animation: angel-float-right 6.6s ease-in-out -1.8s infinite alternate;
    }

    .designs__angel--center {
      -webkit-mask-image: radial-gradient(ellipse 23% 24% at 52% 46%, #000 0 36%, transparent 75%);
      mask-image: radial-gradient(ellipse 23% 24% at 52% 46%, #000 0 36%, transparent 75%);
      animation: angel-float-center 4.7s ease-in-out -.8s infinite alternate;
    }

    .designs__shade {
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        radial-gradient(circle at 50% 40%, transparent 15%, rgba(0,0,0,.32) 68%, rgba(0,0,0,.72) 100%),
        linear-gradient(180deg, rgba(0,0,0,.28), transparent 37%, rgba(0,0,0,.94) 100%);
      pointer-events: none;
    }

    .designs__copy {
      width: min(94vw, 82rem);
      text-align: center;
      text-shadow: 0 3px 28px #000;
    }

    .designs--motion-ready .designs__copy {
      opacity: 0;
      transform: translateY(3rem) scale(.96);
      transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
    }

    .designs--motion-ready.is-visible .designs__copy {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .designs__eyebrow {
      margin: 0 0 1rem;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
    }

    .designs-section h2 {
      margin: 0;
      font-family: Georgia, serif;
      font-size: clamp(4.4rem, 12.5vw, 13rem);
      font-weight: 400;
      line-height: .77;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    .obra-section {
      position: relative;
      overflow: hidden;
      padding: clamp(5.5rem, 10vw, 10rem) 6vw;
      background: #050505;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .obra__cabecera {
      width: min(94vw, 82rem);
      margin: 0 auto clamp(3rem, 6vw, 5.5rem);
      text-align: center;
    }

    .obra__eyebrow {
      margin: 0 0 1rem;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
    }

    .obra-section h2 {
      margin: 0;
      color: #f5f4f0;
      font-family: Georgia, serif;
      font-size: clamp(2.9rem, 7.5vw, 6.6rem);
      font-weight: 400;
      line-height: .84;
      letter-spacing: -.068em;
      text-transform: uppercase;
    }

    .obra__lead {
      max-width: 44ch;
      margin: 1.5rem auto 0;
      color: rgba(255,255,255,.72);
      font-size: clamp(.96rem, 1.3vw, 1.12rem);
      line-height: 1.55;
    }

    .obra__rejilla {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
      gap: clamp(1rem, 2.4vw, 2rem);
      width: min(94vw, 82rem);
      margin: 0 auto;
    }

    .obra__pieza { margin: 0; }

    /* Desfase vertical: rompe la cuadricula plana. Solo con sitio de sobra. */
    @media (min-width: 900px) {
      .obra__pieza:nth-child(3n+2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
      .obra__pieza:nth-child(3n+3) { margin-top: clamp(1rem, 2.5vw, 2.2rem); }
    }

    .obra__pieza img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius);
      filter: grayscale(1) contrast(1.06) brightness(.9);
      transition: filter .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }

    .obra__pieza:hover img,
    .obra__pieza:focus-within img {
      filter: grayscale(.82) contrast(1.14) brightness(1);
      transform: translateY(-6px);
    }

    .obra__pie {
      margin: .85rem .25rem 0;
      color: rgba(255,255,255,.55);
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    /* --- Aparecer al bajar ---------------------------------------------
       El estado oculto SOLO existe si el JS ha corrido y ha puesto
       .obra--motion-ready. Sin JS la galeria se ve entera. Mismo patron
       que ya usan .studio--motion-ready y .designs--motion-ready. */
    .obra--motion-ready .reveal {
      opacity: 0;
      transform: translate3d(0, 4.5rem, 0);
      /* 25/08/2026: mas lento y con un escalon mas ancho. A 90 ms
         las cuatro se pisaban y parecia un golpe; a 170 se lee el
         orden. La curva es una salida suave y pareja — sin rebote,
         sin acelerones: el flujo neutro que pidio Maxi. */
      transition: opacity 1s cubic-bezier(.22,.61,.36,1),
                  transform 1.25s cubic-bezier(.22,.61,.36,1);
      /* Sin retardo escalonado aqui: el ritmo lo pone la cola del JS.
         Si estuviera en los dos sitios se sumarian y la ultima pieza
         tardaria mas de un segundo en arrancar. */
      transition-delay: 0s;
      will-change: opacity, transform;
    }

    /* Variante lateral: se activa poniendo obra__rejilla--lados en el div */
    .obra--motion-ready .obra__rejilla--lados .reveal {
      transform: translate3d(-7rem, 1.5rem, 0);
    }

    .obra--motion-ready .obra__rejilla--lados .reveal:nth-child(even) {
      transform: translate3d(7rem, 1.5rem, 0);
    }

    .obra--motion-ready .reveal.is-visible {
      opacity: 1;
      transform: none;
      will-change: auto;
    }

    @keyframes mural-spin-cw {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes mural-spin-ccw {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(-360deg); }
    }

    @keyframes studio-light {
      0%, 18% { transform: translateX(-72%); opacity: 0; }
      34% { opacity: .8; }
      62% { opacity: .8; }
      78%, 100% { transform: translateX(72%); opacity: 0; }
    }

    @keyframes angel-float-left {
      from { transform: translate3d(-28px, 38px, 0) rotate(-1deg) scale(.985); }
      to { transform: translate3d(32px, -44px, 0) rotate(1.1deg) scale(1.018); }
    }

    @keyframes angel-float-right {
      from { transform: translate3d(35px, -31px, 0) rotate(.9deg) scale(1.012); }
      to { transform: translate3d(-38px, 48px, 0) rotate(-1.15deg) scale(.988); }
    }

    @keyframes angel-float-center {
      from { transform: translate3d(-24px, 33px, 0) rotate(-.7deg) scale(.98); }
      to { transform: translate3d(29px, -39px, 0) rotate(.75deg) scale(1.025); }
    }

    /* Escritorio: la figura crece, el mural sigue respirando alrededor. */
    @media (min-width: 701px) {
      .hero__foreground { height: 175svh; }
    }

    @media (max-width: 700px) {
      .hero__art-frame {
        inset: 0;
      }

      .studio-section {
        min-height: 105svh;
        padding-right: 7vw;
        padding-bottom: 8svh;
      }

      .studio__media { background-position: 50% 50%; }

      .studio__shade {
        background:
          linear-gradient(180deg, rgba(0,0,0,.12), transparent 34%, rgba(0,0,0,.86) 100%),
          radial-gradient(circle at 55% 38%, transparent 12%, rgba(0,0,0,.48) 100%);
      }

      .designs-section { min-height: 108svh; }

      .designs__image,
      .designs__angel { object-position: 50% 35%; }

      .designs-section h2 { font-size: clamp(2.8rem, 16.5vw, 7rem); }
      /* 25/08/2026: estaba en 20vw y a 375 px la palabra EXCLUSIVOS pedia
         415 px en una caja de 353: se cortaba. Medido: el texto ocupa unas
         5,53 veces el tamano de letra, asi que 16,5vw es lo maximo que entra
         en todo el rango de esta media query (hasta 700 px). */
    }

    @media (prefers-reduced-motion: reduce) {
      .hero__background { animation: none; }
      .hero__copy { will-change: auto; }
      .studio__media {
        transform: scale(1.02);
        will-change: auto;
      }
      .studio__media::after { animation: none; }
      .studio--motion-ready .studio__copy {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .designs__stage {
        transform: scale(1.02);
        will-change: auto;
      }
      .designs__angel { animation: none; }
      .designs--motion-ready .designs__copy {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .obra--motion-ready .reveal,
      .obra--motion-ready .obra__rejilla--lados .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .obra__pieza img { transition: none; }
    }


/* ============================================================
   AÑADIDO EL 25/08/2026 — dos puntos de la lista de entrega
   ============================================================ */

/* 1 · El fondo del estudio se carga cuando su seccion se acerca.
   Antes bajaba siempre, aunque el visitante no llegara nunca.
   Medido: 67,7 KB que no se gastan en la primera pantalla.
   Si el JavaScript no corre, la regla de abajo lo pone igual. */
.studio__media.medio-cargado{ background-image:url("studio-interior.webp") }
.no-js .studio__media{ background-image:url("studio-interior.webp") }

/* 2 · :focus-visible — no habia ninguno en toda la hoja.
   Quien navega con el teclado no veia donde estaba parado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid #f5f4f0;
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   AÑADIDO EL 25/08/2026 — cabecera, cinta, marca y citas
   Referencia de estilo que pidio Maxi: theclubtattoo.com
   (medida: 8 MB y 48 peticiones, con tipografia de Google.
   Aqui se copia la ANATOMIA — cinta, servicios, reservas —
   no su diseno, y se hace pesando 34 veces menos.)
   ============================================================ */

/* --- Enlace para saltar el menu, obligatorio con teclado ---- */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:#f5f4f0; color:#050505; padding:12px 20px; font-weight:700;
}
.saltar:focus-visible{ left:12px; top:12px }

/* --- La cabecera ------------------------------------------- */
.cabecera{
  position:fixed; inset:0 0 auto; z-index:50;
  height:88px; display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem);
  padding:0 clamp(18px,4vw,44px);
  transition:height .35s ease, background-color .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.cabecera.encogida{
  height:62px; background:rgba(5,5,5,.92); border-bottom-color:rgba(245,244,240,.14);
}

/* La marca NO se ve mientras el nombre gigante esta en pantalla:
   si no, sale dos veces en la misma pantalla. Aparece al bajar. */
.cabecera__marca{
  font-family:Georgia,serif; font-size:1rem; letter-spacing:.2em; text-transform:uppercase;
  color:#f5f4f0; text-decoration:none; white-space:nowrap;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.cabecera.encogida .cabecera__marca{ opacity:1; transform:none; pointer-events:auto }

.cabecera__nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); margin-left:auto }
.cabecera__nav a{
  color:#f5f4f0; text-decoration:none; font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.82;
  transition:opacity .2s ease;
}
.cabecera__nav a:hover{ opacity:1 }

.cabecera__wa{
  display:inline-flex; align-items:center; gap:8px; margin-left:clamp(.8rem,2vw,1.6rem);
  padding:11px 20px; border-radius:999px; background:#f5f4f0; color:#050505;
  font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; transition:transform .2s ease;
}
.cabecera__wa:hover{ transform:translateY(-2px) }

@media (max-width:760px){
  .cabecera__nav{ display:none }        /* en movil manda el boton, no el menu */
  .cabecera__wa{ margin-left:auto }
  /* 🚨 La marca sigue oculta hasta que se baja, IGUAL que en escritorio.
     Se habia dejado siempre visible aqui, y el nombre salia dos veces en
     la misma pantalla: el gigante del hero y el chico de la cabecera. */
}

/* --- La cinta que corre ------------------------------------- */
.cinta{
  overflow:hidden; border-block:1px solid rgba(245,244,240,.16);
  background:#050505; padding:18px 0;
}
.cinta__pista{
  display:flex; align-items:center; gap:1.4rem; width:max-content;
  animation:cinta-correr 38s linear infinite;
}
.cinta__pista span{
  font-family:Georgia,serif; font-size:clamp(1.1rem,2.4vw,1.9rem);
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:#f5f4f0;
}
.cinta__pista i{ font-style:normal; opacity:.42; font-size:1.1rem }

@keyframes cinta-correr{
  from{ transform:translateX(0) }
  to  { transform:translateX(-33.333%) }   /* la pista lleva 3 copias */
}

/* --- Horarios y citas -------------------------------------- */
.citas{
  padding:clamp(4.5rem,9vw,8rem) clamp(20px,6vw,80px);
  border-top:1px solid rgba(245,244,240,.16);
}
.citas__eyebrow,
.obra__eyebrow{ letter-spacing:.3em }
.citas__eyebrow{
  margin:0; font-size:.7rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; opacity:.6;
}
.citas h2{
  margin:1.1rem 0 clamp(2.6rem,5vw,4rem);
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:.92; letter-spacing:-.05em; max-width:14ch;
}

.horario{ list-style:none; margin:0 0 2rem; padding:0 }
.horario li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:16px 0; border-bottom:1px solid rgba(245,244,240,.16);
}
.horario span{ font-size:1.02rem; opacity:.78 }
.horario strong{
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.03em;
}
.citas__lugar{ margin:0; line-height:1.6; opacity:.78 }


.boton{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 30px; border-radius:999px;
  border:1px solid rgba(245,244,240,.4); color:#f5f4f0; text-decoration:none;
  font-weight:600; font-size:1rem; transition:transform .2s ease, border-color .2s ease;
}
.boton:hover{ transform:translateY(-2px); border-color:#f5f4f0 }
.boton--fuerte{ background:#f5f4f0; color:#050505; border-color:#f5f4f0; font-weight:700 }


/* --- Nada de esto marea a quien pide menos movimiento ------- */
@media (prefers-reduced-motion: reduce){
  .cinta__pista{ animation:none }
  .estilos__palabra{ transition:none }
  .cabecera{ transition:none }
}

/* --- 25/08/2026: «Diseños personalizados» es mas largo que el
   «Piezas cerradas» que habia antes, y a 375 px se salia 22 px de
   su caja. Medido: caja 353, texto 375.

   🚨 No se baja de 2.8rem: es el suelo del estandar y por debajo el
   titular «casi» destaca, que es lo peor de los dos mundos. Se gana
   sitio por los otros dos lados — un pelo mas de espaciado negativo
   y 4,5 px menos de margen lateral en la seccion. */
@media (max-width:700px){
  .obra-section{ padding-inline:16px }
  .obra-section h2{ font-size:2.8rem; letter-spacing:-.08em }
}

/* ============================================================
   LOS CUATRO ESTILOS — 25/08/2026
   Aparecen uno detras de otro mientras se baja por el hero, en el
   lado contrario al nombre. El momento de entrada de cada uno esta
   en su data-en del HTML, no aqui.

   ⚠️ TIPOGRAFIA PENDIENTE. Maxi quiere el estilo gotico de tatuaje
   de la referencia. Hasta que el .woff2 este descargado y servido
   desde esta carpeta, cae en Georgia. NUNCA con <link> a Google:
   son 0 peticiones externas, es la regla que no se toca.
   ============================================================ */
.estilos{
  position:absolute; z-index:2;
  top:50%; right:clamp(20px,7vw,90px); transform:translateY(-50%);
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(.35rem,1.2vw,.9rem);
  text-align:right; pointer-events:none;
}
.estilos__palabra{
  opacity:0;                       /* lo sube el scroll */
  color:#f5f4f0;
  font-family:Georgia,serif;
  font-size:clamp(1.7rem,4.4vw,3.9rem);
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;

  /* Degradado a negro dentro de la palabra.
     🚨 MEDIDO ANTES DE ELEGIR EL TONO. Contra el mural, un final en
     negro puro da 1,08:1 y la mitad de abajo de la letra desaparece.
     Incluso un gris medio (#6e6e6e) se queda en 2,81. Por eso el
     oscuro entra SOLO en el ultimo cuarto: el 74% de la letra sigue
     en blanco —13,04:1— y el degradado se lee como acabado, no como
     texto roto.
     ⚠️ Este es el UNICO degradado dentro de texto de la pagina. El
     estandar lo permite una vez, y va aqui: el titular no lo lleva. */
  background:linear-gradient(180deg,#ffffff 0%,#f5f4f0 46%,#9a9a9a 74%,#4a4a4a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 18px #000);   /* la sombra ya no puede ir en text-shadow */
  white-space:nowrap;
  will-change:opacity,transform;
}

/* En movil el hero ya lleva el nombre y el mural: cuatro palabras mas
   al lado lo dejarian ilegible. Se bajan de tamano y se pegan arriba,
   que es donde queda hueco de verdad. */
@media (max-width:700px){
  .estilos{
    top:clamp(96px,13svh,150px); transform:none;
    right:16px; gap:.2rem;
  }
  .estilos__palabra{ font-size:clamp(1.25rem,6.2vw,2rem); text-shadow:0 2px 16px #000 }
}

/* 🚨 Sin JavaScript las cuatro palabras se quedarian invisibles para
   siempre, porque su opacidad la sube el scroll. Con .no-js se ven
   las cuatro puestas. Regla del estandar: si el JS falla, la pagina
   se lee entera igual. */
.no-js .estilos__palabra{ opacity:1 }

/* Si el navegador no sabe recortar el fondo al texto, las letras
   saldrian transparentes. Con esto salen blancas y se leen. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .estilos__palabra{ background:none; color:#f5f4f0 }
}

/* ============================================================
   EL FONDO DE «DISEÑOS PERSONALIZADOS» — 25/08/2026
   ============================================================
   Angeles de marmol, blanco y negro. Reemplaza al patron
   ornamental, que Maxi descarto.

   La imagen NO se carga al abrir la pagina: son 71,8 KB y la
   seccion esta a cuatro pantallas. La pone el IntersectionObserver.

   🚨 LA CAPA NO ES PLANA, Y AHI ESTA EL TRUCO.
   Esta imagen es CLARA — su percentil 95 es 240 de luminancia,
   frente a los 186 del patron anterior. Una capa plana lo bastante
   fuerte para que se lea el titular apagaria los angeles del todo.
   Por eso la capa es un degradado vertical:

     arriba (84%)  -> donde va el titular en blanco
     centro (60%)  -> donde no hay texto: los angeles se ven
     abajo  (74%)  -> los pies de foto de la galeria

   Medido en el peor punto de cada tramo (240 de luminancia):
     al 84% -> 13,81:1   ·   al 60% -> 5,60:1   ·   al 74% -> 9,70:1
   Los tres pasan el 4,5 exigido.

   🚨 Y el respaldo .no-js: sin JavaScript el fondo se pone igual.
   ============================================================ */
.obra-section.fondo-cargado,
.no-js .obra-section{
  background-image:
    linear-gradient(180deg,
      rgba(5,5,5,.86) 0%,
      rgba(5,5,5,.84) 14%,
      rgba(5,5,5,.60) 42%,
      rgba(5,5,5,.60) 66%,
      rgba(5,5,5,.74) 100%),
    url('fondo-angeles.webp');
  background-position:center, center top;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll;
}

/* ============================================================
   LOS RECUADROS, ILUMINADOS — 25/08/2026
   ============================================================
   Con el fondo de angeles detras, las piezas quedaban flotando en
   el aire sin filo: no se distinguia donde empieza cada una.

   El relieve se hace con TRES capas, y ninguna es un blur animado:

     1. un filo claro de 1 px  -> dice donde acaba el recuadro
     2. dos halos blancos sin desplazar -> la luz que sale de el
     3. una sombra fuerte y desplazada abajo -> lo despega del fondo

   🔑 El truco del 3D es el CONTRASTE ENTRE 1 Y 3: luz arriba y
   alrededor, oscuridad debajo. El ojo lee eso como volumen. Un halo
   solo, sin la sombra de abajo, se ve plano y brillante.

   🚨 Nada de esto se anima durante el scroll: el box-shadow se pinta
   una vez. Solo cambia al pasar por encima, y ahi si con transicion.
   ============================================================ */
.obra__pieza img{
  box-shadow:
    0 0 0 1px rgba(245,244,240,.22),      /* el filo */
    0 0 24px rgba(245,244,240,.15),       /* halo cercano */
    0 0 72px rgba(245,244,240,.07),       /* halo lejano */
    0 22px 44px rgba(0,0,0,.62);          /* la sombra que lo levanta */
  transition:
    filter .6s ease,
    transform .6s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s ease;
}

/* Al pasar por encima la luz crece y la pieza sube mas: se refuerza
   la misma idea, no se inventa otra. */
.obra__pieza:hover img,
.obra__pieza:focus-within img{
  box-shadow:
    0 0 0 1px rgba(245,244,240,.42),
    0 0 34px rgba(245,244,240,.26),
    0 0 96px rgba(245,244,240,.12),
    0 30px 56px rgba(0,0,0,.68);
}

@media (prefers-reduced-motion: reduce){
  .obra__pieza img{ transition:none }
}

/* ============================================================
   LAS TRES DIVISIONES — 25/08/2026
   ============================================================
   Reemplazan a la maqueta de «horarios + dos botones». Cada una
   es una puerta distinta a la misma conversacion de WhatsApp, con
   el mensaje ya escrito y DISTINTO en cada una: quien escribe por
   un cover-up no manda el mismo mensaje que quien pide precio.

   🚨 LAS FOTOS VAN EN GRIS, Y NO ES UN CAPRICHO. La 2 es rosa
   fuerte y la 1 lleva un smiley amarillo; esta web es blanco y
   negro estricto y sin acento. Puestas a color rompen el sistema.
   En gris pertenecen, y al pasar por encima asoma algo de color —
   que es exactamente lo que ya hace la galeria de arriba.
   ============================================================ */
.servicios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1.6rem,3.5vw,3rem);
  margin-bottom:clamp(3.5rem,7vw,6rem);
}

.servicio{ display:flex; flex-direction:column; margin:0 }

.servicio__foto{ margin-bottom:1.5rem; border-radius:var(--radius); overflow:hidden }
.servicio__foto img{
  display:block; width:100%; height:clamp(230px,26vw,340px);
  object-fit:cover; object-position:center 28%;
  filter:grayscale(1) contrast(1.08) brightness(.88);
  transition:filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

/* Misma luz que las piezas de la galeria: filo, halo y sombra que
   lo despega. No se inventa un segundo lenguaje para lo mismo. */
.servicio__foto{
  box-shadow:
    0 0 0 1px rgba(245,244,240,.20),
    0 0 22px rgba(245,244,240,.13),
    0 0 66px rgba(245,244,240,.06),
    0 20px 40px rgba(0,0,0,.6);
  transition:box-shadow .5s ease;
}
.servicio:hover .servicio__foto,
.servicio:focus-within .servicio__foto{
  box-shadow:
    0 0 0 1px rgba(245,244,240,.40),
    0 0 32px rgba(245,244,240,.24),
    0 0 90px rgba(245,244,240,.11),
    0 28px 52px rgba(0,0,0,.66);
}
.servicio:hover .servicio__foto img,
.servicio:focus-within .servicio__foto img{
  filter:grayscale(.78) contrast(1.14) brightness(1);
  transform:scale(1.04);
}

.servicio__titulo{
  margin:0 0 .7rem;
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.04; letter-spacing:-.035em; text-transform:uppercase;
}
.servicio__texto{
  margin:0 0 1.4rem; font-size:1rem; line-height:1.6;
  color:rgba(245,244,240,.72); max-width:38ch; text-wrap:pretty;
}
.servicio__accion{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  border:1px solid rgba(245,244,240,.34); color:#f5f4f0; text-decoration:none;
  font-weight:600; font-size:.95rem;
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.servicio__accion:hover,
.servicio__accion:focus-visible{
  transform:translateY(-2px);
  border-color:#f5f4f0; background:#f5f4f0; color:#050505;
}

/* El horario baja a una franja: sigue siendo dato necesario, pero
   ya no es el protagonista de la seccion. */
.citas__pie{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.2rem,3vw,3rem); align-items:center;
  padding-top:clamp(1.8rem,4vw,2.8rem);
  border-top:1px solid rgba(245,244,240,.16);
}
.citas__pie .horario{ margin:0 }
.citas__pie .horario li{ padding:11px 0 }

/* ============================================================
   EL PIE — 25/08/2026 (dos esquinas)
   ============================================================
   El grafiti va de fondo, centrado. Los datos se reparten en las
   dos esquinas de abajo y dejan el centro libre para el dibujo.

   El grafiti llego en tinta NEGRA sobre papel BLANCO — al reves de
   lo que hace falta. Se invirtio y el alfa se CALCULO en vez de
   recortarlo, como dice el estandar para los logos sobre negro:
   asi el degradado del trazo se conserva (16% de la imagen es
   semitransparente) en vez de quedar con el borde sucio.

   🔑 Y el hallazgo del peso: el canal ALFA iba sin perdida y se
   llevaba 110 KB el solo. Bajandolo a 55 la imagen no cambia y el
   archivo pasa de 162 KB a 50,8.

   🚨 PENDIENTE: Aviso legal y Privacidad apuntan a "#". Sin esas
   paginas la web no se publica.
   ============================================================ */
.pie{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:clamp(1.6rem,4vw,3rem);
  min-height:clamp(19rem,33vw,27rem);
  padding:clamp(3.6rem,7vw,6rem) clamp(20px,6vw,80px) clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(245,244,240,.16);
  background:#050505;
  overflow:hidden;
}

.pie::before{
  content:''; position:absolute; inset:0;
  background-position:center 42%; background-repeat:no-repeat;
  background-size:min(84%, 36rem) auto;
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.pie.fondo-cargado::before,
.no-js .pie::before{
  background-image:url('firma-undici.webp');
  opacity:.30;
}

.pie__esquina{ position:relative; max-width:30ch }
.pie__esquina--der{ text-align:right; margin-left:auto }

.pie__rotulo{
  margin:0 0 .6rem;
  font-family:'Figtree',system-ui,sans-serif;
  font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,244,240,.5);
}
.pie__esquina p{ margin:0 0 .35rem; font-size:.92rem; line-height:1.6 }
.pie__apagado{ color:rgba(245,244,240,.5) }
.pie__esquina a{ color:#f5f4f0; text-decoration:none; border-bottom:1px solid rgba(245,244,240,.3) }
.pie__esquina a:hover{ border-bottom-color:#f5f4f0 }

/* En movil no hay dos esquinas que valgan: se apilan y el dibujo
   queda detras de las dos. */
@media (max-width:640px){
  .pie{ flex-direction:column; align-items:flex-start; min-height:0 }
  .pie__esquina--der{ text-align:left; margin-left:0 }
}

/* ============================================================
   EL VIDEO DEL ESTUDIO — 25/08/2026
   ============================================================
   Sustituye a la foto fija de fondo. Va de IDA Y VUELTA: se pego
   el clip y el mismo clip al reves, asi el bucle no da el salto
   que se ve cuando un travelling vuelve de golpe al principio.
   10 s, 442 KB.

   🚨 preload="none" y la ruta en data-video: NO se descarga al
   abrir la pagina. Lo pone el IntersectionObserver al acercarse.
   Mientras tanto se ve el poster, que es el primer fotograma del
   propio video: no hay salto al arrancar.

   🚨 Con prefers-reduced-motion el video NO se reproduce y se
   queda en el poster. Hay gente a la que el movimiento le marea;
   no es un detalle opcional.
   ============================================================ */
.studio__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  filter:grayscale(1) contrast(1.06) brightness(.72);
}

/* Mientras no haya video cargado manda el fondo de la foto, que ya
   estaba puesto: si algo falla, la seccion nunca queda en negro. */
@media (prefers-reduced-motion: reduce){
  .studio__video{ filter:grayscale(1) contrast(1.06) brightness(.72) }
}

/* ============================================================
   STAFF — 25/08/2026
   ============================================================
   Sustituye a la vieja «Diseños exclusivos», que eran cuatro
   veces la misma imagen y un titular: no decia nada, y ademas
   repetia la palabra «diseños» con la seccion de abajo.

   Cada artista es un enlace a su propia pagina.
   ⏳ Las fotos son huecos marcados a proposito. No se pone un
   <img> apuntando a un archivo que no existe.
   ============================================================ */
.staff{
  padding:clamp(4.5rem,9vw,8rem) clamp(20px,6vw,80px);
  border-top:1px solid rgba(245,244,240,.16);
  background:#050505;
}
.staff__eyebrow{
  margin:0; font-size:.7rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; opacity:.6;
}
.staff h2{
  margin:1.1rem 0 1rem;
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:.94; letter-spacing:-.05em; max-width:14ch;
}
.staff__lead{
  margin:0 0 clamp(2.8rem,5vw,4.4rem);
  max-width:52ch; line-height:1.6; color:rgba(245,244,240,.72);
  text-wrap:pretty;
}
.staff__rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
}

.artista{ display:flex; flex-direction:column; text-decoration:none; color:#f5f4f0 }

/* El hueco de la foto: mismo lenguaje de luz que las piezas y los
   servicios. Nada nuevo. */
.artista__foto{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  aspect-ratio:3/4; margin-bottom:1.2rem;
  border-radius:var(--radius); background:#0c0c0c;
  color:rgba(245,244,240,.45);
  box-shadow:
    0 0 0 1px rgba(245,244,240,.2),
    0 0 22px rgba(245,244,240,.12),
    0 0 66px rgba(245,244,240,.05),
    0 20px 40px rgba(0,0,0,.6);
  transition:box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.artista__foto svg{ width:38px; height:38px }
.artista__foto span{
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.artista:hover .artista__foto,
.artista:focus-visible .artista__foto{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(245,244,240,.42),
    0 0 32px rgba(245,244,240,.24),
    0 0 92px rgba(245,244,240,.11),
    0 28px 52px rgba(0,0,0,.68);
}

.artista__nombre{
  margin:0 0 .3rem;
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.8rem);
  letter-spacing:-.035em; text-transform:uppercase; line-height:1.05;
}
.artista__esp{ margin:0 0 .9rem; font-size:.93rem; color:rgba(245,244,240,.6) }
.artista__ver{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,244,240,.75);
}
.artista:hover .artista__ver svg{ transform:translateX(4px) }
.artista__ver svg{ transition:transform .25s ease }

/* ============================================================
   LA FICHA DE CADA ARTISTA
   ============================================================ */
.ficha{ padding:clamp(7rem,11vw,10rem) clamp(20px,6vw,80px) clamp(4rem,8vw,7rem) }
.ficha__volver{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(2.4rem,5vw,4rem);
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,244,240,.7); text-decoration:none;
}
.ficha__volver:hover{ color:#f5f4f0 }

.ficha__intro{
  display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  margin-bottom:clamp(3rem,6vw,5rem);
}
@media (max-width:720px){ .ficha__intro{ grid-template-columns:1fr } }

.ficha__retrato,
.ficha__hueco{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  border-radius:var(--radius); background:#0c0c0c; color:rgba(245,244,240,.45);
  box-shadow:0 0 0 1px rgba(245,244,240,.18), 0 20px 40px rgba(0,0,0,.6);
}
.ficha__retrato{ aspect-ratio:3/4 }
.ficha__retrato svg,
.ficha__hueco svg{ width:40px; height:40px }
.ficha__retrato span,
.ficha__hueco span{
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; text-align:center;
}
.ficha__hueco{
  aspect-ratio:16/9; margin-bottom:clamp(3rem,6vw,5rem);
}

.ficha__eyebrow{
  margin:0; font-size:.7rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(245,244,240,.6);
}
.ficha__texto h1{
  margin:1rem 0 1.6rem;
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:.94; letter-spacing:-.055em; text-transform:uppercase;
}
.ficha__texto p{ margin:0 0 1.1rem; line-height:1.65; max-width:56ch; color:rgba(245,244,240,.78) }
.ficha__texto .boton{ margin-top:.9rem }

.ficha__rotulo{
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  font-family:Georgia,serif; font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  letter-spacing:-.04em; text-transform:uppercase;
}
.ficha__rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.2rem,2.5vw,2rem); margin-bottom:clamp(3.5rem,7vw,6rem);
}
.ficha__pieza{ margin:0 }
.ficha__pieza img{
  display:block; width:100%; height:auto; border-radius:var(--radius);
  filter:grayscale(1) contrast(1.06) brightness(.9);
  box-shadow:
    0 0 0 1px rgba(245,244,240,.22),
    0 0 24px rgba(245,244,240,.15),
    0 22px 44px rgba(0,0,0,.62);
}

.ficha__otros{ display:flex; flex-wrap:wrap; gap:12px }
.otro{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 24px; border-radius:var(--radius);
  border:1px solid rgba(245,244,240,.22); text-decoration:none; color:#f5f4f0;
  transition:border-color .25s ease, transform .25s ease;
}
.otro span{ font-size:.82rem; color:rgba(245,244,240,.55) }
.otro:hover{ border-color:#f5f4f0; transform:translateY(-2px) }

/* ============================================================
   STAFF SOBRE LA ESCENA — 25/08/2026
   ============================================================
   El staff vive DENTRO de .designs-section, no en una seccion
   nueva. Motivo: ese fondo —las tres capas de angeles enmascaradas
   que flotan, mas el parallax del scroll— cuelga de esa clase y de
   su gancho en hero-scroll.js. Sacarlo a otra seccion lo mataba,
   que es justo lo que paso y Maxi vio en seguida.

   Aqui solo se corrige lo que estorba: la seccion venia centrada
   con place-items para un titular solo, y ahora lleva una rejilla
   que tiene que ocupar el ancho.
   ============================================================ */
.designs-section.staff{
  display:block;
  place-items:normal;        /* venia centrando un titular solo */
  min-height:0;
  padding:clamp(4.5rem,9vw,8rem) clamp(20px,6vw,80px);
  border-top:1px solid rgba(255,255,255,.14);
}

/* 🔑 El width:100% NO es decorativo. Sin el, el bloque se quedaba
   en 660 px de los 1.111 disponibles y la rejilla salia a DOS
   columnas en vez de cuatro. Medido: con width:100% pasa a 1.111. */
.staff__contenido{ position:relative; z-index:1; width:100% }
.designs-section.staff .staff__cabecera{ margin-bottom:clamp(2.6rem,5vw,4.2rem) }

/* Las tarjetas van sobre un fondo con movimiento: necesitan su
   propia base opaca para que el nombre se lea siempre. */
.designs-section.staff .artista__foto{ background:rgba(6,6,6,.86) }

/* ── Franja de demostración ──────────────────────────────────
   Fija abajo y fuera del flujo: la cabecera ya ocupa el borde
   superior fijo, y así no se toca la matemática del scroll del
   hero. El pie gana aire para que la franja no le tape la última
   línea. */
.demo-aviso{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#000;border-top:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.78rem;letter-spacing:.02em;line-height:1.4;
  padding:.6rem 1.1rem;text-align:center}
.demo-aviso a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.pie{padding-bottom:4.5rem}
@media(max-width:520px){.demo-aviso{font-size:.72rem;padding:.5rem .7rem}}