queden en columnas */ .tile.padded{ padding: 22px 24px } /* más aire interno */ /* Imagen: ocupar el alto fijado con proporción agradable */ .tile.image .media{ width:100%; height:100% } .fivebox .row.top .tile.image .media{ aspect-ratio: 16/9 } .fivebox .row.bottom .tile.image .media{ aspect-ratio: 16/9 } /* Tipografía normal dentro de tiles de texto */ .tile.padded h3{ margin:0 0 8px; line-height:1.2 } .tile.padded p { margin:0 } /* Granulado un poco más sutil (opcional) */ .tile::after{ opacity:.14 } /* --- Laptop auto-in --- */ /* Laptop animada por scroll: IZQ -> CENTRO */ /* === Vista previa con scroll (izquierda -> centro) === */ .sticky-stage{ position:relative; height:200vh; overflow:visible; } .sticky-thing{ position:sticky; top:10vh; height:80vh; display:grid; place-items:center; overflow:visible; } .laptop{ width:min(900px,95vw); /* p=0 (arriba del stage) -> -45% (fuera a la izquierda) p=1 (abajo del stage) -> 0% (centrada) */ transform: translateX(calc(-45% + var(--p,0)*45%)) scale(calc(.90 + var(--p,0)*.10)); opacity: calc(.35 + var(--p,0)*.65); will-change: transform, opacity; } @media (max-width: 900px){ .laptop{ width:min(760px,98vw); } } /* --- Título centrado dorado --- */ .tri-title{ text-align:center; font-size: clamp(28px, 3.5vw, 46px); color: var(--gold); letter-spacing:.01em; margin: 0 0 24px; } /* --- Grid 3 columnas responsive --- */ .tri-grid{ display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 20px; } @media (max-width: 1100px){ .tri-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 780px) { .tri-grid{ grid-template-columns: 1fr; } } /* --- Tarjeta imagen con overlay/grano --- */ .tri-img{ padding:0; } .tri-img-media{ position:relative; height:100%; aspect-ratio: 16/9; overflow:hidden; border-radius: inherit; } .tri-img-media img{ width:100%; height:100%; object-fit:cover; display:block; } .tri-img-media::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(80% 90% at 8% 16%, rgba(18,212,199,.16), transparent 60%), radial-gradient(90% 90% at 100% 20%, rgba(31,58,138,.18), transparent 60%); } .tri-img-media::after{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.18; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); background-size:140px 140px; } /* Texto grande dentro de la imagen */ .tri-caption{ position:absolute; left:18px; bottom:14px; font-size: clamp(18px, 2.2vw, 28px); text-shadow: 0 1px 12px rgba(0,0,0,.35); } /* --- Paddings y tipografía de las otras tarjetas --- */ .tri-copy p{ font-size: 16px; } /* --- Carrusel de iconos tipo marquee --- */ .tri-icons .icons-marquee{ position:relative; overflow:hidden; display:flex; gap:40px; padding:6px 0; mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 10%, #000 90%, rgba(0,0,0,0)); } .tri-icons .icons-track{ display:flex; gap:24px; align-items:center; flex: 0 0 auto; animation: iconsLoop 18s linear infinite; } .tri-icons img{ width:36px; height:36px; opacity:.9; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); } .tri-icons .icons-track:nth-child(2){ animation-delay: -9s; } /* desfasada para loop continuo */ @keyframes iconsLoop{ from{ transform: translateX(0) } to { transform: translateX(-100%) } } /* Ajustes de tarjetas (reusa tu look) */ .tile{ position:relative; overflow:hidden; border-radius:20px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10)), var(--surface); box-shadow: var(--shadow); } .tile.padded{ padding:22px } /* grano sutil coherente con Axora */ .tile::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.14; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); background-size:140px 140px; } /* Más aire lateral sólo en estas secciones */ /* Título + márgenes laterales (si quieres más aire) */ .tri-hero { padding-left: clamp(32px, 6vw, 72px); padding-right: clamp(32px, 6vw, 72px); } /* aplica gutters y ancho máximo a la tri-grid directamente */ .tri-grid{ width: min(var(--container), 100%); margin-inline: auto; /* centra */ padding-inline: clamp(28px, 5vw, 72px);/* gutters responsivos */ box-sizing: content-box; /* para que el padding sea “fuera” de la grilla */ } /* Sección 3-cuadros */ .tri-section{ padding:48px 0; } /* Título y subtítulo */ .tri-title{ text-align:center; font-size: clamp(28px, 4.2vw, 52px); font-weight: 700; letter-spacing: .01em; margin: 0 0 6px; color: var(--gold); /* ya la definimos antes */ text-shadow: 0 0 24px rgba(18,212,199,.08); } .tri-subtitle{ text-align:center; margin: 0 0 22px; font-size: clamp(14px, 1.6vw, 18px); } /* La grid ya la tenés; dejo el container para que no quede pegado */ .tri-grid{ max-width: var(--container); margin-inline: auto; padding-inline: 24px; display:grid; grid-template-columns: 1.05fr 1fr .9fr; gap: 20px; } @media (max-width:1100px){ .tri-grid{ grid-template-columns:1fr; } } /* ====== 3 columnas estilo Augoor ====== */ .why-axora .why-title{ text-align:center; color: var(--gold); font-size: clamp(28px, 3.2vw, 44px); margin: 0 0 26px; } .why-grid{ display:grid; grid-template-columns: 340px 1fr 1.3fr; gap: clamp(16px, 2vw, 28px); align-items:center; } @media (max-width: 1080px){ .why-grid{ grid-template-columns: 1fr; } } /* (A) Stack con resorte */ .why-stack{ display:grid; place-items:center; } .stack-img{ width: clamp(200px, 28vw, 360px); filter: drop-shadow(0 22px 60px rgba(0,0,0,.45)); opacity:.96; } /* (B) Texto */ .why-copy .why-list{ margin: 0 0 18px; padding-left: 1.1rem; color: var(--text); } .why-copy .why-list li{ margin: 10px 0; } .why-callout{ display:inline-block; background: color-mix(in srgb, var(--gold) 22%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); border-radius: 12px; padding: 12px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.35); } /* ====== Sección pains estilo Augoor ====== */ .ax-pains{ padding:72px 0; background:transparent } .ax-pains .container{ max-width:1200px; margin:0 auto; padding:0 24px } .ax-pains-grid{ display:grid; grid-template-columns: .32fr .68fr; gap:34px; align-items:start; } @media (max-width: 1024px){ .ax-pains-grid{ grid-template-columns:1fr } } /* Resortera (capas) */ .ax-layers{ position:relative; width:min(130px, 72vw); aspect-ratio: 1/1.15; margin-left:auto; filter: drop-shadow(0 28px 65px rgba(0,0,0,.35)); transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .12s ease-out; } .ax-layers .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform: translateY(var(--dy,0)) } .ax-layers .l1{ --dy: 0px } .ax-layers .l2{ --dy: 24px } .ax-layers .l3{ --dy: 52px } .ax-layers .l4{ --dy: 78px } .ax-layers .l5{ --dy:104px } .ax-layers .l6{ --dy:128px } /* Un poquito de “resorte” al entrar */ .ax-layers.spring .layer{ animation: axSpring .9s cubic-bezier(.2,1.4,.2,1) both; } .ax-layers.spring .l2{ animation-delay:.02s } .ax-layers.spring .l3{ animation-delay:.04s } .ax-layers.spring .l4{ animation-delay:.06s } .ax-layers.spring .l5{ animation-delay:.08s } .ax-layers.spring .l6{ animation-delay:.10s } @keyframes axSpring{ 0%{ transform: translateY(calc(var(--dy) + 30px)) scale(.98) } 55%{ transform: translateY(calc(var(--dy) - 6px)) scale(1.01) } 100%{ transform: translateY(var(--dy)) } } /* Tabs (lista a la izquierda del panel derecho) */ .ax-pains-right{ display:grid; grid-template-columns: .56fr .44fr; gap:24px } @media (max-width: 900px){ .ax-pains-right{ grid-template-columns:1fr } } .ax-tabs{ position:relative; display:grid; gap:10px; align-content:start } .ax-tab{ text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.02); color:var(--text); cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .ax-tab:hover{ background: color-mix(in srgb, var(--turq) 8%, transparent) } .ax-tab.is-active{ color:#0A0E13 } /* para contraste dentro de la pill */ .ax-tabs-pill{ position:absolute; left:0; width:100%; height:48px; border-radius:14px; background: color-mix(in srgb, var(--gold, #C7A455) 92%, var(--surface) 8%); box-shadow: 0 8px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(0); transition: transform .28s cubic-bezier(.2,.8,.2,1), height .28s; z-index:0; } /* Panel de capturas */ .ax-shots{ position:relative } .ax-shot{ display:none; } .ax-shot.is-active{ display:block; } .ax-shot-copy{ margin-bottom:12px } .ax-screen{ position:relative; border-radius:18px; overflow:hidden; border:1px solid color-mix(in srgb, var(--border) 80%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10)), var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.45); animation: shotIn .8s cubic-bezier(.2,1.4,.2,1) both; } .ax-shot.is-active .ax-screen img{ width:100%; display:block; transform: translateX(var(--panX,0px)); transition: transform .15s linear; } /* Badge abajo a la derecha “breathe” */ .ax-badge{ position:absolute; right:14px; bottom:14px; width:72px; height:72px; border-radius:16px; display:grid; place-items:center; background: color-mix(in srgb, var(--bg) 60%, transparent); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); animation: breathe 3.4s ease-in-out infinite; } .ax-badge img{ width:38px; height:38px; opacity:.9 } @keyframes breathe{ 0%,100%{ transform: translateY(0) scale(1) } 50%{ transform: translateY(-3px) scale(1.03) } } @keyframes shotIn{ 0%{ opacity:0; transform: translateY(18px) scale(.98) } 60%{ opacity:1; transform: translateY(-4px) scale(1.01) } 100%{ opacity:1; transform:none } } /* ===== Efficiency (Axora) ===== */ .ax-eff{ padding:64px 0 } .ax-eff-title{ color: var(--gold, #C7A455); font-size: clamp(26px,3.2vw,42px); margin: 0 0 22px; } .ax-eff-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; } @media (max-width: 960px){ .ax-eff-grid{ grid-template-columns:1fr; } } /* Tarjeta izquierda */ .ax-eff-hero{ position:relative; overflow:hidden; border-radius:18px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background: radial-gradient(80% 90% at 10% 10%, rgba(18,212,199,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10)), var(--surface); box-shadow: var(--shadow); min-height: 320px; } .ax-eff-hero-bg{ position:absolute; inset:-10%; background: radial-gradient(60% 60% at 80% 20%, rgba(255,255,255,.06), transparent 60%), linear-gradient(135deg, rgba(37,99,235,.18), rgba(18,212,199,.14)); filter: blur(6px); opacity:.65; pointer-events:none; } .ax-eff-hero-sub{ position:relative; z-index:2; padding:20px; max-width: 26ch; font-size: clamp(18px,2.2vw,24px); } .ax-eff-sphere{ position:absolute; right: -10px; bottom:-14px; width: 54%; opacity:.95; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); animation: ax-spin 22s linear infinite; } .ax-eff-sphere .grid{ animation: ax-breathe 8s ease-in-out infinite; transform-origin: 50% 50%} @keyframes ax-spin { to { transform: rotate(1turn) } } @keyframes ax-breathe { 0%,100%{ opacity:.7 } 50%{ opacity:1 } } /* Tarjeta derecha */ .ax-eff-copy{ position:relative; border-radius:18px; overflow:hidden; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10)), var(--surface); box-shadow: var(--shadow); padding: 22px; min-height: 320px; } .ax-eff-copy .ax-eff-lead{ font-weight:600; color: var(--text) } .ax-eff-mock{ position:absolute; right: 16px; bottom: 14px; width: min(620px, 62%); border-radius:16px; border:1px solid color-mix(in srgb, var(--border) 70%, transparent); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03); transform: translate3d(0,0,0); will-change: transform, filter; filter: saturate(1.05) contrast(1.02); } @media (max-width: 960px){ .ax-eff-copy{ padding-bottom: 220px } .ax-eff-mock{ position:absolute; right: 10px; left: 10px; width:auto } } /* Métricas */ .ax-eff-metrics{ margin-top:22px; display:grid; gap:18px; grid-template-columns: repeat(3,1fr); } @media (max-width: 960px){ .ax-eff-metrics{ grid-template-columns:1fr } } .ax-eff-metric{ border-radius:16px; padding:16px 18px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background: radial-gradient(120% 120% at 85% 10%, rgba(31,58,138,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08)), var(--surface); box-shadow: var(--shadow); } .ax-eff-metric h4{ margin:0 0 6px; font-size: clamp(16px,1.6vw,18px) } /* ========== TOKENS Y BASE ========== */ :root{ --brand: #12d4c7; --brand-2: #1f3a8a; --gold: #c7a455; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.68); --surface: #0b1118; /* fondo de paneles */ --border: #263142; /* bordecito */ --shadow: 0 10px 30px rgba(0,0,0,.45); --radius-sm: 12px; --radius: 16px; --radius-lg: 22px; } /* tipografía y ritmo */ body{ color:var(--text); } h1,h2,h3,h4{ line-height:1.12; letter-spacing:-.01em; margin:0 0 .5em } h1{ font-size:clamp(32px,4.8vw,56px) } h2{ font-size:clamp(24px,3.4vw,36px) } h3{ font-size:clamp(18px,2.2vw,24px) } .muted{ color:var(--muted) } /* contenedor seguro en laterales (anti “pegado al borde”) */ .container{ padding-inline: clamp(16px,4vw,32px) } /* ========== CARDS Y PANELES ========== */ .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.1)), var(--surface); border:1px solid color-mix(in srgb,var(--border) 78%,transparent); border-radius:var(--radius); box-shadow:var(--shadow); } .card--hover:hover{ transform: translateY(-2px); transition:transform .18s ease } /* ========== BOTONES / LINKS ========== */ .btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.62rem .95rem; border-radius:999px; font-weight:600; border:1px solid color-mix(in srgb,var(--border) 78%,transparent); background: radial-gradient(160% 160% at 100% 0%, rgba(18,212,199,.16), transparent 50%), rgba(255,255,255,.03); transition: transform .15s ease, filter .15s ease, border-color .15s ease; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.05) } .link{ position:relative; text-decoration:none; color:var(--text); font-weight:500; } .link::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin:left; transition: transform .22s ease; } .link:hover::after{ transform: scaleX(1) } /* ========== UTILIDADES ========== */ .pad-24{ padding:24px } .pad-16{ padding:16px } .mt-24{ margin-top:24px } .mb-24{ margin-bottom:24px } .center{ display:grid; place-items:center } .round{ border-radius:var(--radius) } .img-shadow{ box-shadow: 0 20px 60px rgba(0,0,0,.5) } /* ========== MICRO-INTERACCIONES ACCESIBLES ========== */ .reveal-once{ opacity:0; transform: translateY(12px); transition: opacity .36s ease, transform .36s ease } .reveal-once.is-in{ opacity:1; transform:none } @media (prefers-reduced-motion: reduce){ .reveal-once{ transition:none } .btn, .card--hover{ transition:none } } /* ========== CHIPS / TAGS (píldoras) ========== */ .chips{ display:flex; flex-wrap:wrap; gap:8px } .chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; font-size:14px; color:var(--muted); border:1px solid color-mix(in srgb,var(--border) 78%,transparent); background: rgba(255,255,255,.03); transition: transform .15s ease, filter .15s ease; } .chip:hover{ transform: translateY(-2px); filter: brightness(1.07) } /* ========== FONDOS DECORATIVOS REUTILIZABLES ========== */ .bg-grid{ background: radial-gradient(60% 60% at 15% 10%, rgba(18,212,199,.08), transparent 60%), radial-gradient(70% 60% at 100% 0%, rgba(31,58,138,.10), transparent 60%), var(--surface); } .intel-visual svg .code-img{ mix-blend-mode: screen; /* se “funde” con el fondo/gradiente */ filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); pointer-events: none; transform-origin: 50% 50%; animation: codeDrift 9s ease-in-out infinite alternate; } @keyframes codeDrift{ 0% { transform: translateY(0) } 100% { transform: translateY(-6px) } } /* ====== Theme (Axora) ====== */ :root{ --axora-blue: #1F3A8A; --axora-teal: #12D4C7; --axora-bg: #0B0F14; --axora-card: #121826; --axora-border: #223049; --axora-text: #E6EEF7; --axora-muted: #A5B4C3; } /* ====== Sección ====== */ #tab-docs{ padding: 64px 0; color: var(--axora-text); background: radial-gradient(120% 80% at 10% 0%, rgba(31,58,138,.18), transparent 60%), radial-gradient(110% 70% at 100% 20%, rgba(18,212,199,.10), transparent 60%); } #tab-docs h3{ margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .2px; } #tab-docs .muted{ margin: 0 auto 18px; max-width: 70ch; color: var(--axora-muted); } /* ====== Card de video estilo Augoor ====== */ .panel-video{ width: 100%; max-width: 1100px; /* ajustá si querés más chico/grande */ margin: 22px auto 0; border-radius: 18px; position: relative; overflow: hidden; aspect-ratio: 16 / 9; /* mantiene 16:9 */ background: linear-gradient(180deg, #121826, #0B0F14); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); transition: transform .3s ease, box-shadow .3s ease; isolation: isolate; } /* Borde degradado finito (premium) */ .panel-video::after{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; /* grosor del borde */ background: linear-gradient(135deg, color-mix(in oklab, var(--axora-blue) 70%, transparent), color-mix(in oklab, var(--axora-teal) 55%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; /* Safari/Chrome */ mask-composite: exclude; /* Firefox */ pointer-events: none; opacity: .9; } /* Glow animado detrás (look Augoor) */ .panel-video::before{ content:""; position:absolute; inset:-25%; background: radial-gradient(42% 42% at 20% 30%, rgba(31,58,138,.28), transparent 60%), radial-gradient(48% 48% at 80% 20%, rgba(18,212,199,.16), transparent 60%); filter: blur(52px); animation: ax-float 8s ease-in-out infinite alternate; z-index: -1; } /* El video */ .panel-video video{ width: 100%; height: 100%; display: block; object-fit: cover; /* recorta con estética */ filter: saturate(1.05) contrast(1.03); } /* Hover sutil */ .panel-video:hover{ transform: translateY(-2px); box-shadow: 0 38px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); } /* Fallback si no hay aspect-ratio */ @supports not (aspect-ratio: 16 / 9){ .panel-video{ padding-top:56.25% } .panel-video video{ position:absolute; inset:0 } } /* Animación glow */ @keyframes ax-float{ to { transform: translate3d(10px,-8px,0) scale(1.03); } } /* Opcional: si el contenedor padre es flex, evitá que se estire */ @media (min-width: 900px){ .panel-video{ flex: 0 1 1100px; } } /* ===== Overrides de tamaño: panel de video compacto ===== */ .panel-video{ /* ancho controlado y responsivo */ width: clamp(320px, 52vw, 760px); /* ← probá 720/680 si querés aún más chico */ max-width: 420px; margin: 16px auto 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #121826, #0B0F14); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); isolation: isolate; } /* Gutter lateral para separar el h3 del sidebar */ #tab-docs{ /* top | right | bottom | left */ padding: 48px clamp(12px, 2vw, 24px) 24px clamp(16px, 2.5vw, 32px); } /* Un poco más de aire entre el h3 / párrafo y el video */ #tab-docs h3{ margin-bottom: 10px; } #tab-docs .muted{ margin-bottom: 14px; } #tab-docs .panel-video{ margin-top: 14px; } /* Si el layout padre es flex para la columna derecha, evitá que se estire */ @media (min-width: 900px){ #tab-docs .panel-video{ flex: 0 1 760px; } } /* Video dentro: recorte estético */ #tab-docs .panel-video video{ width: 100%; height: 100%; display: block; object-fit: cover; } /* Opcional: texto más compacto arriba */ #tab-docs h3{ font-size: clamp(18px, 2vw, 24px); margin-bottom: 6px; } #tab-docs .muted{ font-size: clamp(13px, 1.6vw, 15px); max-width: 68ch; } /* Borde degradado fino (premium) */ #tab-docs .panel-video::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(135deg, rgba(31,58,138,.7), rgba(18,212,199,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* Glow animado sutil detrás */ #tab-docs .panel-video::before{ content:""; position:absolute; inset:-25%; background: radial-gradient(42% 42% at 20% 30%, rgba(31,58,138,.28), transparent 60%), radial-gradient(48% 48% at 80% 20%, rgba(18,212,199,.16), transparent 60%); filter: blur(52px); animation: ax-float 8s ease-in-out infinite alternate; z-index:-1; } @keyframes ax-float{ to{ transform: translate3d(10px,-8px,0) scale(1.03); } } /* ====== TILE DE SEGURIDAD (candados + llaves) ====== */ /* Controla el alto si tu imagen es muy grande (opcional) */ .tile.image.is-security .media{ position: relative; aspect-ratio: 16/9; /* ajusta si quieres 21/9, 4/3, etc. */ overflow: hidden; isolation: isolate; /* para que el blend no afecte fuera */ } /* La imagen siempre debajo de los overlays */ .tile.image.is-security .media img{ width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; /* por debajo de ::before/::after */ } /* Variables de look */ .tile.image.is-security{ --pattern-size: 34px; /* tamaño del motivo repetido */ --opacity-locks: .28; /* opacidad capa candados */ --opacity-keys: .22; /* opacidad capa llaves */ /* color fijo dentro del SVG data:, se codifica como %23RRGGBB */ /* Si quieres otro tono, cambia TODAS las ocurrencias %2392f0ff abajo */ } /* Capa 1: candados, se mueve horizontal */ .tile.image.is-security .media::before{ content:""; position:absolute; inset:0; z-index: 2; pointer-events:none; opacity: var(--opacity-locks); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2392f0ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M7 11V9a5 5 0 0 1 10 0v2M8 11h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); background-size: var(--pattern-size) var(--pattern-size); background-repeat: repeat; animation: locksDrift 28s linear infinite; /* desvanecer hacia bordes para integrarlo mejor */ -webkit-mask-image: radial-gradient(120% 110% at 50% 40%, #000 60%, transparent 100%); mask-image: radial-gradient(120% 110% at 50% 40%, #000 60%, transparent 100%); } /* Capa 2: llaves, se mueve vertical */ .tile.image.is-security .media::after{ content:""; position:absolute; inset:0; z-index: 3; pointer-events:none; opacity: var(--opacity-keys); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2392f0ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M14.5 7.5a3.5 3.5 0 1 1-4.95 4.95l-5.05 5.05a1 1 0 0 1-1.41 0L2.5 16.9a1 1 0 0 1 0-1.4l5.05-5.05A3.5 3.5 0 0 1 14.5 7.5Zm-9.2 9.2 2.3 2.3M8.6 13.9l2.3 2.3'/%3E%3C/svg%3E"); background-size: var(--pattern-size) var(--pattern-size); background-repeat: repeat; animation: keysDrift 36s linear infinite; -webkit-mask-image: radial-gradient(125% 115% at 60% 45%, #000 58%, transparent 100%); mask-image: radial-gradient(125% 115% at 60% 45%, #000 58%, transparent 100%); } /* Animaciones del motivo */ @keyframes locksDrift { 0%{background-position:0 0} 100%{background-position:200% 0} } @keyframes keysDrift { 0%{background-position:0 0} 100%{background-position:0 200%} } /* Hover suave de la tarjeta (opcional) */ .tile.image.is-security:hover .media{ transform: translateY(-2px); transition: transform .25s ease; } /* ====== PUNTOS SUAVES PARA EL TILE DE NUBE ====== */ .tile.image.is-cloud .media{ position: relative; overflow: hidden; isolation: isolate; } .tile.image.is-cloud .media img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } /* Capas de partículas (por encima de la imagen) */ .tile.image.is-cloud .media::before, .tile.image.is-cloud .media::after{ content:""; position:absolute; inset:0; z-index: 2; pointer-events:none; opacity: 0; /* se activa al entrar a viewport */ transition: opacity .6s ease; mix-blend-mode: screen; /* integra con el fondo oscuro */ filter: blur(.2px); transform: translateZ(0); /* Máscara: concentra puntos entre la nube y la flecha */ -webkit-mask-image: radial-gradient(80% 70% at 32% 50%, #000 30%, transparent 60%); mask-image: radial-gradient(80% 70% at 32% 50%, #000 30%, transparent 60%); } /* Capa 1: puntos pequeños, más rápidos */ .tile.image.is-cloud .media::before{ background-image: radial-gradient(circle at 1px 1px, rgba(84,255,245,.9) 1px, transparent 2px); background-size: 18px 14px; background-repeat: repeat; animation: dotsFlowA 18s linear infinite; } /* Capa 2: puntos un poco más grandes, más lentos (parallax) */ .tile.image.is-cloud .media::after{ background-image: radial-gradient(circle at 1px 1px, rgba(130,200,255,.85) 1.2px, transparent 2.2px); background-size: 24px 18px; background-repeat: repeat; animation: dotsFlowB 30s linear infinite; } /* Al entrar al viewport subimos opacidad */ .tile.image.is-cloud.inview .media::before{ opacity: .35; } .tile.image.is-cloud.inview .media::after { opacity: .22; } /* Animaciones de drift */ @keyframes dotsFlowA { 0%{ background-position: 0 0 } 100%{ background-position: 200% 0 } } @keyframes dotsFlowB { 0%{ background-position: 0 0 } 100%{ background-position: -120% 0 } } /* ===== Stack de capas estilo Augoor ===== */ .div-layers-animation { isolation: isolate; } .layers-stack{ position:relative; width:min(360px, 32vw); /* ajusta el tamaño visual */ aspect-ratio: 3 / 4; margin:auto; perspective:1000px; transform-style:preserve-3d; } .layers-stack .layer{ position:absolute; left:50%; bottom:0; /* apiladas desde abajo */ translate:-50% 0; /* centrar en X */ width:86%; max-width:420px; /* todas mismo ancho */ height:auto; display:block; will-change: transform, filter; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); mix-blend-mode: screen; /* suma luces de los PNG */ transition: transform .6s cubic-bezier(.2,.7,.2,1); } /* offsets verticales (espaciado entre capas) + “respiración” */ @keyframes breathe { 0%,100% { transform: translateZ(0) } 50% { transform: translateZ(0) translateY(-6px) } } .l1{ --y: 0px; --s:1.00; animation: breathe 7s ease-in-out infinite .00s; } .l2{ --y: -24px; --s:0.99; animation: breathe 7.2s ease-in-out infinite .10s; } .l3{ --y: -48px; --s:0.98; animation: breathe 7.4s ease-in-out infinite .20s; } .l4{ --y: -72px; --s:0.97; animation: breathe 7.6s ease-in-out infinite .30s; } .l5{ --y: -96px; --s:0.96; animation: breathe 7.8s ease-in-out infinite .40s; } .l6{ --y:-120px; --s:0.95; animation: breathe 8.0s ease-in-out infinite .50s; } /* posición base; el JS sólo le suma el parallax */ .layers-stack .layer{ transform: translateY(var(--y)) scale(var(--s)); } /* Glow de base */ .layers-stack .stack-glow{ content:""; position:absolute; left:50%; bottom:-14px; width:82%; height:36%; transform: translateX(-50%); background: radial-gradient(60% 100% at 50% 100%, rgba(0,255,235,.35), transparent 65%), radial-gradient(50% 80% at 30% 100%, rgba(45,130,255,.22), transparent 70%), radial-gradient(50% 80% at 70% 100%, rgba(255,170,40,.18), transparent 70%); filter: blur(20px); z-index:-1; pointer-events:none; opacity:.95; mask: radial-gradient(70% 100% at 50% 100%, #000 60%, transparent 100%); } /* Hover opcional (desktop) */ @media (hover:hover){ .layers-stack:hover .layer{ transform: translateY(calc(var(--y) - 4px)) scale(var(--s)); } } /* Accesibilidad: si el usuario prefiere menos animación */ @media (prefers-reduced-motion: reduce){ .layers-stack .layer{ animation:none } } /* Contenedor */ .ax-stack{ --p: 0; /* progreso scroll (0 a 1) */ --spread: 26px; /* separación vertical final entre capas */ --tilt: 0.5deg; /* tilt sutil */ --shrink: 0.04; /* reducción de escala entre capas */ width: min(100px, 56vw); aspect-ratio: 1 / 1.25; /* mantiene proporción y evita “saltos” */ margin: 0 auto; position: relative; } /* Glow inferior */ .ax-stack::after{ content:""; position:absolute; inset:auto 10% 4% 10%; height: 30%; background: radial-gradient(40% 60% at 50% 30%, rgba(0,225,255,.35), rgba(0,225,255,.12) 60%, transparent 70%); filter: blur(28px); opacity: clamp(0, var(--p), 1); pointer-events:none; } /* Área de capas */ .ax-stack__layers{ position:absolute; inset:0; display:block; isolation:isolate; } /* Cada capa ocupa el mismo rect y se apila */ .ax-layer{ position:absolute; inset:0; object-fit: contain; width:100%; height:100%; will-change: transform, filter, opacity; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); pointer-events:none; } /* Índices y variable --i (0…5) para fórmulas */ .ax-l1{ --i:0; z-index: 6; } .ax-l2{ --i:1; z-index: 5; } .ax-l3{ --i:2; z-index: 4; } .ax-l4{ --i:3; z-index: 3; } .ax-l5{ --i:4; z-index: 2; } .ax-l6{ --i:5; z-index: 1; } /* Movimiento: comprimido en p=0; abierto en p=1 */ .ax-layer{ /* Desfase vertical por capa (se abre con el progreso) */ transform: translateY(calc((1 - var(--p)) * (var(--i) * -1 * var(--spread)))) rotate(var(--tilt)) scale(calc(1 - (var(--i) * var(--shrink)) * (1 - var(--p)))); /* Sutil “fade in” de las capas inferiores */ opacity: calc(1 - (var(--i) * 0.05) * (1 - var(--p))); } /* Opcional: en pantallas pequeñas separa menos */ @media (max-width: 600px){ .ax-stack{ --spread: 18px; } } .axr-stack{ position:relative; height:460px; margin:56px 0; pointer-events:none; } .axr-layer{ position:absolute; left:50%; top:50%; width:min(360px,62vw); max-width:520px; transform:translate(-50%,-50%) translate3d(0,var(--y,0px),0) !important; will-change:transform; filter:drop-shadow(0 14px 34px rgba(0,0,0,.45)); } /* ===== Axora stack: tamaño CONTROLADO por el contenedor ===== */ #axora-stack{ /* knob único para el tamaño global */ --stack-size: clamp(1px, 30vw, 420px); /* ajusta aquí */ } /* el “marco” que define el ancho/alto del stack */ #axora-stack .ax-stack__layers{ position: relative; width: var(--stack-size); aspect-ratio: 1 / 1; /* o 0.9 si te queda muy alto */ margin: 0 auto; /* centra el bloque */ pointer-events: none; /* evita hover raro al mover capas */ } /* cada capa ocupa el marco al 100% y se apila */ #axora-stack .ax-layer{ position: absolute; inset: 0; /* top/right/bottom/left: 0 */ width: 100% !important; /* fuerza sobre posibles reglas previas */ height: 100% !important; object-fit: contain; display: block; will-change: transform, opacity; } /* 1) No recortes el texto del hero en móvil */ @media (max-width: 960px){ .hero{ overflow: visible !important; } /* quita el clip del borde izquierdo */ } /* 2) (opcional si querés mantener overflow hidden por los efectos) añade un “safe-left” de 6–8px solo al bloque del título */ @media (max-width: 960px){ .hero .inner > :first-child{ padding-left: 12px !important; } } @media (max-width: 900px){ #Plataforma.sticky-stage{ height: 90vh !important; padding: 24px 0 !important; } #Plataforma .sticky-thing{ top: 6vh !important; height: 72vh !important; } #Plataforma .laptop{ width: 92vw !important; } } /* Laptop sticky: scroll room garantizado pero sin tanto aire */ #Plataforma.sticky-stage{ /* siempre > 100vh para que haya recorrido */ height: clamp(130vh, 150vh, 180vh) !important; padding: 24px 0 !important; /* menos aire arriba/abajo */ } #Plataforma .sticky-thing{ top: 6vh !important; height: 82vh !important; /* < height del stage */ } /* En móviles, un poco más corto pero con recorrido real */ @media (max-width: 900px){ #Plataforma.sticky-stage{ height: 150vh !important; } #Plataforma .sticky-thing{ height: 78vh !important; top: 6vh !important; } } /* Laptop sticky — SOLO CSS para que vuelva a moverse */ #Plataforma.sticky-stage{ min-height: 150vh !important; /* siempre >100vh para que haya pista */ padding-block: 24px !important; /* menos aire arriba/abajo */ } #Plataforma .sticky-thing{ top: 8vh !important; height: 80vh !important; /* debe ser menor que el stage */ display: grid !important; place-items: center !important; } /* En móvil: un poco más compacto, pero con movimiento real */ @media (max-width: 900px){ #Plataforma.sticky-stage{ min-height: 140vh !important; } #Plataforma .sticky-thing{ height: 76vh !important; top: 6vh !important; } #Plataforma .laptop{ width: 92vw !important; } } /* ===== Mobile fallback para la sección #Plataforma (laptop) ===== */ @media (max-width: 900px){ /* la sección no necesita ser gigante en móvil */ #Plataforma.sticky-stage{ height: auto !important; min-height: 0 !important; padding: 24px 0 !important; } /* desactiva el sticky y deja flujo normal */ #Plataforma .sticky-thing{ position: relative !important; top: auto !important; height: auto !important; display: block !important; } /* la imagen ocupa ancho, sin transform ni opacidad rara */ #Plataforma .laptop{ width: 92vw !important; max-width: 620px !important; margin: 0 auto !important; transform: none !important; opacity: 1 !important; } } @media (max-width: 900px){ header.nav nav{ display: none !important; /* oculta todos los links/cta del nav */ } header.nav .inner{ height: 56px !important; /* navbar compacta */ padding: 8px 0 !important; } } /* 1) HERO: fuera el SVG/canvas y sin hueco */ .hero .visual, .hero .ribbon{ display:none !important; } .hero .inner{ /* por si el grid seguía esperando la 2ª columna */ grid-template-columns:1fr !important; } /* 2) Sección Eficiencia (la tarjeta con el texto de tu captura): ese hueco lo crea un padding reservado para la imagen flotante (.ax-eff-mock) */ @media (max-width: 1200px){ .ax-eff-mock{ display:none !important; } /* como ya no hay imagen, ocultar */ .ax-eff-copy{ padding-bottom:0 !important; } /* quita el espacio reservado */ } /* 3) Si también sacaste la imagen de la derecha en “INTEL”, colapsá la columna */ .intel-visual{ display:none !important; } .intel-top{ grid-template-columns:1fr !important; } /* (opcional) si quitaste el video del tab, elimina ese hueco */ #tab-docs .panel-video{ display:none !important; } /* NAV – devolver gutters en mobile (evita que el logo toque el borde) */ @media (max-width: 900px){ header.nav .inner{ /* altura compacta */ padding-block: 8px !important; /* gutters izquierdo/derecho + soporte para notch (iOS) */ padding-inline-start: calc(clamp(14px, 4vw, 24px) + env(safe-area-inset-left)) !important; padding-inline-end: calc(clamp(14px, 4vw, 24px) + env(safe-area-inset-right)) !important; } } .footer-principal { background-color: var(--negro); } .footer-section { color: var(--blanco); display: flex; flex-direction: column; flex-wrap: wrap; } .footer-logo img { width: 450px; } .footer-logo p { text-align: center; } .footer-info { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; padding: 20px; } .footer-contactanos p { margin-bottom: 10px; text-align: center; } .footer-correo { font-size: 12px; } .footer-correo a{ color: var(--amarillo2); } footer .footer-redes p { margin-bottom: 10px; text-align: center; font-weight: 900; } .footer-red { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; font-size: 12px; align-items: center; justify-content: center; } .footer-politicas { display: flex; /* flex-direction: column; */ justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px; font-size: 12px; border-top: 1px solid var(--blanco); margin: 0 20px; } .footer-form input, .footer-form button{ padding: 8px; border: none; color: var(--blanco); border-radius: 5px; margin: 5px 0; } .footer-form input { background-color: var(--panel-dark); } .footer-form button { background-color: var(--amarillo2); cursor: pointer; } .subscribe { display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer-title { text-align: center; margin-bottom: 5px; font-weight: 900; } .footer-form { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 100%; margin: auto; } @media screen and (min-width: 768px) { .footer-politicas { flex-direction: row; font-size: 16px; } .footer-red { font-size: 16px; } .footer-correo { font-size: 16px; } .footer-form { flex-direction: row; gap: 15px; } } .hero::before { content: ""; position: unset; } .axora-footer { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media screen and (min-width: 768px) { .axora-footer { flex-direction: row; } } .axora-footer-form input, .axora-footer-form button{ background-color: var(--cta); color: #ffffff; } .axora-footer-form input::placeholder { color: #fff; } .spark-canvas { width: 100%; height: 100%; }