/* * Per-project brand backgrounds for portfolio case studies. The theme paints * every surface from --mainBackground / --secondaryBackground, and the dark * defaults come from `:root body.layout--switched` in the parent style.css, * so each override needs the same :root prefix to win the specificity tie. * * Grupo Maritimo (post 13645): the navy of grupomaritimo.com. */ :root body.postid-13645.layout--switched, :root body.postid-13694.layout--switched { --mainBackground: #0E173B; --secondaryBackground: #0A1129; } /* * The phone-mockup slots in the case studies have viewport-dependent aspect * ratios (vh heights over fluid columns), so any fixed image ratio gets * cover-cropped at some screen size — measured 18-19% of the phones cut at * 1855x950. Contain shows the boards whole; the boards themselves were * re-rendered with a flat background so the letterbox bands are invisible. * The selectors key on the flat boards naming (…f-PW / …f-SQ). */ body.single-portfolio img[src*="f-PW"], body.single-portfolio img[src*="f-SQ"], body.single-portfolio img[data-lazy-src*="f-PW"], body.single-portfolio img[data-lazy-src*="f-SQ"] { object-fit: contain !important; background-color: #141414; } body.postid-13645 img[src*="f-PW"], body.postid-13645 img[src*="f-SQ"], body.postid-13645 img[data-lazy-src*="f-PW"], body.postid-13645 img[data-lazy-src*="f-SQ"], body.postid-13694 img[src*="f-PW"], body.postid-13694 img[src*="f-SQ"], body.postid-13694 img[data-lazy-src*="f-PW"], body.postid-13694 img[data-lazy-src*="f-SQ"] { background-color: #0E173B; } /* * Texpromo (posts 13727 EN / 13728 ES): a pastel black-on-lavender brand, so * this case study runs on the LIGHT layout (page_layout = layout--default) * with the brand lavender as the page surface. */ :root body.postid-13727, :root body.postid-13728 { --mainBackground: #FAF3FF; --secondaryBackground: #F1E3FD; } body.postid-13727 img[src*="f-PW"], body.postid-13727 img[src*="f-SQ"], body.postid-13727 img[data-lazy-src*="f-PW"], body.postid-13727 img[data-lazy-src*="f-SQ"], body.postid-13728 img[src*="f-PW"], body.postid-13728 img[src*="f-SQ"], body.postid-13728 img[data-lazy-src*="f-PW"], body.postid-13728 img[data-lazy-src*="f-SQ"] { background-color: #FAF3FF; } /* * Biante (posts 11590 EN / 13399 ES): the app leads with a bright cyan * (#08D4FF). Painting the page in that cyan would leave white text at 1.9:1, * so the surface is the same hue dropped to L13 — 12.9:1 against white — and * the pure cyan stays where it belongs, in the app screenshots themselves. * The showreel is rendered on this exact value so the hero blends into the page. */ :root body.postid-11590.layout--switched, :root body.postid-13399.layout--switched { --mainBackground: #003742; --secondaryBackground: #002830; } /* * Recicla2 (posts 13767 EN / 13768 ES): same treatment on the brand green * (#00A55B) — L13 gives #004225 at 11.6:1 against white. */ :root body.postid-13767.layout--switched, :root body.postid-13768.layout--switched { --mainBackground: #004225; --secondaryBackground: #00301B; } /* * Plyr paints its video wrapper black, and the hero video is contained, not * cropped — so a square showreel leaves black letterbox bars over the page * colour. Tie the wrapper to the page surface instead: the bars disappear on * every case study, brand-coloured or default. */ body.single-portfolio .plyr__video-wrapper, body.single-portfolio .pe-video .plyr__poster { background-color: var(--mainBackground); } /* * Tllevo (posts 13741 EN / 13742 ES): la app es casi toda el navy #111820, que * ya da 17.9:1 contra blanco, asi que aqui el color de marca se usa tal cual * en vez de bajarlo de luminosidad como en Biante y Recicla2. */ :root body.postid-13741.layout--switched, :root body.postid-13742.layout--switched { --mainBackground: #111820; --secondaryBackground: #0B0F14; } /* * BitcoinTravel (posts 13781 EN / 13782 ES): la app ya es oscura, el navy de su * cabecera (#1F2533) da 14.4:1 contra blanco, asi que va tal cual — el naranja * #FF800B queda solo como acento dentro de las pantallas, nunca de fondo. */ :root body.postid-13781.layout--switched, :root body.postid-13782.layout--switched { --mainBackground: #1F2533; --secondaryBackground: #151A24; } /* * MDT Ingenieros (posts 13795 EN / 13796 ES): el verde salvia de la firma * (#698167) solo da 4.3:1 contra blanco, asi que el fondo es ese mismo tono * bajado a L18 — #2A3329, 13.1:1 — y el salvia se queda en la interfaz. */ :root body.postid-13795.layout--switched, :root body.postid-13796.layout--switched { --mainBackground: #2A3329; --secondaryBackground: #212921; } /* * Proyectos web con showreel de laptop+telefono (2026-08-18). * * El showreel se renderiza sobre el color que mas maneja cada sitio, y el hero * lo muestra con object-fit:contain, asi que la pagina tiene que llevar ese * mismo color o el video se lee como un recuadro pegado encima. Los cuatro * pasan 11:1 con texto blanco. */ :root body.postid-13506.layout--switched, :root body.postid-13507.layout--switched { /* Yard On Time: verde oliva de marca */ --mainBackground: #3A3F15; --secondaryBackground: #2C300F; } :root body.postid-13449.layout--switched, :root body.postid-13450.layout--switched { /* Sunrise Discovery: teal de marca */ --mainBackground: #104050; --secondaryBackground: #0B3040; } :root body.postid-13467.layout--switched, :root body.postid-13468.layout--switched { /* PALAVOR: lienzo negro, el dorado va en el halo */ --mainBackground: #141414; --secondaryBackground: #0E0E0E; } :root body.postid-9190.layout--switched, :root body.postid-13408.layout--switched { /* Northlandsv: lienzo negro, oliva en el halo */ --mainBackground: #171717; --secondaryBackground: #101010; } /* * Proyectos de web design con showreel 3D y tableros de marca (2026-08-18). * * El fondo de cada ficha es el color identitario del sitio bajado hasta >=11:1 * con texto blanco: el acento puro nunca sirve de superficie. A Child For * Christ va con el indigo del logo y no con su amarillo, porque el amarillo * bajado da un marron que la marca no usa. * * Los tableros de telefono se muestran con object-fit:contain, asi que su * background-color tiene que ser EXACTAMENTE el color que pinta la pagina o el * letterbox se ve. */ :root body.postid-13620.layout--switched, :root body.postid-13621.layout--switched { /* A Child For Christ: indigo del logo */ --mainBackground: #262673; --secondaryBackground: #222266; } :root body.postid-13588.layout--switched, :root body.postid-13589.layout--switched { /* Red-Medyci: azul hospital */ --mainBackground: #0A3347; --secondaryBackground: #082837; } :root body.postid-13571.layout--switched, :root body.postid-13572.layout--switched { /* CONCAVAL 2026: navy del congreso */ --mainBackground: #003061; --secondaryBackground: #00274F; } :root body.postid-13554.layout--switched, :root body.postid-13555.layout--switched { /* MiLockerSV: navy del logo */ --mainBackground: #1C3056; --secondaryBackground: #182849; } /* * Las cuatro fichas con clase de marca (Yard On Time, Sunrise, PALAVOR y Array * Media) NO pintan --mainBackground: `case-study-brands.css` les pone * background-color: var(--brand-deep) sobre el body, y ese selector gana. Medido * el 2026-08-18: el pixel de la pagina junto a un tablero era #2A2E10 mientras * --mainBackground decia #3A3F15, y por eso los tableros y el showreel se leian * como un recuadro pegado encima. * * Aqui se iguala --mainBackground a --brand-deep. No cambia nada visible —en las * cuatro paginas ningun elemento pintaba --mainBackground— salvo el envoltorio * de Plyr, que es justo lo que hacia falta arreglar. */ :root body.postid-13506.layout--switched, :root body.postid-13507.layout--switched { /* Yard On Time */ --mainBackground: #2A2E10; --secondaryBackground: #20240C; } :root body.postid-13449.layout--switched, :root body.postid-13450.layout--switched { /* Sunrise Discovery */ --mainBackground: #0C1C23; --secondaryBackground: #08151A; } :root body.postid-13467.layout--switched, :root body.postid-13468.layout--switched { /* PALAVOR */ --mainBackground: #0B0B0B; --secondaryBackground: #070707; } :root body.postid-13524.layout--switched, :root body.postid-13525.layout--switched { /* Array Media */ --mainBackground: #1D0E07; --secondaryBackground: #150A05; } body.postid-13620 img[src*="f-PW"], body.postid-13620 img[src*="f-SQ"], body.postid-13620 img[data-lazy-src*="f-PW"], body.postid-13620 img[data-lazy-src*="f-SQ"], body.postid-13621 img[src*="f-PW"], body.postid-13621 img[src*="f-SQ"], body.postid-13621 img[data-lazy-src*="f-PW"], body.postid-13621 img[data-lazy-src*="f-SQ"] { background-color: #262673; } body.postid-13588 img[src*="f-PW"], body.postid-13588 img[src*="f-SQ"], body.postid-13588 img[data-lazy-src*="f-PW"], body.postid-13588 img[data-lazy-src*="f-SQ"], body.postid-13589 img[src*="f-PW"], body.postid-13589 img[src*="f-SQ"], body.postid-13589 img[data-lazy-src*="f-PW"], body.postid-13589 img[data-lazy-src*="f-SQ"] { background-color: #0A3347; } body.postid-13571 img[src*="f-PW"], body.postid-13571 img[src*="f-SQ"], body.postid-13571 img[data-lazy-src*="f-PW"], body.postid-13571 img[data-lazy-src*="f-SQ"], body.postid-13572 img[src*="f-PW"], body.postid-13572 img[src*="f-SQ"], body.postid-13572 img[data-lazy-src*="f-PW"], body.postid-13572 img[data-lazy-src*="f-SQ"] { background-color: #003061; } body.postid-13554 img[src*="f-PW"], body.postid-13554 img[src*="f-SQ"], body.postid-13554 img[data-lazy-src*="f-PW"], body.postid-13554 img[data-lazy-src*="f-SQ"], body.postid-13555 img[src*="f-PW"], body.postid-13555 img[src*="f-SQ"], body.postid-13555 img[data-lazy-src*="f-PW"], body.postid-13555 img[data-lazy-src*="f-SQ"] { background-color: #1C3056; } body.postid-13506 img[src*="f-PW"], body.postid-13506 img[src*="f-SQ"], body.postid-13506 img[data-lazy-src*="f-PW"], body.postid-13506 img[data-lazy-src*="f-SQ"], body.postid-13507 img[src*="f-PW"], body.postid-13507 img[src*="f-SQ"], body.postid-13507 img[data-lazy-src*="f-PW"], body.postid-13507 img[data-lazy-src*="f-SQ"] { background-color: #2A2E10; } body.postid-13449 img[src*="f-PW"], body.postid-13449 img[src*="f-SQ"], body.postid-13449 img[data-lazy-src*="f-PW"], body.postid-13449 img[data-lazy-src*="f-SQ"], body.postid-13450 img[src*="f-PW"], body.postid-13450 img[src*="f-SQ"], body.postid-13450 img[data-lazy-src*="f-PW"], body.postid-13450 img[data-lazy-src*="f-SQ"] { background-color: #0C1C23; } body.postid-13467 img[src*="f-PW"], body.postid-13467 img[src*="f-SQ"], body.postid-13467 img[data-lazy-src*="f-PW"], body.postid-13467 img[data-lazy-src*="f-SQ"], body.postid-13468 img[src*="f-PW"], body.postid-13468 img[src*="f-SQ"], body.postid-13468 img[data-lazy-src*="f-PW"], body.postid-13468 img[data-lazy-src*="f-SQ"] { background-color: #0B0B0B; } body.postid-13524 img[src*="f-PW"], body.postid-13524 img[src*="f-SQ"], body.postid-13524 img[data-lazy-src*="f-PW"], body.postid-13524 img[data-lazy-src*="f-SQ"], body.postid-13525 img[src*="f-PW"], body.postid-13525 img[src*="f-SQ"], body.postid-13525 img[data-lazy-src*="f-PW"], body.postid-13525 img[data-lazy-src*="f-SQ"] { background-color: #1D0E07; } /* * Pares de telefonos en movil (2026-08-18). * * El hueco de los tableros de telefono mide 450px de alto con el ancho fluido, * asi que por debajo de 768px su proporcion cae a 0.71 (360px) - 1.62 (767px). * Con object-fit:contain un tablero de 2.05:1 se pinta a 350x171 dentro de una * caja de 350x450 — el 40% — y cada telefono queda en 70px de ancho: eso es lo * que se ve "super pequeno". El tablero vertical (1020x1200, 0.85) llena el 92% * de la caja y deja el telefono en 158px, mas del doble. * * El corte va en 1199px y no en los 768px del tema porque entre 768 y 1199 el * hueco sigue siendo mas estrecho que 2:1 y el telefono se quedaba en 96px * (768px) y 130px (1024px); con el tablero vertical son 173px en toda la banda. * De 1200px arriba manda el tablero ancho, que ahi si llena el hueco. * * Que el tablero vertical no llene el hueco a lo ancho da igual: su fondo es * exactamente el de la pagina, asi que los margenes laterales son invisibles. * Lo unico que se mide es el tamano del telefono. * * El intercambio va por CSS y no por Elementor porque el widget pesingleimage * no tiene control por punto de corte. Hay que repetir el selector para * data-lazy-src: antes del cambio de WP Rocket el src es el marcador de posicion * y el selector por src no aplica. */ @media (max-width: 1199px) { body.single-portfolio img[src*="achild-v2-f-PW1"], body.single-portfolio img[data-lazy-src*="achild-v2-f-PW1"] { content: url("/wp-content/uploads/2026/08/achild-f-PWm1b.png"); } body.single-portfolio img[src*="achild-v2-f-PW2"], body.single-portfolio img[data-lazy-src*="achild-v2-f-PW2"] { content: url("/wp-content/uploads/2026/08/achild-f-PWm2b.png"); } body.single-portfolio img[src*="texpromo-v2-f-PW1"], body.single-portfolio img[data-lazy-src*="texpromo-v2-f-PW1"] { content: url("/wp-content/uploads/2026/08/texpromo-f-PWm1b.png"); } body.single-portfolio img[src*="texpromo-v2-f-PW2"], body.single-portfolio img[data-lazy-src*="texpromo-v2-f-PW2"] { content: url("/wp-content/uploads/2026/08/texpromo-f-PWm2b.png"); } body.single-portfolio img[src*="redmedyci-v2-f-PW1"], body.single-portfolio img[data-lazy-src*="redmedyci-v2-f-PW1"] { content: url("/wp-content/uploads/2026/08/redmedyci-f-PWm1b.png"); } body.single-portfolio img[src*="redmedyci-v2-f-PW2"], body.single-portfolio img[data-lazy-src*="redmedyci-v2-f-PW2"] { content: url("/wp-content/uploads/2026/08/redmedyci-f-PWm2b.png"); } body.single-portfolio img[src*="concaval-v4-f-PW1"], body.single-portfolio img[data-lazy-src*="concaval-v4-f-PW1"] { content: url("/wp-content/uploads/2026/08/concaval-f-PWm1c.png"); } body.single-portfolio img[src*="concaval-v4-f-PW2"], body.single-portfolio img[data-lazy-src*="concaval-v4-f-PW2"] { content: url("/wp-content/uploads/2026/08/concaval-f-PWm2c.png"); } body.single-portfolio img[src*="milockersv-v4-f-PW1"], body.single-portfolio img[data-lazy-src*="milockersv-v4-f-PW1"] { content: url("/wp-content/uploads/2026/08/milockersv-f-PWm1c.png"); } body.single-portfolio img[src*="milockersv-v4-f-PW2"], body.single-portfolio img[data-lazy-src*="milockersv-v4-f-PW2"] { content: url("/wp-content/uploads/2026/08/milockersv-f-PWm2c.png"); } body.single-portfolio img[src*="array-v3-f-PW1"], body.single-portfolio img[data-lazy-src*="array-v3-f-PW1"] { content: url("/wp-content/uploads/2026/08/array-f-PWm1b.png"); } body.single-portfolio img[src*="array-v3-f-PW2"], body.single-portfolio img[data-lazy-src*="array-v3-f-PW2"] { content: url("/wp-content/uploads/2026/08/array-f-PWm2b.png"); } body.single-portfolio img[src*="yardontime-v3-f-PW1"], body.single-portfolio img[data-lazy-src*="yardontime-v3-f-PW1"] { content: url("/wp-content/uploads/2026/08/yardontime-f-PWm1b.png"); } body.single-portfolio img[src*="yardontime-v3-f-PW2"], body.single-portfolio img[data-lazy-src*="yardontime-v3-f-PW2"] { content: url("/wp-content/uploads/2026/08/yardontime-f-PWm2b.png"); } body.single-portfolio img[src*="sunrise-v3-f-PW1"], body.single-portfolio img[data-lazy-src*="sunrise-v3-f-PW1"] { content: url("/wp-content/uploads/2026/08/sunrise-f-PWm1b.png"); } body.single-portfolio img[src*="sunrise-v3-f-PW2"], body.single-portfolio img[data-lazy-src*="sunrise-v3-f-PW2"] { content: url("/wp-content/uploads/2026/08/sunrise-f-PWm2b.png"); } body.single-portfolio img[src*="palavor-v3-f-PW1"], body.single-portfolio img[data-lazy-src*="palavor-v3-f-PW1"] { content: url("/wp-content/uploads/2026/08/palavor-f-PWm1b.png"); } body.single-portfolio img[src*="palavor-v3-f-PW2"], body.single-portfolio img[data-lazy-src*="palavor-v3-f-PW2"] { content: url("/wp-content/uploads/2026/08/palavor-f-PWm2b.png"); } body.single-portfolio img[src*="gmf-PW1"], body.single-portfolio img[data-lazy-src*="gmf-PW1"] { content: url("/wp-content/uploads/2026/08/gm-f-PWm1b.png"); } body.single-portfolio img[src*="gmf-PW2"], body.single-portfolio img[data-lazy-src*="gmf-PW2"] { content: url("/wp-content/uploads/2026/08/gm-f-PWm2b.png"); } body.single-portfolio img[src*="northlandf-PW"], body.single-portfolio img[data-lazy-src*="northlandf-PW"] { content: url("/wp-content/uploads/2026/08/northland-f-PWm1b.png"); } } /* * E-NOVATION (14179 EN / 14180 ES). Lienzo blanco y acento morado, asi que * manda el acento bajado a L26: #522D5A da 11.2:1 con texto blanco. Los * tableros y el showreel se renderizaron contra ese color exacto, asi que sin * esto se leerian como un recuadro pegado sobre la pagina. */ :root body.postid-14179.layout--switched, :root body.postid-14180.layout--switched { /* E-NOVATION: morado de marca bajado */ --mainBackground: #522D5A; --secondaryBackground: #45264C; } body.postid-14179 img[src*="f-PW"], body.postid-14179 img[src*="f-SQ"], body.postid-14179 img[data-lazy-src*="f-PW"], body.postid-14179 img[data-lazy-src*="f-SQ"], body.postid-14180 img[src*="f-PW"], body.postid-14180 img[src*="f-SQ"], body.postid-14180 img[data-lazy-src*="f-PW"], body.postid-14180 img[data-lazy-src*="f-SQ"] { background-color: #522D5A; } /* Debajo de 1200px el hueco de los tableros de telefono es casi cuadrado, asi * que el tablero ancho se pinta al 40%. Se cambia por el vertical. */ @media (max-width: 1199px) { body.single-portfolio img[src*="einnovacion-f-PW1"], body.single-portfolio img[data-lazy-src*="einnovacion-f-PW1"] { content: url("/wp-content/uploads/2026/08/einnovacion-f-PWm1.png"); } body.single-portfolio img[src*="einnovacion-f-PW2"], body.single-portfolio img[data-lazy-src*="einnovacion-f-PW2"] { content: url("/wp-content/uploads/2026/08/einnovacion-f-PWm2.png"); } } /* * TBOX — sistema de dibujo (posts 14342 EN / 14343 ES). El azul del propio * lienzo (#1E91CC) bajado a L15: 13.9:1 con texto blanco. El acento puro * nunca sirve de fondo (3.5:1). */ :root body.postid-14342.layout--switched, :root body.postid-14343.layout--switched { --mainBackground: #0A2F43; --secondaryBackground: #072330; } /* * TBox App (posts 14344 EN / 14345 ES). El navy de la cabecera de la app * (#0F4E85) bajado a L18: 13.4:1. */ :root body.postid-14344.layout--switched, :root body.postid-14345.layout--switched { --mainBackground: #093052; --secondaryBackground: #06223B; } /* Los tableros de TBOX llevan el fondo de la pagina cocido dentro, asi que * necesitan contain (si no, el hueco los recorta) y el mismo color detras. */ body.single-portfolio img[src*="tbox-SQ"], body.single-portfolio img[src*="tbox-PW"], body.single-portfolio img[data-lazy-src*="tbox-SQ"], body.single-portfolio img[data-lazy-src*="tbox-PW"] { object-fit: contain !important; background-color: #0A2F43; } /* Debajo de 1200px el hueco es casi cuadrado y el tablero ancho se pintaria * al 40%. Se cambia por el vertical, que sube el contenido a tamano legible. */ @media (max-width: 1199px) { body.single-portfolio img[src*="tbox-PW1"], body.single-portfolio img[data-lazy-src*="tbox-PW1"] { content: url("/wp-content/uploads/2026/08/tbox-PWm1.png"); } body.single-portfolio img[src*="tbox-PW2"], body.single-portfolio img[data-lazy-src*="tbox-PW2"] { content: url("/wp-content/uploads/2026/08/tbox-PWm2.png"); } } /* * LegalMente AI (posts 14360 EN / 14361 ES). El navy de su propia barra lateral * (#16205C) bajado a L13: 18,1:1 con texto blanco. */ :root body.postid-14360.layout--switched, :root body.postid-14361.layout--switched { --mainBackground: #0D1336; --secondaryBackground: #090D26; } body.single-portfolio img[src*="legalmente-SQ"], body.single-portfolio img[src*="legalmente-PW"], body.single-portfolio img[data-lazy-src*="legalmente-SQ"], body.single-portfolio img[data-lazy-src*="legalmente-PW"] { object-fit: contain !important; background-color: #0D1336; } @media (max-width: 1199px) { body.single-portfolio img[src*="legalmente-PW1"], body.single-portfolio img[data-lazy-src*="legalmente-PW1"] { content: url("/wp-content/uploads/2026/08/legalmente-PWm1.png"); } body.single-portfolio img[src*="legalmente-PW2"], body.single-portfolio img[data-lazy-src*="legalmente-PW2"] { content: url("/wp-content/uploads/2026/08/legalmente-PWm2.png"); } } /* * GoExto — identidad (posts 14394 EN / 14395 ES). El casi negro de las propias * laminas oscuras del manual (#0C0B16, 19,5:1). La ficha no puede favorecer el * color de ninguna de las tres rutas, asi que el fondo es neutro. */ :root body.postid-14394.layout--switched, :root body.postid-14395.layout--switched { --mainBackground: #0C0B16; --secondaryBackground: #08070F; } /* * Texpromo — identidad (posts 14396 EN / 14397 ES). El azul de establo de sus * propios polos (#242A36, 14,4:1). Distinto a proposito del lavanda claro de * su ficha de sitio web (13727 / 13728). */ :root body.postid-14396.layout--switched, :root body.postid-14397.layout--switched { --mainBackground: #242A36; --secondaryBackground: #1A1F28; } body.single-portfolio img[src*="goexto-SQ"], body.single-portfolio img[src*="goexto-PW"], body.single-portfolio img[data-lazy-src*="goexto-SQ"], body.single-portfolio img[data-lazy-src*="goexto-PW"] { object-fit: contain !important; background-color: #0C0B16; } body.single-portfolio img[src*="texpromo-SQ"], body.single-portfolio img[src*="texpromo-PW"], body.single-portfolio img[data-lazy-src*="texpromo-SQ"], body.single-portfolio img[data-lazy-src*="texpromo-PW"] { object-fit: contain !important; background-color: #242A36; } @media (max-width: 1199px) { body.single-portfolio img[src*="goexto-PW1"], body.single-portfolio img[data-lazy-src*="goexto-PW1"] { content: url("/wp-content/uploads/2026/08/goexto-PWm1.png"); } body.single-portfolio img[src*="goexto-PW2"], body.single-portfolio img[data-lazy-src*="goexto-PW2"] { content: url("/wp-content/uploads/2026/08/goexto-PWm2.png"); } body.single-portfolio img[src*="texpromo-PW1"], body.single-portfolio img[data-lazy-src*="texpromo-PW1"] { content: url("/wp-content/uploads/2026/08/texpromo-PWm1.png"); } body.single-portfolio img[src*="texpromo-PW2"], body.single-portfolio img[data-lazy-src*="texpromo-PW2"] { content: url("/wp-content/uploads/2026/08/texpromo-PWm2.png"); } } /* * eShip (14408 EN / 14409 ES). La marca son tres colores —verde #71C137, * azul #0071BB y azul marino #202D7F— y ninguno funciona de fondo. Bajo el * marino al mismo tono con L15%: #0E153D da 17.6:1 con texto blanco. Los * tableros y el video de la ficha se renderizaron contra ese color exacto, * asi que sin esto se leerian como un recuadro pegado sobre la pagina. */ :root body.postid-14408.layout--switched, :root body.postid-14409.layout--switched { /* eShip: marino de marca bajado */ --mainBackground: #0E153D; --secondaryBackground: #0B1132; } body.postid-14408 img[src*="eship-PW"], body.postid-14408 img[src*="eship-SQ"], body.postid-14408 img[src*="eship-L"], body.postid-14408 img[data-lazy-src*="eship-PW"], body.postid-14408 img[data-lazy-src*="eship-SQ"], body.postid-14408 img[data-lazy-src*="eship-L"], body.postid-14409 img[src*="eship-PW"], body.postid-14409 img[src*="eship-SQ"], body.postid-14409 img[src*="eship-L"], body.postid-14409 img[data-lazy-src*="eship-PW"], body.postid-14409 img[data-lazy-src*="eship-SQ"], body.postid-14409 img[data-lazy-src*="eship-L"] { background-color: #0E153D; } /* Los tableros de eShip llevan el fondo de la pagina cocido dentro, asi que * necesitan contain (si no, el hueco los recorta) y el mismo color detras. */ body.single-portfolio img[src*="eship-SQ"], body.single-portfolio img[src*="eship-PW"], body.single-portfolio img[data-lazy-src*="eship-SQ"], body.single-portfolio img[data-lazy-src*="eship-PW"] { object-fit: contain !important; background-color: #0E153D; } /* Debajo de 1200px el hueco es casi cuadrado y el tablero ancho (2.05:1) se * pintaria al 40%. Se cambia por el vertical, que sube el contenido a tamano * legible. Hay que repetir el selector para data-lazy-src: antes del cambio de * WP Rocket el src es el marcador de posicion y el selector por src no aplica. */ @media (max-width: 1199px) { body.single-portfolio img[src*="eship-PW1"], body.single-portfolio img[data-lazy-src*="eship-PW1"] { content: url("/wp-content/uploads/2026/08/eship-PWm1.png"); } body.single-portfolio img[src*="eship-PW2"], body.single-portfolio img[data-lazy-src*="eship-PW2"] { content: url("/wp-content/uploads/2026/08/eship-PWm2.png"); } } /* * Exotic Season (14422 EN / 14423 ES). El verde de marca #88C74A bajado a L14: * #233610 da 13,1:1 con texto blanco, y el propio verde encima conserva 6,4:1 * para acentos. El acento puro no sirve de fondo (2,0:1). */ :root body.postid-14422.layout--switched, :root body.postid-14423.layout--switched { --mainBackground: #233610; --secondaryBackground: #1A280C; } /* Los tableros llevan el fondo de la pagina cocido dentro: contain y el mismo * color detras, o el hueco los recorta. */ body.single-portfolio img[src*="exotic-SQ"], body.single-portfolio img[src*="exotic-PW"], body.single-portfolio img[src*="exotic-L"], body.single-portfolio img[data-lazy-src*="exotic-SQ"], body.single-portfolio img[data-lazy-src*="exotic-PW"], body.single-portfolio img[data-lazy-src*="exotic-L"] { object-fit: contain !important; background-color: #233610; } /* Debajo de 1200px el hueco de estos tableros es casi cuadrado (350x422) y el * tablero ancho (2,05:1) se pintaria al 41%. Aqui el vertical no es un recorte * del ancho sino el propio sitio capturado a 420px, que es lo que de verdad ve * quien entra desde el telefono. Repetir el selector para data-lazy-src: antes * del cambio de WP Rocket el src es el marcador de posicion. */ @media (max-width: 1199px) { body.single-portfolio img[src*="exotic-PW1"], body.single-portfolio img[data-lazy-src*="exotic-PW1"] { content: url("/wp-content/uploads/2026/08/exotic-PWm1.png"); } body.single-portfolio img[src*="exotic-PW2"], body.single-portfolio img[data-lazy-src*="exotic-PW2"] { content: url("/wp-content/uploads/2026/08/exotic-PWm2.png"); } } /* * Exotic Season — identidad (14436 EN / 14437 ES). Aqui NO hay que derivar * nada: #103B31 es el verde del propio archivo del logo, y da 12,4:1 con * blanco. Distinto a proposito del #233610 de su ficha de sitio web, que sale * del verde claro de la tienda. */ :root body.postid-14436.layout--switched, :root body.postid-14437.layout--switched { --mainBackground: #103B31; --secondaryBackground: #0B2A23; } /* Los tableros llevan ese verde cocido dentro: contain y el mismo color * detras, o el hueco los recorta. */ body.single-portfolio img[src*="exobrand-"], body.single-portfolio img[data-lazy-src*="exobrand-"] { object-fit: contain !important; background-color: #103B31; } /* Debajo de 1200px el hueco es casi cuadrado y el banner (2,05:1) se pintaria * al 41%. Se cambia por un recorte cuadrado centrado en la fruta. */ @media (max-width: 1199px) { body.single-portfolio img[src*="exobrand-PW1"], body.single-portfolio img[data-lazy-src*="exobrand-PW1"] { content: url("/wp-content/uploads/2026/08/exobrand-PWm1.png"); } body.single-portfolio img[src*="exobrand-PW2"], body.single-portfolio img[data-lazy-src*="exobrand-PW2"] { content: url("/wp-content/uploads/2026/08/exobrand-PWm2.png"); } } /* * ECOFRAN (14610 EN / 14611 ES). El azul de la marca es #091936, casi negro; * subido a #0F2B4C sigue leyendose como azul marino y da 13,9:1 con texto * blanco. Los tableros y la tarjeta se renderizaron con las esquinas en ese * mismo #0F2B4C exacto, asi que sin esto se leerian como un recuadro pegado * sobre la pagina. */ :root body.postid-14610.layout--switched, :root body.postid-14611.layout--switched { /* ECOFRAN: azul marino de marca subido */ --mainBackground: #0F2B4C; --secondaryBackground: #0A1E36; } body.postid-14610 img[src*="ecofran-f-PW"], body.postid-14610 img[src*="ecofran-f-SQ"], body.postid-14610 img[data-lazy-src*="ecofran-f-PW"], body.postid-14610 img[data-lazy-src*="ecofran-f-SQ"], body.postid-14611 img[src*="ecofran-f-PW"], body.postid-14611 img[src*="ecofran-f-SQ"], body.postid-14611 img[data-lazy-src*="ecofran-f-PW"], body.postid-14611 img[data-lazy-src*="ecofran-f-SQ"] { background-color: #0F2B4C; } /* Debajo de 1200px el hueco de estos tableros es casi cuadrado y el tablero * ancho (2,05:1) se pintaria al 41%. Se cambia por una version vertical con un * solo telefono. Repetir el selector para data-lazy-src: antes del cambio de * WP Rocket el src es el marcador de posicion. */ @media (max-width: 1199px) { body.single-portfolio img[src*="ecofran-f-PW1"], body.single-portfolio img[data-lazy-src*="ecofran-f-PW1"] { content: url("/wp-content/uploads/2026/09/ecofran-f-PWm1.png"); } body.single-portfolio img[src*="ecofran-f-PW2"], body.single-portfolio img[data-lazy-src*="ecofran-f-PW2"] { content: url("/wp-content/uploads/2026/09/ecofran-f-PWm2.png"); } } /* * VÁSQUEZ Y ASOCIADOS (14622 EN / 14623 ES). Azul del logotipo #004088, * subido a #0A3570 para separarlo del negro del sitio y dar 11,9:1 con texto * blanco. Los tableros y la tarjeta llevan las esquinas en ese mismo #0A3570. */ :root body.postid-14622.layout--switched, :root body.postid-14623.layout--switched { /* Vásquez y Asociados: azul de marca */ --mainBackground: #0A3570; --secondaryBackground: #072650; } body.postid-14622 img[src*="vasquez-f-PW"], body.postid-14622 img[src*="vasquez-f-SQ"], body.postid-14622 img[data-lazy-src*="vasquez-f-PW"], body.postid-14622 img[data-lazy-src*="vasquez-f-SQ"], body.postid-14623 img[src*="vasquez-f-PW"], body.postid-14623 img[src*="vasquez-f-SQ"], body.postid-14623 img[data-lazy-src*="vasquez-f-PW"], body.postid-14623 img[data-lazy-src*="vasquez-f-SQ"] { background-color: #0A3570; } @media (max-width: 1199px) { body.single-portfolio img[src*="vasquez-f-PW1"], body.single-portfolio img[data-lazy-src*="vasquez-f-PW1"] { content: url("/wp-content/uploads/2026/09/vasquez-f-PWm1.png"); } body.single-portfolio img[src*="vasquez-f-PW2"], body.single-portfolio img[data-lazy-src*="vasquez-f-PW2"] { content: url("/wp-content/uploads/2026/09/vasquez-f-PWm2.png"); } } /* * WOVIO (14807 EN / 14808 ES). Violeta del sitio #663CF6, bajado a #2A1C6E para que el texto blanco * lea (13:1). MARVIN (14809 EN / 14810 ES). Verde de marca #1F5C46 tal cual (8,3:1). * Las piezas llevan las esquinas en ese mismo color. */ :root body.postid-14807.layout--switched, :root body.postid-14808.layout--switched { /* Wovio: violeta de marca bajado */ --mainBackground: #2A1C6E; --secondaryBackground: #1D1350; } :root body.postid-14809.layout--switched, :root body.postid-14810.layout--switched { /* Marvin: verde de marca */ --mainBackground: #1F5C46; --secondaryBackground: #174534; } body.postid-14807 img[src*="wovio-f-PW"], body.postid-14807 img[src*="wovio-f-SQ"], body.postid-14807 img[data-lazy-src*="wovio-f-PW"], body.postid-14807 img[data-lazy-src*="wovio-f-SQ"], body.postid-14808 img[src*="wovio-f-PW"], body.postid-14808 img[src*="wovio-f-SQ"], body.postid-14808 img[data-lazy-src*="wovio-f-PW"], body.postid-14808 img[data-lazy-src*="wovio-f-SQ"] { background-color: #2A1C6E; } body.postid-14809 img[src*="marvin-f-PW"], body.postid-14809 img[src*="marvin-f-SQ"], body.postid-14809 img[data-lazy-src*="marvin-f-PW"], body.postid-14809 img[data-lazy-src*="marvin-f-SQ"], body.postid-14810 img[src*="marvin-f-PW"], body.postid-14810 img[src*="marvin-f-SQ"], body.postid-14810 img[data-lazy-src*="marvin-f-PW"], body.postid-14810 img[data-lazy-src*="marvin-f-SQ"] { background-color: #1F5C46; } @media (max-width: 1199px) { body.single-portfolio img[src*="wovio-f-PW1"], body.single-portfolio img[data-lazy-src*="wovio-f-PW1"] { content: url("/wp-content/uploads/2026/09/wovio-f-PWm1.png"); } body.single-portfolio img[src*="wovio-f-PW2"], body.single-portfolio img[data-lazy-src*="wovio-f-PW2"] { content: url("/wp-content/uploads/2026/09/wovio-f-PWm2.png"); } body.single-portfolio img[src*="marvin-f-PW1"], body.single-portfolio img[data-lazy-src*="marvin-f-PW1"] { content: url("/wp-content/uploads/2026/09/marvin-f-PWm1.png"); } body.single-portfolio img[src*="marvin-f-PW2"], body.single-portfolio img[data-lazy-src*="marvin-f-PW2"] { content: url("/wp-content/uploads/2026/09/marvin-f-PWm2.png"); } }