/* ═══════════════════════════════════════════════════════════════════
   ALZADO — sistema visual
   Tesis: el dibujo se convierte en edificio. Línea → luz → materia.
   Paleta casi monocroma; el color lo pone la obra fotografiada.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#0b0b0d;
  --tinta-2:#141417;
  --cal:#f2efe9;
  --cal-2:#e6e1d8;
  --hormigon:#8f8a83;
  --hormigon-dim:#6a655f;
  --teja:#a84f2e;              /* acento único, <8% de superficie */
  --linea:rgb(242 239 233 / .14);

  --paso-0:1.0625rem;          /* 17px, no 16 */
  --h-hero:clamp(3rem,10.5vw,10.5rem);
  --h-grande:clamp(2rem,5.2vw,4.75rem);
  --h-medio:clamp(1.5rem,3vw,2.5rem);
  --micro:.7rem;

  --borde:clamp(1.25rem,4.5vw,4.5rem);
  --pad-sec:clamp(5.5rem,12vw,11rem);
  --r:12px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;background:var(--tinta);color:var(--cal);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--paso-0);line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--teja);outline-offset:4px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--cal);color:var(--tinta);padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.04em;line-height:1.0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.envoltura{padding-inline:var(--borde)}
section{padding-block:var(--pad-sec)}

.micro{font-size:var(--micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hormigon)}
.apagado{color:var(--hormigon)}
.grande{font-size:var(--h-grande);letter-spacing:-.04em;line-height:1.06}
.mediano{font-size:var(--h-medio);letter-spacing:-.03em;line-height:1.1}

/* ─── Máscaras de línea (revelado tipográfico) ───────────────────── */
.linea{display:block;overflow:hidden}
.linea-in{display:block;will-change:transform}
.palabra-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.palabra{display:inline-block;will-change:transform,opacity}

/* Sólo se oculta si el JS confirmó que GSAP cargó */
html.motion .linea-in{transform:translateY(105%)}
html.motion [data-reveal],
html.motion [data-item]{opacity:0}
html.motion [data-clip]{clip-path:inset(0 0 100% 0)}
html.motion .hero-cue,
html.motion .hero-eyebrow,
html.motion .hero-sub,
html.motion .hero-pie .btn{opacity:0}

/* ─── Navegación ─────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem var(--borde);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease);
}
.nav.compacta{background:rgb(11 11 13 / .72);backdrop-filter:blur(14px) saturate(1.1)}
.nav-marca{font-weight:500;letter-spacing:.3em;font-size:.78rem;text-decoration:none}
.nav-menu{display:flex;gap:clamp(.9rem,2.2vw,2rem);align-items:center}
.nav-menu a{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--hormigon);transition:color .4s var(--ease)}
.nav-menu a:hover{color:var(--cal)}
.nav-cta{padding:.5rem .95rem;border:1px solid var(--linea);border-radius:100px;color:var(--cal)!important}
.nav-cta:hover{background:var(--cal);color:var(--tinta)!important}
/* En móvil se conservan Obra + el CTA. Ocultar TODA la navegación y dejar
   sólo el botón deja la página sin forma de llegar a las secciones. */
@media (max-width:640px){
  .nav-menu a:not(.nav-cta):not([href="#obra"]){display:none}
  .nav-menu{gap:1rem}
}

/* ─── Botón ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;flex:none;
  padding:.9rem 1.6rem;border:0;border-radius:100px;cursor:pointer;
  background:var(--cal);color:var(--tinta);
  font:inherit;font-size:.88rem;font-weight:500;text-decoration:none;
  transition:background .45s var(--ease),color .45s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--teja);color:var(--cal)}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active{transform:scale(.985)}

/* ─── HÉROE ──────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;padding-block:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;overflow:hidden;
}
.hero-lienzo{position:absolute;inset:0;z-index:-2}
#escena{width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
#escena.viva{opacity:1}
.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.42);
  /* La transición vive aquí, no en la regla .con-3d: si sólo está en el estado
     tapado, al quitar la clase el póster reaparece de golpe. */
  transition:opacity .8s var(--ease);
}
.hero-lienzo.con-3d .hero-poster{opacity:0}
.hero-grano{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgb(11 11 13/.55) 0%,rgb(11 11 13/.15) 38%,rgb(11 11 13/.88) 100%);
}
/* En móvil el bloque de texto ocupa más alto y cae sobre el hormigón claro:
   el velo tiene que cerrar antes para no comerse el contraste. */
