/* Estilo «Clásico»: papel marfil, filetes finos. Tres colores y tres tipografías (las letras las
   pone el motor según la tipografía elegida).
   Contraste comprobado sobre el fondo marfil (#FBF8F2): texto 13,5 · suave 5,5 · salvia 6,0 ·
   azul noche 10,8 · burdeos 8,7; blanco sobre cada acento ≥ 6,3. */
.boda--clasico {
  --b-fondo: #FBF8F2;
  --b-tarjeta: #F3EEE4;
  --b-texto: #2B2A28;
  --b-suave: #6A645B;
  --b-borde: #CFC6B6;
  --b-sobre-acento: #FFFFFF;
  --b-radio: 1px;
}
.boda--clasico[data-color="salvia"] { --b-acento: #4A6656; --b-acento-texto: #4A6656; }
.boda--clasico[data-color="azul-noche"] { --b-acento: #223A5C; --b-acento-texto: #223A5C; }
.boda--clasico[data-color="burdeos"] { --b-acento: #7A2E3A; --b-acento-texto: #7A2E3A; }

.boda--clasico .b-seccion h2 { font-style: var(--b-estilo-nombres, normal); }
.boda--clasico[data-tipografia="caligrafia"] .b-nombres { font-size: clamp(3rem, 14vw, 5.4rem); }
.boda--clasico .b-portada {
  border-bottom: 1px solid var(--b-borde);
  box-shadow: inset 0 -5px 0 var(--b-fondo), inset 0 -6px 0 var(--b-borde);
}
.boda--clasico .b-portada::before {
  content: ""; width: 1px; height: 3.5rem; background: var(--b-acento); order: -1; opacity: .6;
}
.boda--clasico .b-seccion h2::after {
  content: ""; display: block; width: 3rem; height: 1px; background: var(--b-acento); margin: .9rem auto 0;
}
.boda--clasico .b-tarjeta { border: 1px solid var(--b-borde); background: transparent; }

/* Con foto («foto fundida», como alvaroyanabel.com). Móvil: la foto arriba a todo el ancho, se deshace
   hacia abajo en el papel y los nombres quedan un poco montados encima. Ordenador: la foto ocupa la
   mitad izquierda de arriba abajo y se deshace hacia la derecha; el texto, centrado a la derecha. */
.boda--clasico[data-foto="si"] .b-portada { padding-top: 0; }
.boda--clasico[data-foto="si"] .b-portada::before { display: none; }
.boda--clasico[data-foto="si"] .b-foto {
  width: calc(100% + 2.5rem); max-width: none; margin-inline: -1.25rem; aspect-ratio: auto;
  /* la foto se ve ENTERA (a su proporción, también las verticales del móvil), sin recortar cabezas */
  height: auto; max-height: none; object-fit: cover; object-position: center 25%; border-radius: 0;
  filter: saturate(.85) sepia(.06);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgb(0 0 0 / .5) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / .5) 88%, transparent 100%);
}
.boda--clasico[data-foto="si"] .b-antes { margin-top: -2.5rem; position: relative; }
@media (min-width: 56.25rem) {
  .boda--clasico[data-foto="si"] .b-portada {
    position: relative; min-height: 100vh; align-content: center;
    padding: 4rem 3rem 4rem calc(52% + 3rem);
  }
  .boda--clasico[data-foto="si"] .b-foto {
    /* alto de la portada y ancho según la foto (una vertical sale entera); si es muy apaisada, se
       recorta por los lados, nunca por arriba */
    position: absolute; inset: 0 auto 0 0; width: auto; max-width: 55%; height: 100%; margin: 0; object-position: center 25%;
    -webkit-mask-image: linear-gradient(to right, #000 68%, rgb(0 0 0 / .45) 86%, transparent 100%);
            mask-image: linear-gradient(to right, #000 68%, rgb(0 0 0 / .45) 86%, transparent 100%);
  }
  .boda--clasico[data-foto="si"] .b-antes { margin-top: 0; }
}