/* Maqueta «Revista» — Wedly
   Dos columnas: la foto a un lado, el texto respira al otro.
   Diseñado por Olivier Melín · tecmad.es */

.p-revista{background:var(--c-fondo)}

.rev-portada{
  min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}

.rev-portada__texto{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,6vw,86px);
}
.rev-portada__alto{
  font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--c-acento);margin:0 0 30px;
}
.rev-portada__nombres{
  font-family:var(--f-titulo);font-weight:400;margin:0;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.06;color:var(--c-primario);
  display:flex;flex-direction:column;
}
.rev-portada__nombres em{
  font-style:italic;font-size:.42em;color:var(--c-acento);
  margin:.14em 0;padding-left:.08em;
}
.rev-regla{
  display:block;width:64px;height:1px;margin:34px 0;
  background:color-mix(in srgb,var(--c-acento) 70%,transparent);
}
.rev-portada__fecha{
  margin:0;font-size:.8rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--c-texto);
}
.rev-portada__frase{
  margin:18px 0 0;max-width:34ch;font-style:italic;
  font-size:1.02rem;color:var(--c-texto);opacity:.8;
}
.rev-bajar{
  margin-top:42px;align-self:flex-start;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-primario);padding-bottom:6px;
  border-bottom:1px solid color-mix(in srgb,var(--c-primario) 40%,transparent);
  transition:border-color .2s;
}
.rev-bajar:hover{border-bottom-color:var(--c-acento)}

.rev-portada__foto{position:relative;overflow:hidden;background:color-mix(in srgb,var(--c-primario) 8%,transparent)}
.rev-portada__foto img{width:100%;height:100%;object-fit:cover;display:block}

.rev-medallon{
  position:absolute;inset:0;display:grid;place-items:center;
}
.rev-medallon span{
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--c-acento) 65%,transparent);
  font-family:var(--f-titulo);font-size:2.1rem;letter-spacing:.06em;
  color:var(--c-primario);
}

.p-revista .b-cab{text-align:left}
.p-revista .b-regla{margin-left:0}

@media (max-width:840px){
  .rev-portada{grid-template-columns:1fr;min-height:auto}
  .rev-portada__foto{order:-1;height:44svh}
  .rev-portada__texto{padding:clamp(34px,7vw,54px) 24px}
  .p-revista .b-cab{text-align:center}
  .p-revista .b-regla{margin-left:auto}
}

/* ══════════════════════════════════════════════════════════
   REVISTA · maquetación editorial
   Números grandes, columnas desiguales, fotos que se salen
   del contenedor. Lo que hace que una página parezca de
   revista no son las fuentes: es que las cosas no están
   centradas.
   ══════════════════════════════════════════════════════════ */

/* ── Cabeceras con número de sección enorme detrás ── */
.p-revista .b-seccion{counter-increment:rev;position:relative;overflow:hidden}
.p-revista .b-cuerpo{counter-reset:rev}
.p-revista .b-cab{
  text-align:left;position:relative;padding-bottom:clamp(26px,4vw,44px);
}
.p-revista .b-cab::before{
  content:counter(rev, decimal-leading-zero);
  position:absolute;right:0;top:-.34em;
  font-family:var(--f-titulo);font-size:clamp(5rem,16vw,11rem);
  line-height:1;color:color-mix(in srgb,var(--c-primario) 7%,transparent);
  pointer-events:none;z-index:0;
}
.p-revista .b-sub,
.p-revista .b-titulo{position:relative;z-index:1}
.p-revista .b-titulo{
  font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.02;
  letter-spacing:-.025em;max-width:14ch;
}
.p-revista .b-regla{
  margin-left:0;width:64px;height:2px;background:var(--c-primario);
}

/* ── Horarios en dos columnas desiguales ── */
.p-revista .b-eventos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,40px);
}
.p-revista .b-evento{
  background:none;border:0;border-top:2px solid var(--c-primario);
  border-radius:0;padding:20px 0 0;text-align:left;
}
.p-revista .b-evento__hora{
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-acento);margin:0 0 10px;font-family:var(--f-texto);
}
.p-revista .b-evento h3{font-size:1.5rem;line-height:1.1;margin:0 0 8px}

/* ── Galería con una foto a sangre cada cuatro ── */
.p-revista .b-galeria--mosaico{grid-template-columns:repeat(6,1fr)}
.p-revista .b-galeria--mosaico .b-galeria__item{
  grid-column:span 2;grid-row:span 1;aspect-ratio:3/4;border-radius:0;
}
.p-revista .b-galeria--mosaico .b-galeria__item:nth-child(7n+1){
  grid-column:span 4;grid-row:span 2;aspect-ratio:auto;
}
.p-revista .b-galeria--mosaico .b-galeria__item:nth-child(7n+6){
  grid-column:span 3;aspect-ratio:16/10;
}
.p-revista .b-galeria--mosaico .b-galeria__item:nth-child(7n+7){
  grid-column:span 3;aspect-ratio:16/10;
}

/* ── La prosa, a dos columnas en pantalla ancha ── */
@media (min-width:900px){
  .p-revista .b-prosa:not(.b-prosa--centro){
    column-count:2;column-gap:clamp(30px,4vw,56px);
  }
  .p-revista .b-prosa p:first-child::first-letter{
    float:left;font-family:var(--f-titulo);font-size:3.4em;
    line-height:.82;padding:6px 10px 0 0;color:var(--c-acento);
  }
}

/* ── Botones cuadrados y anchos ── */
.p-revista .b-boton{
  border-radius:0;letter-spacing:.2em;font-size:.74rem;padding:17px 40px;
}

/* ── Formularios con etiqueta al lado ── */
.p-revista .b-campo input,
.p-revista .b-campo select,
.p-revista .b-campo textarea{
  border-radius:0;border-width:2px;
  border-color:color-mix(in srgb,var(--c-primario) 20%,transparent);
}
.p-revista .b-campo label{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-acento);
}
.p-revista .b-opcion{border-radius:0;border-width:2px}

/* ── Cronología alineada a la izquierda, sin centrar ── */
.p-revista .b-hitos::before{left:22px}
.p-revista .b-hito{grid-template-columns:44px 1fr;gap:26px}
.p-revista .b-hito__marca{
  grid-column:1;width:44px;height:44px;border-radius:0;border-width:2px;
}
.p-revista .b-hito__caja,
.p-revista .b-hito--der .b-hito__caja{
  grid-column:2;text-align:left;justify-items:start;
}
.p-revista .b-hito__txt h3{font-size:clamp(1.4rem,3vw,2rem)}

/* ── Cuenta atrás como titular ── */
.p-revista .b-reloj__u b{
  font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-.03em;
}
.p-revista .b-reloj__u i{
  font-style:normal;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--c-acento);
}