@media (max-width:760px){
  .hero::after{
    background:linear-gradient(180deg,rgb(11 11 13/.6) 0%,rgb(11 11 13/.2) 26%,rgb(11 11 13/.82) 62%,rgb(11 11 13/.96) 100%);
  }
}
.hero-texto{padding-bottom:clamp(3.5rem,8vw,6rem)}
.hero-titular{font-size:var(--h-hero);margin-block:.5rem .9rem}
.hero-pie{display:flex;flex-wrap:wrap;gap:1.5rem clamp(1.5rem,5vw,4rem);align-items:flex-end;justify-content:space-between}
.hero-sub{max-width:34ch;color:var(--cal-2)}
.hero-cue{
  position:absolute;left:50%;transform:translateX(-50%);bottom:1.4rem;
  display:flex;align-items:center;gap:.7rem;
}
.hero-cue .hero-cue-linea{height:26px}
.hero-cue-linea{width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--hormigon));animation:caer 2.4s var(--ease) infinite}
@keyframes caer{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.hero-cue{display:none}}

/* Viewports bajos (móvil apaisado, portátiles pequeños): el héroe ocupa
   100svh y el bloque de texto sube hasta chocar con el logotipo de la nav.
   Se recorta el titular y se le da aire por arriba. */
@media (max-height:700px) and (min-width:641px){
  :root{--h-hero:clamp(2.5rem,7vw,5rem)}
  .hero-texto{padding-top:4.5rem;padding-bottom:clamp(2rem,5vh,3.5rem)}
  .hero-cue{display:none}
}

/* ─── Manifiesto ─────────────────────────────────────────────────── */
.manifiesto{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:900px){.manifiesto{grid-template-columns:13rem minmax(0,1fr)}}
/* Una frase al maximo cuerpo y la nota mucho mas abajo en la escala: antes
   todo iba al mismo tamano y el parrafo entero pedia leerse como titular. */
