y si no hereda el `padding: clamp(56px,7vw,96px) 0` de la regla global. */ .panel-paso.is-activo { display: flex; } .panel-paso > .titulo-paso { margin-bottom: 2px; } .titulo-paso h2 { font-size: 20px; font-weight: 600; margin-bottom: 6px; } .titulo-paso p { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.55; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .campo { display: flex; flex-direction: column; gap: 7px; } .campo.ancho { grid-column: 1 / -1; } .campo label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .campo label .req { color: var(--rojo-claro); } .campo .ayuda { font-size: 12px; color: var(--muted-2); line-height: 1.45; } .field { background: rgba(255,255,255,.045); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 13px 15px; color: var(--white); font-size: 14.5px; font-family: inherit; width: 100%; transition: border-color .2s, background .2s, box-shadow .2s; } .field::placeholder { color: #6f6f78; } .field:focus { outline: none; border-color: var(--rojo); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(220,50,40,.18); } .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: 13px; color: var(--muted-2); line-height: 1.55; } .acepta input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--rojo); cursor: pointer; } /* Nada de white-space:nowrap por aquí: se hereda a los hijos y saca el texto de la pantalla. Ya pasó en TD Transfers, en móvil Y en escritorio. */ .acepta a { color: var(--rojo-claro); text-decoration: underline; text-underline-offset: 3px; } .nav-pasos { display: flex; gap: 12px; margin-top: 6px; } .nav-pasos .btn { flex: 1; } .nav-pasos .btn-atras { flex: 0 0 auto; } .resumen { background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 11px; } .resumen-fila { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; } .resumen-fila dt { color: var(--muted-2); flex-shrink: 0; } .resumen-fila dd { margin: 0; color: var(--white); text-align: right; overflow-wrap: anywhere; } .resumen-total { border-top: 1px solid var(--border); padding-top: 13px; margin-top: 3px; } .resumen-total dt { color: var(--white); font-weight: 600; } .resumen-total dd { font-weight: 700; font-size: 17px; } .form-msg { font-size: 13.5px; 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: 12px; color: var(--muted-2); } .form-seguro svg { width: 14px; height: 14px; stroke: var(--muted-2); } .cerrado-aviso { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 30px 28px; text-align: center; } .cerrado-aviso h3 { margin-bottom: 12px; } .cerrado-aviso p { color: var(--muted-2); 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; overflow: hidden; } .gracias .fondo::after { background: linear-gradient(180deg, rgba(6,7,8,.86), var(--black)), radial-gradient(ellipse 60% 55% at 50% 35%, rgba(220,50,40,.28), transparent 70%); } .gracias-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; } .gracias-ref { display: inline-block; background: rgba(255,255,255,.06); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 28px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 26px; letter-spacing: .04em; margin: 6px 0 12px; } .gracias-plaza { font-size: 13px; color: var(--muted-2); margin-bottom: 32px; } .gracias-pasos { text-align: left; max-width: 540px; margin: 36px auto 0; } .lista-check { display: flex; flex-direction: column; gap: 13px; } .lista-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); line-height: 1.55; } .lista-check svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; stroke: var(--rojo-claro); } /* ---------- Página de bases ---------- */ .legal { max-width: 860px; margin-inline: auto; } .legal h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 44px 0 16px; font-weight: 600; } .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-size: 15.5px; margin: 26px 0 10px; color: var(--white); font-weight: 600; } .legal p, .legal li { color: var(--muted-2); 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 a { color: var(--rojo-claro); } .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:hover { text-decoration: underline; } .legal-destacado { background: var(--rojo-tinte); border: 1px solid rgba(220,50,40,.3); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 26px; } .legal-destacado p:last-child { margin-bottom: 0; } /* ---------- Footer ---------- */ .site-footer { padding: 44px 0 34px; border-top: 1px solid var(--border); background: var(--black); } .footer-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted-2); } .footer-links a:hover { color: var(--white); } .footer-copy { font-size: 12px; color: #6f6f78; margin-top: 24px; line-height: 1.65; } .footer-copy a { color: #8b8b93; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Animación de entrada ---------- */ .reveal { opacity: 0; transform: translateY(20px); 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; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .podio { grid-template-columns: 1fr; } .insc { grid-template-columns: 1fr; min-height: 0; } .insc-info { padding-top: clamp(96px, 14vw, 120px); padding-bottom: clamp(40px, 6vw, 56px); } .insc-info-inner { margin-inline: auto; max-width: 620px; } .insc-form { border-left: 0; border-top: 1px solid var(--border); padding-top: clamp(40px, 6vw, 56px); } .insc-form-inner { margin-inline: auto; max-width: 620px; } } @media (max-width: 900px) { .partido, .partido.foto-izq { grid-template-columns: 1fr; } .partido .marco { order: -1; } .franja { grid-template-columns: 1fr; text-align: left; } } @media (max-width: 660px) { .form-grid { grid-template-columns: 1fr; } .cifras { grid-template-columns: 1fr; } .brand-txt small { display: none; } .barra-pasos .txt { font-size: 10px; letter-spacing: .04em; } } @media (max-width: 560px) { .btn { width: 100%; } .acciones .btn { width: 100%; } /* Estos NO deben estirarse: en una barra o al lado de otro elemento, un botón al 100 % se come toda la fila. El del encabezado llegaba a 223 px en un móvil de 390 y dejaba la marca arrinconada. */ .nav-pasos .btn, .site-header .btn, .firma-acciones .btn, .reproductor .btn { width: auto; } .plazas-linea { width: 100%; justify-content: space-between; } } /* ========================================================= Contrato de miembro (lo sirve Flask, pero usa este mismo CSS) ========================================================= */ .pagina-contrato { background: var(--black); } .contrato-wrap { padding: clamp(104px, 12vw, 140px) 0 clamp(64px, 8vw, 96px); } .contrato-doc { max-width: 820px; margin-inline: auto; } .contrato-doc .kicker { margin-bottom: 18px; } .contrato-doc .d2 { margin-bottom: 18px; } .contrato-doc > .lede { margin-bottom: 40px; } .sello { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; white-space: nowrap; } .sello-pend { background: var(--rojo-tinte); border: 1px solid rgba(220,50,40,.4); color: var(--rojo-claro); } .sello-ok { background: rgba(110,231,160,.12); border: 1px solid rgba(110,231,160,.35); color: var(--ok); } .contrato-texto { background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px); } .contrato-texto h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-claro); margin: 38px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .contrato-texto h2:first-child { margin-top: 0; } .contrato-texto h3 { font-size: 15px; font-weight: 600; color: var(--white); margin: 26px 0 10px; } .contrato-texto p, .contrato-texto li { color: var(--muted-2); font-size: 14.5px; line-height: 1.72; } .contrato-texto p { margin: 0 0 12px; } .contrato-texto ul { margin: 0 0 14px; padding-left: 20px; } .contrato-texto li { list-style: disc; margin-bottom: 7px; } .contrato-texto b, .contrato-texto strong { color: var(--white); font-weight: 600; } .ficha { margin: 18px 0 0; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ficha > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; background: var(--charcoal); padding: 11px 16px; } .ficha dt { font-size: 12.5px; color: var(--muted-2); font-weight: 600; } .ficha dd { margin: 0; font-size: 13.5px; color: var(--white); overflow-wrap: anywhere; } .ficha dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted); } /* ---- Panel de firma ---- */ .firma-panel { position: relative; margin-top: 34px; background: linear-gradient(165deg, var(--rojo-tinte), var(--surface) 55%); border: 1px solid rgba(220,50,40,.34); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; } .firma-panel.is-firmado { background: var(--charcoal-2); border-color: rgba(110,231,160,.3); } .firma-panel .nota { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.6; } .firma-panel .ficha { margin-top: 0; } .firma-sello { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(110,231,160,.14); border: 1px solid rgba(110,231,160,.35); color: var(--ok); padding: 6px 13px; border-radius: 100px; } .ayuda-inline { font-weight: 400; color: var(--muted-2); } .lienzo-caja { position: relative; background: rgba(255,255,255,.04); border: 1px dashed var(--border-2); border-radius: var(--radius); overflow: hidden; } .lienzo-caja canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 240; touch-action: none; /* si no, el dedo hace scroll en vez de firmar */ cursor: crosshair; } .lienzo-guia { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.5px; color: var(--muted-2); pointer-events: none; } .firma-panel .btn-sm { align-self: flex-start; } .firma-acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } @media (max-width: 620px) { .ficha > div { grid-template-columns: 1fr; gap: 4px; } .firma-acciones .btn { width: 100%; } } /* ---- Lote de bienvenida: piezas descargables ---- */ .titulo-bloque { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-claro); margin: 44px 0 16px; } .bloque-lote { background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); } .bloque-lote p { color: var(--muted-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; } .bloque-lote p:last-child { margin-bottom: 0; } .bloque-lote b { color: var(--white); font-weight: 600; } .bloque-lote .nota { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .piezas { display: flex; flex-direction: column; gap: 12px; } .pieza { } .pieza > a, .pieza > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; transition: border-color .2s, background .2s, transform .2s var(--ease); } .pieza > a { color: var(--white); } .pieza > a:hover { border-color: rgba(220,50,40,.5); background: var(--surface-2); transform: translateY(-2px); } .pieza h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 5px; } .pieza p { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.55; } .pieza .etiq { flex-shrink: 0; white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border-2); color: var(--muted-2); } .pieza .etiq-ok { border-color: rgba(220,50,40,.42); color: var(--rojo-claro); } /* Pieza aun bloqueada: se ve, pero no se pulsa */ .pieza-espera { display: flex; } .pieza-espera > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; opacity: .58; } /* Sin esto el titulo de la pieza bloqueada se estrecha y se parte en dos lineas mientras sobra hueco a la derecha. */ .pieza-espera > div > div:first-child { flex: 1; } .pieza-espera .etiq { align-self: center; } .secreto { margin-top: 16px; background: linear-gradient(160deg, var(--rojo-tinte), var(--charcoal-2) 60%); border: 1px solid rgba(220,50,40,.32); border-radius: var(--radius); padding: 22px 24px; } .secreto-titulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-claro); margin-bottom: 10px; } .secreto p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.65; } @media (max-width: 600px) { .pieza > a, .pieza-espera > div { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ---- Videoteca de asesorías (vive bajo tdproducer.tdrecords.es) ---- */ .entrar-caja { max-width: 460px; margin-inline: auto; background: var(--charcoal-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); } .entrar-caja .lede { font-size: 15px; } .entrar-caja .nota { font-size: 13px; color: var(--muted-2); line-height: 1.6; margin: 0; } .asesorias-doc { max-width: 1240px; margin-inline: auto; } /* `padding: 0` obligatorio: .nivel es un

y si no hereda el `padding: clamp(56px,7vw,96px) 0` de la regla global. Tercera vez que muerde en este proyecto — ojo con cualquier

anidado. */ .nivel { margin-bottom: 46px; padding: 0; } .nivel:last-of-type { margin-bottom: 0; } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } .video-card h3 { font-size: 15px; font-weight: 600; margin: 14px 0 5px; line-height: 1.35; } .video-card p { margin: 0; font-size: 12.5px; color: var(--muted-2); } .video-marco { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; transition: border-color .2s; } .video-card:hover .video-marco { border-color: rgba(220,50,40,.45); } .video-marco video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } /* ---- Antes de que abra el cobro ---- */ .pre-apertura { background: linear-gradient(165deg, var(--rojo-tinte), var(--surface) 58%); border: 1px solid rgba(220,50,40,.34); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 36px); margin-bottom: 26px; } .pre-pastilla { display: inline-block; background: var(--rojo); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; } .pre-apertura p { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); line-height: 1.65; } .pre-apertura p:last-child { margin-bottom: 0; } .pre-apertura b { color: var(--white); font-weight: 600; } .pre-mientras { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); } .pre-mientras p { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.65; } .pre-mientras a { color: var(--rojo-claro); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================= Reproductor propio de las asesorías Sin controles nativos: eso quita el botón de descarga del navegador, el menú de clic derecho y el picture-in-picture. Ver la nota honesta sobre los límites en README.md. ========================================================= */ .reproductor { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; transition: border-color .2s; } .video-card:hover .reproductor { border-color: rgba(220,50,40,.45); } .reproductor video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; pointer-events: none; /* el clic lo gestionan nuestros controles */ } /* ---- Portada con el play ---- */ .rep-portada { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; align-content: center; background: rgba(0,0,0,.28); border: 0; cursor: pointer; width: 100%; transition: background .25s var(--ease), opacity .25s; } .rep-portada:hover { background: rgba(0,0,0,.14); } .reproductor.is-jugado .rep-portada { opacity: 0; pointer-events: none; } .rep-play { width: 58px; height: 58px; border-radius: 50%; background: rgba(220,50,40,.94); display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(0,0,0,.7); transition: transform .25s var(--ease); } .rep-portada:hover .rep-play { transform: scale(1.09); } /* Los iconos del sprite van con fill="currentColor": hay que darles `color`, no `fill`, o se pintan del color heredado (aqui, invisible sobre el rojo). */ .rep-play svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; } .rep-seguir { font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.6); padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(6px); } /* ---- Barra de controles ---- */ .rep-controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .reproductor.is-jugado:hover .rep-controles, .reproductor.is-jugado.is-pausado .rep-controles, .reproductor.is-jugado:focus-within .rep-controles { opacity: 1; transform: translateY(0); } .rep-btn { background: none; border: 0; cursor: pointer; padding: 4px; display: grid; place-items: center; color: #fff; border-radius: 6px; flex-shrink: 0; transition: opacity .2s; } .rep-btn:hover { opacity: .72; } .rep-btn svg { width: 18px; height: 18px; } .rep-vel { font-size: 12px; font-weight: 700; min-width: 30px; } .rep-pp .ic-pausa, .reproductor.is-pausado .rep-pp .ic-play { display: block; } .rep-pp .ic-play, .reproductor.is-pausado .rep-pp .ic-pausa { display: none; } .rep-vol .ic-mudo, .reproductor.is-mudo .rep-vol .ic-vol { display: none; } .rep-vol .ic-vol, .reproductor.is-mudo .rep-vol .ic-mudo { display: block; } .rep-tiempo, .rep-total { font-size: 11.5px; color: #fff; font-variant-numeric: tabular-nums; flex-shrink: 0; opacity: .9; } .rep-barra { position: relative; flex: 1; height: 16px; cursor: pointer; display: flex; align-items: center; } .rep-barra::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.28); border-radius: 100px; } .rep-buffer, .rep-progreso { position: absolute; left: 0; height: 3px; border-radius: 100px; width: 0; } .rep-buffer { background: rgba(255,255,255,.42); } .rep-progreso { background: var(--rojo); } .rep-punto { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff; left: 0; transform: translateX(-50%) scale(0); transition: transform .18s var(--ease); box-shadow: 0 1px 4px rgba(0,0,0,.6); } .rep-barra:hover .rep-punto, .rep-barra:focus-visible .rep-punto { transform: translateX(-50%) scale(1); } .reproductor:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0; } .reproductor:fullscreen video { object-fit: contain; } @media (max-width: 520px) { .rep-vel, .rep-total { display: none; } .rep-controles { gap: 7px; padding: 8px 9px; } } /* Subtítulo del héroe: lo que antes era el titular, ahora debajo y pequeño */ .hero-sub { font-size: clamp(13px, 1.5vw, 16px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-claro); margin: -8px 0 22px; } /* ---- Podio: oro, plata y bronce, sutiles ---- */ :root { --oro: #d9b45c; --plata: #bcc2cc; --bronce: #c08a5a; } /* El 1.º pasa de tinte rojo a tinte dorado: es el premio de oro */ .premio.is-primero { background: linear-gradient(165deg, rgba(217,180,92,.15), var(--surface) 58%); border-color: rgba(217,180,92,.42); } .premio.is-primero .premio-puesto { color: var(--oro); -webkit-text-stroke: 0; } .premio.is-primero .premio-valor { color: var(--oro); } .premio.is-primero li svg { stroke: var(--oro); } .premio.is-segundo .premio-puesto { color: var(--plata); -webkit-text-stroke: 0; opacity: .85; } .premio.is-segundo .premio-valor { color: var(--plata); } .premio.is-segundo li svg { stroke: var(--plata); } .premio.is-segundo { border-color: rgba(188,194,204,.24); } .premio.is-tercero .premio-puesto { color: var(--bronce); -webkit-text-stroke: 0; opacity: .85; } .premio.is-tercero .premio-valor { color: var(--bronce); } .premio.is-tercero li svg { stroke: var(--bronce); } .premio.is-tercero { border-color: rgba(192,138,90,.24); }