/* ========================================================================== Enlace Chile — Design System ========================================================================== */ :root { --bg-principal: #FFFFFF; --bg-secundario-dark: #0F172A; --text-principal: #334155; --color-principal: #1D4ED8; --acento-calido: #F97316; --rojo-seminario: #DA251D; --bg-formulario: #F8FAFC; --font-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --header-h: 72px; --radius: 10px; --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.12); --container: 1180px; } /* Paleta corporativa/ingenieril aplicada a index.html, servicios.html y seminario.html (clase agregada en y de esas tres). El resto del archivo sigue usando las variables de arriba sin cambios, por lo que marketplace.html —que comparte este mismo stylesheet pero define su propia paleta con las variables --mkt-*— conserva su render azul/violeta propio intacto: no lleva esta clase, así que nunca resuelve estos valores nuevos. */ body.theme-corporate { --bg-principal: #FAFAFA; --text-principal: #1E293B; --color-principal: #15803D; --acento-calido: #DC2626; } body.theme-corporate ::selection { background: rgba(220, 38, 38, 0.28); } /* Barra de scroll del navegador, con los colores de marca en vez del gris genérico por defecto. scrollbar-color cubre Firefox; el resto son pseudo-elementos propietarios de navegadores basados en Chromium/WebKit. Se aplica tanto a html como a body porque según la versión de Chrome el scroll de toda la ventana lo puede pintar cualquiera de los dos — y como queda fuera del alcance de body.theme-corporate, las variables no le llegan por herencia, así que acá van los valores literales en vez de var(--color-principal)/var(--acento-calido). */ html.theme-corporate, body.theme-corporate { scrollbar-color: #15803D #F8FAFC; scrollbar-width: thin; } html.theme-corporate::-webkit-scrollbar, body.theme-corporate::-webkit-scrollbar { width: 14px; } html.theme-corporate::-webkit-scrollbar-track, body.theme-corporate::-webkit-scrollbar-track { background: #F8FAFC; } html.theme-corporate::-webkit-scrollbar-thumb, body.theme-corporate::-webkit-scrollbar-thumb { background: #15803D; border-radius: 8px; border: 3px solid #F8FAFC; } html.theme-corporate::-webkit-scrollbar-thumb:hover, body.theme-corporate::-webkit-scrollbar-thumb:hover { background: #DC2626; } /* .form-field, .social-row y el tooltip de redes sociales son compartidos con seminario.html/marketplace.html, así que sus literales #fff / rgba(azul) no se tocan arriba — solo se sobrescriben aquí, acotados a estas dos páginas. */ body.theme-corporate .form-field input:not([type="radio"]):not([type="checkbox"]), body.theme-corporate .form-field select, body.theme-corporate .form-field textarea { background: #FAFAFA; } body.theme-corporate .form-field input:focus, body.theme-corporate .form-field select:focus, body.theme-corporate .form-field textarea:focus { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); } body.theme-corporate .social-row a img { /* Verificado con muestreo de píxel real: rgb(20,129,62) vs objetivo (21,128,61). */ filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(10202%) hue-rotate(139deg) brightness(85%) contrast(84%); } body.theme-corporate .social-row a[data-tooltip]::after { background: #FAFAFA; } * { box-sizing: border-box; margin: 0; padding: 0; } ::selection { background: rgba(249, 115, 22, 0.28); color: var(--bg-secundario-dark); } /* Animación sutil de aparición al hacer scroll (ver initScrollReveal en script.js). El estado oculto solo existe una vez que JS agrega la clase .reveal, así que si JS falla o está desactivado el contenido simplemente se ve normal, sin quedar oculto por accidente. */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } html { scroll-behavior: smooth; } body { font-family: var(--font-base); color: var(--text-principal); background: var(--bg-principal); line-height: 1.55; -webkit-font-smoothing: antialiased; } body, p, a, input, select, button, textarea { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section { padding: 64px 0; } .section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--bg-secundario-dark); text-align: center; margin-bottom: 40px; letter-spacing: -0.01em; } .btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: 0.95rem; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--acento-calido); color: #fff; } .btn-primary:hover { box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35); } .btn-secondary { background: transparent; color: var(--color-principal); border: 2px solid var(--color-principal); } .btn-secondary:hover { background: var(--color-principal); color: #fff; } .btn-seminario { display: inline-flex; align-items: center; justify-content: center; height: 41px; background: var(--rojo-seminario); color: #fff; font-weight: 700; padding: 0 18px; border-radius: 8px; font-size: 0.85rem; white-space: nowrap; } .btn-seminario:hover { opacity: 0.9; transform: translateY(-1px); } .btn-internacional { display: inline-flex; align-items: center; justify-content: center; height: 41px; gap: 6px; background: transparent; color: var(--color-principal); border: 2px solid var(--color-principal); font-weight: 700; padding: 0 16px; border-radius: 8px; font-size: 0.85rem; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .btn-internacional:hover { background: var(--color-principal); color: #fff; transform: translateY(-1px); } .btn-internacional .internacional-icon { width: 16px; height: 16px; flex-shrink: 0; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(250, 250, 250, 0.96); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); height: var(--header-h); display: flex; align-items: center; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { flex-shrink: 0; } .logo img { height: 40px; width: auto; } .main-nav { display: flex; align-items: center; gap: 28px; } .main-nav a { font-size: 0.92rem; font-weight: 600; color: var(--text-principal); transition: color 0.15s ease; } .main-nav a:hover { color: var(--color-principal); } .header-actions { display: flex; align-items: center; gap: 14px; } .lang-switch { display: flex; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; } .lang-switch button { background: transparent; border: none; padding: 6px 10px; font-size: 0.78rem; font-weight: 700; color: var(--text-principal); cursor: pointer; } .lang-switch button.active { background: var(--color-principal); color: #fff; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--bg-secundario-dark); margin: 5px 0; transition: 0.2s; } @media (max-width: 900px) { .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: #FAFAFA; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 20px 20px; box-shadow: var(--shadow-sm); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.2s ease; } .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .main-nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid #F1F5F9; } .nav-toggle { display: block; } .seminario-full { display: none; } .seminario-short { display: inline; } .internacional-full { display: none; } .internacional-short { display: inline; } .site-header .container { gap: 10px; } .header-actions { gap: 8px; } .logo img { height: 36px; } .lang-switch button { padding: 5px 8px; font-size: 0.72rem; } .btn-seminario { height: 36px; padding: 0 12px; font-size: 0.78rem; } .btn-internacional { height: 36px; padding: 0 12px; font-size: 0.78rem; } .nav-toggle { padding: 5px; } } @media (min-width: 901px) { .seminario-short { display: none; } .internacional-short { display: none; } } /* El botón "Enlace Internacional" pasa a solo-ícono antes que el resto de los elementos del header se compriman, porque agrega un segundo pill de texto junto al de "Seminario" y el header no tiene espacio para dos. */ @media (max-width: 560px) { .btn-internacional { padding: 0 10px; } .btn-internacional .internacional-full, .btn-internacional .internacional-short { display: none; } } @media (max-width: 420px) { .container { padding: 0 10px; } .site-header .container { gap: 4px; } .header-actions { gap: 4px; } .logo img { height: 30px; } .lang-switch button { padding: 3px 5px; font-size: 0.6rem; } .btn-seminario { height: 30px; padding: 0 8px; font-size: 0.7rem; } .btn-internacional { height: 30px; padding: 0 8px; } .nav-toggle { padding: 4px; } } /* ========================================================================== Hero Carousel (index) ========================================================================== */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; color: #fff; } .hero-slides { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } .hero-content { position: relative; z-index: 2; max-width: 700px; padding: 40px 0; } /* Resplandor localizado: en vez de teñir medio hero o poner una tarjeta con borde duro, un degradado radial difuminado que vive ceñido al bloque de texto (apenas un margen corto más allá de sus bordes) y se desvanece gradualmente a transparente, para que aporte contraste sin leerse como una forma/color propio. Negro puro en vez de un tono de la paleta — a esta intensidad tan baja y difusa, un color saturado se nota más de la cuenta; negro se integra como sombra ambiental. */ .hero-content::before { content: ""; position: absolute; inset: -24px -32px; z-index: -1; background: radial-gradient(ellipse 70% 75% at 35% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0) 85%); filter: blur(16px); pointer-events: none; } .hero-content h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.55); } .hero-content .hero-subtitle { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 600; color: var(--acento-calido); margin-bottom: 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55); } .hero-content p { font-size: 1.05rem; color: #E2E8F0; max-width: 560px; margin-bottom: 28px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55); } /* Flechas y puntos del carrusel: controles manuales para pasar de una foto del hero a otra, más un indicador de cuál se está viendo. */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .hero-arrow svg { width: 20px; height: 20px; } .hero-arrow:hover { background: rgba(15, 23, 42, 0.6); } .hero-arrow-prev { left: 20px; } .hero-arrow-next { right: 20px; } .hero-dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.45); cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; } .hero-dot:hover { background: rgba(255, 255, 255, 0.75); } .hero-dot.active { background: var(--acento-calido); transform: scale(1.25); } @media (max-width: 700px) { .hero-arrow { width: 36px; height: 36px; } .hero-arrow-prev { left: 10px; } .hero-arrow-next { right: 10px; } } /* ========================================================================== Trust Band ========================================================================== */ .trust-band { background: var(--bg-principal); border-bottom: 1px solid #F1F5F9; padding: 22px 0; } .trust-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; text-align: center; } .trust-band p { font-size: 0.9rem; font-weight: 400; color: var(--text-principal); letter-spacing: 0.01em; } .trust-band p strong { font-weight: 700; } .trust-band img { height: 34px; filter: grayscale(100%) brightness(0.9) opacity(0.75); } /* ========================================================================== Marquee — Alianzas ========================================================================== */ .marquee-section { background: var(--bg-formulario); padding: 64px 0 40px; overflow: hidden; } .marquee-intro { text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--text-principal); margin-bottom: 22px; letter-spacing: 0.02em; } .marquee-track-wrap { overflow: hidden; padding: 40px 0; margin: -30px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: marquee-scroll 40s linear infinite; } .marquee-logo-tile { flex-shrink: 0; width: 140px; height: 84px; background: #E3F3E8; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 14px 18px; } .marquee-track img { height: 100%; width: 100%; object-fit: contain; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Pilares (4) ========================================================================== */ .pilares { background: var(--bg-principal); } .pilares-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 900px) { .pilares-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pilares-grid { grid-template-columns: 1fr; } } .pilar-card { border-radius: var(--radius); overflow: hidden; background: #FAFAFA; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } .pilar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pilar-card .pilar-media { width: 100%; height: 180px; background: #FAFAFA; border-bottom: 1px solid #F1F5F9; display: flex; align-items: center; justify-content: center; padding: 24px; } .pilar-card img { width: 100%; height: 100%; object-fit: contain; /* Flatten-then-tint: brightness(0) fuerza negro puro sin importar el color fuente del archivo, y el resto del filtro está calculado (no aproximado a mano) para reproducir exactamente var(--color-principal) #15803D — verificado con muestreo de píxel real: rgb(20,129,62) vs objetivo (21,128,61). */ filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(10202%) hue-rotate(139deg) brightness(85%) contrast(84%); } .pilar-card h3 { font-size: 1rem; font-weight: 700; color: var(--bg-secundario-dark); padding: 16px; } .pilares-cta { text-align: center; margin-top: 36px; } /* ========================================================================== Autoridad ========================================================================== */ .autoridad { background: #FAFAFA; border-top: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9; } .autoridad-intro { text-align: center; color: var(--bg-secundario-dark); font-weight: 700; font-size: 1rem; margin-bottom: 36px; } .autoridad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 700px) { .autoridad-grid { grid-template-columns: repeat(2, 1fr); } } .autoridad-item img { height: 48px; margin: 0 auto 14px; /* Flatten-then-tint calculado para reproducir exactamente var(--acento-calido) #DC2626 (mismo filtro que .excelencia-card img y .macro-icon img) — verificado con muestreo de píxel real: rgb(219,39,38) vs objetivo (220,38,38). */ filter: brightness(0) saturate(100%) invert(55%) sepia(44%) saturate(7816%) hue-rotate(333deg) brightness(78%) contrast(128%); } .autoridad-item span { font-weight: 700; color: var(--bg-secundario-dark); font-size: 0.95rem; } .autoridad-item span::after { content: ""; display: block; width: 28px; height: 3px; background: var(--acento-calido); margin: 10px auto 0; border-radius: 2px; } /* ========================================================================== Excelencia ========================================================================== */ .excelencia { background: var(--bg-formulario); } .excelencia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 800px) { .excelencia-grid { grid-template-columns: 1fr; } } .excelencia-card { background: #FAFAFA; border-radius: var(--radius); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); } .excelencia-card img { height: 44px; margin: 0 auto 18px; /* Flatten-then-tint calculado para reproducir exactamente var(--acento-calido) #DC2626 (mismo filtro que .autoridad-item img y .macro-icon img) — verificado con muestreo de píxel real: rgb(219,39,38) vs objetivo (220,38,38). */ filter: brightness(0) saturate(100%) invert(55%) sepia(44%) saturate(7816%) hue-rotate(333deg) brightness(78%) contrast(128%); } .excelencia-card h3 { color: var(--acento-calido); font-size: 1.05rem; margin-bottom: 10px; font-weight: 700; } .excelencia-card p { font-size: 0.92rem; } .excelencia-card p strong { display: block; margin-bottom: 4px; } /* ========================================================================== Formulario + Calendario ========================================================================== */ .conversion { background: #FAFAFA; } .conversion-box { background: var(--bg-formulario); border-radius: 16px; padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-sm); max-width: 820px; margin: 0 auto; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.85rem; font-weight: 700; color: var(--bg-secundario-dark); } .required-mark { color: #DC2626; margin-left: 2px; } .form-field input:not([type="radio"]):not([type="checkbox"]), .form-field select, .form-field textarea { width: 100%; min-width: 0; border: 1px solid #CBD5E1; border-radius: 8px; padding: 12px 14px; font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--text-principal); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-principal); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); } .form-field textarea { resize: vertical; min-height: 110px; } /* Mensajes de validación inline por campo (ver script.js: showFieldErrors) */ .field-error-msg { margin: 2px 0 0; font-size: 0.8rem; font-weight: 600; color: #DC2626; } .form-field.field-invalid input:not([type="radio"]):not([type="checkbox"]), .form-field.field-invalid select, .form-field.field-invalid textarea { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .form-submit { width: 100%; margin-top: 24px; } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .form-success { margin-top: 14px; font-size: 0.9rem; font-weight: 600; color: #15803D; display: none; } .form-success.show { display: block; } .form-error { margin-top: 14px; font-size: 0.9rem; font-weight: 600; color: var(--rojo-seminario); display: none; } .form-error.show { display: block; } /* Honeypot anti-spam: oculto para personas, visible para bots que no leen CSS. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--bg-formulario); color: var(--text-principal); padding: 56px 0 24px; border-top: 1px solid #E2E8F0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } .footer-brand img { /* A pedido del cliente, el logo del footer ahora es el mismo archivo a color que el del header (antes se aplanaba a un solo tono). */ height: 38px; margin-bottom: 14px; } .footer-brand p { font-size: 0.88rem; color: #64748B; max-width: 320px; } .footer-col h4 { color: var(--bg-secundario-dark); font-size: 0.9rem; margin-bottom: 14px; font-weight: 700; } .footer-col a, .footer-col p { display: block; font-size: 0.88rem; color: #64748B; margin-bottom: 8px; } .footer-col a:hover { color: var(--color-principal); } /* Ícono + texto para cada medio de contacto del footer (correo, WhatsApp, teléfono central). currentColor hace que el ícono herede el mismo gris del texto y el mismo color de marca al pasar el mouse, sin reglas aparte. */ /* Especificidad a propósito más alta que ".footer-col a" (clase+elemento), que si no le gana a ".footer-contact-link" sola y el display:flex no aplica. */ .footer-col a.footer-contact-link { display: flex; align-items: center; gap: 8px; } .footer-contact-link svg, .footer-contact-link img { width: 16px; height: 16px; flex-shrink: 0; } .footer-contact-link svg { color: inherit; } .social-row { display: flex; gap: 12px; margin-top: 6px; } .social-row a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #EEF2F9; border-radius: 50%; transition: background 0.15s ease, transform 0.15s ease; } .social-row a img { width: 20px; height: 20px; object-fit: contain; /* Flatten-then-tint calculado para reproducir exactamente var(--color-principal) #1D4ED8 (mismo filtro que .pilar-card img). */ filter: brightness(0) saturate(100%) invert(32%) sepia(100%) saturate(4248%) hue-rotate(221deg) brightness(84%) contrast(102%); } .social-row a:hover { transform: translateY(-2px); } .social-row a[data-tooltip] { position: relative; cursor: default; } .social-row a[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; color: #0F172A; font-size: 0.72rem; font-weight: 600; white-space: nowrap; padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 5; } .social-row a[data-tooltip]:hover::after { opacity: 1; } .footer-bottom { border-top: 1px solid #E2E8F0; padding-top: 20px; text-align: center; font-size: 0.82rem; color: #94A3B8; } /* ========================================================================== WhatsApp Widget ========================================================================== */ .wa-fab { position: fixed; bottom: 24px; right: 24px; z-index: 1200; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); transition: transform 0.2s ease; } .wa-fab:hover { transform: scale(1.06); } .wa-fab img { width: 30px; height: 30px; filter: brightness(0) invert(1); } .wa-panel { position: fixed; bottom: 96px; right: 24px; z-index: 1200; width: 320px; max-width: calc(100vw - 32px); background: #FAFAFA; border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; transform: translateY(16px) scale(0.97); opacity: 0; pointer-events: none; transition: 0.18s ease; } .wa-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .wa-panel-header { background: #075E54; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; } .wa-panel-avatar { width: 38px; height: 38px; border-radius: 50%; background: #FAFAFA; display: flex; align-items: center; justify-content: center; } .wa-panel-avatar img { width: 22px; height: 22px; filter: none; } .wa-panel-header .wa-name { font-size: 0.92rem; font-weight: 700; } .wa-panel-header .wa-status { font-size: 0.75rem; color: #D1FAE5; display: flex; align-items: center; gap: 5px; } .wa-panel-header .wa-status::before { content: ""; width: 7px; height: 7px; background: #4ADE80; border-radius: 50%; display: inline-block; } .wa-panel-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: 0.85; } .wa-panel-body { background: #ECE5DD; padding: 16px; } .wa-bubble { background: #FAFAFA; border-radius: 10px; border-top-left-radius: 2px; padding: 10px 12px; font-size: 0.85rem; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,0.08); max-width: 90%; } .wa-panel-footer { padding: 14px 16px; background: #FAFAFA; } .wa-panel-footer a { display: block; text-align: center; background: #25D366; color: #fff; font-weight: 700; padding: 12px; border-radius: 8px; font-size: 0.9rem; } .wa-panel-footer a:hover { opacity: 0.92; } /* ========================================================================== Servicios page — Z pattern ========================================================================== */ .servicios-hero { padding: 100px 0 64px; text-align: center; } .servicios-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--bg-secundario-dark); font-weight: 800; max-width: 900px; margin: 0 auto 18px; letter-spacing: -0.01em; } .servicios-hero .divider { width: 64px; height: 4px; background: var(--acento-calido); border-radius: 2px; margin: 0 auto 22px; } .servicios-hero p { max-width: 640px; margin: 0 auto; font-size: 1.05rem; color: var(--text-principal); } .macro-area { padding: 72px 0; } .macro-area .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 860px) { .macro-area .container { grid-template-columns: 1fr; gap: 32px; } /* En 1 columna el truco de direction:rtl (usado para alternar imagen/texto en desktop) ya no invierte nada, así que en las secciones .reverse la imagen queda antes que el texto en el HTML. Se fuerza el texto primero con order para que el móvil siga siempre el mismo patrón texto→imagen. */ .macro-area.reverse .macro-text { order: -1; } } .macro-area.reverse .container { direction: rtl; } .macro-area.reverse .container > * { direction: ltr; } .macro-media img { width: 100%; height: 340px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); } .macro-media-stack { position: relative; height: 374px; } .macro-media-stack .stack-card { position: absolute; top: 0; left: 0; width: calc(100% - 34px); height: 340px; object-fit: cover; border-radius: 14px; cursor: pointer; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; } .macro-media-stack .stack-card[data-pos="0"] { transform: translate(0, 0); opacity: 1; z-index: 3; } .macro-media-stack .stack-card[data-pos="1"] { transform: translate(17px, 17px); opacity: 0.55; z-index: 2; cursor: default; pointer-events: none; } .macro-media-stack .stack-card[data-pos="2"] { transform: translate(34px, 34px); opacity: 0.3; z-index: 1; cursor: default; pointer-events: none; } .macro-media-stack .stack-card[data-pos="0"]:hover { transform: translate(0, -4px); } .macro-text h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; margin-bottom: 16px; } .macro-text p { font-size: 0.98rem; margin-bottom: 20px; } .macro-icons { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; } .macro-icon { display: flex; align-items: center; gap: 8px; white-space: nowrap; } /* Flatten-then-tint calculado para reproducir exactamente var(--acento-calido) #DC2626 (mismo filtro que .autoridad-item img y .excelencia-card img) — verificado con muestreo de píxel real: rgb(219,39,38) vs objetivo (220,38,38). */ .macro-icon img { width: 26px; height: 26px; filter: brightness(0) saturate(100%) invert(55%) sepia(44%) saturate(7816%) hue-rotate(333deg) brightness(78%) contrast(128%); } .macro-icon span { font-size: 0.82rem; font-weight: 700; } .macro-list li { position: relative; padding-left: 20px; font-size: 0.92rem; margin-bottom: 8px; } .macro-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-calido); } .macro-area.dark { background: var(--bg-secundario-dark); color: #fff; } .macro-area.dark .macro-text h2 { color: #fff; } .macro-area.dark .macro-text p { color: #CBD5E1; } .macro-area.dark .macro-list li { color: #E2E8F0; } .macro-area.light-blue { background: #E3F3E8; } .macro-area.white { background: #FAFAFA; } .macro-area.white .macro-text a.btn-secondary { margin-top: 4px; } .servicios-cta { background: var(--color-principal); color: #fff; padding: 64px 0; text-align: center; } .servicios-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 24px; font-weight: 800; } .servicios-cta-actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; } /* .btn-secondary normalmente usa el verde de marca como borde/texto, pero acá el fondo ya es ese mismo verde — se invierte a blanco para que se siga leyendo, con el mismo efecto hover invertido (fondo blanco, texto verde). */ .servicios-cta .btn-secondary { border-color: #fff; color: #fff; padding: 12px 28px; } .servicios-cta .btn-secondary:hover { background: #fff; color: var(--color-principal); } /* ========================================================================== Seminario page ========================================================================== */ .sem-header { background: var(--bg-principal); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; } .sem-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sem-partners { display: flex; align-items: center; gap: 24px; } .sem-partners img { height: 44px; width: auto; } .sem-hero { position: relative; padding: 72px 0 56px; text-align: center; background-image: url('recursos/hero_seminario.webp'); background-size: cover; background-position: center; } .sem-hero::before { content: ""; position: absolute; inset: 0; background-color: rgba(250, 250, 250, 0.87); } .sem-hero .container { position: relative; z-index: 1; max-width: 800px; } .sem-hero h1 { color: var(--text-principal); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; margin-bottom: 12px; line-height: 1.3; } .sem-hero h2 { color: var(--acento-calido); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin-bottom: 28px; } .sem-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; } .sem-meta-item { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--bg-secundario-dark); } .sem-meta-item img, .sem-meta-item svg { width: 22px; height: 22px; flex-shrink: 0; } .sem-meta-item img { /* Los archivos fuente vienen en rojo puro (#FB0101); flatten-then-tint calculado para reproducir exactamente var(--acento-calido) #DC2626 — verificado con muestreo de píxel real: rgb(219,39,38) vs objetivo (220,38,38). */ filter: brightness(0) saturate(100%) invert(55%) sepia(44%) saturate(7816%) hue-rotate(333deg) brightness(78%) contrast(128%); } .sem-form-section { padding: 56px 0 24px; } .sem-form-wrap { max-width: 800px; margin: 0 auto; } .sem-form-card { background: var(--bg-formulario); border-radius: 16px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-sm); } .sem-block { margin-bottom: 30px; } .sem-block h3 { font-size: 1rem; font-weight: 800; color: var(--bg-secundario-dark); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #E2E8F0; } .sem-radio-group { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; } .sem-radio-group label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .sem-conditional { display: none; margin-top: 20px; } .sem-conditional.show { display: block; } .sem-legal { font-size: 0.82rem; font-style: italic; color: #64748B; margin-bottom: 20px; } .btn-seminario-submit { background: var(--acento-calido); color: #fff; width: 100%; padding: 15px; font-size: 1rem; } .btn-seminario-submit:hover { opacity: 0.9; } .sem-volver-section { text-align: center; padding: 4px 0 32px; } /* Deliberadamente NO es un botón CTA: es un elemento secundario, así que se trata como un link liviano (ícono + texto) en vez de competir en peso visual con el "Enviar Inscripción" rojo de arriba. */ .link-volver-inicio { display: inline-flex; align-items: center; gap: 6px; color: var(--text-principal); font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .link-volver-inicio svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .link-volver-inicio:hover { color: var(--acento-calido); border-color: var(--acento-calido); } .link-volver-inicio:hover svg { transform: translateX(-3px); } .sem-footer { background: var(--bg-secundario-dark); color: #94A3B8; text-align: center; padding: 28px 0; font-size: 0.85rem; } .sem-footer a { display: inline-block; margin-top: 8px; color: #CBD5E1; font-weight: 600; font-size: 0.82rem; border-bottom: 1px solid rgba(255,255,255,0.25); } .sem-footer a:hover { color: var(--acento-calido); border-color: var(--acento-calido); } /* ========================================================================== Mejoras visuales — fondo animado y hovers (index / servicios / seminario) Puramente aditivo: no modifica ninguna regla existente, solo agrega comportamiento de mouse-over y una animación de fondo muy sutil. ========================================================================== */ body:not(.mkt-body) { position: relative; } body:not(.mkt-body)::before, body:not(.mkt-body)::after { content: ""; position: fixed; border-radius: 50%; filter: blur(130px); opacity: 0.16; z-index: -1; pointer-events: none; } body:not(.mkt-body)::before { width: 480px; height: 480px; top: -160px; left: -140px; background: var(--color-principal); animation: bg-float-a 28s ease-in-out infinite alternate; } body:not(.mkt-body)::after { width: 420px; height: 420px; bottom: -140px; right: -120px; background: var(--acento-calido); animation: bg-float-b 32s ease-in-out infinite alternate; } @keyframes bg-float-a { from { transform: translate(0, 0); } to { transform: translate(70px, 90px); } } @keyframes bg-float-b { from { transform: translate(0, 0); } to { transform: translate(-60px, -70px); } } @media (prefers-reduced-motion: reduce) { body:not(.mkt-body)::before, body:not(.mkt-body)::after { animation: none; } } /* Nav: subrayado animado en hover */ .main-nav a { position: relative; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-principal); transition: width 0.25s ease; } .main-nav a:hover::after { width: 100%; } .logo img { transition: transform 0.2s ease; } .logo:hover img { transform: scale(1.05); } .trust-band img { transition: filter 0.25s ease, opacity 0.25s ease; } .trust-band img:hover { filter: grayscale(40%) brightness(1) opacity(1); } .marquee-track-wrap:hover .marquee-track { animation-play-state: paused; } .marquee-logo-tile { transition: transform 0.25s ease, box-shadow 0.25s ease; } .marquee-logo-tile:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-md); } .pilar-card img { transition: transform 0.3s ease; } .pilar-card:hover img { transform: scale(1.06); } .autoridad-item img { transition: transform 0.25s ease; } .autoridad-item:hover img { transform: scale(1.1) rotate(-4deg); } .excelencia-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .excelencia-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .excelencia-card img { transition: transform 0.3s ease; } .excelencia-card:hover img { transform: scale(1.12); } .macro-media { overflow: hidden; border-radius: 14px; } .macro-media img { transition: transform 0.4s ease; } .macro-media:hover img { transform: scale(1.06); } .sem-partners img { transition: transform 0.2s ease; } .sem-partners img:hover { transform: scale(1.06); } .sem-meta-item { transition: transform 0.2s ease, color 0.2s ease; } .sem-meta-item:hover { transform: translateY(-2px); color: var(--color-principal); } /* ========================================================================== Marketplace — Enlace Internacional Paleta propia y autocontenida (independiente del sistema de variables compartido: --color-principal, --text-principal, --acento-calido, etc. no se usan aquí abajo). 5 roles: principal, acento, texto, fondo, superficie. Los -rgb acompañantes son para poder usar rgba() en glows/sombras/estados. ========================================================================== */ .mkt-body { --mkt-principal: #0055A4; --mkt-principal-rgb: 0, 85, 164; --mkt-acento: #6D28D9; --mkt-acento-rgb: 109, 40, 217; --mkt-texto: #0F172A; --mkt-texto-rgb: 15, 23, 42; --mkt-fondo: #F8FAFC; --mkt-superficie: #FFFFFF; --mkt-superficie-rgb: 255, 255, 255; background: var(--mkt-fondo); color: var(--mkt-texto); position: relative; } /* Barra de scroll con la paleta propia de marketplace en vez del gris genérico del navegador. Se aplica también a html.mkt-scroll (clase aparte, no mkt-body, para no heredar sin querer el fondo/color de .mkt-body) porque queda fuera del alcance de las variables --mkt-* definidas en .mkt-body, así que acá van los valores literales. */ html.mkt-scroll, .mkt-body { scrollbar-color: #0055A4 #F8FAFC; scrollbar-width: thin; } html.mkt-scroll::-webkit-scrollbar, .mkt-body::-webkit-scrollbar { width: 14px; } html.mkt-scroll::-webkit-scrollbar-track, .mkt-body::-webkit-scrollbar-track { background: #F8FAFC; } html.mkt-scroll::-webkit-scrollbar-thumb, .mkt-body::-webkit-scrollbar-thumb { background: #0055A4; border-radius: 8px; border: 3px solid #F8FAFC; } html.mkt-scroll::-webkit-scrollbar-thumb:hover, .mkt-body::-webkit-scrollbar-thumb:hover { background: #6D28D9; } .mkt-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; } .mkt-blob { position: absolute; border-radius: 50%; filter: blur(150px); opacity: 0.16; will-change: transform; } .mkt-blob-1 { width: 520px; height: 520px; top: -120px; left: -100px; background: var(--mkt-principal); animation: mkt-float-1 26s ease-in-out infinite alternate; } .mkt-blob-2 { width: 460px; height: 460px; top: 30%; right: -140px; background: var(--mkt-acento); animation: mkt-float-2 32s ease-in-out infinite alternate; } .mkt-blob-3 { width: 420px; height: 420px; bottom: -160px; left: 20%; background: var(--mkt-principal); animation: mkt-float-3 22s ease-in-out infinite alternate; } @keyframes mkt-float-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 80px) scale(1.1); } } @keyframes mkt-float-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, -40px) scale(0.95); } } @keyframes mkt-float-3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, -60px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .mkt-blob { animation: none; } } /* position:fixed se recalcula mal en varios navegadores móviles cuando la barra de direcciones se oculta/muestra durante el scroll (el viewport visual cambia de alto a mitad de gesto), lo que cortaba el fondo abajo de forma intermitente. En este ancho pasa a position:absolute anclado al body, que cubre todo el alto real de la página y no depende del viewport dinámico — se desplaza con el contenido en vez de quedar fijo. */ @media (max-width: 900px) { .mkt-body { position: relative; } .mkt-bg { position: absolute; } } /* Header */ .mkt-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background: rgba(var(--mkt-superficie-rgb), 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid #E2E8F0; } .mkt-header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mkt-logo { flex-shrink: 0; display: flex; } .mkt-logo img { height: 40px; width: auto; transition: transform 0.2s ease; } .mkt-logo:hover img { transform: scale(1.05); } @media (max-width: 900px) { .mkt-logo img { height: 36px; } } .mkt-header-title { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(90deg, var(--mkt-principal), var(--mkt-acento), var(--mkt-principal)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; animation: mkt-title-shift 6s linear infinite; } @keyframes mkt-title-shift { from { background-position: 0% 50%; } to { background-position: -200% 50%; } } @media (prefers-reduced-motion: reduce) { .mkt-header-title { animation: none; } } .mkt-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .mkt-lang-switch { display: flex; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; } .mkt-lang-btn { background: transparent; border: none; padding: 6px 10px; font-size: 0.78rem; font-weight: 700; color: var(--mkt-texto); cursor: pointer; } .mkt-lang-btn.active { background: var(--mkt-principal); color: var(--mkt-superficie); } .mkt-btn-home { display: inline-flex; align-items: center; gap: 6px; background: #EEF2F9; border: 1px solid #E2E8F0; color: var(--mkt-texto); font-weight: 700; font-size: 0.82rem; padding: 8px 16px; border-radius: 50px; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; } .mkt-btn-home:hover { background: #E2E8F0; transform: translateY(-1px); } .mkt-btn-home .mkt-home-icon { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 640px) { .mkt-header-title { display: none; } } /* El botón "Página principal" pasa a solo-ícono antes que el resto del header se comprima, porque ahora conviven 3 botones de idioma (ES/EN/VN) más este botón, y "Página principal" es el texto más largo de los tres idiomas. */ @media (max-width: 480px) { .mkt-btn-home span { display: none; } .mkt-btn-home { padding: 8px; } } @media (max-width: 420px) { .mkt-header-inner { gap: 8px; } .mkt-header-right { gap: 8px; } .mkt-logo img { height: 30px; } .mkt-lang-btn { padding: 5px 8px; font-size: 0.7rem; } .mkt-btn-home { padding: 7px; } } /* Hero */ .mkt-hero { padding: 64px 0 56px; position: relative; z-index: 1; } .mkt-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .mkt-hero-inner { grid-template-columns: 1fr; gap: 32px; } .mkt-hero-media { order: -1; } } .mkt-hero-text h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--mkt-texto); margin-bottom: 20px; } .mkt-hero-text p { font-size: 1rem; color: rgba(var(--mkt-texto-rgb), 0.6); margin-bottom: 16px; max-width: 560px; } .mkt-hero-media { position: relative; } /* Glow ambiental detrás de la imagen, crece y decrece lentamente */ .mkt-hero-media::before { content: ""; position: absolute; top: -28px; bottom: -28px; left: -8px; right: -8px; background: radial-gradient(ellipse at center, rgba(var(--mkt-principal-rgb), 0.45), rgba(var(--mkt-acento-rgb), 0.25) 45%, transparent 72%); filter: blur(50px); z-index: 0; animation: mkt-hero-glow-pulse 6s ease-in-out infinite; pointer-events: none; } @keyframes mkt-hero-glow-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.92); } 50% { opacity: 0.5; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .mkt-hero-media::before { animation: none; opacity: 0.35; } } .mkt-hero-media img { position: relative; z-index: 1; width: 100%; border-radius: 18px; box-shadow: 0 16px 40px rgba(var(--mkt-texto-rgb), 0.15); border: 1px solid #E2E8F0; } /* El reflejo solo se activa desde este ancho: en móvil la imagen queda arriba del título (order:-1 en el Hero) y -webkit-box-reflect no reserva espacio en el layout, así que se pintaba encima del texto. Además esta propiedad no es estándar y Chromium no respeta bien un override posterior ni con !important, así que la forma segura de que no aparezca en móvil es no declararla ahí en absoluto, en vez de intentar cancelarla después. */ @media (min-width: 901px) { .mkt-hero-media img { -webkit-box-reflect: below 6px linear-gradient(to bottom, transparent, transparent 55%, rgba(var(--mkt-superficie-rgb), 0.5)); } } /* Reflejo fijo de respaldo para navegadores sin soporte de -webkit-box-reflect (Firefox) */ @supports not (-webkit-box-reflect: below) { .mkt-hero-media::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 45%; margin-top: 6px; background-image: url('recursos/hero_internacional.webp'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; border-radius: 18px; transform: scaleY(-1); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent 65%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent 65%); z-index: 0; pointer-events: none; } } /* El reflejo y el glow son efectos puramente visuales que no reservan espacio en el layout (box-reflect y el ::after no afectan la altura del contenedor). En desktop la imagen queda al lado del texto y no hay problema, pero en móvil la imagen pasa a estar arriba del título (por el order:-1 de la sección Hero de arriba), así que ambos efectos terminaban pintándose encima del texto. Se desactivan solo en este breakpoint. */ @media (max-width: 900px) { .mkt-hero-media::after { display: none; } .mkt-hero-media::before { animation: none; opacity: 0.18; } } /* Toggle + Forms */ .mkt-toggle-section { padding: 24px 0 80px; position: relative; z-index: 1; } .mkt-form-hint { text-align: center; color: rgba(var(--mkt-texto-rgb), 0.6); font-weight: 600; margin-bottom: 20px; font-size: 0.95rem; } .mkt-field-hint { color: rgba(var(--mkt-texto-rgb), 0.6); font-weight: 400; font-size: 0.78rem; margin-top: 6px; } .mkt-toggle-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 0 auto 36px; } @media (max-width: 700px) { .mkt-toggle-buttons { grid-template-columns: 1fr; } } .mkt-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; background: var(--mkt-superficie); border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px 18px; color: var(--mkt-texto); font-weight: 700; font-size: 0.9rem; text-align: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .mkt-toggle-btn svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--mkt-principal); } .mkt-toggle-btn:hover { transform: translateY(-3px); border-color: var(--mkt-principal); } .mkt-toggle-btn.active { background: rgba(var(--mkt-principal-rgb), 0.08); border-color: var(--mkt-principal); box-shadow: 0 0 0 1px var(--mkt-principal), 0 12px 30px rgba(var(--mkt-principal-rgb), 0.15); } .mkt-form-wrap { max-width: 820px; margin: 0 auto; } .mkt-form { display: none; background: var(--mkt-superficie); border: 1px solid #E2E8F0; border-radius: 18px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; } .mkt-form.active { display: block; } .mkt-form.show { opacity: 1; transform: translateY(0); } .mkt-form .sem-radio-group { margin-bottom: 4px; } .mkt-checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-top: 6px; } @media (max-width: 600px) { .mkt-checkbox-grid { grid-template-columns: 1fr; } } .mkt-checkbox-grid label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--mkt-texto); cursor: pointer; } .mkt-checkbox-grid input { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--mkt-principal); } .mkt-conditional { display: none; } .mkt-conditional.show { display: block; } .mkt-btn-submit { width: 100%; margin-top: 24px; background: linear-gradient(135deg, var(--mkt-principal), var(--mkt-acento)); color: var(--mkt-superficie); padding: 16px; font-size: 1rem; border-radius: 10px; } .mkt-btn-submit:hover { box-shadow: 0 10px 30px rgba(var(--mkt-principal-rgb), 0.4); } .mkt-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* Modal */ .mkt-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .mkt-modal.open { opacity: 1; pointer-events: auto; } .mkt-modal-backdrop { position: absolute; inset: 0; background: rgba(var(--mkt-texto-rgb), 0.75); backdrop-filter: blur(4px); } .mkt-modal-box { position: relative; background: var(--mkt-superficie); border: 1px solid #E2E8F0; border-radius: 18px; padding: 40px 32px 32px; max-width: 440px; width: 100%; text-align: center; transform: scale(0.94); transition: transform 0.2s ease; box-shadow: 0 30px 80px rgba(var(--mkt-texto-rgb), 0.25); } .mkt-modal.open .mkt-modal-box { transform: scale(1); } .mkt-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: rgba(var(--mkt-texto-rgb), 0.45); font-size: 1.1rem; cursor: pointer; } .mkt-modal-close:hover { color: var(--mkt-texto); } .mkt-modal-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(34, 197, 94, 0.15); color: #22C55E; } .mkt-modal-icon svg { width: 30px; height: 30px; } .mkt-modal.error .mkt-modal-icon { background: rgba(218, 37, 29, 0.15); color: var(--rojo-seminario); } .mkt-modal-text { color: var(--mkt-texto); font-size: 0.98rem; line-height: 1.55; margin-bottom: 24px; } .mkt-modal-ok { width: auto; margin-top: 0; padding: 12px 32px; } /* .form-field, .social-row, .site-footer, .footer-col y .footer-brand son compartidos con index/servicios/seminario.html — sus reglas base no se tocan (siguen sirviendo a esas páginas sin cambios). Estos overrides solo aplican dentro de marketplace, atando cada valor a la paleta --mkt-*. */ body.mkt-body .form-field input:not([type="radio"]):not([type="checkbox"]), body.mkt-body .form-field select, body.mkt-body .form-field textarea { background: var(--mkt-superficie); color: var(--mkt-texto); } body.mkt-body .form-field input:focus, body.mkt-body .form-field select:focus, body.mkt-body .form-field textarea:focus { border-color: var(--mkt-principal); box-shadow: 0 0 0 3px rgba(var(--mkt-principal-rgb), 0.15); } body.mkt-body .social-row a img { /* Verificado con muestreo de píxel real: rgb(0,84,163) vs objetivo (0,85,164). */ filter: brightness(0) saturate(100%) invert(42%) sepia(100%) saturate(2473%) hue-rotate(172deg) brightness(65%) contrast(171%); } body.mkt-body .social-row a[data-tooltip]::after { background: var(--mkt-superficie); color: var(--mkt-texto); } body.mkt-body .site-footer { background: var(--mkt-fondo); color: var(--mkt-texto); } body.mkt-body .footer-col h4 { color: var(--mkt-texto); } body.mkt-body .footer-col a, body.mkt-body .footer-col p, body.mkt-body .footer-brand p { color: rgba(var(--mkt-texto-rgb), 0.6); } body.mkt-body .footer-col a:hover { color: var(--mkt-principal); }