/* ===== MAQUETA 2 · PARTIDA ==========================================
   Pantalla dividida: a la izquierda un panel fijo del color de la boda
   con los nombres encima; a la derecha, todo el contenido en una
   columna con scroll, alineado al margen y no centrado.

   El slot de arte aqui es el FONDO COMPLETO del panel, no un lateral
   difuminado. Misma capa de arte que la clasica, otro sitio.
   En movil el panel pasa a ser una portada de 72vh.

   ── Que se rehizo y por que ─────────────────────────────────────────
   1. La PORTADA SALIA VACIA. El panel pintaba los nombres y la columna
      de la derecha, media pantalla, se quedaba en blanco: la cuenta
      atras y las puertas viven dentro de la seccion `portada`, que esta
      maqueta se salta para no duplicar los nombres. Ahora la cuenta
      atras esta en el panel y la columna abre con los datos y las
      puertas.
   2. EL ARTE ERA UN PAPEL PINTADO. `center/cover` estira un dibujo de
      300x820 hasta el ancho del panel: cada hoja acababa midiendo 50px
      y el conjunto se leia como globos, no como una rama. Ahora es una
      textura a escala pequena y con la zona de los nombres despejada.
   3. LAS TARJETAS IBAN A UNA COLUMNA SIEMPRE, hasta en un monitor: tres
      cajas enormes apiladas con un dato dentro de cada una.
   ==================================================================== */

.m-partida{
  /* El ancho del panel. 42% dejaba la columna de contenido en 740px con
     620 de medida util: casi nada para lo que tiene que caber. Con 34%
     las tres fichas del dia entran en fila sin que la fecha larga parta
     en dos lineas. */
  --panel:34%;
  /* El margen interior de la columna de contenido. Se usa en tres
     sitios (secciones, cabecera y barra) y tenian que coincidir. */
  --sangria:clamp(1.4rem,3.4vw,3.4rem);
}

.split{display:grid;grid-template-columns:var(--panel) minmax(0,1fr);min-height:100vh}

/* ── el panel ──────────────────────────────────────────────────── */

.split .lado{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  background:var(--acento-d);
  color:var(--blanco);
  overflow:hidden;
  padding:clamp(1.4rem,2.6vw,2.4rem);
}
.split .lado > *{position:relative}

