/* ========================================================================== Adornos dibujados a mano del sitio público: gotitas, corazones, caminos punteados ondulados, nubes, ondas y manchas de los mockups de Marina (12090, 12091, 12103 y 12105; ticket 291820). Marina pidió el diseño IDÉNTICO al mockup, adornos incluidos. Cada adorno es un vacío y aria-hidden que la sección coloca con posición absoluta (variables --x/--y/--w/--r). Los dibujos viven como SVG en img/publico/deco: así no se repite el trazo en cada página y el HTML queda limpio. ========================================================================== */ .deco { position: absolute; left: var(--x, auto); right: var(--xr, auto); top: var(--y, auto); bottom: var(--yb, auto); width: calc(var(--w, 48px) * var(--escala, 1)); aspect-ratio: var(--ar, 1); transform: rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); background: no-repeat center / 100% 100%; pointer-events: none; z-index: var(--z, 2); } .deco--gotas-amarillo { background-image: url("../img/publico/deco/gotas-amarillo.svg"); --ar: 64 / 60; } .deco--gotas-coral { background-image: url("../img/publico/deco/gotas-coral.svg"); --ar: 64 / 60; } .deco--gotas-azul { background-image: url("../img/publico/deco/gotas-azul.svg"); --ar: 64 / 60; } .deco--gotas-celeste { background-image: url("../img/publico/deco/gotas-celeste.svg"); --ar: 64 / 60; } .deco--gotas-blanco { background-image: url("../img/publico/deco/gotas-blanco.svg"); --ar: 64 / 60; } .deco--corazon { background-image: url("../img/publico/deco/corazon-coral.svg"); } .deco--corazon-blanco { background-image: url("../img/publico/deco/corazon-blanco.svg"); } .deco--lazo { background-image: url("../img/publico/deco/corazon-lazo.svg"); --ar: 130 / 80; } .deco--camino { background-image: url("../img/publico/deco/camino.svg"); --ar: 10 / 1; } .deco--camino-bajada { background-image: url("../img/publico/deco/camino-bajada.svg"); --ar: 10 / 1; } .deco--camino-lazo { background-image: url("../img/publico/deco/camino-lazo.svg"); } .deco--camino-lazo-subida { background-image: url("../img/publico/deco/camino-lazo-subida.svg"); } .deco--camino-lema { background-image: url("../img/publico/deco/camino-lema.svg"); --ar: 72 / 14; } .deco--camino-subida { background-image: url("../img/publico/deco/camino-subida.svg"); --ar: 10 / 1; } .deco--flor { background-image: url("../img/publico/deco/flor.svg"); --ar: 80 / 120; } .deco--hojas { background-image: url("../img/publico/deco/hojas.svg"); --ar: 80 / 112; } .deco--mancha-celeste { background-image: url("../img/publico/deco/mancha-celeste.svg"); } .deco--mancha-rosa { background-image: url("../img/publico/deco/mancha-rosa.svg"); } .deco--punto { border-radius: 50%; background: var(--c, #F0735F); } /* Fotos con orilla "a mano", como las del mockup: la máscara recorta la foto y la sombra la pone el contenedor (drop-shadow sigue la forma). */ .foto-mano { filter: drop-shadow(0 8px 18px rgba(51, 66, 74, .16)); } .foto-mano img { -webkit-mask: url("../img/publico/deco/forma-foto.svg") no-repeat center / 100% 100%; mask: url("../img/publico/deco/forma-foto.svg") no-repeat center / 100% 100%; border-radius: 0 !important; box-shadow: none !important; } /* En pantallas chicas los adornos se hacen más chicos y se quitan los que estorbarían al texto (cada sección marca los suyos con .deco--solo-ancho). */ @media (max-width: 767.98px) { .deco { width: calc(var(--w, 48px) * var(--escala, 1) * .7); } .deco--solo-ancho { display: none; } } /* Logo principal (_LogoPiruli): archivos originales del brandbook, escalados con font-size del contenedor (1em = alto de las letras). El PNG del wordmark trae aire transparente alrededor; los márgenes negativos lo compensan para que el pajarito quede pegado como en el logo oficial. */ .logo-piruli { display: inline-flex; align-items: flex-end; gap: .1em; line-height: 1; } .logo-piruli .logo-piruli-ave { height: 1.1em; width: auto; display: block; } .logo-piruli .logo-piruli-texto { height: 1.5em; width: auto; display: block; margin: -.26em -.34em -.25em -.27em; } /* --------------------------------------------------------------- pie -- */ /* Mockup 12091: ondas celestes arriba y abajo, adornos junto a los títulos y un paisaje al pie (colinas, flor, caminito y pajarito). */ .pb-pie::before { height: 64px !important; border-radius: 0 !important; inset: 0 0 auto !important; background: url("../img/publico/deco/onda-celeste-arriba.svg") no-repeat top / 100% 100% !important; } .pb-pie-logo { font-size: clamp(3rem, 5vw, 4.4rem); color: inherit; } .pb-pie-marca { position: relative; } .pb-pie-sublema { font-family: var(--font-script) !important; font-weight: 400; font-size: 1.55rem !important; color: #5B8FD6 !important; } .pb-pie-deco-logo { --w: 44px; --x: -1.6rem; --y: -1.4rem; --r: -60deg; } .pb-pie-deco-lema { --w: 36px; --x: -1.8rem; --yb: -.6rem; --r: -150deg; } .pb-pie h2 { position: relative; display: inline-block; } .pb-pie-deco-h2 { --w: 30px; --xr: -40px; --y: -10px; --r: 70deg; } .pb-pie-deco-corazon { --w: 30px; --xr: -44px; --y: -14px; --r: 10deg; } .pb-pie-grid { position: relative; z-index: 1; padding-bottom: 1rem !important; } .pb-pie-paisaje { position: relative; height: 130px; margin-top: -40px; pointer-events: none; } .pb-pie-colina { position: absolute; bottom: 0; background: no-repeat bottom / 100% 100%; } .pb-pie-colina--rosa { left: 0; width: 42%; height: 120px; background-image: url("../img/publico/deco/colina-rosa.svg"); } .pb-pie-colina--amarilla { right: 0; width: 24%; height: 90px; background-image: url("../img/publico/deco/colina-amarilla.svg"); } .pb-pie-hojas { --w: 56px; --x: 3%; --yb: 0; } .pb-pie-flor { --w: 42px; --x: calc(3% + 70px); --yb: 0; } .pb-pie-camino { --w: 64%; --x: 22%; --yb: 22px; --ar: 400 / 44; --z: 1; } .pb-pie-ave { position: absolute; right: 6%; bottom: 36px; width: 84px !important; height: auto; margin: 0 !important; z-index: 2; } .pb-pie-deco-ave { --w: 36px; --xr: calc(6% + 84px); --yb: 110px; --r: -50deg; } .pb-pie-deco-corazon-ave { --w: 40px; --xr: calc(6% - 20px); --yb: 118px; --r: 12deg; } .pb-pie-cierre { position: relative; border-radius: 0 !important; padding-top: 1.1rem !important; } .pb-pie-cierre::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; background: url("../img/publico/deco/onda-celeste.svg") no-repeat bottom / 100% 100%; } @media (max-width: 767.98px) { .pb-pie-paisaje { height: 110px; margin-top: 0; } .pb-pie-camino, .pb-pie-colina--rosa { width: 70%; } .pb-pie-colina--amarilla { width: 50%; } } /* El corazón va pegado a la última palabra, nunca solo en otro renglón. */ .pb-pie-lema { white-space: nowrap; } @media (max-width: 380px) { .pb-pie-lema { white-space: normal; } } /* Nav del mockup 12090: logo dibujado (pajarito + Piruli con puntos) y enlaces en peso normal. */ .pb-brand .logo-piruli { font-size: 2.2rem; } .pb-nav-links a { font-weight: 500; } /* Marina, 30-sep: adornos finitos y chicos, nunca encima de las letras. Gotitas y corazones se dibujan a 3/4 de su medida nominal. */ .deco[class*="deco--gotas"] { --escala: .72; } .deco--corazon { --escala: .8; } /* "Tienda" del nav con su bolsita coral, en azul como en el mockup 94555. */ .pb-nav-links a.pb-nav-tienda { display: inline-flex; align-items: center; gap: .3rem; color: #3E6CB0; } .pb-nav-links a.pb-nav-tienda:hover { color: var(--brand-coral); } .pb-nav-tienda svg { flex: none; margin-top: -.15em; } /* Misma bolsita junto a Tienda en la columna Explora del pie (Marina, 7-oct). */ .pb-pie-links a.pb-pie-tienda { display: inline-flex; align-items: center; gap: .3rem; } .pb-pie-tienda svg { flex: none; margin-top: -.15em; }