/* ===== MAQUETA 3 · DE UN VISTAZO ====================================
   Sin menu. Una sola pagina, todo seguido. Es la maqueta para quien
   quiere mandar un enlace y ya esta.

   Tres cosas la separan de la clasica, y ninguna es el color:
     · una portada a pantalla casi completa, con la rama a su tamano;
     · EL VISTAZO: los tres datos a toda pagina, pegados a la portada;
     · el recorrido alterna fondo blanco y fondo nieve, para que en
       cinco mil pixeles de scroll se note por donde va uno.

   ── Que se rehizo y por que ─────────────────────────────────────────
   1. EL ARTE ERA UN CODIGO DE BARRAS. La rama mide 300x820 y estaba
      puesta a `repeat-x` con `background-size:auto 230%`: en una banda
      ancha salian hojas del tamano de un puno repetidas doce veces, y
      los nombres quedaban dentro del dibujo. Encima el gris claro del
      «Nos casamos» media 3,58:1 sobre la cenefa, con 4,5 de minimo.
      Ahora son dos ramas a su proporcion, en los extremos de la
      portada, donde no hay texto.
   2. NO HABIA NINGUN VISTAZO. La maqueta se llama «de un vistazo» y
      para saber el dia y el sitio habia que bajar dos pantallas.
   3. LA COLUMNA ERA DE 620px CENTRADA EN 1280: mil pixeles de scroll
      con dos tercios de la pantalla en blanco a los lados y todos los
      bloques con el mismo peso.
   ==================================================================== */

.m-scroll{
  /* La medida de la columna. 620 se quedaba corto para el mapa y las
     tres fichas del dia; 720 es el limite antes de que la prosa pase
     de 85 caracteres por linea. */
  --medida:720px;
  --margen:clamp(1.3rem,5vw,2rem);
}

/* ── la portada ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:76vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:clamp(3.5rem,10vh,6rem) var(--margen);
  border-bottom:1px solid var(--linea);
  overflow:hidden;
}
/* DOS ramas, una en cada extremo y a su proporcion (300x820). El texto
   va centrado, asi que los margenes son el unico sitio de esta portada
   donde el dibujo no se le pone debajo a nada. Antes iba repetida en
   horizontal y ampliada al 230%: hojas gigantes por toda la cabecera y
   los nombres dentro.

   La de la derecha es un `::after` espejado y no una segunda capa de
   `background-image` porque una capa no se puede voltear: repetida tal
   cual, las dos ramas se curvan hacia el mismo lado y la portada
   parece un mosaico. El `::after` va DENTRO de `.arte`, asi que hereda
   su opacidad y su mascara y no hay que escribirlas dos veces. */
.hero .arte{
  position:absolute;inset:0;
  background:var(--textura) no-repeat left -14px bottom -26px/auto 74%;
  /* La opacidad «de hero», no la del margen: aqui hay texto en la
     misma pantalla y manda la legibilidad. La otra es casi el doble. */
  opacity:var(--textura-op-hero,.55);
  /* Se apaga hacia arriba para que el «Nos casamos» —que va en gris y
     es el texto mas debil de la portada— nunca caiga encima de una
     hoja. Medido en el prototipo: 3,58:1 con 4,5 de minimo.
     OJO: los #000 NO son color, son el canal alfa del degradado
     (PROYECTO.md §4.11). Sustituirlos rompe el difuminado. */
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 84%);
          mask-image:linear-gradient(to top,#000 30%,transparent 84%);
}
.hero .arte::after{
  content:"";
  position:absolute;inset:0;
  background:inherit;
  transform:scaleX(-1);
}
.hero > *{position:relative}

.hero .sobre{
  font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gris);
}
.hero .nombres{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.9rem,9vw,5.6rem);line-height:1;
  color:var(--tinta);margin:1.2rem 0 0;
}
.hero .nombres .amp{font-style:italic;color:var(--acento)}
.hero .filete{width:40px;height:1px;background:var(--tinta);opacity:.22;margin:1.6rem auto}
.hero .lugar{
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gris);
}
.hero .cd{margin-top:clamp(1.8rem,5vh,2.8rem)}

/* ── el recorrido ──────────────────────────────────────────────────
   Una sola columna, pero el FONDO va a toda pagina: el relleno lateral
   es lo que centra la medida. Asi se puede alternar de banda sin meter
   un `div` de envoltura por seccion, que obligaria a tocar el HTML
   compartido. */

.flujo{max-width:none;margin:0;padding:0}
.flujo > section{
  max-width:none;
  padding-left:max(var(--margen),calc((100% - var(--medida)) / 2));
  padding-right:max(var(--margen),calc((100% - var(--medida)) / 2));
}
/* El relieve del sistema es cambiar `--blanco` por `--nieve`, nunca
   elevar (PROYECTO.md §10). Aqui eso es lo unico que le da ritmo a
   cinco mil pixeles seguidos. Empieza en nieve porque la primera
   seccion es la agenda, que es la tira del vistazo. */
