/* ========================================================================== styles.css — Equipu ========================================================================== ÍNDICE: 0. Variables y Reset 1. Componentes globales 2. Header y Navegación (más alto, dropdowns continuos) 3. [BLOQUE 1] Slider Cinematográfico (Ken Burns + stagger) 4. [BLOQUE 2] Cursos 5. [BLOQUE 3] Eventos 6. [BLOQUE 4] Medios de Pago 7. Pie de Página 8. Páginas de detalle (curso / evento) 9. Scroll horizontal con flechas + arrastre 10. Responsivo ========================================================================== */ /* ========================================================================== 0. VARIABLES Y RESET ========================================================================== */ :root { --color-fondo: #f1f5f9; --color-blanco: #ffffff; --color-nav: #0a0f1c; --color-primario: #2563eb; --color-primario-h: #1d4ed8; --color-acento: #10b981; --color-texto: #1e293b; --color-texto-s: #64748b; --color-borde: #e2e8f0; --workshop-color: #ea580c; --congreso-color: #6d28d9; --semillero-color: #047857; --capacitacion-color: #b45309; --seminario-color: #059669; --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif; --radio: 10px; --radio-lg: 16px; --sombra-sm: 0 1px 4px rgba(0,0,0,0.07); --sombra-md: 0 4px 16px rgba(0,0,0,0.10); --sombra-lg: 0 12px 40px rgba(0,0,0,0.18); --transicion: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transicion-lg: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Altura del header (se usa también para sticky offsets) */ --header-height: 76px; } /* ── MODO OSCURO (sitio público) ── se activa con ── */ html[data-theme="dark"] { --color-fondo: #131e27; /* slate oscuro (estilo San Market) */ --color-blanco: #1d2b36; /* tarjetas/superficies */ --color-texto: #e8eef3; --color-texto-s: #9fb2bf; --color-borde: #314250; --sombra-sm: 0 1px 4px rgba(0,0,0,0.45); --sombra-md: 0 4px 16px rgba(0,0,0,0.55); --sombra-lg: 0 12px 40px rgba(0,0,0,0.65); } html[data-theme="dark"] body { background: var(--color-fondo); color: var(--color-texto); } /* Ajustes finos de superficies que tenían color fijo (para que coordinen en oscuro) */ html[data-theme="dark"] .asesoria-card { background: var(--color-blanco); } html[data-theme="dark"] .nav-dropdown__enlace:hover, html[data-theme="dark"] .ins-btn--secundario:hover, html[data-theme="dark"] .ins-modal__cerrar:hover { background: rgba(148,163,184,.14); } html[data-theme="dark"] .nav-dropdown__icono, html[data-theme="dark"] .ins-input--disabled { background: #1f2a40; } html[data-theme="dark"] .payment-note { background: #2a2410; border-color: #4d3f14; color: #fde68a; } /* Secciones del inicio con degradado claro fijo → oscuro */ html[data-theme="dark"] .seccion-full--tinte { background: linear-gradient(160deg, #131c30 0%, #0e1626 100%); } html[data-theme="dark"] .seccion-full--claro { background: var(--color-fondo); } /* Títulos que usaban color oscuro fijo (--color-nav) → se vuelven claros */ html[data-theme="dark"] .seccion-full--tinte .section-title, html[data-theme="dark"] .event-card__cuerpo h3, html[data-theme="dark"] .asesoria-card__titulo, html[data-theme="dark"] .asesoria-card__meta strong { color: var(--color-texto); } /* Tarjeta de inicio de sesión / registro del usuario */ html[data-theme="dark"] .auth-card { background: var(--color-blanco); border-color: var(--color-borde); } /* Carrito: tarjetas y botones de cantidad +/- (se adaptan al fondo, estilo San Market) */ html[data-theme="dark"] .car-vacio, html[data-theme="dark"] .car-linea, html[data-theme="dark"] .car-resumen, html[data-theme="dark"] .car-vacio__btn { background: var(--color-blanco); border-color: var(--color-borde); } html[data-theme="dark"] .car-linea__img { background: #1f2a40; } html[data-theme="dark"] .car-qty button { background: rgba(148,163,184,.14); color: var(--color-texto); } html[data-theme="dark"] .car-qty button:hover { background: rgba(148,163,184,.26); } /* Detalle de curso/evento: selector de cantidad +/- */ html[data-theme="dark"] .cupos-stepper { border-color: var(--color-borde); } html[data-theme="dark"] .cupos-stepper .cupos-btn { background: rgba(148,163,184,.14); color: var(--color-texto); } html[data-theme="dark"] .cupos-stepper .cupos-btn:hover { background: rgba(148,163,184,.26); } html[data-theme="dark"] .cupos-stepper input { background: transparent; color: var(--color-texto); } /* ─── Páginas de cuenta / formularios (registro, login, recuperar, perfil, mi cuenta) ─── */ html[data-theme="dark"] .auth-card, html[data-theme="dark"] .perfil-card, html[data-theme="dark"] .cuenta-head, html[data-theme="dark"] .pedido-card, html[data-theme="dark"] .cuenta-vacio { background: var(--color-blanco); border-color: var(--color-borde); } /* Títulos/textos que estaban en color oscuro fijo → claros */ html[data-theme="dark"] .auth-card__head h1, html[data-theme="dark"] .perfil-card h1, html[data-theme="dark"] .cuenta-head__info h1, html[data-theme="dark"] .cuenta-seccion__titulo, html[data-theme="dark"] .pedido-card__codigo, html[data-theme="dark"] .pedido-card__total, html[data-theme="dark"] .auth-field label, html[data-theme="dark"] .perfil-field label, html[data-theme="dark"] .pedido-items li { color: var(--color-texto); } html[data-theme="dark"] .auth-card__head p, html[data-theme="dark"] .perfil-card__sub, html[data-theme="dark"] .auth-foot, html[data-theme="dark"] .cuenta-vacio, html[data-theme="dark"] .pedido-card__pago { color: var(--color-texto-s); } /* Inputs, áreas de texto y selects en TODO el sitio (arregla "campos en blanco") */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input:not([type]), html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .auth-input, html[data-theme="dark"] .perfil-input { background: var(--color-blanco); color: var(--color-texto); border-color: var(--color-borde); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--color-texto-s); } /* Campos/botones bloqueados o secundarios */ html[data-theme="dark"] .perfil-input--lock, html[data-theme="dark"] .perfil-btn--cancel, html[data-theme="dark"] .ins-input--disabled { background: rgba(148,163,184,.14); color: var(--color-texto-s); border-color: var(--color-borde); } /* ─── Carrito ─── */ html[data-theme="dark"] .car-wrap h1, html[data-theme="dark"] .car-linea__info h3, html[data-theme="dark"] .car-linea__total, html[data-theme="dark"] .car-resumen__fila--total { color: var(--color-texto); } html[data-theme="dark"] .car-resumen__fila { color: var(--color-texto-s); } html[data-theme="dark"] .car-btn--seguir { background: var(--color-blanco); border-color: var(--color-borde); color: var(--color-texto); } html[data-theme="dark"] .car-linea__img--ph { color: var(--color-texto-s); } html[data-theme="dark"] .car-qty { border-color: var(--color-borde); } html[data-theme="dark"] .car-qty input { background: transparent; color: var(--color-texto); } /* ─── Panel de inscripción (ficha de curso/evento) ─── */ html[data-theme="dark"] .ins-precio__ahora { color: var(--color-texto); } html[data-theme="dark"] .comp-grupo label { color: var(--color-texto); } html[data-theme="dark"] .comp-select, html[data-theme="dark"] .comp-cant { background: var(--color-blanco); color: var(--color-texto); border-color: var(--color-borde); } html[data-theme="dark"] .btn-agregar-carrito { background: var(--color-blanco); color: var(--color-primario); } /* ─── Modal "Selecciona tu horario" ─── */ html[data-theme="dark"] .hmodal__panel { background: var(--color-blanco); } html[data-theme="dark"] .hmodal__titulo, html[data-theme="dark"] .hmodal__turno-info strong { color: var(--color-texto); } html[data-theme="dark"] .hmodal__turno-info { color: var(--color-texto-s); } html[data-theme="dark"] .hmodal__turno-btn { background: rgba(148,163,184,.10); border-color: var(--color-borde); } html[data-theme="dark"] .hmodal__turno-btn:hover { background: rgba(148,163,184,.18); border-color: var(--color-primario); } html[data-theme="dark"] .hmodal__close:hover { background: rgba(148,163,184,.16); color: var(--color-texto); } /* Botón de cambio de tema (sol/luna) */ .tema-btn{ background: transparent; border: 1px solid var(--color-borde); color: inherit; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: var(--transicion); } .tema-btn:hover{ border-color: var(--color-primario); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--color-fondo); color: var(--color-texto); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; } /* ========================================================================== 1. COMPONENTES GLOBALES ========================================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 0.5rem; } .section-title { font-size: 1.65rem; font-weight: 700; border-left: 4px solid var(--color-primario); padding-left: 0.75rem; } .section-ver-todos { font-size: 0.9rem; color: var(--color-primario); font-weight: 600; transition: color var(--transicion), transform var(--transicion); display: inline-block; } .section-ver-todos:hover { color: var(--color-primario-h); transform: translateX(3px); } .btn-event { display: inline-block; border: 1.5px solid var(--color-primario); color: var(--color-primario); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; transition: background var(--transicion), color var(--transicion), transform var(--transicion); } .btn-event:hover { background: var(--color-primario); color: var(--color-blanco); transform: translateY(-1px); } /* Badges de tipo de evento (usado en slider y tarjetas) */ .event-card__tipo, .slide-badge { display: inline-block; padding: 0.25rem 0.7rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; border-radius: 4px; color: white; text-transform: uppercase; } .workshop-bg { background-color: var(--workshop-color); } .congreso-bg { background-color: var(--congreso-color); } .semillero-bg { background-color: var(--semillero-color); } .capacitacion-bg{ background-color: var(--capacitacion-color); } .seminario-bg { background-color: var(--seminario-color); } /* ========================================================================== 2. HEADER Y NAVEGACIÓN - Más alto (76px), logo con subtítulo, dropdowns sin gap al hover - Eliminado el indicador "Menú fijado" ========================================================================== */ .main-header { background-color: var(--color-nav); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background var(--transicion), backdrop-filter var(--transicion); } .main-header.scrolled { background-color: rgba(10, 15, 28, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .header-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* — Logo con título y subtítulo — */ .header-logo { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; transition: opacity var(--transicion); } .header-logo:hover { opacity: 0.85; } .header-logo__img { height: 46px; width: auto; object-fit: contain; } .header-logo__texto { display: flex; flex-direction: column; line-height: 1.15; } .header-logo__titulo { font-size: 1.05rem; font-weight: 700; color: #f8fafc; letter-spacing: -0.01em; } .header-logo__sub { font-size: 0.72rem; font-weight: 500; color: #64748b; letter-spacing: 0.04em; } /* — Lista de ítems del nav — */ .main-nav__lista { display: flex; align-items: center; gap: 0.15rem; } .main-nav__item { position: relative; /* Esto es CLAVE: el ítem tiene la altura completa del header, así el hover cubre desde el botón hasta el inicio del panel sin "salir" en el medio. */ display: flex; align-items: center; height: var(--header-height); } .main-nav__enlace, .main-nav__btn-dropdown { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; font-size: 0.92rem; font-weight: 500; color: #94a3b8; border-radius: 8px; transition: color var(--transicion), background var(--transicion); white-space: nowrap; cursor: pointer; } .main-nav__enlace:hover, .main-nav__enlace.active, .main-nav__btn-dropdown:hover, .main-nav__item--dropdown.is-open .main-nav__btn-dropdown { color: #f8fafc; background-color: rgba(255,255,255,0.08); } /* — Chevron — */ .nav-chevron { transition: transform var(--transicion); flex-shrink: 0; opacity: 0.7; } .main-nav__item--dropdown.is-open .nav-chevron { transform: rotate(180deg); opacity: 1; } /* — DROPDOWN PANEL — Estrategias clave: 1. top: 100% (no hay gap visible entre botón y panel) 2. padding-top: 14px en .nav-dropdown crea el espacio visual SIN cortar el hover 3. Posicionado con left: 0 para evitar saltos al cambiar de ancho 4. position absolute en .main-nav__item para anclar correctamente */ .nav-dropdown { position: absolute; top: 100%; left: 0; padding-top: 8px; /* Espacio visual + área de hover continua */ min-width: 320px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity var(--transicion), visibility var(--transicion), transform var(--transicion); z-index: 1001; } .main-nav__item--dropdown.is-open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-dropdown__panel { background-color: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); overflow: hidden; } .nav-dropdown__header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem 0.7rem; border-bottom: 1px solid var(--color-borde); } .nav-dropdown__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-texto-s); } .nav-dropdown__ver-todos { font-size: 0.78rem; color: var(--color-primario); font-weight: 600; transition: color var(--transicion); } .nav-dropdown__ver-todos:hover { color: var(--color-primario-h); } .nav-dropdown__lista { padding: 0.4rem 0; } /* — Ítems del dropdown — más altos cuando es "eventos" para más espacio — */ .nav-dropdown__enlace { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; transition: background var(--transicion), padding var(--transicion); } .nav-dropdown__panel--eventos .nav-dropdown__enlace { padding: 1.1rem 1.2rem; /* Más altura para el dropdown de eventos */ } .nav-dropdown__enlace:hover { background-color: #f8fafc; padding-left: 1.4rem; } .nav-dropdown__panel--eventos .nav-dropdown__enlace:hover { padding-left: 1.5rem; } .nav-dropdown__icono { font-size: 1.4rem; width: 36px; height: 36px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transicion); } .nav-dropdown__enlace:hover .nav-dropdown__icono { background: #e0e7ff; } .nav-dropdown__enlace strong { display: block; font-size: 0.9rem; color: var(--color-texto); line-height: 1.3; font-weight: 600; } .nav-dropdown__enlace small { display: block; font-size: 0.76rem; color: var(--color-texto-s); margin-top: 0.2rem; } .nav-dropdown__lista li + li { border-top: 1px solid #f1f5f9; } /* ========================================================================== 3. [BLOQUE 1] SLIDER CINEMATOGRÁFICO - Capas separadas: imagen + glow + texto - Imagen: Ken Burns (zoom lento) - Texto: stagger animation (título 0ms, desc 200ms, footer 400ms) ========================================================================== */ .hero-cinematic { width: 100%; height: calc(100vh - var(--header-height)); min-height: 560px; max-height: 780px; position: relative; overflow: hidden; background-color: #0a0f1c; } .cinematic-slider { width: 100%; height: 100%; position: relative; } .slide-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s ease; z-index: 1; } .slide-item.active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; } /* CAPA 1: Imagen con Ken Burns (zoom lento + leve desplazamiento) */ .slide-image-layer { position: absolute; inset: 0; overflow: hidden; } .slide-image-layer img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) contrast(1.1) saturate(1.1); transform: scale(1.02); transition: none; } /* Cuando el slide está activo: la imagen se "respira" hacia adelante */ .slide-item.active .slide-image-layer img { animation: kenBurns 9s ease-out forwards; } @keyframes kenBurns { 0% { transform: scale(1.02) translateX(0); } 100% { transform: scale(1.10) translateX(-1.5%); } } /* CAPA 2: Glow ambiental con gradiente radial */ .slide-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; } .slide-item.active .slide-glow { opacity: 1; } .slide-glow--1 { background: radial-gradient(circle at 75% 35%, rgba(251, 146, 60, 0.22) 0%, transparent 50%), radial-gradient(circle at 25% 85%, rgba(14, 165, 233, 0.18) 0%, transparent 55%), linear-gradient(to top, rgba(10,15,28,0.95) 0%, rgba(10,15,28,0.3) 55%, transparent 100%); } .slide-glow--2 { background: radial-gradient(circle at 70% 40%, rgba(168, 85, 247, 0.25) 0%, transparent 55%), radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%), linear-gradient(to top, rgba(10,15,28,0.95) 0%, rgba(10,15,28,0.3) 55%, transparent 100%); } .slide-glow--3 { background: radial-gradient(circle at 75% 30%, rgba(52, 211, 153, 0.22) 0%, transparent 55%), radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.16) 0%, transparent 55%), linear-gradient(to top, rgba(10,15,28,0.95) 0%, rgba(10,15,28,0.3) 55%, transparent 100%); } .slide-glow--4 { background: radial-gradient(circle at 70% 35%, rgba(251, 191, 36, 0.25) 0%, transparent 55%), radial-gradient(circle at 25% 85%, rgba(249, 115, 22, 0.18) 0%, transparent 55%), linear-gradient(to top, rgba(10,15,28,0.95) 0%, rgba(10,15,28,0.3) 55%, transparent 100%); } /* CAPA 3: Contenido (texto + botones) con stagger animation */ .slide-content-layer { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; padding: 4rem 5rem 5rem; } .slide-content { max-width: 720px; color: white; } /* Estado inicial de los elementos: ocultos y desplazados */ .slide-badge, .slide-titulo, .slide-desc, .slide-footer { opacity: 0; transform: translateY(16px); } /* Cuando el slide está activo: cada elemento entra con delay (stagger) */ .slide-item.active .slide-badge { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; } .slide-item.active .slide-titulo { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards; } .slide-item.active .slide-desc { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.19s forwards; } .slide-item.active .slide-footer { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .slide-badge { display: inline-block; margin-bottom: 1rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .slide-titulo { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.1rem; background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 4px 30px rgba(0,0,0,0.3); } .slide-desc { font-size: 1.05rem; color: #cbd5e1; max-width: 560px; margin-bottom: 1.5rem; line-height: 1.65; } .slide-footer { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .slide-fecha { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #fbbf24; } .slide-item[data-theme="purple"] .slide-fecha { color: #c4b5fd; } .slide-item[data-theme="green"] .slide-fecha { color: #6ee7b7; } .slide-item[data-theme="amber"] .slide-fecha { color: #fde047; } .slide-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: white; padding: 0.7rem 1.4rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--transicion), border-color var(--transicion), transform var(--transicion), gap var(--transicion); } .slide-cta:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); gap: 0.85rem; } /* Controles del slider */ .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); border-radius: 50%; width: 50px; height: 50px; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background var(--transicion), transform var(--transicion), border-color var(--transicion); } .slider-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); transform: translateY(-50%) scale(1.1); } .prev-btn { left: 32px; } .next-btn { right: 32px; } /* Indicadores */ .slider-dots { position: absolute; bottom: 36px; left: 5rem; display: flex; gap: 0.5rem; z-index: 10; } .dot { width: 26px; height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; cursor: pointer; transition: width 0.5s ease, background 0.5s ease; } .dot.active { background: #fff; width: 56px; } /* ========================================================================== 4. [BLOQUE 2] CURSOS ========================================================================== */ .courses-section { padding: 3.5rem 0 2.5rem; background-color: var(--color-fondo); } .courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .course-card { background: var(--color-blanco); border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--color-borde); transition: box-shadow var(--transicion-lg), transform var(--transicion-lg); } .course-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-6px); } .course-card__link { display: flex; flex-direction: column; height: 100%; } .course-card__imagen { position: relative; height: 175px; background: #e2e8f0; overflow: hidden; } .course-card__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lg); } .course-card:hover .course-card__imagen img { transform: scale(1.06); } .course-card__tag { position: absolute; bottom: 10px; left: 10px; background: var(--color-acento); color: white; padding: 0.22rem 0.7rem; font-size: 0.72rem; font-weight: 700; border-radius: 20px; } .course-card__cuerpo { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; gap: 0.6rem; } .course-card__cuerpo h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--color-texto); } .course-card__cuerpo p { font-size: 0.875rem; color: var(--color-texto-s); flex-grow: 1; line-height: 1.55; } .course-card__link-text { font-size: 0.875rem; font-weight: 600; color: var(--color-primario); transition: gap var(--transicion); display: inline-flex; align-items: center; margin-top: 0.5rem; } .course-card:hover .course-card__link-text { color: var(--color-primario-h); } /* ========================================================================== 5. [BLOQUE 3] EVENTOS ========================================================================== */ .events-section { padding: 3.5rem 0 2.5rem; background: var(--color-blanco); border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); } .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .event-card { border: 1px solid var(--color-borde); border-radius: var(--radio-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--color-blanco); transition: box-shadow var(--transicion-lg), transform var(--transicion-lg); } .event-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-5px); } .event-card__header { padding: 0.9rem 1.25rem; display: flex; justify-content: space-between; align-items: center; color: white; } .event-card__tipo { font-weight: 700; } .event-card__fecha { font-size: 0.82rem; font-weight: 600; opacity: 0.92; } .event-card__cuerpo { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; gap: 0.6rem; } .event-card__cuerpo h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .event-card__cuerpo p { font-size: 0.875rem; color: var(--color-texto-s); flex-grow: 1; } .event-card__meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--color-texto-s); padding: 0.6rem 0; border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); } /* Acciones de la tarjeta de evento (Ver detalle + Inscribirse) */ .event-card__acciones { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; } .event-card__acciones .btn-event { flex: 1; text-align: center; } .event-card__acciones .btn-inscribirse { flex: 1; } /* ========================================================================== 6. [BLOQUE 4] MEDIOS DE PAGO ========================================================================== */ .payment-section { padding: 3.5rem 0 2.5rem; background: var(--color-fondo); } .payment-intro { color: var(--color-texto-s); margin-bottom: 1.5rem; max-width: 680px; } .payment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; } /* Variante de 2 columnas (cuando solo hay 2 medios de pago) */ .payment-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 820px; } @media (max-width: 600px) { .payment-grid--two { grid-template-columns: 1fr; } } .payment-card { background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: 1.5rem; transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); } .payment-card:hover { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); transform: translateY(-2px); } .payment-card__icono { font-size: 1.8rem; margin-bottom: 0.65rem; } .payment-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-borde); } .payment-card__lista { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--color-texto-s); } .payment-card__lista strong { color: var(--color-texto); } .payment-note { background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radio); padding: 0.9rem 1.25rem; font-size: 0.875rem; color: #92400e; max-width: 680px; } .payment-note a { color: var(--color-primario); text-decoration: underline; } /* ========================================================================== 7. PIE DE PÁGINA ========================================================================== */ .main-footer { background-color: #0a0f1c; color: #94a3b8; margin-top: auto; } .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.5fr; gap: 2rem; } .footer-col--brand p { font-size: 0.85rem; line-height: 1.65; color: #64748b; margin-top: 0.5rem; } .footer-logo { height: 44px; width: auto; filter: brightness(0) invert(1) opacity(0.7); margin-bottom: 0.5rem; } .footer-col h4 { color: #f1f5f9; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1rem; } .footer-social, .footer-contact { display: flex; flex-direction: column; gap: 0.55rem; } .footer-social a { font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; color: #64748b; transition: color var(--transicion); } .footer-social a:hover { color: #f1f5f9; } .footer-contact { gap: 0.7rem; } .footer-contact li { display: flex; flex-direction: column; gap: 0.1rem; } .footer-contact small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; } .footer-contact a, .footer-contact span { font-size: 0.85rem; color: #64748b; transition: color var(--transicion); } .footer-contact a:hover { color: #f1f5f9; } .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; color: #475569; } .footer-bottom__links { display: flex; gap: 1.5rem; } .footer-bottom__links a { color: #475569; transition: color var(--transicion); } .footer-bottom__links a:hover { color: #94a3b8; } /* ========================================================================== 8. PÁGINAS DE DETALLE (curso y evento) ========================================================================== */ .detalle-hero, .evento-hero { background: linear-gradient(135deg, #0a0f1c 0%, #1e293b 100%); color: white; padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } .detalle-hero::before, .evento-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 30%, rgba(37,99,235,0.18) 0%, transparent 55%); pointer-events: none; } .detalle-hero__container, .evento-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; } .breadcrumb { display: flex; gap: 0.5rem; font-size: 0.82rem; color: #64748b; margin-bottom: 1.5rem; align-items: center; } .breadcrumb a { color: #94a3b8; transition: color var(--transicion); } .breadcrumb a:hover { color: #f1f5f9; } .breadcrumb__sep { color: #475569; } .detalle-hero__tag, .evento-hero__tipo { display: inline-block; padding: 0.25rem 0.8rem; border-radius: 5px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: white; margin-bottom: 0.75rem; } .detalle-hero__tag { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #e2e8f0; } .detalle-hero__titulo, .evento-hero__titulo { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 0.75rem; background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; max-width: 750px; } .detalle-hero__desc, .evento-hero__desc { font-size: 1.05rem; color: #94a3b8; max-width: 660px; line-height: 1.65; } .detalle-hero__meta { display: flex; gap: 1.5rem; margin-top: 1.25rem; flex-wrap: wrap; } .detalle-hero__meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: #94a3b8; } /* — Layout 2 columnas — */ .detalle-layout { width: 100%; max-width: 1360px; margin: 0 auto; align-self: center; padding: 2.5rem 2rem 4rem; display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; } .detalle-seccion { margin-bottom: 2.5rem; } .detalle-seccion__titulo { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--color-borde); } .modulo-lista { display: flex; flex-direction: column; gap: 0.75rem; } .modulo-item { background: var(--color-blanco); border: 1px solid var(--color-borde); border-left: 3px solid var(--color-primario); border-radius: var(--radio); padding: 1rem 1.25rem; min-height: 84px; display: flex; flex-direction: column; justify-content: center; transition: box-shadow var(--transicion), transform var(--transicion); } .modulo-item:hover { box-shadow: var(--sombra-sm); transform: translateX(4px); } .modulo-item h3, .modulo-item h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; } .modulo-item p { font-size: 0.875rem; color: var(--color-texto-s); } /* — Tarjeta de inscripción — */ .tarjeta-inscripcion { background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); overflow: hidden; position: sticky; top: calc(var(--header-height) + 16px); box-shadow: var(--sombra-md); } .tarjeta-inscripcion__imagen { height: 180px; background: linear-gradient(135deg, #1e293b, #0a0f1c); display: flex; align-items: center; justify-content: center; color: #475569; font-size: 0.85rem; } .tarjeta-inscripcion__cuerpo { padding: 1.25rem; } .tarjeta-inscripcion__titulo { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; } .tarjeta-inscripcion__dato { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--color-texto-s); padding: 0.4rem 0; border-bottom: 1px solid var(--color-borde); } .tarjeta-inscripcion__dato strong { color: var(--color-texto); font-weight: 600; } .tarjeta-inscripcion__btn { display: block; width: 100%; background: var(--color-primario); color: white; padding: 0.75rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-align: center; margin-top: 1rem; transition: background var(--transicion), transform var(--transicion); } .tarjeta-inscripcion__btn:hover:not(.disabled) { background: var(--color-primario-h); transform: translateY(-1px); } .tarjeta-inscripcion__btn.disabled { background: #94a3b8; cursor: not-allowed; } /* — Categoría de eventos/cursos con scroll — */ .evento-section, .catalogo-section { padding: 3rem 0 2rem; } .categoria-bloque { margin-bottom: 3rem; } .categoria-bloque__titulo { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .categoria-bloque__desc { font-size: 0.875rem; color: var(--color-texto-s); margin-bottom: 1rem; } /* ========================================================================== 9. SCROLL HORIZONTAL: FLECHAS + ARRASTRE ========================================================================== */ .scroll-row-wrapper { position: relative; } .scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 42px; height: 42px; background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--color-texto); box-shadow: var(--sombra-md); transition: background var(--transicion), transform var(--transicion), opacity var(--transicion), color var(--transicion); } .scroll-arrow:hover { background: var(--color-primario); color: white; border-color: var(--color-primario); transform: translateY(-50%) scale(1.1); } .scroll-arrow.hidden { opacity: 0; pointer-events: none; } .scroll-arrow--izq { left: -20px; } .scroll-arrow--der { right: -20px; } .scroll-row { overflow: hidden; padding: 0.5rem 0.25rem 1rem; } .scroll-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; user-select: none; -webkit-user-select: none; padding-bottom: 4px; } /* La "manito" para arrastrar SOLO aparece en filas con 5+ tarjetas */ .scroll-track--draggable { cursor: grab; } .scroll-track::-webkit-scrollbar { display: none; } .scroll-track--draggable.is-dragging { cursor: grabbing; } /* Tarjeta dentro del scroll */ .evento-mini-card { flex-shrink: 0; width: 270px; background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transicion-lg), transform var(--transicion-lg); } .evento-mini-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-4px); } .evento-mini-card__imagen { height: 140px; background: #e2e8f0; overflow: hidden; } .evento-mini-card__imagen img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform var(--transicion-lg); } .evento-mini-card:hover .evento-mini-card__imagen img { transform: scale(1.06); } .evento-mini-card__cuerpo { padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; } .evento-mini-card__cuerpo .slide-badge, .evento-mini-card__cuerpo .event-card__tipo { align-self: flex-start; } .evento-mini-card__cuerpo h3, .evento-mini-card__cuerpo h4 { font-size: 0.95rem; font-weight: 700; line-height: 1.3; } .evento-mini-card__cuerpo p { font-size: 0.8rem; color: var(--color-texto-s); line-height: 1.5; flex-grow: 1; } .evento-mini-card__pie { padding: 0.75rem 1rem; border-top: 1px solid var(--color-borde); display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--color-texto-s); } /* Pie con botón "Inscribirse" en lugar de "Ver detalle" */ .evento-mini-card__pie--acciones { gap: 0.5rem; } .evento-mini-card__pie--acciones span { flex-shrink: 0; } .evento-mini-card__pie--acciones .btn-inscribirse { flex-shrink: 0; } .evento-mini-card__enlace { font-size: 0.8rem; color: var(--color-primario); font-weight: 600; transition: color var(--transicion); } .evento-mini-card__enlace:hover { color: var(--color-primario-h); } /* ========================================================================== 10. RESPONSIVO ========================================================================== */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } .detalle-layout { grid-template-columns: 1fr; } .tarjeta-inscripcion { position: static; } } @media (max-width: 768px) { .main-nav { display: none; } :root { --header-height: 64px; } .header-logo__sub { display: none; } .header-logo__img { height: 38px; } .hero-cinematic { height: auto; min-height: 540px; padding: 2rem 0 3rem; } .slide-content-layer { padding: 2rem 1.5rem 3rem; } .slide-titulo { font-size: 1.85rem; } .slide-desc { font-size: 0.95rem; } .courses-grid, .events-grid, .payment-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-bottom { flex-direction: column; text-align: center; } .detalle-hero__titulo, .evento-hero__titulo { font-size: 1.7rem; } .scroll-arrow--izq { left: -6px; } .scroll-arrow--der { right: -6px; } } @media (max-width: 480px) { .container, .header-container, .footer-grid, .footer-bottom { padding-left: 1rem; padding-right: 1rem; } .slider-dots { left: 1.5rem; } } /* ========================================================================== 11. MODAL DE INSCRIPCIÓN ========================================================================== Inyectado dinámicamente desde script.js ========================================================================== */ .ins-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .ins-modal.is-open { display: flex; animation: insFadeIn 0.25s ease; } @keyframes insFadeIn { from { opacity: 0; } to { opacity: 1; } } .ins-modal__overlay { position: absolute; inset: 0; background: rgba(10, 15, 28, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } .ins-modal__contenido { position: relative; background: var(--color-blanco); border-radius: var(--radio-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.4); max-width: 680px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 2.25rem 2rem 0; animation: insSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* Botonera del formulario: queda fija abajo del modal para que "Guardar" siempre se vea */ .ins-form-botones { position: sticky; bottom: 0; background: var(--color-blanco); padding: 1rem 0 1.5rem; margin-top: 0.5rem; border-top: 1px solid var(--color-borde); z-index: 2; } @keyframes insSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .ins-modal__cerrar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-texto-s); transition: background var(--transicion), color var(--transicion); z-index: 2; } .ins-modal__cerrar:hover { background: #f1f5f9; color: var(--color-texto); } .ins-step__icon { font-size: 2.6rem; text-align: center; margin-bottom: 0.75rem; color: var(--color-primario); display: flex; justify-content: center; } .ins-step__icon--ok { color: var(--color-acento); animation: insPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes insPopIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .ins-modal__titulo { font-size: 1.45rem; font-weight: 700; text-align: center; color: var(--color-texto); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .ins-modal__subtitulo { text-align: center; color: var(--color-texto-s); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.5rem; max-width: 440px; margin-left: auto; margin-right: auto; } /* ─── Formulario ─── */ .ins-form-grupo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .ins-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .ins-form-grupo--full { grid-column: 1 / -1; } .ins-label { font-size: 0.82rem; font-weight: 600; color: var(--color-texto); } .ins-req { color: #dc2626; } .ins-input { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--color-borde); border-radius: 8px; font-size: 0.92rem; font-family: inherit; transition: border-color var(--transicion), box-shadow var(--transicion); color: var(--color-texto); background: var(--color-blanco); } .ins-input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .ins-input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10); } .ins-input--disabled { background: #f1f5f9; color: var(--color-texto-s); cursor: not-allowed; font-weight: 600; } .ins-input--file { padding: 0.55rem 0.8rem; font-size: 0.85rem; cursor: pointer; } .ins-input--file::file-selector-button { background: var(--color-primario); color: white; border: none; padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; margin-right: 0.7rem; cursor: pointer; transition: background var(--transicion); } .ins-input--file::file-selector-button:hover { background: var(--color-primario-h); } .ins-error { font-size: 0.78rem; color: #dc2626; min-height: 1em; transition: opacity var(--transicion); } .ins-error:empty { display: none; } /* ─── Botones ─── */ .ins-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion); border: 1.5px solid transparent; } .ins-btn--primario { background: var(--color-primario); color: white; width: 100%; margin-top: 0.5rem; } .ins-btn--primario:hover { background: var(--color-primario-h); transform: translateY(-1px); } .ins-btn--secundario { background: var(--color-blanco); color: var(--color-texto); border-color: var(--color-borde); } .ins-btn--secundario:hover { background: #f8fafc; border-color: var(--color-texto-s); } .ins-form-botones { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; } .ins-form-botones .ins-btn { flex: 0 0 auto; min-width: 140px; } /* ─── Botón global de inscripción "Inscribirse" ─── */ .btn-inscribirse { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, var(--color-acento) 0%, #059669 100%); color: white; padding: 0.65rem 1.3rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600; border: none; cursor: pointer; transition: background var(--transicion-lg), transform var(--transicion), box-shadow var(--transicion); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); } .btn-inscribirse:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); } .btn-inscribirse:active { transform: translateY(0); } .btn-inscribirse::after { content: '→'; transition: transform var(--transicion); } .btn-inscribirse:hover::after { transform: translateX(3px); } .btn-inscribirse--small { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn-inscribirse--full { width: 100%; } /* ─── Responsivo del modal ─── */ @media (max-width: 600px) { .ins-modal { padding: 0.75rem; } .ins-modal__contenido { padding: 2rem 1.25rem 1.5rem; } .ins-form-grid { grid-template-columns: 1fr; } .ins-modal__titulo { font-size: 1.2rem; } } /* ========================================================================== AÑADIDOS prueba7 — copiar pagos, recuadros de relleno, grilla estática ========================================================================== */ /* ─── Botones de copiar (medios de pago) ─── */ .payment-card__botones { display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-copiar { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; background: var(--color-primario, #2563eb); color: #fff; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background .18s ease, transform .18s ease; } .btn-copiar:hover { background: var(--color-primario-h, #1d4ed8); transform: translateY(-1px); } .btn-copiar:active { transform: translateY(0); } .btn-copiar--sec { background: #64748b; } .btn-copiar--sec:hover { background: #475569; } .btn-copiar.is-copiado { background: var(--color-acento, #10b981); } /* Tonos distintos para los bloques de pago (puedes variar los colores) */ .payment-card--yape { border-top: 4px solid #7e22ce; } .payment-card--bcp { border-top: 4px solid #1d4ed8; } .payment-card--yape .btn-copiar { background: #7e22ce; } .payment-card--yape .btn-copiar:hover { background: #6b21a8; } /* ─── Recuadros de relleno cuando no hay imagen (en vez de imagen rota) ─── */ .course-card__placeholder, .evento-mini-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #64748b; } .slide-image-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } .slide-image-placeholder--orange { background: linear-gradient(135deg, #7c2d12 0%, #1e293b 60%); } .slide-image-placeholder--purple { background: linear-gradient(135deg, #4c1d95 0%, #1e293b 60%); } .slide-image-placeholder--green { background: linear-gradient(135deg, #064e3b 0%, #1e293b 60%); } .slide-image-placeholder--amber { background: linear-gradient(135deg, #78350f 0%, #1e293b 60%); } /* ─── Fila estática (categorías con menos de 5: una sola fila, sin barra, se arrastra con el clic) ─── */ .cursos-grid-estatico { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; /* sin barra (Firefox) */ -ms-overflow-style: none; cursor: grab; user-select: none; } .cursos-grid-estatico::-webkit-scrollbar { display: none; } /* sin barra (Chrome) */ .cursos-grid-estatico.is-dragging { cursor: grabbing; } .cursos-grid-estatico > .evento-mini-card { flex: 0 0 300px; max-width: 300px; } /* ─── Tarjeta de curso clicable entera ─── */ .evento-mini-card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .evento-mini-card--link:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); } /* Mientras se arrastra la fila, las tarjetas no muestran la mano de "clic" */ .scroll-track--draggable.is-dragging .evento-mini-card--link { cursor: grabbing; } /* ========================================================================== AÑADIDOS prueba8 — tarjeta sticky, combobox modal, página Asesorías ========================================================================== */ /* ─── Tarjeta de inscripción que sigue el scroll (no queda espacio vacío) ─── */ .detalle-layout > aside { align-self: stretch; } /* el aside ocupa todo el alto → la tarjeta puede "viajar" al hacer scroll */ .tarjeta-inscripcion { position: sticky; top: 90px; /* deja espacio bajo el header fijo */ } /* ─── Combobox del formulario de inscripción ─── */ #insHorario, #insModalidad { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; cursor: pointer; } /* ─── Página de Asesorías ─── */ .asesorias-section { padding: 3rem 0 4rem; } .asesorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .asesoria-card { background: #fff; border: 1px solid var(--color-borde, #e2e8f0); border-radius: var(--radio-lg, 14px); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; transition: transform .2s ease, box-shadow .2s ease; } .asesoria-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,0.10); } .asesoria-card__icono { font-size: 2.5rem; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 14px; } .asesoria-card__titulo { font-size: 1.15rem; font-weight: 700; color: var(--color-nav, #0a0f1c); } .asesoria-card__desc { color: var(--color-texto-s, #64748b); font-size: 0.92rem; line-height: 1.6; } .asesoria-card__meta { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--color-borde, #e2e8f0); font-size: 0.82rem; color: var(--color-texto-s, #64748b); } .asesoria-card__meta strong { color: var(--color-nav, #0a0f1c); } .asesoria-card__cta { margin-top: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1rem; background: var(--color-primario, #2563eb); color: #fff; border-radius: 9px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background .18s ease; } .asesoria-card__cta:hover { background: var(--color-primario-h, #1d4ed8); } /* ========================================================================== ANIMACIONES (GSAP) — Koto, Locomotive, Advanced Team + toque Nike ========================================================================== */ /* ─── LOCOMOTIVE: cada letra es un bloque que puede animarse ─── */ .titulo-animado { overflow: hidden; } .titulo-animado .letra { display: inline-block; will-change: transform, opacity; } /* Cada palabra es una unidad que NO se parte por dentro; la línea solo corta en los espacios. Evita "Dato/s" o "e/n la Nube" en pantallas angostas. */ .titulo-animado .palabra { display: inline-block; white-space: nowrap; } /* ─── KOTO: sección de frase con palabra cambiante ─── */ .seccion-transformacion { background: var(--color-nav, #0a0f1c); color: #fff; padding: 6rem 0; min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .seccion-transformacion--full { min-height: 100vh; } .seccion-transformacion::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(37,99,235,0.22) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(16,185,129,0.18) 0%, transparent 45%); pointer-events: none; } .seccion-transformacion .container { position: relative; z-index: 1; } .transformacion-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; font-weight: 700; color: var(--color-acento, #10b981); margin-bottom: 1.25rem; } .transformacion-frase { font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; } .palabra-cambiante { display: inline-block; color: var(--color-acento, #10b981); will-change: transform, opacity; min-width: 1ch; } .transformacion-sub { margin-top: 1.5rem; color: #94a3b8; font-size: 1.05rem; max-width: 540px; margin-left: auto; margin-right: auto; } /* ─── ADVANCED TEAM: las imágenes se mueven dentro de una máscara fija ─── */ .anim-card .course-card__imagen, .anim-card .evento-mini-card__imagen { overflow: hidden; } .anim-card img { will-change: transform, opacity; } /* ─── Toque NIKE para las tarjetas de curso del index ─── */ .courses-grid { gap: 1.75rem; } .course-card__imagen { height: 240px; } /* imagen más protagonista */ .course-card:hover .course-card__imagen img { transform: scale(1.08); } .course-card__tag { background: rgba(10,15,28,0.78); backdrop-filter: blur(4px); top: 12px; bottom: auto; left: 12px; /* etiqueta arriba, estilo Nike */ } .course-card__link-text { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.5rem 1.05rem; border: 1.5px solid var(--color-borde, #e2e8f0); border-radius: 30px; /* botón pastilla */ transition: background var(--transicion, .2s) ease, color .2s ease, border-color .2s ease; } .course-card:hover .course-card__link-text { background: var(--color-nav, #0a0f1c); color: #fff; border-color: var(--color-nav, #0a0f1c); } @media (prefers-reduced-motion: reduce) { .seccion-transformacion { min-height: auto; padding: 4rem 0; } } /* ========================================================================== prueba10 — Secciones a PANTALLA COMPLETA con título centrado (estilo Nike) ========================================================================== */ /* Cada bloque ocupa toda la pantalla y centra su contenido verticalmente */ .seccion-full { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; } /* Colores distintos por bloque */ .seccion-full--claro { background: var(--color-fondo, #f1f5f9); } .seccion-full--oscuro { background: linear-gradient(160deg, #0a0f1c 0%, #111827 60%, #1e293b 100%); color: #fff; } .seccion-full--tinte { background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 100%); } /* En el bloque oscuro, el título va en blanco y las tarjetas resaltan */ .seccion-full--oscuro .section-title { color: #fff; } .seccion-full--oscuro .event-card { box-shadow: 0 18px 50px rgba(0,0,0,0.45); } /* Encabezado centrado: título grande al centro de la pantalla */ .section-header--centro { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin-bottom: 2.5rem; } .section-header--centro .section-title { font-size: clamp(2.2rem, 6vw, 4.5rem); /* grande, tipo Nike */ border-left: none; /* sin la barra lateral */ padding-left: 0; justify-content: center; } .section-header--centro .section-ver-todos { margin-top: 0.25rem; } /* En pantallas chicas no forzamos 100vh (evita que se vea vacío) */ @media (max-width: 700px) { .seccion-full { min-height: auto; padding: 3rem 0; } } @media (prefers-reduced-motion: reduce) { .seccion-full { min-height: auto; padding: 3.5rem 0; } } /* ─── Catálogos: cada categoría también a pantalla completa, centrada ─── */ .catalogo-section .categoria-bloque { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0; } .catalogo-section .categoria-bloque__titulo { font-size: clamp(2rem, 5.5vw, 4rem); text-align: center; justify-content: center; } .catalogo-section .categoria-bloque__desc { text-align: center; } .catalogo-section .scroll-row-wrapper, .catalogo-section .cursos-grid-estatico { margin-top: 2rem; } @media (max-width: 700px) { .catalogo-section .categoria-bloque { min-height: auto; padding: 2.5rem 0; } } @media (prefers-reduced-motion: reduce) { .catalogo-section .categoria-bloque { min-height: auto; padding: 3rem 0; } } /* ========================================================================== prueba10_1 — Verificador (paso 1) y altura del cuestionario ========================================================================== */ /* El paso 1 (DNI) compacto y centrado: campo y botón NO estirados */ #insStep1 { max-width: 380px; margin-left: auto; margin-right: auto; text-align: center; } #insStep1 .ins-label, #insStep1 .ins-error { display: block; text-align: left; } #insBtnContinuar { width: auto; min-width: 200px; padding-left: 2.5rem; padding-right: 2.5rem; } /* Los botones del cuestionario tampoco se estiran (anula el width:100% del primario) */ .ins-form-botones .ins-btn { flex: 0 0 auto; width: auto; min-width: 140px; } /* Cuestionario un poco más alto y con aire para que se vea la nota y los botones */ .ins-modal__contenido { max-height: 95vh; } .ins-step__icon svg { display: block; } /* La nota del comprobante siempre visible */ .ins-input--file { margin-top: 0.25rem; } /* ========================================================================== prueba12 — Filas Nike (una sola línea + arrastre), títulos Koto, footer full ========================================================================== */ /* ─── Fila estilo Nike: una sola línea, se arrastra con el clic, sin barra ─── */ .nike-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1.5rem; overflow-x: auto; padding: 0.5rem 0 1.5rem; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; scroll-snap-type: x proximity; } .nike-row::-webkit-scrollbar { display: none; } .nike-row.is-dragging { cursor: grabbing; } /* Bloque Cursos del index: deslizamiento libre y suave como el catálogo (sin scroll-snap, que se sentía "pegajoso" al arrastrar con el mouse). */ #bloque-2-cursos .nike-row { scroll-snap-type: none; scroll-behavior: auto; } #bloque-2-cursos .nike-row > * { scroll-snap-align: none; } /* Cualquier hijo directo: no se estira, queda en la fila */ .nike-row > * { flex: 0 0 330px; width: 330px; max-width: 330px; scroll-snap-align: start; } /* Anchos por tipo */ .nike-row > .event-card, .nike-row--pago > .payment-card { flex-basis: 360px; width: 360px; max-width: 360px; } /* Las tarjetas no se deforman al arrastrar */ .nike-row img { pointer-events: none; } /* Respaldo universal: ningún enlace/imagen de una fila ARRASTRABLE dispara el "arrastre nativo" del navegador (ese recuadro fantasma con la URL). Apunta a [data-draggable="1"] — el mismo selector que activa el arrastre en script.js — así cubre TODOS los bloques: el index (Cursos, Eventos, Pagos) y los catálogos de cursos y eventos (filas de 5+ y grillas), incluso tarjetas que se agreguen en el futuro sin recordar el atributo draggable="false". */ [data-draggable="1"] a, [data-draggable="1"] img { -webkit-user-drag: none; user-select: none; } /* ─── Títulos con transición Koto (deslizan dentro de una máscara) ─── */ .titulo-koto { overflow: hidden; padding-bottom: 0.12em; /* aire para que no corte las colas (g, p, y) */ } .koto-inner { display: inline-block; will-change: transform; } /* ─── Contraste de títulos por bloque (que SIEMPRE se lean) ─── */ .seccion-full--claro .section-title, .seccion-full--tinte .section-title { color: var(--color-nav, #0a0f1c); } .seccion-full--oscuro .section-title { color: #ffffff; } /* ─── Pie de página a PANTALLA COMPLETA (estilo del ejemplo) ─── */ .main-footer { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, #0a0f1c 0%, #111827 70%, #0a0f1c 100%); } .main-footer .footer-grid { margin: auto 0; } .main-footer .footer-bottom { margin-top: auto; } @media (max-width: 700px) { .main-footer { min-height: auto; } .nike-row > .course-card, .nike-row > .event-card, .nike-row--pago > .payment-card { flex-basis: 82%; max-width: 82%; } } @media (prefers-reduced-motion: reduce) { .main-footer { min-height: auto; } } /* ========================================================================== prueba14 — Eventos clickables/legibles, iconos de pago, footer mejorado ========================================================================== */ /* Título del evento SIEMPRE visible (estaba blanco sobre blanco) */ .event-card__cuerpo h3 { color: var(--color-nav, #0a0f1c); } /* Toda la tarjeta de evento es un enlace (cursor de mano, sin subrayado) */ .event-card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } .event-card--link:hover { box-shadow: var(--sombra-lg); transform: translateY(-6px); } .event-card--link .btn-event { /* el "Ver más" ahora es visual, no enlace */ display: inline-block; text-align: center; width: 100%; } /* Ícono de pago como imagen (cuando subes una a imagenes/pagos/) */ .payment-card__img { width: auto; height: 56px; max-width: 90px; object-fit: contain; display: block; } .payment-card__emoji { font-size: 2.4rem; line-height: 1; } /* ─── Pie de página: letras más grandes y mejor distribuido (estilo ejemplo) ─── */ .main-footer .footer-grid { gap: 3rem 4rem; max-width: 1100px; margin-left: auto; margin-right: auto; width: 100%; } .main-footer .footer-col h4 { font-size: 1.25rem; margin-bottom: 1.1rem; letter-spacing: 0.3px; } .main-footer .footer-col p, .main-footer .footer-social a, .main-footer .footer-contact a { font-size: 1.05rem; line-height: 1.7; } .main-footer .footer-contact li { margin-bottom: 0.9rem; } .main-footer .footer-contact small { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 0.15rem; } .main-footer .footer-social a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; } .main-footer .footer-social span { font-size: 1.4rem; } .main-footer .footer-bottom { font-size: 0.95rem; padding-top: 2rem; } /* ─── Asesorías: bloque de contacto tras el hero deslizante ─── */ .asesoria-contacto { background: linear-gradient(160deg, #0a0f1c 0%, #111827 100%); color: #fff; padding: 5rem 0; text-align: center; } .asesoria-contacto__titulo { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; } .asesoria-contacto__sub { color: rgba(255,255,255,0.7); margin: 0.75rem 0 2.5rem; font-size: 1.05rem; } .asesoria-contacto__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .asesoria-contacto__item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.75rem 1rem; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radio-lg); background: rgba(255,255,255,0.03); text-decoration: none; color: #fff; transition: transform .25s, border-color .25s, background .25s; } .asesoria-contacto__item:hover { transform: translateY(-5px); border-color: var(--color-acento, #10b981); background: rgba(16,185,129,0.08); } .asesoria-contacto__icono { font-size: 2rem; } .asesoria-contacto__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; } .asesoria-contacto__valor { font-size: 1.05rem; font-weight: 600; word-break: break-word; } /* ========================================================================== AJUSTE MÓVIL — inicio ordenado en celular (sin desborde ni encimado). Cursos y eventos se deslizan en horizontal (arrastre), una tarjeta a la vez. Aditivo: va al final, no toca el resto del archivo. ========================================================================== */ @media (max-width: 768px) { /* La página NUNCA más ancha que la pantalla */ html, body { overflow-x: clip; max-width: 100%; } .seccion-full, .courses-section, .events-section, .payment-section, .hero-cinematic, .main-footer, section, .container { max-width: 100%; } /* Bloques en móvil: carrusel HORIZONTAL con arrastre/deslizamiento, de UNA tarjeta a la vez (scroll-snap) para que no se corte ni se encime. */ .nike-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; cursor: grab; } .nike-row > *, .nike-row > .course-card, .nike-row > .event-card, .nike-row--pago > .payment-card { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; scroll-snap-align: center; } /* Las tarjetas crecen con su contenido (el texto ya no se recorta) */ .course-card__link { height: auto; } .course-card__imagen { height: 180px; } /* El slider, a una altura cómoda en celular (mantiene altura fija porque las diapositivas van en position:absolute) */ .hero-cinematic { height: 74vh; min-height: 460px; max-height: 680px; } } /* ========================================================================== MENÚ MÓVIL (hamburguesa) + FLECHAS DEL SLIDER + BLOQUES A PANTALLA COMPLETA ========================================================================== */ /* Botón hamburguesa: oculto en escritorio, visible en móvil */ .nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px; padding:9px; margin-left:auto; } .nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; } /* Flechas del slider más discretas (estilo ccdcapacitacion) en escritorio */ .slider-btn{ width:44px; height:44px; } .prev-btn{ left:20px; } .next-btn{ right:20px; } @media (max-width: 768px){ /* ── Menú desplegable (hamburguesa) ── */ .nav-toggle{ display:flex; } .main-nav{ display:block !important; position:absolute; top:var(--header-height); left:0; right:0; background:var(--color-nav); border-top:1px solid rgba(255,255,255,.08); max-height:0; overflow:hidden; transition:max-height .3s ease; box-shadow:0 16px 30px rgba(0,0,0,.35); } #navChk:checked ~ .header-container .main-nav{ max-height:85vh; overflow-y:auto; } .main-nav__lista{ flex-direction:column; align-items:stretch; gap:.15rem; padding:.5rem 1rem 1rem; } .main-nav__item{ width:100%; } .main-nav__enlace, .main-nav__btn-dropdown{ display:flex; width:100%; padding:.95rem .4rem; border-radius:10px; } .nav-login-btn{ justify-content:center; margin-top:.5rem; } /* hamburguesa → "X" al abrir */ #navChk:checked ~ .header-container .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); } #navChk:checked ~ .header-container .nav-toggle span:nth-child(2){ opacity:0; } #navChk:checked ~ .header-container .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ── Flechas del slider: pequeñas y a las orillas (no tapan el título) ── */ .slider-btn{ width:34px; height:34px; } .prev-btn{ left:6px; } .next-btn{ right:6px; } .slider-btn svg{ width:14px; height:14px; } /* Mostrar el subtítulo "Plataforma de Consultoría" también en celular */ .header-logo__sub{ display:block !important; font-size:.7rem; } /* ── Bloques a PANTALLA COMPLETA y estables (svh evita el salto al hacer scroll que ocurría con dvh cuando el navegador oculta su barra) ── */ .seccion-full{ min-height:100vh; min-height:100svh; } .hero-cinematic{ height:calc(100vh - var(--header-height)); height:calc(100svh - var(--header-height)); min-height:480px; max-height:none; padding:0; } .slide-content-layer{ padding:2rem 1.4rem 2.6rem; } } /* ========================================================================== CATÁLOGOS en celular (cursos y eventos): título sin cortar + 1 tarjeta por pantalla, igual que el inicio. Aditivo. ========================================================================== */ @media (max-width: 768px){ /* Título de categoría: que entre en la pantalla y se parta SOLO en los espacios */ .catalogo-section .categoria-bloque__titulo{ font-size: clamp(1.3rem, 6.5vw, 2rem) !important; flex-wrap: wrap; justify-content: center; word-break: normal; overflow-wrap: anywhere; letter-spacing: normal !important; line-height: 1.2; padding: 0 .8rem; } /* Las letras animadas, en línea: la palabra ya no se corta a la mitad */ .catalogo-section .categoria-bloque__titulo .letra{ display: inline; } /* Carruseles del catálogo: una tarjeta a la vez, a todo el ancho (con snap) */ .scroll-track, .cursos-grid-estatico{ scroll-snap-type: x mandatory; } .scroll-track > .evento-mini-card-wrap, .cursos-grid-estatico > .evento-mini-card-wrap{ flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; scroll-snap-align: center; } } /* ── Arreglo autorrelleno/pegado en TODOS los campos (claro y oscuro) ─────── Chrome pinta los campos autocompletados/pegados con un fondo claro que ignora el 'background'. Este truco lo respeta y toma los colores del tema (var --color-blanco / --color-texto), así funciona en modo claro y oscuro. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:autofill, textarea:-webkit-autofill, textarea:autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--color-texto) !important; -webkit-box-shadow: 0 0 0 1000px var(--color-blanco) inset !important; box-shadow: 0 0 0 1000px var(--color-blanco) inset !important; caret-color: var(--color-texto) !important; border-color: var(--color-borde) !important; transition: background-color 9999s ease-in-out 0s; }