/* ========================================================= Landing Premium Genérica — styles.css - Mobile-first, tipografía elegante, “look caro”. - Variables claras para colores, radios, sombras y espacios. - ⚙️ Aca se cambian colores/temas: ver :root y .theme-light. ========================================================= */ /* -------------------------------- Variables (modo oscuro por defecto) -------------------------------- */ :root{ --bg: #0e1014; --surface: #131722; --surface-2: #161b27; --text: #e7ecf6; --muted: #9aa3b2; --primary: #22c55e; /* verde premium */ --accent: #9b87f5; /* lila elegante */ --brand: #f5d37a; /* dorado sutil */ --border: #202636; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35); --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --container: 1100px; --header-h: 72px; } /* Claro (toggle con .theme-light en ) */ .theme-light{ --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f1f3f9; --text: #0f1115; --muted: #566074; --primary: #197a43; --accent: #6a5ad9; --brand: #c9a949; --border: #e0e5ef; --shadow: 0 10px 28px rgba(19, 22, 33, .1); } /* -------------------------------- Base -------------------------------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 700px at 20% -10%, rgba(155,135,245,.08), transparent), radial-gradient(1000px 600px at 90% 10%, rgba(34,197,94,.08), transparent), var(--bg); line-height:1.55; } /* Micro-textura sutil para look premium (opcional) */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect fill='none' width='60' height='60'/%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff0f'/%3E%3C/svg%3E"); opacity:.25; mix-blend-mode: overlay; } /* Contenedores */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline: clamp(16px, 3vw, 28px); } /* Utilidades */ .hide-desktop{ display:none } .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-radius: calc(var(--radius) - 4px); border:1px solid transparent; background:var(--surface-2); color:var(--text); text-decoration:none; font-weight:600; box-shadow:var(--shadow); transition:.2s ease; } .btn:hover{ transform: translateY(-1px) scale(1.01) } .btn-cta{ background: linear-gradient(135deg, var(--brand), var(--primary)); color:#141414; border:1px solid #00000022; } .btn-cta:hover{ filter: saturate(1.1) brightness(1.02) } .btn-ghost{ background:transparent; border-color:var(--border); } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:var(--surface-2); color:var(--text); border:1px solid var(--border); box-shadow: var(--shadow); } /* -------------------------------- Header -------------------------------- */ .header{ position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; backdrop-filter: saturate(120%) blur(8px); background: linear-gradient(to bottom, rgba(10,12,18,.85), rgba(10,12,18,.55), transparent); border-bottom: 1px solid var(--border); } .header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; color:var(--text); text-decoration:none; } .brand i{ color:var(--brand); font-size:1.25rem } .nav{ display:flex; align-items:center; gap: clamp(.5rem, 1.5vw, 1rem) } .nav-link{ display:inline-block; padding:.4rem .2rem; color:var(--muted); text-decoration:none; font-weight:600; border-bottom:2px solid transparent; transition:.2s ease color,border; } .nav-link:hover{ color:var(--text) } .nav-cta{ margin-left:.5rem } .header-actions{ display:flex; align-items:center; gap:.5rem } /* Menú móvil */ .mobile-menu{ display:none; position:absolute; inset: var(--header-h) 0 auto 0; z-index:40; background: var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding: .75rem; } .mobile-menu .btn{ width:100%; justify-content:center; margin-top:.5rem } .mobile-link{ display:block; padding:.85rem; text-decoration:none; color:var(--text); border-radius:12px; border:1px solid var(--border); margin:.35rem 0; background:var(--surface-2); } /* -------------------------------- Hero -------------------------------- */ .hero{ position:relative; padding: clamp(72px, 10vw, 120px) 0; overflow:hidden; } .hero-grid{ display:grid; align-items:center; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1.15fr .85fr; } .hero-copy .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background: #ffffff10; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.9rem; } .hero h1{ font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height:1.1; margin:.6rem 0 1rem; } .hero h1 .grad{ background: linear-gradient(90deg, var(--brand), var(--accent), var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead{ color:var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem) } .hero-cta{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap } .metrics{ display:flex; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(1rem, 3vw, 2rem) } .metric .num{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight:800 } .metric .label{ color:var(--muted) } /* Hero media */ .preview-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } .preview-top{ display:flex; gap:.35rem; padding:.6rem; border-bottom:1px solid var(--border); background: linear-gradient(to right, #ffffff05, #ffffff00); } .preview-top span{ width:10px; height:10px; border-radius:999px; background:#fff1 } .preview-body{ padding:1rem 1rem 1.2rem } .preview-hero{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap } .chip{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.9rem; background: #ffffff0f; border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px } .preview-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; } .preview-item{ height:88px; background: linear-gradient(135deg, #ffffff10, #ffffff06); border-radius: 12px; border:1px solid var(--border) } .preview-item.tall{ grid-row: span 2; height: 184px } .preview-item.wide{ grid-column: span 2 } /* Fondos animados */ .shape{ position:absolute; border-radius: 50%; filter: blur(18px); opacity:.28; } .shape-1{ width:520px; height:520px; left:-120px; top:-80px; background: radial-gradient(closest-side, var(--accent), transparent); animation: float1 14s ease-in-out infinite } .shape-2{ width:420px; height:420px; right:-100px; top:-40px; background: radial-gradient(closest-side, var(--primary), transparent); animation: float2 18s ease-in-out infinite } .shape-3{ width:360px; height:360px; right:20%; bottom:-120px; background: radial-gradient(closest-side, var(--brand), transparent); animation: float3 16s ease-in-out infinite } @keyframes float1{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(20px) } } @keyframes float2{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-26px) } } @keyframes float3{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } } /* -------------------------------- Secciones genéricas -------------------------------- */ .section{ padding: clamp(56px, 8vw, 100px) 0 } .section.alt{ background: linear-gradient(180deg, #ffffff06, transparent) } .section-head{ text-align:center; margin-bottom: clamp(20px, 5vw, 40px) } .section-head .eyebrow{ text-transform:uppercase; letter-spacing:.16em; color:var(--brand); font-weight:800; font-size:.8rem } .section-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin:.4rem 0 } .section-lead{ color:var(--muted) } /* Cards */ .cards{ display:grid; grid-template-columns: repeat( auto-fit, minmax(230px, 1fr) ); gap: clamp(14px, 3vw, 22px); } .card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2.5vw, 22px); box-shadow: var(--shadow); } .card i{ font-size:1.6rem; color:var(--brand) } .card h3{ margin:.6rem 0 .4rem } .card p{ color:var(--muted) } /* Grid de portfolio */ .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 2vw, 18px); } .tile{ grid-column: span 6; background: linear-gradient(135deg, #ffffff10, #ffffff05); border:1px solid var(--border); border-radius: 14px; min-height: 160px; box-shadow: var(--shadow); position:relative; overflow:hidden; } .tile.tall{ grid-row: span 2; min-height: 340px } .tile.wide{ grid-column: span 12 } .tile .tag{ position:absolute; left:12px; top:12px; display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .6rem; background: #00000070; color:#fff; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.3px; } /* Steps */ .steps{ list-style:none; padding:0; display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap:16px; } .steps li{ background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); position:relative; } .step-idx{ position:absolute; right:12px; top:12px; width:32px; height:32px; display:grid; place-items:center; border-radius:999px; background: #ffffff10; border:1px solid var(--border); font-weight:800 } /* Pricing */ .pricing{ display:grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: clamp(14px, 2.2vw, 22px); } .price-card{ background: linear-gradient(180deg, var(--surface), #ffffff04); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 2.2vw, 24px); display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; } .price-card.featured{ outline: 2px solid var(--brand); transform: translateY(-4px); } .badge-top{ position:absolute; top:10px; left:10px; display:inline-flex; gap:.4rem; align-items:center; background: #1a1f2a; color:#f6e6b2; padding:.3rem .6rem; border-radius:999px; font-weight:700; border:1px solid var(--border) } .price-head h3{ margin:.2rem 0 .1rem } .price{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight:800 } .price span{ font-size:.9rem; color:var(--muted) } .price-note{ color:var(--muted); margin-top:-6px } .price-list{ list-style:none; padding:0; margin:0 0 .4rem 0 } .price-list li{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0; color:var(--text) } .price-list i{ color:var(--brand) } /* Slider */ .slider{ position:relative; overflow:hidden; border-radius: var(--radius); border:1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .slides{ display:flex; transition: transform .5s ease } .slide{ min-width:100%; padding: clamp(16px, 4vw, 28px); } .slide blockquote{ font-size: clamp(1rem, 2vw, 1.2rem) } .slide footer{ margin-top:.8rem; color:var(--muted); font-weight:600 } .slider-btn{ position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--border); background: #ffffff10; color:var(--text); } .slider-btn.prev{ left:10px } .slider-btn.next{ right:10px } /* FAQ */ .faq{ display:grid; gap:.6rem } .faq-item{ border:1px solid var(--border); border-radius:12px; background: var(--surface); padding:.6rem 1rem } .faq-item > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; font-weight:700 } .faq-item > p{ color:var(--muted) } /* CTA */ .cta-inner{ background: linear-gradient(135deg, #ffffff08, #ffffff02); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 4vw, 28px); display:grid; gap:1rem; } .form{ display:grid; gap: .8rem } .form-row{ display:grid; gap:.8rem; grid-template-columns: 1fr 1fr } .form input, .form textarea{ width:100%; padding:.9rem 1rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); color:var(--text) } .form-actions{ display:flex; gap:.6rem; flex-wrap:wrap } /* Footer */ .footer{ padding: 28px 0; border-top:1px solid var(--border); background: #0b0d12aa } .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .footer .social a{ color:var(--muted); text-decoration:none; margin-left:.6rem } .footer .social a:hover{ color:var(--text) } /* -------------------------------- Responsive -------------------------------- */ @media (max-width: 980px){ .hide-desktop{ display:inline-flex } .nav{ display:none } .hero-grid{ grid-template-columns: 1fr } .metrics{ gap:1rem } .form-row{ grid-template-columns: 1fr } } /* ================================ 🟢 Menú móvil (sidebar/dropdown) (reemplaza cualquier bloque anterior de .mobile-menu) ================================ */ .mobile-menu{ position: absolute; inset: var(--header-h) 0 auto 0; z-index: 999; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: .75rem; /* Estado cerrado (animable) */ display: block; /* <- sobreescribe el display:none viejo */ opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .mobile-menu.open{ opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-link{ display:block; padding:.85rem; text-decoration:none; color:var(--text); border-radius:12px; border:1px solid var(--border); margin:.35rem 0; background:var(--surface-2); } .mobile-menu .btn{ width:100%; justify-content:center; margin-top:.5rem } @media (max-width: 980px){ .hide-desktop{ display:inline-flex } .nav{ display:none } }