.flujo > section:nth-of-type(odd){background:var(--nieve)}

/* ── EL VISTAZO: la agenda, a toda pagina ──────────────────────────
   `derivar.secciones_para` pone la agenda la PRIMERA de «La
   celebracion» porque «es el resumen y es lo que se mira de un
   vistazo». En esta maqueta eso hay que verlo: sale de la columna, se
   pega a la portada y se lee como una tira de datos. Es el bloque que
   da nombre a la maqueta, y no hace falta inventar ninguno nuevo —ni
   repetir la fecha dos veces, que es lo que pasaba con una tira
   propia—.

   El selector lleva la clase del body por delante para pasar de (0,3,1)
   a (0,4,1): las reglas de conteo de fichas de mas abajo llevan
   `:has(>:last-child:nth-child(2))`, que hereda la especificidad de su
   argumento y pesa (0,4,0). Sin el `.m-scroll`, con una agenda de dos
   fichas ganaba aquella y la tira se partia (§4.32). */
.m-scroll .flujo > section[data-bloque="agenda"]{
  padding:0;
  background:var(--nieve);
  border-bottom:1px solid var(--linea);
}
.m-scroll .flujo > section[data-bloque="agenda"] .tarjetas{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:0;
}
.m-scroll .flujo > section[data-bloque="agenda"] .tarjeta{
  border:0;
  padding:clamp(1.5rem,3.4vw,2.2rem) clamp(1rem,2.5vw,1.6rem);
}
.m-scroll .flujo > section[data-bloque="agenda"] .tarjeta+.tarjeta{
  border-left:1px solid var(--linea);
}
@media (max-width:700px){
  .m-scroll .flujo > section[data-bloque="agenda"] .tarjeta+.tarjeta{
    border-left:0;border-top:1px solid var(--linea);
  }
}
/* Entre dos bandas del mismo color hace falta el filete; entre dos de
   distinto, el cambio de fondo ya separa y el filete sobra. Como se
   alternan, siempre son de distinto: se quita. */
.flujo > section+section{border-top:0}
.flujo > .cabecera+section{border-top:0}

/* La cabecera de pagina interior comparte medida con las secciones.
   (Hoy no se llega a usar: esta maqueta vuelca la boda entera en la
   portada. Se mantiene por si algun dia deja de ser de una pagina.) */
.flujo > .cabecera{
  max-width:none;
  padding-left:max(var(--margen),calc((100% - var(--medida)) / 2));
  padding-right:max(var(--margen),calc((100% - var(--medida)) / 2));
}

/* Los titulares respiran mas que en la clasica: en un scroll unico son
   lo unico que marca «aqui empieza otra cosa». */
.flujo .sec-head{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.flujo .sec-head h2{font-size:clamp(1.9rem,5vw,2.7rem)}

/* En columna estrecha las fichas van en fila y sin caja: filete solo
   entre ellas. */
.flujo .tarjetas{grid-template-columns:repeat(3,1fr);border:0}
/* La misma cuenta que hace base.css: con dos fichas, dos columnas y no
   tres con un hueco al final. Va repetida aqui porque `.flujo
   .tarjetas` pisa la regla compartida, y dentro de una media query por
   lo mismo que alli: `:has()` hereda la especificidad de su argumento
   y sin la media se comia el apilado de movil (§4.32). */
@media (min-width:701px){
  .flujo .tarjetas:has(>:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  .flujo .tarjetas:has(>:last-child:nth-child(1)){grid-template-columns:1fr}
}
.flujo .tarjeta{border:0;border-right:1px solid var(--linea);padding:1.3rem .8rem}
.flujo .tarjeta:last-child{border-right:0}
.flujo .tarjeta .ic{width:26px;height:26px}
.flujo .tarjeta .v{font-size:1.5rem}
.flujo .tarjeta .sub{font-size:.8rem}

/* El pie cierra la pagina con la misma medida que todo lo demas. */
.m-scroll footer{margin-top:0}

@media (max-width:700px){
  .flujo .tarjetas{grid-template-columns:1fr}
  .flujo .tarjeta{border-right:0;border-bottom:1px solid var(--linea)}
  .flujo .tarjeta:last-child{border-bottom:0}
  .vistazo .dato+.dato{border-left:0;border-top:1px solid var(--linea)}
  /* En movil no hay margen lateral libre: las dos ramas se cruzarian
     por detras de los nombres. Una sola, abajo y centrada. */
  .hero .arte{
    background-position:center bottom -16px;
    background-size:auto 46%;
  }
  .hero .arte::after{display:none}
  /* Y el contenido se sube: centrado en una portada de 82vh, la cuenta
     atras caia justo encima de la rama —numeros en serif sobre hojas,
     que es el fallo del §4.35 en otro sitio—. Con el relleno de abajo,
     el texto se queda en la mitad superior y el dibujo tiene la
     inferior para el solo. No se apaga el arte: se aparta el texto. */
  .hero{
    min-height:82vh;
    padding-bottom:clamp(9rem,30vh,16rem);
  }
}