/* Landing «Objeto 3D protagonista con scroll». Se enlaza SOLO desde esa plantilla y TODO va acotado a .os-raiz:
   no toca la barra, el pie ni ninguna otra página. Colores y fuentes salen del TEMA del negocio (variables de la plataforma). */
.os-raiz { background: var(--color-background); color: var(--tema-texto); font-family: var(--font-body), system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.os-raiz *, .os-raiz *::before, .os-raiz *::after { box-sizing: border-box; }
.os-raiz img { display: block; max-width: 100%; }
.os-raiz a { color: inherit; }
.os-raiz svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-raiz h1, .os-raiz h2, .os-raiz h3 { margin: 0; }
.os-raiz .tarjeta { text-decoration: none; color: inherit; }
.os-raiz .tarjeta .foto { position: relative; }
.os-raiz p { margin: 0; }
.os-raiz .serif, .os-raiz h1, .os-raiz h2, .os-raiz h3 {font-family: var(--font-headline), Georgia, serif; font-weight: 400;}
.os-raiz h2 {font-size: clamp(32px, 5vw, 66px); line-height: 1.06; letter-spacing: -.005em; color: var(--color-primary);}
.os-raiz .et {display: block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px;}
.os-raiz .cont {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);}
.os-raiz .btn {display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-background); padding: 15px 32px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: background .2s;}
.os-raiz .btn:hover {background: var(--tema-texto);}
.os-raiz .btn.claro {background: var(--color-background); color: var(--tema-texto);}
.os-raiz .btn.claro:hover {background: var(--color-outline); color: var(--color-background);}
.os-raiz .enlace {display: inline-flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--color-outline);}
.os-raiz .enlace:hover {border-color: var(--color-primary); color: var(--color-primary);}
.os-raiz svg.i {width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.os-raiz .hero {position: relative; height: 200vh;}
.os-raiz .hero-fija {position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--color-background);}
.os-raiz .mundo {position: absolute; transform-origin: 50% 50%; will-change: transform, filter, opacity;}
.os-raiz .mundo img {width: 100%; height: 100%; object-fit: cover;}
.os-raiz .logo {position: absolute; left: 29.49%; top: 14.94%; width: 9.14%; color: var(--os-logo, var(--color-primary)); opacity: 0; animation: os-aparece 1.2s .2s ease-out forwards; filter: drop-shadow(0 1px 0 rgb(255 235 220 / .25));}
.os-raiz .logo svg {display: block; width: 100%; height: auto;}
@keyframes os-aparece { to { opacity: 1; } }
.os-raiz .hero-txt {position: absolute; z-index: 5; will-change: transform, opacity;}
.os-raiz .hero-txt h1 {font-size: var(--h1, clamp(34px, 3.2vw, 70px)); line-height: 1.04; white-space: nowrap; color: var(--tema-texto); letter-spacing: -.01em;}
.os-raiz .hero-txt h1 em {font-style: italic; font-weight: 300;}
.os-raiz .hero-txt p {font-size: var(--p, clamp(15px, 1.25vw, 19px)); font-weight: 300; margin: 10px 0 20px;}
.os-raiz .hero-txt .acciones {display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;}
.os-raiz .hero-txt .btn {padding: 12px 26px;}
.os-raiz .hero-txt .btn {background: var(--tema-texto);}
.os-raiz .hero-txt .btn:hover {background: var(--color-primary);}
.os-raiz .hero-txt .enlace {border-color: var(--tema-texto);}
.os-raiz .os-lienzo {position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 20; pointer-events: none; display: block;}
.os-raiz .sec {position: relative; padding: clamp(72px, 12vh, 140px) 0;}
.os-raiz .marca {background: var(--color-outline); min-height: 100vh; display: flex; align-items: center;}
.os-raiz .marca .txt {max-width: 560px;}
.os-raiz .marca h2 {color: var(--color-primary); max-width: 12ch; margin-bottom: 26px;}
.os-raiz .marca p {font-size: clamp(16px, 1.3vw, 20px); font-weight: 400; max-width: 32ch; line-height: 1.6;}
.os-raiz .cuero {border-top: 1px solid color-mix(in srgb, var(--color-outline) 30%, transparent); min-height: 100vh; display: flex; align-items: center;}
.os-raiz .cuero .cont {display: flex; justify-content: flex-end; width: 100%;}
.os-raiz .cuero .txt {width: min(560px, 100%);}
.os-raiz .cuero h2 {margin-bottom: 36px; max-width: 14ch;}
.os-raiz .datos {display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px;}
.os-raiz .datos div {border-top: 1px solid color-mix(in srgb, var(--color-outline) 50%, transparent); padding-top: 14px;}
.os-raiz .datos b {display: block; font-family: var(--font-headline), serif; font-weight: 500; font-size: 20px; color: var(--color-primary);}
.os-raiz .datos strong {display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 4px 0 2px; font-weight: 600;}
.os-raiz .datos span {font-size: 14px; opacity: .85;}
.os-raiz .medida {background: var(--color-primary); color: var(--color-background); text-align: center; min-height: 80vh; display: flex; align-items: center;}
.os-raiz .medida .txt {max-width: 768px; margin: 0 auto;}
.os-raiz .medida h2 {color: var(--color-background); margin-bottom: 24px;}
.os-raiz .medida p {font-size: clamp(16px, 1.6vw, 22px); font-weight: 300; opacity: .92; max-width: 30ch; margin: 0 auto 32px; line-height: 1.55;}
.os-raiz .galeria {border-top: 1px solid color-mix(in srgb, var(--color-outline) 30%, transparent); overflow: hidden;}
.os-raiz .galeria .cabecera {text-align: center; margin-bottom: 48px;}
.os-raiz .carrusel {position: relative; height: clamp(300px, 46vw, 560px);}
.os-raiz .carrusel figure {position: absolute; left: 50%; top: 50%; width: clamp(180px, 34vw, 470px); aspect-ratio: 4/5; margin: 0; overflow: hidden; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s; will-change: transform; background: var(--color-surface);}
.os-raiz .carrusel figure img {width: 100%; height: 100%; object-fit: cover;}
.os-raiz .ctrl {display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 32px;}
.os-raiz .ctrl button {width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-outline); background: none; color: var(--color-primary); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s;}
.os-raiz .ctrl button:hover {background: color-mix(in srgb, var(--color-outline) 20%, transparent);}
.os-raiz .puntos {display: flex; gap: 9px;}
.os-raiz .puntos i {width: 7px; height: 7px; border-radius: 50%; background: var(--color-outline); transition: .3s;}
.os-raiz .puntos i.on {background: var(--color-primary); transform: scale(1.3);}
.os-raiz .modelos {border-top: 1px solid color-mix(in srgb, var(--color-outline) 30%, transparent);}
.os-raiz .modelos .cabecera {text-align: center; max-width: 720px; margin: 0 auto 56px;}
.os-raiz .rejilla {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.os-raiz .tarjeta {background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-outline) 40%, transparent); padding: 20px; display: flex; flex-direction: column; transition: border-color .2s, transform .3s;}
.os-raiz .tarjeta:hover {border-color: color-mix(in srgb, var(--color-primary) 60%, transparent); transform: translateY(-3px);}
.os-raiz .tarjeta .foto {height: 220px; display: flex; align-items: center; justify-content: center; background: var(--color-background); margin-bottom: 18px; padding: 12px;}
.os-raiz .tarjeta img {max-height: 100%; max-width: 100%; object-fit: contain;}
.os-raiz .tarjeta small {font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--color-primary);}
.os-raiz .tarjeta h3 {font-size: 24px; margin-top: 4px;}
.os-raiz .modelos .pie {text-align: center; margin-top: 48px;}
.os-raiz .servicios {background: var(--color-outline);}
.os-raiz .servicios h2 {margin-bottom: 48px; max-width: 18ch;}
.os-raiz .panel {position: relative; z-index: 30; height: clamp(420px, 75vh, 760px); overflow: hidden; margin-bottom: 28px; background: var(--tema-texto);}
.os-raiz .panel img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); will-change: transform;}
.os-raiz .panel::after {content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--tema-texto) 58%, transparent);}
.os-raiz .panel .centro {position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--color-background); padding: 0 20px; gap: 16px;}
.os-raiz .panel h3 {font-size: clamp(36px, 6vw, 84px); letter-spacing: .01em; line-height: 1.05;}
.os-raiz .panel .enlace {color: var(--color-background); border-color: color-mix(in srgb, var(--color-background) 50%, transparent);}
.os-raiz .panel .enlace:hover {border-color: var(--color-background); color: var(--color-background);}
.os-raiz .cierre {background: var(--color-primary); color: var(--color-background); min-height: 100vh; display: flex; align-items: center; padding: clamp(96px, 14vh, 160px) 0 clamp(120px, 16vh, 180px);}
.os-raiz .cierre-grid {display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 80px); align-items: center;}
.os-raiz .escenario {position: relative; justify-self: center; width: min(500px, 100%); aspect-ratio: 1300 / 1655; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 8px;}
.os-raiz .escenario:active {cursor: grabbing;}
.os-raiz .escenario .bloque {position: relative; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none;}
.os-raiz .escenario i {position: absolute; pointer-events: none; border-radius: 50%;}
.os-raiz .escenario .sombra-bloque {left: 2%; bottom: -1.5%; width: 96%; height: 7%; background: radial-gradient(closest-side, rgb(18 8 4 / .5), transparent); filter: blur(8px);}
.os-raiz .escenario .sombra-bota {z-index: 2; left: 5%; top: 54%; width: 62%; height: 9%; background: radial-gradient(closest-side, rgb(18 10 6 / .42), transparent); filter: blur(5px);}
.os-raiz .escenario .pista {position: absolute; left: 0; right: 0; bottom: -44px; text-align: center; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: .75; pointer-events: none;}
.os-raiz .cierre h2 {color: var(--color-background); font-weight: 300; font-size: clamp(44px, 7vw, 100px); margin-bottom: 36px;}
.os-raiz .cierre h2 em {color: var(--color-outline);}
.os-raiz.os-reduce .os-lienzo {display: none;}
@media (max-width: 900px) {
.os-raiz .rejilla {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 760px) {
.os-raiz .marca, .os-raiz .cuero {align-items: flex-end;}
.os-raiz .cuero .cont {justify-content: flex-start;}
.os-raiz .marca .txt {max-width: none;}
.os-raiz .hero-txt {left: 20px !important; right: 20px; top: auto !important; bottom: 4vh;}
.os-raiz .rejilla {gap: 14px;}
.os-raiz .tarjeta {padding: 12px;}
.os-raiz .tarjeta .foto {height: 150px;}
.os-raiz .tarjeta h3 {font-size: 20px;}
.os-raiz .medida {min-height: 100vh; align-items: flex-end;}
.os-raiz .cierre-grid {grid-template-columns: 1fr;}
.os-raiz .cierre {padding-bottom: 150px;}
.os-raiz .escenario {width: min(420px, 88%);}
}
@media (prefers-reduced-motion: reduce) {
.os-raiz .logo {animation: none; opacity: 1;}
.os-raiz .carrusel figure {transition: none;}
}

/* ── Auditoría (impeccable, 2026-11-08): contraste, saltos de layout y rendimiento ── */
/* Hasta que el motor mide la ventana, el texto del héroe va oculto: se posiciona con esa medida y saltaba de lugar al hidratar (CLS). */
.os-raiz:not(.os-listo) .hero-txt { visibility: hidden; }
/* La foto del héroe ya nace con el tamaño y el encuadre que luego calcula el motor (foto 2:1, enfoque 52 %): sin salto al hidratar. */
.os-raiz .mundo { top: 0; width: max(100vw, 200vh); height: max(50vw, 100vh); left: min(0px, calc(50vw - 0.52 * max(100vw, 200vh))); }
@media (max-width: 759px) { .os-raiz .mundo { width: max(100vw, 148vh); height: max(50vw, 74vh); left: min(0px, calc(50vw - 0.65 * max(100vw, 148vh))); } }
/* Legibilidad del texto del héroe sobre la foto (medido 3,0–3,6:1): halo del color de fondo y peso normal en la bajada. */
.os-raiz .hero-txt h1, .os-raiz .hero-txt p, .os-raiz .hero-txt .enlace { text-shadow: 0 0 14px color-mix(in srgb, var(--color-background) 85%, transparent), 0 0 3px color-mix(in srgb, var(--color-background) 70%, transparent); }
.os-raiz .hero-txt p { font-weight: 400; }
/* Texto del héroe en NEGRO puro: sobre la foto del piso de madera el marrón del tema se perdía (pedido del negocio). */
.os-raiz .hero-txt h1, .os-raiz .hero-txt h1 em, .os-raiz .hero-txt p, .os-raiz .hero-txt .enlace { color: #000; }
.os-raiz .hero-txt .enlace { border-color: #000; }
/* Contraste AA: el título marrón sobre el rosa daba 2,6:1; el «una señal.» rosa sobre marrón, 2,6:1; los textos con opacidad sobre marrón, 4,0–4,3:1. */
.os-raiz .marca h2, .os-raiz .servicios h2 { color: var(--tema-texto); }
.os-raiz .escenario .pista { opacity: 1; }
.os-raiz .cierre h2 em { color: color-mix(in srgb, var(--color-outline) 50%, var(--color-background)); }
.os-raiz .medida .et, .os-raiz .medida p { opacity: 1; }
/* Sin líneas sueltas de una palabra (straggler) y titulares equilibrados. */
.os-raiz p { text-wrap: pretty; }
.os-raiz h1, .os-raiz h2, .os-raiz h3 { text-wrap: balance; }