` es hijo directo de * `.wp-site-blocks` (class-marco.php), y el tema le pone a ese envoltorio * `padding-left/right: var(--wp--custom--spacing--outer)` = `max(1.5rem, 3vw)`. La cabecera del * sitio se escapa porque su grupo lleva `alignfull` + `has-background`; nuestro `

` no lleva * ninguna de las dos, y no se le ponen porque `alignfull` arrastraría también al texto de la ficha. * * Medido en vivo en una ficha del diseño A: la barra turquesa del tema iba de 0 a 412 px y nuestra * banda de arriba de 24 a 388. Un escalón visible, y que CRECE con la pantalla porque el relleno es * `3vw`: 24 px por lado en un teléfono, cerca de 58 px a 1920. * * NO ALCANZA CON EL MARGEN NEGATIVO. Probado en vivo: mueve la caja pero no la ensancha, porque el * ancho lo fijamos nosotros mismos —`width: 100%` acá arriba y en el carrusel—, así que ese 100% * se seguía midiendo contra el contenido ya sangrado. * Quedaba de 0 a 364 en vez de 0 a 412: el escalón cambiaba de lado en vez de desaparecer. Por eso * va también el `width: auto`. Con las dos declaraciones: 0 a 412 y sin scroll horizontal. * * VA COLGADO DE `.wp-site-blocks` A PROPÓSITO: ese div lo imprime `Marco::abrir()` sólo en modo * bloques. En `elementor` y en `compat` no hay relleno que cancelar, y un margen negativo suelto * sacaría la banda fuera de la pantalla. El `, 0px` de respaldo cubre el día que el tema deje de * definir la variable. * * Y va DESPUÉS de las dos reglas de portada a propósito: tiene la misma especificidad que ellas, * así que lo que decide es el orden del archivo. */ /* Sólo el B saca la portada a los bordes: allá la foto ES la pantalla. El A la deja dentro de la columna, por lo que se explica arriba en `.rental-ficha--a .rental-ficha__vitrina`. */ .wp-site-blocks .rental-ficha--b .rental-b__portada { margin-inline: calc(var(--wp--custom--spacing--outer, 0px) * -1); width: auto; } /* A lo ancho: sin esquinas redondeadas ni márgenes, la foto llega a los dos bordes. */ .rental-carrusel--portada .rental-carrusel__marco { border-radius: 0; } /* Y a lo alto: es lo primero que se ve, así que ocupa casi la pantalla. El `clamp` deja un piso de 320 px para que en un teléfono apaisado no quede una franja. */ .rental-ficha--b .rental-carrusel--portada .rental-carrusel__lamina img { height: clamp(320px, 74vh, 760px); } /* La tira de miniaturas sí se alinea con el resto de la página, no con el borde de la pantalla. */ .rental-carrusel--portada .rental-carrusel__tiras { max-width: var(--rental-ancho); margin: 0 auto; padding: 10px clamp(16px, 4vw, 32px); } /* ---- la barra que acompaña al bajar ---- */ .rental-ficha--b .rental-b__barra { position: sticky; top: 0; /* Por encima de la ficha y por debajo de cualquier menú desplegable del sitio. */ z-index: 20; border-bottom: 1px solid var(--rental-linea); /* Fondo y tinta explícitos: la barra flota sobre las fotos y sobre el texto, así que no puede heredar un fondo transparente. */ background: #fff; color: #1d2327; } .rental-ficha--b .rental-b__barra-ancho { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; max-width: var(--rental-ancho); margin: 0 auto; padding: .65rem clamp(16px, 4vw, 32px); } .rental-ficha--b .rental-b__barra-precio { /* Empuja los datos y el botón a la derecha sin necesidad de un `justify-content` que se rompería cuando la fila envuelve. */ margin-right: auto; } .rental-ficha--b .rental-b__precio { margin: 0; color: var(--rental-acento-texto); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 700; line-height: 1.15; } .rental-ficha--b .rental-b__precio--consultar { font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 600; } .rental-ficha--b .rental-b__barra-nota { margin: .1rem 0 0; color: var(--rental-tinta-suave); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; } .rental-ficha--b .rental-ficha__datos--barra { margin: 0; gap: .4rem 1.1rem; font-size: .9rem; } .rental-ficha--b .rental-b__cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; /* 44 px de alto MÍNIMO. Con el relleno solo daba 33 en el teléfono, por debajo del objetivo táctil que recomienda WCAG: el único botón de toda la página no puede ser el más difícil de acertar. El `min-height` no lo estira si la letra crece, sólo pone el piso. */ min-height: 44px; padding: .5em 1.4em; border-radius: 999px; background: var(--rental-acento); color: var(--rental-sobre-acento); font-size: .95rem; line-height: 1.2; text-decoration: none; } .rental-ficha--b .rental-b__cta:hover, .rental-ficha--b .rental-b__cta:focus-visible { /* Sin cambiar de color: el acento es uno solo. Se oscurece con una capa. */ background-image: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)); color: #fff; } .rental-ficha--b .rental-b__cta:focus-visible { outline: 3px solid var(--rental-acento); outline-offset: 2px; } /* * LA FILA DE DATOS DEL DISEÑO B ESTÁ ESCRITA DOS VECES, Y ACÁ SE ELIGE CUÁL SE VE. * * ÉSTE ERA EL DEFECTO: por debajo de 720 px la barra suelta la fila para no ocupar tres renglones * pegados arriba, y hasta la 1.15 no había ninguna otra copia. O sea que en el teléfono * "3 dormitorios · 2.5 baños · 285.85 m² · 3 parqueos" no salía EN NINGUNA PARTE de la página. El * comentario que había acá decía que la fila "igual está completa unos centímetros más abajo, en * el cuerpo de la ficha": era mentira, y una mentira cómoda, porque describe justo lo que uno * esperaría que pasara. * * Ahora `Ficha::encabezado()` pinta la fila también en el cuerpo (`--cuerpo`) y estas dos reglas * son excluyentes: por debajo de 720 se ve la del cuerpo, por encima la de la barra. NUNCA las * dos. Y `display:none` saca la que sobra también del árbol de accesibilidad, así que un lector * de pantalla lee la fila una sola vez. * * OJO CON EL PAR, porque ya falló una vez: el complemento de `min-width: 720px` NO es * `max-width: 719px`. Entre los dos queda una franja —719.5 px, por ejemplo— donde no aplica * ninguna de las dos reglas y la fila sale DUPLICADA, en la barra y en el cuerpo, con la barra * partida en tres renglones que es justo lo que se venía a evitar. Y un ancho con decimales no * es rebuscado: sale con el zoom del navegador, con el escalado de pantalla de Windows y con * cualquier ventana de ancho impar en una pantalla Retina (ancho CSS = píxeles del aparato / 2). * Por eso el segundo bloque se escribe como la NEGACIÓN del primero, que es complementaria por * definición y no deja franja posible. Un `max-width: 719.98px` también tapa el caso, pero hay * que acordarse de por qué está el decimal; esto se explica solo. * * (Se prueba en un segundo: abrir el diseño B y estirar la ventana pasando por 720 px. La fila * tiene que saltar de abajo del título a la barra, sin aparecer dos veces ni desaparecer.) */ @media (min-width: 720px) { .rental-ficha--b .rental-ficha__datos--cuerpo { display: none; } } @media not all and (min-width: 720px) { .rental-ficha--b .rental-ficha__datos--barra { display: none; } /* Un solo renglón (~52 px): precio a la izquierda y botón a la derecha. */ .rental-ficha--b .rental-b__barra-ancho { flex-wrap: nowrap; gap: .75rem; } .rental-ficha--b .rental-b__cta { padding: .5em 1.1em; font-size: .9rem; } } /* ---- una sola columna de lectura ---- */ .rental-ficha--b .rental-b__lectura { max-width: var(--rental-lectura); margin: 0 auto; padding-bottom: clamp(32px, 6vw, 64px); } .rental-ficha--b .rental-ficha__encabezado { padding: clamp(24px, 5vw, 44px) 0 0; } .rental-ficha--b .rental-ficha__titulo { font-size: clamp(1.6rem, 3.6vw, 2.4rem); } .rental-ficha--b .rental-ficha__seccion { margin: clamp(30px, 5vw, 48px) 0; } /* La descripción respira más que en el A: es la única columna, y es lo que se está leyendo. */ .rental-ficha--b .rental-ficha__descripcion { font-size: 1.02rem; line-height: 1.75; } /* ---- amenidades en cuadrícula ---- */ /* * En el A son una lista en dos o tres columnas anchas. Acá, dentro de una columna de 70 * caracteres, entran tres columnas de ~185 px y se leen como una cuadrícula de verdad: de un * vistazo se ve CUÁNTAS hay, que es la información que da una lista de amenidades. */ .rental-ficha--b .rental-ficha__amenidades { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem 1rem; } /* ---- el cierre: mapa + formulario ---- */ .rental-ficha--b .rental-b__cierre { padding: clamp(32px, 5vw, 60px) 0; border-top: 1px solid var(--rental-linea); background: var(--rental-fondo); /* El botón de la barra baja hasta acá con un salto de ancla; sin esto, la propia barra pegajosa taparía el título del bloque al que acaba de llevar. */ scroll-margin-top: 5.5rem; } .rental-ficha--b .rental-b__cierre-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; } .rental-ficha--b .rental-b__cierre .rental-ficha__seccion { margin: 0; } @media (min-width: 900px) { /* El mapa al lado, no encima: la tarjeta del formulario queda ancha, que es lo que la distingue de la columna angosta y pegajosa del diseño A. */ .rental-ficha--b .rental-b__cierre-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } /* ---------------------------------------------------------------- 6. la barra de marca */ /* * ÚLTIMO RECURSO Y NADA MÁS. La ficha usa el marco REAL del sitio (ver includes/class-marco.php); * esto sólo se pinta si no aparece ninguno —ni partes de plantilla de bloques, ni ubicaciones de * Elementor, ni `header.php` del tema—. Los valores salen de la plantilla #5809 exportada: * fondo #4CB9B4, logo blanco a 235 px, enlaces blancos separados 35 px. * * (Acá vivían tres reglas que escondían el `#header`, el `#headerimg` y el primer `