.manifiesto .grande{max-width:18ch;font-size:clamp(2rem,5.4vw,4.5rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.manifiesto .grande .acento{color:var(--teja)}
.manifiesto-cuerpo{display:grid;gap:clamp(1.5rem,3.5vw,2.5rem)}
@media (min-width:1000px){
  .manifiesto-cuerpo{grid-template-columns:minmax(0,1fr) 17rem;align-items:end;gap:clamp(2.5rem,6vw,5rem)}
}
.manifiesto-nota{max-width:34ch;color:var(--cal-2);text-wrap:pretty;border-top:1px solid var(--linea);padding-top:1.1rem}

/* ─── Obra ───────────────────────────────────────────────────────── */
.cab{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--linea);padding-top:1.1rem}
.rejilla{display:grid;gap:clamp(1.75rem,3.5vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.marco{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tinta-2);margin:0}
.marco img{width:100%;height:100%;object-fit:cover}
.proyecto{display:flex;flex-direction:column;gap:.9rem}
.proyecto .marco{aspect-ratio:4/5}
.proyecto .marco img{height:118%}                 /* margen para el parallax */
.proyecto:nth-child(2){margin-top:clamp(0rem,6vw,5rem)}   /* rompe la simetría */
.proyecto-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.proyecto-meta h3{font-size:1.22rem;letter-spacing:-.02em}
.proyecto-datos{display:flex;gap:1.1rem;flex-wrap:wrap;color:var(--hormigon);font-size:.82rem;font-variant-numeric:tabular-nums}

/* ─── LUZ: sección pinneada con vídeo scrubbeado ─────────────────── */
.luz{padding:0;height:340svh;position:relative}
/* Mismo motivo que en .dibujos-fijo: capas absolutas, no grid. */
.luz-fijo{position:sticky;top:0;height:100svh;overflow:hidden}
.luz-video,.luz-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.luz-video{opacity:0;transition:opacity .9s var(--ease)}
.luz-video.viva{opacity:1}
.luz-video.viva + .luz-poster{opacity:0}
.luz-vel{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 11 13/.72) 0%,rgb(11 11 13/.25) 45%,rgb(11 11 13/.85) 100%)}
.luz-texto{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0}
.luz-titular{font-size:var(--h-grande);margin-block:.6rem .8rem}
.luz-sub{max-width:30ch;color:var(--cal-2)}
.luz-hud{
  position:absolute;left:var(--borde);bottom:clamp(2rem,5vw,3.5rem);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.luz-hora{font-size:2.2rem;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.luz-barra{width:clamp(6rem,18vw,14rem);height:1px;background:var(--linea);position:relative}
.luz-barra span{position:absolute;inset:0 auto 0 0;width:0;background:var(--teja)}

/* ─── Galería horizontal ─────────────────────────────────────────── */
.galeria{padding:0;overflow:hidden;position:relative}
/* HUD y cierre de galeria: sin estas reglas los dos eran bloques estaticos
   sin ancho — el HUD se caia del panel fijo al final de la seccion y pegado
   al borde, y el parrafo de cierre quedaba sin medida ni color. */
.galeria-hud{
  position:absolute;left:var(--borde);right:var(--borde);bottom:clamp(1.5rem,4vw,2.5rem);
  display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);pointer-events:none;
}
.galeria-hud .cuenta{font-variant-numeric:tabular-nums;color:var(--cal)}
.galeria-barra{flex:1;height:1px;background:var(--linea);position:relative}
.galeria-barra span{position:absolute;inset:0 auto 0 0;width:0;background:var(--teja)}
.galeria-cierre{flex:0 0 auto;width:clamp(13rem,22vw,18rem);align-self:center}
.galeria-cierre p{color:var(--cal-2);text-wrap:pretty;margin-bottom:1.4rem}
.galeria-track{display:flex;gap:clamp(1rem,2.2vw,2.25rem);align-items:center;height:100svh;padding-inline:var(--borde);will-change:transform}
/* El scrollWidth de un flex no cuenta el padding final: este pseudo-elemento
   devuelve el margen derecho que si no se comía la última pieza. */
.galeria-track::after{content:"";flex:0 0 var(--borde)}
.galeria-intro{flex:0 0 auto;width:clamp(14rem,26vw,21rem);padding-right:clamp(1rem,3vw,3rem)}
.galeria-intro h2{margin-block:.7rem .8rem}
/* Ancho gobernado también por el alto de pantalla: la pieza crece todo lo
   que puede sin que el 3/4 se salga del carril de altura fija. */
.galeria-item{flex:0 0 auto;width:min(38vw,30rem,51svh);min-width:14rem;margin:0}
.galeria-item .marco{transition:clip-path 1.05s cubic-bezier(.16,1,.3,1)}
.galeria-item .marco img{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.galeria-item figcaption{transition:opacity .7s ease .2s,transform .7s cubic-bezier(.16,1,.3,1) .2s}
html.motion .galeria-item.cerrada .marco{clip-path:inset(0 0 0 100%)}
html.motion .galeria-item.cerrada .marco img{transform:scale(1.14)}
html.motion .galeria-item.cerrada figcaption{opacity:0;transform:translateY(12px)}
.galeria-item .marco{aspect-ratio:3/4;margin-bottom:.85rem}

/* ─── Datos ──────────────────────────────────────────────────────── */
.datos{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));border-top:1px solid var(--linea);padding-top:clamp(2.5rem,5vw,4rem)}
.cifra{display:block;font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:.45rem}
.dato p{font-size:.85rem;color:var(--hormigon)}

