/* Nacimiento del lapicero a toda pantalla, con el título dentro del video. */
/* El fondo es el arena del piso del video y el escenario mide la pantalla GRANDE
   (lvh): cuando el teléfono esconde su barra y la pantalla crece, no asoma
   ninguna franja bajo el video. */
.birth3 { position: relative; height: 380svh; background: #d6c3b4; color: #2f2a22; }
/* Línea fina entre el piso del nacimiento y el inicio de la colección: sus arenas
   son casi iguales y el cambio de sección se perdía (pedido de Manuel, 20-sep). */
.birth3::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #2f2a22; opacity: .32; z-index: 2; }
.birth3-stage { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; }
.birth3-media { position: absolute; inset: 0; margin: 0; background: linear-gradient(#baa18a 0 60%, #d6c3b4 75%); }
.birth3-media img, .birth3-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.birth3-media video { opacity: 0; transition: opacity .35s ease; }
.birth3[data-birth-ready='true'] .birth3-media video { opacity: 1; }
.birth3-copy { position: absolute; left: max(28px, 6vw); top: clamp(96px, 17svh, 190px); }
.birth3-title { margin: 0; font: 400 clamp(34px, 4.6vw, 84px)/1.12 Space, sans-serif; letter-spacing: .065em; text-transform: uppercase; }
.birth3-title span { display: block; }
.birth3-title em { color: #4b5a3e; font-style: normal; }
.birth3-origin { margin: 26px 0 0; font: 400 11px/1.5 Space, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.birth3-status { position: absolute; left: max(28px, 6vw); bottom: 28px; margin: 0; font: 12px Inter, sans-serif; color: #4a4137; }
.birth3-status:empty { display: none; }
.birth3[data-birth-mode='still'] { height: auto; }
.birth3[data-birth-mode='still'] .birth3-stage { position: relative; }
.birth3[data-birth-mode='still'] .birth3-media video { display: none; }
html[data-view='vertical'] .birth3 { height: 380svh; }
html[data-view='vertical'] .birth3-copy { left: 22px; right: 22px; top: calc(92px + env(safe-area-inset-top)); }
html[data-view='vertical'] .birth3-title { font-size: clamp(32px, 9.4vw, 58px); }
html[data-view='vertical'] .birth3-origin { margin-top: 16px; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .birth3 { height: auto !important; } }