/* * MUV Studio — estilos principales. * * Los valores reproducen el sitio en producción: se tomaron de las hojas que * Elementor genera (kit-6, portada 4655, cabecera 4295, pie 4329) y del CSS * embebido del buscador y del carrusel de inmuebles. No son una aproximación. * * Los tokens y el bloque de cabecera/hero están en critical.css. */ /* ---------------------------------------------------------------- Tipografía * Auto-alojadas: evitan la conexión a fonts.gstatic.com. */ @font-face{ font-family:"Lexend Giga"; src:url("../fonts/lexend-giga-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC; } @font-face{ font-family:"Libre Bodoni"; src:url("../fonts/libre-bodoni-latin.woff2") format("woff2"); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC; } /* ------------------------------------------------------------------ Botones * Rectangulares (radio 0), fondo arena, texto crema, minúscula tipográfica * en Lexend Giga con interletraje negativo. Así son en el sitio real. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font);font-size:var(--fs-mini);font-weight:300; text-transform:uppercase;line-height:var(--lh-mini);letter-spacing:-.05em; padding:12px 35px;border:none;border-radius:0; transition:background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out} .btn--sand{background:var(--sand);color:var(--secondary)} .btn--sand:hover{background:var(--pri);color:var(--white)} .btn--sand-white{background:var(--sand);color:var(--white)} .btn--sand-white:hover{background:var(--pri)} /* Botón del hero: contorno claro sobre la foto */ .btn--outline{background:transparent;border:2px solid var(--secondary);color:var(--secondary); padding:10px 38px;letter-spacing:.02em;font-weight:400;flex:1 1 180px} .btn--outline:hover{background:var(--sand);border-color:var(--sand);color:var(--secondary)} .btn--outline:active{transform:scale(.98)} /* Contorno teal: para fondos claros (ficha, 404). El contorno crema del hero es invisible sobre blanco. */ .btn--outline-teal{background:transparent;border:1.5px solid var(--pri);color:var(--pri)} .btn--outline-teal:hover{background:var(--pri);color:var(--white)} /* Enlace plano del hero */ .btn--plain{background:transparent;color:var(--secondary);padding:12px 35px} .btn--plain:hover{background:var(--sand)} /* Acción secundaria sobre fondo claro: sin caja, sólo texto y un filete que aparece al pasar. Para no poner dos botones sólidos compitiendo. */ .btn--ghost{background:transparent;color:var(--muted); box-shadow:inset 0 -1px 0 transparent;transition:color .3s ease,box-shadow .3s ease} .btn--ghost:hover{color:var(--pri);box-shadow:inset 0 -1px 0 var(--pri)} /* --------------------------------------------------------------- Hero (resto) */ .hero__actions{display:flex;flex-direction:column;justify-content:space-between; gap:15px;width:25rem;max-width:100%} .hero__seg{display:flex;gap:12px;align-items:center;justify-content:flex-start} @media(max-width:767px){ .hero__actions{width:100%} .btn--outline{padding:10px 8px} } /* --------------------------------------------------------------- Secciones */ .section{padding:3rem 5rem} .section--about{display:flex;flex-direction:row;gap:5rem;padding:6rem 5rem 3rem; background:var(--secondary);align-items:stretch} .section--about__media{width:50%;min-height:35rem;background-position:center center; background-repeat:no-repeat;background-size:cover} .section--about__text{width:50%;display:flex;flex-direction:column; justify-content:center;align-items:flex-start;gap:0} .section--about__text p{letter-spacing:-.06em;color:var(--text);max-width:60ch; font-size:var(--fs-copy);line-height:var(--lh-copy); text-align:justify;hyphens:auto;-webkit-hyphens:auto} .section--about__text .btn{margin-top:20px} .section--allies{display:flex;flex-direction:row;justify-content:center;align-items:center; gap:5rem;padding:3rem 5rem;background:var(--secondary)} .section--allies__panel{width:70%;display:flex;flex-direction:column; justify-content:center;align-items:center;padding:3rem 5rem; background:#FFFFFF6E;text-align:center} .section--allies__panel p{letter-spacing:-.06em;color:var(--text); font-size:var(--fs-copy);line-height:var(--lh-copy)} .section--allies__panel .btn{margin-top:12px} .section--related{background:var(--secondary);padding:3rem 5rem 4rem} .section--related .section__title{text-align:center} .section--featured{display:flex;flex-direction:column;gap:1rem;overflow:hidden; padding:3rem 5rem 6rem;background:var(--secondary);text-align:left} .section--featured p{letter-spacing:-.06em;color:var(--text); font-size:var(--fs-copy);line-height:var(--lh-copy)} /* Cabecera: intro a la izquierda, CTA a la derecha alineado a la base. */ .featured__head{display:flex;justify-content:space-between;align-items:flex-end; gap:24px;flex-wrap:wrap;margin-bottom:clamp(18px,2.5vw,32px)} .featured__intro{max-width:56ch} .featured__intro p{margin:0} .featured__intro .section__title{margin-bottom:.35em} .featured__cta{flex:0 0 auto} .featured__cta--mobile{display:none} @media(max-width:767px){ .featured__cta{display:none} .featured__cta--mobile{display:inline-flex;align-self:stretch; justify-content:center;margin-top:6px} } .section--featured .btn{margin-top:12px} .section__title{margin:0 0 .4em} @media(max-width:1024px){ .section{padding:2rem} .section--about,.section--allies,.section--featured{gap:1rem;padding:2rem} .section--about{padding:2rem} } @media(max-width:767px){ .section,.section--about,.section--allies,.section--featured{padding:2rem 1rem} .section--about{flex-direction:column} .section--about__media{width:100%;min-height:15rem} .section--about__text{width:100%} .section--allies{flex-direction:column} .section--allies__panel{width:100%;padding:2rem 1rem} } /* ---------------------------------------------------------------- Rejilla */ .muv-studio{max-width:var(--max);margin:0 auto;font-family:var(--font); color:var(--text-dark)} .muv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:22px;margin-top:14px;text-align:left} /* --------------------------------------------------------------- Tarjeta * Réplica de .muv-card del listado en producción. */ /* Sin sombra: el realce al pasar es sólo el borde en teal suave y el leve zoom de la foto. Más discreto y coherente con el resto de la web. */ .muv-card{display:flex;flex-direction:column;background:var(--white); border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border); color:var(--text-dark); transition:border-color .3s ease} .muv-card:hover{border-color:var(--sand)} .muv-card__img{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden; background:#eaeced} .muv-card__img a{display:block;width:100%;height:100%} .muv-card__img img{width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.4,0,.2,1)} .muv-card:hover .muv-card__img img{transform:scale(1.06)} /* Etiquetas con aire alrededor del texto y esquinas suaves; el interletraje abierto las hace legibles pese al tamaño diminuto. */ .muv-card__badge{position:absolute;top:11px;left:11px;background:var(--pri); color:var(--white);font-size:clamp(7.5px,.58vw,8.5px);padding:5px 10px; border-radius:3px;font-weight:400;letter-spacing:.09em;line-height:1; text-transform:uppercase;z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.14)} .muv-card__badge--secondary{top:38px} .muv-card__badge--type{left:auto;right:11px;background:rgba(251,246,243,.94); color:var(--pri);font-size:clamp(7.5px,.58vw,8.5px);padding:5px 10px; letter-spacing:.09em;line-height:1; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .muv-card__flag{position:absolute;bottom:10px;right:10px;padding:4px 6px;border-radius:0; background:rgba(0,71,82,.85);line-height:1;display:flex;align-items:center; justify-content:center;z-index:2} .muv-card__flag svg{width:14px;height:14px;color:var(--white);display:block} .muv-card__body{padding:14px 16px 12px;flex:1;display:flex;flex-direction:column} .muv-card__prices{display:flex;justify-content:space-between;gap:12px; margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--hairline)} .muv-card__price{display:flex;flex-direction:column;gap:2px} .muv-card__price-label{color:var(--text-2);font-size:.62rem;letter-spacing:-.05em; font-weight:300} .muv-card__price-value{font-weight:500;color:var(--pri);font-size:.68rem; letter-spacing:-.04em;font-variant-numeric:tabular-nums} .muv-card__title{font-size:.68rem;font-weight:400;text-transform:uppercase; letter-spacing:-.03em;color:var(--text-2);margin:0 0 10px;line-height:1.4; font-family:var(--font)} .muv-card__specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0; margin:0 0 12px;padding:0;list-style:none} .muv-spec{display:flex;flex-direction:column;align-items:center;gap:4px; padding:7px 4px;font-size:.65rem;border-right:1px solid var(--border)} .muv-spec:last-child{border-right:none} .muv-spec__top{display:flex;align-items:center;gap:4px} .muv-spec svg{width:17px;height:17px;color:var(--muted);flex-shrink:0} .muv-spec__val{font-weight:400;color:var(--text-2);font-size:.7rem;letter-spacing:-.06em} .muv-spec__unit{font-size:.65rem;color:var(--muted);margin-left:1px;letter-spacing:-.06em} /* --muted y no --faint: 4,8:1 de contraste; el gris claro no llega a AA. */ .muv-spec__label{font-size:.52rem;color:var(--muted);text-align:center;letter-spacing:-.03em} .muv-card__foot{display:flex;justify-content:space-between;align-items:center; padding-top:8px;margin-top:auto;font-size:.55rem;border-top:1px solid var(--hairline); color:var(--muted)} .muv-card__broker-chip{background:var(--pri-light);color:var(--pri);padding:2px 7px; border-radius:3px;font-size:.6rem;font-weight:400} /* -------------------------------------------------------------- Carrusel * "Proyectos del mes". Misma apariencia que el Swiper del sitio original * (flechas redondas blancas con hover teal, puntos que se estiran a píldora), * pero sobre un scroll con snap nativo. */ .muv-carousel{position:relative;width:100%;text-align:left} .muv-carousel__viewport{display:flex;gap:24px;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 4px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .muv-carousel__viewport::-webkit-scrollbar{display:none} .muv-carousel__slide{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start; display:flex} .muv-carousel__slide .muv-card{width:100%} .muv-carousel__nav{position:absolute;top:38%;z-index:5;width:40px;height:40px; border-radius:50%;border:1px solid #eef1f3;background:rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .3s ease} .muv-carousel__nav svg{width:24px;height:24px;stroke:var(--pri);transition:stroke .3s ease} .muv-carousel__nav:hover{background:var(--pri);transform:scale(1.05); box-shadow:0 4px 12px rgba(0,71,80,.3)} .muv-carousel__nav:hover svg{stroke:var(--white)} .muv-carousel__nav:disabled{opacity:.35;pointer-events:none} .muv-carousel__nav--prev{left:-8px} .muv-carousel__nav--next{right:-8px} .muv-carousel__dots{display:flex;justify-content:center;gap:6px;margin-top:2px} .muv-carousel__dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%; background:#cbd5e1;transition:width .22s ease,background-color .22s ease} .muv-carousel__dots button[aria-current="true"]{width:18px;border-radius:999px; background:var(--pri)} @media(max-width:1199px){ .muv-carousel__slide{flex-basis:calc((100% - 24px)/2)} } @media(max-width:767px){ .muv-carousel__viewport{gap:12px;padding:4px 4px 24px; scroll-snap-type:x mandatory} .muv-carousel__slide{flex-basis:86%;scroll-snap-align:center} /* Las flechas se mantienen en móvil, sobre la foto y algo más pequeñas. */ .muv-carousel__nav{width:34px;height:34px;top:30%} .muv-carousel__nav svg{width:19px;height:19px} .muv-carousel__nav--prev{left:2px} .muv-carousel__nav--next{right:2px} } /* -------------------------------------------------------------- Buscador */ /* Se pega justo debajo de la cabecera, no en el borde de la ventana: si no, las dos compiten por el mismo sitio y la cabecera —que va por encima— la tapa. nav.js mantiene --head-h al día con la altura real. */ .muv-bar-wrap{position:sticky;top:var(--head-h);z-index:10; background:var(--secondary);padding:16px 28px 10px; border-bottom:1px solid rgba(0,0,0,.04)} .muv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .muv-capsule{display:inline-flex;height:42px;align-items:center;gap:10px; border-radius:var(--radius);border:1px solid var(--border);font-size:.7rem; font-weight:300;background:var(--white);padding:0 14px;color:var(--text-dark); transition:border-color .2s ease,background .2s ease} .muv-capsule:hover,.muv-capsule:focus-within{border-color:var(--pri)} .muv-capsule svg{flex-shrink:0;color:var(--muted);width:16px;height:16px; transition:color .2s ease} .muv-capsule:hover svg{color:var(--pri)} .muv-search-input{flex:2;min-width:200px;background:#f7f8f9} /* Campo de código: sólo necesita espacio para 3-4 dígitos. */ .muv-code-input{flex:0 0 130px;background:#f7f8f9} .muv-search-input input,.muv-code-input input{border:none;background:transparent; width:100%;outline:none;font-size:.68rem;font-weight:300;padding:4px 0; color:var(--text-dark);font-family:var(--font)} .muv-search-input input::placeholder, .muv-code-input input::placeholder{color:var(--faint)} /* Quitar la cruz nativa de los type=search en WebKit. */ .muv-bar input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .muv-select{min-width:150px;padding-right:30px;-webkit-appearance:none;appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 10px) center,calc(100% - 6px) center; background-size:4px 4px,4px 4px;background-repeat:no-repeat; font-family:var(--font);font-size:.7rem;font-weight:300} .muv-btn-search{height:42px;border-radius:var(--radius);border:none;background:var(--pri); color:var(--white);font-weight:400;font-size:.75rem;padding:0 20px; font-family:var(--font);letter-spacing:-.02em;transition:background .2s ease} .muv-btn-search:hover{background:var(--pri-600)} .muv-btn-search:active{background:var(--pri-700)} /* Botón "Más filtros": cápsula con contador de filtros activos. */ .muv-btn-more{height:42px;border-radius:var(--radius);background:transparent; border:1px solid var(--border);color:var(--text-dark);padding:0 14px; font-family:var(--font);font-size:.7rem;font-weight:300;white-space:nowrap; display:inline-flex;align-items:center;gap:6px;transition:all .2s ease} .muv-btn-more:hover{background:var(--pri);border-color:var(--pri);color:var(--white)} .muv-badge-count{background:var(--pri);color:var(--white);font-size:.6rem;font-weight:600; padding:1px 5px;border-radius:3px;margin-left:2px;display:none; animation:muv-pop .3s ease} .muv-badge-count.active{display:inline-block} .muv-btn-more:hover .muv-badge-count{background:var(--white);color:var(--pri)} @keyframes muv-pop{0%{transform:scale(.7);opacity:0}50%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1}} /* Cabecera de resultados: recuento + píldoras a la izquierda, orden a la derecha. */ .muv-results{padding:0 28px 40px} .muv-results-header{display:flex;justify-content:space-between;align-items:center; margin:14px 0 6px;font-size:.72rem;color:var(--text-2);gap:16px} .muv-results-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1} .muv-count{font-weight:300;white-space:nowrap;margin:0} .muv-count strong{color:var(--pri);font-weight:600} .muv-pills{display:flex;flex-wrap:wrap;gap:5px} .muv-pill{display:inline-flex;align-items:center;gap:5px;background:#f3f4f6; border:1px solid var(--border);border-radius:var(--radius);padding:3px 10px; font-size:.6rem;font-weight:400;color:var(--text-2);animation:muv-slidein .3s ease} .muv-pill:hover{background:var(--border)} .muv-pill a{display:flex;color:var(--muted);font-size:.75rem;line-height:1; transition:all .2s ease} .muv-pill a:hover{color:#dc2626;transform:scale(1.2)} @keyframes muv-slidein{from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)}} .muv-sort-select{width:18rem;max-width:100%;height:2rem;border-radius:var(--radius); border:1px solid var(--border);padding:4px 28px 4px 10px;font-size:.68rem; font-weight:300;background:var(--white);color:var(--text-2);-webkit-appearance:none;appearance:none; cursor:pointer;font-family:var(--font); background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%), linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 10px) center,calc(100% - 6px) center; background-size:4px 4px,4px 4px;background-repeat:no-repeat; transition:border-color .2s ease} .muv-sort-select:hover{border-color:var(--pri)} /* Modal de filtros: en la capa superior del navegador, así que no lo tapan ni la cabecera fija ni la barra pegajosa. */ /* Cajón lateral desde la derecha, a toda la altura. */ .muv-modal{width:min(430px,100vw);max-width:100vw;height:100dvh;max-height:100dvh; margin:0 0 0 auto;padding:0;border:0;border-radius:0;background:var(--secondary); box-shadow:-24px 0 60px rgba(0,71,82,.16);overflow:hidden;color:var(--text-dark)} .muv-modal::backdrop{background:rgba(15,23,42,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .muv-modal[open]{animation:muv-drawer-in .32s cubic-bezier(.4,0,.2,1)} .muv-modal[open]::backdrop{animation:muv-fade-in .32s ease} @keyframes muv-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}} @keyframes muv-fade-in{from{opacity:0}to{opacity:1}} /* Cabecera y pie fijos; sólo el cuerpo se desplaza. */ .muv-modal__inner{display:flex;flex-direction:column;height:100dvh} .muv-modal__header{display:flex;align-items:center;gap:12px; padding:18px 22px;border-bottom:1px solid rgba(190,178,171,.35);flex:0 0 auto; background:var(--white)} .muv-modal__back{border:0;background:none;color:var(--text-dark);padding:4px; line-height:0;display:inline-flex;transition:color .2s ease,transform .25s ease} .muv-modal__back:hover{color:var(--pri);transform:translateX(-2px)} /* Bloques: cada grupo de filtros en su propia tarjeta blanca. */ .muv-block{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);padding:16px 18px;margin-bottom:12px} .muv-block.muv-modal__row{padding:16px 18px;gap:14px} .muv-block .muv-filter-title:first-of-type{margin-top:0} .muv-block .muv-amenities{margin-bottom:0} .muv-modal__header h2{font-family:var(--font);font-size:.9rem;font-weight:400; letter-spacing:-.03em;color:var(--text-dark);margin:0} .muv-modal__close{border:none;background:#f3f4f6;border-radius:var(--radius); width:28px;height:28px;font-size:1rem;display:inline-flex;align-items:center; justify-content:center;color:var(--muted);transition:background .2s ease} .muv-modal__close:hover{background:var(--border);color:var(--text-dark)} .muv-modal__body{font-size:.68rem;flex:1 1 auto;overflow-y:auto; padding:14px;overscroll-behavior:contain;background:var(--secondary)} .muv-modal__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;margin-bottom:16px} .muv-modal__label{display:block;font-size:.65rem;color:#4b5563;margin-bottom:5px; font-weight:300} .muv-modal__input{width:100%;border-radius:var(--radius);border:1px solid var(--border); padding:8px 12px;font-size:.68rem;color:var(--text-dark);background:var(--white); font-family:var(--font);font-weight:300;transition:border-color .2s ease} .muv-modal__input:focus{outline:none;border-color:var(--pri)} .muv-modal__input:hover{border-color:var(--pri)} .muv-divider{border:0;border-top:1px solid #eee;margin:18px 0} /* --------------------------------------------- Rango de precio (2 mangos) * Dos superpuestos sobre un raíl común. Cada uno recibe * los eventos sólo en su mango (pointer-events en el thumb), así ambos son * arrastrables y accesibles con teclado. */ .muv-range{margin-bottom:22px} .muv-range:last-child{margin-bottom:6px} .muv-range__read{text-align:center;font-size:clamp(10px,.8vw,12px);color:var(--text-2); font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums; margin:0 0 10px} .muv-range__slider{position:relative;height:26px;margin:0 10px 6px} .muv-range__rail,.muv-range__fill{position:absolute;top:50%;height:2px; transform:translateY(-50%);border-radius:999px;pointer-events:none} .muv-range__rail{left:0;right:0;background:#e4d9cc} .muv-range__fill{background:var(--pri)} .muv-range__slider input[type=range]{position:absolute;top:0;left:0;width:100%; height:26px;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none; pointer-events:none} .muv-range__slider input[type=range]:focus{outline:none} .muv-range__slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; pointer-events:auto;width:16px;height:16px;border-radius:50%; background:var(--white);border:1.5px solid var(--pri);cursor:grab; box-shadow:0 1px 4px rgba(0,71,82,.2); transition:transform .18s ease,box-shadow .18s ease} .muv-range__slider input[type=range]::-moz-range-thumb{pointer-events:auto; width:16px;height:16px;border-radius:50%;background:var(--white); border:1.5px solid var(--pri);cursor:grab; box-shadow:0 1px 4px rgba(0,71,82,.2)} .muv-range__slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} .muv-range__slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing} .muv-range__slider input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(0,71,82,.18)} .muv-range__slider input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(0,71,82,.18)} .muv-range__slider input[type=range]::-webkit-slider-runnable-track{background:none} .muv-range__slider input[type=range]::-moz-range-track{background:none} .muv-range__fields[hidden]{display:none} .muv-filter-title{font-size:.68rem;margin-bottom:7px;color:var(--text);font-weight:400} .muv-filter-subtitle{font-weight:300;color:#999} .muv-numpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px; align-items:center} .muv-numpick:last-child{margin-bottom:0} .muv-numpick__icon{flex:0 0 auto;width:36px;height:36px;border-radius:8px; background:var(--secondary);color:var(--pri);display:grid;place-items:center} .muv-numpick label{cursor:pointer;position:relative} .muv-numpick input{position:absolute;opacity:0;pointer-events:none;width:0;height:0} .muv-numpick__opt{display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:38px;padding:8px 12px;border:1px solid var(--border); background:var(--white);font-size:.7rem;color:var(--text-2);font-family:var(--font); font-weight:400;border-radius:var(--radius);transition:all .2s ease} .muv-numpick label:hover .muv-numpick__opt{background:#f9fafb;border-color:var(--pri); color:var(--pri)} .muv-numpick input:checked+.muv-numpick__opt{background:var(--pri);border-color:var(--pri); color:var(--white);font-weight:500} /* Características: dos grupos de casillas dentro del modal. */ .muv-amenities{margin-bottom:16px} .muv-amenities h3{font-family:var(--font);font-size:.78rem;font-weight:400; margin:0 0 8px;color:var(--text);letter-spacing:-.04em} .muv-amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px 10px} .muv-chk{font-size:.72rem;font-weight:300;color:var(--text-2);display:flex; align-items:center;gap:9px;cursor:pointer;padding:5px 0;line-height:1.4; letter-spacing:-.04em;transition:color .2s ease} .muv-chk:hover{color:var(--pri)} .muv-chk input{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:var(--pri)} .muv-modal__footer{display:flex;gap:10px;align-items:center; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(190,178,171,.35);flex:0 0 auto;background:var(--white)} .muv-btn-reset,.muv-btn-apply{flex:1;display:inline-flex;align-items:center; justify-content:center;gap:8px;height:42px;border-radius:var(--radius); font-family:var(--font);font-size:clamp(9px,.72vw,10.5px);font-weight:400; text-transform:uppercase;letter-spacing:.11em;transition:all .22s ease} .muv-btn-reset{border:1px solid var(--border);background:transparent; color:var(--text-2);text-decoration:none} .muv-btn-reset:hover{border-color:var(--text-2);color:var(--text-dark)} .muv-btn-apply{border:none;background:var(--pri);color:var(--white)} .muv-btn-apply:hover{background:var(--pri-600)} .muv-btn-apply:hover svg{transform:translateX(2px)} .muv-btn-apply svg{transition:transform .22s ease} body.muv-modal-open{overflow:hidden} .muv-pager{margin-top:28px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center} .muv-pager a,.muv-pager span{min-width:34px;height:34px;border-radius:var(--radius); border:1px solid var(--border);background:var(--white);font-size:.75rem; padding:0 10px;color:var(--text-2);font-family:var(--font);font-weight:400; display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease} .muv-pager a:hover{background:#f9fafb;border-color:var(--pri);color:var(--pri)} .muv-pager [aria-current="page"]{background:var(--pri);border-color:var(--pri); color:var(--white);font-weight:500} .muv-pager__ellipsis{border:none;background:transparent;min-width:auto; color:var(--faint);font-size:.75rem;padding:0 4px} .muv-skeleton{background:var(--white);border-radius:var(--radius-card);overflow:hidden; border:1px solid var(--border)} .muv-skeleton__img{width:100%;aspect-ratio:16/10; background:linear-gradient(90deg,#f0f0f0 25%,#e4e4e4 50%,#f0f0f0 75%); background-size:200% 100%;animation:muv-shimmer 1.4s infinite ease-in-out} .muv-skeleton__body{padding:16px} .muv-skeleton__line{height:11px;border-radius:4px;margin-bottom:10px; background:linear-gradient(90deg,#f0f0f0 25%,#e4e4e4 50%,#f0f0f0 75%); background-size:200% 100%;animation:muv-shimmer 1.4s infinite ease-in-out} .muv-skeleton__line--w60{width:60%} .muv-skeleton__line--w80{width:80%} .muv-skeleton__line--w40{width:40%} @keyframes muv-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .muv-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:.75rem} @media(max-width:768px){ .muv-bar-wrap{padding:12px 14px 10px;position:static} .muv-bar{flex-wrap:wrap;gap:7px} .muv-search-input{order:1;flex:1 1 auto;min-width:0} .muv-code-input{order:2;flex:0 0 108px} #muv-biz{order:3;flex:0 0 calc(50% - 4px);min-width:0} #muv-type{order:4;flex:0 0 calc(50% - 4px);min-width:0} #muv-city{display:none} .muv-btn-more{order:5;flex:1 1 100%;padding:0 10px} .muv-results{padding-inline:14px} .muv-results-header{flex-direction:column;gap:10px;align-items:flex-start} .muv-sort-select{width:100%} .muv-modal__row{grid-template-columns:1fr} /* Icono, "Todas" y los cinco números caben en una fila: los números se reparten el sitio que sobra en vez de que el 5 caiga a otra línea. */ .muv-numpick{flex-wrap:nowrap;gap:5px} .muv-numpick__icon{width:32px;height:34px} .muv-numpick label{flex:1 1 0;min-width:0} .muv-numpick label:first-of-type{flex:0 0 auto} .muv-numpick__opt{width:100%;min-width:0;height:34px;padding:6px 4px; font-size:.66rem} .muv-numpick label:first-of-type .muv-numpick__opt{padding-inline:10px} /* El cajón ocupa toda la pantalla; los dos botones caben en una fila. */ .muv-modal{width:100vw} .muv-modal__body{padding:12px} .muv-block{padding:14px 15px} } @media(max-width:480px){ .muv-grid{grid-template-columns:1fr} } /* Miga de pan en móvil: una sola línea. Si el nombre del inmueble no cabe, se recorta con puntos suspensivos; partirla en dos renglones desordena el arranque de la ficha, que es lo primero que se ve. */ @media(max-width:768px){ .breadcrumbs{flex-wrap:nowrap;gap:9px;overflow:hidden} .breadcrumbs a{white-space:nowrap;flex:0 0 auto} .breadcrumbs [aria-hidden]{flex:0 0 auto;width:14px} .breadcrumbs [aria-current]{white-space:nowrap;overflow:hidden; text-overflow:ellipsis;min-width:0;flex:0 1 auto} } /* ------------------------------------------------------- Ficha de inmueble */ .page__head{padding:clamp(32px,5vw,64px) var(--pad-x) 0;background:var(--secondary)} .page__title{color:var(--pri);margin:0} .property{background:var(--body-bg)} /* Migas de pan editoriales: versalitas finas, separador de línea de pelo en arena y la página actual en itálica serif teal. */ .breadcrumbs{display:flex;flex-wrap:wrap;gap:14px;align-items:center; padding:16px var(--pad-x);max-width:var(--max-box);margin-inline:auto} .breadcrumbs a{font-family:var(--font);font-size:clamp(9px,.7vw,10px); font-weight:300;text-transform:uppercase;letter-spacing:.16em; color:var(--muted);transition:color .2s ease} .breadcrumbs a:hover{color:var(--pri)} .breadcrumbs [aria-hidden]{font-size:0;display:inline-block;width:22px;height:1px; background:var(--sand)} /* Misma tipografía que el resto de la miga; sólo el color la distingue. */ .breadcrumbs [aria-current]{font-family:var(--font);font-size:clamp(9px,.7vw,10px); font-weight:300;text-transform:uppercase;letter-spacing:.16em;color:var(--pri)} /* Dentro de la ficha la galería ya está en su columna: sin ancho ni padding propios, así se alinea exactamente con el resto del contenido. */ /* Fotografía a esquina viva: sin redondeos, como los botones del sitio. La esquina redondeada suaviza la imagen y aquí la imagen es el producto. */ .gallery{margin:0 0 clamp(18px,2vw,26px)} .gallery__main{position:relative;overflow:hidden;background:#eaeced;aspect-ratio:4/3; border-radius:0} .gallery__main img{width:100%;height:100%;object-fit:cover} .gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px; border:1px solid #eef1f3;border-radius:50%;background:rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .3s ease} .gallery__nav svg{width:24px;height:24px;stroke:var(--pri);stroke-width:2; transition:stroke .3s ease} .gallery__nav:hover{background:var(--pri);transform:translateY(-50%) scale(1.05); box-shadow:0 4px 12px rgba(0,71,80,.3)} .gallery__nav:hover svg{stroke:var(--white)} .gallery__nav--prev{left:14px} .gallery__nav--prev svg{transform:rotate(180deg)} .gallery__nav--next{right:14px} .gallery__counter{position:absolute;right:14px;bottom:14px;background:rgba(0,71,82,.85); color:var(--white);font-size:.6rem;padding:4px 10px;letter-spacing:-.04em} /* Miniaturas en rejilla de ancho fijo: todas iguales, sin filas irregulares. La activa se marca atenuando las demás, no con un borde que descuadra. */ .gallery__thumbs{display:grid;grid-auto-flow:column; grid-auto-columns:calc((100% - 5 * 8px) / 6);gap:8px;margin-top:8px; overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;-webkit-overflow-scrolling:touch} .gallery__thumbs::-webkit-scrollbar{display:none;width:0;height:0} .gallery__thumb{aspect-ratio:4/3;border:0;border-radius:0;overflow:hidden; padding:0;background:#eaeced;scroll-snap-align:start; opacity:.5;transition:opacity .25s ease,transform .25s ease} .gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block} .gallery__thumb:hover{opacity:.8} .gallery__thumb.is-active{opacity:1} .gallery__thumb:focus-visible{outline:2px solid var(--pri);outline-offset:2px} @media(max-width:640px){ .gallery__thumbs{grid-auto-columns:calc((100% - 3 * 8px) / 4)} } .property__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(20px,2.4vw,34px);max-width:var(--max-box);margin-inline:auto; padding:0 var(--pad-x) 64px;align-items:start} /* ---------------------------------------------- Ficha: tarjetas y datos */ .prop-card{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);padding:clamp(16px,1.6vw,22px); margin-bottom:clamp(14px,1.6vw,20px)} .prop-card__title{font-family:var(--font);font-size:clamp(9px,.72vw,10.5px); font-weight:400;text-transform:uppercase;letter-spacing:.14em; color:var(--muted);margin:0 0 12px} /* Precios: etiqueta a la izquierda, valor a la derecha, fila a fila. */ .prop-prices{padding-block:6px} .prop-price{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:11px 0;border-bottom:1px solid var(--hairline)} .prop-price:last-child{border-bottom:0} .prop-price__label{font-size:clamp(9px,.72vw,10.5px);text-transform:uppercase; letter-spacing:.13em;color:var(--muted);font-weight:300} .prop-price__value{font-size:clamp(14px,1.15vw,17px);color:var(--pri); font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .prop-price__value.is-muted{color:var(--faint);font-weight:400} /* Ficha técnica: rejilla de tarjetas icono + dato. El mínimo de 195px sale del valor más largo del inventario —"Apartamento" en Lexend Giga— más el icono y los rellenos: por debajo, la palabra se partiría. */ .prop-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:10px;list-style:none;margin:0 0 clamp(14px,1.6vw,20px);padding:0} .prop-fact{display:flex;align-items:center;gap:11px;background:var(--white); border:1px solid var(--border);border-radius:var(--radius-card); padding:11px 13px} .prop-fact__icon{flex:0 0 auto;width:32px;height:32px;border-radius:8px; background:var(--secondary);color:var(--pri);display:grid;place-items:center} .prop-fact__body{display:flex;flex-direction:column;gap:1px;min-width:0} .prop-fact__label{font-size:clamp(8px,.62vw,9.5px);text-transform:uppercase; letter-spacing:.11em;color:var(--muted);font-weight:300} /* El valor envuelve entre palabras, nunca por dentro de una: la tarjeta ya mide para la palabra más larga. */ .prop-fact__value{font-size:clamp(11px,.9vw,13px);color:var(--text-2); font-weight:400;letter-spacing:-.03em;line-height:1.25} /* Amenidades como chips. */ .prop-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0} .prop-chip{font-size:clamp(10px,.78vw,11.5px);font-weight:300;letter-spacing:-.02em; color:var(--text-2);background:var(--secondary);border:1px solid var(--border); border-radius:999px;padding:5px 12px} /* Asesora + formulario. */ .prop-agent{display:flex;align-items:center;gap:11px;padding-bottom:14px; margin-bottom:14px;border-bottom:1px solid var(--hairline)} .prop-agent__photo{width:44px;height:44px;border-radius:50%;object-fit:cover; flex:0 0 auto} .prop-agent__id{flex:1;min-width:0} .prop-agent__name{font-size:clamp(11px,.9vw,13px);color:var(--text-2);margin:0; letter-spacing:-.03em} .prop-agent__role{font-size:clamp(8px,.65vw,9.5px);color:var(--muted);margin:0; text-transform:uppercase;letter-spacing:.1em} .prop-agent__wa{flex:0 0 auto;background:var(--pri);color:var(--white); font-family:var(--font);font-size:clamp(8px,.65vw,9.5px);font-weight:400; text-transform:uppercase;letter-spacing:.11em;padding:8px 14px; border-radius:999px;transition:background-color .25s ease} .prop-agent__wa:hover{background:var(--pri-600)} /* --------------------------------------------------------------- Mapa * Sin marcador: un círculo translúcido sobre el centro señala la zona, no el * punto. El mapa se atenúa un poco para que no compita con la marca. */ .prop-map{position:relative;overflow:hidden;aspect-ratio:16/10; border:1px solid var(--border);border-radius:var(--radius-card); background:#eaeced} .prop-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0; filter:saturate(.72) contrast(.96)} .prop-map__zone{position:absolute;top:50%;left:50%;width:42%;aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%; background:rgba(0,71,82,.16);border:2px solid rgba(0,71,82,.55); box-shadow:0 0 0 9999px rgba(251,246,243,.28);pointer-events:none} .prop-map__zone::after{content:"";position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle,rgba(0,71,82,.18) 0%,transparent 68%)} /* ------------------------------------------------------------- Lightbox */ .lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh; margin:0;padding:0;border:0;background:rgba(12,20,22,.94); display:none;place-items:center} .lightbox[open]{display:grid} .lightbox::backdrop{background:rgba(12,20,22,.94)} .lightbox__stage{margin:0;display:grid;place-items:center;gap:14px; padding:clamp(48px,7vw,72px) clamp(52px,8vw,96px)} .lightbox__stage img{max-width:100%;max-height:calc(100dvh - 150px); width:auto;height:auto;object-fit:contain;border-radius:0} .lightbox__count{font-family:var(--font);font-size:clamp(9px,.72vw,10.5px); letter-spacing:.14em;color:rgba(255,255,255,.7);text-transform:uppercase} .lightbox__close{position:absolute;top:18px;right:18px;width:42px;height:42px; border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff; display:grid;place-items:center;transition:background-color .22s ease} .lightbox__close:hover{background:rgba(255,255,255,.22)} /* Descargar: junto a cerrar, mismo peso visual. */ .lightbox__download{position:absolute;top:18px;right:70px;width:42px;height:42px; border-radius:50%;background:rgba(255,255,255,.1);color:#fff; display:grid;place-items:center;transition:background-color .22s ease} .lightbox__download:hover{background:rgba(255,255,255,.22);color:#fff} @media(max-width:520px){ .lightbox__download{right:64px;width:38px;height:38px} .lightbox__close{width:38px;height:38px} } .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%); width:46px;height:46px;border:0;border-radius:50%; background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center; transition:background-color .22s ease} .lightbox__nav:hover{background:rgba(255,255,255,.22)} .lightbox__nav--prev{left:14px} .lightbox__nav--prev svg{transform:rotate(180deg)} .lightbox__nav--next{right:14px} /* En móvil la foto manda: ocupa todo el ancho del visor y los controles * flotan encima. Con el relleno de escritorio (52 px por lado) una pantalla * de 340 px perdía un tercio del ancho y la imagen se veía diminuta, que es * justo lo contrario de lo que necesita una ficha de inmueble. */ @media(max-width:767px){ .lightbox__stage{padding:0;gap:0;width:100vw} .lightbox__stage img{max-width:100vw;max-height:100dvh} /* Fuera del flujo: el contador ya no le roba alto a la foto. */ .lightbox__count{position:absolute;left:50%;bottom:18px; transform:translateX(-50%);padding:5px 12px;border-radius:999px; background:rgba(12,20,22,.62);color:rgba(255,255,255,.86); font-size:10px;white-space:nowrap} /* Más pequeñas y pegadas al borde: se apoyan en la foto sin taparla. */ .lightbox__nav{width:36px;height:36px;background:rgba(12,20,22,.5)} .lightbox__nav svg{width:20px;height:20px} .lightbox__nav--prev{left:8px} .lightbox__nav--next{right:8px} .lightbox__close, .lightbox__download{top:12px;background:rgba(12,20,22,.5)} .lightbox__close{right:12px} .lightbox__download{right:58px} } /* Botón de ampliar sobre la foto principal. */ .gallery__zoom{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px; border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--pri); display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15); opacity:0;transition:opacity .25s ease,background-color .22s ease} .gallery__main:hover .gallery__zoom, .gallery__zoom:focus-visible{opacity:1} .gallery__zoom:hover{background:var(--white)} @media(hover:none){.gallery__zoom{opacity:1}} .prop-place{display:inline-flex;align-items:center;gap:6px; font-size:clamp(10px,.78vw,11.5px);color:var(--text-2);background:var(--secondary); border:1px solid var(--border);border-radius:999px;padding:5px 12px;margin:0 0 12px} .prop-place .icon{color:var(--pri)} .prop-map-note{font-size:clamp(8px,.65vw,9.5px);color:var(--muted);margin:10px 0 0; letter-spacing:.04em} /* Formulario compacto de la ficha: sin marco propio, va dentro de la tarjeta. */ .muv-form--inline{background:transparent;border:0;border-radius:0;padding:0; box-shadow:none} /* Dos columnas fijas: nombre y teléfono comparten fila, correo y mensaje a lo ancho. Con auto-fit el corte dependía del ancho y quedaba desordenado. */ .muv-form--inline .muv-form__grid{gap:10px; grid-template-columns:repeat(2,minmax(0,1fr))} .muv-form--inline .muv-form__field input, .muv-form--inline .muv-form__field textarea{padding:11px 13px; font-size:clamp(11px,.85vw,12.5px)} /* En la tarjeta el mensaje no necesita tanto alto como en la página de contacto: ya llega escrito. */ .muv-form--inline .muv-form__field textarea{min-height:84px} .btn--solid-teal{background:var(--pri);color:var(--white);width:100%} .btn--solid-teal:hover{background:var(--pri-600)} /* Aire entre los campos y el botón, que iba pegado al mensaje. */ .muv-form--inline .btn{margin-top:14px} /* En pantallas estrechas la rejilla pasa a una columna: tarjetas a lo ancho, con sitio de sobra para cualquier valor. Dos columnas de 160px volverían a partir "Apartamento". */ @media(max-width:520px){ .prop-facts{grid-template-columns:1fr;gap:8px} .prop-fact{padding:10px 12px} } .property__eyebrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .tag{font-size:.44rem;padding:3px 6px;text-transform:uppercase;font-weight:500; background:var(--sand);color:var(--pri);line-height:1.3} .tag--biz{background:var(--pri);color:var(--white)} .property__title{color:var(--pri);margin:0 0 8px; font-size:clamp(18px,2vw,24px);line-height:1.25} .property__location{display:flex;align-items:center;gap:6px;color:var(--muted); font-size:clamp(10px,.8vw,12px);margin:0;letter-spacing:-.04em} .property__location .icon{flex:0 0 auto;color:var(--pri)} .property__specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:0;list-style:none;margin:24px 0;padding:0;background:var(--white); border:1px solid var(--border);border-radius:var(--radius-card)} .property__specs li{display:flex;flex-direction:column;align-items:center;gap:4px; padding:16px 8px;border-right:1px solid var(--border);text-align:center} .property__specs li:last-child{border-right:none} .property__specs svg{width:20px;height:20px;color:var(--muted)} .property__specs strong{font-weight:400;color:var(--text-2);font-size:.85rem; letter-spacing:-.06em} .property__specs span{font-size:.52rem;color:var(--faint);letter-spacing:-.03em} .property__section{margin-top:32px} .property__section h2{font-size:clamp(18px,2.4vw,24px);line-height:1.3;margin:0 0 12px} /* Mismo cuerpo de texto que el resto de la web, justificado. */ .property__description{color:var(--text);font-size:var(--fs-copy); line-height:var(--lh-copy);letter-spacing:-.06em;text-align:justify; hyphens:none;-webkit-hyphens:none;text-wrap:pretty} .property__description p{margin:0 0 .9em} .property__description p:last-child{margin-bottom:0} .property__amenities{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px 18px;list-style:none;margin:0;padding:0} .property__amenities li{position:relative;padding-left:18px;color:var(--text); font-size:.68rem;letter-spacing:-.05em} .property__amenities li::before{content:"";position:absolute;left:4px;top:.6em; width:5px;height:5px;background:var(--sand)} .property__embed{position:relative;overflow:hidden;aspect-ratio:16/9;background:#eaeced; border:1px solid var(--border);border-radius:var(--radius-card)} .property__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .property__map-note{font-size:.62rem;color:var(--muted);margin-bottom:10px} .cta-card{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);padding:22px;box-shadow:var(--shadow-card); position:sticky;top:20px;display:flex;flex-direction:column;gap:10px} .cta-card__label{font-size:.62rem;color:var(--text-2);font-weight:300; letter-spacing:-.05em;margin:0} .cta-card__price{font-weight:500;color:var(--pri);font-size:1.15rem;letter-spacing:-.04em; margin:0;font-variant-numeric:tabular-nums} .cta-card__extra,.cta-card__code{font-size:.6rem;color:var(--muted);margin:0} .cta-card__code{padding-bottom:8px;border-bottom:1px solid var(--hairline)} .cta-card .btn{width:100%} .btn--wa{background:#25d366;color:#04331a} .btn--wa:hover{background:#1fb955} .broker{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:14px; border-top:1px solid var(--hairline)} .broker__photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto} .broker__role{font-size:.52rem;text-transform:uppercase;color:var(--faint);margin:0; letter-spacing:-.03em} .broker__name{font-size:.7rem;color:var(--text-2);margin:0;letter-spacing:-.05em} /* ----------------------------------------------- Páginas interiores * Patrón de apertura: migas de pan, título a la izquierda y texto en dos * columnas. Todas las secciones comparten el fondo crema (--secondary). */ .page--uniform{background:var(--secondary)} /* Cuerpo de texto editorial de las interiores: pequeño y delicado. */ :root{--fs-copy:clamp(12px,1.05vw,14px);--lh-copy:1.75} /* Párrafos justificados sin partir palabras. text-wrap:pretty reparte mejor los espacios y evita líneas huérfanas al final del párrafo. */ .page-intro__cols p,.split__text p,.split__intro p,.socia__text p, .ally__text,.page__content p{text-align:justify;hyphens:none; -webkit-hyphens:none;text-wrap:pretty} /* Migas al mismo borde izquierdo que el título, en clave MUV: versalitas diminutas, separador arena y la página actual en teal. */ /* Dentro de .page-intro el contenedor ya aporta el padding lateral. */ .breadcrumbs--page{max-width:none;margin:0;padding:0 0 clamp(12px,1.6vw,20px)} .page-intro{max-width:var(--max-box);margin-inline:auto; padding:clamp(22px,3vw,40px) var(--pad-x) clamp(28px,4vw,56px)} .page-intro__title{color:var(--pri);margin:0 0 clamp(16px,2.5vw,28px); text-align:left;font-size:clamp(21px,2.6vw,30px);line-height:1.25} .page-intro__cols{columns:2;column-gap:clamp(36px,5vw,80px);column-fill:balance; max-width:1100px} .page-intro__cols p{letter-spacing:-.06em;color:var(--text);margin-top:0; font-size:var(--fs-copy);line-height:var(--lh-copy)} @media(max-width:820px){.page-intro__cols{columns:1}} /* Imagen a todo el ancho del contenedor tras la introducción. */ .page-figure{max-width:var(--max-box);margin-inline:auto; padding:0 var(--pad-x) clamp(36px,5vw,72px)} .page-figure img{width:100%;height:auto} /* Apertura sin título visible (la página lo lleva dentro de su maqueta). La miga queda pegada al bloque de contenido y alineada con la foto. */ .page-intro--slim{padding-top:clamp(14px,1.8vw,22px);padding-bottom:0} .page-intro--slim+.split{padding-top:clamp(10px,1.4vw,18px)} /* ------------------------------------------------- Layout a dos columnas * split--media: foto a la izquierda, texto/formulario a la derecha. * split--form: texto a la izquierda, formulario ancho a la derecha. */ .split{max-width:var(--max-box);margin-inline:auto;display:grid; gap:clamp(28px,4vw,64px);align-items:start; padding:clamp(18px,3vw,34px) var(--pad-x) clamp(40px,6vw,80px)} .split--media{grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:stretch} .split--form{grid-template-columns:minmax(0,4fr) minmax(0,7fr)} /* La foto acompaña al alto de la columna de contenido en vez de imponer el suyo: así no quedan huecos cuando el texto es más corto o más largo. */ .split__media{margin:0;min-height:100%} .split__media img{width:100%;height:100%;min-height:clamp(340px,46vw,560px); object-fit:cover;object-position:center;display:block} .split--media .split__text{display:flex;flex-direction:column; justify-content:center} .split__text p{letter-spacing:-.06em;color:var(--text); font-size:var(--fs-copy);line-height:var(--lh-copy)} .split__text .page-intro__title{margin-bottom:1em} .split__text a{color:var(--pri);text-decoration:underline} .split__intro{margin-bottom:1.4em} .split__intro p{letter-spacing:-.06em;color:var(--text); font-size:var(--fs-copy);line-height:var(--lh-copy)} @media(max-width:900px){ .split--media,.split--form{grid-template-columns:1fr} .split__media{max-width:560px} } /* Secciones dentro de un formulario largo (consignación). */ .muv-form__section{grid-column:1/-1;font-family:var(--font); font-size:clamp(9px,.72vw,10.5px);font-weight:400;text-transform:uppercase; letter-spacing:.13em;color:var(--pri); margin:16px 0 0;padding-top:16px;border-top:1px solid var(--hairline)} .muv-form__section:first-child{margin-top:0;padding-top:0;border-top:0} /* ------------------------------------------------- Formulario por pasos * Indicador con la misma línea de progreso que los carruseles. */ .muv-steps{margin-bottom:22px} .muv-steps[aria-hidden="true"]{display:none} .muv-steps__label{display:flex;align-items:baseline;gap:10px;margin:0 0 10px; font-family:var(--font);font-size:clamp(9px,.72vw,10.5px);font-weight:300; letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .muv-steps__label [data-step-current]{color:var(--pri);font-weight:400} .muv-steps__name{color:var(--text-2)} .muv-steps__bar{position:relative;height:2px;background:#e4d9cc; border-radius:999px;overflow:hidden} .muv-steps__fill{display:block;height:100%;width:20%;background:var(--pri); border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)} .muv-step{border:0;margin:0;padding:0;min-inline-size:0} .muv-step[hidden]{display:none} .muv-step:not([hidden]){animation:muv-step-in .3s ease} @keyframes muv-step-in{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)}} .muv-form__actions{display:flex;gap:10px;align-items:center} .muv-form__actions .btn{flex:1} .muv-form__actions [hidden]{display:none} @media(prefers-reduced-motion:reduce){ .muv-step:not([hidden]){animation:none} } /* ------------------------------------------------- Aliados por categoría */ .allies-cat{max-width:var(--max-box);margin-inline:auto; padding:0 var(--pad-x) clamp(30px,4vw,56px)} .allies-cat__title{font-family:var(--serif);color:var(--pri); font-size:clamp(19px,2.6vw,26px);line-height:1.3;margin:0 0 18px; padding-bottom:10px;border-bottom:1px solid var(--sand)} .allies-cat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px} .ally{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);box-shadow:var(--shadow-card); padding:20px 22px} .ally__name{font-family:var(--font);font-size:.78rem;font-weight:400; text-transform:uppercase;letter-spacing:-.03em;color:var(--text-2);margin:0 0 8px} .ally__text{font-size:var(--fs-copy);letter-spacing:-.05em;color:var(--text); margin:0;line-height:var(--lh-copy)} .page__content--left{margin-inline:0;max-width:var(--max-box); padding-inline:var(--pad-x)} .page__content--left>*{max-width:78ch} /* ------------------------------------------------------------ Nosotras */ .section--intro{background:var(--secondary);padding:clamp(40px,5vw,72px) 5rem} .intro__inner{max-width:70ch;margin-inline:auto;text-align:center} .intro__inner p{letter-spacing:-.08em;color:var(--text)} /* Socias: foto y texto alternando lado. Mismo fondo en todas las secciones. */ .socia{display:flex;flex-direction:row;gap:5rem;align-items:center; padding:clamp(36px,5vw,72px) 5rem;background:var(--secondary)} .socia--flip{flex-direction:row-reverse} .socia__media{width:40%;flex:0 0 40%} .socia__media img{width:100%;aspect-ratio:4/5;object-fit:cover} .socia__text{flex:1} .socia__text p{letter-spacing:-.06em;color:var(--text); font-size:var(--fs-copy);line-height:var(--lh-copy)} .socia__name{font-family:var(--serif);color:var(--pri);margin:0 0 4px; font-size:clamp(19px,2.2vw,25px);line-height:1.3} .socia__role{font-size:clamp(9px,.75vw,11px);text-transform:uppercase; letter-spacing:.06em;color:var(--sand);margin-bottom:1.4em;font-weight:300} /* Equipo de aliados: carrusel con foto cuadrada tipo tarjeta. */ .section--team{background:var(--secondary);padding:clamp(40px,5vw,80px) 5rem; text-align:center} .section__lead{color:var(--text);letter-spacing:-.06em;max-width:56ch; margin:0 auto 2.4em;font-size:var(--fs-copy);line-height:var(--lh-copy)} /* Tarjeta fotográfica: la foto manda, sin marco ni sombra. En blanco y negro, que unifica retratos hechos en sitios y luces muy distintas; el color vuelve al pasar por encima. */ .team-card{margin:0;text-align:left;width:100%;background:transparent; display:block;color:inherit;text-decoration:none} .team-card__media{position:relative;display:block;overflow:hidden; background:var(--sand)} /* Proporción de post de Instagram (4:5): más alta que ancha, que es como vienen las fotos de perfil del equipo. */ .team-card img,.team-card__placeholder{width:100%;aspect-ratio:4/5;object-fit:cover; object-position:top center;display:block} /* El filtro sólo sobre la foto: si lo llevara la caja, el arena del hueco mientras carga saldría gris. */ .team-card img{filter:grayscale(1); transition:filter .45s ease,transform .5s cubic-bezier(.4,0,.2,1)} .team-card:hover img,.team-card:focus-visible img{filter:grayscale(0); transform:scale(1.04)} .team-card__placeholder{display:grid;place-items:center;font-family:var(--serif); font-size:2.4rem;color:var(--white);background:var(--sand)} .team-card:focus-visible{outline:2px solid var(--pri);outline-offset:3px} /* Invitación que asoma desde abajo sólo con el cursor encima. */ .team-card__cta{position:absolute;left:0;right:0;bottom:0;padding:9px 10px; background:rgba(0,71,82,.88);color:var(--white);text-align:center; font-size:clamp(7.5px,.6vw,9px);font-weight:300;text-transform:uppercase; letter-spacing:.12em;transform:translateY(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .team-card:hover .team-card__cta, .team-card:focus-visible .team-card__cta{transform:translateY(0)} .team-card figcaption,.team-card__info{padding:12px 2px 0;display:flex; flex-direction:column;gap:3px} .team-card__name{font-size:clamp(9px,.78vw,11px);color:var(--text-2); letter-spacing:.06em;text-transform:uppercase;font-weight:300; transition:color .25s ease} .team-card:hover .team-card__name{color:var(--pri)} .team-card__city{font-size:clamp(8px,.7vw,10px);color:var(--muted); letter-spacing:.05em} /* En pantalla táctil no hay cursor: color siempre e invitación visible. */ @media(hover:none){ .team-card img{filter:grayscale(0)} .team-card__cta{transform:translateY(0)} } /* Línea de progreso: sustituye a los puntos cuando hay muchos elementos. */ .muv-carousel__bar{position:relative;height:2px;max-width:220px; margin:26px auto 0;background:#e4d9cc;border-radius:999px;overflow:hidden} .muv-carousel__bar-fill{position:absolute;top:0;bottom:0;left:0;width:20%; background:var(--pri);border-radius:999px; transition:transform .2s ease,width .2s ease} /* Variante del carrusel para el equipo: cuatro fotos por vista. */ .muv-carousel--team{text-align:left} .muv-carousel--team .muv-carousel__slide{flex-basis:calc((100% - 72px)/4)} @media(max-width:1199px){ .muv-carousel--team .muv-carousel__slide{flex-basis:calc((100% - 48px)/3)} } @media(max-width:767px){ .muv-carousel--team .muv-carousel__slide{flex-basis:46%;scroll-snap-align:center} } .team-card__link{font-size:.58rem;text-transform:uppercase;letter-spacing:-.03em; color:var(--pri);margin-top:2px} .team-card__link:hover{text-decoration:underline} /* Pasos del proceso de consignación */ .section--pasos{padding:clamp(40px,5vw,80px) 5rem;background:var(--body-bg); text-align:center} .pasos{list-style:none;margin:2em auto 0;padding:0;max-width:var(--max); display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px; text-align:left;counter-reset:paso} .paso{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);padding:22px 20px} .paso__num{font-family:var(--serif);font-size:1.6rem;color:var(--sand); display:block;line-height:1;margin-bottom:10px} .paso__titulo{font-family:var(--font);font-size:.8rem;font-weight:400; text-transform:uppercase;letter-spacing:-.04em;color:var(--pri);margin:0 0 8px} .paso__texto{font-size:.72rem;letter-spacing:-.05em;color:var(--text);margin:0; line-height:1.6} /* ------------------------------------------------------------- Contacto */ .section--contacto{display:flex;flex-direction:row;gap:5rem;align-items:flex-start; padding:clamp(40px,5vw,72px) 5rem;background:var(--secondary)} .contacto__aside{width:38%;flex:0 0 38%} .contacto__aside p{letter-spacing:-.08em;color:var(--text)} .contacto__forms{flex:1} .contacto__datos{list-style:none;margin:2em 0 0;padding:0;display:grid;gap:16px} .contacto__datos li{display:flex;flex-direction:column;gap:2px;font-size:.75rem; letter-spacing:-.05em;color:var(--text-2)} .contacto__label{font-size:.6rem;text-transform:uppercase;letter-spacing:-.04em; color:var(--faint)} .contacto__datos a:hover{color:var(--pri);text-decoration:underline} .section--consigna{padding:clamp(40px,5vw,80px) 5rem;background:var(--body-bg)} .consigna__inner{max-width:820px;margin-inline:auto;text-align:center} .consigna__inner .muv-form{text-align:left} /* -------------------------------------------------------------- Formularios */ .muv-form{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);padding:clamp(20px,3vw,32px); box-shadow:var(--shadow-card)} .muv-form__title{font-family:var(--serif);color:var(--pri);margin:0 0 18px; font-size:clamp(18px,2.4vw,24px);line-height:1.3} .muv-form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px} .muv-form__field{margin:0;display:flex;flex-direction:column;gap:5px} .muv-form__field--wide{grid-column:1/-1} .muv-form__field label{font-size:.65rem;color:#4b5563;font-weight:300; letter-spacing:-.04em} .muv-form__field label span{color:var(--sand)} .muv-form__field input,.muv-form__field select,.muv-form__field textarea{ width:100%;border-radius:var(--radius);border:1px solid var(--border); padding:10px 12px;font-size:.72rem;color:var(--text-dark);background:var(--white); font-family:var(--font);font-weight:300;letter-spacing:-.04em; transition:border-color .2s ease} .muv-form__field input:focus,.muv-form__field select:focus, .muv-form__field textarea:focus{outline:none;border-color:var(--pri)} .muv-form__field textarea{resize:vertical;min-height:110px} .muv-form__field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:30px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 14px) center,calc(100% - 10px) center; background-size:4px 4px,4px 4px;background-repeat:no-repeat} .muv-form__legal{font-size:.6rem;color:var(--muted);letter-spacing:-.04em; margin:16px 0 18px} /* Honeypot: fuera de la vista pero accesible para los robots. */ .muv-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .muv-form__notice{padding:12px 16px;border-radius:var(--radius);font-size:.72rem; letter-spacing:-.04em;margin:0 0 18px} .muv-form__notice--ok{background:var(--pri-light);color:var(--pri); border:1px solid rgba(0,71,82,.18)} .muv-form__notice--error{background:#fdf0f0;color:#a62121;border:1px solid #f2d4d4} @media(max-width:1024px){ .section--intro,.section--team,.section--consigna{padding-inline:2rem} .socia,.section--contacto{padding-inline:2rem;gap:2rem} } @media(max-width:767px){ .section--intro,.section--team,.section--consigna{padding-inline:1rem} .socia,.section--contacto{flex-direction:column;padding-inline:1rem;gap:1.5rem} .socia--flip{flex-direction:column} .socia__media,.contacto__aside{width:100%;flex:0 0 auto} .team-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} } /* --------------------------------------------------------- Páginas estáticas */ .page__content{padding:clamp(28px,4vw,56px) var(--pad-x);max-width:80ch; margin-inline:auto;color:var(--text);letter-spacing:-.08em} .page__content h2,.page__content h3{margin-top:1.4em;margin-bottom:.4em} .page__content a{color:var(--pri);text-decoration:underline} .page__cover img{width:100%;max-height:480px;object-fit:cover} /* ----------------------------------------------------------------- Error 404 * Composición centrada y contenida: sin el numeral gigante de antes, que * gritaba más que el resto del sitio. El peso lo lleva la salida —buscar por * código— porque casi todos estos errores llegan con un código antiguo. */ .muv-404{text-align:center;padding:clamp(48px,6vw,96px) var(--pad-x) clamp(40px,5vw,72px)} .muv-404__inner{max-width:620px;margin:0 auto} .muv-404__eyebrow{font-size:clamp(8px,.68vw,10px);text-transform:uppercase; letter-spacing:.22em;color:var(--faint);font-weight:300;margin:0 0 14px} .muv-404__title{font-family:var(--serif);font-weight:400;color:var(--pri); font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.25;letter-spacing:-.01em; margin:0} .muv-404__lead{font-size:var(--fs-copy);line-height:var(--lh-copy); color:var(--text);max-width:46ch;margin:14px auto 0;text-wrap:pretty} .muv-404__search{margin-top:clamp(26px,3vw,36px)} .muv-404__label{display:block;font-size:clamp(8.5px,.7vw,10px); text-transform:uppercase;letter-spacing:.14em;color:var(--muted); font-weight:300;margin-bottom:10px} .muv-404__field{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .muv-404__field .muv-capsule{flex:0 1 190px;background:var(--white)} .muv-404__field .btn{height:42px;padding:0 28px} .muv-404__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin:22px 0 0} /* Atajos: una línea de texto fina, separada por filetes verticales. */ .muv-404__links{display:flex;flex-wrap:wrap;justify-content:center; gap:0 18px;max-width:860px;margin:clamp(26px,3vw,38px) auto 0; padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--hairline)} .muv-404__links a{position:relative;font-size:clamp(8.5px,.7vw,10px); text-transform:uppercase;letter-spacing:.1em;color:var(--muted); font-weight:300;padding:4px 0;transition:color .25s ease} .muv-404__links a::after{content:"";position:absolute;top:50%;right:-9px; width:1px;height:9px;transform:translateY(-50%);background:var(--border)} .muv-404__links a:last-child::after{display:none} .muv-404__links a:hover{color:var(--pri)} .muv-404__suggested{margin-top:clamp(40px,5vw,72px)} .muv-404__subtitle{font-size:clamp(8.5px,.72vw,10px);text-transform:uppercase; letter-spacing:.18em;color:var(--muted);font-weight:300; margin:0 0 clamp(18px,2vw,26px)} @media(max-width:660px){ /* Al partirse en varias líneas, el filete quedaría colgando al final de cada una: mejor sin él y con más aire entre atajos. */ .muv-404__links{gap:10px 20px} .muv-404__links a::after{display:none} } @media(max-width:520px){ .muv-404__field{flex-direction:column;align-items:stretch} .muv-404__field .muv-capsule{flex:1 1 auto} .muv-404__actions .btn{flex:1 1 100%} } /* ------------------------------------------------------------------ Pie * Fondo crema, logo al 25%, menú al 75%, línea superior tenue y aviso * legal diminuto en versalitas. Igual que en producción. */ .site-footer{background:var(--secondary); padding:clamp(44px,6vw,88px) var(--pad-x) clamp(20px,2.4vw,32px); border-top:1px solid rgba(190,178,171,.28)} /* Tres columnas: marca, navegación y contacto. */ .site-footer__grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:start;max-width:var(--max-wide); margin-inline:auto;padding-bottom:clamp(28px,3.5vw,48px)} .site-footer__nav,.site-footer__contact{margin:0} .site-footer__brand img{width:100%;max-width:196px;height:auto} /* El eslogan va en la tipografía de los textos del sitio, no en la serif: es una frase de lectura, no un titular. */ .site-footer__claim{font-family:var(--font);font-size:var(--fs-copy); line-height:var(--lh-copy);font-weight:300;letter-spacing:-.03em; color:var(--pri);margin:14px 0 20px;max-width:26ch} .site-footer__title{font-family:var(--font);font-size:clamp(9px,.7vw,10px); font-weight:400;text-transform:uppercase;letter-spacing:.16em; color:var(--muted);margin:0 0 16px} .site-footer__list{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:11px} .site-footer__list li,.site-footer__list a{font-size:clamp(11px,.85vw,12.5px); font-weight:300;letter-spacing:-.03em;color:var(--text-2); /* El correo es más largo que la columna en móvil: parte antes de salirse. */ overflow-wrap:anywhere} .site-footer__list a{position:relative;display:inline-block; transition:color .22s ease,transform .22s ease} .site-footer__list a:hover{color:var(--pri);transform:translateX(3px)} .site-footer__list .current-menu-item>a{color:var(--pri)} /* Redes en círculo, con relleno teal al pasar. */ .site-footer__social{display:flex;gap:10px} .site-footer__social a{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;border:1px solid var(--border); background:var(--white);color:var(--pri); transition:background-color .25s ease,color .25s ease,border-color .25s ease, transform .25s ease} .site-footer__social a:hover{background:var(--pri);border-color:var(--pri); color:var(--white);transform:translateY(-2px)} .site-footer__social svg{width:16px;height:16px} .site-footer__legal{display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:10px;border-top:1px solid rgba(190,178,171,.28); padding-top:clamp(16px,2vw,24px);max-width:var(--max-wide);margin-inline:auto} .site-footer__legal p{font-size:clamp(8px,.65vw,9.5px);text-transform:uppercase; font-weight:300;letter-spacing:.12em;color:var(--muted);margin:0} .site-footer__legal a{color:var(--muted);transition:color .2s ease} .site-footer__legal a:hover{color:var(--pri)} /* En pantallas medias y móvil: marca centrada arriba y, debajo, las dos listas en columnas. El pie legal también centrado. */ @media(max-width:820px){ .site-footer{padding-top:clamp(34px,7vw,52px)} .site-footer__grid{grid-template-columns:1fr 1fr;gap:28px 24px; padding-bottom:26px} .site-footer__brand{grid-column:1/-1;display:flex;flex-direction:column; align-items:center;text-align:center} .site-footer__brand img{max-width:168px} .site-footer__claim{margin:12px 0 16px;max-width:28ch} .site-footer__social{justify-content:center} .site-footer__title{margin-bottom:12px} .site-footer__list{gap:9px} .site-footer__list a:hover{transform:none} .site-footer__legal{flex-direction:column;align-items:center;text-align:center; gap:5px} /* Las dos listas arrancan a la misma altura: los títulos comparten línea base aunque una columna sea más larga que la otra. */ .site-footer__nav,.site-footer__contact{margin-top:0;align-self:start} .site-footer__claim{max-width:30ch} /* El correo es la cadena más larga del pie y los menús de navegación son cortos: la columna de contacto se lleva el sitio que sobra, y aun así el correo baja un punto para entrar entero en vez de partirse. */ .site-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)} .site-footer__list a[href^="mailto:"]{font-size:10px;letter-spacing:-.05em} } @media(max-width:1024px){ .property__layout{grid-template-columns:1fr} .cta-card{position:static} } /* ------------------------------------------------- Asistente de WhatsApp * Botón flotante que abre un panel de conversación. En iPhone se sitúa por * encima de la barra de gestos. */ .wa{position:fixed;right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom));z-index:95; display:flex;flex-direction:column;align-items:flex-end;gap:12px} .wa__toggle{width:52px;height:52px;border:0;border-radius:50%;background:#25d366; color:#04331a;display:grid;place-items:center; box-shadow:0 6px 20px rgba(37,211,102,.38); transition:transform .22s ease,background-color .22s ease} .wa__toggle:hover{transform:scale(1.06)} .wa__icon-close{display:none} .wa.is-open .wa__toggle{background:var(--pri);color:var(--white)} .wa.is-open .wa__icon-chat{display:none} .wa.is-open .wa__icon-close{display:block} .wa__panel{order:-1;width:min(330px,calc(100vw - 36px)); max-height:min(74vh,540px);display:flex;flex-direction:column; background:var(--white);border:1px solid var(--border); border-radius:14px;overflow:hidden; box-shadow:0 24px 60px rgba(0,71,82,.20),0 4px 12px rgba(0,0,0,.06); animation:wa-in .26s cubic-bezier(.4,0,.2,1)} .wa__panel[hidden]{display:none} @keyframes wa-in{from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)}} .wa__head{display:flex;align-items:center;gap:12px;padding:16px 18px; background:var(--pri);color:var(--white); background-image:linear-gradient(135deg,var(--pri) 0%,var(--pri-700) 100%)} .wa__avatar-wrap{position:relative;flex:0 0 auto;line-height:0} .wa__avatar{width:38px;height:38px;border-radius:50%;background:var(--white); object-fit:contain;padding:5px;display:block} .wa__dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px; border-radius:50%;background:#25d366;border:2px solid var(--pri)} .wa__id{min-width:0} .wa__name{font-family:var(--serif);font-size:clamp(13px,1vw,15px);margin:0; letter-spacing:.01em;line-height:1.2} .wa__status{font-family:var(--font);font-size:clamp(8px,.62vw,9px);margin:2px 0 0; opacity:.72;letter-spacing:.1em;text-transform:uppercase} .wa__body{flex:1 1 auto;overflow-y:auto;padding:16px;background:var(--secondary); display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch} .wa__msg{margin:0;padding:9px 12px;border-radius:12px;max-width:88%; font-size:clamp(10px,.8vw,12px);line-height:1.55;letter-spacing:-.02em} .wa__msg--bot{background:var(--white);border:1px solid var(--border); color:var(--text-2);border-bottom-left-radius:3px;align-self:flex-start} .wa__msg--user{background:var(--pri);color:var(--white); border-bottom-right-radius:3px;align-self:flex-end} .wa__options{display:flex;flex-wrap:wrap;gap:7px;padding:13px 14px; border-top:1px solid var(--hairline);background:var(--white);flex:0 0 auto} .wa__opt{border:1px solid var(--border);background:var(--white);color:var(--text-2); border-radius:999px;padding:8px 14px;font-family:var(--font); font-size:clamp(9px,.72vw,10.5px);font-weight:300;letter-spacing:.05em; transition:all .2s ease} .wa__opt:hover{border-color:var(--pri);color:var(--pri);background:var(--secondary)} /* Cierre del guion: acciones apiladas con jerarquía clara. */ .wa__options--actions{flex-direction:column;gap:8px} .wa__options--actions .wa__opt{width:100%;text-align:center;padding:11px 14px; border-radius:var(--radius);letter-spacing:.11em;text-transform:uppercase} .wa__opt--primary{background:var(--pri);border-color:var(--pri);color:var(--white)} .wa__opt--primary:hover{background:var(--pri-600);border-color:var(--pri-600); color:var(--white)} .wa__opt--quiet{border-color:transparent;color:var(--muted); font-size:clamp(8px,.62vw,9.5px);padding:4px 10px} .wa__opt--quiet:hover{border-color:transparent;background:transparent;color:var(--pri)} /* Paso con texto libre. */ .wa__options--text{flex-wrap:nowrap;align-items:center;gap:8px} .wa__field{flex:1;min-width:0;border:1px solid var(--border);border-radius:999px; padding:9px 14px;font-family:var(--font);font-size:clamp(10px,.78vw,11.5px); font-weight:300;color:var(--text-dark);background:var(--secondary); transition:border-color .2s ease} .wa__field:focus{outline:none;border-color:var(--pri);background:var(--white)} .wa__send{flex:0 0 auto;border:0;border-radius:999px;background:var(--pri); color:var(--white);padding:9px 16px;font-family:var(--font); font-size:clamp(8.5px,.66vw,10px);letter-spacing:.1em;text-transform:uppercase; transition:background-color .2s ease} .wa__send:hover{background:var(--pri-600)} @media(max-width:520px){ .wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))} .wa__panel{width:calc(100vw - 28px);max-height:70vh} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } @media print{ .site-header,.site-footer,.wa-float,.muv-bar-wrap,.muv-advanced, .gallery__nav,.gallery__thumbs,.cta-card .btn,.section--related{display:none !important} body{background:#fff} .property__layout{grid-template-columns:1fr} } /* ===================================================================== * Desplegables a medida * * El panel de un