.roma382-deps{--roma-orange:#DA4E18;position:relative;background:#fff;color:#242424;width:100%;overflow:hidden}.roma382-deps *{box-sizing:border-box}.roma382-dep-slide{display:none}.roma382-dep-slide.is-active{display:block}.roma382-dep-inner{max-width:1200px;margin:0 auto;padding:72px 0 0}.roma382-dep-header{display:grid;grid-template-columns:175px 330px 1fr;grid-template-areas:"title . ." "areas features location";column-gap:54px;row-gap:41px;align-items:start}.roma382-dep-title{grid-area:title;display:flex;align-items:flex-start;gap:8px}.roma-flat{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:42px;font-weight:400;line-height:1}.roma-number{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:18px;line-height:1;background:var(--roma-orange);color:#fff;padding:2px 5px 3px;margin-top:-2px}.roma382-dep-areas{grid-area:areas;display:flex;flex-direction:column;gap:0;width:175px}.roma382-dep-areas>div{display:grid;grid-template-columns:max-content 1fr;align-items:baseline;column-gap:6px;width:100%;white-space:nowrap;line-height:1.18}.roma382-dep-areas strong{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:18px;font-weight:500;text-align:right}.roma382-dep-areas span{font-size:11px;text-align:left}.roma382-dep-features{grid-area:features;display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:minmax(125px,1fr);gap:2px 34px;font-size:14px;line-height:1.25;margin-top:0;overflow:visible}.roma382-dep-location{grid-area:location;justify-self:end;max-width:235px}.roma382-dep-location img{display:block;width:100%;height:auto}.roma382-dep-plan-wrap{margin:41px auto 0;position:relative;max-width:1030px}.roma382-zoom-trigger{display:block;position:relative;width:100%;padding:0;border:0;background:transparent!important;box-shadow:none!important;cursor:zoom-in}.roma382-zoom-trigger:hover,.roma382-zoom-trigger:focus{background:transparent!important}.roma382-dep-plan{display:block;width:100%}.roma382-dep-plan img{display:block;width:100%;height:auto}.roma382-zoom-badge{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.88);color:#222;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}.roma382-zoom-trigger:hover .roma382-zoom-badge,.roma382-zoom-trigger:focus .roma382-zoom-badge{opacity:1;transform:none}.roma382-dep-note{display:block;margin-top:13px;font-size:10px;color:#8b827d}.roma382-deps-pagination{display:flex;justify-content:center;gap:5px;padding:41px 20px 30px}.roma382-deps-pagination button{width:34px;height:6px;padding:0;border:1px solid #9d9d9d;background:transparent!important;border-radius:0;transition:width .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,transform .25s ease}.roma382-deps-pagination button.is-active{width:58px;background:#353535!important;border-color:#353535!important}.roma382-deps-pagination button:hover,.roma382-deps-pagination button:focus,.roma382-deps-pagination button:active{background:#353535!important;border-color:#353535!important;transform:scale(1.03)}.roma382-deps-pagination button.is-active:hover,.roma382-deps-pagination button.is-active:focus,.roma382-deps-pagination button.is-active:active{background:#353535!important;border-color:#353535!important} .roma382-zoom-modal{position:fixed;inset:0;z-index:999999;background:rgba(20,20,20,.92);display:none;align-items:center;justify-content:center}.roma382-zoom-modal.is-open{display:flex}.roma382-zoom-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}.roma382-zoom-stage.is-dragging{cursor:grabbing}.roma382-zoom-image{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center center;user-select:none;-webkit-user-drag:none;will-change:transform}.roma382-zoom-close{position:absolute;right:24px;top:20px;z-index:4;width:44px;height:44px;border:0!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:34px;font-weight:300;line-height:1;border-radius:50%;transition:background .2s ease,transform .2s ease}.roma382-zoom-close:hover{background:rgba(255,255,255,.22)!important;transform:rotate(4deg)}.roma382-zoom-toolbar{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;gap:2px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:4px;border-radius:999px}.roma382-zoom-toolbar button{height:40px;min-width:44px;border:0!important;background:transparent!important;color:#fff!important;padding:0 14px;font-size:18px}.roma382-zoom-toolbar button[data-action="reset"]{font-size:12px;min-width:62px}.roma382-zoom-toolbar button:hover{background:rgba(255,255,255,.12)!important;border-radius:999px} @media(max-width:1239px) and (min-width:768px){.roma382-dep-inner{padding-left:32px;padding-right:32px}} @media(max-width:767px){.roma382-dep-inner{padding:38px 28px 20px}.roma382-dep-header{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title areas" "features features" "location location";column-gap:22px}.roma-flat{font-size:36px}.roma-number{font-size:14px}.roma382-dep-areas{display:block;justify-self:end}.roma382-dep-areas>div{gap:5px;margin-bottom:2px}.roma382-dep-areas strong{font-size:16px}.roma382-dep-areas span{font-size:9px}.roma382-dep-features{grid-template-columns:1fr;gap:2px;font-size:14px;margin-top:35px}.roma382-dep-location{margin-top:28px;justify-self:start;max-width:95px}.roma382-dep-plan-wrap{margin:24px 0 0;max-width:none}.roma382-dep-plan{max-width:260px;margin:0 auto}.roma382-zoom-trigger{width:auto;margin:0 auto}.roma382-zoom-badge{opacity:1;width:34px;height:34px;right:8px;bottom:8px}.roma382-dep-note{margin-top:8px;font-size:9px}.roma382-deps-pagination{justify-content:flex-end;padding:16px 28px 28px;gap:4px}.roma382-deps-pagination button{width:16px;height:5px;border-color:var(--roma-orange)}.roma382-deps-pagination button.is-active{width:28px;background:var(--roma-orange)!important;border-color:var(--roma-orange)}.roma382-deps-pagination button:hover,.roma382-deps-pagination button:focus{background:rgba(218,78,24,.45)!important;border-color:rgba(218,78,24,.7)}.roma382-zoom-close{right:14px;top:14px}.roma382-zoom-toolbar{bottom:18px}.roma382-zoom-toolbar button{height:42px}} /* v1.1.0 - composición mobile según diseño Roma 382 */ .roma382-dep-plan-mobile-wrap{display:none} @media(max-width:767px){ .roma382-dep-inner{padding:38px 28px 20px} .roma382-dep-header{ display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.92fr); grid-template-areas: "title areas" "features planmobile" "location planmobile"; column-gap:24px; row-gap:34px; align-items:start; } .roma382-dep-title{grid-area:title} .roma-flat{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:42px;font-weight:400;line-height:1} .roma-number{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:18px;font-weight:400} .roma382-dep-areas{grid-area:areas;display:flex;width:100%;max-width:170px;justify-self:start;gap:2px} .roma382-dep-areas>div{display:grid;grid-template-columns:58px 1fr;column-gap:7px;width:100%;line-height:1.18;margin:0} .roma382-dep-areas strong{font-size:16px;text-align:left} .roma382-dep-areas span{font-size:9px;text-align:left;white-space:nowrap} .roma382-dep-features{grid-area:features;display:flex;flex-direction:column;gap:3px;margin:0;font-size:14px;line-height:1.25;overflow:visible} .roma382-dep-location{grid-area:location;justify-self:start;align-self:start;margin:18px 0 0;max-width:105px} .roma382-dep-plan-mobile-wrap{grid-area:planmobile;display:block;align-self:start;min-width:0} .roma382-dep-plan-mobile-wrap .roma382-zoom-trigger{width:100%;margin:0} .roma382-dep-plan-mobile-wrap .roma382-dep-plan{display:block;width:100%;max-width:none;margin:0} .roma382-dep-plan-mobile-wrap .roma382-dep-plan img{width:100%;height:auto} .roma382-dep-plan-wrap{margin:0} .roma382-dep-plan-wrap>.roma382-zoom-trigger{display:none} .roma382-dep-plan-wrap .roma382-dep-note{display:block;margin-top:10px} } @media(max-width:430px){ .roma382-dep-inner{padding-left:20px;padding-right:20px} .roma382-dep-header{grid-template-columns:minmax(0,.9fr) minmax(145px,1.1fr);column-gap:16px} } /* v1.1.1 - correcciones mobile */ .roma-flat,.roma-number,.roma382-dep-areas strong{ font-family:"ClashDisplay","Clash Display","ClashDisplay-Regular","Clash Display Regular",sans-serif; font-synthesis:none; } .roma382-dep-plan-mobile-wrap{display:none!important} @media(min-width:768px){ .roma382-dep-plan-mobile-wrap{display:none!important} .roma382-dep-plan-wrap>.roma382-zoom-trigger{display:block!important} } @media(max-width:767px){ /* Nunca mostrar el plano desktop dentro del flujo mobile */ .roma382-dep-plan-wrap>.roma382-zoom-trigger{display:none!important} .roma382-dep-plan-mobile-wrap{display:block!important} /* Medidas: mismo tratamiento que desktop y bloque pegado al inicio de su columna */ .roma382-dep-areas{ justify-self:start!important; width:170px!important; max-width:100%!important; margin:0!important; gap:0!important; } .roma382-dep-areas>div{ display:grid!important; grid-template-columns:58px 1fr!important; column-gap:6px!important; align-items:baseline!important; width:100%!important; margin:0!important; line-height:1.18!important; } .roma382-dep-areas strong{ font-size:16px!important; font-weight:500!important; text-align:right!important; white-space:nowrap!important; } .roma382-dep-areas span{ font-size:9px!important; text-align:left!important; white-space:nowrap!important; } /* Indicadores mobile: siempre naranja al interactuar */ .roma382-deps-pagination button:hover, .roma382-deps-pagination button:focus, .roma382-deps-pagination button:active{ background:var(--roma-orange)!important; border-color:var(--roma-orange)!important; opacity:.72; } .roma382-deps-pagination button.is-active, .roma382-deps-pagination button.is-active:hover, .roma382-deps-pagination button.is-active:focus, .roma382-deps-pagination button.is-active:active{ background:var(--roma-orange)!important; border-color:var(--roma-orange)!important; opacity:1; } } /* v1.1.2 - restaurar desktop v1.0.8 + ajustes mobile finales */ @media(min-width:768px){ .roma382-dep-areas{grid-area:areas;display:flex;flex-direction:column;gap:0;width:175px} .roma382-dep-areas>div{display:grid;grid-template-columns:max-content 1fr;align-items:baseline;column-gap:6px;width:100%;white-space:nowrap;line-height:1.18;margin:0} .roma382-dep-areas strong{font-family:"ClashDisplay","Clash Display",sans-serif;font-size:18px;font-weight:500;text-align:right;white-space:nowrap} .roma382-dep-areas span{font-size:11px;text-align:left;white-space:nowrap} } @media(max-width:767px){ /* Bloque de medidas pegado al lado derecho de su columna */ .roma382-dep-areas{ justify-self:end!important; width:auto!important; max-width:none!important; margin:0!important; } .roma382-dep-areas>div{ grid-template-columns:58px max-content!important; column-gap:6px!important; width:auto!important; } /* En mobile no mostrar la leyenda de imágenes referenciales */ .roma382-dep-note{display:none!important} } /* v1.1.3 - ajuste definitivo medidas desktop */ @media(min-width:768px){ .roma382-dep-areas{ width:190px; } .roma382-dep-areas>div{ grid-template-columns:82px max-content; column-gap:20px; width:auto; } .roma382-dep-areas strong{ text-align:right; } .roma382-dep-areas span{ text-align:left; } } /* v1.1.4 - afinado responsive laptop + tablet, sin alterar desktop >=1240 ni mobile <=767 */ @media (min-width:1024px) and (max-width:1239px){ .roma382-dep-inner{ padding-left:32px; padding-right:32px; } .roma382-dep-header{ grid-template-columns:165px 300px minmax(0,1fr); column-gap:36px; row-gap:38px; } .roma-flat{font-size:40px} .roma-number{font-size:17px} .roma382-dep-areas{width:175px} .roma382-dep-areas>div{ grid-template-columns:76px max-content; column-gap:14px; } .roma382-dep-areas strong{font-size:17px} .roma382-dep-areas span{font-size:10.5px} .roma382-dep-features{ grid-auto-columns:minmax(118px,1fr); gap:2px 24px; font-size:13.5px; } .roma382-dep-location{max-width:210px} .roma382-dep-plan-wrap{ max-width:960px; margin-top:38px; } } @media (min-width:768px) and (max-width:1023px){ .roma382-dep-inner{ padding:52px 28px 0; } .roma382-dep-header{ display:grid; grid-template-columns:145px minmax(0,1fr) 170px; grid-template-areas: "title . location" "areas features location"; column-gap:24px; row-gap:34px; align-items:start; } .roma-flat{font-size:38px} .roma-number{font-size:16px} .roma382-dep-areas{ width:145px; align-self:start; } .roma382-dep-areas>div{ grid-template-columns:64px max-content; column-gap:10px; line-height:1.2; } .roma382-dep-areas strong{font-size:16px} .roma382-dep-areas span{font-size:9.5px} .roma382-dep-features{ grid-template-rows:repeat(5,auto); grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr); gap:2px 20px; font-size:13px; line-height:1.24; } .roma382-dep-location{ max-width:170px; justify-self:end; } .roma382-dep-plan-wrap{ width:100%; max-width:900px; margin:34px auto 0; } .roma382-dep-note{margin-top:13px} .roma382-deps-pagination{padding-top:34px} } /* ========================================================== ROMA 382 — v1.1.8 DESKTOP — ESTRUCTURA SEGÚN DISEÑO ORIGINAL 1) Medidas: valor ↔ etiqueta = 10px 2) Bloques: medidas ↔ información = 90px 3) Información: columna 1 ↔ columna 2 = 50px 4) Ubicación: máximo 240px y pegada a la derecha ========================================================== */ .roma382-dep-info{ display:contents; } @media (min-width:1240px){ /* Título / bloque de datos a la izquierda, ubicación independiente pegada a la derecha */ .roma382-dep-header{ display:grid; grid-template-columns:minmax(0,1fr) 240px; grid-template-areas: "title location" "info location"; column-gap:40px; row-gap:41px; align-items:start; } /* Contenedor izquierdo: MEDIDAS --90px-- INFORMACIÓN */ .roma382-dep-info{ grid-area:info; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:90px; align-items:start; justify-content:start; width:100%; min-width:0; } /* ========================================= BLOQUE 1 — MEDIDAS ========================================= */ .roma382-dep-areas{ grid-area:auto; display:flex; flex-direction:column; width:max-content; margin:0; gap:0; transform:none !important; } .roma382-dep-areas > div{ display:grid; /* valor + 10px + etiqueta */ grid-template-columns:max-content max-content; column-gap:10px; align-items:baseline; width:max-content; margin:0; line-height:1.18; white-space:nowrap; } .roma382-dep-areas strong{ font-family:"ClashDisplay",sans-serif; font-size:18px; font-weight:500; text-align:left; white-space:nowrap; } .roma382-dep-areas span{ font-size:11px; text-align:left; white-space:nowrap; } /* ========================================= BLOQUE 2 — INFORMACIÓN DEL DEPARTAMENTO Dos columnas separadas 50px ========================================= */ .roma382-dep-features{ grid-area:auto; display:grid; grid-template-rows:repeat(5,auto); grid-auto-flow:column; /* cada columna toma solo lo que necesita */ grid-auto-columns:max-content; row-gap:2px; column-gap:50px; justify-content:start; align-content:start; margin:0; font-size:14px; line-height:1.25; overflow:visible; transform:none !important; } /* ========================================= BLOQUE 3 — UBICACIÓN ========================================= */ .roma382-dep-location{ grid-area:location; justify-self:end; align-self:start; width:100%; max-width:240px; margin:0; } .roma382-dep-location img{ display:block; width:100%; max-width:240px; height:auto; margin-left:auto; } } /* ========================================================== ROMA 382 — v1.1.9 DESKTOP — AJUSTE FINAL DE ALINEACIONES - Valores m² alineados a la derecha - Etiquetas de área alineadas a la izquierda - Separación interna conservada en 10px - Mini ubicación alineada verticalmente con los bloques de medidas e información ========================================================== */ @media (min-width:1240px){ /* BLOQUE DE MEDIDAS El ancho de la primera columna lo fija el valor más largo. Todos los m² quedan alineados por la derecha. */ .roma382-dep-areas > div{ grid-template-columns:78px max-content; column-gap:10px; } .roma382-dep-areas strong{ display:block; width:78px; text-align:right !important; } .roma382-dep-areas span{ display:block; text-align:left !important; } /* UBICACIÓN Ya no arranca a la altura del título. Se alinea con el inicio del bloque de información. */ .roma382-dep-location{ align-self:start; margin-top:calc(41px + 1.05em + 0px); } } /* ========================================================== ROMA 382 — v1.1.10 ÚLTIMOS AJUSTES DESKTOP ========================================================== */ @media (min-width:1240px){ /* El bloque completo de datos comienza en el mismo eje izquierdo del título Flat / layout. */ .roma382-dep-info{ margin-left:-30px; } /* Compensamos internamente para mantener las proporciones definidas: 10px / 90px / 50px. */ .roma382-dep-areas{ margin-left:30px; } /* La mini ubicación baja un poco más para alinear visualmente su contenido con el bloque informativo. */ .roma382-dep-location{ margin-top:calc(41px + 1.05em + 18px); } } /* ========================================================== ROMA 382 — v1.1.11 ALINEACIÓN FINAL DESKTOP + TABLET ========================================================== */ /* -------------------------- DESKTOP >= 1240px -------------------------- */ @media (min-width:1240px){ /* Todo el bloque (medidas + características) se alinea con el mismo eje izquierdo del título Flat. */ .roma382-dep-info{ margin-left:-27px; } /* Eliminamos la compensación que impedía llegar al borde. */ .roma382-dep-areas{ margin-left:0 !important; } /* Ubicación alineada con el inicio visual de los datos. */ .roma382-dep-location{ margin-top:calc(41px + 1.05em + 28px); } } /* -------------------------- TABLET / LAPTOP 1024–1239 Misma composición, gaps adaptados -------------------------- */ @media (min-width:1024px) and (max-width:1239px){ .roma382-dep-header{ display:grid; grid-template-columns:minmax(0,1fr) 210px; grid-template-areas: "title location" "info location"; column-gap:32px; row-gap:38px; align-items:start; } .roma382-dep-info{ grid-area:info; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:60px; align-items:start; justify-content:start; width:100%; min-width:0; margin:0; } .roma382-dep-areas{ grid-area:auto; width:max-content; margin:0 !important; } .roma382-dep-areas > div{ grid-template-columns:76px max-content; column-gap:10px; width:max-content; } .roma382-dep-areas strong{ width:76px; text-align:right !important; } .roma382-dep-areas span{ text-align:left !important; } .roma382-dep-features{ grid-area:auto; grid-template-rows:repeat(5,auto); grid-auto-flow:column; grid-auto-columns:max-content; column-gap:32px; row-gap:2px; margin:0; } .roma382-dep-location{ grid-area:location; justify-self:end; align-self:start; width:100%; max-width:210px; margin-top:76px; } } /* -------------------------- TABLET 768–1023 -------------------------- */ @media (min-width:768px) and (max-width:1023px){ .roma382-dep-header{ display:grid; grid-template-columns:minmax(0,1fr) 170px; grid-template-areas: "title location" "info location"; column-gap:24px; row-gap:34px; align-items:start; } .roma382-dep-info{ grid-area:info; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:35px; align-items:start; justify-content:start; width:100%; min-width:0; margin:0; } .roma382-dep-areas{ grid-area:auto; width:max-content; margin:0 !important; } .roma382-dep-areas > div{ grid-template-columns:64px max-content; column-gap:10px; width:max-content; } .roma382-dep-areas strong{ width:64px; text-align:right !important; } .roma382-dep-areas span{ text-align:left !important; } .roma382-dep-features{ grid-area:auto; grid-template-rows:repeat(5,auto); grid-auto-flow:column; grid-auto-columns:max-content; column-gap:20px; row-gap:2px; margin:0; } .roma382-dep-location{ grid-area:location; justify-self:end; align-self:start; width:100%; max-width:170px; margin-top:68px; } } /* v1.1.12 — microajuste de seguridad visual 3px de aire para evitar recorte del primer dígito. */ @media (min-width:1240px){ .roma382-dep-info{ margin-left:-27px; } } /* ========================================================== ROMA 382 — v1.2.1 LAYOUT FINAL APROBADO Integrado sobre v1.1.12 estable NO TOCA ZOOM NI MOBILE ========================================================== */ /* ========================= DESKTOP ========================= */ @media (min-width: 1240px) { .roma382-dep-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px !important; grid-template-areas: "title location" "info location" !important; column-gap: 40px !important; row-gap: 41px !important; align-items: start !important; } .roma382-dep-title { grid-area: title !important; margin-left: 0 !important; transform: none !important; } .roma382-dep-info { grid-area: info !important; display: grid !important; grid-template-columns: max-content max-content !important; column-gap: 90px !important; justify-content: start !important; align-items: start !important; width: max-content !important; margin: 0 !important; padding: 0 !important; position: static !important; left: auto !important; right: auto !important; transform: none !important; } /* Reset imprescindible al entrar al grid interno */ .roma382-dep-areas, .roma382-dep-features { grid-area: auto !important; } .roma382-dep-areas { display: flex !important; flex-direction: column !important; width: max-content !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .roma382-dep-areas > div { display: grid !important; grid-template-columns: 78px max-content !important; column-gap: 5px !important; align-items: baseline !important; width: max-content !important; margin: 0 !important; padding: 0 !important; } .roma382-dep-areas strong { width: 58px !important; text-align: right !important; font-size: 18px !important; font-weight: 500 !important; white-space: nowrap !important; } .roma382-dep-areas span { text-align: left !important; font-size: 11px !important; white-space: nowrap !important; } .roma382-dep-features { display: grid !important; grid-template-rows: repeat(5, auto) !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; column-gap: 50px !important; row-gap: 2px !important; justify-content: start !important; align-content: start !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .roma382-dep-location { grid-area: location !important; justify-self: end !important; align-self: start !important; width: 240px !important; max-width: 240px !important; margin-top: 76px !important; transform: none !important; } .roma382-dep-location img { display: block !important; width: 100% !important; max-width: 240px !important; height: auto !important; margin-left: auto !important; } } /* ========================= TABLET / LAPTOP 1024 — 1239 ========================= */ @media (min-width: 1024px) and (max-width: 1239px) { .roma382-dep-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 210px !important; grid-template-areas: "title location" "info location" !important; column-gap: 30px !important; row-gap: 38px !important; } .roma382-dep-info { grid-area: info !important; display: grid !important; grid-template-columns: max-content max-content !important; column-gap: 60px !important; justify-content: start !important; margin: 0 !important; position: static !important; left: auto !important; transform: none !important; } .roma382-dep-areas, .roma382-dep-features { grid-area: auto !important; } .roma382-dep-areas { margin: 0 !important; transform: none !important; } .roma382-dep-areas > div { grid-template-columns: 74px max-content !important; column-gap: 10px !important; } .roma382-dep-areas strong { width: 74px !important; text-align: right !important; } .roma382-dep-areas span { text-align: left !important; } .roma382-dep-features { grid-template-rows: repeat(5, auto) !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; column-gap: 32px !important; margin: 0 !important; transform: none !important; } .roma382-dep-location { grid-area: location !important; width: 210px !important; max-width: 210px !important; justify-self: end !important; margin-top: 72px !important; transform: none !important; } } /* ========================================================== ROMA 382 — v1.2.2 SWIPE / DRAG ENTRE DEPARTAMENTOS No modifica el layout aprobado ========================================================== */ .roma382-deps-track{ touch-action:pan-y pinch-zoom; } @media (hover:hover) and (pointer:fine){ .roma382-deps-track{ cursor:grab; } .roma382-deps.is-swiping .roma382-deps-track{ cursor:grabbing; user-select:none; } .roma382-deps.is-swiping .roma382-deps-track img{ -webkit-user-drag:none; user-select:none; } /* Elementos interactivos conservan su cursor */ .roma382-deps-track button, .roma382-deps-track a{ cursor:pointer; } .roma382-deps-track .roma382-zoom-trigger{ cursor:zoom-in; } } /* ========================================================== ROMA 382 — v1.2.4 NORMALIZACIÓN INTELIGENTE DE PLANOS Desktop/tablet: - NO crea una caja de alto fijo. - El plano más bajo define el alto de referencia. - Los planos más altos se reducen hasta ese mismo alto. - Así no aparece espacio vacío arriba/abajo y la paginación permanece alineada entre departamentos. Mobile: - El ancho de la columna es la referencia. - Todos los planos ocupan el 100% del ancho disponible. ========================================================== */ @media (min-width:768px){ .roma382-dep-plan-wrap > .roma382-zoom-trigger{ width:100% !important; height:auto !important; min-height:0 !important; display:block !important; overflow:visible !important; } .roma382-dep-plan-wrap .roma382-dep-plan-desktop{ width:100% !important; height:auto !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; } .roma382-dep-plan-wrap .roma382-dep-plan-desktop img{ display:block !important; width:auto !important; height:var(--roma382-plan-desktop-height, auto) !important; max-width:100% !important; max-height:none !important; object-fit:contain !important; margin:0 auto !important; } } @media (max-width:767px){ .roma382-dep-plan-mobile-wrap, .roma382-dep-plan-mobile-wrap .roma382-zoom-trigger, .roma382-dep-plan-mobile-wrap .roma382-dep-plan-mobile{ width:100% !important; height:auto !important; min-height:0 !important; } .roma382-dep-plan-mobile-wrap .roma382-dep-plan-mobile img{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; object-fit:contain !important; } } /* ========================================================== ROMA 382 — v1.2.6 SOPORTE DÚPLEX / TRÍPLEX - Planta 1 / Planta 2 sin aumentar el alto del slider. - Selector superpuesto sobre la zona superior del plano. - Desktop y mobile mantienen sus reglas de normalización. ========================================================== */ .roma382-dep-plan-wrap[data-level-viewer], .roma382-dep-plan-mobile-wrap[data-level-viewer]{ position:relative; } .roma382-level-switch{ position:absolute; left:50%; top:-34px; transform:translateX(-50%); z-index:6; display:flex; align-items:center; justify-content:center; gap:34px; white-space:nowrap; } .roma382-level-switch button{ appearance:none; -webkit-appearance:none; border:0!important; border-bottom:1px solid transparent!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; padding:0 0 6px!important; margin:0!important; min-width:0!important; color:#666!important; font:500 12px/1.2 "ClashDisplay","Clash Display",sans-serif!important; letter-spacing:.02em; cursor:pointer; transition:color .2s ease,border-color .2s ease; } .roma382-level-switch button:hover, .roma382-level-switch button:focus, .roma382-level-switch button.is-active{ color:var(--roma-orange)!important; border-bottom-color:var(--roma-orange)!important; outline:0; } .roma382-level-panels{ position:relative; width:100%; } .roma382-level-panel{ display:none!important; width:100%; } .roma382-level-panel.is-active{ display:block!important; animation:roma382LevelFade .28s ease; } @keyframes roma382LevelFade{ from{opacity:.2;transform:translateY(4px)} to{opacity:1;transform:none} } @media (min-width:768px){ .roma382-dep-plan-wrap .roma382-level-panel{ width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important; } .roma382-dep-plan-wrap .roma382-level-panel .roma382-dep-plan-desktop{ width:100%!important; height:auto!important; display:flex!important; align-items:flex-start!important; justify-content:center!important; } .roma382-dep-plan-wrap .roma382-level-panel .roma382-dep-plan-desktop img{ display:block!important; width:auto!important; height:var(--roma382-plan-desktop-height, auto)!important; max-width:100%!important; max-height:none!important; object-fit:contain!important; margin:0 auto!important; } } @media (max-width:767px){ .roma382-dep-plan-mobile-wrap .roma382-level-switch{ top:-29px; gap:18px; width:max-content; max-width:100%; } .roma382-dep-plan-mobile-wrap .roma382-level-switch button{ font-size:9px!important; padding-bottom:4px!important; } .roma382-dep-plan-mobile-wrap .roma382-level-panels, .roma382-dep-plan-mobile-wrap .roma382-level-panel, .roma382-dep-plan-mobile-wrap .roma382-dep-plan-mobile{ width:100%!important; height:auto!important; min-height:0!important; } .roma382-dep-plan-mobile-wrap .roma382-level-panel .roma382-dep-plan-mobile img{ display:block!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; object-fit:contain!important; } /* La regla antigua ocultaba únicamente el botón directo. Ahora ocultamos todo el visor desktop en mobile. */ .roma382-dep-plan-wrap .roma382-level-panels{display:none!important} .roma382-dep-plan-wrap .roma382-level-switch{display:none!important} } /* ========================================================== ROMA 382 — v1.2.7 AJUSTE MOBILE: TÍTULOS LARGOS + BLOQUE DE MEDIDAS - Reduce el título para nombres largos (Penthouse, etc.). - Reserva mejor el espacio entre título y medidas. - Lleva las medidas hacia el borde derecho sin tocar desktop. ========================================================== */ @media (max-width:767px){ .roma382-dep-header{ grid-template-columns:minmax(0,1fr) 158px !important; column-gap:16px !important; } .roma382-dep-title{ min-width:0 !important; max-width:100% !important; } .roma-flat{ font-size:32px !important; line-height:.98 !important; white-space:nowrap !important; } .roma-number{ font-size:13px !important; line-height:1 !important; padding:2px 4px 3px !important; margin-top:-1px !important; flex:0 0 auto !important; } .roma382-dep-areas{ width:158px !important; max-width:158px !important; justify-self:end !important; margin-left:auto !important; transform:translateX(6px) !important; } .roma382-dep-areas > div{ grid-template-columns:62px max-content !important; column-gap:7px !important; justify-content:end !important; } .roma382-dep-areas strong{ font-size:15px !important; text-align:right !important; } .roma382-dep-areas span{ font-size:8.5px !important; } } @media (max-width:430px){ .roma382-dep-header{ grid-template-columns:minmax(0,1fr) 154px !important; column-gap:12px !important; } .roma-flat{ font-size:30px !important; } .roma382-dep-areas{ width:154px !important; max-width:154px !important; transform:translateX(4px) !important; } .roma382-dep-areas > div{ grid-template-columns:59px max-content !important; column-gap:6px !important; } } /* ========================================================== ROMA 382 — v1.2.8 MOBILE — ALINEACIÓN DEL SELECTOR DE PLANTAS - En Dúplex/Tríplex, PLANTA 1 / 2 / 3 comienza a la misma altura visual que la primera característica (Dormitorios). - El plano baja para dejar su propio espacio al selector. - No modifica desktop ni departamentos de un solo nivel. ========================================================== */ @media (max-width:767px){ .roma382-dep-plan-mobile-wrap[data-level-viewer]{ padding-top:34px !important; } .roma382-dep-plan-mobile-wrap[data-level-viewer] .roma382-level-switch{ top:0 !important; } } /* ========================================================== ROMA 382 — v1.2.9 MOBILE — AFINADO DE TÍTULO Y MEDIDAS - Reduce 1px adicional el título. - Fija columnas para que todos los m² y sus etiquetas queden perfectamente alineados entre sí. ========================================================== */ @media (max-width:767px){ .roma-flat{ font-size:31px !important; } .roma382-dep-areas > div{ grid-template-columns:64px 87px !important; column-gap:7px !important; justify-content:end !important; width:158px !important; } .roma382-dep-areas strong{ width:64px !important; text-align:right !important; justify-self:end !important; } .roma382-dep-areas span{ width:87px !important; text-align:left !important; justify-self:start !important; } } @media (max-width:430px){ .roma-flat{ font-size:29px !important; } .roma382-dep-areas > div{ grid-template-columns:62px 86px !important; column-gap:6px !important; width:154px !important; } .roma382-dep-areas strong{ width:62px !important; } .roma382-dep-areas span{ width:86px !important; } } /* ========================================================== ROMA 382 — v1.2.10 MOBILE — APROVECHAR ESPACIO DERECHO EN MEDIDAS - Desplaza el bloque completo de m² + etiquetas hacia el borde derecho sin alterar sus columnas ni alineación. - No modifica desktop, título, plantas, planos ni ubicación. ========================================================== */ @media (max-width:767px){ .roma382-dep-areas{ transform:translateX(12px) !important; } } @media (max-width:430px){ .roma382-dep-areas{ transform:translateX(10px) !important; } } /* ========================================================== ROMA 382 — v1.2.11 MOBILE — EVITAR SOLAPE TÍTULO / NÚMERO / MEDIDAS - Reduce de forma controlada el ancho visual del título. - Acerca el badge del número al título. - Mantiene el bloque de medidas alineado y a la derecha. ========================================================== */ @media (max-width:767px){ .roma382-dep-title{ gap:5px !important; overflow:visible !important; } .roma-flat{ font-size:29px !important; letter-spacing:-0.35px !important; } .roma-number{ font-size:12px !important; padding:2px 4px 3px !important; margin-top:-1px !important; } .roma382-dep-areas{ transform:translateX(14px) !important; } } @media (max-width:430px){ .roma382-dep-title{ gap:4px !important; } .roma-flat{ font-size:27px !important; letter-spacing:-0.45px !important; } .roma-number{ font-size:11px !important; padding:2px 3px 3px !important; } .roma382-dep-areas{ transform:translateX(12px) !important; } } @media (max-width:380px){ .roma-flat{ font-size:26px !important; } } /* ========================================================== ROMA 382 — v1.2.14 NAVEGACIÓN LATERAL ENTRE DEPARTAMENTOS - Flechas a los lados del departamento activo. - La paginación conserva su posición independiente inferior. ========================================================== */ .roma382-deps-track{ position:relative; } .roma382-deps-arrow{ appearance:none; -webkit-appearance:none; position:absolute; top:50%; z-index:8; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 !important; padding:0 !important; background:rgba(255,255,255,.92) !important; border:1px solid var(--roma-orange) !important; border-radius:50% !important; box-shadow:none !important; cursor:pointer; transform:translateY(-50%); transition:background-color .2s ease, transform .2s ease; } .roma382-deps-prev{ left:8px; } .roma382-deps-next{ right:8px; } .roma382-deps-arrow span{ display:block; width:9px; height:9px; border-top:1.5px solid var(--roma-orange); border-right:1.5px solid var(--roma-orange); } .roma382-deps-prev span{ transform:translateX(2px) rotate(-135deg); } .roma382-deps-next span{ transform:translateX(-2px) rotate(45deg); } @media (hover:hover) and (pointer:fine){ .roma382-deps-arrow:hover{ background:var(--roma-orange) !important; } .roma382-deps-arrow:hover span{ border-color:#fff; } } .roma382-deps-arrow:focus-visible{ outline:2px solid var(--roma-orange) !important; outline-offset:3px; } .roma382-deps-arrow:active{ transform:translateY(-50%) scale(.94); } /* Mantiene los indicadores inferiores como estaban originalmente. */ .roma382-deps-pagination{ display:flex; justify-content:center; gap:5px; padding:41px 20px 30px; } @media (max-width:767px){ .roma382-deps-arrow{ top:60%; width:32px; height:32px; background:transparent !important; } .roma382-deps-prev{ left:4px; } .roma382-deps-next{ right:4px; } .roma382-deps-arrow span{ width:7px; height:7px; } .roma382-deps-pagination{ justify-content:center; padding:16px 28px 28px; gap:4px; } } /* v1.2.15 — navegación lateral y medidas opcionales */ @media (max-width:767px){ .roma382-deps-arrow, .roma382-deps-arrow:hover, .roma382-deps-arrow:focus, .roma382-deps-arrow:active{ background:transparent !important; } } /* ========================================================== ROMA 382 — v1.2.16 MOBILE — CARACTERÍSTICAS Y UBICACIÓN MÁS COMPACTAS - Reduce la lista de características para dar más aire. - Reduce la mini ubicación para evitar contacto con la flecha. - No modifica desktop ni tablet. ========================================================== */ @media (max-width:767px){ .roma382-dep-features{ font-size:12.5px !important; line-height:1.28 !important; row-gap:1px !important; } .roma382-dep-location{ width:82px !important; max-width:82px !important; } .roma382-dep-location img{ width:100% !important; max-width:82px !important; height:auto !important; } } @media (max-width:430px){ .roma382-dep-features{ font-size:12px !important; } .roma382-dep-location{ width:78px !important; max-width:78px !important; } .roma382-dep-location img{ max-width:78px !important; } }