/* ══════════════════════════════════════════════════════════════════════════ TARJETAS DE PLAN — el MISMO diseño que la landing de campaña (3 ago 2026) 🔴 POR QUÉ ESTE ARCHIVO EXISTE. Las tarjetas de plan estaban escritas TRES veces (hub.html inline, app.html inline y upgrade-modal.js, que lo usan 13 páginas). El proyecto ya se había quemado con eso: en hub.html hay un bloque de CSS entero cuyo comentario dice "el MISMO modal tenía dos acabados según desde dónde lo abrieras". Cuatro copias del mismo diseño divergen siempre. Aquí hay UNA, y las tres implementaciones la usan. ⚠️ El CSS de las tarjetas es COPIA LITERAL de temporada2627.html (las reglas .key/.plan). Se copió en vez de importarse porque no hay build step y la landing no puede depender de un archivo que se sirve con caché de un día. Si se retoca el diseño en un sitio, retocarlo en el otro: son las MISMAS tarjetas y el objetivo es justo que no se distingan. ⚠️ Depende de dos variables que la landing define en :root. Aquí se declaran con valores propios para que funcione en cualquier página de la app. ══════════════════════════════════════════════════════════════════════════ */ .tq-planes{--wh:#F4FAF7;--ink:#F4FAF7;--mut:#F4FAF7;--mut2:#F4FAF7; --chrome:rgba(244,250,247,.45);--g:#1D9E75;--g-dark:#0F6E56; font-family:'DM Sans','Inter',system-ui,sans-serif;color:#F4FAF7;} .tq-planes .key{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;text-align:center; height:34px;padding:0 15px;border:1px solid #000;border-radius:2px;background:#161918;color:#e8e8e8; font-family:'DM Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; box-shadow:0 0 0 1px #3a3d3b,0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.14); transition:transform .1s,box-shadow .12s,filter .12s;white-space:nowrap;} .tq-planes .key:hover{color:#fff;box-shadow:0 0 0 1px #aab0aa,0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.2);} .tq-planes .key:active{transform:translateY(2px);box-shadow:0 0 0 1px #3a3d3b,0 1px 0 #000,inset 0 1px 0 rgba(0,0,0,.6);} .tq-planes .key-g{background:linear-gradient(180deg,#1D9E75 0%,#128163 55%,#0B5A45 100%);border-color:#000;color:#fff; box-shadow:0 0 0 1px #0F6E56,0 4px 0 #063D2F,0 9px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);} .tq-planes .key-g:hover{filter:brightness(1.07);box-shadow:0 0 0 1px #128163,0 5px 0 #063D2F,0 12px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);} .tq-planes .key-g:active{transform:translateY(3px);box-shadow:0 0 0 1px #0F6E56,0 1px 0 #063D2F,inset 0 2px 5px rgba(0,0,0,.45);} .tq-planes .key-xl{height:54px;padding:0 34px;font-size:.82rem;letter-spacing:.16em;} .tq-planes .key-lg{height:46px;padding:0 26px;font-size:.72rem;letter-spacing:.14em;} .tq-planes .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;} /* ── CTA principal ──────────────────────────────────────────────────── La tecla que lleva al registro. Etiqueta más larga (dice lo que pasa al pulsar), así que el interletrado baja para que siga entrando en una línea. La flecha avanza al pasar por encima y un brillo la recorre cada pocos segundos: es lo que la separa del resto de teclas de la página. */ .tq-planes .key-cta{letter-spacing:.09em;position:relative;overflow:hidden;} .tq-planes .key-cta.key-xl{height:60px;padding:0 38px;font-size:.84rem;} .tq-planes .key-cta.key-lg{height:50px;padding:0 30px;font-size:.74rem;} .tq-planes .key-cta .kb-ar{flex-shrink:0;transition:transform .16s ease;} .tq-planes .key-cta:hover .kb-ar{transform:translateX(4px);} .tq-planes .key-cta::after{content:'';position:absolute;top:0;left:-65%;width:42%;height:100%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 100%); transform:skewX(-18deg);animation:key-brillo 5s ease-in-out infinite;} @keyframes key-brillo{0%,74%{left:-65%}100%{left:135%}} .tq-planes .key-cta:active{transform:translateY(3px);} @media (prefers-reduced-motion:reduce){ .tq-planes .key-cta::after{display:none;} } .tq-planes .plan .key-cta{padding:0 14px;letter-spacing:.06em;} .tq-planes .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;margin-bottom:14px;align-items:stretch; max-width:930px;} /* Cada plan lleva su fondo propio (haz de luz, pizarra, gráficas y radar). Van como imagen de la tarjeta, no como adorno suelto, y encima se pinta un velo oscuro de abajo arriba para que el texto se lea siempre: la parte baja de la tarjeta es donde caen las características y el botón. */ .tq-planes .plan{position:relative;display:flex;flex-direction:column;overflow:hidden; background:#0a0d0c top center/cover no-repeat; /* RELIEVE. El volumen sale de cuatro capas, no de una sombra: 1) un halo verde permanente que la despega del fondo negro de la sección, 2) un aro verde de 1px que dibuja el canto superior de la pieza, 3) un CANTO SÓLIDO de 9px debajo (sombra con 0 de difuminado) = el grosor, 4) la sombra proyectada al suelo, esa sí difuminada. Es el idioma del proyecto (el color va en el filo, nunca en el fondo) llevado al máximo. Sin degradados de color y sin cristal. */ border:1px solid #06100d;border-radius:7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.7), 0 0 0 1px rgba(52,140,113,.75), 0 9px 0 #081512, 0 11px 2px rgba(0,0,0,.55), 0 26px 50px rgba(0,0,0,.78), 0 0 46px -14px rgba(29,158,117,.45); transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease;} /* Filo de luz que recorre el borde superior: es lo que hace que se lea como una pieza con canto y no como un rectángulo pintado. */ .tq-planes .plan::after{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); pointer-events:none;} .tq-planes .plan::before{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(5,7,6,0) 0%,rgba(5,7,6,.06) 46%,rgba(5,7,6,.34) 74%,rgba(5,7,6,.72) 100%);} .tq-planes .plan-b{position:relative;z-index:1;} .tq-planes .plan-e{background-image:url('/img/fondo_plan_entrenador.webp?v=1');} .tq-planes .plan-a{background-image:url('/img/fondo_plan_analista.webp?v=1');} .tq-planes .plan-l{background-image:url('/img/fondo_plan_elite.webp?v=1');} @media(hover:hover){ /* Al pasar por encima, el canto CRECE (de 7 a 11 px) y la tarjeta sube lo mismo: parece que se levanta de la mesa en vez de moverse sobre ella. */ .tq-planes .plan:hover{transform:translateY(-5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.7), 0 0 0 1px rgba(29,158,117,1), 0 14px 0 #081512, 0 16px 3px rgba(0,0,0,.55), 0 34px 62px rgba(0,0,0,.8), 0 0 60px -12px rgba(29,158,117,.7);} .tq-planes .plan:hover .plan-ico{filter:brightness(1.2);} } .tq-planes .plan-b{padding:30px 18px 20px;min-height:430px;display:flex;flex-direction:column;flex:1;text-align:center; text-shadow:0 1px 6px rgba(0,0,0,.75);} /* Icono y nombre en la MISMA fila: gana altura y la tarjeta arranca con más fuerza que con el icono suelto ocupando una línea entera. */ /* El icono, solo y centrado: es el protagonista. */ .tq-planes .plan-hd{display:block;} /* 🔴 LA ILUSTRACION DEL PLAN, A TAMAÑO DE VERDAD. Iba a 64px, que para un dibujo de 475x525 es tirarlo: no se distinguia nada y pesaba igual. A 132px se lee, y es lo que da el aspecto de tarjeta cuidada. ⚠️ La imagen ES el contenido de esa franja, asi que no lleva marco ni fondo: el relieve lo pone la tarjeta. */ .tq-planes .plan-ico{width:auto;height:92px;max-width:100%;display:block;margin:0 auto 10px;object-fit:contain; transition:filter .2s ease;} /* La chapa del numero de partidos. Es el dato que se compara entre planes, asi que se lee antes que el resto de la linea. */ .tq-planes .plan-b li .li-n{display:inline-flex;align-items:center;justify-content:center; min-width:21px;height:21px;padding:0 5px;margin-right:8px;border-radius:3px; background:rgba(29,158,117,.16);border:1px solid rgba(29,158,117,.42); color:#fff;font-family:'DM Mono',monospace;font-size:.74rem;font-weight:700; line-height:1;vertical-align:middle;} .tq-planes .plan-nm{font-size:1.22rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;} .tq-planes .plan-for{font-size:.79rem;color:rgba(244,250,247,.82);line-height:1.5;margin-top:9px; min-height:35px;} /* ── Casilla de Vídeo Propio en cada tarjeta ──────────────────────────────── Acabado industrial de la página: esquina viva de 2px, filo negro y anillo fino, sin degradados. Texto en BLANCO como todo lo demás de esta landing (la jerarquía la da el tamaño y el peso, no el color). Va pegada al CTA a propósito: es la última decisión antes de pulsar. */ .tq-planes .plan-va{margin-top:auto;padding-top:16px;} /* 🔴 LA CASILLA VA EN VERDE APAGADO, NO EN NEGRO COMO EL RESTO. Es lo único de la tarjeta que NO es el plan: es otro producto que se compra aparte, y en negro sobre negro se leía como una condición más de la lista. Con su propia placa se ve que es una pieza distinta antes de leer una palabra. El tono está entre el Deep (#085041) y el Dark (#0F6E56) del brand kit, bajado hasta que el blanco encima sigue teniendo contraste de sobra (~11:1). ⚠️ El COLOR está en el fondo, no en el texto: el texto sigue blanco. Verde sobre verde es justo lo que no se lee. ⚠️ El logo del add-on trae su propia placa NEGRA dentro de la imagen, así que sobre este verde se despega en vez de fundirse. Si algún día ese icono cambia a fondo transparente, hay que volver a mirarlo. */ .tq-planes .plan-va label{display:flex;align-items:flex-start;gap:10px;text-align:left;cursor:pointer; background:linear-gradient(180deg,#123a2f 0%,#0b241d 100%);border:1px solid #000; box-shadow:0 0 0 1px #2f7a63,inset 0 1px 0 rgba(93,202,165,.18);border-radius:2px; padding:11px 12px;transition:box-shadow .16s ease,filter .16s ease;} .tq-planes .plan-va label:hover{filter:brightness(1.14); box-shadow:0 0 0 1px #5DCAA5,inset 0 1px 0 rgba(93,202,165,.28);} .tq-planes .plan-va input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:17px;height:17px; /* El anillo pasa de gris a verde apagado: sobre la placa verde, el gris neutro se veía sucio. Sigue siendo más claro que el fondo, que es lo que hace que la casilla se distinga de la placa. */ margin:1px 0 0;background:#061410;border:1px solid #000;box-shadow:0 0 0 1px #3f8a72; border-radius:2px;cursor:pointer;position:relative;transition:background .16s ease;} .tq-planes .plan-va input:checked{background:#1D9E75;box-shadow:0 0 0 1px #1D9E75;} /* La marca de verificación se dibuja con dos bordes girados: sin SVG y sin emoji. */ .tq-planes .plan-va input:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px; border:solid #061410;border-width:0 2px 2px 0;transform:rotate(42deg);} .tq-planes .plan-va input:focus-visible{outline:2px solid #F4FAF7;outline-offset:2px;} .tq-planes .plan-va .va-t{font-size:.76rem;font-weight:700;letter-spacing:-.01em;line-height:1.3; /* Se ensancha con lo que sobre y parte por donde le toque. Sin `min-width:0` un hijo flex no baja de su palabra más larga y desborda la casilla. */ flex:1 1 auto;min-width:0;} .tq-planes .plan-va .va-p{display:block;margin-top:4px; font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.06em;white-space:nowrap;} .tq-planes .plan-va .va-d{font-size:.68rem;line-height:1.45;margin-top:4px;color:rgba(244,250,247,.82);} /* Sin `flex-wrap`: el título es quien se parte, no la fila. Con envoltura, el logo se caía a una segunda línea en cuanto el título crecía. */ .tq-planes .plan-va .va-hd{display:flex;align-items:flex-start;gap:8px;} /* El add-on es lo único que se vende DENTRO de la tarjeta, así que lleva su propia marca en pequeño: sin ella la casilla se lee como una condición del plan y no como un producto aparte, que es lo que es. */ /* ⚠️ MÁS GRANDE Y MÁS ARRIBA SIN QUE LA CASILLA CREZCA. La imagen mide 42px pero solo APORTA 28 a la altura de la fila, porque los márgenes negativos le restan 7 por arriba y 7 por abajo; con `align-self:flex-start` esos 7 de arriba la sacan por encima de la línea, que es lo que la sube. Subirla a 42px a secas engordaba la casilla 12px en las tres tarjetas. ⚠️ Si se cambia el tamaño, los dos márgenes negativos son (nuevo-28)/2. */ .tq-planes .plan-va .va-logo{width:42px;height:42px;flex-shrink:0;object-fit:contain;display:block; align-self:flex-start;margin-top:-7px;margin-bottom:-7px; /* A la DERECHA de la fila: pegado al titulo competia con el, y el titulo es lo que hay que leer primero. Order alto + margen automatico lo empujan al final pase lo que pase con el orden del marcado. */ order:9;margin-left:auto;} /* `.cta-w` ya empuja con margin-top:auto. Con DOS márgenes automáticos en la misma columna flex, el hueco sobrante se reparte a medias entre los dos y la separación deja de ser predecible. Aquí manda la casilla y el CTA la sigue. */ .tq-planes .plan-va + .cta-w{margin-top:0;padding-top:10px;} .tq-planes .plan-pr{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:18px;} .tq-planes .plan-pr b{font-family:'DM Sans',sans-serif;font-size:2.2rem;font-weight:800;color:var(--wh); line-height:1;letter-spacing:-.045em;} .tq-planes .plan-pr span{font-family:'DM Mono',monospace;font-size:.65rem;color:rgba(244,250,247,.72);} .tq-planes .plan-eq{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.05em; color:rgba(244,250,247,.45);margin-top:5px;min-height:14px;} /* El BLOQUE va centrado, pero su texto alineado a la izquierda: una lista con cada línea centrada es ilegible, y una pegada al borde rompe la simetría del resto de la tarjeta. `width:max-content` + `margin auto` da las dos cosas. */ /* 🔴 LAS TRES LISTAS MIDEN LO MISMO, PASE LO QUE PASE CON LOS SALTOS DE LÍNEA. Las tarjetas se miran a la vez y se comparan fila por fila: si una lista es más alta, la casilla de Vídeo Propio y el botón de las otras dos quedan desalineados y parece un fallo de maquetación. Igualar el NÚMERO de viñetas (5 en las tres) no basta, porque una frase más larga parte en dos renglones en una tarjeta y en una sola en otra según el ancho de la pantalla. El suelo son 6 renglones, que es lo que ocupa la lista mas larga (la segunda viñeta parte en dos y el resto entra en uno). ⚠️ La cuenta es 6 renglones × 17.95px + 4 huecos × 9px. Si cambia `font-size`, `line-height` o el `gap` de abajo, rehacerla. */ .tq-planes .plan ul{list-style:none;display:flex;flex-direction:column;gap:9px; width:max-content;max-width:100%;margin:15px auto 0;text-align:left; min-height:148px;} .tq-planes .plan li{display:flex;gap:9px;align-items:flex-start;font-size:.79rem; color:#F4FAF7;line-height:1.42;} .tq-planes .plan li::before{content:'';width:11px;height:11px;flex-shrink:0;margin-top:3px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D9E75' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/11px 11px no-repeat;} .tq-planes .plan .key{width:100%;} /* El filo que separa las características cruza TODA la tarjeta: si se dejara dentro del