/* ============================================================ FERMITESLA · Sistema de diseño premium Paleta del logo (naranja + carbón) · Claro / Oscuro Inter · Liquid Glass · Animaciones avanzadas ============================================================ */ /* ---------- Tipografía · Inter self-host (variable, subset latino) ---------- Un solo woff2 variable (100–900) preargado en el . Elimina el render- block y las 2 conexiones a Google Fonts. El @font-face de respaldo usa las métricas de Inter sobre Arial (size-adjust/ascent/descent) para que NO haya salto de layout (CLS) mientras carga la fuente ni en el titular animado. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0.00%; size-adjust: 107.12%; } /* ---------- Tokens · MODO OSCURO (por defecto) ---------- */ :root { color-scheme: dark; /* Marca (naranja del logo) — acento luminoso con glow premium */ --brand: #F26A1B; --accent: #FF8A3D; /* naranja vivo y luminoso → pop sobre el grafito */ --accent-strong: #FF7A22; /* hover / estado activo */ --accent-2: #FFB877; /* ámbar para degradados/glow */ --accent-ink: #1A1003; /* texto sobre el acento */ --accent-soft: rgba(255, 138, 61, .16); /* relleno de íconos */ --accent-line: rgba(255, 138, 61, .35); /* borde de íconos */ --accent-line-hover: rgba(255, 138, 61, .62); --accent-glow: rgba(255, 138, 61, .30); /* Alias retro-compatibles (no romper referencias var(--cyan)/var(--blue)) */ --cyan: var(--accent); --blue: var(--accent-2); --glow: var(--accent-2); /* Neutros — grafito azulado profundo (premium moderno) */ --bg: #0A0D14; --bg-2: #0F141E; --bg-3: #18202D; --text: #E6EAF2; --heading: #F5F8FC; --muted: #939CAC; --muted-2: #737C8B; /* Superficies frías translúcidas (vidrio premium) */ --surface: rgba(140, 170, 220, .05); --surface-2: rgba(140, 170, 220, .085); --surface-hover: rgba(140, 170, 220, .10); --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .18); --hairline: rgba(255, 255, 255, .065); --sheen: rgba(255, 255, 255, .11); --card-shadow: 0 2px 5px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .3); --card-shadow-lg: 0 30px 70px rgba(2, 6, 14, .65); /* Glow ambiente del fondo (solo modo oscuro): luz naranja + azul */ --bg-ambient: radial-gradient(760px 480px at 4% -8%, rgba(255, 138, 61, .13), transparent 60%), radial-gradient(840px 560px at 104% -4%, rgba(62, 114, 210, .13), transparent 58%); /* Glass */ --glass: rgba(13, 18, 28, .6); --glass-hi: rgba(255, 255, 255, .12); /* Navbar / paneles */ --nav-bg: rgba(10, 14, 22, .78); --nav-text: #E6EAF2; --nav-text-hover: #FFFFFF; --nav-hover: rgba(255, 255, 255, .08); --panel: rgba(15, 20, 30, .98); --ease: cubic-bezier(.19, 1, .22, 1); --ease-spring: cubic-bezier(.175, .885, .32, 1.275); --maxw: 80rem; } /* ---------- Tokens · MODO CLARO ---------- */ [data-theme="light"] { color-scheme: light; --bg-ambient: none; /* el glow ambiente es exclusivo del modo oscuro */ /* Marca (naranja) — intenso y accesible sobre blanco */ --accent: #E0610C; /* naranja vivo para acentos/botones */ --accent-strong: #C24E07; /* hover / estado activo */ --accent-2: #F2861E; /* ámbar para degradados */ --accent-ink: #FFFFFF; /* texto sobre el acento */ --accent-soft: rgba(224, 97, 12, .09); --accent-line: rgba(224, 97, 12, .24); --accent-line-hover: rgba(224, 97, 12, .48); --accent-glow: rgba(224, 97, 12, .18); /* Neutros — blanco premium con tinte slate frío sutil (espeja el oscuro) */ --bg: #F3F5F9; --bg-2: #FFFFFF; --bg-3: #E8ECF2; --text: #363D48; --heading: #121620; --muted: #59616E; --muted-2: #656E7C; /* Superficies / bordes / sombras */ --surface: #FFFFFF; --surface-2: #F1F4F9; --surface-hover: #FFFFFF; --border: rgba(17, 24, 39, .10); --border-strong: rgba(17, 24, 39, .16); --hairline: rgba(17, 24, 39, .07); --sheen: rgba(17, 24, 39, .04); --card-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 22px rgba(15, 23, 42, .07); --card-shadow-lg: 0 24px 50px rgba(15, 23, 42, .14); /* Glass */ --glass: rgba(255, 255, 255, .75); --glass-hi: rgba(255, 255, 255, .7); /* Navbar / paneles */ --nav-bg: rgba(255, 255, 255, .85); --nav-text: #3A424E; --nav-text-hover: #121620; --nav-hover: rgba(17, 24, 39, .05); --panel: rgba(255, 255, 255, .99); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; font-family: 'Inter', 'Inter Fallback', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg); background-image: var(--bg-ambient, none); background-attachment: fixed; background-repeat: no-repeat; color: var(--text); overflow-x: hidden; line-height: 1.6; transition: background-color .4s var(--ease), color .4s var(--ease); } ::selection { background: var(--accent); color: var(--accent-ink); } img { max-width: 100%; display: block; } /* Tamaño base de íconos SVG inline (se sobreescribe por contexto: .btn svg, .ico svg, etc.) */ .icn { width: 1.1rem; height: 1.1rem; flex: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: var(--heading); text-wrap: balance; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; } .pad { padding-inline: 1.5rem; } @media (min-width: 768px) { .pad { padding-inline: 3rem; } } @media (min-width: 1024px) { .pad { padding-inline: 4rem; } } .section { padding-block: 5rem; position: relative; } @media (min-width: 768px) { .section { padding-block: 7rem; } } .section--alt { background: var(--bg-2); border-block: 1px solid var(--hairline); } .eyebrow { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .25em; color: var(--accent); font-weight: 600; margin-bottom: 1rem; } .text-gradient { background: linear-gradient(110deg, var(--heading) 8%, var(--accent-2) 52%, var(--accent) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lead { color: var(--muted); font-size: 1.05rem; } @media (min-width: 768px) { .lead { font-size: 1.15rem; } } .h-display { font-size: clamp(2.1rem, 6vw, 4rem); } .h-section { font-size: clamp(1.9rem, 4.5vw, 3rem); } /* ---------- Glow blobs ---------- */ .glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: .5; } .glow--cyan { background: var(--accent-glow); } .glow--blue { background: var(--accent-glow); } [data-theme="light"] .glow { opacity: .32; } /* ---------- Liquid glass (de la plantilla) ---------- */ .liquid-glass { background: var(--glass); background-blend-mode: luminosity; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; box-shadow: inset 0 1px 1px var(--glass-hi); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, var(--glass-hi) 0%, rgba(255, 255, 255, .06) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .06) 80%, var(--glass-hi) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ---------- Glass cards ---------- */ .glass-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--card-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); position: relative; overflow: hidden; } .glass-card:hover { transform: translateY(-6px); border-color: var(--accent-line-hover); background: var(--surface-hover); box-shadow: var(--card-shadow-lg); } /* Sheen on hover */ .glass-card::after { content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(100deg, transparent, var(--sheen), transparent); transition: left .8s var(--ease); pointer-events: none; } .glass-card:hover::after { left: 130%; } /* ---------- Border Beam (luz que recorre el borde al hover) ---------- Adaptación en CSS puro del componente BorderBeam (MagicUI/shadcn), porque este sitio es estático (no React). Se aplica a TODAS las .glass-card (pcard, feature, faq, chip, tcard) y también a la .contact-card. - .glass-card usa ::before (su ::after ya hace el sheen). - .contact-card usa ::after (su ::before ya lo ocupa .liquid-glass). Colores por defecto del componente original: --bb-from #ffaa40 → --bb-to #9c40ff. Para usar el naranja de marca, cambiar las vars: --bb-from: var(--accent-2); --bb-to: var(--accent); Ajustes rápidos: --bb-width (grosor), --bb-duration (velocidad de giro). */ @property --bb-angle { syntax: ""; inherits: false; initial-value: 0deg; } .glass-card::before, .contact-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: var(--bb-width, 1.6px); background: conic-gradient(from var(--bb-angle) at 50% 50%, transparent 0deg, var(--bb-from, #ffaa40) 30deg, var(--bb-to, #9c40ff) 75deg, transparent 105deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; z-index: 2; } .glass-card:hover::before, .contact-card:hover::after { opacity: 1; animation: border-beam-spin var(--bb-duration, 5s) linear infinite; } @keyframes border-beam-spin { to { --bb-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .glass-card:hover::before, .contact-card:hover::after { animation: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.6rem; border-radius: .6rem; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease, gap .3s ease, box-shadow .3s ease, border-color .3s ease; border: 1px solid transparent; line-height: 1; } .btn:hover { transform: translateY(-2px); } .btn svg { width: 1.1em; height: 1.1em; } /* Botón primario de marca (naranja). Conserva el nombre .btn-white por compatibilidad. */ .btn-white { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px var(--accent-glow); } .btn-white:hover { background: var(--accent-strong); box-shadow: 0 10px 26px var(--accent-glow); } .btn-glass { border-color: var(--border-strong); color: var(--heading); } .btn-glass:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn-wa { background: #25D366; color: #fff; } .btn-wa:hover { background: #1ebe5a; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } /* ---------- Navbar · Tubelight (pastilla flotante) ---------- */ /* El logo se reutiliza en el footer, por eso conserva sus reglas base. */ .nav-logo { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--heading); } .nav-logo img { width: 2rem; height: 2rem; object-fit: contain; border-radius: .4rem; background: rgba(255, 255, 255, .92); padding: 2px; } /* Reserva de espacio para que el contenido no quede bajo los elementos flotantes. */ body.has-nav { padding-top: 5.5rem; } @media (max-width: 767px) { body.has-nav { padding-bottom: 6rem; } } /* Esquinas flotantes: logo (izq.) · tema + Cotizar (der.) */ .nav-corner { position: fixed; top: 1.25rem; z-index: 61; } .nav-corner--left { left: clamp(1rem, 4vw, 2.5rem); } .nav-corner--right { right: clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; gap: .5rem; } @media (max-width: 520px) { .nav-corner--left .nav-corner-txt { display: none; } /* solo isotipo en pantallas estrechas */ .nav-corner--right .btn { padding: .55rem .9rem; font-size: .85rem; } } /* Pastilla central flotante (sin transform para no romper position:fixed de hijos) */ .tubelight { position: fixed; top: 1.25rem; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 96vw; z-index: 60; border-radius: 999px; padding: .3rem; overflow: visible; /* anula overflow:hidden de .liquid-glass (submenús) */ background: var(--nav-bg); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0, 0, 0, .18); } @media (max-width: 767px) { .tubelight { top: auto; bottom: 1.25rem; } } .tube-row { position: relative; display: flex; align-items: center; gap: .25rem; } /* Item / enlace (pastilla individual) */ .tube-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1.4rem; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--nav-text); background: transparent; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .25s; } .tube-link:hover { color: var(--accent); } .tube-item.is-active > .tube-link, .tube-link[aria-current="page"] { color: var(--accent); } .tube-ico { display: none; align-items: center; } .tube-ico svg { width: 1.15rem; height: 1.15rem; } @media (max-width: 767px) { .tube-label { display: none; } .tube-ico { display: inline-flex; } .tube-link { padding: .55rem .95rem; } } /* Lámpara deslizante + haz de luz superior */ .tube-lamp { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--accent-soft); z-index: -1; pointer-events: none; transition: transform .4s var(--ease-spring), width .4s var(--ease-spring); } .tube-lamp i { position: absolute; top: -.45rem; left: 50%; width: 2rem; height: .28rem; transform: translateX(-50%); background: var(--accent); border-radius: 999px 999px 0 0; box-shadow: 0 0 14px 3px var(--accent), 0 -2px 18px 6px var(--accent-glow); } .tube-lamp i::before { content: ''; position: absolute; top: -.4rem; left: 50%; transform: translateX(-50%); width: 3rem; height: 1.4rem; background: var(--accent-glow); border-radius: 50%; filter: blur(8px); } @media (prefers-reduced-motion: reduce) { .tube-lamp { transition: none; } } /* Desplegables (Productos / Servicios) — con "puente" invisible */ .tube-item { position: relative; } .tube-dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: .6rem; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility .22s; z-index: 70; } .tube-dd-inner { border-radius: 1rem; padding: .65rem; transform: translateY(8px); transition: transform .22s var(--ease); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); background: var(--panel); border: 1px solid var(--border-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .tube-item:hover .tube-dd, .tube-item:focus-within .tube-dd, .tube-item.open .tube-dd { opacity: 1; visibility: visible; } .tube-item:hover .tube-dd-inner, .tube-item:focus-within .tube-dd-inner, .tube-item.open .tube-dd-inner { transform: translateY(0); } .tube-dd--mega .tube-dd-inner { width: min(560px, 92vw); display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .tube-dd--list .tube-dd-inner { width: min(300px, 92vw); } /* En móvil la pastilla está abajo: los desplegables abren hacia arriba y se centran en pantalla. */ @media (max-width: 767px) { .tube-dd { position: fixed; top: auto; bottom: 5.25rem; left: 0; right: 0; margin-inline: auto; transform: none; padding-top: 0; width: max-content; max-width: 92vw; } .tube-dd-inner { transform: translateY(8px); } .tube-item.open .tube-dd-inner { transform: translateY(0); } .tube-dd--mega .tube-dd-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .tube-dd--mega .tube-dd-inner { grid-template-columns: 1fr; } } .dd-link { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .7rem; border-radius: .6rem; transition: background .2s; } .dd-link:hover { background: var(--nav-hover); } .dd-link svg { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; margin-top: .15rem; } .dd-link b { display: block; font-size: .85rem; font-weight: 600; color: var(--heading); } .dd-link span { font-size: .72rem; color: var(--muted); } /* ---------- Botón cambiar tema (claro/oscuro) ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .6rem; background: var(--nav-hover); border: 1px solid var(--border); color: var(--nav-text-hover); cursor: pointer; transition: background .25s, border-color .25s, transform .25s, color .25s; } .theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent-line-hover); color: var(--accent); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle .ico-moon { display: none; } .theme-toggle .ico-sun { display: block; } [data-theme="light"] .theme-toggle .ico-sun { display: none; } [data-theme="light"] .theme-toggle .ico-moon { display: block; } /* ---------- Hero (interior) ---------- */ /* El hero siempre muestra una imagen oscurecida → su texto se mantiene claro en ambos modos para garantizar contraste. */ .hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero--tall { min-height: 100svh; align-items: center; } .hero--tall .hero-inner { padding-block: 7.5rem 3.5rem; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; } /* Video del hero principal: lo oscurecemos para que el texto blanco resalte */ .hero--tall .hero-media video { filter: brightness(.55) contrast(1.02) saturate(1.02); } .hero-media--zoom img { animation: heroZoom 18s var(--ease) forwards; } @keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } } .hero-scrim { position: absolute; inset: 0; z-index: -1; /* Oscuro fijo (no var(--bg)): el hero se mantiene oscuro y legible en ambos modos; en modo claro genera un borde limpio con la sección siguiente. */ background: linear-gradient(to top, #0A0D14 1%, rgba(6, 9, 16, .55) 38%, rgba(6, 9, 16, .30) 100%), linear-gradient(to right, rgba(6, 9, 16, .82), rgba(6, 9, 16, .12)); } .hero-inner { padding-block: 7rem 4rem; } .hero h1 { color: #fff; font-size: clamp(2.2rem, 6.2vw, 4.4rem); max-width: 16ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .4); } /* Hero principal: el titular vive en media columna (>=1024px); acotamos el tamaño para que la palabra más larga ("Geomembranas") nunca se desborde. */ .hero--tall h1 { font-size: clamp(2rem, 5.2vw, 3.7rem); max-width: 18ch; overflow-wrap: break-word; } .hero p { color: #E7E9EB; max-width: 46ch; margin-top: 1.25rem; font-size: 1.05rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); } @media (min-width: 768px) { .hero p { font-size: 1.18rem; } } /* En el hero (siempre oscuro) el botón "glass" se mantiene claro en ambos modos */ .hero .crumbs { color: #C9CDD2; } .hero .crumbs a:hover { color: #fff; } .hero .btn-glass { color: #fff; border-color: rgba(255, 255, 255, .45); } .hero .btn-glass:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; } /* ============================================================ Hero · showcase de capacidades (reemplaza la antigua tarjeta "Respuesta integral"): tiles de vidrio flotando sobre un halo cónico que gira, con tilt 3D, entrada escalonada y chips. ============================================================ */ .hero-showcase { position: relative; isolation: isolate; justify-self: end; width: min(100%, 30rem); padding: 1.25rem; } /* Halo cónico que gira: motor visual continuo del bloque */ .hero-showcase-ring { position: absolute; z-index: -2; top: 46%; left: 50%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, var(--accent-glow) 55deg, rgba(62, 114, 210, .30) 150deg, transparent 230deg, transparent 360deg); filter: blur(38px); opacity: .75; animation: showcase-spin 24s linear infinite; } @keyframes showcase-spin { to { transform: translate(-50%, -50%) rotate(1turn); } } /* Orbe estático para dar profundidad bajo el deck */ .hero-showcase-orb { position: absolute; z-index: -2; inset: 16% 22%; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 66%); filter: blur(30px); opacity: .55; } .hero-deck { display: grid; gap: .8rem; } .hero-tile { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.05rem; border-radius: 1rem; color: #fff; background: rgba(12, 16, 24, .52); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform-style: preserve-3d; /* Entrada escalonada (transform) + levitación continua (translate). Usamos la propiedad `translate` para la flotación porque es independiente de `transform`: así se compone con el tilt 3D del cursor (que sí usa transform) en vez de pisarlo. El delay negativo desfasa el bamboleo de cada tile. */ animation: tile-in .7s var(--ease-spring) backwards, tile-float 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * .12s + .2s), calc(var(--i, 0) * -1.4s); } @keyframes tile-float { from { translate: 0 0; } to { translate: 0 -8px; } } /* Realce superior de vidrio */ .hero-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255, 255, 255, .16), transparent 42%); pointer-events: none; } @keyframes tile-in { from { opacity: 0; transform: translateY(28px) scale(.95); } to { opacity: 1; transform: none; } } .hero-tile-ico { flex: none; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .72rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); box-shadow: 0 0 20px var(--accent-glow), inset 0 0 0 1px rgba(255, 255, 255, .04); } .hero-tile-ico svg { width: 1.3rem; height: 1.3rem; } .hero-tile-txt { min-width: 0; position: relative; } .hero-tile-txt b { display: block; font-size: .98rem; color: #fff; line-height: 1.2; } .hero-tile-txt span { display: block; font-size: .84rem; color: #CDD3DB; line-height: 1.38; } /* Chips flotantes bajo el deck */ .hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1rem; } .hero-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); animation: chip-in .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .1s + .65s); } .hero-chip:hover { transform: translateY(-3px); border-color: var(--accent-line-hover); background: rgba(255, 255, 255, .12); } .hero-chip svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; } @keyframes chip-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .home-hero-copy { max-width: 42rem; } .home-kicker { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin-bottom: 1rem; padding: .42rem .72rem; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* (La antigua tarjeta .hero-proof-* se reemplazó por .hero-showcase, arriba.) */ @media (max-width: 767px) { html, body { max-width: 100%; overflow-x: hidden; } .home-hero-grid, .home-hero-copy, .hero-showcase { min-width: 0; } .home-hero-grid { width: 100%; max-width: 100%; } .home-hero-copy { width: 100%; max-width: min(20rem, calc(100vw - 3rem)); } .hero--tall { min-height: auto; } .hero-inner { width: 100%; max-width: 100vw; padding-block: 8.5rem 8.5rem; } .hero--tall h1 { font-size: clamp(1.95rem, 12vw, 2.85rem); max-width: 12ch; } .hero p { width: 100%; max-width: min(20rem, calc(100vw - 3rem)); overflow-wrap: anywhere; } .hero [data-fade] { margin-top: 1.25rem !important; } .hero [data-fade] .btn-glass { display: none; } .home-kicker { display: inline-block; width: 100%; max-width: min(20rem, calc(100vw - 3rem)); font-size: .68rem; line-height: 1.45; letter-spacing: .08em; white-space: normal; overflow-wrap: anywhere; } .hero-showcase { width: 100%; max-width: min(22rem, calc(100vw - 3rem)); padding: .75rem; margin-inline: auto; } .hero-showcase-ring { width: 150%; filter: blur(30px); } .hero-tile { padding: .8rem .85rem; gap: .7rem; } .hero-tile-ico { width: 2.4rem; height: 2.4rem; } .hero-tile-txt b { font-size: .92rem; } .hero-tile-txt span { font-size: .8rem; } .hero-chips { gap: .45rem; } .hero-chip { padding: .5rem .8rem; font-size: .82rem; } .hero-tile-txt b, .hero-tile-txt span, .hero-chip { overflow-wrap: anywhere; } } @media (max-width: 480px) { .nav-corner--right .btn { display: none; } .nav-corner--right { right: 1rem; } } /* Breadcrumb */ .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 1.4rem; } .crumbs a:hover { color: var(--heading); } .crumbs .sep { opacity: .5; } /* ---------- Animated heading ---------- */ /* Cada palabra va en un contenedor inline-block que NO se parte: evita cortes feos a mitad de palabra (p. ej. "obr / a"). */ .ah-word { display: inline-block; white-space: nowrap; } .ah-char { display: inline-block; opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; } .ah-char.in { opacity: 1; transform: translateX(0); } /* ---------- FadeIn / Reveal ---------- */ .fade-in { opacity: 0; transition: opacity 1s ease; } .fade-in.visible { opacity: 1; } .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.visible { opacity: 1; transform: none; } /* ---------- Home sections ---------- */ .home-stats { position: relative; z-index: 2; margin-top: -2.4rem; } .home-stats-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; } @media (min-width: 760px) { .home-stats-grid { grid-template-columns: repeat(3, 1fr); } } .home-stat { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.5rem 1.6rem; border-radius: 1rem; background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .home-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); } .home-stat:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-lg); border-color: var(--accent-line); } .home-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .home-stat-ico { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .7rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); } .home-stat-ico svg { width: 1.35rem; height: 1.35rem; } .home-stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: .02em; color: var(--muted-2); opacity: .45; } .home-stat b { display: block; color: var(--heading); font-size: 1.05rem; margin-bottom: .4rem; } .home-stat p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; } .section-head { display: grid; gap: 1rem; margin-bottom: 3rem; align-items: end; } .section-head .eyebrow { margin-bottom: .8rem; } .section-head .lead { margin: 0; max-width: 42rem; } @media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, .95fr) minmax(18rem, .62fr); } } .process-rail { display: grid; gap: 1rem; } @media (min-width: 760px) { .process-rail { grid-template-columns: repeat(4, 1fr); } } .process-step { position: relative; padding: 1.35rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); } .process-step::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, var(--accent-soft), transparent 42%); opacity: .8; pointer-events: none; } .process-step > * { position: relative; } .process-step span { display: inline-flex; margin-bottom: 1.2rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .16em; } .process-step h3 { font-size: 1.08rem; margin-bottom: .55rem; } .process-step p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; } .home-media-card { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--border); box-shadow: var(--card-shadow-lg); } .home-media-card img { border: 0; border-radius: 0; min-height: 24rem; } .home-media-card div { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: .85rem; color: #fff; background: rgba(7, 10, 16, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .home-media-card b { display: block; margin-bottom: .25rem; color: #fff; } .home-media-card span { display: block; color: #CFD5DD; font-size: .9rem; line-height: 1.45; } .mini-callout { display: grid; gap: .2rem; margin: 0 0 1.35rem; padding: 1rem 1.1rem; border-radius: .85rem; background: var(--accent-soft); border: 1px solid var(--accent-line); } .mini-callout b { color: var(--heading); } .mini-callout span { color: var(--muted); font-size: .92rem; } /* ---------- Grids & cards ---------- */ .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .grid-6 { grid-template-columns: 1fr 1fr; } @media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1180px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .feature { padding: 1.6rem; } .feature .ico { width: 2.8rem; height: 2.8rem; border-radius: .7rem; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .feature .ico svg { width: 1.4rem; height: 1.4rem; color: var(--accent); } /* En columnas estrechas (grid-4 dentro de un split) las palabras largas en español rompían a mitad ("responsabl-e"). hyphens:auto corta por sílabas con guion (html lang="es-PE"), dando un salto limpio y legible. */ .feature h3 { font-size: 1.12rem; margin-bottom: .5rem; overflow-wrap: break-word; hyphens: auto; } .feature p { color: var(--muted); font-size: .92rem; margin: 0; overflow-wrap: break-word; hyphens: auto; } /* Un grid-4 dentro de un split ocupa media columna → 4 tarjetas quedan demasiado estrechas y las palabras largas rompían feo. En ese contexto usamos 2 columnas (las tarjetas full-width siguen en 4). */ @media (min-width: 1024px) { .split .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Product/Service card with image */ .pcard { display: flex; flex-direction: column; } .pcard .media { aspect-ratio: 16/10; overflow: hidden; } .pcard .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .pcard:hover .media img { transform: scale(1.06); } .pcard .body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; } .pcard .body h3 { font-size: 1.2rem; margin-bottom: .5rem; } .pcard .body p { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; flex: 1; } .pcard .more { font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 600; transition: gap .3s; } .pcard:hover .more { gap: .7rem; } .pcard .more svg { width: 1rem; height: 1rem; } .tcard { padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; } .tcard img { width: 4rem; height: 4rem; object-fit: cover; border-radius: .6rem; } .tcard span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); font-weight: 500; } /* ---------- Home · Catálogo técnico (destacados + directorio) ---------- */ .catalog-feat { margin-bottom: 1.5rem; } /* Chip de ícono sobre la imagen de las tarjetas destacadas */ .pcard .media { position: relative; } .pcard-ico { position: absolute; top: .85rem; left: .85rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .65rem; color: var(--accent); background: rgba(10, 13, 20, .55); border: 1px solid var(--accent-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pcard-ico svg { width: 1.25rem; height: 1.25rem; } /* Separador "Más líneas de producto" */ .catalog-more { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.25rem; color: var(--muted-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; font-weight: 600; } .catalog-more::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* Directorio de líneas de producto (refleja el mega-menú) */ .catalog-rest { display: grid; gap: .85rem; grid-template-columns: 1fr; } @media (min-width: 560px) { .catalog-rest { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .catalog-rest { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1180px) { .catalog-rest { grid-template-columns: repeat(4, 1fr); } } .catalog-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; } .catalog-tile-ico { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: .7rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .catalog-tile-ico svg { width: 1.3rem; height: 1.3rem; } .catalog-tile-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; } .catalog-tile-txt b { font-size: .95rem; font-weight: 600; color: var(--heading); line-height: 1.2; } .catalog-tile-txt > span { font-size: .78rem; color: var(--muted); } .catalog-tile-arrow { color: var(--muted-2); flex: none; display: inline-flex; transition: transform .3s var(--ease), color .3s var(--ease); } .catalog-tile-arrow svg { width: 1.1rem; height: 1.1rem; } .catalog-tile:hover .catalog-tile-ico { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .catalog-tile:hover .catalog-tile-arrow { color: var(--accent); transform: translateX(3px); } /* ---------- Home · Servicios técnicos (tarjeta con chip de ícono) ---------- */ .scard { display: flex; flex-direction: column; } .scard-media { position: relative; aspect-ratio: 16/10; overflow: hidden; } .scard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .scard:hover .scard-media img { transform: scale(1.06); } .scard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(8, 11, 17, .72)); } .scard-ico { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .7rem; color: var(--accent); background: rgba(10, 13, 20, .6); border: 1px solid var(--accent-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .scard-ico svg { width: 1.35rem; height: 1.35rem; } .scard-body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; } .scard-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-weight: 600; margin-bottom: .55rem; } .scard-body h3 { font-size: 1.15rem; margin-bottom: .4rem; } .scard-body p { color: var(--muted); font-size: .9rem; margin: 0 0 1.1rem; flex: 1; line-height: 1.5; } .scard .more { font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 600; transition: gap .3s; } .scard:hover .more { gap: .7rem; } .scard .more svg { width: 1rem; height: 1rem; } /* ---------- Spec table ---------- */ .spec { width: 100%; border-collapse: collapse; font-size: .92rem; overflow: hidden; border-radius: 1rem; } .spec th, .spec td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); } .spec thead th { background: var(--surface-2); color: var(--heading); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .spec tbody tr:hover { background: var(--surface); } .spec td:first-child { color: var(--heading); font-weight: 500; } .spec td { color: var(--muted); } .spec-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 1rem; } /* ---------- Chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: .6rem; } .chip { padding: .55rem 1.1rem; border-radius: 999px; font-size: .85rem; color: var(--text); } /* ---------- FAQ ---------- */ .faq { border-radius: .85rem; padding-inline: 1.25rem; margin-bottom: .7rem; } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; padding-block: 1.1rem; font-weight: 500; color: var(--heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); transition: transform .3s; } .faq[open] summary svg { transform: rotate(45deg); } .faq p { color: var(--muted); font-size: .92rem; padding-bottom: 1.1rem; margin: 0; } .faq-list { display: grid; gap: .7rem; margin: 1.25rem 0; } .faq-list .faq { margin-bottom: 0; } /* ---------- Imagen intercalada en texto (landing) ---------- */ .landing-figure { margin: 2.5rem 0; } .landing-figure img { width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--border); box-shadow: var(--card-shadow-lg); } .landing-figure figcaption { margin-top: .75rem; font-size: .82rem; color: var(--muted-2); } /* ---------- Proceso (lista numerada premium) ---------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 1.25rem 0; display: grid; gap: .8rem; } .steps li { counter-increment: step; position: relative; padding: 1rem 1.2rem 1rem 3.6rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); box-shadow: var(--card-shadow); color: var(--muted); font-size: .95rem; line-height: 1.55; } .steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.85rem; height: 1.85rem; border-radius: .55rem; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-weight: 700; font-size: .95rem; } .steps li strong { color: var(--heading); font-weight: 600; } /* ---------- Split section ---------- */ .split { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } } .split img { border-radius: 1.25rem; border: 1px solid var(--border); width: 100%; object-fit: cover; } /* ---------- CTA band ---------- */ .cta-band { border-radius: 1.5rem; padding: 3rem 1.5rem; text-align: center; } @media (min-width: 768px) { .cta-band { padding: 4rem; } } .cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; } .cta-band p { color: var(--muted); max-width: 44ch; margin: 0 auto; } /* ---------- Formularios ---------- */ .field { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; padding: .7rem .85rem; color: var(--text); font-family: inherit; font-size: .92rem; transition: border-color .2s, box-shadow .2s; } .field::placeholder { color: var(--muted-2); } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } select.field { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.1rem; } select.field option { color: var(--text); background: var(--bg-3); } textarea.field { min-height: 5.5rem; line-height: 1.5; } .flabel { display: grid; gap: .4rem; font-size: .85rem; color: var(--muted); } .flabel > span { font-weight: 500; letter-spacing: .01em; } .req { color: var(--accent); font-weight: 600; } .qhoney { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .quote-form { display: grid; gap: .7rem; grid-template-columns: 1fr; max-width: 42rem; margin: 1.75rem auto 0; text-align: left; } @media (min-width: 720px) { .quote-form { grid-template-columns: 1fr 1fr; } .quote-form .btn { grid-column: 1 / -1; justify-content: center; } } .quote-form--stack { grid-template-columns: 1fr; } .qfield--wide { grid-column: 1 / -1; } .cta-alt { display: flex; align-items: center; gap: 1rem; max-width: 42rem; margin: 1.5rem auto; color: var(--muted-2); font-size: .8rem; } .cta-alt::before, .cta-alt::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ---------- Tarjeta de contacto (dos paneles) ---------- */ /* El panel lateral se mantiene oscuro en ambos modos (acento premium). */ .contact-card { display: grid; grid-template-columns: 1fr; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--border); } @media (min-width: 940px) { .contact-card { grid-template-columns: 0.82fr 1.18fr; } } .contact-aside { position: relative; padding: 2.5rem 2rem; background: radial-gradient(120% 80% at 0% 0%, var(--accent-glow), transparent 60%), linear-gradient(160deg, #1A2433, #0A0D14 78%); border-bottom: 1px solid rgba(255, 255, 255, .08); } @media (min-width: 940px) { .contact-aside { padding: 3rem 2.5rem; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .08); } } .contact-eyebrow { color: var(--accent); } .contact-aside-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: .6rem 0 1rem; color: #fff; } .contact-aside-sub { color: #C2C7CD; font-size: .98rem; margin: 0 0 2rem; max-width: 34ch; } .contact-lines { display: grid; gap: 1.1rem; } .contact-line { display: flex; gap: .9rem; align-items: flex-start; color: #fff; } a.contact-line { transition: opacity .2s; } a.contact-line:hover { opacity: .8; } .contact-ico { flex: none; width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .7rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--accent); } .contact-ico svg { width: 1.2rem; height: 1.2rem; } .contact-ico--wa { color: #25D366; } .contact-ico--wa span { width: 1.2rem; height: 1.2rem; display: inline-flex; } .contact-line-txt { display: grid; gap: .15rem; font-size: .92rem; color: #C2C7CD; line-height: 1.4; } .contact-line-txt b { color: #fff; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; } .contact-main { padding: 2.25rem 1.75rem; background: var(--bg-2); } @media (min-width: 768px) { .contact-main { padding: 3rem 2.75rem; } } .contact-form-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .5rem; } .contact-form-sub { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; } .quote-trust { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.35rem; } .quote-trust span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--heading); font-size: .78rem; font-weight: 600; line-height: 1.2; } .quote-trust svg { width: 1rem; height: 1rem; color: var(--accent); } .contact-main .quote-form { max-width: none; margin: 1.5rem 0 0; } /* ---------- Confirmación de envío ---------- */ .form-sent { display: grid; justify-items: start; gap: .35rem; margin: 1.5rem 0 0; padding: 1.5rem 1.6rem; border-radius: 1rem; background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .35); } .form-sent-ico { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #25D366; color: #04210f; margin-bottom: .35rem; } .form-sent-ico svg { width: 1.4rem; height: 1.4rem; } .form-sent strong { font-size: 1.1rem; font-weight: 600; color: var(--heading); } .form-sent span { color: var(--muted); font-size: .92rem; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 32s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { color: var(--muted-2); font-size: .95rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; } /* ---------- Footer ---------- */ .footer { background: var(--bg); border-top: 1px solid var(--border); padding-block: 4rem 2rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .footer h3 { font-size: .85rem; font-weight: 600; margin-bottom: 1.1rem; } .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; } .footer a, .footer li { color: var(--muted); font-size: .9rem; } .footer a:hover { color: var(--heading); } .footer-bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .78rem; color: var(--muted-2); } /* ---------- WhatsApp float + scroll progress ---------- */ .wa-float { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 80; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: transform .3s; animation: wa-pulse 2.6s infinite; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 1.75rem; height: 1.75rem; } @media (max-width: 767px) { .wa-float { width: 3.15rem; height: 3.15rem; } .wa-float svg { width: 1.55rem; height: 1.55rem; } } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); z-index: 90; transition: width .1s linear; } /* ---------- Accesibilidad ---------- */ .skip { position: absolute; left: -999px; top: 0; z-index: 100; } .skip:focus { left: .75rem; top: .75rem; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; border-radius: .5rem; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .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; } /* ---------- Galería de obra (con lightbox) ---------- */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; grid-auto-flow: dense; } @media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } } @media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); } } .gallery-item { position: relative; margin: 0; border-radius: 1rem; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; border: 1px solid var(--border); background: var(--bg-3); isolation: isolate; } /* primer ítem destacado: ocupa 2×2 en pantallas medianas+ */ @media (min-width: 640px) { .gallery-item--feat { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; } } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); filter: saturate(.96) brightness(.92); will-change: transform; } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.08); filter: saturate(1.05) brightness(1); } /* overlay de leyenda que sube en hover/focus */ .gallery-item figcaption { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.4rem .9rem .8rem; font-size: .82rem; font-weight: 500; color: #fff; text-align: left; background: linear-gradient(to top, rgba(5, 7, 12, .92), rgba(5, 7, 12, .35) 70%, transparent); transform: translateY(101%); transition: transform .45s var(--ease); } .gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { transform: translateY(0); } .gallery-zoom { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px var(--accent-glow); } .gallery-zoom svg { width: 1rem; height: 1rem; } /* destello (sheen) al pasar */ .gallery-item::after { content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); transition: left .7s var(--ease); pointer-events: none; } .gallery-item:hover::after { left: 150%; } .gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Clientes (marquesina de logos) ---------- */ .clients { overflow: hidden; } .clients-track { display: flex; align-items: center; gap: 1.25rem; width: max-content; animation: marquee 34s linear infinite; } .clients.marquee:hover .clients-track { animation-play-state: paused; } .client-logo { flex: none; display: grid; place-items: center; height: 4.5rem; min-width: 9.5rem; padding: .8rem 1.6rem; background: #fff; border-radius: .9rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .client-logo img { max-height: 2.6rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .35s var(--ease), opacity .35s var(--ease); } .client-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } .client-logo:hover img { filter: grayscale(0); opacity: 1; } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(3, 5, 10, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease); } .lightbox.open { display: flex; opacity: 1; } .lightbox-fig { margin: 0; max-width: min(92vw, 70rem); text-align: center; transform: scale(.94); transition: transform .35s var(--ease-spring); } .lightbox.open .lightbox-fig { transform: scale(1); } .lightbox-fig img { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin-inline: auto; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .lightbox-fig figcaption { margin-top: 1rem; color: #e5e7eb; font-size: .92rem; } .lightbox-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; } .lightbox-close:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); } .lightbox-close svg { width: 1.4rem; height: 1.4rem; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; } .lightbox-nav:hover { background: rgba(255, 255, 255, .18); } .lightbox-nav svg { width: 1.5rem; height: 1.5rem; } .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; } @media (max-width: 600px) { .lightbox-nav { display: none; } } /* ============================================================ MEJORAS · Motor de interacción (Fase 1) Variantes de reveal · spotlight · contadores · back-to-top · banda de cifras · layout de landing con CTA sticky ============================================================ */ /* ---- Reveal: variantes direccionales (el JS aplica el stagger) ---- */ .reveal--left { transform: translateX(-34px); } .reveal--right { transform: translateX(34px); } .reveal--scale { transform: scale(.94); } .reveal--up-lg { transform: translateY(48px); } .reveal--blur { filter: blur(10px); } .reveal--left.visible, .reveal--right.visible, .reveal--scale.visible, .reveal--up-lg.visible { transform: none; } .reveal--blur.visible { filter: none; } /* ---- Spotlight que sigue el cursor (lo activa theme.js con .has-spotlight) ---- Capa radial bajo el contenido (z-index:-1 + isolation) → nunca tiñe el texto. */ .has-spotlight { isolation: isolate; } .has-spotlight::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .45s var(--ease); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot, var(--accent-soft)), transparent 60%); } .has-spotlight:hover::after { opacity: 1; } /* ---- Banda de cifras (contadores animados) ---- */ .section.stat-band { position: relative; padding-block: 3.25rem; } @media (min-width: 768px) { .section.stat-band { padding-block: 4rem; } } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } @media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } } .stat-card { position: relative; padding: 1.6rem 1.25rem; border-radius: 1rem; text-align: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .stat-card:hover { transform: translateY(-5px); border-color: var(--accent-line-hover); box-shadow: var(--card-shadow-lg); } .stat-card .stat-ico { width: 2.5rem; height: 2.5rem; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: .65rem; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .stat-card .stat-ico svg { width: 1.3rem; height: 1.3rem; } .stat-num { display: block; font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, var(--heading) 10%, var(--accent) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat-label { display: block; margin-top: .55rem; color: var(--muted); font-size: .9rem; line-height: 1.4; } /* ---- Layout de landing: artículo + CTA lateral sticky ---- */ .landing-layout { display: grid; gap: 2.75rem; align-items: start; } @media (min-width: 1040px) { .landing-layout { grid-template-columns: minmax(0, 1fr) 20.5rem; gap: 3.5rem; } } .landing-article { max-width: 62rem; min-width: 0; font-size: 1.02rem; } .landing-article > :first-child { margin-top: 0; } /* ---- Tipografía editorial (prose) del artículo de landing ---- */ .landing-article .art-h2 { display: flex; align-items: center; gap: .85rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: var(--heading); margin: 3rem 0 1.1rem; scroll-margin-top: 6rem; } /* Chip de icono que encabeza cada sección (reemplaza la barra plana). */ .art-h2-ico { flex: none; width: 2.7rem; height: 2.7rem; border-radius: .8rem; display: grid; place-items: center; color: var(--accent); background: radial-gradient(120% 120% at 20% 10%, var(--accent-glow), transparent 60%), var(--accent-soft); border: 1px solid var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .art-h2-ico svg { width: 1.35rem; height: 1.35rem; } .landing-article .art-h3 { font-size: 1.18rem; font-weight: 600; color: var(--heading); letter-spacing: -.01em; margin: 1.9rem 0 .55rem; } .landing-article p { color: var(--muted); line-height: 1.78; margin: 0 0 1.1rem; max-width: 66ch; } .landing-article > p:first-of-type { font-size: 1.2rem; line-height: 1.7; color: var(--text); padding-left: 1.1rem; border-left: 3px solid var(--accent-line); margin-bottom: 1.6rem; } /* Primer párrafo de cada sección: un punto más destacado que el cuerpo. */ .landing-article p.art-p-lead { color: var(--text); font-size: 1.08rem; } .landing-article strong, .landing-article b { color: var(--heading); font-weight: 600; } .landing-article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .landing-article a:hover { color: var(--accent-strong); } .art-faqhead { margin: 3rem 0 1.4rem; } .art-faqhead .art-h2 { margin: 0; } /* ---- Tarjetas de prosa: convierte muros de texto en bloques dinámicos ---- */ .prose-cards { display: grid; gap: 1rem; margin: 1.7rem 0; } @media (min-width: 680px) { .prose-cards { grid-template-columns: repeat(2, 1fr); } } .prose-card { position: relative; overflow: hidden; padding: 1.5rem 1.4rem 1.35rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--card-shadow); transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } .prose-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .85; } .prose-card:hover { transform: translateY(-4px); border-color: var(--accent-line-hover); background: var(--surface-hover); box-shadow: var(--card-shadow-lg); } .prose-card-n { display: inline-block; margin-bottom: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); } .landing-article .prose-card p { margin: 0; max-width: none; color: var(--muted); line-height: 1.7; font-size: .98rem; } /* ---- Lista de checks como tarjetas (en lugar de viñetas planas) ---- */ .check-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .7rem; } @media (min-width: 600px) { .check-list { grid-template-columns: 1fr 1fr; } } .check-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.05rem; border-radius: .8rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); color: var(--text); font-size: .95rem; line-height: 1.5; transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .check-list li:hover { transform: translateY(-3px); border-color: var(--accent-line-hover); background: var(--surface-hover); box-shadow: var(--card-shadow-lg); } .check-list li svg { color: var(--accent); flex: none; width: 1.2rem; height: 1.2rem; margin-top: .12rem; } .landing-aside { min-width: 0; } @media (min-width: 1040px) { .landing-aside { position: sticky; top: 6.5rem; } } .landing-cta { position: relative; padding: 1.6rem 1.5rem; border-radius: 1.25rem; overflow: hidden; isolation: isolate; background: radial-gradient(130% 90% at 0% 0%, var(--accent-glow), transparent 58%), linear-gradient(165deg, #18222F, #0A0D14 80%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--card-shadow-lg); color: #fff; } .landing-cta h3 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; } .landing-cta p { color: #C7CDD6; font-size: .92rem; margin: 0 0 1.2rem; line-height: 1.5; } .landing-cta .btn { width: 100%; justify-content: center; } .landing-cta .btn + .btn { margin-top: .6rem; } .landing-cta .btn-glass { color: #fff; border-color: rgba(255, 255, 255, .4); } .landing-cta .btn-glass:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .landing-cta-trust { display: grid; gap: .7rem; margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); } .landing-cta-trust div { display: flex; align-items: center; gap: .65rem; font-size: .85rem; color: #D4D9E0; } .landing-cta-trust svg { width: 1.05rem; height: 1.05rem; color: var(--accent); flex: none; } /* ---- Banda CTA full-width con orbe (cierre de página) ---- */ .cta-strip { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 3rem 1.75rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, var(--accent-glow), transparent 55%), linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border); } @media (min-width: 768px) { .cta-strip { padding: 4rem; } } .cta-strip h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: .85rem; } .cta-strip p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.75rem; } .cta-strip .btn { margin: 0 .35rem; } /* ---- Botón "volver arriba" ---- */ .to-top { position: fixed; right: 1.25rem; bottom: 5.4rem; z-index: 79; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--heading); background: var(--nav-bg); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease-spring), color .25s, border-color .25s; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { color: var(--accent); border-color: var(--accent-line-hover); transform: translateY(-3px); } .to-top svg { width: 1.25rem; height: 1.25rem; } /* En móvil el lanzador del chatbot ocupa la esquina inferior derecha (bottom:6rem en tablet); subimos "volver arriba" para que no se solapen. */ @media (max-width: 767px) { .to-top { bottom: 9.5rem; right: 1rem; } } /* ---- Eyebrow con barra de acento (opt-in: .eyebrow--bar) ---- */ .eyebrow--bar { display: inline-flex; align-items: center; gap: .6rem; } .eyebrow--bar::before { content: ''; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--accent); } /* ============================================================ PULIDO VISUAL (Fase 4) ============================================================ */ /* ---- Process rail: badge numerada + conector de flujo ---- */ .process-step span { width: 2.7rem; height: 2.7rem; border-radius: .75rem; display: inline-grid; place-items: center; margin-bottom: 1.15rem; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: .98rem; font-weight: 800; letter-spacing: 0; box-shadow: 0 4px 14px var(--accent-glow); } .process-rail--flow { position: relative; } @media (min-width: 760px) { .process-rail--flow::before { content: ''; position: absolute; top: calc(1.35rem + 1.35rem); left: 9%; right: 9%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-line) 0 7px, transparent 7px 15px); opacity: .55; z-index: 0; } .process-rail--flow .process-step { z-index: 1; } } /* ---- Encabezado decorativo de páginas simples ---- */ .page-head { position: relative; overflow: hidden; padding-top: 8.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .page-head .h-display { font-size: clamp(2rem, 5vw, 3.4rem); } .page-head-orb { position: absolute; top: -40%; right: -10%; width: 38rem; height: 38rem; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 62%); filter: blur(20px); opacity: .7; pointer-events: none; } [data-theme="light"] .page-head-orb { opacity: .5; } /* ---- Spec table: realce de fila al pasar + columna de valor ---- */ .spec tbody tr { transition: background .25s var(--ease); } .spec tbody tr:hover td:first-child { color: var(--accent); } /* ---- Orbe decorativo opcional para secciones (.section--orb) ---- */ .section--orb { position: relative; overflow: hidden; } .section--orb::before { content: ''; position: absolute; top: -20%; left: -8%; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 60%); opacity: .35; filter: blur(10px); pointer-events: none; z-index: 0; } [data-theme="light"] .section--orb::before { opacity: .22; } .section--orb > .wrap { position: relative; z-index: 1; } /* ============================================================ FASE 5 · Pulido fino (quick wins) Transiciones entre páginas · acordeón FAQ animado · text-wrap · textarea auto-grow ============================================================ */ /* ---- Tipografía: evita viudas y cortes feos en el cuerpo ---- */ .lead, .hero p, .landing-article p, .feature p, .pcard .body p, .scard-body p, .process-step p, .home-stat p, .stat-label { text-wrap: pretty; } /* ---- View Transitions (navegación entre páginas · MPA) ---- Cross-fade suave al cambiar de página. Mejora progresiva: los navegadores sin soporte navegan de forma normal. La UI fija (nav, CTA flotantes, barra de progreso) recibe nombre propio para que persista en lugar de parpadear durante la transición. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: var(--ease); } .tubelight { view-transition-name: ft-nav; } .nav-corner--left { view-transition-name: ft-nav-left; } .nav-corner--right { view-transition-name: ft-nav-right; } .scroll-progress { view-transition-name: ft-progress; } .wa-float { view-transition-name: ft-wa; } .to-top { view-transition-name: ft-totop; } /* ---- Acordeón FAQ con animación de altura real ----
abría de golpe; ahora la respuesta se despliega con suavidad vía ::details-content + interpolate-size. Degrada a apertura instantánea donde no haya soporte. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } @supports selector(::details-content) { .faq::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .4s var(--ease), opacity .35s var(--ease), content-visibility .4s allow-discrete; } .faq[open]::details-content { block-size: auto; opacity: 1; } } /* ---- Textarea que crece con el contenido ---- */ textarea.field { field-sizing: content; max-block-size: 16rem; } /* ============================================================ FASE 6 · Motion scroll-driven (CSS puro) Animaciones ligadas al scroll, sin listeners JS. theme.js desactiva sus equivalentes (parallax/progress) donde esto tiene soporte. Mejora progresiva: si no hay soporte, el JS se encarga. ============================================================ */ @supports (animation-timeline: scroll()) { /* Barra de progreso de lectura (sustituye al handler de scroll en JS) */ .scroll-progress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: none; animation: sp-progress linear both; animation-timeline: scroll(root); } @keyframes sp-progress { to { transform: scaleX(1); } } } @supports (animation-timeline: view()) { /* Parallax del hero: el contenedor deriva al salir de viewport (rango "exit"), por lo que en carga no hay salto. El zoom de entrada sigue en la ; aquí movemos el contenedor. */ .hero-media { will-change: transform; animation: hero-parallax linear both; animation-timeline: view(); animation-range: exit; } @keyframes hero-parallax { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.08) translateY(8%); } } /* Imágenes editoriales que ascienden suavemente al entrar */ .landing-figure img, .split img { animation: img-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; } @keyframes img-rise { from { transform: translateY(30px) scale(1.015); } to { transform: none; } } } /* ============================================================ FASE 7 · Materialidad premium Tilt 3D + luz que sigue el cursor · grano y aurora en el hero · vidrio real en modo claro (color-mix) ============================================================ */ /* ---- Tilt 3D: la rotación la aplica theme.js; aquí afinamos el timing para que el seguimiento sea ágil y el reposo, suave. ---- */ [data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .18s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); } /* ---- Hero: grano fino + aurora de color en deriva lenta ---- */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-scrim::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55; background: radial-gradient(42% 52% at 16% 22%, var(--accent-glow), transparent 62%), radial-gradient(46% 56% at 86% 28%, rgba(62, 114, 210, .18), transparent 62%); animation: aurora-drift 18s ease-in-out infinite alternate; } @keyframes aurora-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5%, -3%, 0) scale(1.06); } } /* ---- Vidrio real en modo claro: las superficies dejan de ser planas y el blur de fondo vuelve a notarse, con un guiño de acento al hover. ---- */ @supports (background: color-mix(in oklab, white, black)) { [data-theme="light"] .glass-card { background: color-mix(in oklab, var(--bg-2) 88%, transparent); backdrop-filter: blur(10px) saturate(1.06); -webkit-backdrop-filter: blur(10px) saturate(1.06); } [data-theme="light"] .glass-card:hover { background: color-mix(in oklab, var(--bg-2) 82%, var(--accent) 5%); } } /* ============================================================ FASE 8 · Componentes de página Tarjetas de proyecto enlazables · TOC de landings con scroll-spy · skeleton de galería · página 404 con marca ============================================================ */ /* ---- Línea de alcance en tarjetas de proyecto ---- */ .pcard-scope { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font-size: .8rem; color: var(--muted-2); line-height: 1.3; } .pcard-scope svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; } /* ---- Tabla de contenidos (landing · aside sticky) ---- */ .landing-toc { margin-bottom: 1rem; padding: 1.1rem 1.2rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); } .landing-toc-title { display: block; margin-bottom: .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-2); font-weight: 700; } .landing-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .landing-toc a { display: block; padding: .4rem .6rem; border-radius: .5rem; font-size: .85rem; line-height: 1.35; color: var(--muted); border-left: 2px solid transparent; transition: color .25s, background .25s, border-color .25s; } .landing-toc a:hover { color: var(--heading); background: var(--nav-hover); } .landing-toc a.is-current { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; } @media (max-width: 1039px) { .landing-toc { display: none; } } /* ---- Galería: skeleton shimmer mientras carga la imagen ---- */ .gallery-item::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, var(--bg-3) 30%, var(--surface-2) 50%, var(--bg-3) 70%); background-size: 200% 100%; animation: gallery-shimmer 1.5s linear infinite; } .gallery-item img { position: relative; z-index: 1; } .gallery-item.is-loaded::before { animation: none; opacity: 0; } @keyframes gallery-shimmer { to { background-position: -200% 0; } } /* ---- Página 404 con marca ---- */ .error-hero { padding-top: 8.5rem; } .error-wrap { text-align: center; position: relative; max-width: 46rem; margin-inline: auto; } .error-eyebrow { justify-content: center; } .error-code { display: block; font-size: clamp(5rem, 22vw, 13rem); font-weight: 800; line-height: .85; letter-spacing: -.05em; margin-bottom: .4rem; background: linear-gradient(120deg, var(--heading) 6%, var(--accent-2) 52%, var(--accent) 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: err-pop .9s var(--ease-spring) both; } @keyframes err-pop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } } .error-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.75rem; } /* ============================================================ FASE 9 · Design system y accesibilidad avanzada Capa de utilidades · container queries · preferencias del SO ============================================================ */ /* ---- Utilidades (reemplazan estilos inline repetidos) ---- */ .mb-section { margin-bottom: 2.5rem; } .u-measure { max-width: 48rem; } .u-center { text-align: center; } /* ---- Container queries: las feature cards ajustan su interior según el ancho REAL de su columna (no del viewport). Mejora la lectura en grillas que pasan de 4 a 2 a 1 columna. ---- */ @supports (container-type: inline-size) { .feature { container-type: inline-size; } @container (max-width: 230px) { .feature .ico { width: 2.4rem; height: 2.4rem; margin-bottom: .8rem; } .feature .ico svg { width: 1.2rem; height: 1.2rem; } .feature h3 { font-size: 1.02rem; } .feature p { font-size: .86rem; } } } /* ---- prefers-reduced-transparency: superficies opacas, sin blur ---- */ @media (prefers-reduced-transparency: reduce) { .liquid-glass, .glass-card, .tubelight, .tube-dd-inner, .hero-tile, .hero-chip, .to-top, .home-media-card div, .landing-cta, .contact-aside, .pcard-ico, .scard-ico { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root { --glass: var(--bg-2); --nav-bg: var(--bg-2); } [data-theme="light"] { --glass: #fff; --nav-bg: #fff; } } /* ---- prefers-contrast: more — bordes y texto secundario más marcados ---- */ @media (prefers-contrast: more) { :root { --border: rgba(255, 255, 255, .26); --border-strong: rgba(255, 255, 255, .42); --muted: #b6bfcc; --muted-2: #99a3b2; } [data-theme="light"] { --border: rgba(17, 24, 39, .28); --border-strong: rgba(17, 24, 39, .46); --muted: #3b4350; --muted-2: #515a68; } a:focus-visible, button:focus-visible, summary:focus-visible { outline-width: 3px; } } /* ============================================================ FASE 11 · Retención — CTA sticky contextual + modal de re-enganche ============================================================ */ /* ---- Barra CTA sticky contextual (solo móvil) ---- Se ancla por encima de la pastilla de navegación inferior (bottom:1.25rem) para no solaparla. En desktop no aparece: el botón "Cotizar" del rincón ya es persistente. */ .sticky-cta { display: none; } @media (max-width: 767px) { .sticky-cta { /* Se ancla sobre la pastilla de navegación (bottom:1.25rem, centrada) y deja libre la columna derecha donde vive el launcher del chatbot (bottom:6rem right:1rem). */ display: flex; align-items: center; gap: .6rem; position: fixed; z-index: 78; left: .75rem; right: 4rem; bottom: 4.6rem; padding: .5rem .55rem .5rem .85rem; border-radius: 1rem; background: var(--nav-bg); border: 1px solid var(--border-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(150%); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-spring), opacity .35s var(--ease); } .sticky-cta.show { transform: none; opacity: 1; pointer-events: auto; } .sticky-cta[hidden] { display: none; } .sticky-cta-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; } .sticky-cta-txt b { color: var(--heading); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-cta-txt span { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-cta-btn { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .62rem .95rem; border-radius: .7rem; color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 6px 16px rgba(37, 211, 102, .3); transition: transform .25s var(--ease); } .sticky-cta-btn:hover { transform: translateY(-2px); } .sticky-cta-btn svg { width: 1.05rem; height: 1.05rem; } /* Ocultar mientras el chatbot está abierto para no competir por atención. */ body:has(#fermibot[data-open="true"]) .sticky-cta { transform: translateY(150%); opacity: 0; pointer-events: none; } /* Con la barra visible, el botón "volver arriba" estorba en la esquina: lo ocultamos para despejar el apilado inferior en móvil. */ body:has(.sticky-cta.show) .to-top { opacity: 0 !important; pointer-events: none !important; } } /* ============================================================ FASE 12 · Motion firma — íconos que se dibujan al entrar theme.js añade .icon-draw a los íconos de línea de secciones que aparecen con el scroll, y .drawn cuando entran en viewport. El trazo se dibuja (stroke-dashoffset). Los íconos de relleno no se ven afectados. Off con reduced-motion (el JS ni siquiera activa la clase). ============================================================ */ .icon-draw svg > * { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.15s var(--ease); } .icon-draw.drawn svg > * { stroke-dashoffset: 0; } /* ---- Titular con gradiente kinético ---- El degradado de .text-gradient (y .stat-num / .error-code) deriva muy lentamente para dar vida al titular sin distraer. Requiere un tamaño de fondo mayor al 100% para tener recorrido. */ @media (prefers-reduced-motion: no-preference) { .text-gradient, .stat-num, .error-code { background-size: 220% auto; animation: text-sheen 9s ease-in-out infinite; } @keyframes text-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } } /* ============================================================ FASE 13 · Storytelling scroll-pinned (solo home) Columna izquierda que se fija mientras a la derecha avanzan los pasos. Progressive enhancement: sin position:sticky degrada a apilado normal. ============================================================ */ .pinned { position: relative; } .pinned-grid { display: grid; gap: 2.5rem; } @media (min-width: 1000px) { .pinned-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .pinned-sticky { position: sticky; top: 7rem; } } .pinned-visual { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--border); box-shadow: var(--card-shadow-lg); aspect-ratio: 4 / 5; } .pinned-visual img { width: 100%; height: 100%; object-fit: cover; } .pinned-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 11, 17, .72)); } .pinned-visual-tag { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; z-index: 1; color: #fff; } .pinned-visual-tag b { display: block; font-size: 1.05rem; } .pinned-visual-tag span { display: block; color: #CFD5DD; font-size: .88rem; margin-top: .2rem; } .pinned-steps { display: grid; gap: 1rem; } .pinned-step { position: relative; padding: 1.4rem 1.5rem 1.4rem 4.6rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .pinned-step:hover { transform: translateY(-4px); border-color: var(--accent-line-hover); box-shadow: var(--card-shadow-lg); } .pinned-step-ico { position: absolute; left: 1.25rem; top: 1.4rem; width: 2.6rem; height: 2.6rem; border-radius: .72rem; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); box-shadow: 0 4px 14px var(--accent-glow); } .pinned-step-ico svg { width: 1.3rem; height: 1.3rem; } .pinned-step-n { display: block; margin-bottom: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--accent); } .pinned-step h3 { font-size: 1.15rem; margin-bottom: .4rem; } .pinned-step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; } /* ---- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .icon-draw svg > * { stroke-dashoffset: 0 !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; } .faq::details-content { transition: none !important; } .ah-char { opacity: 1 !important; transform: none !important; } .fade-in { opacity: 1 !important; } .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .hero-media--zoom img { animation: none !important; transform: none !important; } .hero-media { animation: none !important; transform: none !important; } .landing-figure img, .split img { animation: none !important; transform: none !important; } .has-spotlight::after { display: none !important; } .to-top { transition: opacity .2s !important; } [data-magnetic] { transform: none !important; } } /* ============================================================ FASE 12 · Enlazado interno — hub de guías, precios y cobertura Conecta las páginas de producto/servicio con sus landings hijas. ============================================================ */ .linkhub { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem 2.5rem; } .linkhub-col { display: flex; flex-direction: column; gap: .85rem; min-width: 0; } .linkhub-col > h3 { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0; padding-bottom: .7rem; border-bottom: 1px solid var(--border); } .linkhub-col > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } .linkhub-col > ul > li { margin: 0; } .linkhub-col a { display: flex; align-items: baseline; gap: .5rem; padding: .42rem 0; font-size: .93rem; line-height: 1.4; color: var(--text); text-decoration: none; transition: color .25s var(--ease), padding-left .25s var(--ease); } .linkhub-col a::before { content: ""; flex: none; width: .4rem; height: 1px; margin-top: .62em; background: var(--muted-2); transition: width .25s var(--ease), background .25s var(--ease); } .linkhub-col a:hover, .linkhub-col a:focus-visible { color: var(--heading); padding-left: .25rem; } .linkhub-col a:hover::before, .linkhub-col a:focus-visible::before { width: .85rem; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .linkhub-col a, .linkhub-col a::before { transition: none; } .linkhub-col a:hover, .linkhub-col a:focus-visible { padding-left: 0; } } /* Barra de clientes compacta, para reutilizar en páginas con formulario */ .trustbar { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; text-align: center; } .trustbar-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .trustbar-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.75rem; width: 100%; } .trustbar-logos img { height: 2rem; width: auto; max-width: 8.5rem; object-fit: contain; opacity: .78; filter: grayscale(1); transition: opacity .3s var(--ease), filter .3s var(--ease); } [data-theme="dark"] .trustbar-logos img { filter: grayscale(1) brightness(0) invert(1); } .trustbar-logos img:hover { opacity: 1; filter: none; } [data-theme="dark"] .trustbar-logos img:hover { filter: brightness(0) invert(1); opacity: 1; } @media (max-width: 640px) { .trustbar-logos { gap: 1.1rem 1.75rem; } .trustbar-logos img { height: 1.5rem; max-width: 6rem; } } /* Respaldo si theme.js no llega a ejecutarse: sin el, todo el contenido marcado .reveal / .fade-in se queda invisible (nace con opacity:0). */ html.ft-nojs .reveal, html.ft-nojs .fade-in, html.ft-nojs [data-fade] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* ============================================================ FASE 13 · Profundidad tecnica — criterios, proceso, errores y checklist de expediente en paginas de producto y servicio. ============================================================ */ /* Criterios de seleccion / pasos del proceso: lista numerada donde el numero SI aporta (el proceso es secuencial; los criterios son un orden de decision). */ .tech-list { display: grid; gap: 1.5rem 2.25rem; counter-reset: tl; } @media (min-width: 860px) { .tech-list--2 { grid-template-columns: 1fr 1fr; } } .tech-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; counter-increment: tl; } .tech-item::before { content: counter(tl, decimal-leading-zero); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: .18rem; } .tech-item h3 { font-size: 1rem; margin: 0 0 .35rem; color: var(--heading); line-height: 1.3; } .tech-item p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.62; } /* Errores frecuentes en obra: lista de advertencia, sin numerar (no hay orden entre ellos). */ .pitfalls { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .pitfalls li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; color: var(--muted); font-size: .93rem; line-height: 1.62; } .pitfalls li::before { content: ""; flex: none; margin-top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); } /* Checklist de expediente tecnico. */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } @media (min-width: 760px) { .checklist { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; } } .checklist li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; color: var(--muted); font-size: .92rem; line-height: 1.5; } .checklist li::before { content: ""; flex: none; margin-top: .3em; width: 1rem; height: .55rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .spec caption.spec-cap { caption-side: bottom; text-align: left; padding: .85rem 1.1rem 0; font-size: .8rem; line-height: 1.5; color: var(--muted-2); } .tech-intro { max-width: 46rem; color: var(--muted); font-size: 1.02rem; line-height: 1.68; } /* ============================================================ Galeria de videos de redes sociales (TikTok / Facebook) Fachada: portada propia + boton; el iframe de la red social solo se inyecta al hacer clic (ver assets/videos.js). ============================================================ */ .video-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .video-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(4, 1fr); } } .video-card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .video-card .video-play, .video-card iframe { display: block; width: 100%; border: 0; aspect-ratio: var(--video-ratio, 9 / 16); background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); } /* El embed de TikTok anade su propia cabecera y pie: la caja crece al abrirlo. */ .video-card--tiktok.is-playing iframe { aspect-ratio: 9 / 20.6; } .video-play { position: relative; padding: 0; cursor: pointer; } .video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-play-ui { position: absolute; inset: 0; display: block; } .video-play-ui::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, .05) 55%); transition: opacity .35s ease; } .video-play:hover .video-play-ui::before { opacity: .75; } .video-play:hover img { transform: scale(1.04); } .video-play img { transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .video-badge { position: absolute; top: .7rem; left: .7rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(10, 13, 20, .62); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em; } .video-badge svg { width: .95rem; height: .95rem; flex: none; } .video-play-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px rgba(242, 106, 27, .38); transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .video-play-ico svg { width: 1.35rem; height: 1.35rem; margin-left: .12rem; } .video-play:hover .video-play-ico { transform: translate(-50%, -50%) scale(1.09); } .video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .video-caption { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .95rem 1rem; text-align: left; } .video-caption b { color: var(--heading); font-size: .9rem; font-weight: 600; line-height: 1.4; } .video-caption a { color: var(--muted-2); font-size: .78rem; text-decoration: none; } .video-caption a:hover { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .video-play img, .video-play-ico, .video-play-ui::before { transition: none; } .video-play:hover img { transform: none; } } /* Enlaces a redes en el pie. */ .footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; } .footer-social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; border: 1px solid var(--border); color: var(--muted); transition: color .25s ease, border-color .25s ease, background .25s ease; } .footer-social a:hover { color: var(--accent-ink); background: var(--accent); border-color: transparent; } .footer-social svg { width: 1.1rem; height: 1.1rem; } /* La seccion nace oculta y videos.js la muestra al tener tarjetas: evita el hueco vacio mientras llega el fetch de /api/videos.json. */ #videos[hidden] { display: none; }