/* ============================================================================= PUPPY KING 305 — RITMO VISUAL DEL HOME Fondos en gradiente sutil y transiciones suaves entre secciones. (Aprobado por Vivian, 2026-08-29) EL PROBLEMA QUE RESUELVE 1. Cada seccion terminaba contra la siguiente en una linea recta: el ojo tropezaba. El sitio habla en curvas (footer curvo, pills) y las transiciones tienen que hablar ese idioma. 2. "Meet Our Puppies" y la seccion de contacto iban las dos en champagne #F3E9D7: se fundian en una sopa sin jerarquia. REGLA (la misma que en el header): ESTO ES EL DEFAULT, NO EL JEFE. Si en Elementor se configura un fondo en la seccion, ese fondo gana. QUIEN PINTA — el "anfitrion" Nuestros shortcodes salen dentro de una seccion de Elementor (seccion > columna > widget > nuestro
). En 1.8.1 el gradiente iba pintado en NUESTRO
, opaco y a 100vw: tapaba por completo el fondo de la seccion de Elementor, y un gradiente verde puesto ahi a mano no se veia. No era especificidad: era que el nuestro estaba ENCIMA. Ahora el gradiente por defecto lo pinta la SECCION DE ELEMENTOR que nos contiene (el anfitrion), con :where(...:has(.pk-section--x)), o sea con CERO puntos de especificidad, y nuestro
queda transparente. Dos cinturones para que lo de Elementor gane siempre: a) el CSS por elemento de Elementor (0,3,0) le gana a :where() (0,0,0); b) cuando una seccion lleva fondo configurado, Elementor lo marca en su data-settings con "background_background": nuestros defaults (fondo, banda y arco) llevan :not([data-settings*="background_background"]) y ni se aplican. Fuera de Elementor (un shortcode en el contenido de una pagina), nuestro
se pinta a si mismo, como antes. COMO FUNCIONA — tres variables por seccion --pk-flow-a tono con el que ARRANCA la seccion --pk-flow-b tono con el que TERMINA --pk-flow-prev tono con el que termino la seccion de ARRIBA (por defecto = a) El fondo son dos capas: el gradiente vertical a -> b, y encima, solo en los primeros --pk-flow-fade px, un fundido de prev -> a. LA CADENA DEL HOME, orden definitivo (todo tokens de puppy-king-brand.css): hero se queda (blob champagne difuminado) trust bar negro calido #1C1712 — ES el acento: sus dos bordes se quedan rectos a proposito. Fundir crema con negro daria una franja embarrada (carmelita). welcome cream-bright #FBF6EA -> cream #FAF5EC (L 0.93 -> 0.92) puppies FUNDIDO desde #FAF5EC en 110px, y cuerpo propio: cream-deep #F2E9DA (arena) -> champagne-light #F7EFE0 (L 0.82 -> 0.86) contacto CURVA de entrada: arch-bg #EFE0C2 (L 0.76) sobre el #F7EFE0 con que termina Puppies (dif. 0.11) -> champagne #F2E3C8 (L 0.79) testimonios FUNDIDO desde #F2E3C8 en 110px, cream #FAF5EC -> cream-bright #FBF6EA footer su curva (relleno #F3E9D7, L 0.82) sube desde el #FBF6EA de testimonios (dif. 0.11): la ultima colina EL PATRON: cada seccion entra por su tono mas hondo y se aclara hacia abajo. Asi la frontera de arriba es siempre un fundido o una curva con contraste, y la de abajo deja la siguiente colina en su sitio. LA CURVA (solo una, en la entrada del contacto): arco ancho y BAJO, eco exacto del footer (la misma cuadratica de un solo punto de control), 30px de banda y 15 de subida en escritorio; 18/9 en movil. Sin linea encima. REGLA ANTI-CARMELITA: ni un --pk-gold en un fondo (flowcheck.php). PARA VIVIAN (Advanced -> CSS Classes de la SECCION de Elementor, solo si cambia el orden; con el orden definitivo no hace falta ninguna): pk-flow-from-cream / -deep / -champagne de donde viene la seccion pk-flow-curve entrada con curva (maximo dos) pk-flow-flat entrada sin curva Y para quitar TODO el default de una seccion: ponerle un fondo en Elementor. ========================================================================== */ :root { --pk-flow-fade: 110px; /* zona de fundido en la entrada de cada seccion */ --pk-flow-curve-h: 30px; /* banda de la curva de entrada (ancha y baja): 15px de subida. Era 56/28 en 1.8.2 y se veia honda; Vivian la quiere tendida (1.8.3). */ } @media screen and (max-width: 767px) { :root { --pk-flow-fade: 70px; --pk-flow-curve-h: 18px; /* proporcionalmente mas baja en movil (9px de subida) */ } } /* ----------------------------------------------------------------------------- 1. LAS PALETAS — en nuestro
y en su anfitrion de Elementor Todo con :where(): cero especificidad. El orden del archivo decide: generico -> seccion concreta -> clases de Vivian. -------------------------------------------------------------------------------- */ /* Genericas, por la clase de fondo que ya llevan las secciones. */ :where(.pk-bg-cream, .elementor-top-section:has(.pk-bg-cream), .e-con.e-parent:has(.pk-bg-cream)) { --pk-flow-a: var(--pk-cream-bright); /* #FBF6EA */ --pk-flow-b: var(--pk-cream); /* #FAF5EC */ } :where(.pk-bg-deep, .elementor-top-section:has(.pk-bg-deep), .e-con.e-parent:has(.pk-bg-deep)) { --pk-flow-a: var(--pk-cream); /* #FAF5EC */ --pk-flow-b: var(--pk-cream-deep); /* #F2E9DA, arena */ } :where(.pk-bg-champagne, .elementor-top-section:has(.pk-bg-champagne), .e-con.e-parent:has(.pk-bg-champagne)) { --pk-flow-a: var(--pk-cream-warm); /* #F3E9D7 */ --pk-flow-b: var(--pk-champagne); /* #F2E3C8 */ } /* --- El home, seccion a seccion ------------------------------------------ */ /* Welcome: crema luminosa que baja apenas al crema base. */ :where(.pk-section--welcome, .elementor-top-section:has(.pk-section--welcome), .e-con.e-parent:has(.pk-section--welcome)) { --pk-flow-prev: var(--pk-cream-bright); --pk-flow-a: var(--pk-cream-bright); --pk-flow-b: var(--pk-cream); } /* Meet Our Puppies: fundido desde el crema de Welcome, cuerpo en arena, y se aclara al final para que la curva del contacto entre con contraste. (En el PHP lleva pk-bg-champagne, el tono viejo: esto lo pisa.) */ :where(.pk-section--puppies, .elementor-top-section:has(.pk-section--puppies), .e-con.e-parent:has(.pk-section--puppies)) { --pk-flow-prev: var(--pk-cream); --pk-flow-a: var(--pk-cream-deep); --pk-flow-b: var(--pk-champagne-light); } /* Contacto: entra por su tono mas hondo (la arena del arco del hero) y se aclara al champagne. Empezar por lo hondo es lo que hace visible el arco: con #F3E9D7 (dif. 0.004 con el final de Puppies) la curva no existia. */ :where(.pk-contact, .elementor-top-section:has(.pk-contact), .e-con.e-parent:has(.pk-contact)) { --pk-flow-prev: var(--pk-champagne-light); --pk-flow-a: var(--pk-arch-bg); --pk-flow-b: var(--pk-champagne); } /* Testimonios: fundido desde el champagne del contacto, crema, y salida en crema luminosa para que la colina del footer suba con contraste. Sus huellas van en un ::before al 3% (pk-sections.css), no en el fondo. */ :where(.pk-section--testimonials, .elementor-top-section:has(.pk-section--testimonials), .e-con.e-parent:has(.pk-section--testimonials)) { --pk-flow-prev: var(--pk-champagne); --pk-flow-a: var(--pk-cream); --pk-flow-b: var(--pk-cream-bright); } /* --- Las clases de Vivian: de donde viene la seccion, si cambia el orden -- */ :where(.pk-flow-from-cream, .pk-flow-from-cream .pk-section, .pk-flow-from-cream .pk-contact) { --pk-flow-prev: var(--pk-cream); } :where(.pk-flow-from-deep, .pk-flow-from-deep .pk-section, .pk-flow-from-deep .pk-contact) { --pk-flow-prev: var(--pk-cream-deep); } :where(.pk-flow-from-champagne, .pk-flow-from-champagne .pk-section, .pk-flow-from-champagne .pk-contact) { --pk-flow-prev: var(--pk-champagne); } /* ----------------------------------------------------------------------------- 2. QUIEN PINTA — (a) nuestro
cuando va solo Estas reglas si llevan (0,1,0): tienen que ganarle a los fondos planos de pk-sections.css (.pk-bg-cream) y pk-contact.css (.pk-contact), que pesan lo mismo y cargan antes. -------------------------------------------------------------------------------- */ .pk-section, .pk-contact { --pk-flow-prev: var(--pk-flow-a); background-color: var(--pk-flow-b); background-image: linear-gradient(180deg, var(--pk-flow-prev) 0%, var(--pk-flow-a) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-repeat: no-repeat; background-size: 100% var(--pk-flow-fade), 100% 100%; background-position: 0 0, 0 0; } /* La linea de arriba pone prev = a en nuestro
, y pisaria el prev concreto de la seccion 1 (que va con :where). Se repite aqui con el mismo peso (0,1,0), despues, para que mande. */ .pk-section--puppies { --pk-flow-prev: var(--pk-cream); } .pk-contact { --pk-flow-prev: var(--pk-champagne-light); } .pk-section--testimonials { --pk-flow-prev: var(--pk-champagne); } .pk-flow-from-cream .pk-section, .pk-flow-from-cream .pk-contact, .pk-section.pk-flow-from-cream, .pk-contact.pk-flow-from-cream { --pk-flow-prev: var(--pk-cream); } .pk-flow-from-deep .pk-section, .pk-flow-from-deep .pk-contact, .pk-section.pk-flow-from-deep, .pk-contact.pk-flow-from-deep { --pk-flow-prev: var(--pk-cream-deep); } .pk-flow-from-champagne .pk-section, .pk-flow-from-champagne .pk-contact, .pk-section.pk-flow-from-champagne, .pk-contact.pk-flow-from-champagne { --pk-flow-prev: var(--pk-champagne); } /* La curva de entrada, version "solo": banda lisa del color anterior en el fondo y un ::before enmascarado con el arco en el color de arranque. */ .pk-contact, .pk-flow-curve .pk-section, .pk-section.pk-flow-curve { background-image: linear-gradient(180deg, var(--pk-flow-prev) 0%, var(--pk-flow-prev) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-size: 100% var(--pk-flow-curve-h), 100% calc(100% - var(--pk-flow-curve-h)); background-position: 0 0, 0 var(--pk-flow-curve-h); } .pk-contact::before, .pk-flow-curve .pk-section::before, .pk-section.pk-flow-curve::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--pk-flow-curve-h); background-color: var(--pk-flow-a); /* viewBox 1440x30: arranca en y=26 en los bordes y sube hasta y=11 en el centro (15px de subida sobre 30 de banda). La mascara es solo la FORMA. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 26 Q720 -4 1440 26 L1440 30 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 26 Q720 -4 1440 26 L1440 30 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; pointer-events: none; } /* El contenido baja lo que mide la banda: la curva no se monta sobre nada. (Tambien dentro de Elementor: el arco esta en el anfitrion, pero la banda sigue ocupando la parte alta de la seccion.) */ .pk-contact { padding-top: calc(clamp(56px, 8vw, 110px) + var(--pk-flow-curve-h)); } .pk-flow-curve .pk-section, .pk-section.pk-flow-curve { padding-top: calc(clamp(56px, 7vw, 96px) + var(--pk-flow-curve-h)); } /* Menos colchon bajo VIEW ALL PUPPIES: el padding normal (hasta 96px) mas la banda de la curva lo dejaban flotando. */ .pk-section--puppies { padding-bottom: clamp(28px, 3.5vw, 44px); } /* ----------------------------------------------------------------------------- 2b. QUIEN PINTA — (b) dentro de Elementor: pinta el ANFITRION Anfitrion = la seccion de primer nivel (o contenedor) que contiene nuestro
, y SOLO si no lleva fondo configurado en Elementor. Todo con :where(): cero puntos. Nuestro
queda transparente. -------------------------------------------------------------------------------- */ :where(.elementor-top-section:not([data-settings*="background_background"]):has(.pk-section), .elementor-top-section:not([data-settings*="background_background"]):has(.pk-contact), .e-con.e-parent:not([data-settings*="background_background"]):has(.pk-section), .e-con.e-parent:not([data-settings*="background_background"]):has(.pk-contact)) { position: relative; background-color: var(--pk-flow-b); background-image: linear-gradient(180deg, var(--pk-flow-prev, var(--pk-flow-a)) 0%, var(--pk-flow-a) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-repeat: no-repeat; background-size: 100% var(--pk-flow-fade), 100% 100%; background-position: 0 0, 0 0; } /* Con curva: la banda lisa y el arco van tambien en el anfitrion. */ :where(.elementor-top-section:not([data-settings*="background_background"]):has(.pk-contact), .e-con.e-parent:not([data-settings*="background_background"]):has(.pk-contact), .pk-flow-curve.elementor-top-section:not([data-settings*="background_background"]):has(.pk-section), .pk-flow-curve.e-con:not([data-settings*="background_background"]):has(.pk-section)) { background-image: linear-gradient(180deg, var(--pk-flow-prev, var(--pk-flow-a)) 0%, var(--pk-flow-prev, var(--pk-flow-a)) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-size: 100% var(--pk-flow-curve-h), 100% calc(100% - var(--pk-flow-curve-h)); background-position: 0 0, 0 var(--pk-flow-curve-h); } :where(.elementor-top-section:not([data-settings*="background_background"]):has(.pk-contact), .e-con.e-parent:not([data-settings*="background_background"]):has(.pk-contact), .pk-flow-curve.elementor-top-section:not([data-settings*="background_background"]):has(.pk-section), .pk-flow-curve.e-con:not([data-settings*="background_background"]):has(.pk-section))::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: var(--pk-flow-curve-h); background-color: var(--pk-flow-a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 26 Q720 -4 1440 26 L1440 30 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 26 Q720 -4 1440 26 L1440 30 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; pointer-events: none; } /* Y nuestro
, dentro de Elementor, no pinta nada: ni fondo ni arco. (0,1,0) para ganarle a la version "solo" de arriba, que pesa lo mismo. */ :where(.elementor-top-section, .e-con) .pk-section, :where(.elementor-top-section, .e-con) .pk-contact { background-color: transparent; background-image: none; } :where(.elementor-top-section, .e-con) .pk-contact::before, :where(.elementor-top-section, .e-con) .pk-section::before { content: none; } /* Testimonios: su ::before son las huellas y SI tiene que existir. */ :where(.elementor-top-section, .e-con) .pk-section.pk-paw-pattern::before { content: ""; } /* Sin curva, por clase de Vivian: el anfitrion vuelve al fundido normal. */ :where(.pk-flow-flat.elementor-top-section:has(.pk-contact), .pk-flow-flat.e-con:has(.pk-contact)) { background-image: linear-gradient(180deg, var(--pk-flow-prev, var(--pk-flow-a)) 0%, var(--pk-flow-a) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-size: 100% var(--pk-flow-fade), 100% 100%; background-position: 0 0, 0 0; } :where(.pk-flow-flat.elementor-top-section:has(.pk-contact), .pk-flow-flat.e-con:has(.pk-contact))::before, .pk-flow-flat .pk-contact::before, .pk-contact.pk-flow-flat::before { content: none; } .pk-flow-flat .pk-contact, .pk-contact.pk-flow-flat { background-image: linear-gradient(180deg, var(--pk-flow-prev) 0%, var(--pk-flow-a) 100%), linear-gradient(180deg, var(--pk-flow-a) 0%, var(--pk-flow-b) 100%); background-size: 100% var(--pk-flow-fade), 100% 100%; background-position: 0 0, 0 0; padding-top: clamp(56px, 8vw, 110px); } /* ----------------------------------------------------------------------------- 3. SIN FRANJAS ENTRE SECCIONES MONTADAS EN ELEMENTOR Elementor pone 10px de padding a la columna y 20px de margen bajo el widget. Como ahora pinta el anfitrion, ya no son franjas del fondo del body; pero siguen siendo aire de mas. Se quitan alrededor de NUESTRAS secciones, en CUALQUIER widget (Shortcode, Text Editor, HTML...: en 1.8.1 solo casaba con .elementor-widget-shortcode, y un shortcode pegado en un Text Editor se quedaba con su colchon), y con la especificidad justa: (0,3,1) gana a la base de Elementor (0,3,0) y pierde con lo que se configure a mano (0,4,0). -------------------------------------------------------------------------------- */ div.elementor-widget-wrap:has(> .elementor-widget .pk-section), div.elementor-widget-wrap:has(> .elementor-widget .pk-contact), div.elementor-widget-wrap:has(> .elementor-widget .pk-hero), div.elementor-widget-wrap:has(> .elementor-widget .pk-trust-bar) { padding: 0; } div.elementor-widget:has(.pk-section, .pk-contact, .pk-hero, .pk-trust-bar) { margin-bottom: 0; } /* Un Text Editor envuelve lo que pega en

: que no dejen aire. */ :where(.elementor-widget-text-editor) > .elementor-widget-container > p:empty { display: none; } /* De borde a borde, como ya hacen el hero y el contacto: el CONTENIDO se alinea con ellos aunque la seccion de Elementor sea boxed. (El fondo ya no depende de esto: lo pinta el anfitrion a lo ancho.) */ .elementor-widget .pk-section, .elementor-widget .pk-trust-bar { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* 100vw + 20px de padding lateral = 1240 en una ventana de 1200 si el box-sizing es content-box. Patte trae el reset de Bootstrap, pero un componente propio no da por hecho ningun reset del padre. */ .pk-hero, .pk-trust-bar, .pk-section, .pk-contact { box-sizing: border-box; } /* ----------------------------------------------------------------------------- 4. CONTRASTE SOBRE LOS FONDOS NUEVOS El dorado legible (--pk-gold-ink #8A6F1E) da 4.4:1 sobre crema y 3.0:1 sobre el champagne #F2E3C8: en texto pequeno no llega a AA. Las etiquetas de 11-14px sobre estos fondos pasan al bronce --pk-gold-ink-deep, que da >= 4.5 en toda la familia crema. Solo esas; titulos y dorado decorativo no cambian. -------------------------------------------------------------------------------- */ .pk-contact .pk-contact__eyebrow, .pk-contact .pk-contact__fact-label, .pk-section--welcome .pk-welcome__feature-title, .pk-section--testimonials .pk-testimonial__role { color: var(--pk-gold-ink-deep); } .pk-contact .pk-contact__eyebrow::before { background-color: var(--pk-gold-ink-deep); }