@font-face { font-family: 'Helvetica Rounded'; src: url(../src/fonts/HelveticaRoundedCondensedBold.otf) format('opentype'); font-display: swap; } /* Reset básico */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* CANVAS: iOS Safari pinta el area de overscroll con el background del . Fijando aqui el azul oscuro, el rebote arriba/abajo muestra el color corporativo */ background-color: #002a5c; /* iOS 16+: limita el scroll-chaining y reduce el rubber-band visible */ overscroll-behavior: none; /* `clip` (iOS 16+) evita scroll horizontal sin crear scroll-context, asi `position: sticky` del header sigue funcionando. NO usar `hidden` aqui: rompe sticky en iOS Safari. */ overflow-x: clip; } body { font-family: 'Helvetica Rounded', Arial, sans-serif; line-height: 1.6; color: #333; /* `clip` (iOS 16+) evita scroll horizontal SIN crear un nuevo scroll-context — asi el `position: sticky` del .header funciona. `hidden` lo rompia en iOS Safari */ overflow-x: clip; min-height: 100vh; min-height: -webkit-fill-available; min-height: 100svh; /* Dark-blue tapa cualquier hueco entre secciones del index y cubre la safe-area/overscroll en iOS. Paginas con texto oscuro (noticia) sobreescriben este valor en su propio CSS. */ background-color: var(--dark-blue); overscroll-behavior: none; } /* ── Hero principal: 100% de ventana visible, estable en iOS y Android ── */ .hero-container { /* Compensacion: el header es position:absolute (sale del flujo), asi que reservamos su altura en el hero para que el contenido no quede oculto debajo. Aplicado solo aqui para no afectar al resto de paginas (noticia, inscripcion...) que tienen su propio layout. */ padding-top: calc(100px + env(safe-area-inset-top)); /* Cascada progressive-enhancement — el navegador usa la última que entiende */ min-height: 100vh; /* 1. Fallback: navegadores antiguos */ min-height: -webkit-fill-available; /* 2. iOS Safari legacy (resta la barra) */ min-height: 100svh; /* 3. Moderno: svh NO salta al scrollear */ /* Layout base en columna; el contenido interno decide su reparto */ display: flex; flex-direction: column; width: 100%; position: relative; } /* Variables de colores corporativos Oncineda */ :root { --primary-blue: #003d82; --primary-yellow: #ffd700; --dark-blue: #002a5c; --light-blue: #0056b3; --accent-yellow: #ffed4e; } /* Scroll suave para mejor experiencia de usuario */ html { scroll-behavior: smooth; } /* Crear un punto de anclaje más abajo en cada sección. Sumamos env(safe-area-inset-top) para compensar el crecimiento del header en iPhones con Dynamic Island / notch */ section[id]::before { content: ''; display: block; height: calc(100px + env(safe-area-inset-top)); margin-bottom: calc(-100px - env(safe-area-inset-top)); visibility: hidden; pointer-events: none; } @media (max-width: 768px) { section[id]::before { height: calc(70px + env(safe-area-inset-top)); margin-bottom: calc(-70px - env(safe-area-inset-top)); } } /* Header y Navegación */ .header { /* Color solido --dark-blue (#002a5c): coincide exacto con theme-color y con el body-bg que rellena la safe-area. Sin junta visible */ background: var(--dark-blue); box-shadow: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; padding: env(safe-area-inset-top) 20px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 20px; min-height: 100px; min-height: calc(100px + env(safe-area-inset-top)); border-bottom: 3px solid var(--primary-yellow); overflow-x: clip; } /* Efecto de onda brillante que pasa por la barra */ .header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 30%, rgba(255, 215, 0, 0.6) 50%, rgba(255, 215, 0, 0.3) 70%, transparent 100%); transform: translateX(-100%); animation: headerGlowSweep 2s ease-out 0.5s both; pointer-events: none; z-index: 1; } .left-nav { display: flex; align-items: center; justify-self: start; animation: logoEnter 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both; } .logo { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; transition: transform 0.3s ease; border: 3px solid var(--primary-yellow); background: white; padding: 5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); animation: logoBounce 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both; position: relative; } /* Efecto de partículas alrededor del logo */ .logo::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%); animation: logoGlow 2s ease-in-out 1s both; z-index: -1; pointer-events: none; } .logo:hover { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); } .center-nav { display: flex; justify-content: center; min-width: 0; overflow-x: clip; /* recorta solo en horizontal; no afecta animaciones verticales */ animation: navFadeIn 1.2s ease-out 0.8s both; } .center-nav nav ul { display: flex; list-style: none; gap: clamp(4px, 2vw, 35px); /* gap fluido: se comprime en tablets sin romper layout */ margin: 0; padding: 0; flex-wrap: nowrap; } .center-nav nav ul li { animation: navItemSlide 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; } .center-nav nav ul li:nth-child(1) { animation-delay: 1.0s; } .center-nav nav ul li:nth-child(2) { animation-delay: 1.1s; } .center-nav nav ul li:nth-child(3) { animation-delay: 1.2s; } .center-nav nav ul li:nth-child(4) { animation-delay: 1.3s; } .center-nav nav ul li:nth-child(5) { animation-delay: 1.4s; } .center-nav nav ul li:nth-child(6) { animation-delay: 1.5s; } .center-nav nav ul li:nth-child(7) { animation-delay: 1.6s; } .center-nav nav ul li:nth-child(8) { animation-delay: 1.7s; } .center-nav nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 17px; padding: 12px 18px; border-radius: 8px; transition: all 0.3s ease; position: relative; white-space: nowrap; } .center-nav nav ul li a:hover { background-color: var(--primary-yellow); color: var(--primary-blue); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); } .center-nav nav ul li a::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 0; height: 3px; background-color: var(--primary-yellow); transition: all 0.3s ease; transform: translateX(-50%); } .center-nav nav ul li a:hover::after { width: 100%; } .right-nav { display: flex; gap: 15px; align-items: center; justify-self: end; animation: buttonsSlideIn 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.4s both; } .login-button, .inscripcion-button { padding: 14px 28px; text-decoration: none; font-weight: 700; border-radius: 25px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; min-width: 140px; text-align: center; cursor: pointer; } .login-button { color: var(--primary-yellow); border: 2px solid var(--primary-yellow); background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.1) 100%); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2); } .login-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; } .login-button:hover::before { left: 100%; } .login-button:hover { background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--accent-yellow) 100%); color: var(--primary-blue); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); border-color: var(--accent-yellow); } /* ── Menú de usuario (sesión iniciada) ──────────────────────────────────── */ .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; background: linear-gradient(135deg, rgba(255,215,0,.08) 0%, rgba(255,215,0,.14) 100%); border: 2px solid var(--primary-yellow); border-radius: 25px; color: var(--primary-yellow); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background .2s, box-shadow .2s, transform .15s; font-family: 'Helvetica Rounded', Arial, sans-serif; white-space: nowrap; } .user-menu-trigger:hover { background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--accent-yellow) 100%); color: var(--primary-blue); box-shadow: 0 6px 20px rgba(255,215,0,.35); transform: translateY(-2px); } .user-menu-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-yellow); color: var(--primary-blue); font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .user-menu-trigger:hover .user-menu-avatar { background: var(--primary-blue); color: var(--primary-yellow); } .user-menu-chevron { transition: transform .2s ease; flex-shrink: 0; } .user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: #ffffff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 42, 92, 0.4), 0 0 1px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); overflow: hidden; z-index: 500; animation: dropdownIn 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both; border: none; } .user-menu-dropdown.open { display: block; } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Sección de información del usuario: jerarquía premium ── */ .user-menu-info { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, #fafbff 0%, #ffffff 100%); border-bottom: 1px solid #f0f2ff; } .user-menu-fullname { font-size: 0.95rem; font-weight: 700; color: #001a3d; letter-spacing: -0.3px; } .user-menu-role { font-size: 0.7rem; color: var(--primary-blue); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; opacity: 0.75; } /* ── Separadores: líneas sutiles con gradiente ── */ .user-menu-sep { height: 1px; background: linear-gradient(90deg, transparent 0%, #e8ecf8 50%, transparent 100%); margin: 12px 0; } /* ── Items de menú: hover states premium con transiciones suaves ── */ .user-menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-size: 0.9rem; font-weight: 600; color: #2d3e52; text-decoration: none; cursor: pointer; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.2s ease; position: relative; } .user-menu-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary-yellow); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.2s ease; } .user-menu-item:hover { background: linear-gradient(90deg, rgba(0, 61, 130, 0.04) 0%, rgba(0, 61, 130, 0.01) 100%); color: var(--primary-blue); padding-left: 24px; } .user-menu-item:hover::before { opacity: 1; } .user-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; transition: transform 0.2s ease; } .user-menu-item:hover svg { transform: translateX(2px); } /* ── Botón cerrar sesión: estilo rojo premium ── */ .user-menu-item--logout { color: #d32f2f; display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: none; width: 100%; text-align: left; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.2s ease; position: relative; } .user-menu-item--logout::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #d32f2f; border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.2s ease; } .user-menu-item--logout:hover { background: linear-gradient(90deg, rgba(211, 47, 47, 0.08) 0%, rgba(211, 47, 47, 0.02) 100%); color: #b71c1c; padding-left: 24px; } .user-menu-item--logout:hover::before { opacity: 1; } /* ── fin menú usuario ─────────────────────────────────────────────────────── */ .inscripcion-button { background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--accent-yellow) 100%); color: var(--primary-blue); border: 2px solid var(--primary-yellow); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); } .inscripcion-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; } .inscripcion-button:hover::before { left: 100%; } .inscripcion-button:hover { background: linear-gradient(135deg, var(--accent-yellow) 0%, #fff700 100%); border-color: var(--accent-yellow); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5); } /* Menú hamburguesa para móvil */ .mobile-menu-toggle { display: none; background: none; border: none; color: var(--primary-yellow); font-size: 28px; cursor: pointer; padding: 10px; transition: all 0.3s ease; } .mobile-menu-toggle:hover { transform: scale(1.1); } /* Hero Section */ .hero { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 50%, var(--light-blue) 100%); color: white; padding: 0; text-align: center; position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; /* viewport estático: no salta con la barra del navegador */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') bottom center/cover no-repeat; opacity: 0.1; pointer-events: none; } .hero::after { content: ''; position: absolute; top: -200px; left: -200px; right: -200px; bottom: -200px; background-image: url('../public/img/logo_transparente_oncineda.png'); background-size: 160px 160px; background-repeat: repeat; background-position: 0 0; opacity: 0.04; pointer-events: none; z-index: 1; filter: brightness(0) invert(1); transform: rotate(10deg); animation: watermarkFloat 60s ease-in-out infinite; } @keyframes watermarkFloat { 0%, 100% { transform: rotate(10deg) translate(0, 0); } 50% { transform: rotate(10deg) translate(5px, -5px); } } .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; z-index: 2; position: relative; width: 100%; max-width: 1200px; margin: 80px auto 100px auto; /* Centrado horizontal y espacio inferior para estadísticas */ } /* Badge informativo superior */ .hero-badge { background: rgba(255, 215, 0, 0.2); border: 1px solid var(--primary-yellow); color: var(--primary-yellow); padding: 8px 20px; border-radius: 25px; font-size: 0.9rem; font-weight: bold; margin-bottom: 30px; animation: fadeInUp 1s ease-out; backdrop-filter: blur(10px); } .hero h1 { font-size: clamp(2rem, 3.2vw, 3.6rem); /* fluido: compacto en viewports normales */ font-weight: bold; margin-bottom: 20px; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); position: relative; animation: fadeInUp 1s ease-out 0.2s both; text-align: center; } .hero h1 .highlight { color: var(--primary-yellow); } .hero p { font-size: 1.3rem; margin-bottom: 40px; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; animation: fadeInUp 1s ease-out 0.4s both; text-align: center; } /* Botones del hero */ .hero-buttons { display: flex; gap: 20px; margin-bottom: 50px; animation: fadeInUp 1s ease-out 0.6s both; } .btn-primary, .btn-secondary { padding: 15px 30px; text-decoration: none; font-weight: bold; border-radius: 8px; transition: all 0.3s ease; font-size: 1rem; border: 2px solid transparent; } .btn-primary { background: var(--primary-yellow); color: var(--primary-blue); border-color: var(--primary-yellow); } .btn-primary:hover { background: var(--accent-yellow); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } .btn-secondary { background: transparent; color: white; border-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--primary-yellow); transform: translateY(-2px); } /* Estadísticas del hero */ .hero-stats { display: flex; gap: 40px; justify-content: center; animation: fadeInUp 1s ease-out 0.8s both; position: relative; z-index: 2; } .stat-item { text-align: center; color: white; } .stat-number { display: block; font-size: 2.2rem; font-weight: bold; color: var(--primary-yellow); font-family: 'Helvetica Rounded', sans-serif; margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.5px; } /* Indicador de scroll */ .scroll-indicator { position: absolute; bottom: 150px; /* Más separado de los sponsors */ left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 4; animation: scrollIndicatorPulse 2s ease-in-out infinite; cursor: pointer; transition: all 0.3s ease; } .scroll-indicator:hover { transform: translateX(-50%) scale(1.15); } .scroll-arrow { width: 48px; height: 48px; border: 2px solid var(--primary-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 215, 0, 0.12); backdrop-filter: blur(6px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,215,0,0.15); animation: arrowBounce 1.5s ease-in-out infinite; } .scroll-arrow svg { width: 22px; height: 22px; color: var(--primary-yellow); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); } @keyframes scrollIndicatorPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } @keyframes arrowBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } } /* Patrocinadores en el Hero */ .hero-sponsors { background: var(--dark-blue); border-top: 1px solid rgba(255, 215, 0, 0.3); width: 100%; align-self: stretch; margin-top: auto; } .hero-sponsors .slider-container { background: none; padding: 25px 0; position: relative; overflow: hidden; } .hero-sponsors .slider-container::before, .hero-sponsors .slider-container::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 4; pointer-events: none; } .hero-sponsors .slider-container::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.05) 70%, transparent 100%); } .hero-sponsors .slider-container::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.05) 70%, transparent 100%); } .hero-sponsors .sponsor-logo { height: 65px; max-width: 130px; filter: brightness(0) invert(1); opacity: 0.9; } .hero-sponsors .sponsor-logo:hover { opacity: 1; transform: scale(1.1); } /* Animaciones */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Icono móvil: oculto por defecto en desktop */ .btn-icon-mobile { display: none; } /* ── Escritorio estrecho / tablet ancho 900–1280px: comprimido ── */ @media (max-width: 1280px) { .header { padding: 0 15px; } .center-nav nav ul { gap: 2px; } .center-nav nav ul li a { font-size: 13px; padding: 8px 9px; letter-spacing: 0; } .login-button, .inscripcion-button { min-width: unset; letter-spacing: 0; } /* Login: círculo con solo icono (ahorra ~120px de ancho) */ .btn-icon-mobile { display: flex; flex-shrink: 0; } .login-button { padding: 10px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .login-button .btn-label { display: none; } /* Inscripción: icono + texto corto */ .inscripcion-button { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; font-size: 12px; } /* ── Usuario logueado: círculo solo avatar (mismo footprint que .login-button) ── */ .user-menu-name, .user-menu-chevron { display: none; } .user-menu-trigger { padding: 0; min-width: unset; width: 42px; height: 42px; border-radius: 50%; justify-content: center; gap: 0; } .user-menu-avatar { width: 36px; height: 36px; font-size: 15px; } } /* ── Tablet estrecho 768–900px: más comprimido, logo pequeño ── */ @media (max-width: 900px) { .logo { width: 54px; height: 54px; } .center-nav nav ul { gap: 0; } .center-nav nav ul li a { font-size: 12px; padding: 7px 7px; } /* Login ya es círculo (hereda de 1024px); solo ajustar tamaño */ .login-button { width: 38px; height: 38px; padding: 8px; } .inscripcion-button { padding: 8px 11px; font-size: 11px; border-radius: 20px; } } /* Botones del hero: se reducen progresivamente antes del breakpoint móvil */ @media (max-width: 1024px) { .btn-primary, .btn-secondary { padding: 13px 24px; font-size: 0.93rem; } } /* Responsive Hero */ @media (max-width: 768px) { .hero { padding-top: calc(15% + env(safe-area-inset-top)); min-height: 100svh; } .hero-badge { font-size: 0.8rem; padding: 6px 16px; margin-bottom: 25px; } .hero h1 { font-size: 2.5rem; margin-bottom: 15px; } .hero p { font-size: 1.1rem; margin-bottom: 30px; padding: 0 20px; } .hero-buttons { flex-direction: column; gap: 15px; margin-bottom: 40px; width: 100%; max-width: 300px; } .btn-primary, .btn-secondary { padding: 12px 25px; font-size: 0.9rem; text-align: center; } .hero-stats { gap: 25px; } .stat-number { font-size: 1.8rem; } .stat-label { font-size: 0.8rem; } .hero-sponsors .sponsor-logo { height: 50px; max-width: 100px; } .hero-sponsors .slider-container::before, .hero-sponsors .slider-container::after { width: 90px; } /* Indicador de scroll en tablets */ .scroll-indicator { bottom: 130px; } .scroll-arrow { width: 45px; height: 45px; } .scroll-arrow svg { width: 20px; height: 20px; } } @media (max-width: 480px) { .hero { height: auto; min-height: 100vh; min-height: 100svh; padding-top: calc(15% + env(safe-area-inset-top)); } .hero-badge { font-size: 0.75rem; padding: 5px 12px; } .hero h1 { font-size: 2rem; margin-bottom: 15px; } .hero p { font-size: 1rem; padding: 0 15px; } .hero-stats { flex-wrap: wrap; gap: 20px; } .stat-item { flex: 1; min-width: 120px; } .stat-number { font-size: 1.6rem; } .hero-sponsors .sponsor-logo { height: 45px; max-width: 90px; } .hero p { font-size: 1rem; margin-bottom: 35px; padding: 0 15px; } .cta-button { padding: 14px 30px; font-size: 16px; } .hero-sponsors .sponsor-logo { height: 45px; max-width: 90px; } .hero-sponsors .slider-container::before, .hero-sponsors .slider-container::after { width: 70px; } /* Indicador de scroll en móviles */ .scroll-indicator { bottom: 110px; } .scroll-arrow { width: 40px; height: 40px; } .scroll-arrow svg { width: 18px; height: 18px; } } /* Estilos para la sección del club */ .club-info { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 80px 0; position: relative; width: 100% !important; max-width: none !important; overflow: hidden; border-top: 4px solid var(--primary-yellow); } .club-info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-yellow), var(--accent-yellow)); z-index: 2; } .club-info::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); width: 1600px; height: 1600px; background-image: url('../public/img/logo_transparente_oncineda.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.05; pointer-events: none; z-index: 1; animation: logoWatermarkFloat 20s ease-in-out infinite; } .container { max-width: 100%; margin: 0 auto; padding: 0 40px; width: 100%; } @keyframes logoWatermarkFloat { 0%, 100% { transform: translate(-50%, -50%) rotate(-15deg) scale(1); opacity: 0.05; } 50% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.01); opacity: 0.07; } } .club-container { max-width: none !important; width: 100% !important; margin: 0 auto; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 3; } .section-title { font-family: 'Helvetica Rounded', sans-serif; font-size: 3rem; font-weight: bold; text-align: center; color: var(--primary-blue); margin-bottom: 60px; position: relative; z-index: 3; } .section-title::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: linear-gradient(90deg, var(--primary-yellow), var(--accent-yellow)); border-radius: 2px; } .club-story { min-width: 100% !important; margin: 0 auto; position: relative; z-index: 3; } .story-content { width: 100%; } .story-content h3 { font-family: 'Helvetica Rounded', sans-serif; font-size: 2.2rem; color: var(--primary-blue); text-align: center; margin-bottom: 40px; } .value-row { display: flex; align-items: stretch; margin-bottom: 50px; gap: 60px; width: 100% !important; max-width: none !important; min-height: 280px; justify-content: space-between; } .value-row.reverse { flex-direction: row-reverse; } .value-item { background: white; padding: 40px 35px; border-radius: 15px; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border: 2px solid transparent; transition: all 0.3s ease; flex: 1 1 300px; min-width: min(350px, 100%); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 4; } .value-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border-color: var(--primary-yellow); } .value-item .icon { font-size: 3rem; margin-bottom: 15px; display: block; } .value-item h4 { font-family: 'Helvetica Rounded', sans-serif; font-size: 1.3rem; color: var(--primary-blue); margin-bottom: 15px; font-weight: bold; } .value-item p { color: #666; line-height: 1.6; margin: 0; font-size: 0.95rem; } .story-text { flex: 1; padding: 40px 50px; max-width: none; display: flex; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, 0.9); border-radius: 15px; backdrop-filter: blur(10px); position: relative; z-index: 4; } .story-text .lead { font-size: 1.4rem; font-weight: 600; color: var(--primary-blue); margin-bottom: 25px; line-height: 1.6; } .story-text p { color: #555; line-height: 1.8; margin-bottom: 20px; font-size: 1.1rem; } .info-cards-container { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-top: 40px; width: 100%; position: relative; z-index: 3; } .info-card { background: white; border-radius: 15px; padding: 30px 25px; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border: 2px solid transparent; transition: all 0.3s ease; flex: 1; min-width: 280px; max-width: none; display: flex; flex-direction: column; } .info-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border-color: var(--primary-yellow); } .info-icon { font-size: 3.5rem; margin-bottom: 20px; } .info-card h3 { font-family: 'Helvetica Rounded', sans-serif; font-size: 1.4rem; color: var(--primary-blue); margin-bottom: 15px; font-weight: bold; } .info-card p { color: #666; line-height: 1.6; margin-bottom: 20px; flex: 1; } .info-card .btn { background: var(--primary-yellow); color: var(--primary-blue); text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; margin-top: auto; display: inline-block; border: 2px solid var(--primary-yellow); } .info-card .btn:hover { background: var(--accent-yellow); color: var(--primary-blue); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); border-color: var(--accent-yellow); } /* Responsive para la sección club-info */ @media (max-width: 768px) { .club-info { padding: 60px 0; } .club-info::after { width: 1000px; height: 1000px; opacity: 0.04; } .container { padding: 0 25px; } .section-title { font-size: 2.2rem; margin-bottom: 40px; } .story-content h3 { font-size: 1.8rem; } .value-row { flex-direction: column; text-align: center; gap: 30px; min-height: auto; } .value-row.reverse { flex-direction: column; } .value-item { flex: none; max-width: 100%; min-width: auto; flex: 0 0 auto; } .story-text { padding: 30px 20px; background: rgba(255, 255, 255, 0.9); } .info-cards-container { gap: 20px; justify-content: center; } .info-card { flex: 1 1 45%; min-width: 250px; max-width: none; } } @media (max-width: 480px) { .club-info { padding: 50px 0; } .club-info::after { width: 800px; height: 800px; opacity: 0.03; } .container { padding: 0 15px; } .info-cards-container { flex-direction: column; align-items: stretch; } .info-card { flex: none; width: 100%; max-width: none; min-width: auto; } .value-item .icon { font-size: 2.5rem; } .value-row { gap: 25px; margin-bottom: 40px; } .story-text { padding: 25px 15px; } .story-text .lead { font-size: 1.1rem; } .story-text p { font-size: 1rem; } .teams-grid { grid-template-columns: 1fr; } .team-card { padding: 25px 20px; } } /* Responsive */ @media (max-width: 768px) { .header { display: flex; column-gap: 0; /* iOS PWA standalone: empuja el contenido bajo la status bar / isla dinámica. padding-top = env(safe-area-inset-top) (~47-59px en iPhones modernos). Laterales con max() para respetar safe-area-inset-left/right en landscape. */ padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); min-height: calc(70px + env(safe-area-inset-top)); position: absolute; top: 0; left: 0; width: 100%; justify-content: space-between; } .hero-container { padding-top: calc(70px + env(safe-area-inset-top)); } /* Hamburguesa a la IZQUIERDA */ .mobile-menu-toggle { order: 1; position: static; } /* Logo oculto en móvil — queda mejor sin él (el header ya es del club) */ .left-nav { display: none; } /* Botones a la DERECHA */ .right-nav { order: 3; position: static; } /* En móvil el header no tiene la barra de nav (que era lo que desbordaba horizontalmente en escritorio), así que podemos quitar el clip y dejar que el dropdown se posicione absolute sin que overflow-y quede también clip */ .header { overflow: visible; } /* El sweep usa translateX(-100%→110%) — con overflow:visible ya no queda recortado y provoca scroll horizontal en móvil. Se desactiva. */ .header::before { animation: none; display: none; } /* ── Menú móvil como dropdown debajo del header ── */ .center-nav { display: block; position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: calc(100vh - 70px); overflow-y: auto; overflow-x: hidden; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; animation: none; /* Anula navFadeIn del desktop */ z-index: 1001; } .center-nav.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .center-nav nav ul { flex-direction: column; gap: 0; background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%); padding: 12px 16px 16px; margin: 0; border-radius: 0 0 14px 14px; border: none; border-top: 2px solid var(--primary-yellow); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } /* Sin delays escalonados en móvil — aparición instantánea */ .center-nav nav ul li { animation: none; } .center-nav nav ul li a { display: block; padding: 14px 16px; border-bottom: 1px solid rgba(255, 215, 0, 0.15); margin: 0; border-radius: 8px; font-size: 16px; } .center-nav nav ul li a:hover, .center-nav nav ul li a.active { background-color: var(--primary-yellow); color: var(--primary-blue); transform: none; box-shadow: none; } .center-nav nav ul li a::after { display: none; } .center-nav nav ul li:last-child a { border-bottom: none; } .mobile-menu-toggle { display: block; } /* Bloquear scroll del body cuando el menú está abierto */ body.menu-open { overflow: hidden; } .right-nav { gap: 8px; } .logo { width: 52px; height: 52px; } /* Login: círculo solo icono (persona es universal) */ .login-button { padding: 9px; min-width: unset; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .login-button .btn-label { display: none; } /* Inscripción: píldora con icono + texto SIEMPRE visible */ .inscripcion-button { padding: 9px 14px; min-width: unset; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .inscripcion-button .btn-label { display: inline; } .btn-icon-mobile { display: block; flex-shrink: 0; } /* ── Botón de usuario: solo avatar en móvil ── */ .user-menu-name, .user-menu-chevron { display: none; } .user-menu-trigger { padding: 0; border: 2px solid var(--primary-yellow); border-radius: 50%; min-width: unset; width: 40px; height: 40px; justify-content: center; } .user-menu-avatar { width: 34px; height: 34px; font-size: 14px; } /* ── Botón Inscríbete: oculto en móvil cuando hay sesión ── */ .header.is-logged-in .inscripcion-button { display: none; } } @media (max-width: 420px) { /* Pantallas muy estrechas: reducir padding pero MANTENER el texto */ .inscripcion-button { padding: 8px 10px; font-size: 11px; gap: 4px; } .inscripcion-button .btn-icon-mobile { width: 14px; height: 14px; } .right-nav { gap: 5px; } } @media (max-width: 480px) { .header { min-height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); } .logo { width: 44px; height: 44px; } .right-nav { gap: 6px; } } /* Slider de patrocinadores Lógica: 4 sets × 6 logos × 180px = 4320px de track. La animación desplaza exactamente 1 set (1080px) y reinicia, garantizando que [viewport_offset → offset+2560px] siempre esté dentro del track (4320px) sin huecos. */ @keyframes sponsorScroll { from { transform: translateX(0); } to { transform: translateX(-1080px); } } .slider-container { width: 100%; overflow: hidden; position: relative; } .slider-track { display: flex; width: 4320px; /* 4 sets × 6 × 180px — valor explícito, sin max-content */ will-change: transform; animation: sponsorScroll 20s linear infinite; } @media (prefers-reduced-motion: reduce) { .slider-track { animation: none; } } .slide { flex: 0 0 180px; padding: 0 20px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .sponsor-logo { width: auto; object-fit: contain; filter: brightness(0) invert(1); transition: opacity 0.3s ease, transform 0.3s ease; } /* ======================================== ANIMACIONES DE ENTRADA PARA NAVEGACIÓN ======================================== */ /* Onda brillante que cruza la barra */ @keyframes headerGlowSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(110%); } } /* Entrada espectacular del logo con rebote */ @keyframes logoEnter { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 50% { transform: scale(1.3) rotate(-90deg); opacity: 0.8; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* Rebote del logo como balón de basket */ @keyframes logoBounce { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-10px) scale(1.1); } 50% { transform: translateY(-5px) scale(1.05); } 75% { transform: translateY(-2px) scale(1.02); } } /* Efecto de glow alrededor del logo */ @keyframes logoGlow { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.5); } } /* Aparición suave de la navegación central */ @keyframes navFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Entrada escalonada de elementos del menú */ @keyframes navItemSlide { 0% { opacity: 0; transform: translateY(-20px) scale(0.8); } 60% { transform: translateY(5px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Entrada de botones desde arriba (translateY evita overflow horizontal) */ @keyframes buttonsSlideIn { 0% { opacity: 0; transform: translateY(-12px) scale(0.9); } 60% { transform: translateY(3px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================ ESTILOS ADICIONALES PARA NUEVAS SECCIONES ============================================ */ /* Estilos generales para secciones - eliminado duplicado */ .section-description { text-align: center; font-size: 1.1rem; color: #666; max-width: 600px; margin: 0 auto 50px; line-height: 1.6; } /* Navegación activa */ .center-nav nav ul li a.active { background-color: var(--primary-yellow); color: var(--primary-blue); } /* Estilos para info-link */ .info-link { display: inline-block; color: var(--primary-blue); text-decoration: none; font-weight: bold; margin-top: 15px; padding: 8px 16px; border: 2px solid var(--primary-blue); border-radius: 20px; transition: var(--transition); font-size: 0.9rem; } .info-link:hover { background: var(--primary-blue); color: white; transform: translateY(-2px); } .btn.small { padding: 8px 16px; font-size: 0.9rem; } /* Sección de Calendario */ .calendar-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 80px 0; } .calendar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 40px; } .match-card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; gap: 20px; align-items: center; transition: var(--transition); border: 2px solid transparent; } .match-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: var(--primary-yellow); } .match-date { text-align: center; background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); color: white; padding: 15px; border-radius: 10px; min-width: 70px; } .match-date .day { display: block; font-size: 1.8rem; font-weight: bold; line-height: 1; } .match-date .month { display: block; font-size: 0.9rem; opacity: 0.8; text-transform: uppercase; } .match-info { flex: 1; } .match-info h4 { font-family: 'Helvetica Rounded', sans-serif; color: var(--primary-blue); margin-bottom: 8px; font-size: 1.1rem; } .match-category { color: #666; font-size: 0.9rem; margin-bottom: 5px; font-weight: bold; } .match-time { color: #555; font-size: 0.9rem; } .match-status { text-align: center; } .status-badge { padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; } .status-badge.home { background: var(--primary-yellow); color: var(--primary-blue); } .status-badge.away { background: var(--primary-blue); color: white; } /* Resultado en cards de partidos */ .match-resultado { font-size: 1.1rem; font-weight: 700; margin-top: 4px; margin-bottom: 0; } .match-resultado--victoria { color: #16a34a; } .match-resultado--derrota { color: #dc2626; } .match-resultado--empate { color: #6b7280; } /* Borde lateral según resultado */ .match-card--ganado { border-left: 4px solid #16a34a; } .match-card--perdido { border-left: 4px solid #dc2626; } /* ── Página /partidos ──────────────────────────────────────────────── */ .pge-partidos { background: #f1f5f9; min-height: 100vh; } .pge-partidos__hero { background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%); padding: calc(100px + env(safe-area-inset-top) + 32px) 0 40px; color: white; } .pge-partidos__hero h1 { font-family: 'Helvetica Rounded', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 6px; letter-spacing: -.5px; } .pge-partidos__hero p { opacity: .7; font-size: .95rem; margin: 0; } /* Filtros sticky */ .pge-partidos__filters { position: sticky; top: 0; z-index: 200; background: white; border-bottom: 2px solid #e2e8f0; box-shadow: 0 2px 12px rgba(0,0,0,.07); } .pge-partidos__filters-inner { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; } /* Tab toggle */ .pt-tabs { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; } .pt-tabs button { padding: 7px 18px; border: none; border-radius: 8px; background: transparent; color: #64748b; font-size: .875rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; font-family: 'Helvetica Rounded', sans-serif; white-space: nowrap; } .pt-tabs button.active { background: var(--primary-blue); color: white; box-shadow: 0 2px 8px rgba(0,61,130,.25); } .pt-tabs button:not(.active):hover { background: #e2e8f0; color: #334155; } /* Equipo select */ .pt-select-wrap { position: relative; } .pt-select-wrap .pt-select-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #64748b; pointer-events: none; } .pt-select { appearance: none; -webkit-appearance: none; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 8px 34px 8px 12px; font-size: .875rem; color: #334155; cursor: pointer; font-family: 'Helvetica Rounded', sans-serif; transition: border-color .15s; } .pt-select:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(0,61,130,.1); } /* Contenido */ .pge-partidos__content { padding: 24px 0 60px; } /* Cabecera de mes */ .pt-mes-header { display: flex; align-items: center; gap: 14px; padding: 20px 0 10px; font-family: 'Helvetica Rounded', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-blue); } .pt-mes-header::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } .pt-mes-header:first-child { padding-top: 4px; } /* Tarjeta de partido */ .pt-card { background: white; border-radius: 14px; margin-bottom: 8px; overflow: hidden; border-left: 4px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; } .pt-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-1px); } .pt-card--victoria { border-left-color: #16a34a; } .pt-card--derrota { border-left-color: #dc2626; } .pt-card--empate { border-left-color: #f59e0b; } .pt-card--pendiente { border-left-color: var(--primary-blue); } .pt-card__inner { display: grid; grid-template-columns: 68px 1fr auto; align-items: stretch; } /* Bloque fecha */ .pt-card__date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 6px; background: #f8fafc; border-right: 1px solid #f1f5f9; gap: 0; } .pt-card__weekday { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: .5px; line-height: 1; margin-bottom: 2px; } .pt-card__day { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--primary-blue); font-family: 'Helvetica Rounded', sans-serif; } .pt-card__month { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: .5px; line-height: 1; margin-top: 2px; } /* Cuerpo de la tarjeta */ .pt-card__body { padding: 13px 15px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .pt-card__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .pt-chip { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; line-height: 1.5; white-space: nowrap; } .pt-chip--local { background: var(--primary-yellow); color: var(--primary-blue); } .pt-chip--fuera { background: var(--primary-blue); color: white; } .pt-chip--cat { background: #e0e7ff; color: #3730a3; } .pt-chip--comp { background: #f1f5f9; color: #475569; font-weight: 500; text-transform: none; } .pt-card__vs { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; } .pt-card__team-us { font-family: 'Helvetica Rounded', sans-serif; font-size: .95rem; font-weight: 700; color: var(--primary-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .pt-card__vs-sep { font-size: .72rem; font-weight: 700; color: #94a3b8; flex-shrink: 0; text-transform: uppercase; letter-spacing: .5px; } .pt-card__team-rival { font-size: .88rem; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .pt-card__lugar { font-size: .75rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Panel derecho */ .pt-card__right { padding: 13px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; flex-shrink: 0; min-width: 80px; } .pt-score { font-family: 'Helvetica Rounded', sans-serif; font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: -1px; } .pt-score--victoria { color: #16a34a; } .pt-score--derrota { color: #dc2626; } .pt-score--empate { color: #f59e0b; } .pt-res-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .pt-res-label--victoria { color: #16a34a; } .pt-res-label--derrota { color: #dc2626; } .pt-res-label--empate { color: #f59e0b; } .pt-time { font-size: 1rem; font-weight: 700; color: var(--primary-blue); font-family: 'Helvetica Rounded', sans-serif; white-space: nowrap; } .pt-pending { font-size: .68rem; color: #94a3b8; white-space: nowrap; } /* Estados vacío / carga */ .pt-empty { text-align: center; padding: 4rem 1rem; color: #94a3b8; } .pt-empty svg { margin: 0 auto 14px; display: block; opacity: .35; } .pt-empty p { font-size: .95rem; } .pt-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4rem 1rem; color: #94a3b8; font-size: .9rem; } .pt-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: var(--primary-blue); border-radius: 50%; animation: ptSpin .7s linear infinite; } @keyframes ptSpin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 640px) { .pt-card__inner { grid-template-columns: 58px 1fr auto; } .pt-card__day { font-size: 1.35rem; } .pt-card__right { padding: 10px 12px; min-width: 68px; } .pt-card__body { padding: 10px 11px; } .pt-score { font-size: 1.2rem; } .pt-time { font-size: .9rem; } .pt-card__team-us, .pt-card__team-rival { max-width: 130px; } .pt-tabs button { padding: 6px 12px; font-size: .8rem; } .pge-partidos__filters-inner { gap: 8px; } .pt-select { font-size: .8rem; } } .calendar-actions { text-align: center; } /* Sección de Noticias */ /* ── Sección Noticias ──────────────────────────────────────────────────── */ .news-section { background: linear-gradient(180deg, #f0f4fb 0%, #ffffff 100%); padding: 40px 0; } .news-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 16px; } .news-header .section-title { margin-bottom: 0; } .news-eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-yellow); background: var(--primary-blue); display: inline-block; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; } .news-all-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--primary-blue); text-decoration: none; white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid var(--primary-yellow); transition: color 0.2s, gap 0.2s; margin-top: 6%; } .news-all-link:hover { color: var(--light-blue); gap: 10px; } /* Grid: featured 2fr + sidebar 1fr */ /* Grid 3 columnas: featured(2/3) + side | compact + compact-wide */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Base ─────────────────────────────────────────────────────────────── */ .news-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 61, 130, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; position: relative; /* anclaje para el stretched link */ cursor: pointer; /* toda la tarjeta es clicable */ } .news-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 61, 130, 0.14); } /* Stretched link: el enlace "Ver noticia" cubre toda la tarjeta. .news-link NO lleva position, así el ::after usa .news-card como ancla. */ .news-card .news-link::after { content: ''; position: absolute; inset: 0; z-index: 1; /* fondo transparente, captura todos los clics de la tarjeta */ } /* Al pasar el cursor por CUALQUIER parte de la tarjeta, el botón "Ver noticia" se ilumina como si estuvieras encima */ .news-card:hover .news-link { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; } .news-card:hover .news-link svg { transform: translateX(3px); } /* Accesibilidad: foco visible por teclado */ .news-card:focus-within { outline: 3px solid var(--primary-yellow); outline-offset: 3px; } .news-card .news-link:focus { outline: none; /* ya se muestra el outline en la tarjeta */ } /* ── Imagen ───────────────────────────────────────────────────────────── */ .news-image { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; } .news-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .news-image svg { opacity: 0.55; } /* Badge etiqueta */ .news-tag-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--primary-yellow); color: var(--primary-blue); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; line-height: 1.4; } /* ── Contenido base ───────────────────────────────────────────────────── */ .news-content { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .news-date { font-size: 0.72rem; font-weight: 600; color: #8a94a6; text-transform: uppercase; letter-spacing: 0.06em; } .news-content h3 { font-family: 'Helvetica Rounded', sans-serif; color: var(--primary-blue); margin: 7px 0 10px; font-size: 1.05rem; line-height: 1.35; } .news-content p { color: #555; font-size: 0.875rem; line-height: 1.65; margin-bottom: 14px; flex: 1; } /* Botón "Ver noticia" — pill con borde */ .news-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: auto; padding: 5px 12px; border: 1.5px solid #c5d3e8; border-radius: 20px; background: transparent; color: var(--primary-blue); font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; line-height: 1.5; } .news-link svg { flex-shrink: 0; transition: transform 0.2s; } .news-link:hover { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; } .news-link:hover svg { transform: translateX(3px); } /* Tags */ .news-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; margin-bottom: 14px; } .news-tags .tag { font-size: 0.7rem; font-weight: 600; background: #eef2ff; color: var(--primary-blue); padding: 2px 8px; border-radius: 20px; } /* ── FEATURED: col 1/3, row 1 ─────────────────────────────────────────── */ .news-card.featured { grid-column: 1 / 3; grid-row: 1; } .news-card.featured .news-image { height: 280px; } .news-card.featured .news-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,20,60,0.65) 0%, transparent 50%); pointer-events: none; } .news-card.featured .news-content { padding: 22px 26px 24px; } .news-card.featured .news-content h3 { font-size: 1.35rem; line-height: 1.3; } /* ── SIDE: col 3, row 1 — vertical, estira hasta igualar al featured ─── */ .news-card--side { grid-column: 3; grid-row: 1; } .news-card--side .news-image { height: 155px; } .news-card--side .news-content h3 { font-size: 0.98rem; } /* ── COMPACT: row 2, horizontal ──────────────────────────────────────── */ .news-card--compact { flex-direction: row; align-items: stretch; grid-row: 2; } .news-card--compact:nth-child(3) { grid-column: 1; } .news-card--compact:nth-child(4) { grid-column: 2 / 4; } .news-card--compact .news-image { width: 100px; flex-shrink: 0; height: auto; min-height: 100px; } .news-card--compact .news-tag-badge { font-size: 0.6rem; padding: 2px 7px; top: 8px; left: 8px; } .news-card--compact .news-content { padding: 13px 15px; justify-content: center; } .news-card--compact .news-content h3 { font-size: 0.88rem; margin: 4px 0 10px; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .news-card--compact .news-content p { display: none; } .news-actions { text-align: center; margin-top: 36px; } /* Sección de Academia */ /* ── Escuela Deportiva ───────────────────────────────── */ .academy-section { background: var(--dark-blue); overflow: hidden; position: relative; } .academy-pillars-wrap > .container { position: relative; z-index: 1; } /* Cabecera con watermark de cancha */ .academy-header { position: relative; z-index: 1; text-align: center; padding: 100px 0 80px; } .academy-header::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cline x1='400' y1='0' x2='400' y2='400'/%3E%3Ccircle cx='400' cy='200' r='80'/%3E%3Cpath d='M320 0 Q240 200 320 400'/%3E%3Cpath d='M480 0 Q560 200 480 400'/%3E%3C/svg%3E") center/cover no-repeat; opacity: 0.04; pointer-events: none; } .academy-header > .container { position: relative; z-index: 1; } .academy-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--primary-yellow); margin-bottom: 18px; } .academy-title { font-family: 'Helvetica Rounded', sans-serif; font-size: clamp(2rem, 5vw, 3.2rem); color: white; line-height: 1.15; margin-bottom: 16px; } .academy-subtitle { color: rgba(255, 255, 255, 0.72); font-size: 1.1rem; max-width: 540px; margin: 0 auto 36px; line-height: 1.65; } .academy-values { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .academy-values span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary-yellow); border: 1.5px solid rgba(255, 215, 0, 0.35); border-radius: 20px; padding: 5px 14px; background: rgba(255, 215, 0, 0.07); } /* Pilares — Layout asimétrico */ .academy-pillars-wrap { background: var(--dark-blue); padding: 0 0 40px; position: relative; z-index: 1; } .pillars-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; grid-template-areas: "featured side-a" "featured side-b"; gap: 20px; align-items: stretch; } /* Tarjeta featured — grande, blanca */ .pillar-card--featured { grid-area: featured; background: white; border-radius: 24px; padding: 48px 44px; position: relative; overflow: hidden; border-top: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .pillar-card--featured .pillar-number { position: absolute; bottom: -10px; right: -8px; font-family: 'Helvetica Rounded', sans-serif; font-size: clamp(7rem, 14vw, 11rem); font-weight: 900; line-height: 1; color: rgba(0, 61, 130, 0.055); pointer-events: none; user-select: none; letter-spacing: -0.05em; transition: color 0.35s ease; } .pillar-card--featured::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: var(--primary-yellow); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%); opacity: 0.12; pointer-events: none; } .pillar-card--featured .pillar-divider { width: 40px; height: 3px; background: var(--primary-yellow); border-radius: 2px; margin: 20px 0; } .pillar-card--featured .pillar-icon { width: 80px; height: 80px; background: transparent; color: var(--primary-blue); border-radius: 0; margin-bottom: 24px; } .pillar-card--featured .pillar-icon svg { width: 64px; height: 64px; stroke-width: 1.2; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .pillar-card--featured h3 { font-family: 'Helvetica Rounded', sans-serif; color: var(--primary-blue); font-size: 1.7rem; margin-bottom: 14px; } .pillar-card--featured p { color: #666; font-size: 0.92rem; line-height: 1.6; margin: 0; } .pillar-card--featured:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .pillar-card--featured:hover .pillar-number { color: rgba(0, 61, 130, 0.1); } .pillar-card--featured:hover .pillar-icon svg { transform: scale(1.08) rotate(-3deg); } /* Tarjetas laterales — dinámicas con clip-path y números prominentes */ .pillar-card--side { background: linear-gradient(135deg, rgba(0, 93, 179, 0.15), rgba(255, 215, 0, 0.06)); border-radius: 18px; padding: 32px 28px; position: relative; overflow: hidden; border: none; display: flex; flex-direction: column; gap: 16px; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .pillar-card--side::before { content: ''; position: absolute; top: -20px; right: -20px; width: 140px; height: 140px; background: var(--primary-yellow); border-radius: 50%; opacity: 0.08; transition: transform 0.35s ease, opacity 0.35s ease; } .pillar-card--side::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary-yellow) 0%, transparent 100%); opacity: 0.5; } .pillar-card--side .pillar-number { position: absolute; top: 16px; right: 20px; font-family: 'Helvetica Rounded', sans-serif; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: rgba(255, 215, 0, 0.18); pointer-events: none; user-select: none; letter-spacing: -0.05em; transition: color 0.35s ease; font-weight: 900; } .pillar-card--side .pillar-icon { width: 56px; height: 56px; background: rgba(255, 215, 0, 0.12); color: var(--primary-yellow); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; transition: all 0.35s ease; } .pillar-card--side .pillar-icon svg { width: 32px; height: 32px; } .pillar-card--side h3 { font-family: 'Helvetica Rounded', sans-serif; font-size: 1.25rem; color: white; margin-bottom: 8px; position: relative; z-index: 1; font-weight: 700; } .pillar-card--side p { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; line-height: 1.6; margin: 0; position: relative; z-index: 1; } .pillar-card--side .pillar-divider { display: none; } .pillar-card--side:hover { background: linear-gradient(135deg, rgba(0, 93, 179, 0.25), rgba(255, 215, 0, 0.12)); transform: translateY(-6px); box-shadow: 0 12px 40px rgba(255, 215, 0, 0.15); } .pillar-card--side:hover::before { transform: scale(1.2); opacity: 0.15; } .pillar-card--side:hover .pillar-number { color: rgba(255, 215, 0, 0.28); } .pillar-card--side:hover .pillar-icon { background: rgba(255, 215, 0, 0.2); transform: scale(1.1) rotate(5deg); } /* Wave divider: azul oscuro → blanco */ .academy-wave { background: var(--dark-blue); line-height: 0; position: relative; z-index: 2; } .academy-wave svg { display: block; width: 100%; height: 88px; } /* Horarios — Layout 2 columnas. margin-top: -2px solapa con .academy-wave para evitar el hilo gris/azul que iOS Safari muestra en la frontera blanco/blanco por antialiasing subpíxel (DPR alto). El z-index garantiza que el fondo blanco quede por encima del SVG en esos 2px de solape. */ .academy-schedule-wrap { background: white; padding: 40px 0 80px; margin-top: -2px; position: relative; z-index: 3; } .schedule-content { display: grid; grid-template-columns: 30% 1fr; gap: 60px; align-items: center; min-height: 400px; } .schedule-sidebar { padding-left: 28px; border-left: 5px solid var(--primary-yellow); } .schedule-title { font-family: 'Helvetica Rounded', sans-serif; color: var(--primary-blue); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; margin-bottom: 12px; font-weight: 800; } .schedule-days { color: #777; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; } .schedule-main { display: flex; align-items: center; } /* Timeline horizontal — nodos en fila propia + tarjetas debajo */ .schedule-timeline { width: 100%; display: flex; flex-direction: column; gap: 0; } /* Fila de nodos: mismo gap que .schedule-cards para alinear columnas */ .schedule-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; position: relative; padding: 39px 0 40px; } .schedule-nodes::before { content: ''; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 50%; transform: translateY(-50%); height: 2px; background: repeating-linear-gradient( 90deg, var(--primary-yellow) 0, var(--primary-yellow) 14px, transparent 14px, transparent 26px ); pointer-events: none; } .schedule-slot-node { justify-self: center; position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-yellow); border: 3px solid white; box-shadow: 0 0 0 2px var(--primary-yellow); transition: all 0.35s ease; } /* Fila de tarjetas */ .schedule-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* Schedule slot */ .schedule-slot { position: relative; } .schedule-slot-inner { background: #f8faff; border-radius: 16px; padding: 28px 24px; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); width: 100%; text-align: center; position: relative; overflow: hidden; } .schedule-slot-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-yellow), var(--primary-yellow) 50%, transparent); opacity: 0; transition: opacity 0.35s ease; } .schedule-slot:hover .schedule-slot-inner { background: var(--primary-blue); box-shadow: 0 16px 50px rgba(0, 61, 130, 0.3); transform: translateY(-8px); } .schedule-slot:hover .schedule-slot-inner::before { opacity: 1; } /* Nodo activo al hacer hover sobre la tarjeta */ .schedule-slot-node.is-active { transform: scale(1.5); box-shadow: 0 0 0 3px var(--primary-yellow), 0 0 20px rgba(255, 215, 0, 0.6); background: var(--primary-yellow); } /* Hora dominante */ .schedule-slot-time { font-family: 'Helvetica Rounded', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--primary-yellow); line-height: 1; letter-spacing: -0.02em; margin-bottom: 12px; font-weight: 800; } .schedule-slot-separator { opacity: 0.6; margin: 0 4px; } /* Meta: grupo + edad */ .schedule-slot-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; } .schedule-slot-grupo { font-family: 'Helvetica Rounded', sans-serif; font-size: 1.05rem; color: var(--primary-blue); font-weight: 700; transition: color 0.35s ease; } .schedule-slot:hover .schedule-slot-grupo { color: white; } .schedule-slot-edad { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; background: rgba(0, 0, 0, 0.05); padding: 2px 10px; border-radius: 12px; transition: all 0.35s ease; } .schedule-slot:hover .schedule-slot-edad { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.15); } /* Descripción */ .schedule-slot-desc { font-size: 0.85rem; color: #555; line-height: 1.6; margin: 0; transition: color 0.35s ease; } .schedule-slot:hover .schedule-slot-desc { color: rgba(255, 255, 255, 0.8); } /* CTA */ .academy-cta-wrap { background: white; padding: 48px 0 64px; border-top: 1px solid #e8eef8; } .academy-cta-wrap .container { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; } .academy-btn-main { background: var(--primary-yellow); color: var(--primary-blue); border: 2px solid var(--primary-yellow); padding: 15px 32px; border-radius: 8px; font-weight: bold; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; } .academy-btn-main:hover { background: #e6c200; border-color: #e6c200; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4); } .academy-btn-outline { background: white; color: var(--primary-blue); border: 2px solid rgba(0, 61, 130, 0.25); padding: 15px 32px; border-radius: 8px; font-weight: bold; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; } .academy-btn-outline:hover { background: var(--primary-blue); color: white; border-color: var(--primary-blue); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 61, 130, 0.2); } /* ═══════════════════════════════════════════════════════ GALERIA — Diseño moderno (revisado) ═══════════════════════════════════════════════════════ */ .gallery-section { background: linear-gradient(180deg, #eef2ff 0%, #ffffff 55%); padding: clamp(60px, 8vw, 100px) 0; position: relative; } .gallery-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-yellow) 50%, var(--primary-blue) 100%); } .gallery-subtitle { text-align: center; color: #64748b; font-size: clamp(0.95rem, 1.6vw, 1.05rem); margin-top: -10px; margin-bottom: clamp(28px, 4vw, 44px); letter-spacing: 0.01em; padding: 0 16px; } /* ── Tabs (filtros) ── */ .gallery-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: clamp(28px, 5vw, 52px); flex-wrap: wrap; padding: 0 16px; } .gallery-tab { display: inline-flex; align-items: center; gap: 6px; background: white; border: 2px solid #dde3f0; color: #4a5568; padding: 10px 20px; min-height: 44px; border-radius: 50px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .gallery-tab svg { flex-shrink: 0; } .gallery-tab:hover:not(.active) { border-color: var(--primary-blue); color: var(--primary-blue); background: #f0f4ff; } .gallery-tab.active { background: var(--primary-blue); border-color: var(--primary-blue); color: white; box-shadow: 0 4px 16px rgba(0, 61, 130, 0.32); } .gallery-tab:focus-visible { outline: 3px solid var(--primary-yellow); outline-offset: 2px; } /* ── Grid ── minmax con min(100%, 280px) evita overflow en móvil. max-width en el grid + en cada hijo asegura que con 1-2 fotos las tarjetas no se estiren a tamaño "hero" y queden centradas. */ .gallery-grid, .gallery-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 16px; justify-content: center; } .gallery-grid > * { max-width: 440px; width: 100%; justify-self: center; } /* ── Tarjeta ── */ .gallery-card { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09); transition: box-shadow 0.25s ease, transform 0.25s ease; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%); outline: none; border: 1px solid rgba(0, 61, 130, 0.06); } .gallery-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 61, 130, 0.22); } .gallery-card:focus-visible { outline: 3px solid var(--primary-yellow); outline-offset: 3px; } .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.06); } /* Overlay degradado — siempre visible (intensifica en hover) */ .gallery-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 24, 56, 0.85) 0%, rgba(0, 24, 56, 0.45) 45%, rgba(0, 24, 56, 0.05) 75%, transparent 100%); transition: background 0.25s ease; display: flex; align-items: flex-end; padding: 18px; } .gallery-card:hover .gallery-card__overlay, .gallery-card:focus-visible .gallery-card__overlay { background: linear-gradient(to top, rgba(0, 24, 56, 0.92) 0%, rgba(0, 24, 56, 0.55) 50%, rgba(0, 24, 56, 0.1) 80%, transparent 100%); } .gallery-card__caption { display: flex; flex-direction: column; gap: 6px; } .gallery-card__caption p { margin: 0; color: white; font-size: 0.95rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); letter-spacing: 0.005em; } /* Badges */ .gallery-card__badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; width: fit-content; } .gallery-card__badge--partidos { background: var(--primary-yellow); color: var(--primary-blue); } .gallery-card__badge--entrenamientos { background: #10b981; color: white; } .gallery-card__badge--eventos { background: #f59e0b; color: white; } .gallery-card__badge--trofeos { background: var(--primary-yellow); color: var(--dark-blue); } /* Lupa esquina */ .gallery-card__zoom { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.25s ease; } .gallery-card:hover .gallery-card__zoom, .gallery-card:focus-visible .gallery-card__zoom { opacity: 1; transform: scale(1); } /* Placeholder — sólo visible cuando la imagen falla al cargar */ .gallery-card__placeholder { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,0.55); pointer-events: none; } .gallery-card--no-img img { display: none; } .gallery-card--no-img .gallery-card__placeholder { display: flex; } .gallery-card__placeholder svg { opacity: 0.45; } .gallery-card__placeholder span { font-size: 0.8rem; font-weight: 600; text-align: center; color: rgba(255,255,255,0.5); padding: 0 16px; } /* Skeleton */ .gallery-skeleton-card { aspect-ratio: 4/3; border-radius: 18px; background: linear-gradient(90deg, #e2e8f0 25%, #eef2ff 50%, #e2e8f0 75%); background-size: 200% 100%; animation: gallery-shimmer 1.6s infinite linear; max-width: 440px; width: 100%; justify-self: center; } @keyframes gallery-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Estado vacío */ .gallery-empty { text-align: center; padding: 70px 20px; color: #94a3b8; } .gallery-empty svg { opacity: 0.35; margin-bottom: 16px; } .gallery-empty p { font-size: 1.05rem; font-weight: 500; margin: 0; color: #64748b; } /* ───────────────────────────────────────────────────── LIGHTBOX ───────────────────────────────────────────────────── */ .gallery-lb { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 8, 24, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; /* desactivar interacciones mientras está cerrado */ pointer-events: none; } .gallery-lb.is-open { opacity: 1; pointer-events: auto; } /* Wrap con dos imágenes apiladas para cross-fade real */ .gallery-lb__img-wrap { position: relative; width: min(92vw, 1100px); height: 82vh; max-width: 100%; max-height: 82vh; display: flex; align-items: center; justify-content: center; } .gallery-lb__img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); object-fit: contain; display: block; opacity: 0; transform: translate(-50%, -50%) scale(0.97); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; } .gallery-lb__img.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* Controles (close + nav) */ .gallery-lb__close, .gallery-lb__nav { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .gallery-lb__close:hover, .gallery-lb__nav:not(:disabled):hover { background: rgba(255, 255, 255, 0.28); } .gallery-lb__close:focus-visible, .gallery-lb__nav:focus-visible { outline: 3px solid var(--primary-yellow); outline-offset: 3px; } .gallery-lb__close { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; } .gallery-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; } .gallery-lb__nav:not(:disabled):hover { transform: translateY(-50%) scale(1.08); } .gallery-lb__nav--prev { left: 20px; } .gallery-lb__nav--next { right: 20px; } .gallery-lb__nav:disabled { opacity: 0.3; cursor: default; } .gallery-lb__footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20px 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); display: flex; align-items: center; justify-content: space-between; color: white; pointer-events: none; } .gallery-lb__title { font-size: 0.9rem; font-weight: 500; opacity: 0.92; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-lb__counter { font-size: 0.82rem; opacity: 0.7; white-space: nowrap; margin-left: 16px; font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────── */ @media (max-width: 768px) { .gallery-tab { padding: 8px 14px; font-size: 0.8rem; min-height: 40px; } /* En móvil/tablet usamos flex en vez de grid: comportamiento más predecible cuando hay pocas cards. Cada card crece (flex-grow: 1) para llenar el ancho disponible y justify-content: center centra la última fila incompleta. Resultado: 1 card → ancho completo, centrada · 2 cards → mitad cada una. */ .gallery-grid, .gallery-skeleton-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .gallery-grid > * { flex: 1 1 200px; width: auto; max-width: 100%; } .gallery-skeleton-card { flex: 1 1 200px; width: auto; max-width: 100%; } .gallery-lb__close { top: 14px; right: 14px; width: 40px; height: 40px; } .gallery-lb__nav { width: 44px; height: 44px; top: auto; bottom: 76px; transform: none; } .gallery-lb__nav:not(:disabled):hover { transform: scale(1.06); } .gallery-lb__nav--prev { left: 16px; } .gallery-lb__nav--next { right: 16px; } .gallery-lb__img-wrap { width: 96vw; height: 70vh; max-height: 70vh; } .gallery-lb__footer { padding: 14px 18px 18px; } .gallery-lb__title { font-size: 0.82rem; } .gallery-lb__counter { font-size: 0.76rem; } } @media (max-width: 480px) { /* Mantiene el flex pero baja el mínimo a 150px para que en móviles estrechos sigan cabiendo 2 columnas cuando hay varias fotos. */ .gallery-grid, .gallery-skeleton-grid { gap: 10px; padding: 0 12px; } .gallery-grid > * { flex: 1 1 150px; } .gallery-skeleton-card { flex: 1 1 150px; } } /* Respeto a reduced motion: deshabilitar transiciones largas */ @media (prefers-reduced-motion: reduce) { .gallery-card, .gallery-card img, .gallery-card__overlay, .gallery-card__caption, .gallery-card__zoom, .gallery-lb, .gallery-lb__img-wrap img, .gallery-lb__close, .gallery-lb__nav { transition: none !important; animation: none !important; } .gallery-lb__img-wrap img { transform: none !important; } } /* Sección de Contacto */ .contact-section { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%); color: white; padding: 80px 0; } .contact-section .section-title { color: white; } .contact-section .section-title::after { background: linear-gradient(90deg, var(--primary-yellow), var(--accent-yellow)); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .contact-info h3, .contact-form h3 { font-family: 'Helvetica Rounded', sans-serif; color: var(--primary-yellow); font-size: 1.8rem; margin-bottom: 30px; } .contact-details { display: flex; flex-direction: column; gap: 25px; } .contact-item { display: flex; gap: 15px; align-items: flex-start; } .contact-icon { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-yellow); border-radius: 50%; flex-shrink: 0; color: var(--primary-blue); } .contact-item h4 { color: var(--primary-yellow); margin-bottom: 5px; font-size: 1.1rem; } .contact-item p { color: rgba(255, 255, 255, 0.9); line-height: 1.5; margin: 0; } /* Formulario de contacto */ .contact-form { background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); } .form-group { margin-bottom: 20px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; background: rgba(255, 255, 255, 0.9); color: #333; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-yellow); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3); } .form-group textarea { resize: vertical; min-height: 120px; } /* Responsive para nuevas secciones */ @media (max-width: 768px) { .hero-content { margin: 0 auto 100px auto; } .section-title { font-size: 2rem; } .section-description { padding: 0 20px; } .pillars-grid { grid-template-columns: 1fr; grid-template-areas: "featured" "side-a" "side-b"; } .academy-pillars-wrap { padding-bottom: 40px; } .schedule-content { grid-template-columns: 1fr; gap: 32px; align-items: flex-start; min-height: auto; } /* Nodos decorativos ocultos en tablet/mobile — pierden sentido sin la línea */ .schedule-nodes { display: none; } .schedule-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .schedule-slot-inner { padding: 22px 18px; } .schedule-slot-time { font-size: 1.5rem; } .schedule-slot-grupo { font-size: 0.95rem; } .schedule-sidebar { padding-left: 20px; } .schedule-title { font-size: 2rem; } .academy-header { padding: 70px 0 50px; } .academy-header::before { opacity: 0.025; } .academy-pillars-wrap { padding: 48px 0 32px; } .academy-schedule-wrap { padding: 36px 0 56px; } .contact-content { grid-template-columns: 1fr; gap: 40px; } .calendar-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .news-card.featured, .news-card--side, .news-card--compact { grid-column: 1 !important; grid-row: auto !important; } .news-card.featured .news-image { height: 210px; } .news-card--side .news-image { height: 160px; } .news-card--side { flex-direction: column; } .news-card--compact { flex-direction: row; } .news-card--compact .news-image { width: 90px; min-height: 90px; } /* En móvil ocultamos la píldora sobre la imagen (ruido visual) */ .news-card .news-tag-badge { display: none; } .news-header { flex-direction: column; align-items: flex-start; gap: 10px; } .news-header .section-title { text-align: left; } .news-header .section-title::after { left: 0; transform: none; } .news-header .news-all-link { align-self: flex-end; margin-top: 0; } .gallery-tabs { gap: 5px; } .gallery-tab { padding: 10px 16px; font-size: 0.8rem; } } @media (max-width: 480px) { .section-title { font-size: 1.7rem; margin-bottom: 40px; } .section-description { font-size: 1rem; padding: 0 16px; margin-bottom: 36px; } .match-card { flex-direction: column; text-align: center; gap: 15px; } .match-date { min-width: unset; padding: 10px 20px; display: flex; gap: 8px; align-items: center; } .contact-form { padding: 20px; } .pillars-grid { grid-template-columns: 1fr; grid-template-areas: "featured" "side-a" "side-b"; } .schedule-cards { grid-template-columns: 1fr; } .schedule-slot-time { font-size: 1.4rem; } .academy-header { padding: 60px 0 40px; } .academy-cta-wrap { padding: 28px 0; } .academy-cta-wrap .container { gap: 10px; } .academy-btn-main, .academy-btn-outline { padding: 10px 18px; font-size: 0.875rem; text-align: center; } .gallery-grid { grid-template-columns: 1fr 1fr; } } /* Estados de carga y error */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; color: #666; } .loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-blue); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .error-message { display: flex; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; background-color: #fee; border: 1px solid #fcc; border-radius: 8px; color: #c33; margin: 20px 0; } .error-message p { margin: 0; font-weight: 500; } /* Separador entre secciones */ .section-divider { display: flex; align-items: center; justify-content: center; padding: 6px 0; position: relative; overflow: hidden; background-color: #fff; } .section-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e2e8f0; } .section-divider::after { content: ''; display: block; width: 52px; height: 3px; background: var(--primary-yellow); border-radius: 2px; position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════════════════ SECCIÓN SOBRE EL CLUB ══════════════════════════════════════════════════════════════════════════ */ .club-section { padding: 90px 0 80px; background: #fff; } /* Cabecera centrada */ .club-hdr { text-align: center; max-width: 600px; margin: 0 auto 60px; } .club-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-blue); background: rgba(0, 61, 130, 0.07); padding: 4px 14px; border-radius: 20px; margin-bottom: 16px; } .club-heading { font-family: var(--font-brand); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 900; color: var(--primary-blue); line-height: 1.15; margin: 0 0 16px; } .club-sub { font-size: 1.05rem; color: #5a6a7e; line-height: 1.65; margin: 0; } /* Historia + Stats (2 columnas) */ .club-main { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 60px; } .club-story h3 { font-family: var(--font-brand); font-size: 1.25rem; font-weight: 800; color: var(--primary-blue); margin: 0 0 16px; } .club-lead { font-size: 1.05rem; font-weight: 500; color: #1a202c; line-height: 1.7; margin-bottom: 1rem; } .club-story p { font-size: 0.95rem; color: #4a5568; line-height: 1.75; margin-bottom: 1rem; } .club-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 10px 22px; background: var(--primary-blue); color: #fff; font-size: 0.88rem; font-weight: 700; border-radius: 24px; text-decoration: none; transition: background 0.2s, gap 0.2s; } .club-cta:hover { background: var(--light-blue); color: #fff; gap: 10px; } /* Stats 2×2 */ .club-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .club-stats .stat-item { background: #f5f8ff; border: 1px solid #dde6f5; border-radius: 16px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; } .stat-icon { margin-bottom: 4px; line-height: 1; } .stat-num { font-family: var(--font-brand); font-size: 2rem; font-weight: 900; color: var(--primary-blue); line-height: 1; } .stat-lbl { font-size: 0.78rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.05em; } /* Tarjetas Misión, Visión, Valores */ .club-mvv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .mvv-card { background: var(--primary-blue); border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .mvv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 61, 130, 0.25); } .mvv-card--full { grid-column: 1 / -1; } .mvv-icon { width: 52px; height: 52px; background: rgba(255, 215, 0, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mvv-card h3 { font-family: var(--font-brand); font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0; } .mvv-content { display: flex; flex-direction: column; gap: 12px; } .mvv-content p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); line-height: 1.68; margin: 0; } .mvv-content p strong { color: #fff; font-weight: 700; } .mvv-content ul { margin: 8px 0 0 20px; padding: 0; list-style: none; } .mvv-content li { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); line-height: 1.68; margin-bottom: 8px; position: relative; padding-left: 18px; } .mvv-content li::before { content: '•'; position: absolute; left: 0; color: var(--primary-yellow); font-weight: bold; } .mvv-content li strong { color: #fff; } .mvv-motto { font-style: italic; color: var(--primary-yellow) !important; font-weight: 600; margin-top: 16px !important; padding-top: 16px; border-top: 1px solid rgba(255, 215, 0, 0.2); } /* Responsive */ @media (max-width: 900px) { .club-main { grid-template-columns: 1fr; gap: 36px; } .club-mvv { grid-template-columns: 1fr; gap: 24px; } .mvv-card--full { grid-column: 1; } } @media (max-width: 600px) { .club-section { padding: 60px 0 52px; } .club-hdr { margin-bottom: 36px; } .club-stats { grid-template-columns: 1fr 1fr; } .club-mvv { grid-template-columns: 1fr; gap: 20px; } .mvv-card { padding: 28px 24px; border-radius: 16px; gap: 16px; } .mvv-card h3 { font-size: 1.2rem; } .mvv-content p, .mvv-content li { font-size: 0.9rem; line-height: 1.6; } .mvv-icon { width: 48px; height: 48px; } .mvv-content ul { margin: 6px 0 0 18px; } .mvv-content li { margin-bottom: 6px; } } @media (max-width: 400px) { .mvv-card { padding: 20px 16px; } .mvv-card h3 { font-size: 1.1rem; } .mvv-content p, .mvv-content li { font-size: 0.85rem; } .mvv-content ul { margin: 4px 0 0 16px; } .mvv-content li { padding-left: 14px; margin-bottom: 4px; } } /* Botón de scroll to top */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background: rgba(0, 61, 130, 0.9); color: white; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 61, 130, 0.3); transition: all 0.3s ease; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(100px); display: flex; align-items: center; justify-content: center; } .scroll-to-top svg { width: 20px; height: 20px; flex-shrink: 0; } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { background: rgba(0, 86, 179, 0.95); transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0, 61, 130, 0.4); } .scroll-to-top:active { transform: translateY(-2px); } /* Contenedor principal: clip horizontal para que las animaciones de entrada no creen scroll horizontal en móvil */ main { overflow-x: clip; } /* Animaciones de aparición con scroll */ .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } /* Delays escalonados para elementos múltiples */ .fade-delay-1 { transition-delay: 0.1s; } .fade-delay-2 { transition-delay: 0.2s; } .fade-delay-3 { transition-delay: 0.3s; } .fade-delay-4 { transition-delay: 0.4s; } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer { background: var(--dark-blue); color: rgba(255, 255, 255, 0.75); font-size: .9rem; /* El fondo cubre bajo la barra inferior / home indicator de iOS, pero el contenido respeta el inset para no quedar tapado */ padding-bottom: env(safe-area-inset-bottom); /* Hack de extensión de fondo: proyecta una sombra solida (sin blur) de 50vh hacia abajo en el mismo dark-blue. Pinta el area de overscroll/rebote en iOS Safari sin generar scroll real, eliminando la franja blanca del body. */ box-shadow: 0 50vh 0 0 var(--dark-blue); } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .footer-main { padding: 60px 0 48px; } .footer-main .footer-container { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 48px; } /* Columna 1 — Brand */ .footer-logo { height: 64px; width: auto; margin-bottom: 16px; display: block; filter: brightness(0) invert(1); opacity: .9; } .footer-tagline { line-height: 1.6; margin-bottom: 24px; max-width: 280px; } .footer-social { display: flex; gap: 10px; } .social-link { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: background .2s, color .2s, border-color .2s; text-decoration: none; } .social-link:hover { background: var(--primary-yellow); color: var(--dark-blue); border-color: var(--primary-yellow); } /* Columnas 2 y 3 — Nav y Contacto */ .footer-heading { font-family: 'Helvetica Rounded', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-yellow); margin-bottom: 20px; } .footer-nav ul, .footer-contact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-nav a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color .2s; } .footer-nav a:hover { color: var(--primary-yellow); } .footer-contact li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-yellow); opacity: .85; } .footer-contact a { color: inherit; text-decoration: none; } .footer-contact a:hover { color: var(--primary-yellow); } /* Barra inferior */ .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0; } .footer-bottom .footer-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer-copy { color: rgba(255, 255, 255, 0.45); font-size: .82rem; margin: 0; } .footer-credit { font-size: .82rem; color: rgba(255, 255, 255, 0.45); margin: 0; } .footer-credit-link { color: var(--primary-yellow); text-decoration: none; font-weight: 600; transition: opacity .2s; } .footer-credit-link:hover { opacity: .75; } /* Responsive footer */ @media (max-width: 768px) { .footer-main .footer-container { grid-template-columns: 1fr; gap: 36px; } .footer-bottom .footer-container { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .footer-main { padding: 40px 0 32px; } .footer-logo { height: 50px; } .footer-tagline { font-size: 0.85rem; } .footer-heading { margin-bottom: 14px; } .footer-nav ul, .footer-contact ul { gap: 8px; } .footer-contact li { font-size: 0.85rem; } } /* ── Scroll animations ───────────────────────────────── */ .anim { transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .anim.fade-up { opacity: 0; transform: translateY(44px); } .anim.fade-left { opacity: 0; transform: translateX(-44px); } .anim.fade-right { opacity: 0; transform: translateX(44px); } .anim.zoom-in { opacity: 0; transform: scale(0.9); } .anim.fade-in { opacity: 0; } .anim.is-visible { opacity: 1 !important; transform: none !important; } [data-delay="1"] { transition-delay: 0.15s; } [data-delay="2"] { transition-delay: 0.30s; } [data-delay="3"] { transition-delay: 0.45s; } [data-delay="4"] { transition-delay: 0.60s; } [data-delay="5"] { transition-delay: 0.75s; } [data-delay="6"] { transition-delay: 0.90s; } /* Respeta preferencias de accesibilidad */ @media (prefers-reduced-motion: reduce) { .anim { transition: none; } .anim.fade-up, .anim.fade-left, .anim.fade-right, .anim.zoom-in, .anim.fade-in { opacity: 1; transform: none; } } /* ───── Split Hero (texto + tarjeta última noticia) ───── Desktop: 2 columnas. Columna izquierda = intro + actions apilados. Columna derecha = tarjeta de noticia (ocupa las 2 filas). Móvil: 1 columna. Orden intro → noticia → actions (ver @media). */ .hero-split { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); width: 100%; margin-bottom: clamp(24px, 4vh, 50px); animation: fadeInUp 1s ease-out both; } /* Columna izquierda: apila intro y actions con gap pequeño */ .hero-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(24px, 3vh, 40px); } .hero-intro { text-align: left; } .hero-split .hero-news-card { flex-shrink: 0; } /* Alineación izquierda dentro del split (override del centrado global) */ .hero-split .hero-intro h1, .hero-split .hero-intro p { text-align: left; margin-left: 0; margin-right: 0; } .hero-split .hero-intro p { max-width: none; margin-bottom: 0; } .hero-split .hero-buttons { justify-content: flex-start; margin-bottom: 28px; } /* Stats dentro de la columna izquierda */ .hero-split .hero-stats { justify-content: flex-start; gap: 36px; margin: 0; animation: fadeInUp 1s ease-out 0.9s both; } .hero-split .hero-stats .stat-item { text-align: left; } /* Tarjeta de última noticia (blanca, con foto) */ .hero .hero-news-card { display: block; text-decoration: none; background: #ffffff; border-radius: 22px; padding: 14px 14px 24px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); color: var(--primary-blue); position: relative; max-width: clamp(280px, 32vw, 460px); animation: fadeInUp 1s ease-out 0.3s both; transition: transform .35s ease, box-shadow .35s ease; cursor: pointer; } .hero .hero-news-card::before { content: ''; position: absolute; inset: -1px; border-radius: 22px; pointer-events: none; background: linear-gradient(135deg, rgba(255,215,0,0.35), rgba(255,255,255,0) 40%); opacity: 0; transition: opacity .4s ease; } .hero .hero-news-card:hover::before { opacity: 1; } .hero .hero-news-card:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(0, 0, 0, 0.5); } .hero .hero-news-media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #e9eef5; } .hero .hero-news-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .hero .hero-news-card:hover .hero-news-media img { transform: scale(1.06); } .hero .hero-news-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,42,92,0) 55%, rgba(0,42,92,0.45) 100%); pointer-events: none; } .hero .hero-news-tag { position: absolute; top: 14px; right: 14px; background: var(--primary-yellow); color: var(--primary-blue); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); margin: 0; z-index: 2; } .hero .hero-news-body { padding: 20px 12px 4px; text-align: left; } .hero .hero-news-date { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: #6c7a8c; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; font-family: inherit; } .hero .hero-news-title { font-size: 1.5rem; line-height: 1.22; font-weight: 800; color: var(--primary-blue); margin: 0 0 12px; text-shadow: none; text-align: left; font-family: 'Helvetica Rounded', Arial, sans-serif; } .hero .hero-news-excerpt { font-size: .95rem; line-height: 1.55; color: #556070; margin: 0 0 20px; text-align: left; max-width: none; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero .hero-news-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-blue); font-weight: 700; font-size: .95rem; text-decoration: none; transition: gap .3s ease, color .3s ease; padding: 10px 18px; border: 2px solid var(--primary-blue); border-radius: 999px; background: transparent; } .hero .hero-news-link:hover { gap: 14px; color: #fff; background: var(--primary-blue); border-color: var(--primary-blue); } .hero .hero-news-link::after { content: ''; position: absolute; inset: 0; border-radius: 22px; z-index: 1; } /* ───── Tablet (769–1200px): hero split compacto ───── */ @media (max-width: 1200px) and (min-width: 769px) { /* Reducir márgenes del hero-content para ganar altura útil */ .hero-content { margin: 70px auto 15px auto; padding: 15px 24px; } /* Separación y margen inferior del split más ajustados */ .hero-split { gap: clamp(16px, 3vw, 30px); margin-bottom: 14px; } /* Gap entre intro y actions en columna izquierda */ .hero-left { gap: 14px; } .hero-split .hero-buttons { margin-bottom: 10px; } /* Tarjeta de noticia más estrecha */ .hero .hero-news-card { max-width: clamp(210px, 26vw, 285px); } /* Imagen más baja para reducir altura total de la tarjeta */ .hero .hero-news-media { aspect-ratio: 16 / 8; } /* Cuerpo de la tarjeta más compacto */ .hero .hero-news-body { padding: 10px 8px 0; } .hero .hero-news-date { margin-bottom: 6px; font-size: .7rem; } .hero .hero-news-title { font-size: 1.05rem; margin-bottom: 6px; line-height: 1.2; } .hero .hero-news-excerpt { font-size: .82rem; line-height: 1.45; margin-bottom: 10px; -webkit-line-clamp: 2; line-clamp: 2; } .hero .hero-news-link { padding: 7px 14px; font-size: .82rem; gap: 6px; } /* Sponsors más compactos */ .hero-sponsors .slider-container { padding: 18px 0; } .hero-sponsors .sponsor-logo { height: 50px; max-width: 100px; } /* Scroll indicator ajustado a la nueva altura de sponsors */ .scroll-indicator { bottom: 116px; } } /* ───── Responsive (<= 768px): una sola columna ───── */ @media (max-width: 768px) { /* El hero-content ya no necesita reservar 100px para sponsors: lo hace .hero con padding-bottom. Colapsamos para que el contenido quepa sin huecos muertos y todo sea visible. */ /* flex-start en móvil con un pequeño margen superior de respiro: el título sube respecto al centrado pero no queda pegado al header */ .hero-content { margin-bottom: 15px; padding: 45px 20px 15px; justify-content: flex-start; } .hero-split { flex-direction: column; gap: 22px; margin-bottom: 14px; align-items: stretch; } /* En móvil: columna izquierda centrada, gap mínimo entre texto y botones */ .hero-left { width: 100%; gap: 14px; align-items: center; } .hero-intro { text-align: center; } .hero-split .hero-intro h1, .hero-split .hero-intro p { text-align: center; } .hero-split .hero-intro h1 { font-size: 1.85rem; margin-bottom: 6px; line-height: 1.15; } .hero-split .hero-intro p { font-size: .95rem; margin: 0 auto; } /* Stats ocultas en móvil para dar sitio a los sponsors */ .hero-split .hero-stats { display: none; } .hero-split .hero-actions { display: flex; flex-direction: column; align-items: center; } .hero-split .hero-buttons { justify-content: center; margin-bottom: 0; } .hero .hero-news-card { /* Mismo ancho que los botones para alinear visualmente la columna */ padding: 8px 8px 14px; max-width: 300px; margin-left: auto; margin-right: auto; } .hero .hero-news-media { aspect-ratio: 2 / 1; } /* imagen más baja */ .hero .hero-news-tag { top: 10px; right: 10px; font-size: .65rem; padding: 5px 10px; } .hero .hero-news-body { padding: 10px 6px 0; } .hero .hero-news-date { margin-bottom: 6px; font-size: .7rem; } .hero .hero-news-title { font-size: 1.1rem; margin-bottom: 6px; line-height: 1.2; } .hero .hero-news-excerpt { font-size: .85rem; line-height: 1.45; margin-bottom: 10px; -webkit-line-clamp: 2; line-clamp: 2; } .hero .hero-news-link { padding: 6px 12px; font-size: .78rem; gap: 6px; } /* Ocultar indicador de scroll en móvil: el contenido ya invita a bajar */ .scroll-indicator { display: none; } } /* Ajustes extra en pantallas muy pequeñas */ @media (max-width: 480px) { .hero .hero-news-media { aspect-ratio: 16 / 9; } .hero .hero-news-title { font-size: 1.05rem; } .hero .hero-news-excerpt { font-size: .85rem; -webkit-line-clamp: 2; line-clamp: 2; } } /* ── Viewport de poca altura en DESKTOP (≥1201px): laptops con barra navegador ── Se excluye el rango tablet (769–1200px) que ya tiene su propio bloque arriba. Comprime márgenes y tipografía para que el hero no aplaste el contenido. */ @media (max-height: 800px) and (min-width: 1201px) { .hero-content { margin-top: 70px; margin-bottom: 70px; padding-top: 10px; padding-bottom: 10px; } .hero-split { gap: 30px; align-items: center; margin-bottom: 30px; } .hero-left { gap: clamp(24px, 3vh, 36px); } .hero-split .hero-intro h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 10px; } .hero-split .hero-intro p { font-size: 1rem; } .btn-primary, .btn-secondary { padding: 12px 22px; font-size: 0.9rem; } .hero .hero-news-card { max-width: 380px; padding: 10px 10px 16px; } .hero .hero-news-media { aspect-ratio: 2 / 1; } .hero-split .hero-stats { gap: 24px; } .stat-number { font-size: 1.6rem; } } @media (max-height: 650px) and (min-width: 1201px) { .hero-split .hero-stats { display: none; } .hero-content { margin-top: 60px; margin-bottom: 60px; } .hero-split { gap: 20px; } .hero-left { gap: 6px; } .btn-primary, .btn-secondary { padding: 10px 18px; font-size: 0.82rem; } .hero-split .hero-intro h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 6px; } .hero-split .hero-intro p { font-size: .9rem; } /* Tarjeta compacta en viewport bajo: ocultar imagen y reducir padding */ .hero .hero-news-card { padding: 8px 10px 12px; max-width: 320px; } .hero .hero-news-media { display: none; } .hero .hero-news-body { padding: 6px 4px 0; } .hero .hero-news-date { margin-bottom: 4px; font-size: .68rem; } .hero .hero-news-title { font-size: .95rem; margin-bottom: 4px; line-height: 1.2; } .hero .hero-news-excerpt { font-size: .8rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 8px; } .hero .hero-news-link { padding: 5px 10px; font-size: .75rem; } }