/* ================================================================ Casa Lujuria - CAPA DE POSICIONES v3 (posiciones3.css) Reemplaza a posiciones1 y posiciones2. Se carga DE ULTIMA y solo en paginas con . QUE SE HIZO MAL EN LA v2, para que no se repita: la v2 portó los componentes de un sitio hermano que corre en tema NOCHE: paneles oscuros, texto crema, titulares en blanco. Casa Lujuria NO es un sitio de noche. dia.css la convierte en un campo amarillo con tinta oscura, en las proporciones de la bandera, y ese archivo pisa con !important todo lo que huela a tema oscuro. El resultado fue el peor de los dos mundos: mis fondos oscuros con los titulares en tinta azul marino que ponía dia.css encima. Ilegible. Reglas de esta capa: 1) El campo amarillo es el fondo. No se tapa con paneles oscuros. 2) Los bloques de lectura son tarjetas CREMA con tinta oscura. 3) El acento es la bandera: azul para estructura, rojo para señal. 4) Lo unico claro sobre oscuro es el texto ENCIMA DE VIDEO, y eso ya lo resuelve .cl-franja, que es el componente de la casa. 5) Nada de radiales morados. El heroe es amarillo y va en las tipografias de la casa. 6) Un solo ancho de lectura. Los bloques a sangre son a sangre a proposito, y se declaran. Si cambia el layout, suba a posiciones4.css y actualice el en las diez paginas de la familia. ================================================================ */ .pos-page{ /* tokens del dia, explicitos: dentro de dia.css --ambar ya no es ambar sino ocre, asi que no se usa ninguno heredado a ciegas */ --d-sol: #e9b62b; --d-sol-alto: #f6cf55; --d-sol-hondo: #c9931a; --d-crema: #fdf5e2; --d-crema2: #f7e8c4; --d-tinta: #141230; --d-azul: #0d3a94; --d-azul-alto: #1f57cc; --d-rojo: #ce1126; --d-rojo-alto: #e8324a; --d-cuerpo: rgba(20,18,48,.88); --d-suave: rgba(20,18,48,.70); --d-linea: rgba(20,18,48,.16); --d-relieve: 0 2px 0 rgba(255,246,214,.55); /* letterpress de la casa */ /* la caja ancha: llena la pantalla en portatiles y monitores, con un techo para que en 4K no se vuelva una sabana */ --pos-max: min(1440px, calc(100vw - clamp(2.2rem, 8vw, 7rem))); --pos-gap: clamp(2.2rem, 4.6vw, 3.8rem); /* la MEDIDA del texto es otra cosa que el ancho de la caja: las cajas se estiran, los parrafos no pasan de aqui o no hay quien los lea */ --pos-medida: 74ch; --pos-filo: linear-gradient(90deg, var(--d-sol-alto) 0 33.34%, var(--d-azul) 33.34% 66.67%, var(--d-rojo) 66.67% 100%); } /* --------------------------------------------------------------- 0. ANCHO. Un solo ancho de lectura, y los de sangre declarados. Esto es lo que arregla el "a veces angosto, a veces ancho". --------------------------------------------------------------- */ /* layout.css:13 clava `.page .narrow{max-width:1000px !important}`. En una pantalla de 1900 eso deja la pagina flotando en el medio con dos franjas de amarillo vacio a los lados. Hay que ganarle CON !important, que si no, no se mueve. */ .pos-page main.page{ max-width: none !important; padding-left: 0 !important; padding-right: 0 !important } .pos-page.lqx .page .narrow{ max-width: none !important; margin: 0 !important; padding: 0 !important; } /* la columna de lectura: ancha de verdad, y con aire que crece con la ventana en vez de un padding fijo de 24px */ .pos-page main.page article.narrow > *{ max-width: var(--pos-max); margin-left: auto; margin-right: auto; margin-block: var(--pos-gap); } .pos-page{ --pos-aire: clamp(1.1rem, 4vw, 3.5rem) } /* los que SI van a sangre, a proposito */ .pos-page main.page article.narrow > .cs-hero, .pos-page main.page article.narrow > .cl-franja, .pos-page main.page article.narrow > .cs-split, .pos-page main.page article.narrow > .lq-funnel-end{ max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .pos-page main.page article.narrow > .cs-hero{ margin-top: 0 } /* --------------------------------------------------------------- 1. EL HEROE. Amarillo, de la casa, con el nombre de la posicion. Sin malla, sin radiales, sin morado. El campo ya es el fondo. --------------------------------------------------------------- */ .pos-page .cs-hero{ position: relative; padding: clamp(1.8rem,4vw,3rem) var(--pos-aire) clamp(1.6rem,3.2vw,2.4rem); text-align: center; border-bottom: 1px solid var(--d-linea); /* un realce del sol, no un velo: el campo se ve mas alto arriba */ background: radial-gradient(120% 80% at 50% -20%, rgba(255,246,214,.75), transparent 62%); } .pos-page .cs-hero::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--pos-filo); } .pos-page .cs-hero-in{ max-width: min(1180px, 100%); margin: 0 auto } /* miga */ .pos-page .cs-hero .ls-crumb{ display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; margin: 0 0 1.1rem; font: 700 .76rem/1.4 "Inter Tight", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--d-suave); } .pos-page .cs-hero .ls-crumb a{ color: var(--d-azul); text-decoration: none } .pos-page .cs-hero .ls-crumb a:hover{ color: var(--d-rojo) } /* la chapa: crema sobre el campo, con el punto rojo */ .pos-page .cs-hero .cs-chapa{ display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem; padding: 7px 14px; background: var(--d-crema); border: 1px solid var(--d-linea); border-radius: 999px; font: 800 .72rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--d-azul); box-shadow: 0 6px 16px rgba(120,84,10,.12); } .pos-page .cs-hero .cs-chapa-punto{ width: 7px; height: 7px; border-radius: 50%; background: var(--d-rojo); flex: none; } /* EL NOMBRE DE LA POSICION. Tipografia de la casa, tinta, relieve. */ .pos-page .cs-hero h1{ margin: 0 0 .5rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; font-style: normal !important; text-transform: uppercase; font-size: clamp(2.5rem, 7.4vw, 6rem) !important; line-height: .94 !important; letter-spacing: .005em; color: var(--d-tinta) !important; text-shadow: var(--d-relieve); } /* El remate en la letra de mano. Kaushan es una brocha que CONECTA: sin aire, "con el peso resuelto" se lee "conelpesoresuelto". casa.css ya lo advierte ("needs air"), asi que aqui se le compra separacion de palabras y de letras, y se le da su propio renglon con altura. */ .pos-page .cs-hero h1 em{ display: block; margin-top: .12em; font-family: var(--script) !important; font-style: normal !important; text-transform: none; font-size: clamp(1.35rem, 3.2vw, 2.5rem) !important; line-height: 1.24 !important; letter-spacing: .015em; word-spacing: .16em; color: var(--d-rojo) !important; text-shadow: var(--d-relieve); padding-bottom: .14em; } .pos-page .cs-hero .ls-byline{ margin: 0 0 .9rem !important; font: 600 .86rem/1.5 "Inter Tight", system-ui, sans-serif; color: var(--d-suave) !important; } .pos-page .cs-hero .ls-byline a{ color: var(--d-azul) !important; font-weight: 700 } .pos-page .cs-hero .cs-hero-lede{ margin: 0 auto !important; max-width: 46rem; font-size: clamp(1.02rem,1.4vw,1.2rem) !important; line-height: 1.6 !important; color: rgba(20,18,48,.76) !important; } /* la marca de bajar: discreta y CORTA. Antes eran 34px de raya mas los margenes del heroe, y quedaba medio campo amarillo vacio debajo. */ .pos-page .cs-hero .cs-baje{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font: 800 .62rem/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--d-suave); opacity: .7; } .pos-page .cs-hero .cs-baje span{ display: block; width: 1px; height: 18px; margin: .45rem auto 0; background: linear-gradient(180deg, var(--d-tinta), transparent); opacity: .45; } /* --------------------------------------------------------------- 1b. LA FRANJA SOBRE VIDEO. Correccion de especificidad, no capricho. dia.css trae esta regla, con !important: .lqx .page .narrow .cl-franja p { color:#2c2850 } (0,4,1) y franja.css pide blanco con: .cl-franja p.cl-fr-frase { color:#fff } (0,2,1) Con !important en las dos, gana la mas especifica, o sea la tinta OSCURA. En la portada eso esta bien: alli la franja va sobre blanco.webp, una foto clara. Aqui las franjas van sobre VIDEO, que suele ser oscuro, y el texto desaparecia. Se recupera el blanco con mas especificidad que dia.css. Y el velo de abajo lo pone el marcado en linea, porque el de franja.css cuelga de .cl-fr-foto y aqui no hay foto sino clip. --------------------------------------------------------------- */ .pos-page.lqx .page .narrow .cl-franja p.cl-fr-frase{ color: #fff !important; font-family: var(--script) !important; font-style: normal !important; font-weight: 400 !important; font-size: clamp(1.6rem,3.8vw,3rem) !important; line-height: 1.14 !important; max-width: 22ch !important; text-shadow: 0 2px 6px rgba(8,6,20,.85), 0 4px 26px rgba(8,6,20,.75) !important; } .pos-page.lqx .page .narrow .cl-franja p.cl-fr-frase em{ font-style: normal !important; color: var(--d-sol-alto) !important; } .pos-page.lqx .page .narrow .cl-franja p.cl-fr-frase strong{ font-weight: 400 !important; color: var(--d-sol-alto) !important; } .pos-page.lqx .page .narrow .cl-franja p.cl-fr-ojo{ color: var(--d-sol-alto) !important; font-family: "Inter Tight", system-ui, sans-serif !important; text-shadow: 0 1px 3px rgba(8,6,20,.98), 0 2px 14px rgba(8,6,20,.9) !important; } /* el cursor de la maquina de escribir, blanco sobre el clip */ .pos-page .cl-franja .cl-fr-frase .mq-c{ color: inherit } /* --------------------------------------------------------------- 2. LA BAJADA. Primer parrafo con mas peso, sobre el campo. --------------------------------------------------------------- */ /* casa.css:45 mete el PRIMER parrafo de la bajada en Kaushan con !important. Kaushan es una brocha de exhibicion: sirve para cuatro palabras, no para un parrafo de cincuenta, que es lo que salia aqui. Se le devuelve la letra de texto y se le deja el peso con el tamano. */ .pos-page.lqx .page .narrow .gmast-dek{ text-align: left; margin: 0 !important } .pos-page.lqx .page .narrow .gmast-dek p, .pos-page.lqx .page .narrow .gmast-dek p:first-child{ font-family: "Inter Tight", system-ui, sans-serif !important; font-style: normal !important; margin: 0 0 1rem !important; max-width: var(--pos-medida) !important; font-size: clamp(1rem,1.2vw,1.1rem) !important; line-height: 1.68 !important; letter-spacing: 0 !important; color: var(--d-cuerpo) !important; } .pos-page.lqx .page .narrow .gmast-dek p:first-child{ font-size: clamp(1.1rem,1.55vw,1.34rem) !important; line-height: 1.56 !important; font-weight: 500 !important; color: var(--d-tinta) !important; } .pos-page.lqx .page .narrow .gmast-dek p:last-child{ margin-bottom: 0 !important } /* --------------------------------------------------------------- 3. EL GOLPE de una frase. Crema, tinta, filo de bandera. --------------------------------------------------------------- */ .pos-page .cs-golpe{ position: relative; padding: clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,3vw,2.4rem); background: var(--d-crema); border: 1px solid var(--d-linea); border-left: 5px solid var(--d-rojo); border-radius: 4px 16px 16px 4px; box-shadow: 0 14px 34px rgba(120,84,10,.12); } .pos-page .cs-golpe p{ margin: 0 !important; font-family: var(--script) !important; font-size: clamp(1.3rem,2.6vw,2.1rem) !important; line-height: 1.2 !important; color: var(--d-tinta) !important; } /* --------------------------------------------------------------- 4. LOS VITALES. Cuatro tarjetas crema con puntos de bandera. --------------------------------------------------------------- */ .pos-page .gmast-vitals{ display: grid; gap: clamp(10px,1.2vw,14px); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; } /* lqx.css:485 los pinta #0c1428 con sombra violeta (tema noche). Sobre el campo amarillo van en crema. */ .pos-page.lqx .gmast-vitals .gv{ display: flex; flex-direction: column; gap: .4rem; padding: clamp(13px,1.5vw,17px) clamp(14px,1.6vw,18px) !important; background: var(--d-crema) !important; border: 1px solid var(--d-linea) !important; border-bottom: 3px solid var(--d-azul) !important; border-radius: 12px !important; box-shadow: none !important; } /* guide.css pinta estos con `.page .narrow .gv-v` (0,3,0) en blanco, que era el tema noche. Sobre crema hay que ganarle. */ .pos-page.lqx .page .narrow .gv-l{ display: block; margin: 0 0 .2rem; font: 800 .66rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--d-rojo); } .pos-page.lqx .page .narrow .gv-v{ font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--d-tinta); } .pos-page.lqx .page .narrow .gv-dots{ display: flex; gap: 5px; margin: 0 0 .2rem } .pos-page.lqx .page .narrow .gv-dots i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(20,18,48,.18); box-shadow: none; } .pos-page.lqx .page .narrow .gv-dots i.on{ background: linear-gradient(135deg, var(--d-azul), var(--d-rojo)); box-shadow: none; } /* --------------------------------------------------------------- 5. SECCIONES DE LECTURA. Tarjeta crema, titular en tinta. rev-sec--light ya no significa nada aqui: sobre campo amarillo todas las tarjetas son crema, y alternar seria el desorden que habia. Se neutraliza a proposito. --------------------------------------------------------------- */ /* layout.css:23 convierte cada .rev-sec en una banda a sangre: .page .narrow .rev-sec{ width:100vw; margin-left:calc(50% - 50vw); border:0!important; border-radius:0!important; box-shadow:none!important } Eso, mezclado con los bloques que SI van a sangre, era el "a veces angosto, a veces ancho". Aqui vuelve a ser una tarjeta de la columna de lectura, y hay que decirlo con mas especificidad que (0,3,0). */ .pos-page.lqx .page .narrow .rev-sec{ position: relative; width: auto !important; max-width: var(--pos-max) !important; margin-left: auto !important; margin-right: auto !important; margin-top: var(--pos-gap) !important; margin-bottom: var(--pos-gap) !important; padding: clamp(1.5rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem) !important; background: var(--d-crema) !important; border: 1px solid var(--d-linea) !important; border-top: 4px solid var(--ac, var(--d-azul)) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(120,84,10,.13) !important; } /* layout.css le mete una barrita ::before al h2 y una capitular al primer parrafo. En tarjeta chica sobran las dos. */ .pos-page.lqx .page .narrow .rev-sec > h2::before, .pos-page.lqx .page .narrow .rev-sec--light > h2::before{ content: none !important; display: none !important; } .pos-page.lqx .page .narrow .rev-sec > h2, .pos-page.lqx .page .narrow .rev-sec--light > h2{ max-width: none !important; color: var(--d-tinta) !important; } .pos-page.lqx .page .narrow .rev-sec > p{ max-width: var(--pos-medida) !important } /* las rejas SI aprovechan todo el ancho de la tarjeta */ .pos-page.lqx .page .narrow .rev-sec > .cl-pos-wrap, .pos-page.lqx .page .narrow .rev-sec > .gsteps{ max-width: none !important } /* layout.css:48 le pone 820px a los pasos y 900px a relacionados */ .pos-page.lqx .page .narrow .gsteps-sec .gsteps{ max-width: none !important } /* layout.css:64 deja funnel, faq y relacionados en 900px fijos. Aqui todos los bloques comparten el mismo ancho, que es lo que hace que la pagina se lea como una sola cosa y no como tres. */ .pos-page.lqx .page .narrow .grev, .pos-page.lqx .page .narrow .faq, .pos-page.lqx .page .narrow .lq-funnel, .pos-page.lqx .page .narrow .ls-verdict{ max-width: var(--pos-max) !important; margin-left: auto !important; margin-right: auto !important; } .pos-page .rev-sec > h2, .pos-page .rev-sec--light > h2{ margin: 0 0 1rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .008em; font-size: clamp(1.5rem,2.9vw,2.3rem) !important; line-height: 1.06 !important; color: var(--d-tinta) !important; text-shadow: none !important; } .pos-page .rev-sec p, .pos-page .rev-sec li, .pos-page .rev-sec--light p, .pos-page .rev-sec--light li{ color: var(--d-cuerpo) !important; font-size: clamp(1rem,1.12vw,1.07rem) !important; line-height: 1.68 !important; } .pos-page .rev-sec p:last-child{ margin-bottom: 0 !important } .pos-page .rev-sec strong, .pos-page .rev-sec--light strong{ color: var(--d-tinta) !important; font-weight: 800 } .pos-page .rev-sec a, .pos-page .rev-sec--light a{ color: var(--d-azul) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .pos-page .rev-sec a:hover{ color: var(--d-rojo) !important } /* dia.css y lqx.css le meten una capitular y un ::before al h2; fuera */ .pos-page .rev-sec > h2::before, .pos-page .rev-sec--light > h2::before{ content: none !important } .pos-page .rev-sec > h2 + p::first-letter, .pos-page .rev-sec--light > h2 + p::first-letter{ font-size: inherit !important; float: none !important; color: inherit !important; text-shadow: none !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; font-family: inherit !important; } /* --------------------------------------------------------------- 6. FIGURA. Foto fija de img/franjas, con pie en tinta. --------------------------------------------------------------- */ .pos-page .cs-fig{ margin-block: var(--pos-gap) } .pos-page .cs-fig img{ display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--d-linea); box-shadow: 0 18px 44px rgba(120,84,10,.20); } .pos-page .cs-fig figcaption{ margin-top: .8rem; text-align: center; font-size: .9rem; line-height: 1.55; color: var(--d-suave); } .pos-page .cs-fig figcaption b{ color: var(--d-rojo); font-weight: 800 } /* --------------------------------------------------------------- 7. EL DESLIZADOR, EL SELECTOR y LA ENCUESTA. Tarjetas crema. --------------------------------------------------------------- */ .pos-page .ls-explore, .pos-page .ls-picker, .pos-page .ls-poll{ padding: clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem); background: var(--d-crema) !important; border: 1px solid var(--d-linea) !important; border-top: 4px solid var(--d-rojo) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(120,84,10,.13) !important; } .pos-page .iw-kicker{ display: block; margin-bottom: .5rem; font: 800 .68rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--d-azul) !important; } /* interactive.css pide blanco con `.page .narrow .ls-picker h3` (0,3,1), pensado para tema noche. Sobre crema eso es invisible, asi que se recupera la tinta con mas especificidad. */ .pos-page.lqx .page .narrow .ls-explore h3, .pos-page.lqx .page .narrow .ls-picker h3, .pos-page.lqx .page .narrow .ls-poll h3{ margin: 0 0 .4rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.3rem,2.3vw,1.8rem) !important; line-height: 1.08 !important; color: var(--d-tinta) !important; } .pos-page .iw-sub{ margin: 0 0 1.1rem !important; font-size: .98rem !important; line-height: 1.6 !important; color: var(--d-cuerpo) !important; } /* pista del deslizador, en los colores de la bandera */ .pos-page .lse-track{ display: flex; align-items: center; gap: 14px; margin: .2rem 0 .9rem } .pos-page .lse-track input[type=range]{ -webkit-appearance: none; appearance: none; flex: 1; height: 9px; border-radius: 99px; outline: none; background: linear-gradient(90deg, var(--d-sol-hondo), var(--d-azul), var(--d-rojo)); } .pos-page .lse-track input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; cursor: grab; background: var(--d-crema); border: 3px solid var(--d-rojo); box-shadow: 0 4px 12px rgba(120,84,10,.32); } .pos-page .lse-track input[type=range]::-moz-range-thumb{ width: 26px; height: 26px; border-radius: 50%; cursor: grab; background: var(--d-crema); border: 3px solid var(--d-rojo); } .pos-page .lse-ends{ display: flex; justify-content: space-between; gap: 1rem; font: 700 .72rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--d-suave); } .pos-page .lse-meter{ height: 8px; margin: .9rem 0 .8rem; background: rgba(20,18,48,.12); border-radius: 99px; overflow: hidden; } .pos-page .lse-meter i{ display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--d-azul), var(--d-rojo)); border-radius: 99px; transition: width .28s ease; } .pos-page .lse-out{ font-size: .98rem; line-height: 1.6; color: var(--d-cuerpo); } .pos-page .lse-out strong{ color: var(--d-tinta); font-weight: 800 } /* botones del selector y de la encuesta */ .pos-page .lsp-opts, .pos-page .lspoll-opts{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1rem } .pos-page .lsp-opts button, .pos-page .lspoll-opts button{ padding: 10px 16px; font: 700 .92rem/1.2 "Inter Tight", system-ui, sans-serif; color: var(--d-tinta); background: rgba(20,18,48,.05); border: 1px solid var(--d-linea); border-radius: 999px; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } .pos-page .lsp-opts button:hover, .pos-page .lspoll-opts button:hover{ border-color: var(--d-azul); color: var(--d-azul) } .pos-page .lsp-opts button.on{ background: var(--d-azul); color: #fff; border-color: var(--d-azul); } /* la tarjeta de resultado que inyecta ls.js */ .pos-page .lspr-card{ padding: clamp(1rem,2vw,1.4rem); background: rgba(13,58,148,.07); border: 1px solid var(--d-linea); border-left: 4px solid var(--d-azul); border-radius: 12px; } .pos-page .lspr-tag{ display: inline-block; margin-bottom: .4rem; font: 800 .66rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--d-rojo); } .pos-page .lspr-card h4{ margin: 0 0 .4rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.1rem,1.7vw,1.35rem) !important; color: var(--d-tinta) !important; } .pos-page .lspr-card p{ margin: 0 0 .9rem !important; color: var(--d-cuerpo) !important } .pos-page .lspr-card p:last-child{ margin-bottom: 0 !important } /* barras de la encuesta */ .pos-page .lspb{ display: grid; grid-template-columns: minmax(90px,auto) 1fr auto; gap: 10px; align-items: center; margin-bottom: .5rem; font: 700 .88rem/1.3 "Inter Tight", system-ui, sans-serif; color: var(--d-tinta); } .pos-page .lspb-bar{ height: 10px; background: rgba(20,18,48,.12); border-radius: 99px; overflow: hidden; } .pos-page .lspb-bar i{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--d-azul), var(--d-azul-alto)); border-radius: 99px; transition: width .5s ease; } .pos-page .lspb.me .lspb-bar i{ background: linear-gradient(90deg, var(--d-rojo), var(--d-rojo-alto)) } .pos-page .lspb-p{ color: var(--d-suave) } /* --------------------------------------------------------------- 8. LOS PASOS. Numeral grande en ocre, texto en tinta. --------------------------------------------------------------- */ .pos-page .gsteps{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px,1.8vw,20px) } .pos-page .gstep{ display: grid; grid-template-columns: auto 1fr; gap: clamp(12px,1.6vw,18px); align-items: start; padding-top: clamp(12px,1.6vw,16px); border-top: 1px solid var(--d-linea); } .pos-page .gstep:first-child{ border-top: none; padding-top: 0 } .pos-page .gstep-n{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-size: clamp(1.9rem,3.6vw,2.9rem); line-height: .9; color: var(--d-sol-hondo); opacity: .85; } .pos-page .gstep-body h3{ margin: 0 0 .35rem !important; font-size: clamp(1.05rem,1.6vw,1.25rem) !important; font-weight: 800 !important; line-height: 1.25; color: var(--d-tinta) !important; } .pos-page .gstep-body p{ margin: 0 !important; font-size: .99rem !important; line-height: 1.64 !important; color: var(--d-cuerpo) !important; } /* --------------------------------------------------------------- 9. LAS VARIANTES. Tarjetas crema. dia.css ya pinta los textos (h3 tinta, que azul, dt rojo, dd tinta): aqui solo la caja. --------------------------------------------------------------- */ .pos-page .cl-pos-wrap{ display: grid; gap: clamp(13px,1.6vw,18px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1rem 0 0; } .pos-page .cl-pos{ display: flex; flex-direction: column; padding: clamp(16px,1.9vw,22px) !important; background: rgba(255,255,255,.55); border: 1px solid var(--d-linea) !important; border-top: 3px solid var(--d-azul) !important; border-radius: 14px; } .pos-page .cl-pos:nth-child(2){ border-top-color: var(--d-rojo) !important } .pos-page .cl-pos:nth-child(3){ border-top-color: var(--d-sol-hondo) !important } .pos-page .cl-pos h3{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.08rem,1.6vw,1.32rem) !important; line-height: 1.1; } .pos-page .cl-pos-que{ font-family: var(--script) !important; font-size: clamp(1rem,1.4vw,1.2rem) !important; line-height: 1.2; } .pos-page .cl-pos-dl dt{ margin-top: .7rem; font: 800 .68rem/1.3 "Inter Tight", system-ui, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; } .pos-page .cl-pos-dl dt:first-child{ margin-top: 0 } .pos-page .cl-pos-dl dd{ margin: 0; font-size: .94rem !important; line-height: 1.56 !important } /* --------------------------------------------------------------- 10. EL SPLIT. Tarjeta crema a lo ancho con retrato al lado. --------------------------------------------------------------- */ .pos-page .cs-split{ padding: 0 var(--pos-aire) } .pos-page .cs-split-in{ max-width: var(--pos-max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.4rem,3.4vw,2.8rem); align-items: center; padding: clamp(1.4rem,3vw,2.6rem); background: var(--d-crema); border: 1px solid var(--d-linea); border-left: 5px solid var(--d-rojo); border-radius: 4px 20px 20px 4px; box-shadow: 0 20px 48px rgba(120,84,10,.16); } .pos-page .cs-sp-ojo{ margin: 0 0 .5rem !important; font: 800 .68rem/1.3 "Inter Tight", system-ui, sans-serif !important; letter-spacing: .18em; text-transform: uppercase; color: var(--d-azul) !important; } .pos-page .cs-split h2.cs-sp-h{ margin: 0 0 .9rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.35rem,2.5vw,2.05rem) !important; line-height: 1.06 !important; color: var(--d-tinta) !important; } .pos-page .cs-split h2.cs-sp-h em{ font-family: var(--script) !important; font-style: normal !important; text-transform: none; color: var(--d-rojo) !important; } .pos-page .cs-split p.cs-sp-p{ margin: 0 0 .8rem !important; max-width: 54ch; font-size: 1rem !important; line-height: 1.66 !important; color: var(--d-cuerpo) !important; } .pos-page .cs-split p.cs-sp-p:last-of-type{ margin-bottom: 0 !important } .pos-page .cs-split-fig{ margin: 0 } .pos-page .cs-split-fig img{ display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 40px rgba(120,84,10,.24); } .pos-page .cs-split-fig figcaption{ margin-top: .6rem; font-size: .84rem; line-height: 1.5; color: var(--d-suave); } .pos-page .cs-split-fig figcaption b{ color: var(--d-rojo); font-weight: 800 } @media (max-width: 860px){ .pos-page .cs-split-in{ grid-template-columns: 1fr } } /* --------------------------------------------------------------- 11. LOS EMBUDOS. Crema con boton rojo (dia.css ya pinta .btn). --------------------------------------------------------------- */ .pos-page .lq-funnel{ display: grid; grid-template-columns: 1fr auto; gap: clamp(14px,2vw,24px); align-items: center; padding: clamp(1.3rem,2.6vw,2rem) !important; background: var(--d-crema) !important; border: 1px solid var(--d-linea) !important; border-left: 5px solid var(--d-azul) !important; border-radius: 4px 16px 16px 4px !important; box-shadow: 0 14px 36px rgba(120,84,10,.13) !important; } .pos-page .lqf-h{ margin: 0 0 .4rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.1rem,1.9vw,1.5rem) !important; line-height: 1.1 !important; color: var(--d-tinta) !important; } .pos-page .lqf-p{ margin: 0 !important; font-size: .97rem !important; line-height: 1.62 !important; color: var(--d-cuerpo) !important; } .pos-page .lqf-cta{ flex: none } @media (max-width: 720px){ .pos-page .lq-funnel{ grid-template-columns: 1fr } } /* el embudo final: campo azul, que es la banda de la bandera */ .pos-page .lq-funnel-end{ padding: clamp(2rem,4.4vw,3.4rem) var(--pos-aire); background: var(--d-azul); border-top: 5px solid var(--d-rojo); border-bottom: 5px solid var(--d-sol); } .pos-page .lqe-inner{ max-width: var(--pos-max); margin: 0 auto } .pos-page .lq-funnel-end .eyebrow{ margin: 0 0 .5rem !important; font: 800 .7rem/1.3 "Inter Tight", system-ui, sans-serif !important; letter-spacing: .2em; text-transform: uppercase; color: var(--d-sol-alto) !important; } .pos-page .lq-funnel-end .eyebrow::before{ content: none !important } /* Este bloque es el unico campo OSCURO de la pagina (azul bandera), asi que todo lo de adentro va claro. Necesita mas especificidad que la regla general de titulares de mas abajo y que dia.css. */ .pos-page.lqx .page .narrow .lq-funnel-end h2{ margin: 0 0 .6rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.5rem,3vw,2.4rem) !important; line-height: 1.06 !important; color: #fff !important; text-shadow: none !important; } .pos-page .lqe-sub{ margin: 0 0 1.4rem !important; max-width: 46rem; font-size: 1rem !important; line-height: 1.6 !important; color: rgba(255,255,255,.86) !important; } .pos-page .lqe-grid{ display: grid; gap: clamp(10px,1.2vw,14px); grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); } .pos-page .lqe-tile{ display: flex; flex-direction: column; gap: .3rem; padding: clamp(14px,1.7vw,18px); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; text-decoration: none; transition: background .16s ease, transform .16s ease; } .pos-page .lqe-tile:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px) } .pos-page.lqx .page .narrow .lq-funnel-end .lqe-t{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.02rem; line-height: 1.12; color: #fff !important; } .pos-page.lqx .page .narrow .lq-funnel-end .lqe-s{ font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.80) !important; } .pos-page.lqx .page .narrow .lq-funnel-end .lqe-go{ margin-top: .3rem; font: 800 .7rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--d-sol-alto) !important; } .pos-page.lqx .page .narrow .lq-funnel-end .lqe-sub{ color: rgba(255,255,255,.86) !important; } /* --------------------------------------------------------------- 12. EL AVISO. Crema con filo rojo. --------------------------------------------------------------- */ .pos-page .guide-safety{ display: grid; grid-template-columns: auto 1fr; gap: clamp(12px,1.6vw,18px); align-items: start; padding: clamp(1.1rem,2.2vw,1.7rem) !important; background: rgba(206,17,38,.07) !important; border: 1px solid var(--d-linea) !important; border-left: 5px solid var(--d-rojo) !important; border-radius: 4px 14px 14px 4px !important; box-shadow: none !important; } .pos-page .guide-safety .gs-ic{ font-size: 1.4rem; line-height: 1; color: var(--d-rojo) } .pos-page .guide-safety .gs-h{ margin: 0 0 .35rem !important; font: 800 .72rem/1.3 "Inter Tight", system-ui, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--d-rojo) !important; } .pos-page .guide-safety .gs-body p:not(.gs-h){ margin: 0 !important; font-size: .95rem !important; line-height: 1.62 !important; color: var(--d-cuerpo) !important; } /* --------------------------------------------------------------- 13. FAQ. dia.css ya pinta los textos; aqui la caja y el tamano. --------------------------------------------------------------- */ .pos-page .faq{ padding: clamp(1.5rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem); background: var(--d-crema) !important; border: 1px solid var(--d-linea) !important; border-top: 4px solid var(--d-sol-hondo) !important; border-radius: 16px !important; } .pos-page .faq > h2{ margin: 0 0 .8rem !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: clamp(1.4rem,2.6vw,2.1rem) !important; line-height: 1.08 !important; color: var(--d-tinta) !important; } .pos-page .faq > div{ padding: clamp(14px,1.7vw,18px) 0; border-top: 1px solid var(--d-linea); } .pos-page .faq > div:last-child{ padding-bottom: 0 } .pos-page .faq h3{ margin: 0 0 .4rem !important; font-size: clamp(1.02rem,1.5vw,1.18rem) !important; font-weight: 800 !important; line-height: 1.3; color: var(--d-tinta) !important; } .pos-page .faq p{ margin: 0 !important; font-size: .98rem !important; line-height: 1.64 !important; color: var(--d-cuerpo) !important; } /* --------------------------------------------------------------- 14. RELACIONADOS y HERMANAS. Tarjetas crema. --------------------------------------------------------------- */ .pos-page .grev-grid, .pos-page .cl-hermanas-wrap{ display: grid; gap: clamp(10px,1.2vw,14px); grid-template-columns: repeat(auto-fit, minmax(195px,1fr)); margin: 1rem 0 0; } .pos-page .grev-card, .pos-page .cl-hermana{ display: flex; flex-direction: column; gap: .3rem; padding: clamp(13px,1.6vw,17px); background: var(--d-crema); border: 1px solid var(--d-linea); border-left: 4px solid var(--d-azul); border-radius: 12px; text-decoration: none; transition: border-color .16s ease, transform .16s ease; } .pos-page .grev-card:hover, .pos-page .cl-hermana:hover{ border-left-color: var(--d-rojo); transform: translateY(-2px) } .pos-page .grev-av{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--d-azul); color: #fff; font-weight: 800; font-size: .9rem; } .pos-page .grev-n, .pos-page .cl-hermana-n{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.02rem; line-height: 1.12; color: var(--d-tinta); } .pos-page .cl-hermana-q{ font-size: .86rem; line-height: 1.45; color: var(--d-suave) } .pos-page .grev-go{ font: 800 .68rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--d-rojo); } /* titulares sueltos de secciones sin tarjeta. Se excluye el bloque azul a proposito: alli el texto va claro. */ .pos-page .grev > h2, .pos-page main.page article.narrow > section:not(.lq-funnel-end) > h2{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; color: var(--d-tinta) !important; } .pos-page .grev-all{ margin-top: 1rem !important; font-size: .95rem; color: var(--d-cuerpo) } .pos-page .casa-cinta{ display: block; width: 92px; height: 4px; border-radius: 3px; margin: 0 0 1rem; background: var(--pos-filo); } /* --------------------------------------------------------------- 15. Failsafe y movimiento reducido. --------------------------------------------------------------- */ .pos-page main.page .reveal{ opacity: 1 } @media (prefers-reduced-motion: reduce){ .pos-page .grev-card, .pos-page .cl-hermana, .pos-page .lqe-tile{ transition: none } .pos-page .grev-card:hover, .pos-page .cl-hermana:hover, .pos-page .lqe-tile:hover{ transform: none } } /* ================================================================ 16. LA CAPA DE CHOQUE contra el bloque de noche de lqx.css lqx.css:455-546 trae una tanda entera de paneles en tema noche que dia.css nunca neutraliza: fondo #0c1428, borde crema de 2.5px y sombra dura en rosa (#ff2f4d) o violeta. Sobre el campo amarillo eso salia como cajas negras con el texto invisible adentro, y el rosa era justo el color que sobraba. La FORMA se queda, porque es buena y es la del sitio: borde grueso y sombra dura desplazada. Lo que cambia es la paleta, a la bandera. De paso, esa forma es la que hace que un boton PAREZCA un boton. ================================================================ */ .pos-page{ --d-sombra: 7px 7px 0 var(--d-azul); --d-sombra-rojo: 7px 7px 0 var(--d-rojo); --d-borde: 2.5px solid var(--d-tinta); } /* -- el parrafo guia: era un panel negro con capitular rosa -------- */ .pos-page.lqx .page .narrow .rev-sec > h2 + p, .pos-page.lqx .page .narrow .rev-sec--light > h2 + p{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; font-size: clamp(1.04rem,1.3vw,1.16rem) !important; font-weight: 500 !important; color: var(--d-tinta) !important; } .pos-page.lqx .page .narrow .rev-sec > h2 + p::first-letter, .pos-page.lqx .page .narrow .rev-sec--light > h2 + p::first-letter{ font-family: inherit !important; font-size: inherit !important; float: none !important; line-height: inherit !important; padding: 0 !important; color: inherit !important; text-shadow: none !important; } /* -- fichas de vitales -------------------------------------------- */ .pos-page.lqx .gmast-vitals .gv{ background: var(--d-crema) !important; border: var(--d-borde) !important; box-shadow: var(--d-sombra) !important; border-radius: 16px !important; } /* -- tarjetas de paso --------------------------------------------- */ .pos-page.lqx .gstep{ background: var(--d-crema) !important; border: var(--d-borde) !important; box-shadow: var(--d-sombra-rojo) !important; border-radius: 18px !important; padding: clamp(16px,2vw,22px) !important; } .pos-page.lqx .gstep .gstep-n{ color: var(--d-rojo) !important; text-shadow: 3px 3px 0 var(--d-sol-alto) !important; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif !important; font-weight: 400 !important; } /* -- tarjetas de FAQ ---------------------------------------------- */ .pos-page.lqx .faq > div{ background: var(--d-crema) !important; border: var(--d-borde) !important; box-shadow: var(--d-sombra) !important; border-radius: 18px !important; padding: clamp(16px,2vw,22px) clamp(18px,2.2vw,24px) !important; margin-bottom: 16px !important; } .pos-page.lqx .faq > div:last-child{ margin-bottom: 0 !important } /* -- el aviso ------------------------------------------------------ */ .pos-page.lqx .guide-safety{ background: #fff6f0 !important; border: 2.5px solid var(--d-rojo) !important; box-shadow: var(--d-sombra-rojo) !important; border-radius: 18px !important; } .pos-page.lqx .disclosure{ border: 2px solid var(--d-linea) !important; border-left: 4px solid var(--d-rojo) !important; box-shadow: none !important; background: rgba(255,255,255,.5) !important; color: rgba(20,18,48,.80) !important; } /* -- tarjetas de relacionados: eran negras con el titulo invisible -- */ .pos-page.lqx .grev-grid a, .pos-page.lqx .page .narrow .grev-grid a{ background: var(--d-crema) !important; border: var(--d-borde) !important; box-shadow: 5px 5px 0 var(--d-rojo) !important; border-radius: 14px !important; color: var(--d-tinta) !important; } .pos-page.lqx .grev-grid a:hover{ background: var(--d-sol-alto) !important; border-color: var(--d-tinta) !important; color: var(--d-tinta) !important; box-shadow: 7px 7px 0 var(--d-azul) !important; transform: translate(-2px,-3px); } .pos-page.lqx .grev-grid a .grev-n{ color: var(--d-tinta) !important } .pos-page.lqx .grev-grid a .grev-go{ color: var(--d-rojo) !important } .pos-page.lqx .grev-av{ background: var(--d-azul) !important; color: #fff !important; border-radius: 50%; width: 34px; height: 34px; } /* -- el embudo final: guide.css:110 pinta .lqe-inner con linear-gradient(150deg,#e5223f,#7b2fff). El morado otra vez, y esta vez escondido en el hijo, no en la seccion. --------------- */ .pos-page.lqx .page .narrow .lq-funnel-end .lqe-inner, .pos-page.lqx .lqe-inner{ background: var(--d-azul) !important; border-radius: 0 !important; text-align: left !important; padding: clamp(2rem,4vw,3rem) 0 !important; } .pos-page.lqx .lqe-inner .eyebrow{ color: var(--d-sol-alto) !important } .pos-page.lqx .lqe-tile{ background: rgba(255,255,255,.09) !important; border: 2px solid rgba(255,255,255,.34) !important; border-radius: 14px !important; color: #fff !important; box-shadow: 5px 5px 0 rgba(0,0,0,.22) !important; } .pos-page.lqx .lqe-tile:hover{ background: var(--d-sol) !important; border-color: var(--d-tinta) !important; box-shadow: 7px 7px 0 var(--d-tinta) !important; transform: translate(-2px,-3px); } .pos-page.lqx .lqe-tile:hover .lqe-t, .pos-page.lqx .lqe-tile:hover .lqe-s, .pos-page.lqx .lqe-tile:hover .lqe-go{ color: var(--d-tinta) !important } /* -- barras de la encuesta: las etiquetas iban en crema sobre crema - */ .pos-page.lqx .lspb-l{ color: var(--d-tinta) !important; font-weight: 700 } .pos-page.lqx .lspb.me .lspb-l{ color: var(--d-rojo) !important; font-weight: 800 } .pos-page.lqx .lspb-p{ color: var(--d-tinta) !important; font-weight: 800 } /* ================================================================ 17. QUE UN BOTON PAREZCA UN BOTON La critica fue directa: no se entiende que son botones. Antes eran pildoras planas de fondo casi transparente, del mismo tono que la tarjeta donde viven. Ahora todo lo que se puede tocar comparte tres señales: borde grueso de tinta, sombra dura desplazada, y el movimiento de "hundirse" al presionar. Es la misma forma de las tarjetas, en chico, asi que la pagina se lee como una sola cosa. ================================================================ */ /* -- opciones del selector y de la encuesta ------------------------ */ .pos-page.lqx .lsp-opts button, .pos-page.lqx .lspoll-opts button{ position: relative; padding: 12px 20px !important; font: 800 .94rem/1.2 "Inter Tight", system-ui, sans-serif !important; color: var(--d-tinta) !important; background: #fff !important; border: var(--d-borde) !important; border-radius: 999px !important; box-shadow: 4px 4px 0 var(--d-azul) !important; cursor: pointer !important; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .pos-page.lqx .lsp-opts button:hover, .pos-page.lqx .lspoll-opts button:hover{ background: var(--d-sol-alto) !important; transform: translate(-1px,-2px); box-shadow: 6px 6px 0 var(--d-azul) !important; } /* al presionar se hunde: la señal tactil que faltaba */ .pos-page.lqx .lsp-opts button:active, .pos-page.lqx .lspoll-opts button:active{ transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--d-azul) !important; } .pos-page.lqx .lsp-opts button:focus-visible, .pos-page.lqx .lspoll-opts button:focus-visible{ outline: 3px solid var(--d-rojo); outline-offset: 3px; } .pos-page.lqx .lsp-opts button.on{ background: var(--d-rojo) !important; color: #fff !important; box-shadow: 4px 4px 0 var(--d-tinta) !important; } /* -- el CTA de afiliado: el boton mas importante de la pagina ------ */ .pos-page.lqx .page .narrow .lq-funnel .btn, .pos-page.lqx .page .narrow .lspr-card .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px !important; font: 800 1rem/1.1 "Inter Tight", system-ui, sans-serif !important; color: #fff !important; background: var(--d-rojo) !important; border: var(--d-borde) !important; border-radius: 999px !important; box-shadow: 5px 5px 0 var(--d-tinta) !important; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; animation: pos-latido 3.4s ease-in-out infinite; } .pos-page.lqx .page .narrow .lq-funnel .btn:hover, .pos-page.lqx .page .narrow .lspr-card .btn:hover{ background: var(--d-rojo-alto) !important; transform: translate(-1px,-2px); box-shadow: 7px 7px 0 var(--d-tinta) !important; animation: none; } .pos-page.lqx .page .narrow .lq-funnel .btn:active, .pos-page.lqx .page .narrow .lspr-card .btn:active{ transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--d-tinta) !important; } .pos-page.lqx .page .narrow .btn .arrow{ background: #fff !important; color: var(--d-rojo) !important; } /* el latido: MUY leve, solo la sombra respira. Nada de rebotes. */ @keyframes pos-latido{ 0%, 100% { box-shadow: 5px 5px 0 var(--d-tinta) } 50% { box-shadow: 5px 5px 0 var(--d-tinta), 0 0 0 7px rgba(206,17,38,.16) } } /* -- las fichas que son enlaces: hermanas, relacionados, embudo ---- */ .pos-page.lqx .cl-hermana{ background: var(--d-crema) !important; border: var(--d-borde) !important; border-left: var(--d-borde) !important; box-shadow: 5px 5px 0 var(--d-azul) !important; border-radius: 14px !important; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; } .pos-page.lqx .cl-hermana:hover{ background: var(--d-sol-alto) !important; transform: translate(-2px,-3px); box-shadow: 7px 7px 0 var(--d-rojo) !important; } .pos-page.lqx .cl-hermana:active{ transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--d-rojo) !important; } /* la flecha que avisa que la ficha lleva a otro lado */ .pos-page.lqx .cl-hermana .cl-hermana-n::after{ content: " \2197"; color: var(--d-rojo); font-size: .8em; } /* -- foco visible en todo lo tocable, que antes no se veia --------- */ .pos-page.lqx a:focus-visible, .pos-page.lqx button:focus-visible, .pos-page.lqx input:focus-visible{ outline: 3px solid var(--d-rojo); outline-offset: 3px; border-radius: 4px; } /* -- el deslizador: que se note que se arrastra -------------------- */ .pos-page.lqx .lse-track input[type=range]{ border: 2px solid var(--d-tinta) !important; height: 12px !important; } .pos-page.lqx .lse-track input[type=range]::-webkit-slider-thumb{ border: 3px solid var(--d-tinta) !important; background: var(--d-rojo) !important; box-shadow: 2px 2px 0 var(--d-tinta) !important; } .pos-page.lqx .lse-track input[type=range]::-moz-range-thumb{ border: 3px solid var(--d-tinta) !important; background: var(--d-rojo) !important; } @media (prefers-reduced-motion: reduce){ .pos-page.lqx .page .narrow .lq-funnel .btn, .pos-page.lqx .page .narrow .lspr-card .btn{ animation: none !important } .pos-page.lqx .lsp-opts button, .pos-page.lqx .lspoll-opts button, .pos-page.lqx .cl-hermana{ transition: none !important } .pos-page.lqx .cl-hermana:hover, .pos-page.lqx .lsp-opts button:hover, .pos-page.lqx .lspoll-opts button:hover{ transform: none !important } } /* ================================================================ 18. EL HEROE, EN SERIO El anterior era texto centrado sobre un color plano: correcto y sin una sola idea. Ahora tiene lo que tiene el resto de la pagina: la palabra fantasma detras, el titular con sombra dura de bandera, y la trama diagonal del yeso de la casa. Sigue siendo amarillo y sigue siendo la letra de la casa; lo que cambia es que ya no parece un error de maquetacion. ================================================================ */ .pos-page .cs-hero{ overflow: hidden; padding-block: clamp(2.4rem,5vw,4rem) clamp(2rem,4vw,3.2rem); border-bottom: 0; } /* la trama diagonal, la misma del yeso de dia.css pero mas marcada */ .pos-page .cs-hero::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(58deg, rgba(20,18,48,.07) 0 1px, transparent 1px 22px); background-size: 44px 44px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); } /* la palabra fantasma: el gesto de la casa, en ocre, detras de todo */ .pos-page .cs-hero[data-fantasma]::before{ content: attr(data-fantasma); position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 52%; transform: translate(-50%,-50%); font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-size: clamp(5rem, 19vw, 17rem); line-height: .8; letter-spacing: -.01em; white-space: nowrap; color: rgba(20,18,48,.07); height: auto; background: none; } .pos-page .cs-hero-in{ position: relative; z-index: 2 } /* el titular, con la sombra dura de la bandera */ .pos-page .cs-hero h1{ text-shadow: 4px 4px 0 var(--d-rojo), 8px 8px 0 rgba(20,18,48,.14) !important; } @media (max-width: 620px){ .pos-page .cs-hero h1{ text-shadow: 3px 3px 0 var(--d-rojo) !important } } /* el remate, sobre una cinta crema para que no se pierda en el campo */ .pos-page .cs-hero h1 em{ width: fit-content; margin-inline: auto; padding: .06em .5em .16em; background: var(--d-crema); border: 2px solid var(--d-tinta); border-radius: 999px; box-shadow: 4px 4px 0 var(--d-azul); text-shadow: none !important; } /* la chapa gana el borde grueso y la sombra dura, como todo lo demas */ .pos-page .cs-hero .cs-chapa{ border: 2px solid var(--d-tinta); box-shadow: 3px 3px 0 var(--d-rojo); } /* el filo tricolor, ahora arriba Y abajo */ .pos-page .cs-hero{ border-bottom: 5px solid transparent } .pos-page .cs-hero-filo{ position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3; background: var(--pos-filo); } /* ================================================================ 19. LA CITA, ya sin video, y la placa de las franjas ================================================================ */ /* La cita era un tercer clip a sangre. Tres videos por pagina, ninguno mostrando la posicion, era mucho peso y mucha confusion. Ahora es una placa de texto con la forma de la casa. */ .pos-page .cs-cita{ position: relative; padding: clamp(1.6rem,3.4vw,2.6rem) clamp(1.5rem,3vw,2.6rem); background: var(--d-tinta); border: var(--d-borde); border-radius: 20px; box-shadow: 8px 8px 0 var(--d-rojo); text-align: center; } .pos-page .cs-cita::before{ content: "\201C"; position: absolute; top: -.22em; left: clamp(14px,3vw,28px); font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-size: clamp(4rem,9vw,7rem); line-height: 1; color: var(--d-sol); opacity: .5; } .pos-page.lqx .page .narrow .cs-cita blockquote{ position: relative; z-index: 1; margin: 0 auto .7rem; max-width: 30ch; font-family: var(--script) !important; font-size: clamp(1.4rem,3vw,2.3rem) !important; line-height: 1.24 !important; letter-spacing: .01em; word-spacing: .1em; color: #fff !important; } .pos-page.lqx .page .narrow .cs-cita .cs-cita-por{ margin: 0 !important; font: 800 .72rem/1.3 "Inter Tight", system-ui, sans-serif !important; letter-spacing: .18em; text-transform: uppercase; color: var(--d-sol-alto) !important; } /* La placa de la franja: dice, sin rodeos, que el clip es ambiente. La casa nunca afirma que un clip muestre la posicion de la pagina, y ahora eso esta rotulado y no solo insinuado en el pie. */ .pos-page.lqx .cl-franja .cl-fr-placa{ top: clamp(88px,11vh,118px); right: clamp(12px,3vw,32px); background: var(--d-tinta) !important; color: var(--d-sol-alto) !important; border: 2px solid var(--d-sol-alto); border-radius: 999px; font: 800 .64rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 7px 13px; box-shadow: 3px 3px 0 rgba(0,0,0,.35); } /* ================================================================ 20. LA REJA DEL HUB, convertida en tarjetas de verdad vitrina9.css la tiene como mosaico: el clip llena la ficha y el nombre va encima, flotando abajo a la izquierda. Se ve bien y no dice nada: no se entiende que lleva a alguna parte, y no cabe la descripcion. Aqui pasa a ser una tarjeta: clip arriba, cuerpo crema abajo con nombre, gancho y la salida rotulada. Misma forma que todo lo demas de la familia, asi que se lee como un boton. ================================================================ */ .pos-page.lqx .vt-nombres{ display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: clamp(14px,1.7vw,20px); margin: 1.4rem 0 0; } .pos-page.lqx a.vt-nom{ position: relative; display: flex; flex-direction: column; aspect-ratio: auto; overflow: hidden; background: var(--d-crema); border: var(--d-borde); border-radius: 16px; box-shadow: 6px 6px 0 var(--d-azul); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; } .pos-page.lqx a.vt-nom:hover{ transform: translate(-2px,-3px); box-shadow: 9px 9px 0 var(--d-rojo); background: var(--d-sol-alto); } .pos-page.lqx a.vt-nom:active{ transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--d-rojo); } /* el clip vuelve a su caja, arriba, en vez de llenar la ficha entera */ .pos-page.lqx .vt-nom video{ position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: var(--d-borde); } /* el velo que oscurecia el mosaico ya no hace falta */ .pos-page.lqx .vt-nom::after{ content: none } .pos-page.lqx .vt-nom-n{ position: static; margin: 0; padding: clamp(12px,1.5vw,16px) clamp(13px,1.6vw,17px) .2rem; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.1; color: var(--d-tinta); text-shadow: none; } .pos-page.lqx .vt-nom-q{ margin: 0; padding: 0 clamp(13px,1.6vw,17px) .5rem; font-size: .88rem; line-height: 1.45; color: var(--d-suave); } .pos-page.lqx .vt-nom-go{ margin-top: auto; padding: 0 clamp(13px,1.6vw,17px) clamp(12px,1.5vw,15px); font: 800 .7rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--d-rojo); } @media (prefers-reduced-motion: reduce){ .pos-page.lqx a.vt-nom{ transition: none } .pos-page.lqx a.vt-nom:hover{ transform: none } } /* ================================================================ 21. EL INDICE, sin video y con toda la carne en la tipografia Las fichas llevaban clip. El problema no era el peso: era que el clip NO muestra la posicion que la ficha nombra, asi que prometia algo que no cumplia, y encima un fotograma claro se comia el texto oscuro de encima. Fuera el video. Lo que queda tiene que sostenerse solo, asi que la ficha ES el letrero: numeral enorme de fondo, el nombre en la letra de exhibicion de la casa, el gancho en una linea y la salida rotulada. Las nueve rotan por la bandera (crema, azul, rojo, sol) para que la reja se lea como un cartel y no como una lista. ================================================================ */ .pos-page .cs-fichas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: clamp(14px,1.8vw,22px); margin: 1.4rem 0 0; } .pos-page .cs-ficha{ position: relative; display: flex; flex-direction: column; min-height: 190px; padding: clamp(18px,2.2vw,24px); overflow: hidden; text-decoration: none; border: var(--d-borde); border-radius: 18px; box-shadow: 7px 7px 0 var(--d-tinta); transition: transform .14s ease, box-shadow .14s ease; isolation: isolate; } .pos-page .cs-ficha:hover{ transform: translate(-3px,-4px); box-shadow: 11px 11px 0 var(--d-tinta); } .pos-page .cs-ficha:active{ transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--d-tinta); } /* el numeral: el ancla visual que antes hacia el clip, sin prometer nada que no sea cierto */ .pos-page .cs-ficha-n{ position: absolute; z-index: 0; right: -.06em; bottom: -.34em; font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; font-size: clamp(6rem, 11vw, 9rem); line-height: .8; letter-spacing: -.02em; pointer-events: none; } .pos-page .cs-ficha > span:not(.cs-ficha-n){ position: relative; z-index: 1 } .pos-page .cs-ficha-nom{ font-family: var(--anton, "Luckiest Guy"), system-ui, sans-serif; text-transform: uppercase; letter-spacing: .012em; font-size: clamp(1.32rem, 2.1vw, 1.85rem); line-height: 1.02; margin-bottom: .45rem; } .pos-page .cs-ficha-q{ font-size: .92rem; line-height: 1.5; max-width: 26ch; margin-bottom: 1rem; } .pos-page .cs-ficha-go{ margin-top: auto; font: 800 .7rem/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; } /* --- la rotacion de la bandera, cuatro tonos ---------------------- */ /* 1. crema */ .pos-page .cs-ficha:nth-child(4n+1){ background: var(--d-crema) } .pos-page .cs-ficha:nth-child(4n+1) .cs-ficha-nom{ color: var(--d-tinta) } .pos-page .cs-ficha:nth-child(4n+1) .cs-ficha-q{ color: rgba(20,18,48,.72) } .pos-page .cs-ficha:nth-child(4n+1) .cs-ficha-go{ color: var(--d-rojo) } .pos-page .cs-ficha:nth-child(4n+1) .cs-ficha-n{ color: rgba(20,18,48,.09) } /* 2. azul bandera */ .pos-page .cs-ficha:nth-child(4n+2){ background: var(--d-azul) } .pos-page .cs-ficha:nth-child(4n+2) .cs-ficha-nom{ color: #fff } .pos-page .cs-ficha:nth-child(4n+2) .cs-ficha-q{ color: rgba(255,255,255,.80) } .pos-page .cs-ficha:nth-child(4n+2) .cs-ficha-go{ color: var(--d-sol-alto) } .pos-page .cs-ficha:nth-child(4n+2) .cs-ficha-n{ color: rgba(255,255,255,.11) } /* 3. rojo bandera */ .pos-page .cs-ficha:nth-child(4n+3){ background: var(--d-rojo) } .pos-page .cs-ficha:nth-child(4n+3) .cs-ficha-nom{ color: #fff } .pos-page .cs-ficha:nth-child(4n+3) .cs-ficha-q{ color: rgba(255,255,255,.82) } .pos-page .cs-ficha:nth-child(4n+3) .cs-ficha-go{ color: var(--d-sol-alto) } .pos-page .cs-ficha:nth-child(4n+3) .cs-ficha-n{ color: rgba(255,255,255,.13) } /* 4. sol */ .pos-page .cs-ficha:nth-child(4n+4){ background: var(--d-sol-alto) } .pos-page .cs-ficha:nth-child(4n+4) .cs-ficha-nom{ color: var(--d-tinta) } .pos-page .cs-ficha:nth-child(4n+4) .cs-ficha-q{ color: rgba(20,18,48,.74) } .pos-page .cs-ficha:nth-child(4n+4) .cs-ficha-go{ color: var(--d-azul) } .pos-page .cs-ficha:nth-child(4n+4) .cs-ficha-n{ color: rgba(20,18,48,.10) } /* al pasar por encima, la ficha se planta en el sol y la tinta manda */ .pos-page .cs-ficha:hover{ background: var(--d-sol-alto) } .pos-page .cs-ficha:hover .cs-ficha-nom{ color: var(--d-tinta) } .pos-page .cs-ficha:hover .cs-ficha-q{ color: rgba(20,18,48,.76) } .pos-page .cs-ficha:hover .cs-ficha-go{ color: var(--d-rojo) } .pos-page .cs-ficha:hover .cs-ficha-n{ color: rgba(20,18,48,.12) } @media (prefers-reduced-motion: reduce){ .pos-page .cs-ficha{ transition: none } .pos-page .cs-ficha:hover{ transform: none } } /* --------------------------------------------------------------- 21b. Las fichas de hermanas de las paginas hijas heredan el mismo trato. Cumplen la misma funcion que el indice del hub, asi que no hay razon para que se vean distintas ni mas apagadas. --------------------------------------------------------------- */ .pos-page.lqx .cl-hermanas-wrap{ grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: clamp(12px,1.5vw,18px); } .pos-page.lqx .cl-hermana{ min-height: 128px; padding: clamp(15px,1.8vw,19px) !important; border: var(--d-borde) !important; border-radius: 16px !important; box-shadow: 6px 6px 0 var(--d-tinta) !important; } .pos-page.lqx .cl-hermana:hover{ box-shadow: 9px 9px 0 var(--d-tinta) !important } .pos-page.lqx .cl-hermana:active{ box-shadow: 2px 2px 0 var(--d-tinta) !important } .pos-page.lqx .cl-hermana:nth-child(4n+1){ background: var(--d-crema) !important } .pos-page.lqx .cl-hermana:nth-child(4n+1) .cl-hermana-n{ color: var(--d-tinta) !important } .pos-page.lqx .cl-hermana:nth-child(4n+1) .cl-hermana-q{ color: rgba(20,18,48,.72) !important } .pos-page.lqx .cl-hermana:nth-child(4n+1) .cl-hermana-n::after{ color: var(--d-rojo) } .pos-page.lqx .cl-hermana:nth-child(4n+2){ background: var(--d-azul) !important } .pos-page.lqx .cl-hermana:nth-child(4n+2) .cl-hermana-n{ color: #fff !important } .pos-page.lqx .cl-hermana:nth-child(4n+2) .cl-hermana-q{ color: rgba(255,255,255,.80) !important } .pos-page.lqx .cl-hermana:nth-child(4n+2) .cl-hermana-n::after{ color: var(--d-sol-alto) } .pos-page.lqx .cl-hermana:nth-child(4n+3){ background: var(--d-rojo) !important } .pos-page.lqx .cl-hermana:nth-child(4n+3) .cl-hermana-n{ color: #fff !important } .pos-page.lqx .cl-hermana:nth-child(4n+3) .cl-hermana-q{ color: rgba(255,255,255,.82) !important } .pos-page.lqx .cl-hermana:nth-child(4n+3) .cl-hermana-n::after{ color: var(--d-sol-alto) } .pos-page.lqx .cl-hermana:nth-child(4n+4){ background: var(--d-sol-alto) !important } .pos-page.lqx .cl-hermana:nth-child(4n+4) .cl-hermana-n{ color: var(--d-tinta) !important } .pos-page.lqx .cl-hermana:nth-child(4n+4) .cl-hermana-q{ color: rgba(20,18,48,.74) !important } .pos-page.lqx .cl-hermana:nth-child(4n+4) .cl-hermana-n::after{ color: var(--d-azul) } .pos-page.lqx .cl-hermana:hover{ background: var(--d-sol-alto) !important } .pos-page.lqx .cl-hermana:hover .cl-hermana-n{ color: var(--d-tinta) !important } .pos-page.lqx .cl-hermana:hover .cl-hermana-q{ color: rgba(20,18,48,.76) !important } /* --------------------------------------------------------------- 21c. Que la ficha se lea como enlace ANTES de pasarle el mouse. La chapa de flecha en la esquina es la señal que faltaba: quien mira la reja de un vistazo tiene que entender que las nueve llevan a alguna parte, sin tener que leer el pie de cada una. --------------------------------------------------------------- */ .pos-page .cs-ficha::after{ content: "\2197"; position: absolute; z-index: 2; top: clamp(12px,1.5vw,16px); right: clamp(12px,1.5vw,16px); width: 30px; height: 30px; display: grid; place-items: center; font: 800 .95rem/1 "Inter Tight", system-ui, sans-serif; border-radius: 50%; border: 2px solid currentColor; transition: transform .14s ease; } .pos-page .cs-ficha:nth-child(4n+1)::after{ color: var(--d-rojo) } .pos-page .cs-ficha:nth-child(4n+2)::after{ color: var(--d-sol-alto) } .pos-page .cs-ficha:nth-child(4n+3)::after{ color: var(--d-sol-alto) } .pos-page .cs-ficha:nth-child(4n+4)::after{ color: var(--d-azul) } .pos-page .cs-ficha:hover::after{ color: var(--d-rojo); transform: translate(2px,-2px) scale(1.08); } /* el nombre no se mete debajo de la chapa */ .pos-page .cs-ficha-nom{ padding-right: 40px } @media (prefers-reduced-motion: reduce){ .pos-page .cs-ficha::after{ transition: none } .pos-page .cs-ficha:hover::after{ transform: none } }