@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600&display=swap'); :root { --color-primary: #E34234; --color-primary-dark: #b5301f; --color-dark: #111111; --color-mid: #555555; --color-light: #f0f0f0; --color-white: #ffffff; --header-height: 70px; --drawer-width: 300px; --transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); } /* RESET */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Barlow', sans-serif; background: var(--color-light); color: var(--color-dark); overflow-x: hidden; } /* La portada usa una superficie blanca uniforme. Las vistas privadas tienen clases propias en y conservan sus temas oscuros. */ body:not([class]) { --color-light: #ffffff; background: #ffffff; } body:not([class]) main, body:not([class]) main > section, body:not([class]) .expertise-image-wrap, body:not([class]) .sponsor-carousel, body:not([class]) .reels-section { background: #ffffff; } /* Apariencia consistente para todos los controles editables del proyecto. */ input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select { color-scheme: dark; } /* Chrome, Edge y Safari aplican un fondo claro propio al autocompletar. El relleno interior conserva el tema oscuro sin afectar checkbox ni archivos. */ input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:hover, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:active { -webkit-text-fill-color: #f4f7fa !important; caret-color: #f4f7fa; background-color: #1b2026 !important; box-shadow: 0 0 0 1000px #1b2026 inset !important; -webkit-box-shadow: 0 0 0 1000px #1b2026 inset !important; border-color: rgba(255, 255, 255, .16); transition: background-color 9999s ease-out 0s; } input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-webkit-autofill:focus, textarea:-webkit-autofill:focus { -webkit-text-fill-color: #f4f7fa !important; caret-color: #f4f7fa; box-shadow: 0 0 0 1000px #1d242a inset, 0 0 0 4px rgba(88, 214, 232, .18) !important; -webkit-box-shadow: 0 0 0 1000px #1d242a inset, 0 0 0 4px rgba(88, 214, 232, .18) !important; border-color: rgba(88, 214, 232, .72) !important; } /* Firefox y navegadores con soporte del selector estándar. */ input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):autofill, textarea:autofill { color: #f4f7fa !important; background: #1b2026 !important; box-shadow: 0 0 0 1000px #1b2026 inset !important; caret-color: #f4f7fa; } /* Respuesta visual compartida para enlaces internos. La portada no tiene clase en , por lo que queda excluida. */ body[class] a { border-radius: 10px; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; } body[class] a:hover { color: #ffffff; background-color: rgba(88, 214, 232, .12); box-shadow: 0 0 0 7px rgba(88, 214, 232, .12), 0 8px 22px rgba(0, 0, 0, .18); text-decoration: none; } body[class] a:focus-visible { color: #ffffff; background-color: rgba(227, 66, 52, .16); box-shadow: 0 0 0 7px rgba(227, 66, 52, .16), 0 0 22px rgba(227, 66, 52, .18); outline: 2px solid rgba(240, 109, 95, .88); outline-offset: 5px; text-decoration: none; } /* ══════════════════════════════════════ HEADER ══════════════════════════════════════ */ header { position: fixed; top: 0; width: 100%; height: var(--header-height); background: var(--color-white); display: flex; align-items: center; border-bottom: 1px solid #e0e0e0; z-index: 1000; transition: box-shadow 0.3s; } header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .header-container { width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; } /* LOGO */ .brand-group { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; } .brand-text { display: flex; align-items: baseline; gap: 0; line-height: 1; } .rojas { font-family: 'Barlow', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #D94A3F; } .tecni { font-family: 'Barlow', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 1px; color: #918989; } .cad { font-family: 'Barlow', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #4E4E4E; } /* ══════════════════════════════════════ NAV DESKTOP ══════════════════════════════════════ */ .nav-wrapper { display: flex; align-items: center; gap: 32px; } .nav-menu ul { display: flex; gap: 4px; list-style: none; } .nav-menu a { position: relative; text-decoration: none; color: #42464a; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; -webkit-text-stroke: 0.12px currentColor; text-shadow: 0 0 0.35px currentColor; transition: color 0.25s, text-shadow 0.25s; } .nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 12px; width: 0; height: 2px; background: var(--color-primary); transition: width 0.3s ease; } .nav-menu a:hover { color: var(--color-primary-dark); text-shadow: 0 0 0.5px currentColor; } .nav-menu a:hover::after { width: calc(100% - 24px); } /* BOTÓN LOGIN */ .btn-login { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: linear-gradient(135deg, #111111 0%, #050505 100%); color: #f3e9e7; text-decoration: none; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(217, 74, 63, 0.6); border-radius: 16px; transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); } .btn-login::before { content: ''; display: inline-block; width: 7px; height: 7px; background: #D94A3F; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); flex-shrink: 0; } .btn-login::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #D94A3F; transition: width 0.25s; } .btn-login:hover { background: linear-gradient(135deg, #171313 0%, #090909 100%); border-color: rgba(217, 74, 63, 0.85); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.16); } .btn-login:hover::after { width: 5px; } /* MENÚ DE CUENTA */ .account-menu { position: relative; flex: 0 0 auto; } .account-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 42px; padding: 0; border: 1px solid rgba(17, 17, 17, .18); border-radius: 12px; background: #111417; cursor: pointer; box-shadow: 0 7px 18px rgba(0, 0, 0, .12); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; } .account-menu-toggle:hover, .account-menu-toggle:focus-visible { border-color: rgba(227, 66, 52, .72); background: #1b1718; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(0, 0, 0, .18), 0 0 0 3px rgba(227, 66, 52, .10); outline: none; } .account-menu-toggle span { display: block; width: 21px; height: 2px; border-radius: 4px; background: #f2f4f5; transition: transform .25s ease, opacity .2s ease, width .25s ease; } .account-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .account-menu-toggle.open span:nth-child(2) { width: 0; opacity: 0; } .account-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .account-menu-dropdown { position: absolute; top: calc(100% + 13px); right: 0; width: 230px; padding: 10px; border: 1px solid rgba(255, 255, 255, .10); border-top: 2px solid var(--color-primary); border-radius: 16px; background: rgba(15, 18, 22, .98); box-shadow: 0 22px 55px rgba(0, 0, 0, .30); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; z-index: 1200; } .account-menu.open .account-menu-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .account-menu-label { display: block; padding: 7px 12px 9px; color: #78828b; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .account-menu-dropdown a { display: flex; align-items: center; min-height: 43px; padding: 11px 12px; border-radius: 10px; color: #e9edf0; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; transition: color .2s, background .2s, padding-left .2s; } .account-menu-dropdown a:hover, .account-menu-dropdown a:focus-visible { color: #fff; background: rgba(227, 66, 52, .14); padding-left: 17px; outline: none; } .account-menu-dropdown .account-logout { color: #ff8c82; } /* ══════════════════════════════════════ HAMBURGUESA ══════════════════════════════════════ */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; cursor: pointer; padding: 4px; z-index: 1100; } .menu-toggle span { display: block; height: 2px; background: var(--color-dark); border-radius: 2px; transition: var(--transition); transform-origin: center; } /* Animación X al abrir */ .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ══════════════════════════════════════ OVERLAY ══════════════════════════════════════ */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 900; } .overlay.active { opacity: 1; visibility: visible; } /* ══════════════════════════════════════ MAIN / CARRUSEL ══════════════════════════════════════ */ main { margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; align-items: center; padding: 4px 0 40px; } .carousel-section { width: 100%; max-width: 1200px; margin: auto; padding: 0 24px; } .carousel-container { display: grid; grid-template-columns: 32.5% 67.5%; gap: 0; background: var(--color-white); border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,0.1); overflow: hidden; } /* PANEL LATERAL (titulo + descripcion, mismo lado) */ .side-bar { position: relative; padding: 36px 28px; display: flex; flex-direction: column; justify-content: center; background: var(--color-white); } .side-bar::after { content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 1px; background: #b3b3b3; } #nombre-imagen { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; color: var(--color-dark); line-height: 1.1; margin-bottom: 12px; } #nombre-imagen::before { content: ''; display: block; width: 30px; height: 3px; background: var(--color-primary); margin-bottom: 14px; } #descripcion-imagen { font-size: 16.8px; font-weight: 300; color: var(--color-mid); line-height: 1.7; } /* Mensaje editorial fijo del carrusel. Se mantiene estable mientras rota la imagen. */ .side-bar.has-fixed-message { display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: center; justify-content: stretch; gap: clamp(14px, 1.4vw, 20px); padding-top: 24px; padding-bottom: 24px; } .carousel-rotating-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; } .carousel-fixed-message { position: relative; z-index: 1; min-width: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: none; } .carousel-fixed-message:hover, .carousel-fixed-message:focus-within { border: 0; background: transparent; box-shadow: none; transform: none; } .carousel-fixed-message::after { content: none; display: none; } .carousel-fixed-label { display: block; margin-bottom: 5px; color: #ff786e; font-size: 9px; font-weight: 800; letter-spacing: 2px; line-height: 1.2; text-transform: uppercase; } .carousel-fixed-message h2 { margin: 0; color: #152027; font-family: 'Barlow', sans-serif; font-size: clamp(24.3px, 2.09vw, 31.05px); font-weight: 800; letter-spacing: 0.3px; line-height: 1.08; } .carousel-fixed-message p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: #52636c; font-size: 16.2px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .carousel-fixed-message a { display: inline-block; min-height: 0; margin-top: 9px; padding: 0; border: 0; border-radius: 0; color: #174f5c; background: transparent; box-shadow: none; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; transition: color 0.2s ease; } .carousel-fixed-message a:hover, .carousel-fixed-message a:focus-visible { color: var(--color-primary); border: 0; background: transparent; box-shadow: none; outline: none; transform: none; } /* IMAGEN CENTRAL */ .image-center { position: relative; aspect-ratio: 16/9; background: var(--color-white); overflow: hidden; } .carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; transform: scale(1.03); } .carousel-img.active { opacity: 1; transform: scale(1); } /* INDICADORES */ .indicators { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s, transform 0.3s; } .dot.active-dot { background: var(--color-primary); transform: scale(1.3); } /* BARRA DE PROGRESO */ .progress-bar-wrap { height: 3px; background: #eee; margin-top: 14px; overflow: hidden; } .progress-bar { height: 100%; background: var(--color-primary); width: 0%; transition: width linear; } /* ══════════════════════════════════════ MOBILE ≤ 900px ══════════════════════════════════════ */ @media (max-width: 900px) { .menu-toggle { display: flex; } /* Solo estado cerrado: acceso compacto con lenguaje visual técnico. */ .menu-toggle:not(.open) { position: relative; isolation: isolate; align-items: center; width: 44px; height: 41px; padding: 0 9px; gap: 5px; overflow: hidden; border: 1px solid rgba(47, 151, 169, 0.62); border-radius: 13px 4px 13px 4px; background: linear-gradient(135deg, rgba(64, 190, 211, 0.14) 0 24%, transparent 24%), linear-gradient(315deg, rgba(227, 66, 52, 0.18) 0 20%, transparent 20%), #10171b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 9px 22px rgba(10, 22, 27, 0.22); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .menu-toggle:not(.open)::before { content: ""; position: absolute; inset: 4px; z-index: 0; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px 2px 9px 2px; background: linear-gradient(90deg, rgba(64, 190, 211, 0.11) 1px, transparent 1px), linear-gradient(rgba(64, 190, 211, 0.11) 1px, transparent 1px); background-size: 9px 9px; } .menu-toggle:not(.open)::after { content: ""; position: absolute; top: 5px; right: 5px; z-index: 1; width: 8px; height: 8px; pointer-events: none; border-top: 2px solid #45bfd4; border-right: 2px solid #e34234; } .menu-toggle:not(.open) span { position: relative; z-index: 2; flex: 0 0 auto; width: 22px; height: 2px; background: #f5f7f8; box-shadow: 0 0 8px rgba(69, 191, 212, 0.3); } .menu-toggle:not(.open) span:nth-child(1) { width: 20px; transform: translateX(-2px); } .menu-toggle:not(.open) span:nth-child(2) { width: 14px; transform: translateX(4px); background: #ee4d40; box-shadow: 0 0 9px rgba(238, 77, 64, 0.38); } .menu-toggle:not(.open) span:nth-child(3) { width: 21px; transform: translateX(1px); } .menu-toggle:not(.open):focus-visible { outline: 3px solid rgba(69, 191, 212, 0.3); outline-offset: 4px; border-color: #45bfd4; box-shadow: 0 0 0 1px rgba(227, 66, 52, 0.5), 0 10px 24px rgba(10, 22, 27, 0.26); } .menu-toggle:not(.open):active { transform: scale(0.96); } @media (hover: hover) { .menu-toggle:not(.open):hover { transform: translateY(-2px); border-color: #45bfd4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(227, 66, 52, 0.28), 0 12px 26px rgba(10, 22, 27, 0.3); } } /* ── DRAWER ── */ .nav-wrapper { position: fixed; top: 0; right: 0; width: min(85vw, 255px); height: 100dvh; background: linear-gradient(rgba(32, 115, 132, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 115, 132, .035) 1px, transparent 1px), #ffffff; background-size: 22px 22px, 22px 22px, auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: calc(var(--header-height) + 20px) 0 40px; transform: translateX(100%); transition: transform var(--transition); z-index: 1001; box-shadow: -18px 0 48px rgba(0,0,0,0.2); overflow-y: auto; } .nav-wrapper.active { transform: translateX(0); } /* Franja roja decorativa en el drawer */ .nav-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--color-primary), #46bfd3 56%, var(--color-primary)); box-shadow: 0 0 16px rgba(70, 191, 211, .32); } /* Logo dentro del drawer */ .drawer-brand { display: flex !important; align-items: center; gap: 10px; padding: 0 28px 28px; border-bottom: 1px solid #eee; margin-bottom: 16px; width: 100%; } .drawer-brand .rojas { font-size: 20px; } .drawer-brand .tecnicad { font-size: 10px; } /* Links del menú */ .nav-menu { width: 100%; } .nav-menu ul { flex-direction: column; gap: 9px; align-items: flex-start; padding: 8px 14px 16px; } .nav-menu ul li { width: 100%; } .nav-menu a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 18px; overflow: hidden; border: 1px solid rgba(50, 112, 125, .18); border-radius: 13px; color: #eaf5f7; background: linear-gradient(90deg, rgba(70,191,211,.58), rgba(70,191,211,.58)) 9px 9px / 8px 1px no-repeat, linear-gradient(rgba(70,191,211,.58), rgba(70,191,211,.58)) 9px 9px / 1px 8px no-repeat, linear-gradient(145deg, #172127, #0b1014 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 18px rgba(8,14,18,.14); font-size: 12px; letter-spacing: 2.2px; transition: color .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease, padding-left .24s ease; } .nav-menu a::after { content: ''; position: absolute; right: 14px; bottom: 10px; left: auto; display: block; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary)); opacity: .58; transition: width .24s ease, opacity .24s ease, box-shadow .24s ease; } .nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a:active { color: #ffffff; border-color: rgba(70, 191, 211, .68); padding-left: 22px; background: linear-gradient(90deg, rgba(227,66,52,.88), rgba(227,66,52,.88)) 9px 9px / 11px 1px no-repeat, linear-gradient(rgba(227,66,52,.88), rgba(227,66,52,.88)) 9px 9px / 1px 11px no-repeat, radial-gradient(circle at 100% 0, rgba(70,191,211,.25), transparent 42%), linear-gradient(145deg, #22343d, #0c1217 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(8,14,18,.24), 0 0 18px rgba(70,191,211,.16); outline: none; transform: translateX(-3px); } .nav-menu a:hover::after, .nav-menu a:focus-visible::after, .nav-menu a:active::after { width: 42px; opacity: 1; box-shadow: 0 0 10px rgba(227,66,52,.5); } /* Ícono por ítem (usando data-icon) */ .nav-menu a[data-icon]::before { content: ''; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid rgba(70,191,211,.22); border-radius: 8px; background: var(--nav-icon) center / 19px 19px no-repeat, linear-gradient(145deg, #fffaf9, #f0f7f8); font-style: normal; opacity: 1; filter: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 4px 10px rgba(17,45,52,.08); transition: background-color .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease; } .nav-menu a[data-icon="home"] { --nav-icon: url('../img/nav/home.svg'); } .nav-menu a[data-icon="services"] { --nav-icon: url('../img/nav/services.svg'); } .nav-menu a[data-icon="projects"] { --nav-icon: url('../img/nav/projects.svg'); } .nav-menu a[data-icon="academy"] { --nav-icon: url('../img/nav/academy.svg'); } .nav-menu a[data-icon="contact"] { --nav-icon: url('../img/nav/contact.svg'); } .nav-menu a[data-icon]:hover::before, .nav-menu a[data-icon]:focus-visible::before, .nav-menu a[data-icon]:active::before { border-color: rgba(255, 255, 255, .82); background: var(--nav-icon) center / 19px 19px no-repeat, linear-gradient(145deg, #ffffff, #dff7fb); box-shadow: 0 0 0 3px rgba(70, 191, 211, .18), 0 7px 18px rgba(4, 23, 30, .22); transform: translateY(-1px) scale(1.06); } .btn-login { margin: 28px 28px 0; display: inline-block; text-align: center; } /* Accesos de cuenta integrados al drawer: sin una segunda hamburguesa. */ .account-menu { width: 100%; margin: 0; } .account-menu-toggle { display: none; } .account-menu-dropdown, .account-menu.open .account-menu-dropdown { position: static; display: block; width: 100%; margin: 0; padding: 18px 14px 20px; border: 0; border-bottom: 1px solid #eeeeee; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .account-menu-label { padding: 0 8px 10px; color: #778b95; } .account-menu-dropdown a { position: relative; min-height: 46px; margin-top: 8px; padding: 13px 16px; border: 1px solid rgba(50, 112, 125, .18); border-radius: 12px; color: #eaf5f7; background: linear-gradient(145deg, #172127, #0b1014 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(8,14,18,.12); font-size: 11px; letter-spacing: 2px; transition: color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease, padding-left .24s ease; } .account-menu-dropdown a:hover, .account-menu-dropdown a:focus-visible, .account-menu-dropdown a:active { padding-left: 21px; color: #ffffff; border-color: rgba(227,66,52,.62); background: radial-gradient(circle at 100% 0, rgba(227,66,52,.22), transparent 45%), linear-gradient(145deg, #24343c, #0c1217 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(8,14,18,.22), 0 0 16px rgba(227,66,52,.12); outline: none; transform: translateX(-3px); } .account-menu-dropdown .account-logout { color: var(--color-primary-dark); } /* ── CARRUSEL MOBILE ── */ .carousel-container { grid-template-columns: 1fr; } /* Título + descripción arriba */ .side-bar { order: 1; padding: 14px 12px; } .side-bar.has-fixed-message { grid-template-rows: auto auto; gap: 12px; padding: 14px 12px; } .carousel-fixed-message { padding: 0; border-radius: 0; } .carousel-fixed-message h2 { font-size: 25.65px; } .carousel-fixed-message p { font-size: 15.53px; -webkit-line-clamp: 3; } .side-bar.has-fixed-message .carousel-rotating-copy { padding: 2px 2px 0; } /* Imagen abajo: 30% más alta que el contenedor 16:9 de escritorio. */ .image-center { order: 2; aspect-ratio: 160 / 117; } .side-bar::after { display: none; } #nombre-imagen { font-size: 22px; } } /* ══════════════════════════════════════ UTILIDADES OCULTAS EN DESKTOP ══════════════════════════════════════ */ .drawer-brand { display: none; } /* ══════════════════════════════════════ ÁREAS DE EXPERIENCIA ══════════════════════════════════════ */ .expertise-section { width: 100%; max-width: 1200px; margin: 72px auto 0; padding: 0 24px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 42px); } .expertise-card { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .expertise-image-wrap { width: 100%; aspect-ratio: 1.35 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: #f4f5f3; } .expertise-image-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; } .expertise-copy { width: 100%; padding: 24px 10px 0; } .expertise-copy h2 { margin: 0 0 14px; color: var(--color-primary); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.2; letter-spacing: .6px; text-transform: uppercase; } .expertise-copy p { max-width: 330px; margin: 0 auto; color: #555b5e; font-size: 15px; line-height: 1.65; } @media (max-width: 820px) { .expertise-section { grid-template-columns: 1fr; gap: 36px; padding-inline: 18px; } .expertise-card { width: min(100%, 540px); margin-inline: auto; } .expertise-image-wrap { aspect-ratio: 4 / 3; border-radius: 18px; } .expertise-copy { padding-top: 18px; } } /* ══════════════════════════════════════ FRANJA TÉCNICA / INSTITUCIONAL ══════════════════════════════════════ */ /* ══════════════════════════════════════ SECCIÓN VIDEOS ══════════════════════════════════════ */ .videos-section { width: 100%; max-width: 1200px; margin: 52px auto 0; padding: 0 24px; } .videos-title { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 4px; color: var(--color-mid); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .videos-title::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--color-primary); } .videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .video-card { position: relative; cursor: pointer; overflow: hidden; background: var(--color-dark); border-radius: 16px; text-decoration: none; } .video-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%); z-index: 1; transition: opacity 0.3s; } .video-card:hover::after { opacity: 0.5; } .video-card video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform 0.5s ease; } .video-card:hover video { transform: scale(1.04); } /* Ícono play */ .video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 44px; height: 44px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.3s, transform 0.3s, background 0.3s; backdrop-filter: blur(4px); } .video-play-icon svg { width: 16px; height: 16px; fill: white; margin-left: 3px; } .video-card:hover .video-play-icon { opacity: 0; transform: translate(-50%, -60%) scale(0.8); } /* Info inferior */ .video-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 18px; z-index: 2; transition: transform 0.3s ease; } .video-info-label { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 4px; } .video-info-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1.5px; color: white; line-height: 1.1; } /* Badge "VER MÁS" al hover */ .video-badge { position: absolute; top: 12px; right: 12px; background: var(--color-primary); color: white; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); z-index: 3; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s, transform 0.3s; } .video-card:hover .video-badge { opacity: 1; transform: translateY(0); } /* Las versiones de calidad se conservan en el servidor, pero el selector no se expone en las tarjetas públicas. */ .video-quality-picker { position: absolute; top: 12px; left: 12px; z-index: 4; display: none; gap: 4px; } .video-quality-picker button { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.75); font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 4px 7px; cursor: pointer; backdrop-filter: blur(2px); } .video-quality-picker button.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } /* Mobile videos */ @media (max-width: 900px) { .videos-grid { grid-template-columns: 1fr; } } /* ========================================================= CARRUSEL DE PATROCINADORES ========================================================= */ .gallery-band-section { width: min(80%, 960px); max-width: 960px; margin: 34px auto 0; padding: 0 24px 44px; } .gallery-band-title { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 4px; color: var(--color-mid); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 0; } .gallery-band-title::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--color-primary); } .sponsor-carousel { width: 100%; position: relative; border-radius: 24px; background: #f7f8f7; box-shadow: none; } .sponsor-stage { position: relative; min-height: clamp(216px, 27.2vw, 344px); overflow: hidden; border-radius: inherit; isolation: isolate; } .sponsor-slide { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(42px, 7vw, 86px) clamp(68px, 12vw, 150px); opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; } .sponsor-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s; } .sponsor-image-link { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 18px; } .sponsor-image-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 8px; } .sponsor-slide img { display: block; width: 100%; height: 100%; max-width: 656px; max-height: 216px; object-fit: contain; filter: saturate(.98) contrast(1.03); } .sponsor-name { position: absolute; bottom: 24px; left: 50%; color: #696d70; font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; transform: translateX(-50%); } .sponsor-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; background: rgba(24, 31, 37, .78); box-shadow: 0 10px 26px rgba(11, 15, 18, .18); backdrop-filter: blur(8px); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.88); transition: opacity .2s ease, transform .2s ease, background-color .2s ease; } .sponsor-arrow-prev { left: 22px; } .sponsor-arrow-next { right: 22px; } .sponsor-arrow svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sponsor-carousel:hover .sponsor-arrow, .sponsor-carousel:focus-within .sponsor-arrow { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); } .sponsor-arrow:hover, .sponsor-arrow:focus-visible { color: #fff; background: var(--color-primary); outline: 3px solid rgba(227, 66, 52, .22); outline-offset: 3px; } .sponsor-dots { position: absolute; right: 0; bottom: 18px; left: 0; z-index: 5; display: flex; justify-content: center; gap: 9px; pointer-events: none; } .sponsor-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c9ccca; cursor: pointer; pointer-events: auto; transition: transform .2s ease, background-color .2s ease; } .sponsor-dot:hover, .sponsor-dot:focus-visible { transform: scale(1.3); outline: 2px solid rgba(227, 66, 52, .24); outline-offset: 3px; } .sponsor-dot.is-active { background: var(--color-primary); } @media (hover: none), (pointer: coarse) { .sponsor-arrow { opacity: .9; pointer-events: auto; transform: translateY(-50%) scale(.9); } } @media (max-width: 700px) { .gallery-band-section { width: 100%; padding: 0 18px 38px; } .gallery-band-title { letter-spacing: 3px; } .sponsor-carousel { border-radius: 19px; } .sponsor-stage { min-height: 230px; } .sponsor-slide { padding: 52px 58px 62px; } .sponsor-slide img { max-height: 170px; } .sponsor-name { bottom: 34px; width: calc(100% - 120px); text-align: center; } .sponsor-arrow { width: 40px; height: 40px; } .sponsor-arrow-prev { left: 10px; } .sponsor-arrow-next { right: 10px; } .sponsor-dots { bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .sponsor-slide, .sponsor-arrow, .sponsor-dot { transition: none; } } /* ══════════════════════════════════════ OJO PARA MOSTRAR/OCULTAR CONTRASEÑA (compañero de static/js/password-toggle.js, se usa en login/registro/ recuperación/cambio de contraseña — el panel admin tiene su propia versión ya integrada en admin.css con la misma lógica de JS) ══════════════════════════════════════ */ /* ========================================================= VIDEOS BREVES VERTICALES / REELS ========================================================= */ .reels-section { width: 100%; margin-top: 12px; padding: 58px 0 76px; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.97)), repeating-linear-gradient(90deg, transparent 0 79px, rgba(17, 17, 17, 0.08) 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(17, 17, 17, 0.08) 80px); border-top: 1px solid #dedede; } .reels-heading { width: min(1420px, calc(100% - 112px)); margin: 0 auto 26px; display: flex; align-items: end; justify-content: space-between; gap: 32px; } .reels-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--color-primary); font-size: 11px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; } .reels-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; } .reels-heading h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.875rem, 3.75vw, 3.525rem); line-height: 0.95; letter-spacing: 1.5px; text-transform: uppercase; } .reels-intro { max-width: 390px; color: #696969; font-size: 15px; line-height: 1.55; text-align: right; } .reels-carousel-shell { position: relative; width: 100%; padding-inline: 56px; } .reels-track { display: flex; gap: 18px; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 5px 0 16px; } /* Centra cualquier cantidad de reels cuando entran completos en el ancho visible. Si desbordan, JavaScript vuelve al inicio del carril para conservar el scroll. */ .reels-track.is-content-centered { justify-content: center; } .reels-section.reels-fit .reels-arrow { opacity: 0; visibility: hidden; pointer-events: none; } .reels-track::-webkit-scrollbar { display: none; } .reel-card { position: relative; flex: 0 0 clamp(220px, 18vw, 292px); aspect-ratio: 9 / 16; overflow: hidden; scroll-snap-align: start; border-radius: 20px; background: #101317; box-shadow: 0 18px 44px rgba(12, 16, 20, 0.2); isolation: isolate; } .reel-card::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: inherit; } .reel-card video, .reel-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .reel-card video { z-index: 0; display: block; object-fit: cover; background: #0d1013; } .reel-shade { z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 8, 11, 0.08) 28%, rgba(5, 8, 11, 0.12) 46%, rgba(5, 8, 11, 0.92) 100%); } .reel-copy { position: absolute; right: 20px; bottom: 26px; left: 20px; z-index: 2; color: #fff; pointer-events: none; } .reel-copy span { display: block; margin-bottom: 7px; color: #ff7368; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; } .reel-copy h3 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.65rem, 2.2vw, 2.15rem); line-height: 1; letter-spacing: 0.7px; } .reel-copy p { display: -webkit-box; margin-top: 8px; overflow: hidden; color: rgba(255, 255, 255, 0.78); font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .reel-play { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; color: #fff; background: rgba(8, 11, 14, 0.48); backdrop-filter: blur(8px); cursor: pointer; transition: transform 0.22s ease, background-color 0.22s ease, opacity 0.22s ease; } .reel-play:hover, .reel-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: rgba(227, 66, 52, 0.88); outline: 3px solid rgba(227, 66, 52, 0.28); outline-offset: 4px; } .reel-play svg { width: 25px; height: 25px; fill: currentColor; } .reel-icon-play { margin-left: 3px; } .reel-icon-pause, .reel-card.is-playing .reel-icon-play { display: none; } .reel-card.is-playing .reel-icon-pause { display: block; } .reel-card.is-playing .reel-play { opacity: 0; } .reel-card.is-playing:hover .reel-play, .reel-card.is-playing:focus-within .reel-play { opacity: 1; } .reel-progress { position: absolute; right: 18px; bottom: 13px; left: 18px; z-index: 3; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.28); } .reel-progress span { display: block; width: 0; height: 100%; background: var(--color-primary); } .reels-arrow { position: absolute; top: 50%; z-index: 7; display: grid; place-items: center; width: 46px; height: 74px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; color: #fff; background: #11161b; box-shadow: 0 12px 28px rgba(9, 12, 15, 0.28); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .reels-arrow:hover, .reels-arrow:focus-visible { color: #fff; background: var(--color-primary); transform: translateY(-50%) scale(1.05); outline: 3px solid rgba(227, 66, 52, 0.22); } .reels-arrow:disabled { opacity: 0.25; cursor: default; transform: translateY(-50%); } .reels-arrow svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .reels-arrow-prev { left: 7px; } .reels-arrow-next { right: 7px; } @media (max-width: 700px) { .reels-section { padding: 42px 0 54px; } .reels-heading { width: calc(100% - 38px); align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 18px; } .reels-intro { max-width: 310px; text-align: left; } .reels-carousel-shell { padding-inline: 19px; } .reels-track { gap: 12px; padding-right: 34px; } .reel-card { flex-basis: min(72vw, 280px); border-radius: 17px; } .reels-arrow { top: 44%; width: 40px; height: 60px; border-radius: 12px; } .reels-arrow-prev { left: 3px; } .reels-arrow-next { right: 3px; } } @media (prefers-reduced-motion: reduce) { .reels-track { scroll-behavior: auto; } } .password-control { position: relative; min-width: 0; } .password-control input { width: 100%; padding-right: 54px; } .password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: rgba(233, 237, 241, 0.55); cursor: pointer; box-shadow: none; } .password-toggle:hover, .password-toggle:focus-visible { border-color: rgba(227, 66, 52, 0.35); background: rgba(227, 66, 52, 0.1); color: #ffffff; outline: none; } .password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .password-toggle .password-eye-hide, .password-toggle.is-visible .password-eye-show { display: none; } .password-toggle.is-visible .password-eye-hide { display: block; } /* Bienvenida administrable del inicio */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.welcome-open { overflow: hidden; } .welcome-overlay[hidden] { display: none; } .welcome-overlay { --welcome-duration: 10s; position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: clamp(16px, 4vw, 54px); background: linear-gradient(rgba(70,191,211,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(70,191,211,.055) 1px, transparent 1px), rgba(4,8,11,.84); background-size: 42px 42px, 42px 42px, auto; -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); opacity: 0; transition: opacity .26s ease; } .welcome-overlay.is-visible { opacity: 1; } .welcome-dialog { position: relative; width: min(900px, 92vw); max-height: 88vh; padding: clamp(9px, 1.4vw, 15px); overflow: hidden; border: 1px solid rgba(70,191,211,.58); border-top-color: rgba(240,86,70,.94); border-radius: 24px; background: linear-gradient(145deg, #172127, #080c0f 74%); box-shadow: 0 34px 100px rgba(0,0,0,.58), 0 0 34px rgba(70,191,211,.14); transform: translateY(18px) scale(.97); transition: transform .32s cubic-bezier(.2,.8,.2,1); } .welcome-dialog::before { content: ''; position: absolute; inset: 8px; z-index: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.06); border-radius: 17px; } .welcome-overlay.is-visible .welcome-dialog { transform: translateY(0) scale(1); } .welcome-image { position: relative; z-index: 1; display: block; width: 100%; max-height: calc(88vh - 30px); object-fit: contain; border-radius: 16px; background: #fff; } .welcome-close { position: absolute; top: clamp(18px, 2.2vw, 27px); right: clamp(18px, 2.2vw, 27px); z-index: 3; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.7); border-radius: 7px; background: rgba(9,14,18,.82); box-shadow: 0 6px 15px rgba(0,0,0,.3); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .welcome-close::before { content: ''; position: absolute; inset: -11px; } .welcome-close span { position: absolute; top: 10px; left: 5px; width: 12px; height: 2px; border-radius: 2px; background: #fff; } .welcome-close span:first-child { transform: rotate(45deg); } .welcome-close span:last-child { transform: rotate(-45deg); } .welcome-close:hover, .welcome-close:focus-visible { border-color: #ff8175; background: #e34234; box-shadow: 0 0 22px rgba(227,66,52,.42); outline: none; transform: rotate(3deg) scale(1.05); } .welcome-timer { position: absolute; right: 24px; bottom: 20px; left: 24px; z-index: 2; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(7,12,15,.3); } .welcome-timer span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e34234, #ff8175 46%, #46bfd3); transform-origin: left; animation: welcome-life var(--welcome-duration) linear forwards; } @keyframes welcome-life { to { transform: scaleX(0); } } @media (max-width: 900px) { .nav-menu a, .account-menu-dropdown a { color: #25292d; border-color: rgba(227,66,52,.58); background: linear-gradient(90deg, #e34234, #e34234) 10px 9px / 10px 2px no-repeat, linear-gradient(145deg, #fff, #fafafa); box-shadow: 0 7px 18px rgba(83,45,40,.08), inset 0 0 0 1px rgba(255,255,255,.8); } .nav-menu a[data-icon]::before { border-color: rgba(227,66,52,.32); background: var(--nav-icon) center / 19px 19px no-repeat, linear-gradient(145deg, #fffdfc, #f7eeee); } .nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a:active, .account-menu-dropdown a:hover, .account-menu-dropdown a:focus-visible, .account-menu-dropdown a:active { color: #fff; border-color: #e34234; background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.9)) 10px 9px / 13px 2px no-repeat, linear-gradient(115deg, #e34234 0 72%, #15242a 72% 100%); box-shadow: 0 13px 28px rgba(227,66,52,.22), 0 0 0 2px rgba(227,66,52,.1); } .account-menu-dropdown .account-logout { color: #a82f25; } .welcome-overlay { padding: 12px; } .welcome-dialog { width: min(94vw, 660px); max-height: 91vh; padding: 7px; border-radius: 18px; } .welcome-image { max-height: calc(91vh - 14px); border-radius: 13px; } .welcome-close { top: 15px; right: 15px; width: 21px; height: 21px; } .welcome-close span { top: 9px; left: 4px; width: 12px; } .welcome-timer { right: 16px; bottom: 13px; left: 16px; } } @media (prefers-reduced-motion: reduce) { .welcome-overlay, .welcome-dialog, .welcome-close { transition: none; } }