/* ============================================================================ KATTO — HOJA DE ESTILOS ============================================================================ ¿QUIERES CAMBIAR EL DISEÑO? Todo está en el bloque de abajo. Cambia un valor aquí y cambia en las nueve páginas al mismo tiempo. Los COLORES se escriben en formato hexadecimal (#RRGGBB). Tu diseñador te los va a dar así. Solo sustituye el valor después de los dos puntos. El número de WhatsApp, el correo y el logotipo NO están aquí: están en katto-config.js. ========================================================================== */ :root{ /* ---------- COLORES DE MARCA ---------- */ --blue:#2E3192; /* Color principal: botones, acentos, títulos de sección */ --blue-lt:#6062C4; /* Versión clara: hover de botones, texto sobre azul oscuro */ --blue-deep:#232566; /* Fondos oscuros de sección */ --cream:#F5F5DB; /* Fondo general del sitio */ --cream-2:#EBEBC7; /* Fondo de secciones alternas y tarjetas */ --ink:#231F20; /* Texto principal y fondos negros */ --ink-soft:#403C3D; /* Texto secundario */ --muted:#6F6B63; /* Texto de apoyo, notas */ --line:#D8D8B4; /* Líneas divisorias y bordes */ /* ---------- TIPOGRAFÍAS ---------- Para cambiarlas también hay que cambiar el enlace de Google Fonts que está en el de cada página. Ver GUIA-MARCA.md. */ --display:'Jost',-apple-system,BlinkMacSystemFont,sans-serif; /* Títulos */ --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Texto */ /* ---------- FORMA ---------- */ --radio:2px; /* Redondeo de botones y tarjetas. 0 = esquinas rectas */ --radio-tarjeta:3px; /* ---------- MEDIDAS ---------- */ --max:1180px; /* Ancho máximo del contenido */ /* ---------- WHATSAPP ---------- */ --whatsapp:#25D366; /* Verde oficial de WhatsApp. No conviene cambiarlo. */ } *{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; /* evita que iOS agrande el texto en horizontal */ text-size-adjust:100%; } /* Quita el destello gris al tocar en Android */ a,button{-webkit-tap-highlight-color:rgba(46,49,146,.15)} body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .wrap-wide{max-width:1320px;margin:0 auto;padding:0 24px} a{color:inherit} img{max-width:100%;display:block} /* ---------- NAV ---------- */ header{position:sticky;top:0;z-index:100;background:rgba(245,245,219,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px} .logo{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--blue);white-space:nowrap} .nav-links{display:flex;gap:26px;list-style:none;font-size:14px} .nav-links a{text-decoration:none;color:var(--ink-soft);transition:color .2s;white-space:nowrap} .nav-links a:hover,.nav-links a.on{color:var(--blue)} .nav-cta{background:var(--blue);color:#fff;padding:11px 20px;border-radius:var(--radio);font-size:13.5px;font-weight:500;text-decoration:none;transition:background .2s;white-space:nowrap} .nav-cta:hover{background:var(--blue-lt)} .burger{display:none;background:none;border:none;font-size:23px;cursor:pointer;color:var(--ink)} /* ---------- BOTONES ---------- */ .btn{display:inline-block;padding:15px 30px;border-radius:var(--radio);font-size:14.5px;font-weight:500;text-decoration:none;transition:all .2s;border:1px solid transparent;cursor:pointer;font-family:var(--sans)} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-lt)} .btn-ghost{border-color:rgba(245,245,219,.4);color:var(--cream)} .btn-ghost:hover{background:rgba(245,245,219,.1)} .btn-line{border-color:var(--blue);color:var(--blue)} .btn-line:hover{background:var(--blue);color:#fff} /* ---------- HERO ---------- */ .hero{background:var(--blue-deep);color:var(--cream);padding:100px 0 84px;position:relative;overflow:hidden} .hero.sm{padding:74px 0 62px} .hero::after{content:'';position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(96,98,196,.32),transparent 68%)} .hero .wrap,.hero .wrap-wide{position:relative;z-index:1} .eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:24px;font-weight:500} .hero h1{font-family:var(--display);font-size:clamp(34px,5.2vw,60px);line-height:1.08;font-weight:300;letter-spacing:-.015em;max-width:17ch} .hero h1 em{font-style:normal;color:var(--blue-lt)} .lead{font-size:18px;max-width:58ch;margin-top:26px;color:rgba(245,245,219,.84);font-weight:300} .hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap} /* ---------- SECCIONES ---------- */ section{padding:90px 0} .sec-label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:500;margin-bottom:18px} h2{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);font-weight:300;line-height:1.14;letter-spacing:-.01em;max-width:21ch} h3{font-family:var(--display);font-size:21px;font-weight:500;line-height:1.28} .sec-intro{font-size:17px;color:var(--ink-soft);max-width:60ch;margin-top:20px;font-weight:300} .alt{background:var(--cream-2)} .dark{background:var(--blue-deep);color:var(--cream)} .dark h2,.dark h3{color:var(--cream)} .dark .sec-label{color:var(--blue-lt)} .dark .sec-intro{color:rgba(245,245,219,.78)} .ink{background:var(--ink);color:var(--cream)} .ink h2{color:var(--cream)} .ink .sec-label{color:var(--blue-lt)} /* ---------- CIFRAS ---------- */ .stats{background:var(--ink);color:var(--cream);padding:0} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:34px 24px;border-right:1px solid rgba(245,245,219,.13)} .stat:last-child{border-right:none} .stat .n{font-family:var(--display);font-size:34px;font-weight:500;color:var(--blue-lt);line-height:1} .stat .l{font-size:12.5px;color:rgba(245,245,219,.62);margin-top:9px} /* ---------- REJILLA DE TARJETAS ---------- */ .grid{display:grid;gap:2px;margin-top:52px;background:var(--line)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .card{background:var(--cream);padding:38px 30px;transition:background .25s} .card:hover{background:#fff} .card .num{font-family:var(--display);font-size:14px;color:var(--blue);letter-spacing:.1em;margin-bottom:18px;font-weight:500} .card h3{margin-bottom:12px;font-size:20px} .card p{font-size:14.5px;color:var(--muted);font-weight:300} /* tarjetas sobre fondo oscuro */ .dcards{display:grid;gap:22px;margin-top:50px} .d4{grid-template-columns:repeat(4,1fr)} .d3{grid-template-columns:repeat(3,1fr)} .dcard{background:rgba(245,245,219,.05);border:1px solid rgba(245,245,219,.14);padding:28px 24px;border-radius:var(--radio-tarjeta);transition:border-color .25s} .dcard:hover{border-color:var(--blue-lt)} .dcard .ic{color:var(--blue-lt);margin-bottom:14px;display:block} .dcard h3{font-size:18px;margin-bottom:9px} .dcard p{font-size:13.5px;color:rgba(245,245,219,.7);font-weight:300} /* ---------- PUERTAS (home) ---------- */ .doors{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px} .door{text-decoration:none;display:block;padding:36px 32px;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radio-tarjeta);transition:border-color .25s,transform .25s} .door:hover{border-color:var(--blue);transform:translateY(-3px)} .door .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;font-weight:500} .door h3{font-size:25px;margin-bottom:11px;font-weight:400} .door p{font-size:15px;color:var(--muted);font-weight:300;margin-bottom:16px} .door .go{font-size:14px;color:var(--blue);font-weight:500} /* ---------- LISTAS ---------- */ .plist{list-style:none;margin-top:6px} .plist li{padding:20px 0 20px 38px;border-bottom:1px solid var(--line);position:relative;font-size:15px;color:var(--ink-soft);font-weight:300} .plist li:first-child{padding-top:0} .plist li strong{display:block;color:var(--ink);font-weight:500;font-size:16.5px;margin-bottom:4px} .plist li::before{content:'—';position:absolute;left:0;top:20px;color:var(--blue)} .plist li:first-child::before{top:0} .dlist{list-style:none} .dlist li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative;font-size:14.5px;color:var(--ink-soft);font-weight:300} .dlist li:last-child{border-bottom:none} .dlist li::before{content:'';position:absolute;left:0;top:20px;width:10px;height:2px;background:var(--blue)} .dark .dlist li{border-color:rgba(245,245,219,.14);color:rgba(245,245,219,.8)} .dark .dlist li::before{background:var(--blue-lt)} /* ---------- PASOS ---------- */ .steps-grid{display:grid;gap:28px;margin-top:52px} .s5{grid-template-columns:repeat(5,1fr)} .s4{grid-template-columns:repeat(4,1fr)} .step{border-top:2px solid var(--ink);padding-top:24px} .step .n{font-size:11.5px;letter-spacing:.16em;color:var(--blue);font-weight:600;margin-bottom:10px} .step h3{font-size:18px;margin-bottom:9px} .step p{font-size:14px;color:var(--muted);font-weight:300} /* ---------- DOS COLUMNAS ---------- */ .two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .two-a{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} /* ---------- HONORARIOS ---------- */ .fee{background:var(--cream);border:1px solid var(--line);padding:34px 32px;border-radius:var(--radio-tarjeta);margin-top:34px} .fee .big{font-family:var(--display);font-size:32px;font-weight:500;color:var(--blue);line-height:1.1;margin-bottom:10px} .fee p{font-size:15px;color:var(--ink-soft);font-weight:300} .esq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px} .esq-box{background:var(--cream);border:1px solid var(--line);padding:26px 24px;border-radius:var(--radio-tarjeta)} .esq-box.on{border-color:var(--blue);border-width:2px} .esq-box h3{font-size:19px;margin-bottom:10px} .esq-box p{font-size:14.5px;color:var(--muted);font-weight:300} .tag-rec{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--blue);color:#fff;padding:3px 8px;border-radius:var(--radio);margin-left:8px;vertical-align:middle} /* ---------- FAQ ---------- */ .faq-list{margin-top:44px;border-top:1px solid var(--line)} details{border-bottom:1px solid var(--line)} summary{padding:22px 0;cursor:pointer;font-size:16.5px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:'+';color:var(--blue);font-size:22px;font-weight:300;flex-shrink:0} details[open] summary::after{content:'\2212'} details p{padding:0 0 24px;color:var(--ink-soft);font-size:15px;max-width:78ch;font-weight:300} details p a{color:var(--blue)} /* Las respuestas con varios párrafos o con lista van envueltas en .faq-cuerpo: el padding de cierre lo pone el contenedor y no cada párrafo, para que no se abra un hueco entre uno y otro. */ .faq-cuerpo{padding:0 0 24px;max-width:78ch} .faq-cuerpo p{padding:0 0 13px;max-width:none} .faq-cuerpo p:last-child{padding-bottom:0} .faq-cuerpo ul,.faq-cuerpo ol{margin:0 0 13px;padding-left:22px;color:var(--ink-soft);font-size:15px;font-weight:300} .faq-cuerpo li{margin-bottom:9px;line-height:1.6} .faq-cuerpo li:last-child{margin-bottom:0} .faq-cuerpo ol li::marker{color:var(--blue);font-weight:500} .faq-cuerpo strong{font-weight:500;color:var(--ink)} /* ---------- NOTAS LEGALES ---------- */ .legal{margin-top:34px;font-size:13px;color:var(--muted);font-weight:300;max-width:80ch;border-left:2px solid var(--blue);padding-left:16px} .dark .legal{color:rgba(245,245,219,.55);border-color:var(--blue-lt)} /* ---------- CIERRE ---------- */ .close{text-align:center} .close h2{margin:0 auto;max-width:24ch} .close p{max-width:56ch;margin:20px auto 30px;font-weight:300;color:rgba(245,245,219,.76)} /* ---------- PIE ---------- */ footer{background:var(--ink);color:rgba(245,245,219,.55);padding:44px 0 34px;border-top:1px solid rgba(245,245,219,.12)} .foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(245,245,219,.12)} .foot-top .logo{color:var(--cream);font-size:26px;margin-bottom:8px;display:inline-block} .foot-top .tag{font-size:13.5px;color:rgba(245,245,219,.6)} .foot-col h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:14px;font-weight:500} .foot-col a{display:block;font-size:14px;color:rgba(245,245,219,.72);text-decoration:none;padding:5px 0} .foot-col a:hover{color:var(--cream)} .foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;padding-top:24px} /* ---------- WHATSAPP ---------- */ .wa{position:fixed;right:22px;bottom:22px;z-index:200;width:54px;height:54px;border-radius:50%;background:var(--whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.24);transition:transform .2s} .wa:hover{transform:scale(1.07)} /* ---------- RESPONSIVE ---------- */ @media(max-width:1080px){ .nav-links{gap:18px;font-size:13.5px} } @media(max-width:980px){ .grid.g3,.dcards.d4,.dcards.d3{grid-template-columns:1fr 1fr} .steps-grid.s5,.steps-grid.s4{grid-template-columns:1fr 1fr 1fr} .two,.two-a{grid-template-columns:1fr;gap:40px} .stats-grid{grid-template-columns:1fr 1fr} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid rgba(245,245,219,.13)} .stat:nth-child(2){border-right:none} .foot-top{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:8px 24px 18px} .nav-links.open{display:flex} .nav-links li{padding:13px 0;border-bottom:1px solid var(--line)} .burger{display:block} .nav-cta{display:none} section{padding:62px 0} .hero{padding:66px 0 58px} .grid.g3,.grid.g2,.dcards.d4,.dcards.d3,.doors,.steps-grid.s5,.steps-grid.s4,.esq-grid{grid-template-columns:1fr} /* En celular la barra de datos va en cuadricula de 2x2, no en columna: cuatro numeros apilados se comian media pantalla de scroll. */ .stats-grid{grid-template-columns:1fr 1fr} .stat{border-bottom:1px solid rgba(245,245,219,.13)} .stat:nth-child(even){border-right:none} .stat:nth-child(3),.stat:nth-child(4){border-bottom:none} .foot-top{grid-template-columns:1fr;gap:26px} } /* ============================================================ LOGOTIPO COMO IMAGEN Se activa solo cuando pones un archivo en katto-config.js ============================================================ */ .logo-img{display:flex;align-items:center} .logo-img img{display:block} /* ============================================================ BOTONES DE WHATSAPP ============================================================ */ .btn-wa{ display:inline-flex;align-items:center;gap:9px; padding:14px 26px;border-radius:var(--radio); background:var(--whatsapp);color:#fff; font-size:14.5px;font-weight:500;text-decoration:none; transition:filter .2s;border:1px solid transparent; } .btn-wa:hover{filter:brightness(.93)} .btn-wa svg{flex-shrink:0} /* Versión chica, para las tarjetas de propiedad */ .wa-card{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:var(--radio); background:var(--whatsapp);color:#fff; font-size:13px;font-weight:500;text-decoration:none; transition:filter .2s;margin-top:10px; } .wa-card:hover{filter:brightness(.93)} /* Versión de contorno, para fondos oscuros */ .btn-wa-line{ display:inline-flex;align-items:center;gap:9px; padding:14px 26px;border-radius:var(--radio); border:1px solid var(--whatsapp);color:var(--whatsapp); background:transparent;font-size:14.5px;font-weight:500;text-decoration:none; transition:all .2s; } .btn-wa-line:hover{background:var(--whatsapp);color:#fff} /* ============================================================================ MÓVIL — ajustes específicos para teléfono ---------------------------------------------------------------------------- El sitio es UNA sola versión que se adapta. No hay una página aparte para celular: las mismas páginas se reacomodan según el ancho de la pantalla. Aquí abajo están los ajustes que solo aplican en pantallas chicas. ========================================================================== */ /* Los efectos al pasar el cursor solo tienen sentido con mouse. En pantallas táctiles se quedaban "pegados" después de tocar. */ @media (hover:none){ .card:hover, .door:hover, .dcard:hover, .svc:hover{ background:inherit; transform:none; border-color:inherit; } .btn:hover, .btn-wa:hover, .nav-cta:hover{ filter:none } } @media(max-width:760px){ /* Áreas táctiles: el mínimo cómodo con el pulgar es ~44px de alto */ .btn, .btn-wa, .btn-line, .nav-cta{ padding:16px 26px; font-size:15px } .nav-links a{ display:block; padding:4px 0 } /* Los botones del encabezado, uno debajo del otro y a todo lo ancho. En pantallas angostas quedaban partidos a la mitad. */ .hero-actions{ flex-direction:column; align-items:stretch; gap:10px } .hero-actions .btn, .hero-actions .btn-wa{ text-align:center; justify-content:center } /* Lo mismo en los cierres de página */ .close .btn, .close .btn-wa{ display:block; margin:0 auto 10px; max-width:340px; justify-content:center } .close .btn-wa{ margin-left:auto !important } /* Espacio abajo para que el botón flotante no tape el pie */ footer{ padding-bottom:92px } /* Menos aire vertical: en celular el desplazamiento cansa */ section{ padding:54px 0 } .hero{ padding:58px 0 52px } h2{ max-width:none } .sec-intro, .lead{ max-width:none } } /* Teléfonos angostos */ @media(max-width:400px){ .wrap, .wrap-wide{ padding:0 18px } .stat{ padding:26px 18px } .card, .svc{ padding:28px 22px } .door{ padding:28px 24px } } /* El botón flotante respeta la barra de gestos del iPhone */ .wa{ bottom:calc(22px + env(safe-area-inset-bottom, 0px)); right:calc(18px + env(safe-area-inset-right, 0px)); } /* Nada debe salirse a lo ancho y provocar desplazamiento lateral */ img, table, pre{ max-width:100% } /* Al imprimir o guardar como PDF, fuera lo que no sirve en papel */ @media print{ header, .wa, .nav-cta, .filters{ display:none } body{ background:#fff; color:#000 } a{ text-decoration:underline } } /* ============================================================================ FOTOGRAFÍAS Se activan solas cuando pones un archivo en katto-config.js ========================================================================== */ /* Portada con foto de fondo. El velo oscuro encima es lo que permite que el texto se siga leyendo sobre cualquier imagen. */ .hero.con-foto{ background-size:cover; background-position:center; background-repeat:no-repeat; } .hero.con-foto::before{ content:'';position:absolute;inset:0; background:linear-gradient( 100deg, rgba(35,37,102,var(--velo,.55)) 0%, rgba(35,37,102,calc(var(--velo,.55) * .82)) 100% ); } .hero.con-foto .wrap, .hero.con-foto .wrap-wide{position:relative;z-index:2} .hero.con-foto::after{z-index:1} /* Retratos del equipo */ .retrato{ width:100%;aspect-ratio:1/1;object-fit:cover; border-radius:var(--radio-tarjeta); margin-bottom:20px;background:var(--cream-2); } /* Franja de imagen entre secciones */ .franja-foto{ width:100%;height:clamp(220px,32vw,420px); background-size:cover;background-position:center; } @media(max-width:760px){ .franja-foto{height:200px} } /* ============================================================================ ASISTENTE DEL SITIO ========================================================================== */ .asis-btn{ position:fixed;right:22px;bottom:calc(88px + env(safe-area-inset-bottom, 0px)); z-index:200;width:54px;height:54px;border-radius:50%; background:var(--blue);color:#fff;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 22px rgba(0,0,0,.24);transition:transform .2s; } .asis-btn:hover{transform:scale(1.07)} .asis-panel{ position:fixed;right:22px;bottom:calc(152px + env(safe-area-inset-bottom, 0px)); z-index:201;width:340px;max-width:calc(100vw - 44px); max-height:min(560px, calc(100vh - 200px)); background:var(--cream);border:1px solid var(--line); border-radius:6px;box-shadow:0 14px 44px rgba(0,0,0,.2); display:none;flex-direction:column;overflow:hidden; } .asis-panel.abierto{display:flex} .asis-head{ background:var(--blue);color:#fff;padding:16px 18px; display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-shrink:0; } .asis-head strong{display:block;font-family:var(--display);font-size:16px;font-weight:500} .asis-head span{display:block;font-size:12px;opacity:.8;margin-top:2px} .asis-cerrar{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.85;padding:0 2px} .asis-cerrar:hover{opacity:1} .asis-cuerpo{padding:18px;overflow-y:auto} .asis-preg{font-size:15px;font-weight:500;margin-bottom:14px;color:var(--ink)} /* Las respuestas largas traen párrafos y listas dentro (los pasos de una compraventa, las tasas por ciudad), así que necesitan su propio espaciado. */ .asis-resp{font-size:14px;color:var(--ink-soft);font-weight:300;line-height:1.6;margin-bottom:16px} .asis-resp p{margin-bottom:11px} .asis-resp p:last-child{margin-bottom:0} .asis-resp strong{font-weight:500;color:var(--ink)} .asis-resp ul,.asis-resp ol{margin:0 0 11px;padding-left:19px} .asis-resp li{margin-bottom:6px} .asis-resp ol li::marker{color:var(--blue);font-weight:500} /* Contador de preguntas en el menú de temas */ .asis-num{ float:right;font-size:12px;color:var(--muted);background:var(--cream-2); border-radius:100px;padding:1px 8px;margin-left:8px; } .asis-op{ display:block;width:100%;text-align:left; padding:12px 14px;margin-bottom:8px; background:#fff;border:1px solid var(--line);border-radius:var(--radio); font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer; transition:all .15s; } .asis-op:hover{border-color:var(--blue);background:var(--cream-2)} .asis-sec{background:transparent;color:var(--muted);font-size:13px;border-style:dashed;margin-top:6px} .asis-resumen{list-style:none;margin:0 0 16px} .asis-resumen li{ padding:9px 0;border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:2px; } .asis-resumen li:last-child{border-bottom:none} .asis-resumen span{font-size:11.5px;color:var(--muted)} .asis-resumen strong{font-size:14px;font-weight:500;color:var(--ink)} .asis-wa{ display:block;text-align:center;padding:13px; background:var(--whatsapp);color:#fff;text-decoration:none; border-radius:var(--radio);font-size:14.5px;font-weight:500;margin-bottom:8px; } .asis-wa:hover{filter:brightness(.93)} .asis-alt{ display:block;text-align:center;padding:11px; color:var(--blue);text-decoration:none;font-size:13.5px; } .asis-alt:hover{text-decoration:underline} @media(max-width:520px){ .asis-panel{ right:12px;left:12px;width:auto; bottom:calc(148px + env(safe-area-inset-bottom, 0px)); max-height:calc(100vh - 210px); } .asis-btn{right:18px} } /* ============================================================================ CATÁLOGO DE PROPIEDADES Se usa dentro de