/* Outfit + Inter se cargan en el de cada página (preload, no-bloqueante). Antes Outfit venía por @import aquí, que era render-blocking y retrasaba el LCP. */ :root { --bg: #09090b; --bg-elev: #18181b; --bg-elev-2: #27272a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #fafafa; --text-muted: #a1a1aa; --text-dim: #71717a; --accent: #dc2626; --accent-soft: #ef4444; --accent-glow: rgba(220, 38, 38, 0.18); --green: #10b981; --amber: #f59e0b; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --maxw: 1240px; --gutter: clamp(20px, 4vw, 56px); --font-display: "Outfit", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } body, p, h1, h2, h3, li, summary, a { overflow-wrap: break-word; } html { scroll-behavior: smooth; /* El drawer del menú móvil se oculta con transform: translateX(100%), lo que lo deja fuera de pantalla a la derecha. Como `.nav` (con backdrop-filter) es su containing block, ese ancho fantasma EXPANDÍA el viewport en móvil y el navegador renderizaba la página a ancho de escritorio (menú "siempre abierto" + todo diminuto al pellizcar). Recortar el overflow horizontal en el root lo elimina. `clip` no crea contenedor de scroll (no rompe sticky ni el scroll suave); `hidden` queda de fallback para navegadores antiguos. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; /* `clip` recorta el overflow horizontal SIN crear contenedor de scroll (a diferencia de `hidden`, que computa overflow-y:auto y ROMPE el position:sticky del header). `hidden` queda de fallback para navegadores muy antiguos sin soporte de `clip`. */ overflow-x: hidden; overflow-x: clip; } /* Ambient glowing radial gradients */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at 10% 20%, rgba(220, 38, 38, 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(220, 38, 38, 0.04) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(24, 24, 27, 0.2) 0%, transparent 80%); z-index: -2; pointer-events: none; } /* Noise overlay */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.012; z-index: -1; pointer-events: none; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-soft); } img, svg { max-width: 100%; display: block; } button { font-family: inherit; } ::selection { background: var(--accent); color: #fff; } /* ── Tipografía ───────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.5em 0; } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 0.4em; } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } p { margin: 0 0 1em 0; } .lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-muted); max-width: 680px; } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fca5a5; /* rosa claro: alto contraste sobre fondo oscuro (antes #ef4444 quedaba apagado) */ margin-bottom: 1rem; padding: 5px 13px; border: 1px solid rgba(248, 113, 113, 0.38); border-radius: 999px; background: rgba(220, 38, 38, 0.13); } .accent { color: var(--accent-soft); } /* ── Layout ───────────────────────────────────────────────────────────── */ .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } section { padding: clamp(60px, 9vw, 120px) 0; position: relative; } .section-header { max-width: 760px; margin-bottom: 3rem; } .section-header.center { margin-left: auto; margin-right: auto; text-align: center; } /* ── Navbar ───────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(9, 9, 11, 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } .nav-logo span { color: var(--accent-soft); } .nav-links { display: flex; gap: 22px; font-size: 0.92rem; color: var(--text-muted); } .nav-links a { transition: color 0.15s; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--text); } /* ── Hamburguesa (mobile) ───────────────────────────────────────────── */ .nav-toggle { display: none; position: relative; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: border-color 0.15s, background 0.15s; } .nav-toggle:hover { background: var(--bg-elev); border-color: rgba(255,255,255,0.3); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Overlay del drawer */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 90; } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } @media (max-width: 980px) { .nav-toggle { display: inline-flex; } .nav-inner > .btn { display: none; } .nav-links { position: fixed; top: 0; right: 0; bottom: 0; /* `backdrop-filter` en .nav hace que .nav se convierta en el containing block de descendientes position:fixed. Sin esta altura explícita el drawer hereda los ~116 px de .nav y sólo cabe el primer item ("Inicio"). 100dvh respeta la barra de direcciones del navegador móvil, con fallback a 100vh. */ height: 100vh; height: 100dvh; width: min(86vw, 360px); flex-direction: column; gap: 0; padding: 84px 20px 32px; background: var(--bg-elev); border-left: 1px solid var(--border-strong); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 95; overflow-y: auto; font-size: 1rem; } .nav-links.is-open { transform: translateX(0); } .nav-links a { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-bottom: 1px solid var(--border); color: var(--text); min-height: 44px; } .nav-links a .nav-item-icon { flex-shrink: 0; color: var(--text-dim); transition: color 0.15s, transform 0.15s; } .nav-links a:hover .nav-item-icon, .nav-links a.active .nav-item-icon { color: var(--accent-soft); transform: translateX(1px); } .nav-links a.nav-client, .nav-links a.nav-icon { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border-strong); border-bottom: 0; } .nav-links .nav-cta-mobile { display: inline-flex !important; margin-top: 18px; width: 100%; justify-content: center; } body.nav-locked { overflow: hidden; } } @media (min-width: 981px) { /* En desktop el CTA Hablemos del drawer móvil DEBE estar oculto. `!important` es necesario porque la regla genérica `.btn` viene más adelante en el archivo con la misma especificidad y la sobrescribiría (resulta en 2 botones "Hablemos" visibles). */ .nav-cta-mobile { display: none !important; } /* Etiquetas largas del menú no se parten en dos líneas a 1024-1300 px. */ .nav-links a { white-space: nowrap; } /* Los iconos sólo decoran el drawer móvil; en desktop sólo texto. */ .nav-links > a:not(.nav-icon) > .nav-item-icon { display: none; } /* Acceso clientes: en desktop sólo se muestra el icono. Acorta el header. */ .nav-links a.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--text-muted); transition: color 0.15s, background 0.15s; } .nav-links a.nav-icon:hover, .nav-links a.nav-icon:focus-visible { color: var(--text); background: var(--bg-elev); } .nav-links a.nav-icon.active { color: var(--accent-soft); } .nav-links a.nav-icon .nav-item-label, .nav-links a.nav-icon .nav-icon-label { /* Oculto visualmente, leído por screen readers. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ── Botones ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; min-height: 44px; /* superficie tocable mínima (Apple HIG / Material) */ border-radius: 999px; font-weight: 600; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s, background 0.15s, border-color 0.15s, box-shadow 0.15s; white-space: nowrap; text-decoration: none; line-height: 1.2; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 30px -8px rgba(220, 38, 38, 0.55); } .btn-primary:hover { background: #b91c1c; color: #fff; box-shadow: 0 10px 36px -8px rgba(220, 38, 38, 0.7); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-elev); border-color: rgba(255,255,255,0.3); } .btn-large { padding: 18px 32px; font-size: 1.05rem; } /* ── HERO ─────────────────────────────────────────────────────────────── */ .hero { padding: clamp(80px, 14vw, 180px) 0 clamp(60px, 9vw, 120px) 0; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 60%; background: radial-gradient(ellipse at 50% 0%, var(--accent-glow), transparent 60%); pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 1; } .hero h1 { max-width: 14ch; } .hero .lead { margin-top: 1.2rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; } .hero-meta { margin-top: 2rem; color: var(--text-dim); font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px; } /* ── Pain section ─────────────────────────────────────────────────────── */ .pain { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015)); } .pain h2 strong { color: var(--accent-soft); font-weight: 700; } .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 2.5rem; } .pain-card { background: rgba(24, 24, 27, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); padding: 24px; } .pain-card .icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(220, 38, 38, 0.12); color: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; } .pain-card h3 { font-size: 1.05rem; margin-bottom: 6px; } .pain-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } /* ── Promesa ──────────────────────────────────────────────────────────── */ .promise { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 2rem; } @media (max-width: 800px) { .promise-grid { grid-template-columns: 1fr; } } .promise-item { text-align: center; } .promise-item .num { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--accent-soft); line-height: 1; } .promise-item h3 { margin-top: 12px; } .promise-item p { color: var(--text-muted); } /* ── Trabajo invisible (la sección clave) ─────────────────────────────── */ .work { background: radial-gradient(ellipse at 80% 20%, var(--accent-glow), transparent 50%), var(--bg); } .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 3rem; } .work-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.2s, transform 0.2s, background 0.2s; } .work-card:hover { border-color: rgba(220, 38, 38, 0.4); background: var(--bg-elev-2); transform: translateY(-3px); } .work-card .work-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #7f1d1d); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.5); } .work-card h3 { font-size: 1.05rem; margin-bottom: 6px; } .work-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .work-counter { text-align: center; margin-top: 3.5rem; padding: 28px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 1.1rem; } .work-counter strong { color: var(--accent-soft); font-size: 1.6rem; } /* ── Cómo funciona ─────────────────────────────────────────────────────── */ .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 3rem; } @media (max-width: 800px) { .how-steps { grid-template-columns: 1fr; } } .how-step { position: relative; padding: 28px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .how-step .num-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 18px; box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.6); } .how-step h3 { font-size: 1.15rem; margin-bottom: 6px; } .how-step p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } /* ── Elige tu camino (path-chooser bajo el hero) ──────────────────────── */ .path-chooser { padding: clamp(60px, 8vw, 100px) 0; background: radial-gradient(ellipse at 80% 0%, rgba(239, 68, 68, 0.06), transparent 55%), var(--bg); border-bottom: 1px solid var(--border); } .path-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; margin-top: 3rem; } @media (max-width: 1100px) { .path-grid { grid-template-columns: 1fr 1fr; } .path-card-primary { grid-column: 1 / -1; } } @media (max-width: 700px) { .path-grid { grid-template-columns: 1fr; } } .path-card { display: flex; flex-direction: column; padding: 28px; background: rgba(24, 24, 27, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; } .path-card:hover { transform: translateY(-3px); border-color: rgba(239, 68, 68, 0.35); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25); } .path-card-primary { background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.02)), var(--bg-elev); border: 1.5px solid rgba(239, 68, 68, 0.45); } .path-card-primary:hover { border-color: rgba(239, 68, 68, 0.7); } .path-tag { display: inline-block; align-self: flex-start; padding: 5px 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 999px; background: rgba(239, 68, 68, 0.18); color: #fca5a5; margin-bottom: 16px; } .path-tag-secondary { background: rgba(245, 158, 11, 0.16); color: #fcd34d; } .path-tag-tertiary { background: rgba(34, 197, 94, 0.16); color: #86efac; } .path-card h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; margin: 0 0 12px; color: var(--text); } .path-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 18px; } .path-deal { margin-top: auto; padding: 16px 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; } .path-deal-headline { color: var(--text); font-size: 0.96rem; line-height: 1.5; } .path-deal-headline strong { color: #fca5a5; } .path-deal-comparison { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; } .path-deal-mini { margin-top: auto; padding: 12px 16px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 0.92rem; margin-bottom: 16px; } .path-deal-mini strong { color: var(--text); } .path-cta { display: inline-block; font-weight: 700; color: var(--accent-soft); font-size: 0.95rem; transition: transform 0.15s; } .path-card:hover .path-cta { transform: translateX(3px); } .path-footnote { margin-top: 2rem; color: var(--text-muted); font-size: 0.92rem; } .path-footnote a { color: var(--accent-soft); font-weight: 600; } /* ── Bloque "no es 40%, es 60% de lo que no había" (en sección Condiciones) ── */ .deal-reframe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 3rem; } @media (max-width: 900px) { .deal-reframe { grid-template-columns: 1fr; } } .deal-reframe-block { padding: 22px 24px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent-soft); border-radius: var(--radius); } .deal-reframe-icon { font-size: 1.6rem; margin-bottom: 10px; } .deal-reframe-block h3 { font-size: 1.05rem; margin: 0 0 10px; line-height: 1.35; color: var(--text); } .deal-reframe-block h3 em { color: var(--accent-soft); font-style: normal; } .deal-reframe-block p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; } /* ── Condiciones ──────────────────────────────────────────────────────── */ .deal { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .deal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 2.5rem; } @media (max-width: 800px) { .deal-grid { grid-template-columns: 1fr; } } .deal-block { padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); } .deal-block.you { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.2); } .deal-block.me { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); } .deal-block h3 { font-size: 1.1rem; margin-bottom: 12px; } .deal-block ul { list-style: none; padding: 0; margin: 0; } .deal-block li { padding: 8px 0; padding-left: 26px; position: relative; color: var(--text-muted); font-size: 0.95rem; } .deal-block li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 700; } .deal-block.me li::before { color: var(--accent-soft); } .deal-callout { text-align: center; margin-top: 2.5rem; padding: 26px; border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--border-strong); font-size: 1.1rem; } .deal-callout strong { color: var(--accent-soft); } /* ── Prueba social ────────────────────────────────────────────────────── */ .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 3rem; } /* Variante para landings con un solo cliente: card centrada, ancho cómodo. */ .proof-grid-single { grid-template-columns: minmax(0, 560px); justify-content: center; } .proof-card { background: rgba(24, 24, 27, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); padding: 28px; /* Cuando es : el card entero es clicable hacia el canal con sub_confirmation */ display: block; text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } a.proof-card:hover, a.proof-card:focus-visible { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent-glow); text-decoration: none; color: inherit; } a.proof-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .proof-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 16px; background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: var(--accent-soft); font-weight: 600; font-size: 0.92rem; border-radius: var(--radius); transition: background 0.15s ease, color 0.15s ease; } a.proof-card:hover .proof-cta, a.proof-card:focus-visible .proof-cta { background: var(--accent); color: #fff; border-color: var(--accent); } .proof-card .who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .proof-card .avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1.1rem; flex: 0 0 auto; overflow: hidden; } /* Imagen real del cliente cuando el avatar es en vez de
con letra */ img.avatar { object-fit: cover; background: var(--bg-elev-2); /* fallback visible mientras carga */ border: 1px solid var(--border); } .proof-card .who-name { font-weight: 600; } .proof-card .who-niche { font-size: 0.85rem; color: var(--text-dim); } .proof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); } .proof-stat .val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; } .proof-stat .lbl { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; } /* Stat destacada: la cifra más importante (típicamente suscriptores). */ .proof-stat-hero .val { font-size: 2rem; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } .proof-fineprint { font-size: 0.72rem; color: var(--text-dim); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); text-align: center; font-style: italic; } /* ── Calculadora ──────────────────────────────────────────────────────── */ .calc { background: radial-gradient(ellipse at 20% 80%, var(--accent-glow), transparent 50%), var(--bg); } .calc-card { max-width: 720px; margin: 3rem auto 0; padding: 36px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); } .calc-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .calc-row label { color: var(--text-muted); font-size: 0.95rem; min-width: 220px; } .calc-row input[type=range] { flex: 1; min-width: 200px; accent-color: var(--accent); } .calc-row .val { font-weight: 600; min-width: 90px; text-align: right; } .calc-output { margin-top: 28px; padding: 24px; background: var(--bg); border-radius: var(--radius); text-align: center; } .calc-output .small { color: var(--text-dim); font-size: 0.85rem; } .calc-output .big { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--accent-soft); margin: 8px 0; line-height: 1; } .calc-output .disclaimer { color: var(--text-dim); font-size: 0.78rem; margin-top: 10px; } .calc-info { margin-top: 24px; padding: 20px; background: rgba(255, 255, 255, 0.01); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); text-align: left; } .calc-info p { margin: 8px 0; } .calc-info p:first-child { margin-top: 0; } .calc-info p:last-child { margin-bottom: 0; } .calc-info-title { font-weight: 700; color: var(--text); margin-bottom: 12px; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; } .calc-info-badges { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .calc-badge { background: var(--bg-elev-2); border: 1px solid var(--border-strong); padding: 6px 12px; border-radius: 6px; color: var(--text); font-size: 0.82rem; } .calc-badge .dim { color: var(--text-dim); font-size: 0.78rem; } .calc-badge-or { font-size: 0.78rem; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .calc-info-highlight { border-top: 1px dashed var(--border); margin-top: 14px !important; padding-top: 12px; font-size: 0.85rem; } .calc-info-highlight strong { color: var(--accent-soft); } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq-list { margin-top: 2.5rem; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.05rem; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--accent-soft); font-size: 1.5rem; font-weight: 300; transition: transform 0.2s; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { color: var(--text-muted); padding-bottom: 22px; margin: 0; } /* ── CTA final ────────────────────────────────────────────────────────── */ .cta-final { text-align: center; background: radial-gradient(ellipse at 50% 50%, var(--accent-glow), transparent 70%), var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cta-final h2 { max-width: 16ch; margin-left: auto; margin-right: auto; } .cta-final .lead { margin-left: auto; margin-right: auto; } .cta-final .hero-actions { justify-content: center; } /* ── Footer ──────────────────────────────────────────────────────────── */ footer { padding: 40px var(--gutter); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--text-dim); max-width: var(--maxw); margin: 0 auto; } footer a:hover { color: var(--text); } /* ── Tech detail (página secundaria) ──────────────────────────────────── */ .tech-toc { position: sticky; top: 80px; padding: 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; } .tech-toc h4, .tech-toc .tech-toc-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 12px; font-weight: 700; } .tech-toc a { display: block; padding: 6px 0; color: var(--text-muted); border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px; transition: color 0.15s, border-color 0.15s; } .tech-toc a:hover, .tech-toc a.active { color: var(--text); border-left-color: var(--accent-soft); } .tech-content { display: grid; grid-template-columns: 240px 1fr; gap: 50px; } @media (max-width: 860px) { .tech-content { grid-template-columns: 1fr; } .tech-toc { position: static; } } .tech-content article h3 { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--border); } .tech-content article h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .tech-content article p { color: var(--text-muted); max-width: 65ch; line-height: 1.7; } .tech-content article code { background: var(--bg-elev); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; color: var(--accent-soft); } .tech-content article ul li { color: var(--text-muted); margin-bottom: 6px; } /* ── Tabla de reparto de ingresos (en sección Condiciones) ───────────── */ .revenue-split { margin-top: 3rem; padding: 32px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); } .revenue-split-title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 4px; } .revenue-split-sub { color: var(--text-muted); margin-bottom: 1.8rem; } .revenue-table { width: 100%; border-collapse: collapse; } .revenue-table th, .revenue-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--border); } .revenue-table th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .revenue-table th:nth-child(2), .revenue-table th:nth-child(3), .revenue-table td:nth-child(2), .revenue-table td:nth-child(3) { text-align: center; width: 110px; font-weight: 600; } .revenue-table tr.ours { background: linear-gradient(90deg, rgba(220, 38, 38, 0.05), transparent); } .revenue-table tr.ours td:nth-child(3) { color: var(--accent-soft); } .revenue-table tr:not(.ours) td:nth-child(2) { color: var(--green); } .revenue-table tr:not(.ours) td:nth-child(3) { color: var(--text-dim); } .revenue-table .rt-sub { display: block; color: var(--text-dim); font-size: 0.82rem; font-weight: 400; margin-top: 3px; } .revenue-split-foot { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; } @media (max-width: 600px) { .revenue-table th, .revenue-table td { padding: 10px 6px; font-size: 0.88rem; } .revenue-table th:nth-child(2), .revenue-table th:nth-child(3), .revenue-table td:nth-child(2), .revenue-table td:nth-child(3) { width: 60px; } .revenue-table .rt-sub { display: none; } } /* ── Sección "Foco: vídeos largos" ──────────────────────────────────── */ .focus { background: linear-gradient(180deg, var(--bg-elev), var(--bg)); } .focus-lead-center { margin-left: auto; margin-right: auto; } .focus-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; margin-top: 3rem; } .focus-flow-step { padding: 28px 22px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .focus-flow-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #7f1d1d); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 16px; box-shadow: 0 8px 24px -8px rgba(220, 38, 38, 0.45); } .focus-flow-step h3 { font-size: 1.05rem; margin-bottom: 6px; } .focus-flow-step p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .focus-flow-arrow { display: flex; align-items: center; font-size: 1.6rem; color: var(--text-dim); font-weight: 300; } @media (max-width: 900px) { .focus-flow { grid-template-columns: 1fr; } .focus-flow-arrow { display: none; } } .focus-callout { margin-top: 3rem; padding: 26px; background: var(--bg-elev-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; font-size: 1.05rem; line-height: 1.7; } /* ── Sección Premium: producción profesional ────────────────────────── */ .premium-prod { background: radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.10), transparent 55%), var(--bg); position: relative; } .premium-tag-large { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.35) !important; } .premium-lead-center { margin-left: auto; margin-right: auto; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 3rem; } /* Variante 2 columnas (cuando hay sólo dos planes — p.ej. Backup Anual/Mensual). Centrada y con un ancho cómodo. */ .pricing-grid-2 { grid-template-columns: 1fr 1fr; max-width: 880px; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-grid-2 { grid-template-columns: 1fr; } } .pricing-card { position: relative; padding: 32px 26px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; } .pricing-card.featured { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), var(--bg-elev)); transform: translateY(-6px); } .pricing-card-ribbon { position: absolute; top: -12px; right: 20px; padding: 5px 14px; background: #f59e0b; color: #0a0a0a; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 4px 16px -2px rgba(245, 158, 11, 0.5); } .pricing-card-header { padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .pricing-card-tag { display: inline-block; padding: 4px 12px; background: var(--bg-elev-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; color: var(--text-dim); margin-bottom: 14px; } .pricing-card.featured .pricing-card-tag { color: #fcd34d; background: rgba(245, 158, 11, 0.16); } .pricing-card-price { display: flex; align-items: baseline; gap: 6px; line-height: 1; } .ppr-amount { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; } .ppr-unit { color: var(--text-dim); font-size: 0.92rem; } .pricing-card-meta { color: var(--text-muted); font-size: 0.88rem; margin-top: 8px; } .pricing-card-list { list-style: none; padding: 0; margin: 0; flex: 1; } .pricing-card-list li { padding: 8px 0 8px 28px; position: relative; font-size: 0.93rem; color: var(--text-muted); } .pricing-card-list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 700; } .pricing-card.featured .pricing-card-list li::before { color: #f59e0b; } .premium-meta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 2.2rem; } @media (max-width: 700px) { .premium-meta-row { grid-template-columns: 1fr; } } .premium-meta-item { padding: 18px 22px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .premium-meta-item strong { display: block; font-size: 0.95rem; margin-bottom: 4px; } .premium-meta-item span { color: var(--text-muted); font-size: 0.88rem; } .premium-clarification { margin-top: 2rem; display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: var(--radius); } .premium-clar-icon { font-size: 1.5rem; flex: 0 0 auto; } .premium-clar-body { color: var(--text-muted); font-size: 0.95rem; } .premium-clar-body strong { color: var(--text); } .premium-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; } /* ── Teaser Vertical Premium (en index.html, antes de "Cómo funciona") ── */ .teaser-premium { padding: clamp(50px, 7vw, 90px) 0; background: radial-gradient(ellipse at 20% 50%, rgba(245, 158, 11, 0.10), transparent 55%), var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .teaser-premium-inner { max-width: 880px; } .teaser-premium-text h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 16px; } .teaser-premium-text .lead { margin-bottom: 1.8rem; } .teaser-premium-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Tarjetas de verticales (index.html · 3 caminos) ──────────────────── */ .verticals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; } @media (max-width: 880px) { .verticals-grid { grid-template-columns: 1fr; } } .vertical-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; } .vertical-card:hover { border-color: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18); } .vertical-tag { font-size: 0.72rem; font-weight: 700; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.08em; } .vertical-card h3 { font-size: 1.15rem; margin: 4px 0 2px; color: var(--text); } .vertical-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; } .vertical-cta { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--text); font-size: 0.9rem; } /* ── Teaser banners al final de las landings verticales ─────────────── */ .vertical-teaser { display: block; padding: 22px 26px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .vertical-teaser:hover { border-color: var(--accent-soft); transform: translateY(-1px); } .vertical-teaser .vt-eyebrow { font-size: 0.7rem; font-weight: 700; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.08em; } .vertical-teaser .vt-title { font-size: 1.15rem; margin: 6px 0 6px; font-weight: 700; color: var(--text); } .vertical-teaser p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; } .vertical-teaser .vt-cta { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--text); font-size: 0.92rem; } .vertical-teasers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 960px; margin: 0 auto; } @media (max-width: 780px) { .vertical-teasers-grid { grid-template-columns: 1fr; } } .nav-client { color: var(--accent-soft) !important; } /* Hero — sub-lead style (secondary paragraph) */ .hero-sub-lead { margin-top: 1rem !important; font-size: 1rem !important; color: var(--text-dim) !important; } /* ── Sección "Pack Vídeo Largo" (long-form-specific) ──────────────────── */ .longform { background: radial-gradient(ellipse at 20% 20%, rgba(220, 38, 38, 0.10), transparent 55%), var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } .longform-eyebrow { background: rgba(220, 38, 38, 0.15) !important; border-color: rgba(220, 38, 38, 0.35) !important; } .longform-lead-center { margin-left: auto; margin-right: auto; } .longform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 3rem; } @media (max-width: 780px) { .longform-grid { grid-template-columns: 1fr; } } .longform-card { padding: 28px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color 0.2s, transform 0.2s; } .longform-card:hover { border-color: rgba(220, 38, 38, 0.45); transform: translateY(-3px); } .longform-card .longform-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #7f1d1d); display: flex; align-items: center; justify-content: center; font-size: 1.65rem; margin-bottom: 18px; box-shadow: 0 8px 24px -8px rgba(220, 38, 38, 0.5); } .longform-card h4 { font-size: 1.15rem; margin-bottom: 8px; } .longform-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } .longform-callout { margin-top: 3rem; padding: 28px 32px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .longform-callout p { color: var(--text-muted); font-size: 1rem; margin: 0 0 14px 0; } .longform-callout p:last-child { margin-bottom: 0; } .longform-callout-fineprint { padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.9rem !important; color: var(--text-dim) !important; } .longform-callout-fineprint strong { color: var(--text-muted); } .longform-cta-row { display: flex; justify-content: center; margin-top: 2.5rem; } /* ── Landing principal (de-tiktok-instagram-a-youtube) ───────────────── */ /* Sección "Por qué ahora" — dato YouTube */ .why-now { padding: clamp(50px, 7vw, 90px) 0; background: radial-gradient(ellipse at 80% 50%, rgba(220, 38, 38, 0.10), transparent 60%), var(--bg); } .why-now-inner { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: center; } @media (max-width: 800px) { .why-now-inner { grid-template-columns: 1fr; gap: 30px; } } .why-now-stat { padding: 32px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-align: center; } .why-now-big { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.2; color: var(--accent-soft); } .why-now-big strong { color: var(--text); } .why-now-sub { color: var(--text-dim); font-size: 0.88rem; margin-top: 10px; } .why-now-text h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 16px; } .why-now-text p { color: var(--text-muted); margin: 0; } /* Sección flujo del servicio */ .flow-section { padding: clamp(60px, 9vw, 120px) 0; background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 3rem; } @media (max-width: 880px) { .flow-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } } .flow-step { padding: 26px 22px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); position: relative; } .flow-step:hover { border-color: rgba(220, 38, 38, 0.4); } .flow-num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-soft); margin-bottom: 12px; } .flow-step h3 { font-size: 1.05rem; margin-bottom: 8px; } .flow-step p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } /* ── Landing principal — heredados ───────────────────────────────────── */ .landing-hero { padding-bottom: clamp(50px, 7vw, 90px); } .landing-hero .hero-fineprint { margin-top: 1.5rem; font-size: 0.9rem; } /* ════════════════════════════════════════════════════════════════════ HERO PARTIDO + PANEL TEMÁTICO (landings internas) Copy a la izquierda, panel visual a la derecha. Cada landing rellena el panel con un visual propio de su servicio (rompe la monotonía sin perder el sistema). El hero de la home usa su propio bloque inline. ════════════════════════════════════════════════════════════════════ */ .hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); } .hero-split .hero-copy { min-width: 0; } .hero-split .hero-copy h1 { max-width: 18ch; } .hero-split .hero-copy .lead { max-width: 560px; } .hero-visual { min-width: 0; display: flex; justify-content: center; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 34px; } .hero-split .hero-copy h1 { max-width: 22ch; } .hero-visual { order: 2; } } /* Panel base (cristal premium) */ .hero-panel { position: relative; width: 100%; max-width: 420px; background: linear-gradient(165deg, rgba(32,32,37,0.92), rgba(15,15,18,0.94)); border: 1px solid var(--border-strong); border-radius: 22px; padding: 24px; box-shadow: 0 44px 90px -42px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } .hero-panel:hover { transform: translateY(-4px); box-shadow: 0 54px 110px -42px rgba(0,0,0,.95), 0 0 0 1px rgba(220,38,38,.22); } .hp-glow { position: absolute; top: -45%; right: -28%; width: 72%; height: 86%; pointer-events: none; background: radial-gradient(circle, rgba(220,38,38,.22), transparent 70%); } .hp-head { position: relative; display: flex; align-items: center; gap: 13px; margin-bottom: 20px; } .hp-icon { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--accent-soft); background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.25); } .hp-icon svg { width: 24px; height: 24px; } .hp-title { font-weight: 700; font-size: 1.04rem; color: var(--text); line-height: 1.2; } .hp-sub { font-size: .78rem; color: var(--text-dim); margin-top: 3px; } /* Lista de beneficios (genérica, reutilizable) */ .hp-list { position: relative; display: flex; flex-direction: column; gap: 11px; } .hp-row { display: flex; align-items: flex-start; gap: 11px; } .hp-check { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.14); color: #4ade80; } .hp-check svg { width: 12px; height: 12px; } .hp-row-txt { font-size: .9rem; color: var(--text-muted); line-height: 1.4; } .hp-row-txt strong { color: var(--text); font-weight: 600; } /* Chips de datos (precio / entrega / garantía) */ .hp-facts { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .hp-fact { font-size: .76rem; color: var(--text-muted); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; } .hp-fact strong { color: var(--accent-soft); font-weight: 700; } /* Visual: FLUJO (de-tiktok) — chips origen → YouTube */ .hp-flow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 2px 0 18px; } .hp-flow-src { display: flex; gap: 10px; } .hpf-chip { font-size: .82rem; font-weight: 600; color: var(--text); padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); } .hp-flow-arrow { color: var(--accent-soft); display: flex; } .hpf-yt { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: #fff; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); box-shadow: 0 10px 24px -10px rgba(220,38,38,.7); } .hpf-yt svg { width: 18px; height: 18px; } /* Visual: GRID4 (servicios-youtube) — 4 mini-tiles de servicio */ .hp-grid4 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 2px 0 4px; } .hpg-tile { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); } .hpg-tile svg { width: 19px; height: 19px; color: var(--accent-soft); flex-shrink: 0; } .hpg-tile span { font-size: .81rem; color: var(--text); font-weight: 600; line-height: 1.15; } /* Visual: CALENDARIO (mantenimiento) — días marcados = publica/trabaja */ .hp-cal { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 2px 0 4px; } .hpc-day { aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid var(--border); } .hpc-day.on { background: linear-gradient(135deg, var(--accent-soft), var(--accent)); border-color: transparent; box-shadow: 0 4px 12px -4px rgba(220,38,38,.6); } /* Visual: TOGGLES (setup) — ajustes activados */ .hp-toggles { position: relative; display: flex; flex-direction: column; gap: 11px; margin: 2px 0 4px; } .hpt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hpt-label { font-size: .88rem; color: var(--text); } .hpt-sw { width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0; position: relative; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); } .hpt-sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } /* Visual: FAN-OUT (reaprovechamiento) — 1 largo → varios Shorts */ .hp-fan { position: relative; display: flex; align-items: center; gap: 13px; margin: 2px 0 4px; } .hpfan-long { width: 62px; height: 62px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); } .hpfan-long svg { width: 26px; height: 26px; } .hp-fan-arrow { color: var(--accent-soft); flex-shrink: 0; } .hpfan-shorts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; flex: 1; } .hpfan-short { height: 26px; border-radius: 7px; background: linear-gradient(135deg, rgba(220,38,38,.5), rgba(220,38,38,.18)); border: 1px solid rgba(220,38,38,.3); } /* Visual: TIMELINE (edición) — pista de clips + playhead */ .hp-timeline { position: relative; margin: 2px 0 4px; } .hptl-track { display: flex; gap: 5px; height: 34px; } .hptl-clip { border-radius: 5px; background: linear-gradient(180deg, rgba(220,38,38,.5), rgba(220,38,38,.2)); border: 1px solid rgba(220,38,38,.3); } .hptl-bar { margin-top: 9px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); position: relative; } .hptl-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); } .hptl-bar::before { content: ""; position: absolute; left: 62%; top: -3px; width: 2px; height: 12px; background: #fff; border-radius: 2px; } /* Visual: STACK (backup) — copias apiladas + sello protegido */ .hp-stack { position: relative; display: flex; align-items: center; gap: 16px; margin: 2px 0 4px; } .hpst-files { position: relative; width: 70px; height: 60px; flex-shrink: 0; } .hpst-files i { position: absolute; width: 50px; height: 38px; border-radius: 8px; border: 1px solid var(--border-strong); } .hpst-files i:nth-child(1) { top: 0; left: 0; background: rgba(255,255,255,.05); } .hpst-files i:nth-child(2) { top: 9px; left: 9px; background: rgba(255,255,255,.07); } .hpst-files i:nth-child(3) { top: 18px; left: 18px; background: rgba(255,255,255,.10); } .hpst-badge { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.14); color: #4ade80; border: 1px solid rgba(34,197,94,.35); } .hpst-badge svg { width: 24px; height: 24px; } .hpst-txt { font-size: .9rem; color: var(--text); font-weight: 600; line-height: 1.3; } /* Visual: IDENTIDAD (canales-suplantados) — verificado vs impostor */ .hp-id { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; } .hpid-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); } .hpid-row.ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.28); } .hpid-row.bad { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.28); } .hpid-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #52525b, #27272a); } .hpid-row.ok .hpid-av { background: linear-gradient(135deg, #34d399, #059669); } .hpid-name { font-size: .85rem; color: var(--text); font-weight: 600; flex: 1; } .hpid-row.bad .hpid-name { text-decoration: line-through; opacity: .65; } .hpid-tag { font-size: .72rem; font-weight: 700; white-space: nowrap; } .hpid-row.ok .hpid-tag { color: #4ade80; } .hpid-row.bad .hpid-tag { color: var(--accent-soft); } /* Visual: FÓRMULA (calculadora) — visitas × RPM ÷ 1.000 = € */ .hp-formula { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 6px; } .hpfm-eq { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; } .hpfm-tok { font-size: .78rem; font-weight: 600; color: var(--text); padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); } .hpfm-op { color: var(--text-dim); font-size: .92rem; } .hpfm-res { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--accent-soft); line-height: 1; } .hpfm-res small { font-size: .9rem; color: var(--text-muted); font-weight: 500; } @media (prefers-reduced-motion: reduce) { .hero-panel { transition: none; } } .forget { padding: clamp(60px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--bg), var(--bg-elev)); } .forget-lead-center { margin-left: auto; margin-right: auto; } .forget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; } @media (max-width: 880px) { .forget-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .forget-grid { grid-template-columns: 1fr; } } .forget-card { padding: 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); position: relative; } .forget-card .forget-icon { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: rgba(220, 38, 38, 0.14); color: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; } .forget-card h3 { font-size: 1.05rem; margin: 0 0 6px 0; padding-right: 44px; } .forget-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .forget-cta { margin-top: 3.5rem; padding: 36px; background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-align: center; } .forget-cta h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; } .forget-yes { max-width: 720px; margin-left: auto; margin-right: auto; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--text); } /* Bloque "Independiente del 50/50" */ .independent-block { padding: clamp(40px, 6vw, 80px) 0; background: var(--bg); } .independent-card { display: flex; gap: 32px; padding: 36px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); align-items: flex-start; } @media (max-width: 720px) { .independent-card { flex-direction: column; padding: 26px; } } .independent-icon { flex: 0 0 auto; font-size: 2.4rem; width: 72px; height: 72px; border-radius: 18px; background: rgba(59, 130, 246, 0.10); display: flex; align-items: center; justify-content: center; } .independent-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 12px; } .independent-body p { color: var(--text-muted); margin-bottom: 14px; } .independent-body ul { list-style: none; padding: 0; margin: 16px 0; } .independent-body ul li { padding: 10px 0 10px 28px; position: relative; color: var(--text-muted); } .independent-body ul li::before { content: "→"; position: absolute; left: 0; top: 10px; color: var(--accent-soft); font-weight: 700; } .footer-contact-line { margin-top: 2rem; font-size: 0.88rem; } /* ── Página método (como-funciona.html) ───────────────────────────────── */ .method-hero { padding: 120px 0 60px 0; } .method-section { padding-top: 0; } .method-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } /* Bloque "Lecturas relacionadas" al final del método. */ .method-related { margin-top: 3rem; padding: 24px 28px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .method-related h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 0 0 14px; } .method-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .method-related li { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; padding-left: 18px; position: relative; } .method-related li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--accent-soft); font-weight: 700; } .method-related a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; } .method-related a:hover { border-bottom-color: var(--accent-soft); } .tech-content article h3.method-sub { margin-top: 1.8em; margin-bottom: 0.4em; font-size: 1.05rem; color: var(--text); font-weight: 600; } .method-quote { margin-top: 1.5rem; padding: 18px 22px; background: rgba(220, 38, 38, 0.06); border-left: 3px solid var(--accent-soft); border-radius: 6px; color: var(--text) !important; font-size: 1rem; } /* ── Footer brand ──────────────────────────────────────────────────────── */ .footer-brand { color: var(--text); } .footer-brand-accent { color: var(--accent-soft); } /* ── Animación entrada (intersection observer en JS) ──────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } /* Seguridad: con movimiento reducido, mostrar SIEMPRE (sin depender del JS). */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* Las pricing "featured" mantienen su elevación permanente tras revelarse (si no, .reveal.visible{transform:none} las aplanaría). */ .pricing-card.featured.reveal.visible { transform: translateY(-6px); } @media (max-width: 720px) { .pricing-card.featured.reveal.visible { transform: none; } } /* ── Entrada del hero (CSS puro, sin depender de JS · seguro con reduced-motion) ── No animamos el

a propósito: es el elemento LCP y debe pintar al instante. */ @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .hero .eyebrow { animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.00s both; } .hero .lead { animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both; } .hero .hero-actions { animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both; } .hero .hero-meta { animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s both; } /* ── Utilidades ──────────────────────────────────────────────────────── */ .center { text-align: center; } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } .spacer-sm { height: 12px; } .spacer { height: 24px; } /* ── Accesibilidad: oculto visualmente pero leído por screen readers ─── */ .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; } /* ── Accesibilidad: skip-to-content ──────────────────────────────────── */ .skip-link { position: absolute; top: -100px; left: 0; z-index: 9999; padding: 12px 20px; background: var(--accent, #ec4899); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; transition: top 0.2s ease; } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid var(--text, #fafafa); outline-offset: 2px; } /* Mejora focus-visible global (accesibilidad teclado) */ :focus-visible { outline: 2px solid var(--accent, #ec4899); outline-offset: 3px; border-radius: 4px; } /* Respeta usuarios que prefieren menos animaciones */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Movido desde index.html: bloque de facturación legal ─────────── */ .legal-billing { margin-top: 3rem; display: flex; gap: 28px; align-items: flex-start; padding: 32px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), var(--bg-elev)); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius-lg); } @media (max-width: 700px) { .legal-billing { flex-direction: column; padding: 24px; } } .legal-billing-icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; background: rgba(16, 185, 129, 0.18); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 2rem; } .legal-billing-body { flex: 1; min-width: 0; } .legal-billing-body h3 { margin-bottom: 12px; font-size: clamp(1.2rem, 2.2vw, 1.55rem); } .legal-billing-body > p { color: var(--text-muted); margin-bottom: 18px; } .legal-billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } @media (max-width: 600px) { .legal-billing-grid { grid-template-columns: 1fr; } } .legal-pill { padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .legal-pill-strong { color: var(--text); font-weight: 600; } .legal-pill span:nth-child(2) { color: var(--text-dim); font-size: 0.85rem; } .legal-billing-fineprint { padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.88rem; margin-bottom: 0; } .legal-billing-fineprint strong { color: var(--text-muted); } /* ── Movido desde index.html: bloque de privacidad ────────────────── */ .privacy { background: linear-gradient(180deg, var(--bg-elev), var(--bg)); } .privacy-lead-center { margin-left: auto; margin-right: auto; } .privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 3rem; } @media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; } } .privacy-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .privacy-card.premium { border-color: rgba(245, 158, 11, 0.3); background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), var(--bg-elev)); } .privacy-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-elev-2); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; } .privacy-icon.green { background: rgba(16, 185, 129, 0.14); } .privacy-icon.amber { background: rgba(245, 158, 11, 0.14); } .privacy-card h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .premium-tag { display: inline-block; padding: 3px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 999px; background: rgba(245, 158, 11, 0.08); } .privacy-card p { color: var(--text-muted); margin-bottom: 12px; font-size: 0.95rem; } .privacy-mini { font-size: 0.85rem !important; color: var(--text-dim) !important; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 16px; } .privacy-mini strong { color: var(--text-muted); } /* ── Utilidades reutilizables (sustituyen styles inline previos) ────── */ .lead-center { margin-left: auto; margin-right: auto; } .section-narrow { max-width: 860px; } .cta-meta { margin-top: 2rem; font-size: 0.88rem; } .proof-note { margin: 0 0 18px 0; } .no-margin { margin: 0; } .avatar-mari { background: linear-gradient(135deg, #8b5cf6, #4c1d95); } .avatar-esther { background: linear-gradient(135deg, #ec4899, #831843); } .text-green { color: var(--green); } .u-text-center { text-align: center; } /* ── Variante clicable de privacy-card (link a vertical Backup) ── */ .privacy-card-link { display: block; text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .privacy-card-link:hover { transform: translateY(-2px); border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 12px 30px rgba(245, 158, 11, 0.10); } .privacy-card-cta { display: inline-block; margin-top: 6px; color: var(--accent-soft); font-weight: 600; font-size: 0.92rem; transition: transform 0.15s; } .privacy-card-link:hover .privacy-card-cta { transform: translateX(2px); } /* ── Audience selector (¿esto es para ti?) ─────────────────────────────── */ .audience { padding: clamp(60px, 8vw, 100px) 0; background: linear-gradient(180deg, var(--bg-elev), var(--bg)); } .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 2.5rem; } @media (max-width: 800px) { .audience-grid { grid-template-columns: 1fr; } } .audience-card { padding: 32px 28px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); } .audience-card.audience-fit { border-color: rgba(16, 185, 129, 0.35); background: linear-gradient(160deg, rgba(16, 185, 129, 0.06), var(--bg-elev)); } .audience-card.audience-misfit { border-color: rgba(251, 191, 36, 0.25); } .audience-icon { font-size: 2.2rem; margin-bottom: 14px; } .audience-card h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 0 0 18px; color: var(--text); } .audience-card ul { margin: 0; padding: 0; list-style: none; } .audience-card li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px dashed var(--border); color: var(--text-muted); font-size: 0.96rem; line-height: 1.55; } .audience-card li:last-child { border-bottom: 0; } .audience-card.audience-fit li::before { content: "✓"; position: absolute; left: 0; top: 10px; color: var(--green); font-weight: 700; font-size: 1.05rem; } .audience-card.audience-misfit li::before { content: "—"; position: absolute; left: 0; top: 10px; color: var(--amber); font-weight: 700; } .audience-card li strong { color: var(--text); } .audience-note { margin-top: 2.2rem; color: var(--text-muted); font-size: 0.95rem; } .audience-note a { color: var(--accent-soft); } /* ════════════════════════════════════════════════════════════════════════ PÁGINAS LEGALES ════════════════════════════════════════════════════════════════════════ */ .legal-page { padding: clamp(40px, 6vw, 90px) 0 80px; } .legal-container { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (max-width: 900px) { .legal-container { grid-template-columns: 1fr; } } /* Índice lateral */ .legal-toc { position: sticky; top: 90px; padding: 22px 22px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } @media (max-width: 900px) { .legal-toc { position: static; } } .legal-toc-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .legal-toc ul { list-style: none; padding: 0; margin: 0; } .legal-toc li { margin: 0; } .legal-toc li + li { margin-top: 2px; } .legal-toc a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .legal-toc a:hover { background: var(--bg-elev-2); color: var(--text); } .legal-toc a.active { background: rgba(220, 38, 38, 0.12); color: var(--text); font-weight: 600; } /* Artículo legal */ .legal-article { min-width: 0; max-width: 760px; color: var(--text); } .legal-article-header { padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--border); } .legal-article-header .eyebrow { display: inline-block; margin-bottom: 14px; } .legal-article h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin: 0 0 14px; line-height: 1.15; } .legal-updated { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 22px; } .legal-summary { padding: 18px 22px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.22); border-radius: var(--radius); font-size: 0.96rem; color: var(--text-muted); margin: 0; } .legal-summary strong { color: var(--text); } .legal-article section { margin-bottom: 42px; } .legal-article h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 700; margin: 0 0 18px; padding-top: 8px; color: var(--text); } .legal-article h3 { font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 700; margin: 28px 0 12px; color: var(--text); } .legal-article p, .legal-article li { color: var(--text-muted); font-size: 1rem; line-height: 1.65; } .legal-article p { margin: 0 0 14px; } .legal-article ul, .legal-article ol { margin: 0 0 18px; padding-left: 22px; } .legal-article li { margin: 0 0 8px; } .legal-article li > ul, .legal-article li > ol { margin: 8px 0 8px; } .legal-article strong { color: var(--text); } .legal-article em { color: var(--text-muted); font-style: italic; } .legal-article a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; } .legal-article a:hover { color: var(--text); } .legal-article code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; padding: 2px 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; color: var(--text); } .legal-article .legal-identity { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; list-style: none; padding-left: 22px; } .legal-article .legal-identity li { padding: 6px 0; border-bottom: 1px dashed var(--border); } .legal-article .legal-identity li:last-child { border-bottom: 0; } /* Tablas legales */ .legal-table { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 18px; font-size: 0.92rem; } .legal-table thead { background: var(--bg-elev-2); } .legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-muted); } .legal-table th { color: var(--text); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } .legal-table tr:last-child td { border-bottom: 0; } @media (max-width: 720px) { .legal-table { display: block; overflow-x: auto; } } /* Botón estilo enlace (para abrir el modal de cookies) */ .link-button { background: transparent; border: 0; padding: 0; font: inherit; color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link-button:hover { color: var(--text); } /* Footer legal links */ .footer-legal { font-size: 0.88rem; } .footer-legal a { color: var(--text-dim); text-decoration: none; margin: 0 2px; } .footer-legal a:hover { color: var(--text); } .footer-legal-tag { display: inline-block; margin-top: 4px; color: var(--text-dim); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.02em; } /* ════════════════════════════════════════════════════════════════════════ BANNER DE CONSENTIMIENTO DE COOKIES ════════════════════════════════════════════════════════════════════════ */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 720px; margin: 0 auto; padding: 22px 24px; background: rgba(24, 24, 27, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); display: none; flex-direction: column; gap: 16px; color: var(--text); } .cookie-banner.is-visible { display: flex; } .cookie-banner-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text); } .cookie-banner-body { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; } .cookie-banner-body a { color: var(--accent-soft); } .cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .cookie-banner-actions .btn { font-size: 0.9rem; padding: 10px 18px; } .cookie-banner .btn-tertiary { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; } .cookie-banner .btn-tertiary:hover { color: var(--text); background: var(--bg-elev-2); } /* Modal de configuración granular */ .cookie-modal { position: fixed; inset: 0; z-index: 1010; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cookie-modal.is-visible { display: flex; } .cookie-modal-dialog { width: 100%; max-width: 560px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 28px; color: var(--text); max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65); } .cookie-modal-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; } .cookie-modal-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--border); } .cookie-modal-row:first-of-type { border-top: 0; } .cookie-modal-row .meta { flex: 1; min-width: 0; } .cookie-modal-row .meta strong { display: block; margin-bottom: 4px; color: var(--text); } .cookie-modal-row .meta span { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; } /* Toggle */ .toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .slider { position: absolute; inset: 0; background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .toggle .slider::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--text); border-radius: 50%; transition: left 0.2s ease; } .toggle input:checked + .slider { background: var(--green); border-color: var(--green); } .toggle input:checked + .slider::before { left: 24px; } .toggle input:disabled + .slider { opacity: 0.55; cursor: not-allowed; } .cookie-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 22px; } .cookie-modal-actions .btn { font-size: 0.9rem; padding: 10px 18px; } @media (max-width: 520px) { .cookie-banner { padding: 18px; } .cookie-banner-actions { flex-direction: column; align-items: stretch; } .cookie-banner-actions .btn, .cookie-banner .btn-tertiary { width: 100%; text-align: center; } } /* ════════════════════════════════════════════════════════════════════════ MOBILE TUNING (≤ 720 px) — afinado fino para que el sitio se sienta "diseñado para móvil", no "encogido". 80% de tráfico viene de aquí. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Tipografía hero — más comedida en pantallas estrechas */ h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .hero h1 { max-width: 100%; } .lead { font-size: 1.02rem; line-height: 1.6; } .hero .lead { font-size: 1.05rem; } /* CTAs grandes ocupan ancho completo (más fácil de pulsar) */ .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .btn { width: 100%; justify-content: center; } .btn-large { padding: 16px 22px; font-size: 1rem; } /* Hero-meta: que no se rompa fea */ .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.82rem; } /* Form inputs grandes y sin zoom iOS */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select { font-size: 16px; /* iOS no hace zoom si >= 16px */ min-height: 48px; } textarea { min-height: 96px; } /* Footer: no que el texto quede pegado */ footer { flex-direction: column; align-items: flex-start; gap: 14px; } .footer-legal { line-height: 1.9; } /* Section padding más comedida */ section { padding: clamp(48px, 11vw, 80px) 0; } /* Calc card: que los ranges respiren */ .calc-card { padding: 22px; } .calc-row { gap: 12px; } .calc-row label { min-width: 100%; } .calc-row .val { min-width: 0; text-align: left; } /* Tarjetas pricing: padding más comedido */ .pricing-card { padding: 24px 20px; } .pricing-card.featured { transform: none; } /* Bloques inline grandes (banners hero-style) — más respiración */ .independent-card { padding: 22px !important; } .legal-billing { padding: 22px; gap: 18px; } /* Tabla de reparto: ya tiene su tuning a 600 px, reforzamos */ .revenue-split { padding: 22px 18px; } /* Cookie banner — más ajustado al ancho */ .cookie-banner { left: 12px; right: 12px; bottom: 12px; } } /* ════════════════════════════════════════════════════════════════════════ MOBILE EXTREMO (≤ 380 px) — iPhone SE y similares ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 380px) { :root { --gutter: 16px; } h1 { font-size: clamp(1.8rem, 10vw, 2.2rem); letter-spacing: -0.015em; } h2 { font-size: clamp(1.5rem, 7vw, 2rem); } .eyebrow { font-size: 0.72rem; padding: 3px 10px; } } /* ── Comparativa: Republicar vs Crecer ────────────────────────────────── */ .compare-section { background: var(--bg); border-top: 1px solid var(--border); padding: 80px 0; } /* Dashboard de Auditoría */ .audit-dashboard { background: rgba(24, 24, 27, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); margin: 3rem auto 4rem; max-width: 900px; overflow: hidden; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 60px rgba(239, 68, 68, 0.02); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .audit-title-bar { background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 8px; } .audit-dot { width: 10px; height: 10px; border-radius: 50%; } .audit-dot.red { background: #ef4444; } .audit-dot.yellow { background: #f59e0b; } .audit-dot.green { background: #10b981; } .audit-title-text { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-left: 6px; } .audit-grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 800px) { .audit-grid { grid-template-columns: 1fr; } } .audit-card { padding: 36px; display: flex; flex-direction: column; gap: 22px; } .audit-card.state-poor { background: linear-gradient(180deg, rgba(239, 68, 68, 0.015) 0%, transparent 100%); } .audit-card.state-good { background: linear-gradient(180deg, rgba(16, 185, 129, 0.02) 0%, transparent 100%); border-left: 1px solid var(--border); } @media (max-width: 800px) { .audit-card.state-good { border-left: none; border-top: 1px solid var(--border); } } .audit-card-badge { display: inline-flex; padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; align-self: flex-start; text-transform: uppercase; letter-spacing: 0.03em; } .audit-card-badge.text-red { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.18); } .audit-card-badge.text-green { background: rgba(16, 185, 129, 0.12); color: #a7f3d0; border: 1px solid rgba(16, 185, 129, 0.22); box-shadow: 0 0 15px rgba(16, 185, 129, 0.08); } .audit-metric-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; } .metric-label { font-size: 0.95rem; color: var(--text-muted); } .metric-value { font-size: 1.3rem; font-weight: 800; } .metric-value .metric-desc { font-size: 0.72rem; font-weight: 600; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .metric-value.text-red { color: #fca5a5; } .metric-value.text-green { color: #34d399; } .metric-progress-bg { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.04); border-radius: 3px; overflow: hidden; margin-top: -6px; } .metric-progress-bar { height: 100%; border-radius: 3px; } .metric-progress-bar.bg-red { background: #dc2626; } .metric-progress-bar.bg-green { background: #10b981; box-shadow: 0 0 8px #10b981; } .audit-details { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; } .audit-detail-item { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; } .audit-detail-item .detail-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; } .audit-detail-item span { color: var(--text-muted); } .audit-detail-item strong { color: var(--text); } /* Compare Grid */ .compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; } @media (max-width: 800px) { .compare-grid { grid-template-columns: 1fr; gap: 24px; } } .compare-column { padding: 36px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); transition: border-color 0.25s, box-shadow 0.25s; } .compare-column.compare-left { border-top: 3px solid var(--text-dim); } .compare-column.compare-right { border-top: 3px solid var(--accent-soft); background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(220, 38, 38, 0.015) 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .compare-column:hover { border-color: rgba(255, 255, 255, 0.15); } .compare-column.compare-right:hover { border-color: rgba(239, 68, 68, 0.25); box-shadow: 0 15px 35px rgba(220, 38, 38, 0.06); } .compare-column h3 { font-size: 1.3rem; margin: 0 0 8px; font-weight: 800; color: var(--text); } .compare-desc { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 24px; line-height: 1.45; } .compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .compare-list li { position: relative; padding-left: 20px; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); } .compare-left .compare-list li::before { content: "•"; position: absolute; left: 0; color: var(--text-dim); font-size: 1.2rem; line-height: 1; top: 1px; } .compare-right .compare-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: bold; font-size: 0.95rem; line-height: 1.35; top: 1px; } .compare-list li strong { color: var(--text); } /* Responsividad para móviles */ @media (max-width: 600px) { .compare-section { padding: 48px 0; } .audit-dashboard { margin: 2rem 0; } .audit-card { padding: 24px 20px; } .compare-column { padding: 28px 20px; } } /* ======================================================================== Dynamic Interactive Widgets & Premium Effects ======================================================================== */ /* ── Raíl de scroll con secciones (desktop ancho) ───────────────────── */ .scroll-rail { position: fixed; top: 50%; right: 18px; transform: translateY(-50%); z-index: 80; display: none; flex-direction: column; align-items: center; } @media (min-width: 1200px) { .scroll-rail { display: flex; } } .sr-track { position: absolute; top: 8px; bottom: 8px; left: 50%; transform: translateX(-50%); width: 2px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; } .sr-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #fca5a5, var(--accent-soft) 45%, var(--accent)); border-radius: 2px; transition: height 0.12s linear; } .sr-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 30px; } .sr-pt { width: 9px; height: 9px; border-radius: 50%; z-index: 1; background: rgba(255,255,255,0.28); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .sr-dot:hover .sr-pt { background: var(--text); transform: scale(1.25); } .sr-dot.active .sr-pt { background: var(--accent-soft); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(220,38,38,0.18); } .sr-label { position: absolute; right: 24px; white-space: nowrap; font-size: 0.76rem; font-weight: 500; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); padding: 5px 10px; border-radius: 8px; opacity: 0; transform: translateX(8px); pointer-events: none; box-shadow: 0 8px 22px rgba(0,0,0,0.45); transition: opacity 0.2s ease, transform 0.2s ease; } .sr-dot:hover .sr-label, .sr-dot.active .sr-label { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .sr-fill { transition: none; } } /* ── Auditoría Interactiva (Inputs & Console) ───────────────────────── */ .audit-input-panel { background: rgba(24, 24, 27, 0.4); border: 1px solid var(--border); backdrop-filter: blur(12px); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; } .audit-input-desc { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 16px; } .audit-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: center; } @media (max-width: 800px) { .audit-fields { grid-template-columns: 1fr; } } .audit-field-group { width: 100%; } .input-text, .select-niche { width: 100%; padding: 12px 16px; background: rgba(9, 9, 11, 0.6); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .input-text::placeholder { color: var(--text-dim); } .input-text:focus, .select-niche:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 10px rgba(239, 68, 68, 0.15); background: rgba(9, 9, 11, 0.8); } .btn-action { padding: 12px 24px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); white-space: nowrap; } .btn-action:hover { background: #b91c1c; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4); } .btn-action:active { transform: scale(0.98); } .audit-error-msg { color: #fca5a5; font-size: 0.88rem; margin-top: 10px; display: flex; align-items: center; gap: 6px; } .audit-console { background: #09090b; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-sm); padding: 16px 20px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85rem; color: #34d399; line-height: 1.6; max-height: 200px; overflow-y: auto; margin-bottom: 24px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(16, 185, 129, 0.05); } .console-line { margin: 0; white-space: pre-wrap; opacity: 0.9; } .console-line.success { color: #10b981; font-weight: 600; } .console-line.error { color: #ef4444; } .audit-lead-success { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; } .audit-lead-success h4 { color: #34d399; margin: 0; font-size: 1.1rem; } .audit-lead-success p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .audit-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-top: 10px; } .audit-result-stat-item { display: flex; flex-direction: column; gap: 4px; } .stat-lbl { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .stat-val { font-size: 1.4rem; font-weight: 800; color: var(--text); } /* ── Calculadora (Niches & Split Bar) ───────────────────────── */ .niche-selectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; } @media (max-width: 700px) { .niche-selectors { grid-template-columns: 1fr 1fr; gap: 8px; } } .niche-selectors-sub { font-size: 0.82rem; color: var(--text-muted); margin: -8px 0 14px; line-height: 1.5; } .niche-btn { background: rgba(24, 24, 27, 0.5); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--text-muted); font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-align: center; line-height: 1.4; } .niche-btn:hover { background: rgba(24, 24, 27, 0.8); border-color: var(--border-strong); color: var(--text); } .niche-btn.active { background: rgba(220, 38, 38, 0.1); border-color: var(--accent-soft); color: var(--text); box-shadow: 0 0 15px rgba(220, 38, 38, 0.15); } .niche-btn-rpm { display: block; font-size: 0.78rem; color: var(--text-dim); font-weight: 400; margin-top: 4px; } .niche-btn.active .niche-btn-rpm { color: var(--accent-soft); font-weight: 600; } .split-bar-container { margin-top: 24px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .split-bar { display: flex; height: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 99px; overflow: hidden; margin-bottom: 8px; } .split-bar-creator { height: 100%; background: var(--green); transition: width 0.3s ease; } .split-bar-us { height: 100%; background: var(--accent-soft); transition: width 0.3s ease; } .split-labels { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); } .lbl-creator { color: var(--green); font-weight: 600; } .lbl-us { color: var(--accent-soft); font-weight: 600; } /* ── Premium hover effects (GPU-Accelerated 3D Trans) ───────────────── */ .path-card, .audit-card, .calc-card { will-change: transform, box-shadow; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease; } .path-card:hover { transform: translateY(-6px) translateZ(0) scale(1.005); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); } .audit-dashboard { will-change: transform, box-shadow; transition: box-shadow 0.4s ease; } .audit-dashboard:hover { box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35); } .calc-card:hover { transform: translateY(-4px) translateZ(0); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } /* --- Calculator Group & Split Layout (Vídeos Largos vs Shorts) --- */ .niche-selectors-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-top: 10px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; } .calc-group { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; transition: border-color 0.3s ease, background 0.3s ease; } .calc-group:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--border-strong); } .calc-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; } .calc-group-title { font-size: 1.05rem; font-weight: 700; color: var(--text); } .calc-group-badge { font-size: 0.72rem; font-weight: 700; background: rgba(16, 185, 129, 0.12); color: #10b981; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(16, 185, 129, 0.2); text-transform: uppercase; letter-spacing: 0.05em; } .calc-group-badge.badge-shorts { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); } .calc-group-desc { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 16px; line-height: 1.45; } .calc-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 600px) { .calc-breakdown { grid-template-columns: 1fr; gap: 10px; } } .breakdown-item { background: rgba(255, 255, 255, 0.015); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; } .breakdown-lbl { font-size: 0.85rem; color: var(--text-muted); } .breakdown-val { font-size: 1.05rem; color: var(--text); font-weight: 600; } .audit-format-note { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius); padding: 16px 20px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin-top: 18px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .audit-format-note strong { color: var(--text); } /* ── Modal de Citas (Google Calendar) ───────────────────────── */ .booking-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 20px; } .booking-modal-overlay.active { opacity: 1; pointer-events: auto; } .booking-modal-content { position: relative; width: 100%; max-width: 960px; height: 100%; max-height: 700px; background: rgba(24, 24, 27, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; } .booking-modal-overlay.active .booking-modal-content { transform: scale(1); } .booking-modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 10; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, transform 0.2s ease; } .booking-modal-close:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.05); } .booking-modal-body { flex: 1; width: 100%; height: 100%; min-height: 0; /* permite que el iframe encoja dentro del flex en iOS */ } .booking-modal-body iframe { width: 100%; height: 100%; border: none; } @media (max-width: 600px) { /* Pantalla completa: el calendario de Google necesita toda la altura posible para el selector de fechas + franjas horarias. */ .booking-modal-overlay { padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .booking-modal-content { width: 100%; max-width: none; height: 100vh; /* fallback */ height: 100dvh; /* viewport dinámico: evita saltos con la barra del navegador */ max-height: none; border: none; border-radius: 0; /* anula la animación de escala que en fullscreen se nota como "tirón" */ transform: none; } .booking-modal-overlay.active .booking-modal-content { transform: none; } .booking-modal-close { /* respeta el notch/isla de iOS y se mantiene por encima del header de Google */ top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); background: rgba(0, 0, 0, 0.7); } } /* ======================================================================== Two-Step Checkout, Trust Badges & Order Bump Styles ======================================================================== */ /* Checkout Steps Progress Bar */ .checkout-steps { display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; gap: 16px; max-width: 480px; padding: 0 10px; } .step-indicator { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-weight: 500; transition: color 0.3s ease; } .step-indicator.active { color: var(--text); font-weight: 700; } .step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); transition: all 0.3s ease; } .step-indicator.active .step-num { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(220, 38, 38, 0.4); } .step-indicator.completed .step-num { background: var(--green); border-color: var(--green); color: #fff; } .step-text { font-size: 0.95rem; } .step-line { flex: 1; height: 2px; background: var(--border); max-width: 60px; transition: background 0.3s ease; } .step-line.active { background: var(--accent-soft); } /* Step Panel Containers */ .checkout-step-panel { display: none; animation: fadeInStep 0.25s ease-out forwards; } .checkout-step-panel.active { display: block; } @keyframes fadeInStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Trust Badges in Sidebar */ .trust-badges { margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 16px; } .trust-badge-item { display: flex; align-items: flex-start; gap: 12px; } .trust-badge-icon { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; } .trust-badge-text h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin: 0 0 3px; } .trust-badge-text p { font-size: 0.8rem; color: var(--text-dim); margin: 0; line-height: 1.45; } /* Order Bump Box */ .order-bump-box { margin: 24px 0; padding: 20px; background: rgba(24, 24, 27, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(220, 38, 38, 0.25); border-radius: var(--radius-lg); display: flex; gap: 14px; align-items: flex-start; position: relative; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } .order-bump-box:hover { border-color: rgba(220, 38, 38, 0.45); box-shadow: 0 4px 20px rgba(220, 38, 38, 0.08); } .order-bump-badge { position: absolute; top: 0; right: 0; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-bottom-left-radius: var(--radius-sm); letter-spacing: 0.08em; } .order-bump-checkbox-wrapper { display: flex; align-items: center; justify-content: center; height: 24px; } .order-bump-checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0; } .order-bump-content { flex: 1; } .order-bump-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; padding-right: 60px; /* Leave space for the badge */ } .order-bump-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .order-bump-desc strong { color: var(--text); } .step-nav-buttons { display: flex; gap: 12px; margin-top: 24px; align-items: center; } .btn-back { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .btn-back:hover { background: var(--bg-elev-2); color: var(--text); } /* ── Migas de pan visibles (partials/breadcrumbs.php) ───────────────────── */ .breadcrumbs { padding: 14px 0 2px; font-size: 0.82rem; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-dim); } .breadcrumbs li { display: flex; align-items: center; gap: 6px; } .breadcrumbs li + li::before { content: "/"; color: var(--text-dim); opacity: 0.6; } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent-soft); } .breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 500; }