/* MAQUETA · CLÁSICA
   Extraído de maquetas/m1-clasica.html, que es la versión que se revisó en
   pantalla. Si esto y aquello divergen, la maqueta deja de ser
   lo que se aprobó. */

/* ===== MAQUETA 1 · CLÁSICA ==========================================
   Menú arriba, contenido centrado, arte en los dos laterales.
   El slot de arte: lateral en escritorio, oculto en móvil.
   Es la maqueta de la web original.
   ==================================================================== */

.arte-lat{
  background:var(--textura) no-repeat center/cover;
  /* Una sola opacidad, y la que manda es la del motivo.
     Antes esta línea venía seguida de `opacity:.22`, que la machacaba:
     `motivos.py` calcula una opacidad POR motivo (0,5 para un eucalipto
     ralo, 0,7 para unos puntos densos) y el CSS la tiraba a la basura y
     lo pintaba todo al 22 %. De ahí que las cuatro maquetas se vieran
     lavadas y todas iguales por detrás. */
  opacity:var(--textura-op,.5);

  position:fixed;top:0;height:100vh;width:clamp(150px,20vw,300px);
  z-index:-1;pointer-events:none;
  /* OJO: los #000 de abajo NO son color, son el canal alfa del degradado
     (PROYECTO.md §4.11). Sustituirlos rompe el difuminado. */
  -webkit-mask-image:linear-gradient(to left,#000 10%,transparent 88%);
          mask-image:linear-gradient(to left,#000 10%,transparent 88%);
}
.arte-lat.izq{
  left:0;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(to left,#000 10%,transparent 88%);
          mask-image:linear-gradient(to left,#000 10%,transparent 88%);
}
.arte-lat.der{right:0}
.arte-lat svg{width:100%;height:100%}
/* En móvil el arte lateral no cabe, pero desaparecer del todo dejaba la
   página en blanco justo en la mitad de las bodas que se ven desde el
   móvil. Pasa a ser una banda al pie.

   La banda era `position:fixed`, o sea clavada al borde inferior de la
   VENTANA: al hacer scroll, todo el texto de la página le pasaba por
   encima. Medido en Edge a 390 y a 768, las prendas tachadas del dress
   code caían a 1,98:1 y el «Hecha con» del pie a 2,49:1 sobre las hojas,
   con 4,5 de mínimo. Y no era cuestión de bajarle la opacidad: para que
   un texto de 12px en `--gris-cl` aguante 4,5:1 encima, el tinte tiene
   que quedar tan flojo que ya no se ve —sale más lavado que el 0,22 que
   había antes—.
   Así que la banda se cuelga del FINAL DEL DOCUMENTO, no de la ventana:
   ahí no le pasa por encima ni una línea y puede ir a toda su fuerza. El
   pie se aparta para dejarle sitio y lleva su propio fondo, que es el
   único texto que queda en esa zona. */
@media (max-width:900px){
  .arte-lat.izq{display:none}
  .arte-lat.der{
    position:absolute;top:auto;bottom:0;left:0;right:0;
    width:100%;height:clamp(180px,32vh,300px);
    transform:none;
    background-position:center bottom;
    -webkit-mask-image:linear-gradient(to top,#000 14%,transparent 94%);
            mask-image:linear-gradient(to top,#000 14%,transparent 94%);
  }
  /* Sitio para la banda, y fondo propio para que el pie no se lea sobre
     las hojas. */
  .m-clasica footer{
    position:relative;
    background:var(--fondo);
    margin-top:clamp(5rem,20vh,9rem);
  }
}


.portada{
  text-align:center;
  padding:clamp(3rem,9vh,6rem) clamp(1.3rem,5vw,2rem) clamp(2rem,6vh,4rem);
}
.portada .sobre{font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gris-cl)}
.portada .nombres{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3.2rem,13vw,7rem);line-height:.98;
  color:var(--tinta);margin:1.2rem 0 .8rem;
}
.portada .nombres .amp{font-style:italic;color:var(--acento)}
.portada .lugar{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gris)}

.cd{display:flex;justify-content:center;gap:clamp(1.4rem,6vw,3rem);margin-top:2rem}
.cd .u .n{font-family:var(--serif);font-size:clamp(1.5rem,5vw,2rem);color:var(--tinta);display:block}
.cd .u .l{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-cl)}