/* ============================================================ SOVERANTI — curso-web.css Reemplaza el estilo impreso de los curso-*.html por diseño web premium. Se inyecta AL FINAL del , sobreescribe estilos inline. ============================================================ */ /* ─── RESET PRINT ────────────────────────────────────────────── */ * { box-sizing: border-box; } body { font-family: 'Jost', 'Segoe UI', system-ui, sans-serif !important; background: #F4EDE0 !important; color: #0B1927 !important; line-height: 1.75 !important; font-size: 16px !important; } p { margin-bottom: 18px; } /* ─── NAV STICKY ─────────────────────────────────────────────── */ .curso-nav { position: sticky; top: 0; z-index: 100; background: rgba(11,25,39,.97); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(196,167,96,.2); padding: 0 5%; height: 64px; display: flex; align-items: center; justify-content: space-between; } .curso-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .curso-nav-logo img { height: 40px; width: 40px; object-fit: contain; } .curso-nav-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 2px; color: #F4EDE0; } .curso-nav-tag { font-size: .5rem; font-weight: 700; letter-spacing: 4px; color: #C4A760; display: block; line-height: 1; } .curso-nav-back { color: #9BB0C9; font-size: .82rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; } .curso-nav-back:hover { color: #C4A760; } /* ─── PORTADA ────────────────────────────────────────────────── */ .portada { min-height: 88vh !important; background: linear-gradient(150deg, #0B1927 0%, #1a2a3a 60%, #0d2035 100%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 80px 5% !important; page-break-after: unset !important; position: relative; overflow: hidden; } .portada::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(196,167,96,.08) 0%, transparent 70%); pointer-events: none; } .portada-logo { margin-bottom: 48px !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: 3px !important; color: rgba(255,255,255,.45) !important; } .portada-logo span { color: #C4A760 !important; } .portada-nivel { font-size: .72rem !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; background: rgba(196,167,96,.12) !important; border: 1px solid rgba(196,167,96,.35) !important; color: #C4A760 !important; padding: 7px 18px !important; border-radius: 20px !important; margin-bottom: 28px !important; display: inline-block !important; } .portada h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: clamp(2rem, 5vw, 3.6rem) !important; font-weight: 600 !important; color: #F4EDE0 !important; line-height: 1.15 !important; margin-bottom: 20px !important; max-width: 760px !important; } .portada h1 em { color: #C4A760 !important; font-style: italic !important; } .portada-sub { font-size: 1.05rem !important; color: rgba(255,255,255,.65) !important; max-width: 540px !important; margin-bottom: 48px !important; line-height: 1.7 !important; } .portada-datos { display: flex !important; gap: 40px !important; flex-wrap: wrap !important; justify-content: center !important; margin-bottom: 48px !important; } .portada-dato { text-align: center !important; } .portada-dato .num { font-family: 'Cormorant Garamond', serif !important; font-size: 2.2rem !important; font-weight: 600 !important; color: #C4A760 !important; line-height: 1 !important; } .portada-dato .lbl { font-size: .72rem !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: rgba(255,255,255,.45) !important; margin-top: 5px !important; } .portada-cta { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #C4A760, #8A6820); color: #0B1927 !important; font-weight: 700; font-size: 1rem; padding: 16px 36px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 28px rgba(196,167,96,.35); transition: all .2s; margin-bottom: 48px; } .portada-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(196,167,96,.45); } .portada-autor { border-top: 1px solid rgba(255,255,255,.12) !important; padding-top: 28px !important; color: rgba(255,255,255,.5) !important; font-size: .85rem !important; position: relative; z-index: 1; } .portada-autor strong { color: rgba(255,255,255,.85) !important; } /* ─── ÍNDICE ──────────────────────────────────────────────────── */ .indice { max-width: 860px !important; margin: 0 auto !important; padding: 80px 5% !important; page-break-after: unset !important; } .indice h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 2rem !important; font-weight: 600 !important; color: #0B1927 !important; margin-bottom: 8px !important; } .indice-sub { color: #5A6A7A !important; margin-bottom: 36px !important; } .indice-modulo { display: flex !important; align-items: flex-start !important; gap: 18px !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(196,167,96,.15) !important; transition: background .2s; } .indice-num { min-width: 44px !important; height: 44px !important; border-radius: 12px !important; background: rgba(11,25,39,.08) !important; color: #0B1927 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: .85rem !important; flex-shrink: 0 !important; } .indice-num.naranja { background: linear-gradient(135deg, #C4A760, #8A6820) !important; color: #0B1927 !important; } .indice-info h4 { font-size: 1rem !important; font-weight: 600 !important; color: #0B1927 !important; margin-bottom: 3px !important; } .indice-info p { font-size: .83rem !important; color: #5A6A7A !important; margin: 0 !important; } /* ─── MÓDULOS ────────────────────────────────────────────────── */ .modulo { max-width: 860px !important; margin: 0 auto !important; padding: 64px 5% !important; page-break-before: unset !important; border-bottom: 1px solid rgba(196,167,96,.12); } .modulo-header { border-radius: 18px !important; padding: 36px 40px !important; margin-bottom: 40px !important; color: #F4EDE0 !important; position: relative; overflow: hidden; } .modulo-header::before { content: ''; position: absolute; top: -30px; right: -30px; width: 200px; height: 200px; background: rgba(255,255,255,.04); border-radius: 50%; pointer-events: none; } .modulo-header.naranja { background: linear-gradient(135deg, #8A6820 0%, #C4A760 100%) !important; color: #0B1927 !important; } .modulo-header.verde { background: linear-gradient(135deg, #0d2035 0%, #1a3a50 100%) !important; } .modulo-header.violeta { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%) !important; } .modulo-header.oscuro { background: linear-gradient(135deg, #0B1927 0%, #1a2a3a 100%) !important; } .modulo-num { font-size: .68rem !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; opacity: .65 !important; margin-bottom: 10px !important; } .modulo-header h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 1.9rem !important; font-weight: 600 !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .modulo-header p { opacity: .8 !important; font-size: .95rem !important; margin: 0 !important; } /* ─── TIPOGRAFÍA INTERNA ─────────────────────────────────────── */ h3 { font-family: 'Cormorant Garamond', serif !important; font-size: 1.45rem !important; font-weight: 600 !important; color: #0B1927 !important; margin: 40px 0 16px !important; padding-bottom: 10px !important; border-bottom: 2px solid rgba(196,167,96,.2) !important; } h4 { font-size: 1.05rem !important; font-weight: 700 !important; color: #0B1927 !important; margin: 24px 0 10px !important; } strong { color: #0B1927 !important; } /* ─── CAJAS ESPECIALES ──────────────────────────────────────── */ .caja { border-radius: 14px !important; padding: 24px 28px !important; margin: 24px 0 !important; border-left: 4px solid !important; } .caja-titulo { font-weight: 700 !important; font-size: .8rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 10px !important; } .caja-tip { background: rgba(196,167,96,.08) !important; border-color: #C4A760 !important; } .caja-tip .caja-titulo { color: #8A6820 !important; } .caja-accion { background: rgba(11,25,39,.05) !important; border-color: #0B1927 !important; } .caja-accion .caja-titulo { color: #0B1927 !important; } .caja-ojo { background: rgba(250,204,21,.08) !important; border-color: #ca8a04 !important; } .caja-ojo .caja-titulo { color: #92400e !important; } .caja-herramienta { background: rgba(22,163,74,.07) !important; border-color: #16a34a !important; } .caja-herramienta .caja-titulo { color: #166534 !important; } /* ─── PASOS ──────────────────────────────────────────────────── */ .paso { background: rgba(196,167,96,.06) !important; border: 1px solid rgba(196,167,96,.15) !important; border-radius: 14px !important; padding: 20px 24px !important; margin-bottom: 16px !important; } .paso-num { background: linear-gradient(135deg, #C4A760, #8A6820) !important; color: #0B1927 !important; border-radius: 10px !important; width: 38px !important; height: 38px !important; font-weight: 800 !important; font-size: .9rem !important; } .paso-body h4 { color: #0B1927 !important; } .paso-body p { color: #5A6A7A !important; } /* ─── TARJETAS GRID ──────────────────────────────────────────── */ .tarjeta { background: #fff !important; border: 1px solid rgba(196,167,96,.15) !important; border-radius: 14px !important; padding: 22px !important; box-shadow: 0 2px 12px rgba(11,25,39,.05) !important; } .tarjeta:hover { box-shadow: 0 8px 28px rgba(196,167,96,.12) !important; } /* ─── TABLA ──────────────────────────────────────────────────── */ table { border-radius: 12px !important; overflow: hidden !important; border: none !important; } th { background: #0B1927 !important; color: #F4EDE0 !important; padding: 14px 18px !important; font-size: .8rem !important; letter-spacing: .5px !important; } td { padding: 12px 18px !important; font-size: .88rem !important; } tr:nth-child(even) td { background: rgba(196,167,96,.05) !important; } /* ─── SEPARADOR ─────────────────────────────────────────────── */ .separador { text-align: center !important; padding: 48px 0 !important; color: rgba(196,167,96,.35) !important; font-size: 1.2rem !important; letter-spacing: 6px !important; } .separador::before { content: '— ✦ —'; } /* ─── RESUMEN FINAL ─────────────────────────────────────────── */ .resumen-final { background: linear-gradient(135deg, #0B1927 0%, #1a2a3a 100%) !important; padding: 80px 5% !important; page-break-before: unset !important; margin: 0 !important; } .resumen-final h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 2.4rem !important; font-weight: 600 !important; color: #F4EDE0 !important; } .resumen-final p { color: rgba(255,255,255,.65) !important; } .resumen-item { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(196,167,96,.15) !important; border-radius: 14px !important; padding: 24px !important; } .resumen-item h4 { color: #C4A760 !important; } /* ─── BOTÓN IMPRIMIR: reposicionado ─────────────────────────── */ .btn-imprimir { position: fixed !important; bottom: 28px !important; right: 28px !important; z-index: 999 !important; background: linear-gradient(135deg, #C4A760, #8A6820) !important; color: #0B1927 !important; border: none !important; padding: 12px 22px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: .85rem !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(196,167,96,.4) !important; transition: all .2s !important; } .btn-imprimir:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(196,167,96,.5) !important; } /* ─── CTA FINAL ──────────────────────────────────────────────── */ .portada-comprar, .cta-comprar, a.cta-final { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(135deg, #C4A760, #8A6820) !important; color: #0B1927 !important; font-weight: 700 !important; padding: 15px 32px !important; border-radius: 12px !important; text-decoration: none !important; box-shadow: 0 6px 24px rgba(196,167,96,.3) !important; transition: all .2s !important; margin-top: 12px !important; } .portada-comprar:hover, .cta-comprar:hover, a.cta-final:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(196,167,96,.4) !important; } /* ─── CHECKLIST ────────────────────────────────────────────── */ .checklist li { padding: 9px 0 !important; border-bottom: 1px solid rgba(196,167,96,.1) !important; font-size: .9rem !important; } .checklist li::before { content: '☐ ' !important; color: #C4A760 !important; font-size: 1.1rem !important; } /* ─── RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 768px) { .portada { padding: 60px 5% !important; min-height: auto !important; } .portada-datos { gap: 24px !important; } .modulo { padding: 48px 5% !important; } .modulo-header { padding: 24px !important; } .indice { padding: 48px 5% !important; } .grid-2 { grid-template-columns: 1fr !important; } .resumen-grid { grid-template-columns: 1fr !important; } } @media print { body { background: white !important; } .curso-nav { display: none !important; } .btn-imprimir { display: none !important; } }