/* ========================================================================== BAAN PHO — base.css Globales del compartido de los 15 .dc.html + fuentes autoalojadas (el diseño las carga del CDN de Google; en producción van locales). ========================================================================== */ /* ---- Fuentes ---- */ @font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/cormorant-garamond-400.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/cormorant-garamond-400i.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/cormorant-garamond-500.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url('/fonts/cormorant-garamond-500i.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/cormorant-garamond-600.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/karla-400.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/karla-500.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/karla-600.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/karla-700.woff2') format('woff2'); } @font-face { font-family: 'Noto Serif Thai'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/noto-serif-thai-400.woff2') format('woff2'); } /* ---- Globales (helmet, idénticos en los 15 archivos) ---- */ * { box-sizing: border-box; } html, body { overflow-x: clip; } body { margin: 0; background: var(--fondo-body); } a { color: var(--oro-700); text-decoration: none; } a:hover { color: var(--oro-800); } ::selection { background: var(--seleccion); color: var(--tinta); } @keyframes bpZoom { from { transform: scale(1); } to { transform: scale(1.07); } } /* ---- Scroll-reveal (BRIEF regla 6: el contenido nunca depende de js) ---- Valores reales del prototipo (Home v4, líneas 813–815). El lleva class="no-js" en el markup y marco.js la quita. */ html:not(.no-js) [data-reveal] { opacity: 0; transform: translateY(var(--reveal-desplaza)); transition: opacity var(--t-reveal) ease, transform var(--t-reveal) var(--ease-reveal); } html:not(.no-js) [data-reveal].revelado { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html:not(.no-js) [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---- Contenedor raíz (style= del .bp-shell del prototipo) ---- Entre 430 y 900px el diseño mantiene la columna móvil de 430px centrada sobre --fondo-body; a partir de 900 ocupa todo el ancho. */ .bp-shell { width: 100%; max-width: 430px; margin: 0 auto; background: var(--crema); font-family: var(--font-sans); color: var(--texto-oscuro); /* #3c463a, el color base del shell del prototipo */ overflow-x: clip; position: relative; font-size: var(--fs-shell); } @media (min-width: 900px) { .bp-shell { max-width: 100%; font-size: var(--fs-base-desktop); } }