` de la * cabecera de fábrica de WordPress. Ya no hacen falta y era peligroso dejarlas: `#header` y * `#footer` son ids genéricos, y el día que el tema tuviera una cabecera propia con ese id, esas * reglas la habrían escondido. La ficha ya no imprime nunca el respaldo de fábrica.) */ .rental-barra { background: #4cb9b4; } .rental-barra__ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 14px 20px; } .rental-barra__logo img { display: block; width: 235px; max-width: 60vw; height: auto; } .rental-barra__nombre { color: #fff; font-size: 20px; font-weight: 600; letter-spacing: .01em; } .rental-barra__menu { display: flex; flex-wrap: wrap; gap: 35px; } .rental-barra__menu a { color: #fff; font-size: 16px; line-height: 1.2; text-decoration: none; } .rental-barra__menu a:hover, .rental-barra__menu a:focus-visible { text-decoration: underline; } @media (max-width: 640px) { .rental-barra__ancho { justify-content: center; text-align: center; } .rental-barra__menu { gap: 18px; justify-content: center; } } /* ---------------------------------------------------------------- el botón de WhatsApp Aparece cuando hay número configurado (CRM Rental → Ajustes → WhatsApp). Es el único botón de contacto cuando no hay formulario, así que tiene que verse como un botón y no como un enlace más: peso visual, 44 px de alto mínimo —el objetivo táctil que recomienda WCAG— y el verde de WhatsApp, que la gente reconoce sin leer. El verde va escrito y no sale del acento de la marca a propósito: es el color de un servicio ajeno, y cambiarlo por el dorado haría que el botón deje de parecer lo que es. */ .rental-ficha__whatsapp { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; margin-top: .85rem; padding: .6em 1.2em; border-radius: 999px; background: #25d366; color: #08301b; font-size: .95rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background .15s ease; } .rental-ficha__whatsapp:hover, .rental-ficha__whatsapp:focus-visible { background: #1eb455; color: #08301b; text-decoration: none; } .rental-ficha__whatsapp:focus-visible { outline: 3px solid var(--rental-acento-texto); outline-offset: 2px; } .rental-ficha__whatsapp-icono { flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .rental-ficha__whatsapp { transition: none; } } :root{--joinchat-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3.516%203.516c4.686-4.686%2012.284-4.686%2016.97%200s4.686%2012.283%200%2016.97a12%2012%200%200%201-13.754%202.299l-5.814.735a.392.392%200%200%201-.438-.44l.748-5.788A12%2012%200%200%201%203.517%203.517zm3.61%2017.043.3.158a9.85%209.85%200%200%200%2011.534-1.758c3.843-3.843%203.843-10.074%200-13.918s-10.075-3.843-13.918%200a9.85%209.85%200%200%200-1.747%2011.554l.16.303-.51%203.942a.196.196%200%200%200%20.219.22zm6.534-7.003-.933%201.164a9.84%209.84%200%200%201-3.497-3.495l1.166-.933a.79.79%200%200%200%20.23-.94L9.561%206.96a.79.79%200%200%200-.924-.445l-2.023.524a.797.797%200%200%200-.588.88%2011.754%2011.754%200%200%200%2010.005%2010.005.797.797%200%200%200%20.88-.587l.525-2.023a.79.79%200%200%200-.445-.923L14.6%2013.327a.79.79%200%200%200-.94.23z%22%2F%3E%3C%2Fsvg%3E");--joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif}.joinchat{--sep:20px;--bottom:var(--sep);--s:60px;--h:calc(var(--s) / 2);--header:max(50px,var(--s) * 1.16667);--vh:100vh;--ch:142;--cs:70%;--cl:49%;--bw:1;--text:hsl(0deg 0% clamp(0%,var(--bw) * 1000%,100%)/clamp(70%,var(--bw) * 1000%,100%));--hover:hsl(var(--ch) var(--cs) calc(20% + var(--cl)));--hsl:var(--ch) var(--cs) var(--cl);--color:hsl(var(--hsl));--dark:hsl(var(--ch) var(--cs) calc(-10% + var(--cl)));--bg:hsl(var(--hsl)/4%);--msg:var(--color);color:var(--text);display:none;position:fixed;z-index:9000;right:var(--sep);bottom:var(--bottom);font:16px/1.625em var(--joinchat-font);letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;transform:scale3d(0,0,0);transform-origin:calc(var(--s) / -2) calc(var(--s) / -4);-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0);contain:style}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block;transform:scaleX(1)}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--chatbox:not(.joinchat--noanim){transform-origin:0 0;animation-timing-function:ease-in-out}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw) * 1%)/90%)}}.joinchat__button{position:absolute;z-index:2;bottom:8px;right:8px;height:var(--s);width:var(--s);background:#25d366 var(--joinchat-ico) 50%/60% no-repeat;color:inherit;border-radius:50%;box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);cursor:pointer;transition:background-color .2s linear}.joinchat__button:hover{background-color:#128c7e}.joinchat:has(.joinchat__chatbox) .joinchat__button:hover{transition-duration:1.5s}.joinchat__button:active{background-color:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px}.joinchat--chatbox .joinchat__button{display:none}.joinchat__button__ico{position:absolute;inset:0;display:flex;border-radius:50%;overflow:hidden;color:var(--text)!important}.joinchat__button__ico svg{width:var(--ico-size,100%);height:var(--ico-size,100%);margin:calc(.5 * (100% - var(--ico-size, 1)))}.joinchat__button:has(.joinchat__button__ico){background:var(--color);box-shadow:1px 6px 24px 0 hsl(var(--ch) var(--cs) calc(-10% + var(--cl))/24%)}.joinchat__button:has(.joinchat__button__ico):active,.joinchat__button:has(.joinchat__button__ico):hover{background:var(--hover)}.joinchat__button__image{position:absolute;inset:1px;border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img,.joinchat__button__image video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--img .joinchat__button__image{opacity:1;animation:none}.joinchat__badge{position:absolute;z-index:2;bottom:calc(-8px + var(--s));right:4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat--left .joinchat__badge{right:auto;left:calc(-8px + var(--s))}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(-16px + var(--h));right:calc(16px + var(--s));max-width:calc(100vw - 45px - var(--s));height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgba(0,0,0,.8);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{width:-moz-max-content;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:calc(16px + var(--s))}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;z-index:2;bottom:calc(24px + var(--s));right:8px;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgba(0,0,0,.8);text-align:center;white-space:nowrap;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) .5s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(-6px + var(--h));border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:8px;right:auto}.joinchat--left .joinchat__qr:after{left:calc(-6px + var(--h));right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0;image-rendering:pixelated}.joinchat__chatbox{content-visibility:hidden;contain-intrinsic-size:auto 400px auto 240px;display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep) * 2);max-width:400px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(2px + var(--h));background:#fff linear-gradient(180deg,var(--color),var(--color) var(--header),var(--bg) var(--header),var(--bg));box-shadow:0 2px 6px 0 rgba(0,0,0,.5);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:opacity 80ms,transform 0s linear 81ms}[dir=rtl] .joinchat__chatbox{text-align:right}.joinchat--chatbox .joinchat__chatbox{content-visibility:visible;opacity:1;transform:scaleX(1);transition:opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__chatbox{right:auto;left:0}.joinchat--dark .joinchat__chatbox{background:#1a1a1a linear-gradient(180deg,var(--dark),var(--dark) var(--header),var(--bg) var(--header),var(--bg))}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat__header span{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__header a{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__header a svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__header a:active,.joinchat__header a:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}.joinchat__wa{display:block;fill:currentcolor;opacity:.8}.joinchat__close{--size:34px;position:absolute;top:calc(50% - var(--size) / 2);right:24px;width:var(--size);height:var(--size);border-radius:50%;background:rgba(0,0,0,.4) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M24%202.4%2021.6%200%2012%209.6%202.4%200%200%202.4%209.6%2012%200%2021.6%202.4%2024l9.6-9.6%209.6%209.6%202.4-2.4-9.6-9.6z%22%2F%3E%3C%2Fsvg%3E") 50%/12px no-repeat;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgba(0,0,0,.6)}.joinchat__close:active{background-color:rgba(0,0,0,.7)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__scroll{display:flex;flex-direction:column-reverse;overflow:hidden scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.joinchat__scroll::-webkit-scrollbar{width:4px;background:rgb(0 0 0/0)}.joinchat__scroll::-webkit-scrollbar-thumb{border-radius:2px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__scroll{background:hsl(var(--hsl)/2%);backdrop-filter:blur(10px)}.joinchat__scroll:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2)}.joinchat__content{display:flex;flex-direction:column;width:calc(100% + 4px);padding:20px 0 8px}.joinchat__content:after{content:"";display:block;position:absolute;bottom:0;left:0;right:4px;height:calc(20px + var(--s));background:#fff linear-gradient(180deg,var(--bg),var(--bg));-webkit-mask-image:linear-gradient(rgb(0 0 0/0),rgb(0 0 0/60%) 25%,rgb(0 0 0/92%) 70%,rgb(0 0 0/100%) 95%,rgb(0 0 0/100%));mask-image:linear-gradient(rgb(0 0 0/0),rgb(0 0 0/60%) 25%,rgb(0 0 0/92%) 70%,rgb(0 0 0/100%) 95%,rgb(0 0 0/100%));pointer-events:none}.joinchat--dark .joinchat__content:after{background-color:#1a1a1a}.joinchat__open{position:sticky;z-index:2;bottom:8px;align-self:flex-end;display:flex;flex-direction:row;min-width:var(--s);height:var(--s);margin:0 8px;background:var(--color);color:inherit;border-radius:var(--h);box-shadow:0 1px 2px 0 rgba(0,0,0,.3);overflow:hidden;cursor:pointer;transition:background-color .2s linear}[dir=rtl] .joinchat__open{align-self:flex-start}.joinchat__open:active,.joinchat__open:hover{background:var(--hover)}.joinchat--left .joinchat__open{align-self:flex-start}[dir=rtl] .joinchat--left .joinchat__open{align-self:flex-end}.joinchat--optout .joinchat__open{background-color:#999;pointer-events:none}.joinchat__open__icon{flex-shrink:0;width:var(--s);height:var(--s);max-width:var(--s);padding:calc(var(--s) * .18);margin:0;overflow:hidden}[dir=rtl] .joinchat__open__icon{transform:rotateY(180deg)}.joinchat__open__icon path{fill:none!important;stroke:var(--text)!important;stroke-linecap:round;stroke-width:33px;animation:none}.joinchat__open__icon .joinchat__pa{--stroke:1097}.joinchat__open__icon .joinchat__pb{--stroke:1020}.joinchat--chatbox .joinchat__open__icon path{stroke-dasharray:var(--stroke);stroke-dashoffset:var(--stroke);animation:joinchat_send_svg 6s .2s ease-in-out infinite}.joinchat--chatbox .joinchat__open__icon .joinchat__pb{animation-delay:3.2s}.joinchat--optout .joinchat__open__icon path{animation:none}.joinchat--optout .joinchat__open__icon .joinchat__pa{stroke-dasharray:0}.joinchat__open__text{--mw:0;max-width:var(--mw);width:-moz-fit-content;width:fit-content;padding:0;font-weight:600;line-height:var(--s);white-space:nowrap;opacity:0;overflow:hidden;text-overflow:ellipsis}.joinchat--chatbox .joinchat__open__text{--mw:min(384px - var(--s),100vw - 16px - var(--s) - 2 * var(--sep));padding:0 4px 0 24px;opacity:1}[dir=rtl] .joinchat__open__text{padding:0 24px 0 4px}.joinchat--chatbox.joinchat--opening .joinchat__open__text{animation:joinchat_open_text .45s ease-out both}@keyframes joinchat_open_text{0%{max-width:0;opacity:0}60%{max-width:var(--mw);opacity:0}to{max-width:var(--mw);opacity:1}}.joinchat__optin{padding:0 16px;margin-bottom:16px;color:#4a4a4a;font-size:13px;line-height:1.33}.joinchat__optin a{display:inline;padding:0;color:inherit!important;text-decoration:underline}.joinchat__optin a:hover{text-decoration-thickness:2px}.joinchat__optin input{position:absolute;visibility:hidden}.joinchat__optin label{position:relative;display:block;margin:0;padding:0 0 0 30px;color:inherit;font:inherit;cursor:pointer}.joinchat__optin label:before{content:"";display:block;position:absolute;top:min(50% - 11px,5px);left:0;width:22px;height:22px;border:3px solid var(--color);border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--text);transition:box-shadow .3s ease-in-out}.joinchat--dark .joinchat__optin label:before{background:#000}.joinchat__optin label:after{content:"";display:none;position:absolute;top:min(50% - 8px,8px);left:8px;width:6px;height:14px;border:solid var(--text);border-width:0 3px 3px 0;transform:rotate(45deg)}[dir=rtl] .joinchat__optin label{padding:0 30px 0 0}[dir=rtl] .joinchat__optin label:before{left:auto;right:0}[dir=rtl] .joinchat__optin label:after{left:auto;right:8px}.joinchat__optin input:checked+label:before{box-shadow:0 0 0 1px var(--text),inset 0 0 0 10px var(--color)}.joinchat__optin input:checked+label:after{display:block}.joinchat--dark .joinchat__optin{color:#d8d8d8}.joinchat__chat{--peak_l:path("M17 25V0C17 12.877 6.082 14.9 1.031 15.91c-1.559.31-1.179 2.272.004 2.272C9.609 18.182 17 18.088 17 25z");--peak_r:path("M0 25.68V0c0 13.23 10.92 15.3 15.97 16.34 1.56.32 1.18 2.34 0 2.34-8.58 0-15.97-.1-15.97 7Z");--peak:var(--peak_l);display:flex;flex-direction:column;align-items:flex-start;min-height:100px;padding-bottom:10px;transition:height .2s ease-out}[dir=rtl] .joinchat__chat{--peak:var(--peak_r)}.joinchat__bubble{flex-shrink:0;position:relative;min-width:60px;max-width:calc(100% - 52px);min-height:56px;padding:15px 20px;margin:0 26px 16px;border-radius:26px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));transform-origin:0 50%;animation:joinchat_show .22s cubic-bezier(0,0,.58,1.19) 10ms both}[dir=rtl] .joinchat__bubble{transform-origin:100% 50%}.joinchat__bubble:before{content:"";display:block;position:absolute;bottom:18px;left:-15px;width:17px;height:25px;background:inherit;clip-path:var(--peak)}[dir=rtl] .joinchat__bubble:before{left:auto;right:-15px}.joinchat--dark .joinchat__bubble{background:#505050;color:#d8d8d8}.joinchat__bubble.joinchat__bubble--loading{width:70px;border:none;background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%223%22%3E%3Canimate%20id%3D%22c%22%20attributeName%3D%22cy%22%20begin%3D%220%3Ba.end%2B0.1s%22%20calcMode%3D%22spline%22%20dur%3D%220.4s%22%20keySplines%3D%22.33%2C.66%2C.66%2C1%3B.33%2C0%2C.66%2C.33%22%20values%3D%2212%3B6%3B12%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%3E%3Canimate%20attributeName%3D%22cy%22%20begin%3D%22c.begin%2B0.1s%22%20calcMode%3D%22spline%22%20dur%3D%220.4s%22%20keySplines%3D%22.33%2C.66%2C.66%2C1%3B.33%2C0%2C.66%2C.33%22%20values%3D%2212%3B6%3B12%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2212%22%20r%3D%223%22%3E%3Canimate%20id%3D%22a%22%20attributeName%3D%22cy%22%20begin%3D%22c.begin%2B0.2s%22%20calcMode%3D%22spline%22%20dur%3D%220.4s%22%20keySplines%3D%22.33%2C.66%2C.66%2C1%3B.33%2C0%2C.66%2C.33%22%20values%3D%2212%3B6%3B12%22%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") 20px 20px no-repeat!important;transform-origin:50%!important;animation:joinchat_show .1s ease-out 10ms both}.joinchat--dark .joinchat__bubble.joinchat__bubble--loading{filter:invert(.5)}.joinchat__bubble.joinchat__bubble--note{min-height:0;padding:0;background:none!important;font-size:13px;line-height:1.33;filter:none;animation:none}.joinchat__bubble.joinchat__bubble--media{padding:5px}.joinchat__bubble.joinchat__bubble--loading:before,.joinchat__bubble.joinchat__bubble--note:before{content:none}.joinchat__bubble a{color:var(--msg)!important;font-size:1em;text-decoration:underline}.joinchat__bubble a:active,.joinchat__bubble a:hover{color:var(--hover)!important;border-color:var(--hover)}.joinchat__bubble a.joinchat__btn{display:inline-block;min-height:46px;max-width:100%;padding:10px 20px;margin:5px 0;border:3px solid var(--msg);border-radius:23px;line-height:20px;text-align:center;text-decoration:none!important;overflow:hidden;text-overflow:ellipsis}.joinchat__bubble a.joinchat__btn+.joinchat__bubble a.joinchat__btn{margin-top:-5px}.joinchat__bubble img,.joinchat__bubble video{max-width:100%;height:auto;margin:.2em 0;border-radius:4px;box-shadow:0 1px 5px rgb(0 0 0/10%)}.joinchat__bubble .joinchat--inline{display:inline-block;margin:-10px 0;border-radius:0;box-shadow:none;vertical-align:middle}.joinchat__bubble--media .joinchat--inline,.joinchat__bubble--media img,.joinchat__bubble--media video{display:block;margin:0;border-radius:21px;box-shadow:none}.joinchat__bubble code{padding:2px 5px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}.joinchat__bubble hr{width:100%!important;height:0!important;padding:0!important;border:none!important;border-top:2px solid var(--msg)!important;margin:10px 0!important}.joinchat__bubble hr+br{display:none}.joinchat__header{anchor-name:--joinchat-header}.joinchat__powered{display:unset;position:absolute;position-anchor:--joinchat-header;position-area:bottom left;left:-75px;top:75px;width:130px;height:20px;padding:0;margin:0;background:#fff!important;color:#0009!important;border:none!important;border-radius:4px 4px 0 0!important;font:11px/20px var(--joinchat-font)!important;text-align:center!important;text-decoration:none!important;transition:opacity .2s ease-out;box-shadow:0 2px 6px 0 #0003!important;transform:rotate(-90deg);opacity:0}@supports not (position-anchor:--x){.joinchat__powered{display:none}}.joinchat--chatbox .joinchat__powered{opacity:1;transition:opacity .2s ease-out,color .5s ease-out}.joinchat__powered span{font-weight:600}.joinchat__powered:active,.joinchat__powered:hover{color:#000!important;text-decoration:none!important;transition:color .2s ease-out}.joinchat--left .joinchat__powered{position-area:bottom right;left:auto;right:-75px;transform:rotate(90deg)}.joinchat--dark .joinchat__powered{background:#ddd!important}@keyframes joinchat_show{0%{transform:scale3d(0,0,0)}to{transform:scaleX(1)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}@keyframes joinchat_send_svg{0%,50%,to{stroke-dashoffset:var(--stroke)}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleX(1)}25%,to{opacity:0;transform:scaleX(1)}}.joinchat__woo-btn__wrapper{clear:both}.joinchat__woo-btn{--s:40px;display:inline-block;box-sizing:border-box;height:var(--s);max-width:100%;padding:0 calc(var(--s) / 2) 0 var(--s);background:#25d366 var(--joinchat-ico) calc(var(--s) * .2) 50% no-repeat;background-size:calc(var(--s) * .6);color:#fff;border-radius:calc(var(--s) / 2);font:700 calc(var(--s) * .35)/var(--s) var(--joinchat-font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;transition:background-color .2s}.joinchat__woo-btn:empty{padding-right:0}.joinchat__woo-btn:hover{background-color:#128c7e}@media (orientation:landscape) and (height >= 481px),(orientation:portrait) and (width >= 481px){.joinchat--mobile{display:none!important}}@media (width <= 767px){.joinchat--footer-bar{--bottom:76px!important}}@media (orientation:landscape) and (height <= 480px),(width <= 480px){.joinchat{--sep:6px;--header:max(50px,var(--s) * .91667)}.joinchat__header__text{font-size:17px}.joinchat__close{--size:28px}.joinchat__bubble{max-width:calc(100% - 40px);padding:16px;margin:0 20px 10px;line-height:24px}.joinchat:has(.joinchat__powered) .joinchat__content{padding-top:40px}.joinchat--left .joinchat__powered,.joinchat--right .joinchat__powered{position-area:bottom center;z-index:2;top:0;left:0;right:0;transform:none;border-radius:0 0 4px 4px}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover~.joinchat__qr,.joinchat--chatbox:has(.joinchat__open:hover) .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__chatbox{background:#1a1a1a linear-gradient(180deg,var(--dark),var(--dark) var(--header),var(--bg) var(--header),var(--bg))}.joinchat--dark-auto .joinchat__content:after{background-color:#1a1a1a}.joinchat--dark-auto .joinchat__optin label:before{background:#000}.joinchat--dark-auto .joinchat__optin{color:#d8d8d8}.joinchat--dark-auto .joinchat__bubble{background:#505050;color:#d8d8d8}.joinchat--dark-auto .joinchat__bubble.joinchat__bubble--loading{filter:invert(.5)}.joinchat--dark-auto .joinchat__powered{background:#ddd!important}}@media (prefers-reduced-motion){.joinchat,.joinchat__open__icon path{animation:none}.joinchat__open__icon .joinchat__pa{stroke-dasharray:0}.joinchat--chatbox.joinchat--opening .joinchat__open__text{animation:none}.joinchat__bubble{animation:none!important}}

, * se lo pasábamos desde el padre. Medido en vivo en la ficha del terreno: el

, el

de * sección y el