/* ─── Contacto y formulario ──────────────────────────────────────── */
.contacto-cab{margin-bottom:clamp(2.5rem,5vw,4rem)}
.contacto-cab .grande{max-width:14ch;margin-top:.7rem}
.form{display:grid;gap:1.35rem clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));max-width:52rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo-ancho{grid-column:1/-1}
.campo label{font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--hormigon)}
.campo input,.campo textarea{
  font:inherit;color:var(--cal);background:transparent;
  border:0;border-bottom:1px solid var(--linea);border-radius:0;
  padding:.6rem 0;resize:vertical;
  transition:border-color .4s var(--ease);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--hormigon-dim)}
.campo input:hover,.campo textarea:hover{border-color:var(--hormigon)}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--cal)}
.campo.malo input,.campo.malo textarea{border-color:var(--teja)}
.error{font-size:.8rem;color:var(--teja)}
.form-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center}
.form-nota{font-size:.85rem;color:var(--hormigon)}
.form-nota a{color:var(--cal)}
.form-ok{grid-column:1/-1;font-size:.9rem;color:var(--cal);border-left:2px solid var(--teja);padding-left:.9rem}

/* ─── Pie ────────────────────────────────────────────────────────── */
.pie{display:grid;gap:1.75rem;padding-block:2.5rem 3rem;border-top:1px solid var(--linea);font-size:.82rem}
@media (min-width:800px){.pie{grid-template-columns:1fr 1.4fr;gap:3rem}}
.pie-marca{font-weight:500;letter-spacing:.3em;font-size:.78rem;margin-bottom:.3rem}
.pie-creditos p+p{margin-top:.5rem}
.pie a{color:var(--cal)}

/* ─── Reduced motion: estados finales, sin scrub ni smooth scroll ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.motion .linea-in{transform:none}
  html.motion [data-reveal],html.motion [data-item]{opacity:1}
  html.motion [data-clip]{clip-path:none}
  html.motion .galeria-item.cerrada .marco{clip-path:none}
  html.motion .galeria-item.cerrada .marco img{transform:none}
  html.motion .galeria-item.cerrada figcaption{opacity:1;transform:none}
  html.motion .hero-cue,html.motion .hero-eyebrow,html.motion .hero-sub,html.motion .hero-pie .btn{opacity:1}
  .luz{height:auto}
  .luz-fijo{position:relative;height:clamp(28rem,72svh,44rem)}
  .galeria-track{height:auto;flex-wrap:wrap;padding-block:var(--pad-sec)}
  /* Carril apilado: el carro horizontal no existe, así que las piezas no
     pueden depender de él para destaparse. */
  html.motion .galeria-item.cerrada .marco{clip-path:none}
  html.motion .galeria-item.cerrada .marco img{transform:none}
  html.motion .galeria-item.cerrada figcaption{opacity:1;transform:none}
  .galeria-hud{display:none}
  .proyecto .marco img{height:100%}
  #escena{display:none}
  .hero-cue-linea{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════
   PRELOADER — sólo si el JS confirmó GSAP. Nunca atrapa contenido.
   ═══════════════════════════════════════════════════════════════════ */
.carga{display:none}
html.motion .carga{
  display:flex;position:fixed;inset:0;z-index:200;
  flex-direction:column;justify-content:flex-end;gap:1.2rem;
  padding:var(--borde);background:var(--tinta);
}
/* Red de seguridad: si el ticker de GSAP se para, el barrido inline nunca
   llega a escribirse y esta regla retira la portada igualmente. Nunca
   se puede quedar el contenido atrapado detrás del preloader. */
html.motion .carga{transition:transform 1.05s cubic-bezier(.87,0,.13,1) .18s}
html.motion.cargado .carga{pointer-events:none;transform:translateY(-100%)}
.carga-fila{display:flex;align-items:baseline;justify-content:space-between;gap:2rem}
.carga-marca{font-weight:500;letter-spacing:.34em;font-size:clamp(.9rem,2.4vw,1.4rem)}
.carga-num{font-size:clamp(3rem,13vw,10rem);letter-spacing:-.05em;line-height:.85;font-variant-numeric:tabular-nums}
.carga-barra{height:1px;background:var(--linea);position:relative;overflow:hidden}
.carga-barra span{position:absolute;inset:0 auto 0 0;width:0;background:var(--cal)}

/* ═══════════════════════════════════════════════════════════════════
   LOS TRES DIBUJOS — planta · alzado · sección
   ═══════════════════════════════════════════════════════════════════ */
.oculto-visual{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;
}
.dibujos{padding:0;height:210svh;position:relative}
/* Capas absolutas, NO grid: con grid, la fila se dimensiona por la altura
   intrínseca del póster (1800x2400) y el canvas hereda 1900px dentro de un
   contenedor de 900 — el dibujo queda centrado fuera del recorte. */
.dibujos-fijo{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--tinta)}
/* El canvas es el mismo nodo que en el héroe: aquí también tiene que ocupar
   la capa entera, no colocarse en el flujo. */
