/* ============================================================ TOP 1 — MODO CLARO ÚNICO El sitio ya no tiene modo oscuro. Fondo de día (#F4F7FD con sus halos) y TARJETAS EN AZUL CLARO con el texto en navy. Cargar SIEMPRE después de temas.css. Por qué el texto de dentro es oscuro y no blanco: sobre el azul claro #5988F8 el blanco se queda en 3.33:1, por debajo de AA. Entre este azul y el azul profundo de antes hay una franja donde NINGÚN color de texto llega a 4.5 — por eso la tarjeta es o clara con texto navy, o profunda con texto blanco, pero nada intermedio. Medido sobre la tarjeta #5988F8: texto #071A42 5.10:1 · texto suave #0D2352 4.57:1 botón navy 4.79:1 contra la tarjeta · blanco encima 15.96:1 la tarjeta contra el fondo de página 3.11:1 (se distingue) ============================================================ */ /* --- 1. El acento de día es AZUL, no verde ------------------- El generador dejó el modo claro en verde (#00C58F) y con las tarjetas azules eran dos identidades peleando. #0B5ED7 = 5.44:1 como texto sobre el fondo claro y 5.84:1 con blanco encima. */ :root[data-theme="light"] { --accent: #0B5ED7; --accent-deep: #0B5ED7; --accent-on: #FFFFFF; --ok: #0B5ED7; --neon: 0 1px 2px rgba(11,94,215,.20); --neon-soft: 0 1px 2px rgba(11,94,215,.16); } /* El "suelo en perspectiva" del hero dibujaba, cerca del horizonte, una raya recta que cruzaba la pantalla y parecía un fallo. Con la malla de puntos en toda la web ya no hace falta. */ :root[data-theme="light"] .hero::after { display: none; } /* --- 2. Las tarjetas, en azul claro -------------------------- Las variables de color se redefinen DENTRO de la tarjeta: todo lo que hay dentro usa var(--text)/var(--text-soft), así que se adapta solo. Un elemento nuevo dentro de una ficha hereda el navy sin que haya que acordarse de nada. */ :root[data-theme="light"] .step, :root[data-theme="light"] .row, :root[data-theme="light"] .rules li, :root[data-theme="light"] .faq details, :root[data-theme="light"] .stats > div, :root[data-theme="light"] .destacado { --text: #071A42; --text-soft: #0A1F4D; --text-dim: #0A1F4D; --brand-deep: #071A42; --accent: #071A42; --accent-deep:#071A42; --line: rgba(7,26,66,0.22); --line-soft: rgba(7,26,66,0.12); --edge: rgba(7,26,66,0.45); --bevel: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(7,26,66,.12); background: linear-gradient(180deg, #6693FA, #5A8BF8); color: var(--text); border: 1px solid #2E63D6; box-shadow: 0 2px 4px rgba(23,62,150,.14), 0 14px 30px rgba(23,62,150,.18); } /* Las cifras: navy, grandes y sin glow. Un neón sobre azul claro no es luz, es suciedad. */ :root[data-theme="light"] .row__amount, :root[data-theme="light"] .destacado .row__amount, :root[data-theme="light"] .destacado__bid, :root[data-theme="light"] .stats dd { color: #071A42; text-shadow: none; } :root[data-theme="light"] .row__rank, :root[data-theme="light"] .row--top .row__rank { color: #071A42; text-shadow: 0 1px 0 rgba(255,255,255,.28); } /* --- 3. El botón que cobra ----------------------------------- Sobre azul claro, un botón azul desaparece. En navy sólido tiene 15.96:1 con su texto y 4.79:1 contra la tarjeta: se ve y se lee. */ :root[data-theme="light"] .row .btn--ghost, :root[data-theme="light"] .row .btn--brand, :root[data-theme="light"] .destacado .btn--ghost, :root[data-theme="light"] .destacado .btn--brand { background: linear-gradient(180deg, #123063, #071A42); color: #FFFFFF; border-color: rgba(255,255,255,.22); box-shadow: 0 2px 6px rgba(7,26,66,.28); text-shadow: none; } :root[data-theme="light"] .row .btn--ghost:hover, :root[data-theme="light"] .row .btn--brand:hover, :root[data-theme="light"] .destacado .btn--ghost:hover, :root[data-theme="light"] .destacado .btn--brand:hover { background: linear-gradient(180deg, #1B4185, #0D2352); color: #FFFFFF; } :root[data-theme="light"] .row .btn .cur, :root[data-theme="light"] .destacado .btn .cur { color: #FFFFFF; opacity: .74; } /* La etiqueta "demo" necesita su propio fondo: el de antes se mezclaba con blanco y sobre el azul claro quedaba invisible. */ :root[data-theme="light"] .row .tag, :root[data-theme="light"] .destacado .tag { background: #FFFFFF; color: #6B4204; border-color: rgba(107,66,4,.45); } /* --- 4. Escritorio: llenar la pantalla ----------------------- El sitio vivía en 1240px: en un monitor de 2560 sobraban 660px muertos a cada lado. No basta estirar el contenedor — crecen la ficha del #1, las filas y sus cifras, que es lo que se veía vacío. Por debajo de 1100px no cambia nada. */ @media (min-width: 1100px) { :root { --maxw: 1600px; } .hero__in { grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr); gap: clamp(32px, 4vw, 64px); } /* La ficha del #1, más cuadrada y con la foto grande: es un escaparate, no una línea de texto. */ .destacado { padding: 26px; } /* la altura la marca el aspect-ratio 1/1 de la sección 12 */ .destacado__name { font-size: 1.72rem; } .destacado__desc { font-size: 1.06rem; } /* Las filas: foto o vídeo grande a la izquierda, toda la información del negocio a la derecha. */ .row { grid-template-columns: 110px 1fr auto; gap: 26px; padding: 26px 30px; } .row--con-media { grid-template-columns: 96px 300px 1fr auto; } .row__media { width: 300px; height: 200px; } .row__rank { font-size: 3rem; } .row__name { font-size: 1.3rem; } .row__desc { font-size: 1.04rem; } .row__meta { font-size: .88rem; gap: 22px; } .row__amount { font-size: 1.9rem; } .board { gap: 20px; } /* Los 4 pasos siguen siendo 4: sin esto el auto-fit haría 5 o 6 columnas enanas en cuanto hay sitio de sobra. */ .steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } .step { padding: 34px 30px 32px; } .step p { font-size: 1.01rem; } /* A 1600px una línea de 100 caracteres es ilegible. */ .sec__lead { max-width: 68ch; } } /* --- 5. Ni costura ni tarjetas torcidas ---------------------- La línea diagonal que cruzaba la ficha del #1 no era un borde ni un degradado: es la costura que deja Chrome al rasterizar un elemento con backdrop-filter que además se gira en 3D — parte el rectángulo en dos triángulos y la diagonal se ve. Sobre tarjetas opacas el backdrop-filter no desenfoca nada, así que sobra. Y la ficha venía girada -4°/2° incluso en reposo: se queda en un gesto de menos de un grado y medio, que se nota sin deformar. */ :root[data-theme="light"] .step, :root[data-theme="light"] .row, :root[data-theme="light"] .rules li, :root[data-theme="light"] .faq details, :root[data-theme="light"] .stats > div, :root[data-theme="light"] .destacado { backdrop-filter: none; } :root[data-theme="light"] .destacado { /* De ladito, mirando hacia el centro de la pantalla. Estaba en -4°/2° (se torcía) y luego en -1.2° (quedaba plana, de frente): este es el punto medio, se nota el volumen sin deformar la ficha. */ transform: perspective(1500px) rotateY(-7deg) rotateX(1.8deg); } /* El :hover ya no la endereza: la endereza el puntero según por dónde entre, y de eso se encarga effects.js. Aquí solo se levanta. */ :root[data-theme="light"] .destacado:hover { transform: perspective(1500px) rotateY(-7deg) rotateX(1.8deg) translateY(-4px); } /* --- 6. El hueco de la foto, también cuando está vacío -------- Todas las fichas reservan el sitio de la foto o el vídeo, tengan contenido o no: así todas miden lo mismo y el negocio que aún no ha subido nada ve exactamente el espacio que le falta por llenar. */ :root[data-theme="light"] .row__media, :root[data-theme="light"] .destacado__media { background: rgba(255,255,255,.60); border: 1px solid rgba(7,26,66,.22); box-shadow: none; } :root[data-theme="light"] .row__media--vacio, :root[data-theme="light"] .destacado__media--vacio { display: grid; place-items: center; text-align: center; padding: 14px; background: rgba(255,255,255,.72); border: 2px dashed rgba(7,26,66,.32); color: #071A42; font-weight: 700; line-height: 1.35; } :root[data-theme="light"] .row__media--vacio span { font-size: .92rem; max-width: 16ch; } :root[data-theme="light"] .destacado__media--vacio span { font-size: 1.05rem; } /* --- 7. Los botones secundarios se veían sin borde ------------ .btn--ghost hereda border-color: var(--line), que en claro es negro al 14%: sobre un fondo casi blanco el borde desaparecía y el botón se fundía con la página. Borde azul de marca (5.44:1 contra el fondo) más un halo suave que lo despega. Dentro de las tarjetas NO se aplica: ahí el ghost ya es el botón navy que cobra, y esa regla es más específica. */ :root[data-theme="light"] .btn--ghost { background: #FFFFFF; border: 1.5px solid #0B5ED7; color: #0B4CB0; box-shadow: 0 2px 6px rgba(11,94,215,.14), 0 0 0 4px rgba(11,94,215,.07); } :root[data-theme="light"] .btn--ghost:hover { border-color: #0B4CB0; color: #072F6E; box-shadow: 0 3px 10px rgba(11,94,215,.22), 0 0 0 5px rgba(11,94,215,.12); } /* ============================================================ 8 · TABLET (761–1099 px): la ficha se aplastaba Con la rejilla de escritorio, el bloque del precio se llevaba 289 px fijos y a la descripción le quedaban 134: el texto salía en una columna estrechísima y altísima, y la ficha parecía rota. Aquí el precio baja debajo del texto en vez de robarle el ancho. ============================================================ */ @media (min-width: 761px) and (max-width: 1099px) { .row, .row--con-media { grid-template-columns: 64px 200px 1fr; grid-template-areas: "rank media main" "rank media bid"; gap: 16px 20px; padding: 20px 22px; align-items: start; } .row__rank { grid-area: rank; align-self: center; } .row__media { grid-area: media; width: 200px; height: 140px; } .row__main { grid-area: main; } .row__bid { grid-area: bid; align-items: flex-start; text-align: left; } .row__media--vacio span { font-size: .82rem; } } /* ============================================================ 9 · TELÉFONO ============================================================ */ @media (max-width: 980px) { /* La ficha del #1, DE FRENTE. La regla del giro no llevaba media query y pisaba el `transform: none` que ya tenía el móvil: en el teléfono la ficha salía torcida y parecía un error. */ :root[data-theme="light"] .destacado, :root[data-theme="light"] .destacado:hover { transform: none; } /* Más compacta, para que el tablero entre antes en pantalla */ .destacado { padding: 16px; } .destacado__media { height: 132px; margin-bottom: 12px; } .destacado__name { font-size: 1.18rem; margin-bottom: 6px; } .destacado__desc { font-size: .92rem; margin-bottom: 8px; } .destacado__meta { margin-bottom: 12px; } .destacado__badge { font-size: .62rem; } /* La etiqueta de temporada sube a la barra: ocupaba una línea entera arriba del todo y empujaba la ficha y el titular hacia abajo. La temporada completa sigue a la vista en las estadísticas. */ .hero { padding-top: 10px; } .hero__in > .eyebrow, .hero__texto > .eyebrow, .eyebrow { display: none; } .nav__vivo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .62rem; letter-spacing: .12em; font-weight: 700; color: #0B4CB0; white-space: nowrap; } .nav__vivo .dot { width: 6px; height: 6px; } } /* En escritorio la etiqueta vive en el hero, no en la barra */ @media (min-width: 981px) { .nav__vivo { display: none; } } /* ============================================================ 10 · El titular se veía desparejo .hero llevaba perspective: 1400px, que mete a TODO su contenido en un contexto 3D — titular incluido. Ahí el texto se rasteriza sin el suavizado normal y las letras salen con grosores irregulares, como torcidas. Esa perspectiva la necesitaba el efecto que giraba el hero entero, que ya se quitó; la ficha del #1 lleva la suya propia dentro de su transform. ============================================================ */ .hero { perspective: none; } /* ============================================================ 11 · El titular, alineado "#1" y "$980" iban en display:inline-block. Un inline-block se mide con su propia caja, no con la línea de texto: quedaban 9 px más abajo que "El puesto" y la frase se veía desnivelada. Vuelven a ser texto normal (el inline-block hacía falta para un relieve 3D que en claro ya no existe). ============================================================ */ :root[data-theme="light"] .hero__num, :root[data-theme="light"] .hero__price { display: inline; } /* ============================================================ 12 · La foto o el vídeo, EN CUADRADO Un negocio sube una foto de Instagram o un vídeo vertical. En un hueco apaisado se recortaba mal. Cuadrado entra bien lo uno y lo otro. En la ficha del #1, la categoría, la zona y los clics pasan a la derecha del cuadrado, que era espacio muerto. ============================================================ */ .destacado__fila { display: grid; /* La foto manda en su columna (auto) y la ficha técnica ocupa el resto. */ grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 16px; } .destacado__media { /* Medidas fijas: el cuadrado no debe depender de cuánto ocupe la ficha técnica que va a su lado. 240 en escritorio y tablet, 132 en el móvil. */ width: 240px; height: 240px; aspect-ratio: auto; margin: 0; } .destacado__meta { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: .92rem; align-items: flex-start; } /* Las fichas del tablero, con la foto también en cuadrado */ .row__media { aspect-ratio: 1 / 1; height: auto; } @media (min-width: 1100px) { .row--con-media { grid-template-columns: 96px 190px 1fr auto; } .row__media { width: 190px; } } @media (min-width: 761px) and (max-width: 1099px) { .row, .row--con-media { grid-template-columns: 64px 150px 1fr; } .row__media { width: 150px; height: auto; } } @media (max-width: 760px) { /* En el teléfono: cuadrado pequeño a la izquierda, datos a la derecha, y el precio con su botón a lo ancho debajo. */ /* Número y foto apilados a la izquierda, todo el texto a la derecha. Con las tres piezas en fila, a la descripción le quedaban 150 px de ancho en un iPhone de 390 y la ficha se veía apretada. */ /* Número arriba en la esquina · foto cuadrada debajo, a la izquierda · toda la información a la derecha · precio y botón a lo ancho abajo. */ .row, .row--con-media { position: relative; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "rank main" "media main" "bid bid"; gap: 8px 14px; align-items: start; } /* Los selectores llevan .row--con-media a propósito: el CSS antiguo tiene `.row--con-media .row__rank { grid-row: 2 }` y `.row__media { grid-column: 1/-1 }`, que con una sola clase le ganaban a `grid-area` y sacaban las piezas de su casilla: la foto arriba, el precio en el medio y el número de puesto al final. */ /* El número va como medalla SOBRE la foto. En su propia casilla quedaba pegado a la esquina de la ficha, tocando el borde. Aquí no depende de la rejilla y no puede rozar ningún borde. */ /* El número, en la esquina de arriba. En pastilla y con su propia casilla: no se apoya en la foto (ahí chocaba con el texto "Aquí va tu foto o tu video") ni toca el borde de la ficha. */ /* El número, en la esquina de arriba, en pastilla. OJO con el selector: más arriba hay `:root[data-theme="light"] .row--top .row__rank { color: #071A42 }`, que es MÁS específico que `.row .row__rank`. Con el selector corto, el número salía azul oscuro sobre una pastilla azul oscuro: negro sobre negro, ilegible. Por eso aquí se repite el :root[data-theme]. */ :root[data-theme="light"] .row--con-media .row__rank, :root[data-theme="light"] .row--top .row__rank, :root[data-theme="light"] .row .row__rank { grid-area: rank; grid-row: 1; grid-column: 1; justify-self: start; align-self: start; font-size: 1.05rem; line-height: 1; margin: 0; padding: 5px 11px; border-radius: 999px; background: #071A42; color: #FFFFFF; /* 15.96:1 */ text-shadow: none; box-shadow: 0 2px 8px rgba(7,26,66,.35); } /* La foto, centrada en el hueco de la izquierda (no pegada arriba). */ .row--con-media .row__media, .row .row__media { grid-area: media; grid-row: 2; grid-column: 1; width: 104px; height: auto; margin: 0; align-self: center; } /* La información ocupa las dos filas de la derecha. */ .row--con-media .row__main, .row .row__main { grid-area: main; grid-row: 1 / 3; grid-column: 2; } /* La fila del medio se estira: así la foto se centra de verdad. */ .row, .row--con-media { grid-template-rows: auto 1fr auto; } .row--con-media .row__bid, .row .row__bid { grid-area: bid; grid-row: 3; grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; width: 100%; } /* El texto del hueco baja al pie del cuadrado: centrado quedaba justo debajo de la medalla del número y se veía tapado. */ /* Lleva :root[data-theme] porque la regla base también lo lleva: sin eso gana ella (los @media no suman especificidad) y el texto seguía centrado, justo debajo de la medalla del número. */ /* Ya no hay medalla encima: el texto vuelve al centro del cuadrado. */ .row__media--vacio span { font-size: .62rem; max-width: 13ch; line-height: 1.3; } .destacado__fila { grid-template-columns: auto minmax(0, 1fr); gap: 14px; } .destacado__media { width: 132px; height: 132px; } .destacado__meta { font-size: .86rem; gap: 8px; } } /* ============================================================ 13 · El titular se partía mal "$980" y su "MXN" se separaban: el MXN caía solo a la línea siguiente, en pequeño y desplazado, y la frase parecía torcida. El precio se mantiene entero, y el titular se parte por donde tiene sentido en vez de por donde cae. ============================================================ */ .hero__price { white-space: nowrap; } .hero__h1 { text-wrap: balance; max-width: 20ch; } /* ============================================================ 14 · Fuera el relieve 3D de las fichas El número de puesto llevaba translateZ(24px) dentro de un contenedor con perspective: 1600px. Ese desplazamiento en profundidad NO solo acerca: también mueve el elemento en pantalla, y tanto más cuanto más lejos está del centro de la perspectiva — por eso en las primeras fichas el número se salía por arriba y se montaba sobre el borde. Igual el precio (18px) y la foto (14px). Es el mismo problema que la línea diagonal de la ficha del #1 y el titular deformado: efectos 3D heredados del diseño oscuro que en este ya no aportan nada y solo rompen cosas. ============================================================ */ .board { perspective: none; } .steps { perspective: none; } .stats { perspective: none; } .row { transform-style: flat; } .row__rank, .row__bid, .row__media, .step__n, .stats dd { transform: none; } /* ============================================================ 15 · Idioma con bandera México para español y Estados Unidos para inglés. En el teléfono los dos botones quedaban tan juntos que costaba acertar con el dedo: se separan y cada uno mantiene sus 44 px de alto. ============================================================ */ .lang { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .lang__bandera { font-size: 1.05em; line-height: 1; } .langs { gap: 6px; } .langs .lang { min-width: 62px; padding-inline: 10px; } @media (max-width: 760px) { .langs { gap: 6px; padding: 3px; } .langs .lang { min-width: 58px; min-height: 44px; padding-inline: 8px; font-size: .8rem; } .nav__actions { gap: 10px; } /* Al ensanchar los botones de idioma, la barra apretó el logo y su alto bajó a 29 px: por debajo del mínimo para tocarlo con el dedo. */ .nav__brand { min-height: 44px; justify-content: center; } } /* En un iPhone SE no caben logo + EN VIVO + dos idiomas + Ofertar sin aplastar el nombre. Manda el logo: la etiqueta aparece desde 400 px. */ @media (max-width: 399px) { .nav__vivo { display: none; } } /* ============================================================ 16 · El #1, bien visible en la ficha del hero Solo estaba como etiqueta pequeña arriba ("El #1 de este mes"). En la ficha por la que un negocio paga, el puesto tiene que ser lo primero que se ve: medalla grande sobre la foto, igual que en el tablero, y la etiqueta de arriba también más legible. ============================================================ */ /* El #1 va en la etiqueta que ya existía, no en un elemento nuevo: añadirle una medalla propia le sumaba 99 px de alto a la ficha y empujaba el titular fuera de la pantalla. Aquí el puesto se ve y la ficha no crece ni un píxel. */ .destacado__badge { font-size: .78rem; letter-spacing: .1em; background: #071A42; color: #FFFFFF; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 760px) { .destacado__badge { font-size: .74rem; } }