/* ========================================================= TD CLUB — Concurso de artistas emergentes Mismo sistema de diseño que TD Producer (tdproducer.tdrecords.es): misma paleta grafito, misma tipografía Inter autoalojada, mismos botones/tarjetas/reveal. Se añade un único acento nuevo, --oro, reservado al 1.º premio y al sorteo — nada más, para no romper la marca. Cero peticiones externas. ========================================================= */ @font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Grafito cálido, no negro puro: heredado tal cual de TD Producer, donde se cambió tras feedback real de visitantes ("se ve muy oscura"). Cada tono sube 5-8 puntos de luminosidad sobre el anterior para que las tarjetas se separen del fondo en vez de leerse como un muro. */ --black: #131315; --charcoal: #19191d; --charcoal-2: #1e1e23; --surface: #26262b; --surface-2: #2f2f36; --border: rgba(255, 255, 255, 0.11); --border-2: rgba(255, 255, 255, 0.19); --white: #f8f7f4; --muted: #b4b1ac; --muted-2: #86827d; --accent: #5468d4; --accent-light: #93a4ff; --accent-dim: #2e3f7f; /* Único color nuevo respecto a TD Producer. Solo 1.er premio y sorteo. */ --oro: #d3ac6a; --oro-dim: rgba(211, 172, 106, 0.14); --ok: #8ee6a8; --err: #ff9b9b; --radius-lg: 20px; --radius: 14px; --radius-sm: 9px; --maxw: 1640px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } /* iOS Safari: overflow-x:hidden en no basta, hace falta también en o el scroll horizontal fantasma no se corta. Bug real y ya pagado en TD Producer — no quitar ninguno de los dos. */ html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; width: 100%; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ul, ol { list-style: none; margin: 0; padding: 0; } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); } .narrow { max-width: 1080px; margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ---------- Tipografía ---------- */ h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -0.02em; } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 12px 2px var(--accent-light); } .kicker.oro::before { background: var(--oro); box-shadow: 0 0 12px 2px var(--oro); } .h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); font-weight: 700; } .h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 700; } .h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; } .lede { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--muted); line-height: 1.6; max-width: 640px; } .section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(36px, 6vw, 56px); } .section-head.center { align-items: center; text-align: center; margin-inline: auto; } .section-head.center .lede { text-align: center; } /* ---------- Layout general ---------- */ section { padding: clamp(64px, 9vw, 108px) 0; position: relative; overflow-x: clip; } /* El header es fijo: sin esto, al saltar a #inscripcion la cabecera de la sección queda tapada debajo de la barra superior. */ section[id], [id="top"] { scroll-margin-top: 84px; } .bg-black { background: var(--black); } .bg-charcoal { background: var(--charcoal-2); } .bg-surface { background: linear-gradient(180deg, var(--charcoal-2), var(--black)); } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); border: 0; margin: 0; } /* Radio de blur moderado a propósito: un blur grande es de los costes de composición más caros en WebKit/iOS. Ver el bug de carga lenta en iPhone documentado en TD Producer. */ .glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; opacity: 0.35; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0; background: rgba(0,0,0,0); border-bottom: 1px solid transparent; transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease); } .site-header.is-scrolled { background: rgba(5,5,5,0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); padding: 11px 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--white); color: var(--black); display: grid; place-items: center; padding: 6px; } .brand-mark svg { width: 100%; height: 100%; } .brand small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--muted-2); margin-top: 2px; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 30px; border-radius: 100px; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), opacity .2s; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn-primary { background: var(--white); color: var(--black); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 34px -12px rgba(255,255,255,.28); } .btn-primary:hover:not([disabled]) { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 44px -10px rgba(255,255,255,.42); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.04); color: var(--white); border-color: var(--border-2); } .btn-ghost:hover { background: rgba(255,255,255,0.09); } .btn-sm { padding: 10px 20px; font-size: 13.5px; } .btn-lg { padding: 18px 38px; font-size: 16px; } .btn-block { width: 100%; } .btn svg { width: 18px; height: 18px; } .cta-note { font-size: 13px; color: var(--muted-2); margin-top: 12px; } .cta-note .dot { margin: 0 8px; opacity: .5; } /* ---------- Hero ---------- */ .hero { padding-top: clamp(124px, 16vw, 176px); padding-bottom: clamp(56px, 8vw, 92px); text-align: center; overflow: hidden; } .hero .glow-a { width: 620px; height: 620px; top: -280px; left: 50%; transform: translateX(-60%); background: var(--accent); } .hero .glow-b { width: 460px; height: 460px; bottom: -220px; right: 6%; background: var(--accent-dim); opacity: .25; } .hero-inner { position: relative; z-index: 1; max-width: 1060px; margin-inline: auto; } .hero .kicker { justify-content: center; margin-bottom: 22px; } .hero .h1 { margin-bottom: 20px; } .hero .lede { margin-inline: auto; margin-bottom: 34px; } .hero-actions { display: flex; flex-direction: column; align-items: center; } .hero-nota { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px; margin-bottom: 30px; } .hero-nota strong { color: var(--white); font-weight: 600; } /* ---------- Contador de plazas ---------- */ .plazas { max-width: 460px; margin: 0 auto 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; text-align: left; } .plazas-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .plazas-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .plazas-de { font-size: 13px; color: var(--muted-2); } .plazas-label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); } .plazas-barra { height: 6px; border-radius: 100px; background: rgba(255,255,255,.09); overflow: hidden; } .plazas-barra span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent-dim), var(--accent-light)); width: 0; transition: width .9s var(--ease); } .plazas.is-cerrado .plazas-label { color: var(--err); } .plazas.is-cerrado .plazas-barra span { background: var(--err); } /* ---------- Cifras del concurso ---------- */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 1160px; margin-inline: auto; } .cifra { background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; } .cifra b { display: block; font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; } .cifra span { font-size: 14px; color: var(--muted); line-height: 1.5; display: block; } .cifra.destacada b { color: var(--oro); } /* ---------- Tarjetas genéricas ---------- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 1400px; margin-inline: auto; position: relative; z-index: 1; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--border-2); background: var(--surface-2); } .card-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.06); display: grid; place-items: center; margin-bottom: 18px; } .card-icon svg { width: 22px; height: 22px; stroke: var(--white); } .card h3 { margin-bottom: 8px; font-size: 17px; } .card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ---------- Podio de premios ---------- */ .podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1280px; margin-inline: auto; align-items: start; } .premio { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 28px 30px; display: flex; flex-direction: column; gap: 18px; transition: transform .3s var(--ease), border-color .3s var(--ease); } .premio:hover { transform: translateY(-4px); border-color: var(--border-2); } .premio-puesto { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } .premio-puesto b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid var(--border-2); font-size: 13px; color: var(--white); } .premio h3 { font-size: 20px; line-height: 1.25; } .premio-valor { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--accent-light); } .premio ul { display: flex; flex-direction: column; gap: 11px; flex: 1; } .premio li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #dcd9d4; line-height: 1.5; } .premio li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; stroke: var(--accent-light); } /* 1.er premio: el único sitio, junto al sorteo, donde entra el oro */ .premio.is-oro { border-color: rgba(211,172,106,.42); background: linear-gradient(180deg, var(--oro-dim), var(--surface) 62%); } .premio.is-oro .premio-puesto { color: var(--oro); } .premio.is-oro .premio-puesto b { background: var(--oro); border-color: var(--oro); color: #1a1509; font-weight: 800; } .premio.is-oro .premio-valor { color: var(--oro); } .premio.is-oro li svg { stroke: var(--oro); } .premio-cinta { position: absolute; top: -12px; left: 28px; background: var(--oro); color: #1a1509; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; } /* ---------- Panel destacado (regalo, finalistas, sorteo) ---------- */ .panel { max-width: 1180px; margin-inline: auto; background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(28px, 4.5vw, 52px); } .panel.is-oro { border-color: rgba(211,172,106,.34); background: linear-gradient(160deg, var(--oro-dim), var(--charcoal-2) 55%); } .panel-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .panel-grid .lede { max-width: none; } .panel h2 + .lede, .panel .h2 + .lede { margin-top: 16px; } .lista-check { display: flex; flex-direction: column; gap: 13px; } .lista-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #dcd9d4; line-height: 1.55; } .lista-check svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; stroke: var(--accent-light); } .panel.is-oro .lista-check svg { stroke: var(--oro); } /* ---------- Pasos ---------- */ .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 1400px; margin-inline: auto; counter-reset: paso; } .paso { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 24px 26px; } .paso::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--accent-light); margin-bottom: 14px; } .paso h3 { font-size: 16.5px; margin-bottom: 9px; } .paso p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ---------- Foto a sangre ---------- */ .photo-reveal { max-width: 1080px; margin: 44px auto 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,.02); aspect-ratio: 3 / 2; background: var(--charcoal); } .photo-reveal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .photo-reveal.pos-high img { object-position: 50% 18%; } .photo-reveal.pos-mid img { object-position: 50% 45%; } .photo-reveal.sin-margen { margin-top: 0; } /* ---------- Preguntas frecuentes ---------- */ .faq { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .25s var(--ease); } .faq details[open] { border-color: var(--border-2); } .faq summary { padding: 20px 56px 20px 24px; font-size: 15.5px; font-weight: 600; cursor: pointer; position: relative; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); } .faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); } .faq .faq-cuerpo { padding: 0 24px 22px; color: var(--muted); font-size: 14.5px; line-height: 1.65; } .faq .faq-cuerpo p { margin: 0 0 12px; } .faq .faq-cuerpo p:last-child { margin-bottom: 0; } /* ---------- Formulario de inscripción ---------- */ .inscripcion-wrap { max-width: 940px; margin-inline: auto; } .form-caja { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); } .form-precio { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--border); } .form-precio b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .form-precio span { font-size: 14px; color: var(--muted); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .campo { display: flex; flex-direction: column; gap: 7px; } .campo.ancho { grid-column: 1 / -1; } .campo label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .campo label .req { color: var(--accent-light); } .campo .ayuda { font-size: 12.5px; color: var(--muted-2); line-height: 1.45; } .field { background: rgba(255,255,255,0.04); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--white); font-size: 14.5px; font-family: inherit; width: 100%; transition: border-color .2s, background .2s; } .field::placeholder { color: var(--muted-2); } .field:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.06); } .field[aria-invalid="true"] { border-color: var(--err); } textarea.field { resize: vertical; min-height: 92px; line-height: 1.55; } select.field { appearance: none; cursor: pointer; } select.field option { background: var(--charcoal-2); color: var(--white); } .field-hp { position: absolute; left: -9999px; opacity: 0; } .acepta { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 22px 0 20px; } .acepta input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } /* Sin white-space:nowrap en este bloque: se hereda a los hijos y parte el texto fuera de la pantalla. Ya pasó de verdad en TD Transfers, en móvil Y en escritorio, y tardó semanas en verse. */ .acepta a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; } .form-msg { font-size: 13.5px; margin-top: 14px; min-height: 18px; } .form-msg[data-state="ok"] { color: var(--ok); } .form-msg[data-state="error"] { color: var(--err); } .form-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); margin-top: 16px; } .form-seguro svg { width: 15px; height: 15px; stroke: var(--muted-2); } .cerrado-aviso { background: var(--charcoal-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 26px 24px; text-align: center; } .cerrado-aviso h3 { margin-bottom: 10px; } .cerrado-aviso p { color: var(--muted); font-size: 14.5px; margin: 0; } /* ---------- Página de gracias ---------- */ .gracias { min-height: 100vh; display: grid; place-items: center; padding: 120px 0 80px; text-align: center; } .gracias .glow-a { width: 620px; height: 620px; top: -240px; left: 50%; transform: translateX(-50%); background: var(--accent); } .gracias-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; } .gracias-ref { display: inline-block; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 26px; font-size: 26px; font-weight: 800; letter-spacing: .06em; margin: 4px 0 12px; } .gracias-plaza { font-size: 13.5px; color: var(--muted-2); margin-bottom: 32px; } .gracias-pasos { text-align: left; max-width: 560px; margin: 34px auto 0; } /* ---------- Página de bases ---------- */ .legal { max-width: 880px; margin-inline: auto; } .legal h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 44px 0 16px; } .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-size: 16.5px; margin: 26px 0 10px; color: var(--white); } .legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.72; } .legal p { margin: 0 0 14px; } .legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; } .legal ul li { list-style: disc; margin-bottom: 8px; } .legal ol li { list-style: decimal; margin-bottom: 8px; } .legal strong { color: var(--white); font-weight: 600; } .legal .actualizado { font-size: 13px; color: var(--muted-2); } .legal-toc { background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 44px; } .legal-toc ol { margin: 0; padding-left: 20px; } .legal-toc li { margin-bottom: 6px; } .legal-toc a { color: var(--accent-light); } .legal-toc a:hover { text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { padding: 42px 0 34px; border-top: 1px solid var(--border); background: var(--black); } .footer-inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; } .footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); } .footer-links a:hover { color: var(--white); } .footer-copy { font-size: 12.5px; color: var(--muted-2); margin-top: 22px; text-align: center; line-height: 1.6; } /* ---------- Animación de entrada ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .plazas-barra span { transition: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } } @media (max-width: 660px) { .form-grid { grid-template-columns: 1fr; } .brand small { display: none; } } @media (max-width: 560px) { .btn { width: 100%; } .hero-actions .btn { width: auto; } .premio-cinta { left: 50%; transform: translateX(-50%); } .plazas-fila { flex-wrap: wrap; } }