/* ════════════════════════════════════════════════════════════ GO4 · MOTOR 3D COMPARTIDO (go4-3d.css) Extraído tal cual del home (/index.html). Valores EXACTOS. Solo CSS del motor de profundidad. NO incluye partículas ni fuentes. IMPORTANTE: el bloqueo de scroll (overflow:hidden) y el lienzo fijo SOLO se activan cuando el JS añade la clase .go4-3d-on al . Si el JS no corre o hace opt-out, la página conserva scroll normal. ════════════════════════════════════════════════════════════ */ /* Bloqueo de scroll: SOLO cuando el motor 3D quedó activo en runtime */ html.go4-3d-on, html.go4-3d-on body{overflow:hidden;height:100%;width:100%} /* ── DEPTH ENGINE ── */ #depth-stage{position:fixed;top:0;left:0;width:100%;height:100vh;perspective:1200px;perspective-origin:50% 50%;transform-style:preserve-3d;overflow:hidden;z-index:2} #depth-stage::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(5,5,5,.45) 100%);pointer-events:none;z-index:5} .section{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:80px 60px;will-change:transform,opacity;backface-visibility:hidden;transform-style:preserve-3d;pointer-events:none;opacity:0} /* El contenido interno se mantiene plano para nitidez de texto */ .section > *{transform-style:flat;-webkit-font-smoothing:subpixel-antialiased;text-rendering:optimizeLegibility} h1,h2,h3,p,.label,.section-label,.stat-label,.subtitle,.card-number,.footer-line,.scroll-cta,.contact-link,.sector-pill,.badge-label,.social-links a{word-break:normal;hyphens:none;-webkit-hyphens:none} .k-word{white-space:nowrap;display:inline} .section.is-active{pointer-events:auto} /* HOMOLOGADO: TODOS los subtítulos de sección en AMARILLO (orden de Mario). Los que son texto plano y los que son link (

) se ven igual: mismo amarillo, sin subrayado. Consistencia total. */ /* ── FUENTES dentro del stage 3D ────────────────────────────── Al mover el contenido fuera de .page-content se pierden las reglas del theme. Las re-fijamos aquí de forma EXHAUSTIVA: TÍTULOS (h1–h6) en Felbion (--display); todo lo demás CUERPO en Kamern (--sans). */ .section,.section p,.section li,.section td,.section a,.section strong, .section em,.section b,.section small,.section span,.section div, .section blockquote,.section figcaption{font-family:var(--sans)!important} .section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-family:var(--display)!important;word-break:keep-all!important;overflow-wrap:break-word!important;hyphens:none!important} /* ── COLORES ── TÍTULOS de sección y subtítulos (h2/h3/h4) en amarillo. Y TODO link del cuerpo visible en amarillo (antes quedaban en azul ilegible). El h1 del hero se queda blanco (es el título principal grande). */ .section h2,.section h3,.section h4{color:var(--yellow)!important} .section a{color:var(--yellow)!important} .section h2 a,.section h3 a,.section h4 a{color:var(--yellow)!important;border-bottom:none!important;text-decoration:none!important} /* BOTONES: texto oscuro (van sobre fondo amarillo). Antes salían amarillo sobre amarillo = invisibles. */ .section a.cta-btn,.section .cta-btn,.section a.cta-btn *,.section a.btn,.section .btn{color:var(--bg)!important} /* ── ITEMS EN 2 COLUMNAS (3 y 3) ────────────────────────────── Cuando una sección tiene muchos subtítulos (h3) + texto, el JS la marca .multi y los agrupa en .item: aquí los acomodamos en 2 columnas para que TODO quepa sin achicar de más. El título y la intro ocupan el ancho completo. */ .section.multi .go4-3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 56px;width:100%} .section.multi .go4-3d-grid .item{break-inside:avoid} .section.multi .go4-3d-grid .item h3{margin-top:0!important} @media(max-width:680px){.section.multi .go4-3d-grid{grid-template-columns:1fr}} /* ── TAMAÑO Y RITMO DENTRO DEL STAGE ────────────────────────── El contenido salía demasiado chico y apretado. Agrandamos y damos aire, conservando el formato de párrafo acordado (Kamern, justificado, sin cortar palabras). */ .section .go4-3d-inner{max-width:1120px} .section p,.section li{font-size:clamp(16px,1.45vw,20px)!important;line-height:1.85!important;margin-bottom:16px!important;text-align:justify;word-break:keep-all;overflow-wrap:break-word;hyphens:none} .section h1{font-size:clamp(34px,5vw,68px)!important;line-height:1.15!important} .section h2{font-size:clamp(26px,3.4vw,44px)!important;line-height:1.2!important;margin-bottom:26px!important;letter-spacing:.04em} .section h3{font-size:clamp(18px,2vw,26px)!important;line-height:1.25!important;margin-top:28px!important;margin-bottom:12px!important;letter-spacing:.03em} .section ul,.section ol{margin:16px 0 16px 24px!important} .section table{width:100%!important;font-size:clamp(14px,1.25vw,18px)!important} .section td,.section th{padding:13px 16px!important;line-height:1.5!important} /* Breadcrumb más grande y legible dentro del stage */ .section .breadcrumb{font-size:clamp(15px,1.6vw,21px)!important;margin-bottom:26px!important;letter-spacing:.06em!important} .section .breadcrumb a{font-size:inherit!important} /* ── FOOTER idéntico al del home (valores EXACTOS del home) ── */ .section .contact-links{display:flex!important;justify-content:center;gap:30px!important;margin-bottom:50px!important;flex-wrap:wrap} .section .contact-link{font-family:var(--sans)!important;font-size:12px!important;letter-spacing:3px!important;text-transform:uppercase!important;color:var(--text)!important;text-decoration:none!important;padding:14px 32px!important;background:rgba(255,255,255,.03)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07)!important;border-radius:30px!important} /* Texto "diagnóstico" idéntico al home: 16px, gris (--muted), centrado */ .section .contact-wrap p{font-size:16px!important;line-height:1.5!important;text-align:center!important;color:var(--muted)!important} .section .contact-link.primary,.section .contact-link.primary *{background:var(--yellow)!important;color:var(--bg)!important;border-color:var(--yellow)!important} .section .social-links{display:flex!important;justify-content:center;gap:30px!important;margin-top:30px!important} .section .social-links a{font-family:var(--sans)!important;font-size:11px!important;letter-spacing:3px!important;text-transform:uppercase!important;color:var(--muted)!important;background:none!important;border:none!important;padding:0!important} .section .footer-line{margin-top:60px!important;font-size:11px!important;color:var(--muted)!important;letter-spacing:2px!important;opacity:.6} /* COLORES del footer idénticos al home: emails en blanco, teléfonos en gris (mi regla .section a los había pintado amarillos). Los botones no se tocan. */ .section .contact-wrap a[href^="mailto:"]:not(.contact-link){color:var(--text)!important} .section .contact-wrap a[href^="tel:"]:not(.contact-link){color:var(--muted)!important} .section .social-links a{color:var(--muted)!important} /* "Hablemos" IDÉNTICO al home: 48px, blanco, weight 500, +espaciado, MAYÚSCULAS */ .section .contact-wrap h2{font-size:48px!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase!important;line-height:normal!important;margin-bottom:18px!important;color:var(--text)!important} /* ════════════════════════════════════════════════════════════ MODO PÁGINA NORMAL (sin motor de secciones / sin doble scroll). El contenido vive en .page-content con scroll vertical natural. Replicamos el look acordado: TÍTULOS amarillos en Felbion (grandes), CUERPO en Kamern (grande, justificado), links visibles. UNA página. ════════════════════════════════════════════════════════════ */ .page-content h2,.page-content h3,.page-content h4{font-family:var(--display)!important;color:var(--yellow)!important} .page-content h2{font-size:clamp(26px,3.2vw,42px)!important;line-height:1.2!important;margin:54px 0 22px!important;letter-spacing:.04em} .page-content h3{font-size:clamp(18px,2vw,25px)!important;line-height:1.25!important;margin:30px 0 10px!important;letter-spacing:.03em} .page-content h3 a,.page-content h4 a,.page-content h2 a{color:var(--yellow)!important;border-bottom:none!important;text-decoration:none!important} .page-content p,.page-content li{font-family:var(--sans)!important;font-size:clamp(16px,1.4vw,19px)!important;line-height:1.85!important;margin-bottom:15px!important;text-align:justify;word-break:keep-all;overflow-wrap:break-word;hyphens:none} .page-content table{font-size:clamp(14px,1.25vw,18px)!important} .page-content td,.page-content th{padding:13px 16px!important;line-height:1.5!important} .page-hero h1{font-size:clamp(38px,5.5vw,72px)!important} /* ── CONTENIDO DENSO EN 2 COLUMNAS (izquierda / derecha) ─────── Las secciones con muchos bloques (FAQ, listas de items) se parten en 2 columnas para que quepan, en scroll normal. El encabezado de cada bloque ocupa el ancho completo. */ .faq-section{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px 50px!important;align-items:start} .faq-section > h2{grid-column:1 / -1!important;width:100%} .faq-item{break-inside:avoid} /* FAQ legible en 2 columnas */ .faq-item h3,.faq-grid .faq-item h3{font-size:clamp(17px,1.6vw,21px)!important;line-height:1.3!important;margin-bottom:10px!important} .faq-item p,.faq-grid .faq-item p{font-size:clamp(16px,1.45vw,18px)!important;line-height:1.65!important;text-align:left!important} .faq-grid{gap:26px 56px!important} /* El motor 3D scrollea sus propias secciones: oculta header/footer originales fuera del stage */ html.go4-3d-on .go4-3d-hidden{display:none!important} /* Contenedor interno de cada sección generada por el wrapper */ .go4-3d-inner{max-width:1120px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center} /* Capa que el JS escala para que TODO el contenido quepa en una pantalla (sin scroll interno). El doble scroll desaparece. */ .go4-3d-fit{width:100%;transform-origin:center center} /* ── DEPTH RINGS ── */ .depth-rings{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;pointer-events:none;z-index:0} .depth-ring{position:absolute;border:1px solid rgba(255,255,255,.04);border-radius:50%;transform:translate(-50%,-50%);will-change:transform;opacity:0} /* ── DATA-Z (parallax por elemento) ── */ [data-z]{will-change:transform;transform-style:flat} /* ── REVEAL ── */ .reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.25,.46,.45,.94)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.15s} .reveal-delay-2{transition-delay:.3s} .reveal-delay-3{transition-delay:.45s} .reveal-delay-4{transition-delay:.6s} /* ── KINETIC TEXT ── */ .reveal[data-kinetic]{opacity:1;transform:none;transition:none} .reveal .char{display:inline-block;opacity:.08;transition:opacity .35s cubic-bezier(.16,1,.3,1);will-change:opacity} .reveal .char.vis{opacity:1;text-shadow:0 0 30px rgba(255,213,74,.12)} /* ── SCROLL CTA ── */ .scroll-cta{font-family:var(--display);font-size:14px;font-weight:400;letter-spacing:.5em;text-transform:uppercase;color:var(--text);animation:pulse-cta 3s ease-in-out infinite} @keyframes pulse-cta{0%,100%{opacity:.5}50%{opacity:1}} /* ── SECTION COUNTER (oculto, igual que el home) ── */ #section-counter{display:none} #section-counter .current{display:none} /* ── PROGRESS BAR ── */ #progress-bar{position:fixed;left:40px;top:50%;transform:translateY(-50%);z-index:50;width:2px;height:120px;background:rgba(255,255,255,.06);border-radius:1px} #progress-fill{width:100%;background:rgba(255,255,255,.25);border-radius:1px;transition:height .3s ease;position:absolute;top:0;left:0} /* ── INDICADOR DE PROGRESO POR SCROLL (puntos laterales opcional) ── */ /* No usado por el home; el progreso vive en #progress-bar. */ /* ── RESPONSIVE ── */ @media(max-width:768px){ .section{padding:60px 24px} #section-counter{display:none} #progress-bar{display:none} #depth-stage::after{display:none} .go4-3d-inner{max-height:80vh} } @media(prefers-reduced-motion:reduce){ .reveal{transition:none} }