/* Theme Name: CC SaaS Theme URI: https://tusitio.com Author: Tú Version: 2.0 Text Domain: cc-saas */ /* ====== BASE ====== */ :root{ --bg:#0b0b0f; --bg-2:#121217; --text:#eaeaf2; --muted:#b3b3bf; --accent1:#ff7a59; --accent2:#ff4fd8; --card:rgba(255,255,255,0.06); --card-border:rgba(255,255,255,0.12); --shadow:0 10px 30px rgba(0,0,0,.45); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: var(--bg); /* FONDO TOTALMENTE NEGRO por defecto */ color:var(--text); } /* Si activas efectos en el Personalizador, se añade .has-effects a */ body.has-effects{ background: radial-gradient(1000px 600px at 15% -10%, #2b2135 0%, rgba(43,33,53,0) 60%), radial-gradient(900px 600px at 90% 10%, #1e2b3d 0%, rgba(30,43,61,0) 60%), var(--bg); } .container{max-width:1200px; margin:0 auto; padding:24px} .row{display:grid; gap:24px} .row-2{grid-template-columns:1.2fr 1fr} @media (max-width:980px){ .row-2{grid-template-columns:1fr} } /* ====== HEADER + MENÚ ====== */ .header{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(11,11,15,.82), rgba(11,11,15,0)); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06); } .nav{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{font-weight:800; letter-spacing:.4px} .brand a{color:var(--text); text-decoration:none} .cta{ background:#fff; color:#111; border-radius:999px; padding:10px 16px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px; } /* Menú desktop */ .site-nav ul,.site-nav .menu-list{ display:flex; flex-direction:row; align-items:center; gap:22px; list-style:none; margin:0; padding:0; } .site-nav a{ color:var(--text); text-decoration:none; font-size:14px; padding:8px 0; display:inline-block } .site-nav a:hover{ color:#fff } /* Hamburguesa (móvil) */ .nav-toggle{ display:none; background:transparent; border:0; padding:8px; cursor:pointer; } .nav-toggle .bar{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; transition:.2s } @media (max-width:980px){ .nav-toggle{display:block} .site-nav{ position:absolute; top:64px; right:24px; background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px; display:none } .site-nav.open{ display:block } .site-nav .menu-list{ flex-direction:column; align-items:flex-start; gap:10px } } /* ====== HERO ====== */ .hero{padding:64px 0 24px} .kicker{color:var(--muted); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:12px} .h1{font-size:clamp(36px,6vw,72px); line-height:1.05; margin:8px 0 12px; font-weight:900} .gradient{ background:linear-gradient(90deg,#ffffff 0%,var(--accent1) 45%,var(--accent2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-copy{color:var(--muted); max-width:58ch; font-size:16px} /* Badges */ .badges{display:flex; flex-direction:column; gap:16px; margin-top:16px} .badge{ background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:14px 16px; width:max-content; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; font-weight:700; } .badge span{color:#fff} /* Imagen hero */ .hero-art{ position:relative; aspect-ratio:1/1; border-radius:28px; overflow:hidden; background: var(--bg-2); border:1px solid var(--card-border); box-shadow: var(--shadow); } .hero-art img{width:100%; height:100%; object-fit:cover; display:block} .hero-art .placeholder{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-weight:600} /* Botones */ .actions{display:flex; gap:12px; margin-top:20px} .btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; padding:12px 18px; border-radius:12px; border:1px solid var(--card-border); background:var(--card); color:#fff; } .btn-primary{ background:#ffffff; color:#111; border-color:#fff; } /* ====== MÉTRICAS ====== */ .metrics-band{ padding:28px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06) } .metrics-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px } @media (max-width:980px){ .metrics-grid{ grid-template-columns: repeat(2, 1fr) } } @media (max-width:540px){ .metrics-grid{ grid-template-columns: 1fr } } .metric-card{ background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:18px 16px; box-shadow:var(--shadow) } .metric-value{ font-weight:900; font-size:clamp(22px,3.8vw,34px); line-height:1; color:#fff } .metric-label{ color:var(--muted); font-size:14px; margin-top:6px } /* ====== SERVICIOS ====== */ .services{ padding:56px 0 } .services-header{ margin-bottom:22px } .services-title{ font-weight:900; font-size:clamp(28px,4.8vw,42px); margin:0 0 8px } .services-desc{ color:var(--muted); max-width:70ch; margin:0 } .services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:24px } @media (max-width:980px){ .services-grid{ grid-template-columns:1fr } } .service-card{ background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:18px; box-shadow:var(--shadow) } .service-card h3{ margin:0 0 8px; font-size:20px; font-weight:800; color:#fff } .service-card p{ margin:0 0 12px; color:var(--muted) } .service-features{ margin:0 0 14px; padding-left:18px } .service-features li{ margin:6px 0 } .service-cta{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; background:#fff; color:#111; border:1px solid #fff } .service-cta:hover{ opacity:.9 } /* ====== CLIENTES ====== */ .clients{ padding:48px 0 } .clients-title{ font-weight:900; font-size:clamp(24px,4vw,32px); margin:0 0 16px } .clients-logos{ display:grid; grid-template-columns: repeat(6, 1fr); gap:18px; align-items:center } @media (max-width:980px){ .clients-logos{ grid-template-columns: repeat(3, 1fr) } } @media (max-width:540px){ .clients-logos{ grid-template-columns: repeat(2, 1fr) } } .clients-logos img{ width:100%; opacity:.8; filter:grayscale(1); transition:.2s } .clients-logos img:hover{ filter:none; opacity:1 } /* ====== PRECIOS ====== */ .pricing{ padding:56px 0 } .pricing-title{ font-weight:900; font-size:clamp(28px,4.8vw,42px); margin:0 0 8px } .pricing-desc{ color:var(--muted); margin:0 0 18px } .pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px } @media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr } } .plan{ background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:18px; box-shadow:var(--shadow) } .plan h3{ margin:0 0 6px; font-size:20px; color:#fff } .price{ font-size:28px; font-weight:900; margin:6px 0 10px } .plan ul{ margin:0 0 12px; padding-left:18px; color:var(--muted) } .plan .btn{ margin-top:8px } /* ====== GENERADOR ====== */ .gen-wrap{ padding:56px 0 } .gen-title{ font-weight:900; font-size:clamp(26px,4.2vw,36px); margin:0 0 12px } .gen-desc{ color:var(--muted); margin:0 0 18px; max-width:70ch } .form-card{ background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:18px; box-shadow:var(--shadow) } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px } @media (max-width:780px){ .form-row{ grid-template-columns:1fr } } .label{ font-weight:700; font-size:14px; margin:10px 0 6px; color:#fff } .input,.select,.textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--card-border); background:rgba(255,255,255,.06); color:#fff; outline:none; } .textarea{ min-height:120px; resize:vertical } .help{ color:var(--muted); font-size:12px; margin-top:4px } .paywall{ background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); padding:12px; border-radius:12px; margin:14px 0 } .result-card{ margin-top:16px; padding:16px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--card-border) } .result-card a{ color:#fff; text-decoration:underline } .success{ color:#86efac } .error{ color:#fca5a5 } /* ====== FOOTER ====== */ footer{ color:var(--muted); border-top:1px solid rgba(255,255,255,.06) } /* ===== HERO: video opcional ===== */ .hero-art.has-video { position: relative; } .hero-art.has-video img { display: none; } /* oculta la imagen si hay video */ .hero-art .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; outline:0; pointer-events:none; } /* ========================================================= HOLOGRAM HALFTONE BG v2 — MÁS DINÁMICO, SIN PARALLAX (ADD-ONLY) - Siempre detrás del contenido - Gradiente y brillo más rápidos - Semitonos con pulso más marcado ========================================================= */ :root{ --holo-shine-x: -30%; --holo-shine-y: -30%; --holo-dot-s: 8px; --holo-dot-m: 13px; --holo-dot-l: 18px; } body{ position:relative; } body > *:not(#holo-bg){ position:relative; z-index:1; } /* Contenedor del fondo */ #holo-bg{ position:fixed; inset:0; z-index:0; /* SIEMPRE detrás */ pointer-events:none; overflow:hidden; transform: none !important; /* neutraliza cualquier parallax previo */ } /* Capa 1: degradado animado (más rápido) */ #holo-bg::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, #ff2c7b 0%, #7c1bd1 45%, #5a1cad 55%, #ff9b2c 100%), radial-gradient(80% 60% at 15% 10%, rgba(255,60,140,.45) 0%, rgba(255,60,140,0) 60%), radial-gradient(80% 60% at 85% 90%, rgba(255,180,0,.45) 0%, rgba(255,180,0,0) 60%); background-size: 150% 150%, 120% 120%, 120% 120%; background-position: 50% 50%, 10% 10%, 90% 90%; filter: saturate(1.12) contrast(1.03); animation: holoGradientDrift2 10s ease-in-out infinite alternate; } /* Capa 2: semitonos + brillo con barrido (más rápido) */ #holo-bg::after{ content:""; position:absolute; inset:0; background: /* brillo */ linear-gradient(100deg, transparent 25%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.12) 55%, transparent 75%), /* halftone en 3 escalas */ radial-gradient(circle, rgba(0,0,0,.28) 0 1px, transparent 1.2px), radial-gradient(circle, rgba(0,0,0,.22) 0 1.6px, transparent 1.8px), radial-gradient(circle, rgba(0,0,0,.18) 0 2.2px, transparent 2.4px); background-size: 200% 200%, var(--holo-dot-s) var(--holo-dot-s), var(--holo-dot-m) var(--holo-dot-m), var(--holo-dot-l) var(--holo-dot-l); background-position: var(--holo-shine-x) var(--holo-shine-y), 0 0, 0 0, 0 0; mix-blend-mode: soft-light; opacity:.96; animation: holoShineSweep2 5.5s linear infinite, holoDotsPulse2 4.5s ease-in-out infinite alternate; } /* Animaciones v2 */ @keyframes holoGradientDrift2{ 0% { background-position: 44% 46%, 12% 8%, 88% 92%; } 50% { background-position: 58% 54%, 18% 16%, 82% 84%; } 100% { background-position: 52% 58%, 10% 12%, 90% 86%; } } @keyframes holoShineSweep2{ 0% { --holo-shine-x:-40%; --holo-shine-y:-40%; } 50% { --holo-shine-x: 55%; --holo-shine-y: 20%; } 100% { --holo-shine-x:130%; --holo-shine-y: 95%; } } @keyframes holoDotsPulse2{ 0% { --holo-dot-s:7px; --holo-dot-m:12px; --holo-dot-l:18px; opacity:.90; } 50% { --holo-dot-s:9px; --holo-dot-m:14px; --holo-dot-l:21px; opacity:.98; } 100% { --holo-dot-s:7.5px; --holo-dot-m:12.5px; --holo-dot-l:19px; opacity:.93; } } /* Accesibilidad: menos mareo pero con vida */ @media (prefers-reduced-motion: reduce){ #holo-bg::before{ animation: holoGradientDrift2 16s ease-in-out infinite alternate; } #holo-bg::after { animation: holoDotsPulse2 10s ease-in-out infinite alternate; } }