/* ============================================================ PLL EVENTS — Front público Mobile-first. El tema de cada evento llega en --primario y --acento (inyectadas en el por app/views/public/layout.php). Sin blur() grande: los fondos son radial-gradient (los blur enormes congelan iPhones). ============================================================ */ :root { --primario: #05612b; --acento: #f5c518; --tinta: #0c140f; --tinta-2: #101c14; --papel: #f6f7f5; --papel-2: #ffffff; --texto: #14181a; --suave: #5b6560; --linea: rgba(12, 20, 15, .12); --radio: 14px; --radio-sm: 10px; --sombra: 0 10px 30px rgba(8, 16, 12, .10); --sombra-lg:0 20px 50px rgba(8, 16, 12, .18); --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --paso: clamp(2.75rem, 8vw, 4.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--texto); background: var(--papel); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.015em; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--primario); text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--papel-2); color: var(--texto); padding: .75rem 1.1rem; border-radius: 0 0 var(--radio-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ── Toggle de idioma ───────────────────────────────── */ .lang-toggle { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: .75rem; z-index: 60; display: flex; gap: .15rem; padding: .25rem; border-radius: 999px; /* Opaco a propósito: sobre un hero verde oscuro el fondo translúcido dejaba el control casi invisible en móvil. */ background: rgba(8, 14, 10, .88); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 2px 10px rgba(0, 0, 0, .28); } .lt-btn { display: block; padding: .34rem .78rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: rgba(255, 255, 255, .82); transition: background .18s ease, color .18s ease; } .lt-btn:hover { color: #fff; } .lt-btn.is-active { background: var(--acento); color: #10160f; } /* ── Estructura ─────────────────────────────────────── */ .wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; } .wrap-form { max-width: 34rem; } .section { padding: var(--paso) 0; } .section-intro { background: var(--papel); } .section-form { background: var(--papel-2); border-top: 1px solid var(--linea); scroll-margin-top: 0; } /* ── Hero ───────────────────────────────────────────── */ .hero { position: relative; display: flex; align-items: flex-end; min-height: 78vh; min-height: 78svh; padding: 5rem 0 3rem; overflow: hidden; background-color: var(--primario); color: #fff; isolation: isolate; } .hero--corto { min-height: 46vh; min-height: 46svh; align-items: center; } /* Un hero sin foto ni video no gana nada ocupando la pantalla entera: solo deja un vacío antes del contenido. Se acorta y se centra. */ .hero--gradiente { min-height: 58vh; min-height: 58svh; align-items: center; padding: 4rem 0 3.5rem; background-image: radial-gradient(85% 70% at 88% 112%, var(--acento) 0%, transparent 62%), radial-gradient(75% 60% at 6% -12%, rgba(255, 255, 255, .28) 0%, transparent 70%); } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(4, 8, 6, .58) 0%, rgba(4, 8, 6, .18) 42%, rgba(4, 8, 6, .82) 100%); } .hero-inner { position: relative; width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; } .hero-marca, .hero-fecha { margin: 0 0 .85rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .hero-logo { height: 46px; width: auto; margin-bottom: 1rem; } .hero-title { font-size: clamp(2.1rem, 8.5vw, 4.25rem); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .38); max-width: 18ch; } .hero-title-xl { font-size: clamp(2.4rem, 11vw, 6rem); max-width: 14ch; } .hero-tagline { margin: 1rem 0 0; max-width: 40ch; font-size: clamp(1rem, 3.4vw, 1.25rem); color: rgba(255, 255, 255, .88); text-shadow: 0 2px 12px rgba(0, 0, 0, .35); } .hero-cerrado { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .82); background: rgba(6, 12, 8, .55); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: .6rem 1.1rem; display: inline-block; } /* ── Botones ────────────────────────────────────────── */ .btn { display: inline-block; border: 0; border-radius: 999px; padding: .95rem 1.9rem; font: inherit; font-weight: 700; letter-spacing: .01em; color: #10160f; background: var(--acento); cursor: pointer; text-decoration: none; text-align: center; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; box-shadow: 0 6px 18px rgba(8, 16, 12, .22); } .btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); } .btn:active { transform: translateY(0); } .btn[disabled], .btn.is-cargando { opacity: .62; cursor: progress; transform: none; } .btn-hero { margin-top: 1.75rem; } .btn-full { display: block; width: 100%; margin-top: 1.5rem; border-radius: var(--radio); background: var(--primario); color: #fff; padding: 1.05rem 1.5rem; font-size: 1.02rem; } /* ── Prosa e info ───────────────────────────────────── */ .prosa { max-width: 42rem; font-size: 1.06rem; color: #2b3330; } .info-grid { display: grid; gap: 1rem; margin-top: 2.25rem; grid-template-columns: 1fr; } .info-card { background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.35rem; box-shadow: var(--sombra); } .info-lbl { margin: 0 0 .35rem; font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primario); } .info-val { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; } .info-sub { margin: .3rem 0 0; font-size: .95rem; color: var(--suave); } .info-link { display: inline-block; margin-top: .7rem; font-size: .9rem; font-weight: 700; color: var(--primario); } .cupos { margin: 2rem 0 0; display: inline-block; padding: .55rem 1.1rem; border-radius: 999px; background: rgba(5, 97, 43, .08); border: 1px solid var(--linea); font-size: .9rem; font-weight: 700; color: var(--primario); } .cupos-lleno { background: rgba(140, 90, 0, .08); color: #8a5b00; } .vacio { color: var(--suave); font-size: 1.05rem; } /* ── Formulario ─────────────────────────────────────── */ .form-head { margin-bottom: 1.75rem; } .form-head h2 { font-size: clamp(1.5rem, 5.5vw, 2.1rem); color: var(--primario); } .field { margin-bottom: 1.15rem; } .label, .fieldset .label { display: block; margin-bottom: .4rem; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #3c4542; } .req { color: #b3261e; } .ayuda { margin: -.15rem 0 .45rem; font-size: .85rem; color: var(--suave); } .input { width: 100%; padding: .85rem 1rem; font: inherit; font-size: 16px; /* evita el zoom automático de iOS */ color: var(--texto); background: var(--papel-2); border: 1.5px solid #d7dbd8; border-radius: var(--radio-sm); transition: border-color .16s ease, box-shadow .16s ease; -webkit-appearance: none; appearance: none; } .input:hover { border-color: #b9c0bc; } .input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px rgba(5, 97, 43, .13); } textarea.input { min-height: 7rem; resize: vertical; } .select-wrap { position: relative; } .select-wrap::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid #6c7570; border-bottom: 2px solid #6c7570; transform: translateY(-70%) rotate(45deg); pointer-events: none; } .select-wrap .input { padding-right: 2.6rem; } .fieldset { margin: 0; padding: 0; border: 0; } .opciones { display: grid; gap: .5rem; } .opcion { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .85rem; border: 1.5px solid #dfe3e0; border-radius: var(--radio-sm); background: var(--papel-2); font-size: .97rem; line-height: 1.5; cursor: pointer; transition: border-color .16s ease, background .16s ease; } .opcion:hover { border-color: #c3c9c5; } .opcion input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--primario); flex: 0 0 auto; } .opcion:has(input:checked) { border-color: var(--primario); background: rgba(5, 97, 43, .05); } .field-consent .opcion { font-size: .88rem; color: #3f4a45; align-items: flex-start; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .field-error { margin: .35rem 0 0; font-size: .84rem; font-weight: 600; color: #b3261e; min-height: 0; } .field-error:empty { display: none; } .field.tiene-error .input, .field.tiene-error .opcion { border-color: #b3261e; } .form-error { margin-bottom: 1.25rem; padding: .85rem 1.05rem; border-radius: var(--radio-sm); border: 1px solid #f0c9c6; background: #fdf1f0; color: #8f1f19; font-size: .92rem; } .form-error[hidden] { display: none; } .aviso { padding: 1.15rem 1.25rem; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); } .aviso-titulo { margin: 0; font-family: var(--serif); font-size: 1.2rem; } .aviso-espera { margin-bottom: 1.25rem; background: rgba(245, 197, 24, .12); border-color: rgba(160, 120, 0, .28); } .disclaimer { margin: 1.1rem 0 0; font-size: .78rem; line-height: 1.6; color: #8c948f; text-align: center; } /* ── Éxito y ticket ─────────────────────────────────── */ .exito { text-align: center; padding: 1rem 0; } .exito[hidden] { display: none; } .exito-titulo { font-size: clamp(1.5rem, 5.5vw, 2rem); color: var(--primario); } .exito-msg { margin-top: .5rem; color: var(--suave); } .exito-nota { margin-top: 1rem; font-size: .85rem; color: var(--suave); } /* Acceso a evento en línea: solo se muestra tras un registro confirmado. */ .acceso-online { margin: 1.5rem auto; max-width: 24rem; padding: 1.25rem 1.4rem; border-radius: var(--radio); border: 1px solid var(--primario); background: rgba(5, 97, 43, .04); text-align: center; } .acceso-online[hidden] { display: none; } .acceso-lbl { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primario); } .acceso-plat { margin: .5rem 0 0; font-size: 1.05rem; font-weight: 600; } .acceso-plat[hidden] { display: none; } .acceso-online .btn { margin-top: .9rem; } .acceso-nota { margin: .9rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--suave); white-space: pre-line; } .acceso-nota[hidden] { display: none; } .ticket { display: block; margin: 1.5rem auto; max-width: 20rem; padding: 1.15rem 1.5rem; border-radius: var(--radio); background: var(--acento); color: #10160f; box-shadow: var(--sombra-lg); animation: ticket-in .55s cubic-bezier(.16, .84, .44, 1) both; } .ticket[hidden] { display: none; } .ticket-lbl { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .62; } .ticket-num { display: block; margin-top: .2rem; font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.5rem); font-weight: 700; letter-spacing: .06em; } @keyframes ticket-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } } /* ── Portada: tarjetas de eventos ───────────────────── */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .card { background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); } .card-link { display: block; color: inherit; text-decoration: none; height: 100%; } .card-media { aspect-ratio: 16 / 9; background-color: var(--card-primario, var(--primario)); background-image: radial-gradient(80% 80% at 85% 110%, var(--card-acento, var(--acento)) 0%, transparent 62%), radial-gradient(70% 60% at 8% -10%, rgba(255, 255, 255, .26) 0%, transparent 70%); } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 1.15rem 1.25rem 1.35rem; } .chip { display: inline-block; margin-bottom: .7rem; padding: .28rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .chip.is-abierto { background: rgba(5, 97, 43, .11); color: #045626; } .chip.is-espera { background: rgba(180, 130, 0, .14); color: #7d5900; } .chip.is-cerrado { background: rgba(60, 70, 65, .12); color: #4a534e; } .card-title { font-size: 1.35rem; } .card-tagline { margin: .45rem 0 0; color: var(--suave); font-size: .95rem; } .card-meta { margin: 1rem 0 0; display: grid; gap: .55rem; } .card-meta div { display: grid; gap: .1rem; } .card-meta dt { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primario); } .card-meta dd { margin: 0; font-size: .93rem; color: #303834; } .card-cta { display: inline-block; margin-top: 1.1rem; font-size: .9rem; font-weight: 800; color: var(--primario); } /* ── Ganadores ──────────────────────────────────────── */ .sorteo { margin-bottom: 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--linea); } .sorteo:last-of-type { border-bottom: 0; } .sorteo-lbl { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primario); } .sorteo-nombre { font-size: clamp(1.4rem, 5vw, 1.9rem); margin-top: .2rem; } .sorteo-fecha { margin: .35rem 0 0; color: var(--suave); font-size: .92rem; } .ganadores { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; } .ganador { background: var(--papel-2); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); } .ganador-premio { margin: 0 0 .55rem; display: grid; gap: .1rem; } .ganador-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); } .ganador-valor { font-family: var(--serif); font-size: 1.15rem; } .ganador-ticket { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; color: var(--primario); } .ganador-nombre { margin: .15rem 0 0; font-size: 1rem; color: #333b37; } .transparencia { margin-top: 1.5rem; font-size: .82rem; line-height: 1.7; color: var(--suave); } .semilla-lbl { font-weight: 700; } .semilla { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; word-break: break-all; background: rgba(12, 20, 15, .06); padding: .15rem .35rem; border-radius: 4px; } .volver-link { margin-top: 2.5rem; font-weight: 700; } /* ── Tema video-scrub ───────────────────────────────── */ .scrub { position: relative; height: 220vh; background: var(--tinta); } .scrub-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--primario); background-image: radial-gradient(85% 70% at 88% 112%, var(--acento) 0%, transparent 62%), radial-gradient(75% 60% at 6% -12%, rgba(255, 255, 255, .22) 0%, transparent 70%); } .scrub-poster, .scrub-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .scrub-video { opacity: 0; transition: opacity .5s ease; } .scrub.scrub-on .scrub-video { opacity: 1; } .scrub-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--acento); z-index: 6; } .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem 1.5rem; pointer-events: none; z-index: 4; } .ov a, .ov button { pointer-events: auto; } .ov-a { justify-content: flex-start; padding-top: 16vh; } .ov-c { justify-content: flex-end; padding-bottom: 12vh; } .ov .hero-title, .ov .hero-tagline { margin-left: auto; margin-right: auto; } .fase { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; } .fase.is-visible { opacity: 1; transform: none; } .scroll-hint { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .05rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); transition: opacity .4s ease; } .scroll-hint .arrow { font-size: 1rem; line-height: 1; opacity: 0; } .scroll-hint .arrow:nth-of-type(1) { animation: flecha 1.5s ease-in-out infinite; } .scroll-hint .arrow:nth-of-type(2) { animation: flecha 1.5s ease-in-out .22s infinite; } .scroll-hint .arrow:nth-of-type(3) { animation: flecha 1.5s ease-in-out .44s infinite; } @keyframes flecha { 0%, 100% { opacity: 0; transform: translateY(0); } 45% { opacity: 1; transform: translateY(3px); } } /* Sin JS, sin soporte de scrub o con movimiento reducido: hero normal */ .scrub:not(.scrub-on) { height: auto; } .scrub:not(.scrub-on) .scrub-sticky { position: relative; height: auto; min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 5rem 0 3.5rem; } .scrub:not(.scrub-on) .ov { position: relative; inset: auto; padding: 0 1.5rem; } .scrub:not(.scrub-on) .ov-a { padding-top: 0; } .scrub:not(.scrub-on) .ov-c { padding-bottom: 0; } .scrub:not(.scrub-on) .fase { opacity: 1; transform: none; } .scrub:not(.scrub-on) .scroll-hint, .scrub:not(.scrub-on) .scrub-bar { display: none; } /* ── Pie ────────────────────────────────────────────── */ .pie { background: var(--tinta); color: rgba(255, 255, 255, .5); padding: 3rem 1.25rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; } .pie-wrap { max-width: 40rem; margin: 0 auto; } .pie-marca { margin: 0 0 .9rem; font-family: var(--serif); font-size: 1.15rem; color: rgba(255, 255, 255, .88); } .pie-legal { margin: 0 0 1rem; font-size: .8rem; line-height: 1.75; font-style: italic; } .pie-copy { margin: 0; font-size: .74rem; color: rgba(255, 255, 255, .34); } .pie-powered { margin: .5rem 0 0; font-size: .74rem; color: rgba(255, 255, 255, .34); } .w-brand { color: rgba(255, 255, 255, .62); font-weight: 700; } .w00 { color: var(--acento); } /* ── Tablet / escritorio ────────────────────────────── */ @media (min-width: 46rem) { body { font-size: 1.03rem; } .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .cards { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .ganadores { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .wrap { padding: 0 2rem; } .hero-inner { padding: 0 2rem; } .hero { padding-bottom: 4.5rem; } } @media (min-width: 68rem) { .cards { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } } /* Una sola tarjeta no debe estirarse a lo ancho de la pantalla */ .cards:has(> .card:only-child) { max-width: 32rem; } /* ── Accesibilidad de movimiento ────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .scrub-video { display: none; } } @media (prefers-contrast: more) { .input { border-color: #4a534e; } .disclaimer, .pie-legal { color: #ffffffcc; } } @media print { .lang-toggle, .scroll-hint, .btn { display: none !important; } body { background: #fff; color: #000; } }