/* ============================================================ ALCE GLOBAL TRADE — styles.css Diseño dark premium con acentos azul eléctrico y cian. Tipografías: Space Grotesk (titulares) + DM Sans (cuerpo). Breakpoints: 1024px / 768px / 480px (mobile-first en componentes). ============================================================ */ /* ------------------------------------------------------------ 1. VARIABLES DE DISEÑO Cambia aquí colores, tipografías y ritmos sin tocar el resto. ------------------------------------------------------------ */ :root { /* Colores de marca (extraídos del logo) */ --color-fondo: #050a18; /* azul medianoche profundo */ --color-fondo-alterno: #070f22; /* franja alterna, un punto más clara */ --color-panel: rgba(125, 165, 255, 0.055); /* superficie glass */ --color-panel-solido: #0a1428; --color-borde: rgba(125, 165, 255, 0.14); --color-borde-fuerte: rgba(125, 165, 255, 0.28); --color-azul: #2e7cf6; /* azul eléctrico del logo */ --color-cian: #2fd4f6; /* cian neón del logo */ --gradiente-marca: linear-gradient(120deg, var(--color-azul), var(--color-cian)); /* Texto (contrastes AA sobre fondo oscuro) */ --texto-principal: #eaf1ff; --texto-secundario: #a9b6d3; --texto-suave: #8e9dbd; --texto-sobre-acento: #04122b; /* texto oscuro sobre botones brillantes */ /* Estados */ --color-error: #ff7a8a; --color-exito: #4ade9e; /* Tipografías */ --fuente-titulos: "Space Grotesk", system-ui, sans-serif; --fuente-cuerpo: "DM Sans", system-ui, sans-serif; /* Radios: variados a propósito, nada de esquinas uniformes */ --radio-s: 8px; --radio-m: 14px; --radio-l: 22px; --radio-pastilla: 999px; /* Easing personalizados (más contundentes que los de CSS) */ --ease-salida: cubic-bezier(0.23, 1, 0.32, 1); --ease-suave: cubic-bezier(0.77, 0, 0.175, 1); /* Ritmo vertical */ --espacio-seccion: clamp(4.5rem, 10vw, 7.5rem); --ancho-max: 1160px; } /* ------------------------------------------------------------ 1.b MODO DÍA (tema claro) Se activa con data-tema="dia" en . El modo noche (oscuro) es el que hay por defecto arriba. ------------------------------------------------------------ */ :root[data-tema="dia"] { --color-fondo: #eff3fb; --color-fondo-alterno: #e5ecf7; --color-panel: rgba(255, 255, 255, 0.75); --color-panel-solido: #ffffff; --color-borde: rgba(16, 40, 90, 0.13); --color-borde-fuerte: rgba(16, 40, 90, 0.26); /* Acentos algo más profundos para que contrasten sobre blanco */ --color-azul: #1a5fd8; --color-cian: #0b8fb5; --texto-principal: #08122a; --texto-secundario: #46536d; --texto-suave: #626e8a; --texto-sobre-acento: #ffffff; color-scheme: light; } /* Superficies que llevaban un color oscuro fijo */ :root[data-tema="dia"] .nav { background: rgba(255, 255, 255, 0.62); } :root[data-tema="dia"] .nav.is-scrolled { background: rgba(255, 255, 255, 0.9); } :root[data-tema="dia"] .nav__movil { background: rgba(255, 255, 255, 0.97); } :root[data-tema="dia"] .navegador { background: rgba(255, 255, 255, 0.88); } :root[data-tema="dia"] .navegador__url { background: rgba(16, 40, 90, 0.06); } :root[data-tema="dia"] .mock-grafica { background: rgba(16, 40, 90, 0.04); } :root[data-tema="dia"] .flotante { background: rgba(255, 255, 255, 0.94); } :root[data-tema="dia"] .propiedad__panel-lista li { background: rgba(16, 40, 90, 0.045); } :root[data-tema="dia"] .campo input, :root[data-tema="dia"] .campo select, :root[data-tema="dia"] .campo textarea { background: rgba(255, 255, 255, 0.92); } :root[data-tema="dia"] .footer { background: rgba(255, 255, 255, 0.66); } :root[data-tema="dia"] .btn--fantasma { background: rgba(16, 40, 90, 0.03); } /* Los orbes y las partículas se suavizan sobre fondo claro */ :root[data-tema="dia"] .bg-scene { opacity: 0.5; } /* Transición suave al cambiar de tema */ body, .nav, .nav__movil, .tarjeta, .footer, .campo input, .campo select, .campo textarea { transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease; } /* ------------------------------------------------------------ 1.c BOTÓN DE CAMBIO DE TEMA (día / noche) ------------------------------------------------------------ */ .tema-toggle { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pastilla); background: var(--color-panel); color: var(--color-cian); cursor: pointer; transition: color 200ms ease, border-color 200ms ease, box-shadow 250ms ease, transform 160ms var(--ease-salida), background-color 350ms ease; } @media (hover: hover) and (pointer: fine) { .tema-toggle:hover { border-color: var(--color-cian); box-shadow: 0 0 20px -2px rgba(47, 212, 246, 0.55); } } .tema-toggle:active { transform: scale(0.94); } .tema-toggle svg { position: absolute; transition: opacity 260ms ease, transform 420ms var(--ease-salida); } /* Modo noche: se ve el sol (pulsa para pasar a día) */ .tema-toggle .icono-sol { opacity: 1; transform: rotate(0deg) scale(1); } .tema-toggle .icono-luna { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Modo día: se ve la luna (pulsa para volver a noche) */ :root[data-tema="dia"] .tema-toggle .icono-sol { opacity: 0; transform: rotate(90deg) scale(0.5); } :root[data-tema="dia"] .tema-toggle .icono-luna { opacity: 1; transform: rotate(0deg) scale(1); } /* ------------------------------------------------------------ 2. RESET Y BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Los anclajes dejan hueco para la barra fija */ scroll-padding-top: 5.5rem; /* Los controles nativos (select, scrollbars) renderizan en oscuro */ color-scheme: dark; } body { background: var(--color-fondo); color: var(--texto-secundario); font-family: var(--fuente-cuerpo); font-size: 1rem; /* 16px mínimo: evita zoom automático en iOS */ line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* cinturón de seguridad contra scroll horizontal */ } img, svg, canvas { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Interacción táctil: sin retardo de 300ms ni destello gris del sistema (los estados :active propios ya dan el feedback visual) */ a, button, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } ul, ol { list-style: none; } h1, h2, h3 { font-family: var(--fuente-titulos); color: var(--texto-principal); line-height: 1.12; /* Tracking negativo en titulares grandes (tipografía estilo Apple) */ letter-spacing: -0.02em; text-wrap: balance; } h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; } p { text-wrap: pretty; } strong { color: var(--texto-principal); font-weight: 600; } /* Foco visible para navegación por teclado */ :focus-visible { outline: 2px solid var(--color-cian); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(47, 212, 246, 0.3); color: var(--texto-principal); } /* Enlace de salto (accesibilidad) */ .skip-link { position: fixed; top: -100%; left: 1rem; z-index: 200; padding: 0.75rem 1.25rem; background: var(--color-cian); color: var(--texto-sobre-acento); font-weight: 700; border-radius: var(--radio-s); transition: top 150ms var(--ease-salida); } .skip-link:focus-visible { top: 1rem; } .contenedor { width: min(100% - 2.5rem, var(--ancho-max)); margin-inline: auto; } /* ------------------------------------------------------------ 3. FONDO ANIMADO (canvas de partículas + orbes aurora) ------------------------------------------------------------ */ .bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; /* Viñeta sutil que oscurece los bordes */ background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(46, 124, 246, 0.13), transparent 60%), var(--color-fondo); } #particulas { position: absolute; inset: 0; width: 100%; height: 100%; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; will-change: transform; animation: orb-flotar 14s var(--ease-suave) infinite alternate; } .orb--azul { width: 420px; height: 420px; top: -8%; right: -6%; background: radial-gradient(circle, rgba(46, 124, 246, 0.5), transparent 70%); } .orb--cian { width: 360px; height: 360px; bottom: -12%; left: -8%; background: radial-gradient(circle, rgba(47, 212, 246, 0.35), transparent 70%); animation-delay: -7s; } @keyframes orb-flotar { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 50px, 0) scale(1.12); } } /* ------------------------------------------------------------ 4. NAVEGACIÓN Barra translúcida tipo "material": el contenido pasa por debajo. ------------------------------------------------------------ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(5, 10, 24, 0.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); /* Borde inferior en degradado suave, no línea dura */ border-bottom: 1px solid transparent; transition: background 250ms ease, border-color 250ms ease; } .nav.is-scrolled { background: rgba(5, 10, 24, 0.82); border-bottom-color: var(--color-borde); } .nav__inner { width: min(100% - 2.5rem, var(--ancho-max)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; } .nav__brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; /* área táctil mínima */ } .nav__logo { display: inline-flex; width: 44px; height: 44px; } .nav__logo-img { display: none; width: 44px; height: 44px; object-fit: cover; border-radius: 11px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(120, 180, 255, 0.15); } .nav__logo-img.is-loaded { display: block; } .nav__name { font-family: var(--fuente-titulos); font-size: 1.05rem; color: var(--texto-principal); letter-spacing: -0.01em; white-space: nowrap; } .nav__name strong { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav__links { display: flex; gap: 0.25rem; margin-left: auto; } .nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; font-size: 0.95rem; font-weight: 500; color: var(--texto-secundario); border-radius: var(--radio-s); transition: color 150ms ease, background 150ms ease; } @media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--texto-principal); background: rgba(125, 165, 255, 0.08); } } .nav__cta { white-space: nowrap; } /* Hamburguesa: oculta en escritorio */ .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--color-borde); border-radius: var(--radio-s); cursor: pointer; } .nav__burger span { display: block; height: 2px; width: 100%; background: var(--texto-principal); border-radius: 2px; transition: transform 220ms var(--ease-salida), opacity 180ms ease; } /* Animación hamburguesa → X */ .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menú móvil: se materializa (blur + escala), no solo fade */ .nav__movil { border-top: 1px solid var(--color-borde); background: rgba(5, 10, 24, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform-origin: top center; opacity: 0; transform: scaleY(0.96) translateY(-6px); transition: opacity 200ms var(--ease-salida), transform 200ms var(--ease-salida); } .nav__movil.is-abierto { opacity: 1; transform: none; } .nav__movil { overscroll-behavior: contain; } .nav__movil ul { width: min(100% - 2.5rem, var(--ancho-max)); margin-inline: auto; padding: 0.75rem 0 1.25rem; display: grid; gap: 0.25rem; } .nav__movil a { display: flex; align-items: center; min-height: 48px; padding: 0 0.75rem; font-size: 1.05rem; font-weight: 500; color: var(--texto-secundario); border-radius: var(--radio-s); } .nav__movil a:active { background: rgba(125, 165, 255, 0.1); } .nav__movil-cta { margin-top: 0.5rem; justify-content: center; background: var(--gradiente-marca); color: var(--texto-sobre-acento) !important; font-weight: 700 !important; border-radius: var(--radio-m) !important; } /* ------------------------------------------------------------ 5. BOTONES Y ELEMENTOS COMUNES ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.65rem 1.35rem; font-family: var(--fuente-cuerpo); font-size: 0.95rem; font-weight: 700; border-radius: var(--radio-m); border: 1px solid transparent; cursor: pointer; /* Solo transform y opacity: animaciones baratas para la GPU */ transition: transform 160ms var(--ease-salida), box-shadow 200ms ease, background-color 150ms ease, border-color 150ms ease; } /* Feedback inmediato al pulsar (pointer-down, no al soltar) */ .btn:active { transform: scale(0.97); } .btn--primario { background: var(--gradiente-marca); color: var(--texto-sobre-acento); box-shadow: 0 8px 28px -10px rgba(46, 124, 246, 0.55); } @media (hover: hover) and (pointer: fine) { .btn--primario:hover { box-shadow: 0 12px 34px -10px rgba(47, 212, 246, 0.55); transform: translateY(-1px); } .btn--primario:hover:active { transform: scale(0.97); } } .btn--fantasma { border-color: var(--color-borde-fuerte); color: var(--texto-principal); background: rgba(125, 165, 255, 0.04); } @media (hover: hover) and (pointer: fine) { .btn--fantasma:hover { border-color: var(--color-cian); background: rgba(47, 212, 246, 0.07); } } .btn--grande { min-height: 52px; padding: 0.85rem 1.75rem; font-size: 1.02rem; } /* Pastilla-etiqueta de sección */ .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-cian); background: rgba(47, 212, 246, 0.08); border: 1px solid rgba(47, 212, 246, 0.22); border-radius: var(--radio-pastilla); } .texto-gradiente { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Tarjeta glass genérica */ .tarjeta { background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: var(--radio-l); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ------------------------------------------------------------ 6. ANIMACIONES DE ENTRADA (scroll reveal) El JS añade .is-visible con IntersectionObserver. Transiciones (no keyframes): interrumpibles y re-dirigibles. ------------------------------------------------------------ */ /* El estado oculto solo se aplica si el JS está activo (html.js): sin JavaScript, el contenido es visible desde el principio. */ /* Curva "Apple": arranque decidido y frenada larga y suave */ :root { --ease-apple: cubic-bezier(0.16, 1, 0.3, 1); } html.js .reveal { opacity: 0; transform: translateY(34px) scale(0.985); filter: blur(9px); transition: opacity 700ms var(--ease-salida), transform 950ms var(--ease-apple), filter 750ms var(--ease-salida); transition-delay: var(--retardo, 0ms); /* stagger que asigna el JS */ } html.js .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Las imágenes y el vídeo "se asientan": entran con un zoom sutil que se relaja lentamente al hacerse visibles (efecto Apple). */ html.js .reveal .figura img, html.js .figura.reveal img, html.js .video-caja.reveal .video-caja__video { transform: scale(1.07); transition: transform 1400ms var(--ease-apple); transition-delay: var(--retardo, 0ms); } html.js .reveal.is-visible .figura img, html.js .figura.reveal.is-visible img, html.js .video-caja.reveal.is-visible .video-caja__video { transform: scale(1); } /* ------------------------------------------------------------ 7. HERO ------------------------------------------------------------ */ .hero { position: relative; padding-top: clamp(7.5rem, 16vh, 10rem); padding-bottom: var(--espacio-seccion); min-height: 92vh; min-height: 92dvh; display: flex; align-items: center; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); } .hero__titulo { /* Tipografía fluida con clamp() */ font-size: clamp(2.35rem, 5.4vw, 4rem); font-weight: 700; letter-spacing: -0.03em; margin-top: 1.1rem; } .hero__sub { margin-top: 1.25rem; font-size: clamp(1.02rem, 1.5vw, 1.15rem); max-width: 34rem; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .hero__puntos { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 2rem; font-size: 0.92rem; color: var(--texto-suave); } .hero__puntos li { display: inline-flex; align-items: center; gap: 0.45rem; } .hero__puntos svg { color: var(--color-cian); flex-shrink: 0; } /* --- Mockup de navegador (lo que vendemos: una web) --- */ .hero__visual { position: relative; } .navegador { background: rgba(10, 20, 40, 0.75); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7), 0 0 80px -30px rgba(46, 124, 246, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .navegador__barra { display: flex; align-items: center; gap: 6px; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--color-borde); background: rgba(125, 165, 255, 0.04); } .navegador__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--color-borde-fuerte); } .navegador__punto:first-child { background: rgba(47, 212, 246, 0.6); } .navegador__url { margin-left: 0.75rem; padding: 0.2rem 0.9rem; font-size: 0.75rem; color: var(--texto-suave); background: rgba(5, 10, 24, 0.6); border-radius: var(--radio-pastilla); border: 1px solid var(--color-borde); } .navegador__cuerpo { padding: 1.4rem; display: grid; gap: 1.1rem; } /* Cabecera del panel simulado dentro del mockup */ .mock-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .mock-cab__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.92rem; color: var(--texto-principal); } .mock-cab__chip { flex: none; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: var(--color-cian); background: rgba(47, 212, 246, 0.08); border: 1px solid rgba(47, 212, 246, 0.25); padding: 0.16rem 0.55rem; border-radius: var(--radio-pastilla); } /* Tarjetas de datos del negocio (visitas, clientes, ventas) */ .mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .mock-stat { display: grid; gap: 0.12rem; padding: 0.55rem 0.65rem; border-radius: 8px; background: rgba(125, 165, 255, 0.08); border: 1px solid var(--color-borde); min-width: 0; } .mock-stat__label { font-size: 0.6rem; letter-spacing: 0.02em; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-stat__valor { font-family: var(--fuente-titulos); font-weight: 700; font-size: 0.98rem; color: var(--texto-principal); white-space: nowrap; } .mock-stat__delta { font-size: 0.6rem; font-weight: 700; color: var(--color-exito); } /* Mini panel de analítica: clientes que entran a la web */ .mock-grafica { border: 1px solid var(--color-borde); border-radius: 8px; padding: 0.6rem 0.7rem 0.7rem; background: rgba(5, 10, 24, 0.4); } .mock-grafica__cab { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; } .mock-grafica__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--color-exito); box-shadow: 0 0 8px var(--color-exito); animation: pulso-punto 2.2s ease-in-out infinite; } .mock-grafica__titulo { font-size: 0.66rem; letter-spacing: 0.02em; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-grafica__badge { margin-left: auto; flex: none; font-size: 0.6rem; font-weight: 700; color: var(--color-exito); background: rgba(74, 222, 158, 0.1); border: 1px solid rgba(74, 222, 158, 0.28); padding: 0.12rem 0.45rem; border-radius: var(--radio-pastilla); } .mock-grafica__zona { position: relative; height: 64px; } .mock-grafica__barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6px; } .mock-grafica__barras span { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgba(46, 124, 246, 0.22), rgba(47, 212, 246, 0.65)); transform-origin: bottom; animation: crecer-barra 850ms var(--ease-apple) backwards; } /* Entrada escalonada de las barras, de izquierda a derecha */ .mock-grafica__barras span:nth-child(1) { animation-delay: 350ms; } .mock-grafica__barras span:nth-child(2) { animation-delay: 430ms; } .mock-grafica__barras span:nth-child(3) { animation-delay: 510ms; } .mock-grafica__barras span:nth-child(4) { animation-delay: 590ms; } .mock-grafica__barras span:nth-child(5) { animation-delay: 670ms; } .mock-grafica__barras span:nth-child(6) { animation-delay: 750ms; } .mock-grafica__barras span:nth-child(7) { animation-delay: 830ms; } .mock-grafica__barras span:nth-child(8) { animation-delay: 910ms; } /* La última barra (el presente) brilla */ .mock-grafica__barras span:last-child { background: linear-gradient(to top, rgba(46, 124, 246, 0.45), var(--color-cian)); box-shadow: 0 0 14px -2px rgba(47, 212, 246, 0.65); } .mock-grafica__linea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .mock-grafica__final { animation: pulso-punto 2.2s ease-in-out infinite; } @keyframes crecer-barra { from { transform: scaleY(0); } } @keyframes pulso-punto { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .mock-grafica svg { width: 100%; height: 52px; } /* Chips flotantes alrededor del mockup */ .flotante { position: absolute; padding: 0.45rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--texto-principal); background: rgba(10, 20, 40, 0.85); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pastilla); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: flotar 6s ease-in-out infinite; will-change: transform; } .flotante--1 { top: -4%; right: 6%; animation-delay: 0s; } .flotante--2 { bottom: 14%; left: -5%; animation-delay: -2s; } .flotante--3 { bottom: -5%; right: 12%; animation-delay: -4s; color: var(--color-cian); } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* Flecha de scroll */ .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--texto-suave); border: 1px solid var(--color-borde); border-radius: 50%; animation: rebotar 2.4s ease-in-out infinite; } @keyframes rebotar { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } } /* ------------------------------------------------------------ 8. SECCIONES GENÉRICAS ------------------------------------------------------------ */ .seccion { padding-block: var(--espacio-seccion); } .seccion--alterna { background: linear-gradient(180deg, transparent, rgba(46, 124, 246, 0.04) 18%, rgba(46, 124, 246, 0.04) 82%, transparent); } .seccion__cabecera { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .seccion__cabecera h2 { margin-top: 1rem; } .seccion__sub { margin-top: 0.9rem; font-size: 1.05rem; } /* ------------------------------------------------------------ 9. SERVICIOS (grid bento con tarjeta estrella) ------------------------------------------------------------ */ .servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .servicio { position: relative; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; transition: transform 220ms var(--ease-salida), border-color 220ms ease, background-color 220ms ease; } @media (hover: hover) and (pointer: fine) { .servicio:hover { transform: translateY(-4px); border-color: var(--color-borde-fuerte); background: rgba(125, 165, 255, 0.08); } } .servicio__icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--color-cian); background: rgba(47, 212, 246, 0.08); border: 1px solid rgba(47, 212, 246, 0.2); border-radius: var(--radio-m); margin-bottom: 0.4rem; } .servicio p { font-size: 0.96rem; } /* Tarjeta estrella: doble de ancho y alto, borde en degradado */ .servicio--estrella { grid-column: span 2; grid-row: span 2; padding: 2.1rem; background: linear-gradient(var(--color-panel-solido), var(--color-panel-solido)) padding-box, linear-gradient(135deg, rgba(46, 124, 246, 0.65), rgba(47, 212, 246, 0.5)) border-box; border: 1.5px solid transparent; box-shadow: 0 24px 70px -35px rgba(46, 124, 246, 0.55); } .servicio--estrella h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); } .servicio--estrella p { font-size: 1.02rem; max-width: 36rem; } .servicio--estrella__badge { position: absolute; top: 1.4rem; right: 1.4rem; padding: 0.32rem 0.8rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-sobre-acento); background: var(--gradiente-marca); border-radius: var(--radio-pastilla); } .servicio__lista { display: grid; gap: 0.5rem; margin-top: 0.4rem; } .servicio__lista li { position: relative; padding-left: 1.6rem; font-size: 0.98rem; } /* Check dibujado con CSS: sin depender de iconos */ .servicio__lista li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.95em; height: 0.5em; border-left: 2px solid var(--color-cian); border-bottom: 2px solid var(--color-cian); transform: rotate(-45deg) scale(0.85); } .servicio__enlace { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; min-height: 44px; font-weight: 700; color: var(--color-cian); transition: gap 180ms var(--ease-salida); } @media (hover: hover) and (pointer: fine) { .servicio__enlace:hover { gap: 0.7rem; } } /* ------------------------------------------------------------ 10. PROCESO (4 pasos) ------------------------------------------------------------ */ .proceso__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: pasos; } .paso { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; } .paso__numero { font-family: var(--fuente-titulos); font-size: 2.2rem; font-weight: 700; line-height: 1; background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.9; } .paso p { font-size: 0.95rem; } /* ------------------------------------------------------------ 11. PLANES DE MANTENIMIENTO ------------------------------------------------------------ */ .planes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; } .plan { position: relative; padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: 1.1rem; } .plan__nombre { font-size: 1.15rem; letter-spacing: 0.01em; } .plan__precio { display: flex; align-items: baseline; gap: 0.3rem; } .plan__cifra { font-family: var(--fuente-titulos); /* Cifras tabulares: los precios no bailan */ font-variant-numeric: tabular-nums; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--texto-principal); letter-spacing: -0.02em; } .plan__mes { color: var(--texto-suave); font-size: 0.95rem; } .plan__lista { display: grid; gap: 0.65rem; flex-grow: 1; } .plan__lista li { position: relative; padding-left: 1.7rem; font-size: 0.97rem; } .plan__lista li::before { content: ""; position: absolute; left: 0; top: 0.34em; width: 0.95em; height: 0.5em; border-left: 2px solid var(--color-cian); border-bottom: 2px solid var(--color-cian); transform: rotate(-45deg) scale(0.85); } .plan__btn { width: 100%; } /* Aviso bajo el botón de contratación (pago seguro + condiciones) */ .plan__pago-nota { margin-top: 0.6rem; font-size: 0.75rem; line-height: 1.5; text-align: center; color: var(--texto-suave); text-wrap: balance; } .plan__pago-nota a { color: var(--color-cian); text-decoration: underline; } /* Plan destacado: borde degradado + elevación */ .plan--destacado { background: linear-gradient(var(--color-panel-solido), var(--color-panel-solido)) padding-box, var(--gradiente-marca) border-box; border: 1.5px solid transparent; box-shadow: 0 28px 70px -30px rgba(46, 124, 246, 0.6); } .plan__badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); padding: 0.34rem 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--texto-sobre-acento); background: var(--gradiente-marca); border-radius: var(--radio-pastilla); box-shadow: 0 8px 20px -8px rgba(47, 212, 246, 0.7); } .planes__nota { margin-top: 1.75rem; text-align: center; font-size: 0.92rem; color: var(--texto-suave); } /* ---- Mantenimiento: encabezados de opción A/B ---- */ .manten__opcion { max-width: 720px; margin: 3rem auto 1.5rem; text-align: center; } .manten__opcion-tag { display: inline-block; font-family: var(--fuente-titulos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-cian); background: rgba(47, 212, 246, 0.1); border: 1px solid var(--color-borde-fuerte); padding: 0.3rem 0.85rem; border-radius: 999px; margin-bottom: 0.75rem; } .manten__opcion-tag--b { color: var(--texto-secundario); background: rgba(125, 165, 255, 0.08); } .manten__opcion-titulo { font-size: clamp(1.1rem, 2.1vw, 1.35rem); margin-bottom: 0.45rem; } .manten__opcion-sub { color: var(--texto-suave); font-size: 0.92rem; } /* Descripción y nota dentro de cada plan */ .plan__desc { color: var(--texto-secundario); font-size: 0.92rem; margin-top: -0.4rem; } .plan__nota-min { font-size: 0.82rem; color: var(--texto-suave); font-style: italic; } /* Lista de precios (pago por cambio): bloque orientativo y discreto, sin peso de tarjeta, para que no compita con los planes mensuales. */ .precios { max-width: 700px; margin: 0 auto; padding: 1.5rem 1.6rem; border: 1px dashed var(--color-borde); border-radius: var(--radio-m); background: none; } .precios__lista { display: grid; } .precios__lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-borde); font-size: 0.9rem; color: var(--texto-suave); } .precios__lista li:last-child { border-bottom: 0; } .precios__valor { flex: none; font-family: var(--fuente-cuerpo); font-weight: 500; color: var(--texto-secundario); white-space: nowrap; } .precios__aviso { margin-bottom: 1.1rem; padding: 0 0 0 0.85rem; border-left: 2px solid var(--color-borde-fuerte); font-size: 0.85rem; color: var(--texto-suave); } .precios__nota { margin-top: 1.2rem; font-size: 0.85rem; color: var(--texto-suave); } .precios__cta { margin-top: 1.4rem; } /* Condiciones generales (acordeón) */ .manten__condiciones { max-width: 800px; margin: 1.6rem auto 0; border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-panel); padding: 0 1.5rem; } .manten__condiciones summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1rem; } .manten__condiciones summary::-webkit-details-marker { display: none; } .manten__condiciones-ico { position: relative; width: 18px; height: 18px; flex: none; } .manten__condiciones-ico::before, .manten__condiciones-ico::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-cian); border-radius: 2px; } .manten__condiciones-ico::before { width: 12px; height: 2px; } .manten__condiciones-ico::after { width: 2px; height: 12px; transition: transform 200ms ease, opacity 200ms ease; } .manten__condiciones[open] .manten__condiciones-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .manten__condiciones > ul { display: grid; gap: 0.55rem; margin: 0; padding: 0 0 1.4rem 1.2rem; } .manten__condiciones li { font-size: 0.9rem; color: var(--texto-secundario); list-style: disc; } /* ------------------------------------------------------------ 12. PROPIEDAD (Tu web, 100% tuya) ------------------------------------------------------------ */ .propiedad__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .propiedad__texto h2 { margin-top: 1rem; } .propiedad__texto > p { margin-top: 1rem; font-size: 1.04rem; } .propiedad__lista { display: grid; gap: 1rem; margin-top: 1.5rem; } .propiedad__lista li { position: relative; padding-left: 1.9rem; font-size: 0.98rem; } .propiedad__lista li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1em; height: 0.52em; border-left: 2.5px solid var(--color-cian); border-bottom: 2.5px solid var(--color-cian); transform: rotate(-45deg); } .propiedad__lista strong { display: block; } .propiedad__cierre { margin-top: 1.5rem; padding: 1rem 1.25rem; font-size: 0.98rem; border-left: 3px solid var(--color-cian); background: rgba(47, 212, 246, 0.05); border-radius: 0 var(--radio-s) var(--radio-s) 0; } .propiedad__panel { padding: 2.2rem; display: grid; justify-items: center; gap: 1rem; text-align: center; } .propiedad__panel-titulo { font-family: var(--fuente-titulos); font-size: 1.15rem; font-weight: 600; color: var(--texto-principal); } .propiedad__panel-lista { width: 100%; display: grid; gap: 0.4rem; } .propiedad__panel-lista li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.9rem; font-size: 0.95rem; background: rgba(5, 10, 24, 0.5); border: 1px solid var(--color-borde); border-radius: var(--radio-s); } .propiedad__tag { font-size: 0.8rem; font-weight: 700; color: var(--color-cian); padding: 0.18rem 0.6rem; background: rgba(47, 212, 246, 0.1); border-radius: var(--radio-pastilla); white-space: nowrap; } /* ------------------------------------------------------------ 13. VALORES (por qué elegirnos) ------------------------------------------------------------ */ .valores__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .valor { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; } .valor p { font-size: 0.94rem; } /* ------------------------------------------------------------ 14. PORTFOLIO (placeholders honestos) ------------------------------------------------------------ */ .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .portfolio__tarjeta { border: 1.5px dashed var(--color-borde-fuerte); /* borde a trazos: aquí falta contenido, a propósito */ border-radius: var(--radio-l); overflow: hidden; transition: border-color 200ms ease, transform 220ms var(--ease-salida); } @media (hover: hover) and (pointer: fine) { .portfolio__tarjeta:hover { border-color: var(--color-cian); transform: translateY(-4px); } } .portfolio__media { display: grid; place-items: center; gap: 0.6rem; aspect-ratio: 16 / 10; color: var(--texto-suave); background: radial-gradient(circle at 30% 20%, rgba(46, 124, 246, 0.1), transparent 55%), rgba(125, 165, 255, 0.03); align-content: center; } .portfolio__media span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .portfolio__info { padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--color-borde); } .portfolio__info p { margin-top: 0.25rem; font-size: 0.9rem; color: var(--texto-suave); } .portfolio__cta { margin-top: 2.25rem; text-align: center; } /* ------------------------------------------------------------ 14.b PROYECTOS REALIZADOS (tarjeta con vista previa real) ------------------------------------------------------------ */ .proyectos { display: grid; gap: 2rem; } .proyecto { position: relative; padding: 1.75rem; border: 1px solid var(--color-borde); border-radius: var(--radio-l); background: var(--color-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 320ms var(--ease-salida), border-color 320ms ease, box-shadow 320ms ease; } @media (hover: hover) and (pointer: fine) { .proyecto:hover { transform: translateY(-4px); border-color: var(--color-borde-fuerte); box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.8); } } .proyecto__badge { position: absolute; top: -0.75rem; left: 1.75rem; padding: 0.32rem 0.9rem; font-family: var(--fuente-titulos); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--texto-sobre-acento); background: var(--gradiente-marca); border-radius: var(--radio-pastilla); box-shadow: 0 8px 22px -10px rgba(47, 212, 246, 0.7); } .proyecto__info { margin-bottom: 1.25rem; } .proyecto__nombre { font-size: 1.35rem; margin-bottom: 0.3rem; } .proyecto__categoria { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-cian); margin-bottom: 0.6rem; } .proyecto__desc { color: var(--texto-secundario); font-size: 0.96rem; line-height: 1.65; max-width: 68ch; } /* Marco de navegador reutilizado (.navegador) con la vista previa dentro */ .proyecto__marco { margin: 0; } .proyecto__vista { position: relative; height: 600px; /* altura en ordenador */ overflow: hidden; background: #fff; } /* La web se carga a tamaño de escritorio (1280px) y se reduce a escala para que se vea como una captura real, no como su versión móvil. El factor --escala lo calcula el JS según el ancho disponible. */ .proyecto__iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(600px / var(--escala, 1)); border: 0; transform: scale(var(--escala, 1)); transform-origin: 0 0; /* Se comporta como una imagen: no se navega dentro de la vista previa */ pointer-events: none; } /* Capa pulsable sobre la vista previa: abre la web completa */ .proyecto__abrir { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgba(5, 10, 24, 0); transition: background 280ms ease; } /* Captura de la portada del proyecto */ .proyecto__captura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 600ms var(--ease-salida); } @media (hover: hover) and (pointer: fine) { .proyecto__abrir:hover .proyecto__captura { transform: scale(1.03); } } /* Aviso "Ver la web completa". Por defecto visible (táctil); en escritorio aparece al pasar el ratón. */ .proyecto__abrir-txt { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; align-self: end; margin-bottom: 0.9rem; padding: 0.6rem 1.1rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.85rem; color: var(--texto-principal); background: rgba(5, 10, 24, 0.88); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pastilla); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 280ms ease, transform 320ms var(--ease-salida); } @media (hover: hover) and (pointer: fine) { .proyecto__abrir-txt { align-self: center; margin-bottom: 0; padding: 0.7rem 1.25rem; font-size: 0.92rem; opacity: 0; transform: translateY(8px); } .proyecto__abrir:hover { background: rgba(5, 10, 24, 0.45); } .proyecto__abrir:hover .proyecto__abrir-txt, .proyecto__abrir:focus-visible .proyecto__abrir-txt { opacity: 1; transform: none; } } /* Respaldo cuando la web no permite mostrarse dentro de un iframe. [hidden] debe ganar al display:grid de abajo. */ .proyecto__respaldo[hidden] { display: none; } .proyecto__respaldo { position: absolute; inset: 0; display: grid; place-items: end center; background: var(--color-panel-solido); } .proyecto__respaldo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .proyecto__respaldo-txt { position: relative; margin-bottom: 1rem; padding: 0.5rem 1rem; font-size: 0.85rem; color: var(--texto-principal); background: rgba(5, 10, 24, 0.82); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pastilla); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .proyecto__pie { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .proyectos__nota { margin-top: 2rem; text-align: center; font-size: 0.9rem; line-height: 1.65; color: var(--texto-suave); max-width: 70ch; margin-inline: auto; text-wrap: pretty; } /* --- Tablet --- */ @media (max-width: 1024px) { .proyecto__vista { height: 460px; } } /* --- Móvil --- */ @media (max-width: 768px) { .proyecto { padding: 1.25rem; } .proyecto__badge { left: 1.25rem; } .proyecto__vista { height: 360px; } .proyecto__pie .btn { width: 100%; justify-content: center; } } /* ------------------------------------------------------------ 15. CONTACTO ------------------------------------------------------------ */ .contacto__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.5rem; align-items: start; } .formulario { padding: 2rem; display: grid; gap: 1.2rem; } .formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .campo { display: grid; gap: 0.45rem; } .campo label { font-size: 0.92rem; font-weight: 600; color: var(--texto-principal); } .campo label span { color: var(--color-cian); } .campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.95rem; font-family: var(--fuente-cuerpo); font-size: 1rem; /* 16px: evita el zoom automático de iOS */ color: var(--texto-principal); background: rgba(5, 10, 24, 0.55); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-s); transition: border-color 150ms ease, box-shadow 150ms ease; } .campo textarea { resize: vertical; min-height: 120px; } .campo select { appearance: none; /* Flecha del select dibujada en SVG */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238e9dbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; } .campo input::placeholder, .campo textarea::placeholder { color: var(--texto-suave); opacity: 0.7; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--color-cian); box-shadow: 0 0 0 3px rgba(47, 212, 246, 0.15); } /* Campo con error */ .campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(255, 122, 138, 0.12); } .campo__error { font-size: 0.85rem; color: var(--color-error); } .formulario__enviar { justify-self: start; } .formulario__estado { font-size: 0.95rem; padding: 0.85rem 1.1rem; border-radius: var(--radio-s); border: 1px solid; } .formulario__estado.es-exito { color: var(--color-exito); border-color: rgba(74, 222, 158, 0.35); background: rgba(74, 222, 158, 0.07); } .formulario__estado.es-error { color: var(--color-error); border-color: rgba(255, 122, 138, 0.35); background: rgba(255, 122, 138, 0.07); } .contacto__info { display: grid; gap: 1.5rem; } .contacto__panel { padding: 1.8rem; } .contacto__panel h3 { margin-bottom: 0.6rem; } .contacto__panel p { font-size: 0.97rem; } .contacto__datos { display: grid; gap: 0.4rem; margin-top: 1.25rem; } .contacto__datos li { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; font-size: 0.95rem; } .contacto__datos svg { color: var(--color-cian); flex-shrink: 0; } .contacto__datos a { color: var(--texto-principal); transition: color 150ms ease; } @media (hover: hover) and (pointer: fine) { .contacto__datos a:hover { color: var(--color-cian); } } .contacto__panel--secundario { background: rgba(47, 212, 246, 0.04); } .contacto__pasos { counter-reset: pasos-contacto; display: grid; gap: 0.8rem; margin-top: 1rem; } .contacto__pasos li { counter-increment: pasos-contacto; position: relative; padding-left: 2.2rem; font-size: 0.96rem; } .contacto__pasos li::before { content: counter(pasos-contacto); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; font-size: 0.8rem; font-weight: 700; color: var(--texto-sobre-acento); background: var(--gradiente-marca); border-radius: 50%; } /* ------------------------------------------------------------ 16. FOOTER ------------------------------------------------------------ */ .footer { border-top: 1px solid var(--color-borde); background: rgba(5, 10, 24, 0.6); padding-top: 3.5rem; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; } .footer__marca p { margin-top: 1rem; font-size: 0.95rem; max-width: 26rem; } .footer h3 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 1rem; } .footer__nav ul { display: grid; gap: 0.2rem; } .footer__nav a { display: inline-flex; align-items: center; min-height: 38px; font-size: 0.95rem; color: var(--texto-secundario); transition: color 150ms ease; } @media (hover: hover) and (pointer: fine) { .footer__nav a:hover, .footer__legal a:hover { color: var(--color-cian); } } .footer__social ul { display: flex; gap: 0.6rem; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--texto-secundario); border: 1px solid var(--color-borde); border-radius: var(--radio-m); transition: color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-salida); } .footer__social a:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .footer__social a:hover { color: var(--color-cian); border-color: var(--color-cian); } } /* Bloque de contacto del footer (email + WhatsApp con texto) */ .footer__contacto { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .footer__contacto a { width: auto; height: auto; padding: 0; border: 0; gap: 0.55rem; font-size: 0.92rem; color: var(--texto-secundario); } .footer__contacto a svg { flex: none; } @media (hover: hover) and (pointer: fine) { .footer__contacto a:hover { color: var(--color-cian); border-color: transparent; } } .footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1.5rem; border-top: 1px solid var(--color-borde); font-size: 0.88rem; color: var(--texto-suave); } .footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__legal a { color: var(--texto-suave); transition: color 150ms ease; } /* ------------------------------------------------------------ VÍDEO DE PRESENTACIÓN ------------------------------------------------------------ */ .video-caja { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radio-l); overflow: hidden; border: 1px solid var(--color-borde-fuerte); background: #000; box-shadow: 0 32px 70px -30px rgba(0, 0, 0, 0.85), 0 0 60px -30px rgba(46, 124, 246, 0.5); } .video-caja__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ FIGURAS / IMÁGENES Componente reutilizable. Si el archivo de imagen aún no existe, se muestra un hueco marcado con el nombre del archivo a colocar. ------------------------------------------------------------ */ /* Imagen del hero: oculta hasta que carga. Si carga, sustituye al mockup. */ .hero__imagen { display: none; width: 100%; height: auto; border-radius: var(--radio-l); border: 1px solid var(--color-borde); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); } .hero__visual.tiene-imagen .hero__imagen { display: block; } .hero__visual.tiene-imagen .navegador, .hero__visual.tiene-imagen .flotante { display: none; } .figura { position: relative; margin: 0; border-radius: var(--radio-l); overflow: hidden; border: 1px solid var(--color-borde); background: var(--color-panel); box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.75); aspect-ratio: 16 / 10; } .figura img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Hueco: solo se muestra si la imagen no existe (lo activa el onerror del ). Importante: [hidden] debe ganar al display:grid de abajo. */ .figura__hueco[hidden] { display: none; } .figura__hueco { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 1.25rem; text-align: center; border: 2px dashed var(--color-borde-fuerte); border-radius: inherit; background: radial-gradient(120% 100% at 50% 0%, rgba(46, 124, 246, 0.1), transparent 70%), var(--color-panel); } .figura__hueco svg { color: var(--color-cian); opacity: 0.85; } .figura__hueco b { font-family: var(--fuente-titulos); font-size: 0.9rem; color: var(--texto-principal); word-break: break-all; } .figura__hueco small { font-size: 0.8rem; color: var(--texto-suave); max-width: 30ch; } /* Figura de ancho completo dentro de una sección */ .figura--seccion { max-width: 900px; margin: 0 auto 2.75rem; } /* Imagen dentro de la tarjeta del servicio estrella */ .servicio__figura { margin-block: 0.35rem 0.25rem; } /* Imagen de la columna de contacto */ .contacto__info .figura { margin-bottom: 1.1rem; } /* Relación de aspecto más panorámica para cabeceras de sección */ .figura--panoramica { aspect-ratio: 21 / 9; } @media (max-width: 768px) { .figura--panoramica { aspect-ratio: 16 / 10; } } /* ------------------------------------------------------------ PÁGINAS LEGALES (aviso legal, privacidad, cookies) ------------------------------------------------------------ */ .legal { max-width: 900px; margin: 0 auto; padding: calc(var(--nav-h, 72px) + 3rem) 1.25rem 4rem; } .legal__volver { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; font-size: 0.92rem; color: var(--color-cian); } .legal h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 0.5rem; } .legal__fecha { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 2rem; } .legal h2 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin: 2.2rem 0 0.75rem; padding-top: 1.2rem; border-top: 1px solid var(--color-borde); } .legal h2:first-of-type { border-top: 0; padding-top: 0; } .legal h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; } .legal p, .legal li { color: var(--texto-secundario); line-height: 1.7; } .legal p { margin-bottom: 1rem; } .legal ul { margin: 0 0 1.2rem 1.3rem; } .legal li { list-style: disc; margin-bottom: 0.45rem; } .legal a { color: var(--color-cian); } .legal strong { color: var(--texto-principal); } .legal__nota { margin-top: 2.5rem; padding: 1rem 1.2rem; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); background: rgba(47, 212, 246, 0.06); font-size: 0.9rem; } /* Listas numeradas dentro de textos legales */ .legal ol { margin: 0 0 1.2rem 1.4rem; } .legal ol li { list-style: decimal; } /* Bloque destacado (avisos legales importantes) */ .legal .notice { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--color-cian); border-radius: 0 var(--radio-m) var(--radio-m) 0; background: rgba(47, 212, 246, 0.07); color: var(--texto-principal); font-weight: 500; white-space: pre-line; } /* Tablas de datos legales (responsive: scroll horizontal si no cabe) */ .legal__tabla { overflow-x: auto; margin: 1.1rem 0 1.6rem; border-radius: var(--radio-m); border: 1px solid var(--color-borde); } .legal table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 0.94rem; } .legal th, .legal td { border: 1px solid var(--color-borde); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; color: var(--texto-secundario); line-height: 1.6; } .legal th { background: rgba(125, 165, 255, 0.08); color: var(--texto-principal); font-family: var(--fuente-titulos); font-weight: 600; } .legal td:first-child { color: var(--texto-principal); font-weight: 500; } /* ------------------------------------------------------------ CONSENTIMIENTO EN FORMULARIOS (RGPD) ------------------------------------------------------------ */ .consentimiento { margin-top: 0.4rem; display: grid; gap: 0.85rem; } .consentimiento__aviso { font-size: 0.82rem; line-height: 1.6; color: var(--texto-suave); padding: 0.75rem 0.9rem; border-radius: var(--radio-m); background: rgba(125, 165, 255, 0.05); border: 1px solid var(--color-borde); } .consentimiento__check { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; font-size: 0.9rem; color: var(--texto-secundario); line-height: 1.55; cursor: pointer; } .consentimiento__check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.1rem; accent-color: var(--color-cian); cursor: pointer; flex: none; } .consentimiento__check a { color: var(--color-cian); text-decoration: underline; } .consentimiento__req { color: var(--color-cian); } /* ------------------------------------------------------------ AVISO PREVIO A LA CONTRATACIÓN (renovación, IVA y baja) ------------------------------------------------------------ */ .pago-consentimiento__info { max-width: 760px; margin: 0 auto 2rem; text-align: center; font-size: 0.86rem; line-height: 1.65; color: var(--texto-suave); text-wrap: pretty; } .pago-consentimiento__info strong { color: var(--texto-principal); } .pago-consentimiento__info a { color: var(--color-cian); } /* ------------------------------------------------------------ ENLACE "CONFIGURAR COOKIES" EN EL PIE ------------------------------------------------------------ */ .footer__cookies-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-suave); cursor: pointer; transition: color 150ms ease; } .footer__cookies-btn:hover { color: var(--color-cian); } /* ------------------------------------------------------------ BANNER Y PANEL DE COOKIES ------------------------------------------------------------ */ .cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120; max-width: 760px; margin: 0 auto; padding: 1.15rem 1.25rem; border-radius: var(--radio-l); background: var(--color-panel-solido); border: 1px solid var(--color-borde-fuerte); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); display: none; } .cookie-banner.is-visible { display: block; animation: cookie-subir 400ms var(--ease-salida, ease) both; } @keyframes cookie-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .cookie-banner__texto { font-size: 0.9rem; line-height: 1.6; color: var(--texto-secundario); margin-bottom: 1rem; } .cookie-banner__texto strong { color: var(--texto-principal); } .cookie-banner__texto a { color: var(--color-cian); } .cookie-banner__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; } .cookie-banner__acciones .btn { flex: 1 1 auto; min-width: 130px; justify-content: center; } /* Overlay + panel de preferencias */ .cookie-modal { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(3, 6, 16, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cookie-modal.is-visible { display: flex; } .cookie-modal__caja { width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; background: var(--color-panel-solido); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-l); padding: 1.5rem; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75); } .cookie-modal__titulo { font-size: 1.3rem; margin-bottom: 0.4rem; } .cookie-modal__intro { font-size: 0.88rem; color: var(--texto-secundario); line-height: 1.6; margin-bottom: 1.2rem; } .cookie-cat { border: 1px solid var(--color-borde); border-radius: var(--radio-m); padding: 0.9rem 1rem; margin-bottom: 0.7rem; } .cookie-cat__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cookie-cat__nombre { font-family: var(--fuente-titulos); font-weight: 600; color: var(--texto-principal); } .cookie-cat__desc { margin-top: 0.4rem; font-size: 0.84rem; color: var(--texto-suave); line-height: 1.55; } /* Interruptor accesible */ .cookie-switch { position: relative; flex: none; width: 46px; height: 26px; } .cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .cookie-switch__pista { position: absolute; inset: 0; border-radius: 999px; background: rgba(125, 165, 255, 0.2); border: 1px solid var(--color-borde-fuerte); transition: background 200ms ease; pointer-events: none; } .cookie-switch__pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-salida, ease); } .cookie-switch input:checked + .cookie-switch__pista { background: var(--gradiente-marca); } .cookie-switch input:checked + .cookie-switch__pista::after { transform: translateX(20px); } .cookie-switch input:disabled + .cookie-switch__pista { opacity: 0.6; cursor: not-allowed; } .cookie-switch input:focus-visible + .cookie-switch__pista { outline: 2px solid var(--color-cian); outline-offset: 2px; } .cookie-modal__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; } .cookie-modal__acciones .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; } @media (max-width: 560px) { .cookie-banner__acciones .btn, .cookie-modal__acciones .btn { flex: 1 1 100%; } } /* ------------------------------------------------------------ 17. BOTÓN FLOTANTE DE WHATSAPP ------------------------------------------------------------ */ .whatsapp-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: grid; place-items: center; width: 56px; height: 56px; color: var(--texto-sobre-acento); background: linear-gradient(135deg, #35e07a, #1fc862); border-radius: 50%; box-shadow: 0 12px 30px -8px rgba(31, 200, 98, 0.6); transition: transform 180ms var(--ease-salida), box-shadow 200ms ease; } .whatsapp-flotante:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .whatsapp-flotante:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(31, 200, 98, 0.7); } } /* ------------------------------------------------------------ 18. RESPONSIVE Breakpoints: 1024px / 768px / 480px ------------------------------------------------------------ */ /* --- Tablet grande / portátil pequeño --- */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: 3.5rem; } .hero { min-height: 0; padding-top: 7.5rem; } .hero__visual { max-width: 560px; margin-inline: auto; width: 100%; } .hero__scroll { display: none; } .servicios__grid { grid-template-columns: repeat(2, 1fr); } .servicio--estrella { grid-column: span 2; grid-row: auto; } .proceso__grid, .valores__grid { grid-template-columns: repeat(2, 1fr); } .propiedad__grid { grid-template-columns: 1fr; gap: 2.5rem; } .propiedad__visual { max-width: 480px; } .contacto__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } } /* --- Tablet / móvil grande: aparece la hamburguesa --- */ @media (max-width: 768px) { .nav__links, .nav__cta { display: none; } /* El interruptor de tema se va a la derecha, junto a la hamburguesa */ .tema-toggle { margin-left: auto; width: 40px; height: 40px; } .nav__burger { display: flex; } .servicios__grid { grid-template-columns: 1fr; } .servicio--estrella { grid-column: auto; } .planes__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } /* El plan destacado va primero en móvil */ .plan--destacado { order: -1; } .portfolio__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .formulario__fila { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } } /* --- Móvil pequeño (375–480px) --- */ @media (max-width: 480px) { .contenedor { width: min(100% - 2rem, var(--ancho-max)); } .nav__inner { width: min(100% - 2rem, var(--ancho-max)); } .hero { padding-top: 6.5rem; } .hero__ctas .btn { width: 100%; } .proceso__grid, .valores__grid { grid-template-columns: 1fr; } .formulario { padding: 1.4rem; } .formulario__enviar { justify-self: stretch; width: 100%; } .flotante--2 { left: 0; } .flotante--1 { right: 0; } .flotante--3 { right: 4%; } .whatsapp-flotante { right: 1rem; bottom: 1rem; } } /* ------------------------------------------------------------ 19. ACCESIBILIDAD: MOVIMIENTO Y TRANSPARENCIA REDUCIDOS ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Las entradas pasan a fundidos sin desplazamiento ni desenfoque */ html.js .reveal { transform: none; filter: none; transition: opacity 250ms ease; } html.js .reveal .figura img, html.js .figura.reveal img, html.js .video-caja.reveal .video-caja__video { transform: none; transition: none; } /* Se detienen las animaciones decorativas */ .orb, .flotante, .hero__scroll, .mock-grafica__barras span, .mock-grafica__punto, .mock-grafica__final { animation: none; } .btn, .servicio, .portfolio__tarjeta, .whatsapp-flotante, .footer__social a { transition-duration: 1ms; } /* El canvas de partículas se oculta (el JS tampoco lo anima) */ #particulas { display: none; } } @media (prefers-reduced-transparency: reduce) { .nav, .nav__movil { background: var(--color-panel-solido); -webkit-backdrop-filter: none; backdrop-filter: none; } .tarjeta { background: var(--color-panel-solido); -webkit-backdrop-filter: none; backdrop-filter: none; } }