/* ============================================================= El Corazón de Felipe — hoja NO crítica. Todo lo que hay aquí es mejora progresiva. El CSS crítico va inline en el de index.html, así que si este archivo llega tarde (o no llega) la página se ve correcta igual. ============================================================= */ /* ---------- Tipografías de marca ---------- font-display: swap => nunca bloquean el pintado. Mientras el archivo no exista, el texto usa el serif de sistema. gambetta.woff2 — la pone Diego (gratuita en Fontshare). bright.woff2 — PENDIENTE del diseñador. Hasta que llegue, solo el titular cae al serif de sistema. ------------------------------------------- */ @font-face{ font-family:"Bright"; src:url("assets/fonts/bright.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Gambetta"; src:url("assets/fonts/gambetta.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } /* NOTA: la regla del logotipo (.logotipo) vive en el CSS crítico inline del , no aquí. Está sobre la línea de flotación: si su tamaño llegara con esta hoja se vería el salto desde los 865px del archivo. */ /* ---------- Vidrio esmerilado en los botones ---------- Solo donde el navegador lo soporta. Sin esto, los botones quedan transparentes con borde crema, que ya se ve bien. ------------------------------------------------------- */ @supports (backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px)){ .btn{ -webkit-backdrop-filter:blur(6px) saturate(120%); backdrop-filter:blur(6px) saturate(120%); background:rgb(84 0 24 / .18); } /* El relleno de acento debe seguir ganando sobre el tinte de arriba. */ .btn--destacado{background:var(--acento)} .btn:active{background:var(--acento)} @media (hover:hover){ .btn:hover{background:var(--acento)} } } /* ---------- Pantallas anchas ---------- La foto es vertical (1080x1350). A pantalla completa en laptop se recorta demasiado y, al medir solo 1080px de ancho, se ve borrosa estirada. Por eso arriba de 1100px se limita a una columna centrada y el degradado guinda sale a sangre por los lados. El fondo del estudio ya es guinda: el empalme no se nota. --------------------------------------- */ @media (min-width:1100px){ .bg{ right:auto; left:50%; width:720px; transform:translateX(-50%); } /* El desvanecido lateral se ancla al BORDE DE LA FOTO (calc desde el centro), no a un porcentaje del viewport. Si se usan porcentajes, el degradado no coincide con la columna y se ve una línea vertical dura justo donde termina la imagen. */ .veil{ background: linear-gradient(90deg, var(--vino) calc(50% - 361px), rgb(84 0 24 / 0) calc(50% - 240px), rgb(84 0 24 / 0) calc(50% + 240px), var(--vino) calc(50% + 361px)), linear-gradient(180deg, rgb(84 0 24 / .45) 0%, rgb(84 0 24 / .60) 45%, rgb(84 0 24 / .85) 100%); } /* En escritorio sobra alto: centrar verticalmente se ve mejor que dejar el bloque colgado arriba. */ .wrap{ min-height:100svh; justify-content:center; padding-top:6svh; padding-bottom:6svh; } } /* ---------- Impresión ---------- */ @media print{ .bg,.veil{display:none} body{background:#fff;color:#000} }