/* ============================================================ LUZ — la capa visual de la cara pública de Cancha ------------------------------------------------------------ Copiada de Smartagent (repos/ventas/css/lux.css) con el color de acento cambiado: aquí la luz es sol del valle, tierra de Mexicali y pasto. Se carga DESPUÉS de app.css y sólo actúa dentro de , así que no toca las pantallas de adentro (el panel del entrenador y del tesorero). La idea es la misma: luz, foto grande y vidrio. El color fuerte no lo pone el CSS — lo pone la foto real de la cancha. ============================================================ */ .lux { /* Luz ambiental */ --luz-sol: #f5dcaa; /* sol del valle, arriba a la derecha */ --luz-tierra:#ecc9ad; /* tierra de Mexicali, arriba a la izquierda */ --luz-campo: #cbe6cf; /* pasto, abajo */ --luz-hoja: #45b077; /* pasto brillante (nunca para texto chico) */ /* Vidrio */ --vidrio: rgba(255, 255, 255, .72); --vidrio-fuerte: rgba(255, 255, 255, .88); --vidrio-borde: rgba(255, 255, 255, .75); --vidrio-oscuro: rgba(12, 30, 20, .40); /* Profundidad: sombra teñida de verde, no gris */ --sombra-1: 0 2px 8px rgba(16, 45, 30, .06); --sombra-2: 0 12px 30px rgba(16, 45, 30, .11); --sombra-3: 0 28px 70px rgba(16, 45, 30, .17); --brillo: 0 10px 30px rgba(28, 122, 75, .32); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; background: #f8faf6; letter-spacing: -.011em; } /* ---------- Fondo ambiental (fijo, no se mueve al bajar) ---------- */ .lux-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 620px at 88% -6%, rgba(245, 220, 170, .60), transparent 62%), radial-gradient(760px 560px at 6% -4%, rgba(236, 201, 173, .50), transparent 60%), radial-gradient(1100px 700px at 50% 108%, rgba(203, 230, 207, .66), transparent 62%), #f8faf6; } /* Grano finísimo: le quita el aspecto de "degradado de plantilla" */ .lux-bg::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } /* ---------- Tipografía ---------- */ .lux h1, .lux h2, .lux h3 { letter-spacing: -.03em; font-weight: 800; } .lux .section-head { margin: 46px 0 18px; } .lux .section-head h2 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.05; } .lux .section-head p { font-size: 16px; max-width: 58ch; } .lux .eyebrow { color: var(--green-2); } /* ---------- Barra superior: pastilla de vidrio flotando ---------- */ .lux .topbar { width: min(1060px, calc(100% - 28px)); margin: 14px auto 0; top: 14px; padding: 10px 12px 10px 16px; border: 1px solid var(--vidrio-borde); border-radius: 999px; background: var(--vidrio); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-2); } .lux .brand { font-size: 17px; letter-spacing: -.02em; } .lux .brand-mark { border-radius: 12px; box-shadow: var(--brillo); } /* ---------- Botones ---------- */ .lux .btn { border-radius: 999px; padding: 13px 22px; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: var(--brillo); } .lux .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(28, 122, 75, .42); } .lux .btn.wa { background: linear-gradient(145deg, #d2691e, #b04e1e); box-shadow: 0 10px 30px rgba(176, 78, 30, .34); } .lux .btn.ghost { background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1); backdrop-filter: blur(12px); } .lux .btn.ghost:hover { background: #fff; } /* ---------- HÉROE: el próximo partido ---------- La foto de la cancha deja de ser una imagen al lado y pasa a ser el fondo. Es lo primero que ve el papá cuando abre el enlace. */ .lux .hero { position: relative; overflow: hidden; margin-top: 22px; min-height: min(74vh, 620px); border-radius: var(--r-xl); padding: clamp(24px, 5vw, 60px); display: flex; align-items: flex-end; box-shadow: var(--sombra-3); /* Si el club todavía no sube foto de la cancha, el héroe NO se ve roto: se ve la cancha dibujada sobre verde. Nunca un hueco gris que diga "sin foto", y nunca un rectángulo de color plano. Las líneas se pintan en el FONDO del héroe: cuando sí hay foto, la foto va en z-index -1 y las tapa sola, sin una clase extra que mantener. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 380' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='3'%3E%3Crect x='30' y='24' width='540' height='332' rx='6'/%3E%3Cline x1='300' y1='24' x2='300' y2='356'/%3E%3Ccircle cx='300' cy='190' r='62'/%3E%3Cpath d='M30 105h86v170H30'/%3E%3Cpath d='M570 105h-86v170h86'/%3E%3Cpath d='M30 60h30v-36'/%3E%3Cpath d='M570 60h-30v-36'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat, linear-gradient(150deg, #10502f, #1c7a4b 52%, #45b077); isolation: isolate; } .lux .hero-photo { position: absolute; inset: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; z-index: -1; } /* Realce parejo de toda foto: las de celular salen planas. Lo hace el GPU del que mira, no un servicio que se paga. */ .lux .hero-photo img, .lux .foto img { filter: saturate(1.08) contrast(1.04) brightness(1.02); } .lux .hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: luz-acercar 26s ease-in-out infinite alternate; } @keyframes luz-acercar { from { transform: scale(1.02); } to { transform: scale(1.11); } } @media (prefers-reduced-motion: reduce) { .lux .hero-photo img { animation: none; } } /* Velo: sin esto el texto blanco se pierde sobre una foto clara. Va en z-index 0 (encima de la foto, que está en -1) y el texto en 1. */ .lux .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 26, 18, .52) 0%, rgba(14, 26, 18, .10) 34%, rgba(14, 26, 18, .78) 100%), linear-gradient(90deg, rgba(14, 26, 18, .45) 0%, transparent 55%); } /* El texto va suelto sobre la foto, sin tarjeta blanca abajo. */ .lux .hero-copy { position: relative; z-index: 1; max-width: 44ch; display: grid; gap: 16px; padding: 0; background: transparent; border: 0; box-shadow: none; justify-items: start; /* si no, las pastillas se estiran de lado a lado */ } .lux .hero-copy .eyebrow { color: rgba(255, 255, 255, .88); margin: 0; } .lux .hero-copy h1 { color: #fff; font-size: clamp(34px, 6vw, 66px); line-height: .98; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); margin: 0; } .lux .hero-copy p { color: rgba(255, 255, 255, .92); font-size: clamp(16px, 1.5vw, 19px); margin: 0; } .lux .hero-copy .pill { color: #fff; background: var(--vidrio-oscuro); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px); padding: 8px 14px; font-size: 13.5px; } .lux .hero-copy .acciones { display: flex; gap: 10px; flex-wrap: wrap; } .lux .hero-copy .btn.ghost { background: rgba(255, 255, 255, .95); color: var(--green-dark); border-color: transparent; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); } .lux .hero-copy .btn.ghost:hover { background: #fff; } /* La hora flota como tarjeta de vidrio, arriba a la derecha. Va colgada del héroe, no de la foto: si cuelga de la foto, el velo que hace legible el título también la apaga. */ .lux .hero > .hora-tag { position: absolute; z-index: 2; text-align: right; right: clamp(16px, 3vw, 32px); top: clamp(16px, 3vw, 32px); padding: 14px 20px; border-radius: var(--r-md); color: var(--ink); background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sombra-2); } .lux .hero > .hora-tag strong { display: block; font-size: 26px; line-height: 1.1; color: var(--green); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .lux .hero > .hora-tag span { font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--muted); letter-spacing: .1em; } /* ---------- Cifras: vidrio montado sobre el borde del héroe ---------- */ .lux .hero-stats { position: relative; z-index: 2; display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); width: min(100%, 1000px); margin: -52px auto 0; } .lux .hero-stats .stat { padding: 18px 20px; border: 1px solid var(--vidrio-borde); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-2); display: grid; gap: 3px; } .lux .hero-stats .stat strong { font-size: clamp(16px, 1.9vw, 21px); letter-spacing: -.03em; line-height: 1.15; } .lux .hero-stats .stat span { font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } /* La barra flotante tapa el título al saltar con un enlace "#": se le deja aire. */ .lux [id] { scroll-margin-top: 96px; } /* ---------- Filtros en pastilla ---------- */ .lux .filtro { flex: 0 0 auto; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1); transition: transform .16s ease, box-shadow .16s ease; } .lux .filtro:hover { transform: translateY(-1px); } .lux .filtro.on { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: var(--brillo); } /* ---------- Tarjetas de vidrio ---------- */ .lux .card { border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(18px); box-shadow: var(--sombra-2); padding: 22px; } .lux .card.pegado { padding: 0; overflow: hidden; } .lux .fila { background: transparent; } .lux .fila:hover { background: rgba(255, 255, 255, .55); } .lux .partido { border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(18px); box-shadow: var(--sombra-2); transition: transform .22s ease, box-shadow .22s ease; } .lux .partido:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); } .lux .field input, .lux .field select, .lux .field textarea { border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); border-color: rgba(217, 227, 220, .9); } .lux .marca { background: rgba(255, 255, 255, .62); border-radius: var(--r-md); } /* La foto del hijo o de la cancha, dentro de una tarjeta */ .lux .foto { border-radius: var(--r-md); overflow: hidden; } /* Aparecer al bajar: le da ritmo al scroll sin distraer. OJO: la clase que esconde la pone el JS (si el JS falla, se ve todo) y además hay un plazo que destapa pase lo que pase. */ @media (prefers-reduced-motion: no-preference) { .lux .revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .lux .revelar.visible { opacity: 1; transform: none; } } /* ---------- Ventanas ---------- */ .lux .modal { background: rgba(14, 26, 18, .5); backdrop-filter: blur(10px); } .lux .modal-box { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sombra-3); } @media (min-width: 720px) { .lux .modal-box { border-radius: var(--r-xl); } } .lux .modal-head { background: var(--vidrio-fuerte); backdrop-filter: blur(20px); } /* ---------- Barra fija del celular ---------- En el teléfono, "Cómo llegar" no puede depender de que el papá regrese hasta arriba. */ .lux .barra-movil { display: none; } @media (max-width: 760px) { .lux .barra-movil { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; gap: 10px; padding: 10px; border-radius: 999px; background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-3); } .lux .barra-movil .btn { flex: 1; padding: 12px 14px; font-size: 15px; } .lux main { padding-bottom: 96px !important; } .lux .hero { min-height: 72vh; border-radius: var(--r-lg); } /* En el celular las cifras NO se montan sobre el héroe: no hay lugar y terminaban tapando los botones. Van abajo y de dos en dos. */ .lux .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 14px; } /* La pastilla de la marca deja de ir pegada arriba: al bajar se montaba sobre el título y se comía el primer renglón. */ .lux .topbar { position: relative; top: auto; margin-top: 10px; } .lux [id] { scroll-margin-top: 24px; } /* Arriba ya no va otro "Cómo llegar": abajo hay uno fijo. */ .lux .topbar #llegar-top { display: none; } .lux .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux .hero > .hora-tag { padding: 10px 14px; } .lux .hero > .hora-tag strong { font-size: 20px; } }