.dibujos-plano{position:absolute;inset:0;width:100%;height:100%}
/* El dibujo ocupa el panel entero y el texto se sobreimprime en la esquina que
   el dibujo deja libre: el plano manda, la palabra acompaña. El recuadro sólo
   marca el encaje (el script lo lee), no se ve. */
.plano-marco{position:absolute;left:2.5%;right:2.5%;top:6%;bottom:7%;pointer-events:none}

.dibujos-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Si el dibujo no arranca, esto es lo único que se ve: tiene que leerse como
     una decisión, no como un hueco negro. */
  filter:grayscale(1) contrast(1.1) brightness(.52);
  transition:opacity .7s var(--ease);
}
.dibujos-fijo.con-dibujo .dibujos-poster{opacity:0}
.dibujos-texto{position:absolute;top:var(--borde);left:0;right:0;max-width:min(24rem,32vw)}
.dibujos-titular{font-size:clamp(1.6rem,3.2vw,2.6rem);margin-block:.6rem .9rem}
.dibujos-sub{max-width:30ch;font-size:.95rem;color:var(--cal-2)}
.dibujos-hud{
  position:absolute;right:var(--borde);bottom:clamp(2rem,5vw,3.5rem);text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
}
.dibujos-vistas{display:flex;gap:1.1rem;align-items:baseline}
.dibujos-vistas span{
  font-size:clamp(.95rem,2vw,1.5rem);letter-spacing:-.02em;
  color:var(--hormigon-dim);transition:color .5s var(--ease);
}
.dibujos-vistas span.activa{color:var(--teja)}
@media (max-width:760px){
  /* El texto deja de sobreimprimirse y ocupa el ancho, así que el dibujo tiene
     que bajar: si el recuadro sigue cubriendo el panel entero, el titular se le
     queda encima. El hueco de abajo lo reserva el HUD. */
  .dibujos-texto{max-width:none;padding-top:clamp(5rem,16vw,8rem)}
  .plano-marco{left:var(--borde);right:var(--borde);top:42%;bottom:clamp(4.5rem,13vh,6.5rem)}
  .dibujos-hud{right:auto;left:var(--borde);text-align:left;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .carga{display:none!important}
  .dibujos{height:auto}
  .dibujos-fijo{position:relative;height:auto;padding-block:var(--pad-sec)}
  /* Sin movimiento no hay scrub que trace el dibujo: manda la fotografía. */
  .dibujos-plano{display:none}
  .dibujos-poster{position:absolute;inset:0;opacity:.25}
  .dibujos-fijo.con-dibujo .dibujos-poster{opacity:.25}
}