.split .lado .arte{
  position:absolute;inset:0;
  /* A escala de TEXTURA, no de ilustracion: la rama mide 300x820, y con
     `cover` se estiraba hasta el ancho del panel —cada hoja acababa
     midiendo 50px y el conjunto parecia un papel pintado de globos—.
     Al 58% de la altura la hoja baja a ~15px: se sigue reconociendo la
     rama y ya no compite con los nombres. */
  background:var(--textura) repeat center top/auto 58%;
  opacity:var(--textura-op-hero,.55);
  /* La zona de los nombres se despeja para que el blanco caiga sobre el
     color plano y no sobre las hojas. Se aclara el arte, no se apaga:
     en los bordes sigue a toda su fuerza.
     OJO: los #000 de aqui NO son color, son el canal alfa del degradado
     (PROYECTO.md §4.11). Sustituirlos rompe el difuminado. */
  -webkit-mask-image:radial-gradient(115% 54% at 50% 46%,transparent 22%,#000 78%);
          mask-image:radial-gradient(115% 54% at 50% 46%,transparent 22%,#000 78%);
}
.split .lado .arte svg{width:100%;height:100%}

/* El recuadro: un filete de 1px por dentro del panel. Es la firma del
   sistema —relieve con filete, nunca con sombra— llevada a la unica
   superficie de color del producto, y convierte el panel en un
   tarjeton de invitacion en vez de un bloque de fondo.
   El blanco translucido no es un token y no lo puede ser: depende del
   color que haya debajo, que lo elige la pareja. Mismo caso que el
   `rgba(255,255,255,.65)` de `.pers.activo` en secciones.css. */
.split .lado .tarjeton{
  width:100%;max-width:360px;
  border:1px solid rgba(255,255,255,.24);
  padding:clamp(2rem,4.5vh,3.4rem) clamp(1.2rem,3vw,2.2rem);
}

.split .lado .sobre{
  font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,255,255,.74);
}
.split .lado .nombres{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.02;
  color:var(--blanco);margin:1.1rem 0 0;
}
.split .lado .nombres .amp{
  font-style:italic;color:rgba(255,255,255,.66);
  display:block;font-size:.46em;margin:.1em 0;
}
/* El separador corto de la portada, en blanco. */
.split .lado .filete{
  width:38px;height:1px;background:rgba(255,255,255,.45);
  margin:1.5rem auto;
}
.split .lado .lugar{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.split .lado .ciudad{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:rgba(255,255,255,.85);margin-top:.35rem;
}

.split .lado .cd{
  display:flex;justify-content:center;gap:clamp(1.2rem,2.6vw,2.2rem);
  margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid rgba(255,255,255,.18);
}
.split .lado .cd .u{text-align:center}
.split .lado .cd .u .n{
  font-family:var(--serif);font-size:1.75rem;line-height:1;
  display:block;color:var(--blanco);
}
.split .lado .cd .u .l{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-top:.4rem;
}

/* ── la columna de contenido ───────────────────────────────────── */

.split .cuerpo{padding:0;min-width:0}
.split .cuerpo section{
  max-width:none;
  padding-left:var(--sangria);
  padding-right:var(--sangria);
}
.split .cuerpo section+section{border-top:1px solid var(--linea)}

/* Aqui las secciones se alinean a la izquierda, no centradas: es la
   diferencia que se ve entre esta maqueta y la clasica. */
.split .cuerpo .sec-head{text-align:left}
/* La prosa no crece con la columna: a 690px de ancho una entradilla
   pasa de 95 caracteres por linea y deja de leerse. Los datos y las
   tarjetas si aprovechan todo el ancho. */
.split .cuerpo .sec-head p{margin-left:0;max-width:56ch}
.split .cuerpo .tags{justify-content:flex-start}
.split .cuerpo .bloque,
.split .cuerpo .nota,
.split .cuerpo .ideas,
.split .cuerpo .fichas,
.split .cuerpo .duo,
.split .cuerpo .aviso-previo,
.split .cuerpo .nota-pago{margin-left:0}
.split .cuerpo .personas,
.split .cuerpo .clima{margin-left:0}
.split .cuerpo .btn-row{justify-content:flex-start}
/* Las fichas van mas apretadas que en la clasica: aqui la columna es
   dos tercios de la pantalla, no la pantalla entera. */
.split .cuerpo .tarjeta{padding:1.7rem 1.1rem 1.6rem}
.split .cuerpo .copiado,
.split .cuerpo .no-titulo,
.split .cuerpo .pregunta-personas{text-align:left}

/* La cabecera de pagina interior comparte sangria con las secciones: si
   no, el titulo de la pagina queda en un eje y el de la seccion de
   debajo pegado al margen, y parecen de dos webs distintas. */
.split .cuerpo .cabecera{
  text-align:left;max-width:none;margin:0;
  padding-left:var(--sangria);padding-right:var(--sangria);
  padding-top:clamp(2.4rem,7vh,4rem);
}
.split .cuerpo .cabecera h1{font-size:clamp(2.3rem,5vw,3.6rem)}
.split .cuerpo .cabecera .bajada{margin-left:0;max-width:56ch}

/* ── la portada: los datos y las puertas ───────────────────────── */

.split .cuerpo .entrada{padding-top:clamp(2.4rem,7vh,4rem)}
.split .cuerpo .entrada .puertas{
  width:100%;
  margin-top:clamp(2rem,5vh,3rem);
}
/* Las puertas vienen de la portada, donde todo va centrado: aqui el
   icono se quedaba en el eje de su celda y el titulo pegado al margen,
   cada uno por su lado. */
.split .cuerpo .entrada .puerta{text-align:left;padding:1.6rem 1.2rem}
.split .cuerpo .entrada .puerta .ic{margin:0 0 .7rem}
/* En la portada la columna de la derecha tiene poco que contar —tres
   datos y dos puertas— y enfrente hay un panel de una pantalla entera:
   pegada arriba, dejaba medio metro de blanco al lado de los nombres.
   Centrada, el hueco deja de parecer un descuido.

   Solo cuando hay dos columnas: en movil el panel ya ocupa la pantalla
   entera y estirar el contenido otra pantalla mas solo anade blanco. */
@media (min-width:901px){
  .m-partida.home .split .cuerpo{
    min-height:100vh;
    display:flex;flex-direction:column;
  }
  .m-partida.home .split .cuerpo .entrada{margin-top:auto;margin-bottom:auto}
}

/* ── la barra ──────────────────────────────────────────────────── */

/* Una fila: marca a la izquierda, secciones a la derecha. La barra
   compartida es una pila centrada de 92px, y eso es de la clasica.

   OJO AL `min-height`: base.css lo lleva con el comentario «sin esto,
   Edge headless lo colapsa a 33px», y es verdad. Al ponerlo a 0 aqui,
   la barra se quedo en 36px con el relleno dentro y los enlaces salian
   CORTADOS POR LA MITAD, medido. Sea artefacto del headless o no —§0 lo
   tiene como pendiente de aclarar—, la altura se declara y no se
   deduce: no cuesta nada y quita una forma de que el menu salga roto. */
.split .cuerpo nav.barra{
  position:sticky;top:0;
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:1.5rem;
  min-height:64px;
  padding:.6rem var(--sangria);
}
.split .cuerpo nav.barra .marca{font-size:1rem}
.split .cuerpo nav.barra .links{flex-wrap:wrap;justify-content:flex-end;gap:1.5rem}

/* ── responsive ────────────────────────────────────────────────── */

/* Las tarjetas vuelven a repartirse en columnas: iban a una SIEMPRE, y
   en un monitor eso son tres cajas enormes apiladas con un dato dentro
   de cada una. A partir de aqui la columna ya no da para tres.

   La regla de conteo de base.css (`.tarjetas:has(>:last-child:...)`)
   pesa lo mismo que este selector —(0,3,0)—, asi que lo que decide es
   el orden de las hojas: `m-partida.css` va despues de `base.css` y
   gana. Es frontera fina; si algun dia se reordenan las hojas, esto se
   rompe en silencio. */
@media (max-width:1180px){
  .split .cuerpo .tarjetas{grid-template-columns:1fr}
}

@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split .lado{
    position:relative;height:auto;min-height:72vh;
    padding:clamp(3rem,10vh,5rem) 1.4rem;
  }
  .split .lado .tarjeton{max-width:none}
  /* En movil el panel es ancho y bajo: repetida, la rama se convierte
     en un enrejado de rayas. Una sola, grande y abajo, se lee como lo
     que es. La mascara despeja el centro, que es donde va el nombre. */
  .split .lado .arte{
    background:var(--textura) no-repeat center bottom/auto 82%;
    -webkit-mask-image:radial-gradient(90% 46% at 50% 42%,transparent 24%,#000 82%);
            mask-image:radial-gradient(90% 46% at 50% 42%,transparent 24%,#000 82%);
  }
  .split .cuerpo section{max-width:100%}
}

@media (max-width:640px){
  .split .cuerpo nav.barra{
    flex-direction:column;align-items:center;gap:.9rem;
    /* Apilada mide el doble: sin subir el minimo, los enlaces salen
       cortados por la mitad (ver la nota del `min-height` de arriba). */
    min-height:96px;
    padding:.8rem var(--sangria);
  }
  .split .cuerpo nav.barra .links{justify-content:center}
}