/* O³ — estilos base compartidos por index.html y casos.html */
/* Instrument Serif */
@font-face {
font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope (variable: un archivo cubre los pesos 200–600) */
@font-face {
font-family: 'Manrope'; font-style: normal; font-weight: 200 600; font-display: swap;
src: url("../fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope'; font-style: normal; font-weight: 200 600; font-display: swap;
src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Base */
body { margin: 0; background: #050505; font-family: 'Manrope', sans-serif; color: #F2EFE8; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: #B8A88A; }
/* Aparición al hacer scroll (solo con JS activo; sin JS el contenido queda visible) */
.js [data-reveal] { opacity: 0; transform: translateY(48px); transition: opacity 1.15s cubic-bezier(.16,.84,.3,1), transform 1.15s cubic-bezier(.16,.84,.3,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }
/* Modo scroll: los bloques avanzan y retroceden con el scroll (reveal.js queda de respaldo).
overflow hidden crea cajas de scroll que congelan las líneas de tiempo; clip se ve igual. */
@supports (animation-timeline: view()) and (overflow-x: clip) {
@keyframes reveal-scroll { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.js body > div:first-child { overflow-x: clip !important; }
.js [data-screen-label][style*="overflow: hidden"] { overflow: clip !important; }
/* Empieza con el bloque a ~85% de la pantalla y termina cerca de la mitad; en el cierre, antes */
.js { --rs: 15vh; --re: 55vh; }
.js #elevar { --rs: 2vh; --re: 26vh; }
.js [data-reveal] { opacity: 1; transform: none; transition: none;
animation: reveal-scroll both cubic-bezier(.25, .6, .3, 1); animation-timeline: view(); animation-range: cover var(--rs) cover var(--re); }
}
/* Saltos de línea que solo se activan en móvil */
.br-m { display: none; }
a, button, [role="button"] { touch-action: manipulation; }
@media (max-width: 640px) {
.br-m { display: inline; }
/* Rótulos de 9–10px ilegibles en teléfono */
[style*="font-size: 9px"], [style*="font-size: 10px"] { font-size: 11px !important; }
/* Casos a pantalla completa: svh no salta cuando aparece o se esconde la barra del navegador */
[id^="caso-"][style*="min-height: 100vh"] { min-height: 100svh !important; }
/* Enlaces de texto de casos.html: área táctil de al menos 44px hacia arriba */
a[href^="#caso-"], a[href="#elevar"] { display: inline-block; padding-top: 22px; }
/* Footer (correo, web y redes): 44px de alto táctil */
a[href^="mailto:"], a[href="https://www.o3.cl"], a[target="_blank"][rel="noopener"] { display: inline-block; padding-top: 15px !important; padding-bottom: 15px !important; }
a[href="index.html"] { padding-block: 9px; }
}
/* casos.html en móvil */
@media (max-width: 640px) {
/* Casos 14–16: la fila de 4 columnas no cabe; número + marca arriba, texto a lo ancho, VER al final */
[id^="caso-1"][style*="minmax(0, 1.4fr) auto"] { grid-template-columns: auto 1fr !important; column-gap: 18px !important; row-gap: 18px !important; }
[id^="caso-1"][style*="minmax(0, 1.4fr) auto"] > :nth-child(n+3) { grid-column: 1 / -1; }
[id^="caso-1"][style*="minmax(0, 1.4fr) auto"] > a { justify-self: start; }
/* Caso 03: el marco panorámico recortaba el video vertical a una franja de 150px */
#caso-03 [style*="aspect-ratio: 21/9"] { aspect-ratio: 4 / 5 !important; }
}
@media (max-width: 640px) {
/* casos.html: el rótulo central de la barra la partía en dos líneas */
body > div:first-child:has([data-screen-label="Apertura"]) > div:first-child > div { display: none; }
}