:root{--green:#173327;--green2:#0f271d;--gold:#d6ab69;--cream:#f4f0e7;--ink:#263c32;--muted:#68766f;--white:#fff;--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.container{width:min(1180px,calc(100% - 32px));margin:auto}.draft{height:33px;padding:7px 16px;background:var(--green);color:#ffffffbf;text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.site-header{position:absolute;top:33px;left:0;right:0;z-index:20;color:#fff}.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;width:48px;height:48px;place-items:center;overflow:hidden;border:1px solid #ffffff59;border-radius:50%;background:var(--cream)}.brand-icon img{width:38px;height:38px;object-fit:contain}.brand strong{display:block;font-family:Georgia,serif;font-size:20px;line-height:1}.brand small{display:block;margin-top:6px;color:#ffffffa6;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.site-header nav{display:flex;gap:28px;font-size:14px;font-weight:700}.site-header nav a:hover{color:var(--gold)}.header-phone{display:inline-flex;height:44px;align-items:center;gap:8px;padding:0 18px;border:1px solid #ffffff59;border-radius:999px;background:#ffffff1a;font-weight:700;backdrop-filter:blur(10px)}.hero{position:relative;min-height:777px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}.hero-image{object-fit:cover;object-position:58% center}.hero-shade{background:linear-gradient(90deg,rgba(15,39,29,.95),rgba(15,39,29,.72) 44%,rgba(15,39,29,.18) 78%),linear-gradient(0deg,rgba(9,26,19,.68),transparent 45%)}.hero-content{position:relative;padding:56px 0 84px}.eyebrow{margin:0 0 14px;color:#9a6a3e;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.eyebrow.light{color:#e2c28d}.hero h1,.section h2,.coast h2,.contact h2{font-family:Georgia,serif}.hero h1{max-width:850px;margin:0;font-size:clamp(54px,8vw,106px);font-weight:400;line-height:.88;letter-spacing:-.045em}.hero-copy{max-width:650px;margin:28px 0 0;color:#ffffffc7;font-size:18px;line-height:1.75}.actions{display:flex;gap:12px;margin-top:34px}.button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:0 28px;border:1px solid transparent;border-radius:999px;font-weight:800}.button.gold,.button.primary{background:var(--gold);color:var(--green)}.button.glass{border-color:#ffffff59;background:#ffffff1a;color:#fff;backdrop-filter:blur(8px)}.button.secondary{border-color:#ccd5d0;background:#fff;color:var(--green)}.experience{margin-top:36px;color:#ffffffb3;font-size:14px}.section{padding:100px 0}.section h2,.coast h2,.contact h2{margin:0;color:var(--green);font-size:clamp(42px,5vw,64px);font-weight:400;line-height:1}.categories h2{max-width:850px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}.category-card{min-height:288px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid #1733271a;border-radius:26px;background:var(--cream);transition:.2s}.category-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px #19302514}.category-icon{display:grid;width:50px;height:50px;place-items:center;border-radius:50%;background:#fff;font-size:22px}.category-card small{color:#9a6a3e;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.category-card h3{margin:8px 0 6px;font-family:Georgia,serif;font-size:28px}.category-card p{color:var(--muted);font-size:14px}.category-card b{font-size:12px;text-transform:uppercase}.properties{background:var(--cream)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:40px}.section-heading>p{max-width:420px;color:var(--muted)}.property-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.property-card{overflow:hidden;border:1px solid #1733271a;border-radius:var(--radius);background:#fff;box-shadow:0 18px 60px #19302512}.gallery{position:relative;height:260px;overflow:hidden}.gallery-track{height:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.gallery-track::-webkit-scrollbar{display:none}.gallery-slide{position:relative;min-width:100%;height:100%;margin:0;scroll-snap-align:center}.gallery-slide img{width:100%;height:100%;object-fit:cover}.gallery-slide figcaption{position:absolute;left:18px;bottom:15px;padding:5px 11px;border-radius:999px;background:#0009;color:#fff;font-size:11px}.sale-badge{position:absolute;top:18px;left:18px;padding:8px 13px;border-radius:999px;background:var(--green);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.gallery-button{position:absolute;top:50%;width:38px;height:38px;border:0;border-radius:50%;background:#fffffff0;color:var(--green);font-size:26px;cursor:pointer;box-shadow:0 5px 18px #0003}.gallery-button.previous{left:12px}.gallery-button.next{right:12px}.property-body{padding:26px}.price{margin:0;color:var(--green);font-family:Georgia,serif;font-size:30px;font-weight:700}.property-body h3{min-height:58px;margin:7px 0;font-size:19px}.location{color:var(--muted);font-size:14px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0;padding:18px 0;border-block:1px solid #1733271a;font-size:14px}.facts span:last-child{grid-column:1/-1}.card-actions{display:flex;align-items:center;justify-content:space-between}.card-actions>a:first-child{font-size:12px;font-weight:800;text-decoration:underline;text-transform:uppercase}.round-link{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:20px}.empty{padding:50px;border-radius:var(--radius);background:#fff;text-align:center}.coast{padding:100px 0;background:linear-gradient(135deg,#0e281d,#1e4a37);color:#fff}.coast-inner{display:grid;grid-template-columns:100px 1fr;gap:30px;align-items:start}.coast-icon{font-size:70px;color:var(--gold)}.coast h2,.contact h2{max-width:900px;color:#fff}.coast p:not(.eyebrow){max-width:650px;color:#ffffffb3;font-size:18px}.coast .button{margin-top:18px}.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}.about-image{position:relative;min-height:560px;overflow:hidden;border-radius:32px}.about-image img{position:absolute;width:100%;height:100%;object-fit:cover}.about-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#132c22bf,transparent 55%)}.about-image div{position:absolute;z-index:1;left:34px;right:34px;bottom:34px;color:#fff}.about-image div p{margin:8px 0 0;font-family:Georgia,serif;font-size:32px;line-height:1.2}.about .lead{font-size:18px}.about p{color:var(--muted)}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.benefits span{padding:15px;border-radius:14px;background:var(--cream);font-weight:700}.contact{padding:80px 0;background:var(--green);color:#fff}.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}.contact h2{max-width:800px}.contact p{color:#ffffffb3}.footer-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px}.footer-inner strong{color:var(--green);font-family:Georgia,serif;font-size:18px}.footer-logo{width:auto;height:52px}.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;padding:14px 19px;border-radius:999px;background:#1f9d55;color:#fff;font-weight:800;box-shadow:0 12px 30px #0003}.installer-body,.admin-body{min-height:100vh;background:var(--cream);padding:32px}.installer-card,.admin-card{width:min(760px,100%);margin:auto;padding:34px;border-radius:24px;background:#fff;box-shadow:0 20px 60px #1733271a}.installer-card h1{margin-top:0;font-family:Georgia,serif;color:var(--green);font-size:42px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.form-grid label{display:grid;align-content:start;gap:7px;font-size:13px;font-weight:800}.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid textarea,.form-grid select{width:100%;padding:12px;border:1px solid #ccd5d0;border-radius:10px;font:inherit}.form-grid textarea{min-height:100px;resize:vertical}.wide{grid-column:1/-1}.notice{margin:18px 0;padding:14px;border-radius:10px}.notice.success{background:#e7f7ec;color:#176b36}.notice.error{background:#fdeaea;color:#922}.admin-shell{width:min(1120px,100%);margin:auto}.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.admin-top h1{margin:0;color:var(--green)}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:13px;border-bottom:1px solid #e5e9e7;text-align:left}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.small-button{display:inline-flex;padding:7px 10px;border:0;border-radius:8px;background:var(--green);color:#fff;font-size:12px;font-weight:700;cursor:pointer}.small-button.danger{background:#9b2d2d}.image-admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.image-admin-card img{width:100%;height:120px;object-fit:cover;border-radius:10px}.image-admin-card label{display:flex;align-items:center;gap:6px;font-size:12px}.gallery-slide{cursor:zoom-in}.gallery-slide:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}.play-badge{position:absolute;top:50%;left:50%;display:grid;width:62px;height:62px;translate:-50% -50%;place-items:center;border:2px solid #ffffffd9;border-radius:50%;background:#173327bf;color:#fff;font-size:24px;padding-left:5px;pointer-events:none}.viewer{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;align-items:center;gap:12px;padding:16px;background:#081712f2;backdrop-filter:blur(6px)}.viewer[hidden]{display:none}body.viewer-abierto{overflow:hidden}.viewer-stage{grid-column:2;grid-row:1;display:grid;place-items:center;width:100%;height:100%;min-height:0}.viewer-stage img,.viewer-stage video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;background:#000}.viewer-nav{grid-row:1;width:52px;height:52px;border:1px solid #ffffff40;border-radius:50%;background:#ffffff1f;color:#fff;font-size:30px;line-height:1;cursor:pointer}.viewer-nav:hover{background:#ffffff33}.viewer-nav.previous{grid-column:1}.viewer-nav.next{grid-column:3}.viewer-close{position:absolute;top:16px;right:16px;z-index:1;width:48px;height:48px;border:1px solid #ffffff40;border-radius:50%;background:#ffffff1f;color:#fff;font-size:20px;cursor:pointer}.viewer-close:hover{background:#ffffff33}.viewer-caption{grid-column:1/-1;grid-row:2;margin:0;color:#ffffffcc;text-align:center;font-size:14px}.field-help{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.5}.field-help code{padding:2px 6px;border-radius:5px;background:var(--cream);font-size:11px;word-break:break-all}.media-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}.media-preview-card{overflow:hidden;border:1px solid #ccd5d0;border-radius:12px;background:#fff}.media-preview-card>img{width:100%;height:120px;object-fit:cover}.media-preview-body{display:grid;gap:3px;padding:10px;font-size:12px}.media-preview-body strong{word-break:break-all;font-size:12px}.media-preview-body span{color:var(--muted)}.media-preview-error{color:#9b2d2d!important;font-weight:700}.media-video-thumb{position:relative;display:grid;height:120px;place-items:center;background:var(--green);color:#fff;font-size:12px;font-weight:700}.media-video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65}.media-video-thumb span{position:relative;padding:5px 11px;border-radius:999px;background:#0009}.coast-inner{margin-bottom:44px}.coast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}.coast-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #ffffff26;border-radius:var(--radius);background:#ffffff0f;backdrop-filter:blur(6px)}.coast-card-photo{position:relative;height:210px;overflow:hidden}.coast-card-photo img{width:100%;height:100%;object-fit:cover}.coast-badge{position:absolute;top:15px;left:15px;padding:7px 13px;border-radius:999px;background:var(--gold);color:var(--green);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.coast-sin-foto{position:absolute;right:15px;bottom:15px;padding:6px 12px;border-radius:999px;background:#0e281dd9;color:#ffffffd9;font-size:11px;font-weight:700}.coast-card-body{display:flex;flex:1;flex-direction:column;padding:22px}.coast-price{margin:0;color:var(--gold);font-family:Georgia,serif;font-size:27px;font-weight:700}.coast-card-body h3{margin:6px 0 4px;color:#fff;font-size:18px;line-height:1.35}.coast-location{margin:0;color:#ffffffa6;font-size:13px}.coast-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}.coast-actions>a:first-child{color:#ffffffd9;font-size:12px;font-weight:800;text-decoration:underline;text-transform:uppercase}.coast-actions .button{min-height:44px;padding:0 20px;font-size:14px}.filtro-categorias{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}.filtro-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid #17332733;border-radius:999px;background:#fff;color:var(--green);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}.filtro-chip:hover{border-color:var(--green);background:#1733270d}.filtro-chip.activo{border-color:var(--green);background:var(--green);color:#fff}.filtro-vacio{padding:44px;border-radius:var(--radius);background:#fff;color:var(--muted);text-align:center}.category-card.destacada{border-color:#d6ab6959;background:linear-gradient(160deg,#fbf4e8,#f4ecdc)}.category-card.destacada .category-icon{background:var(--gold);color:var(--green)}.category-card.destacada small{color:#8a5f2b}.credito-foto{position:absolute;right:8px;bottom:8px;z-index:1;padding:3px 9px;border-radius:999px;background:#0e281db3;color:#ffffffd9;font-size:10px;letter-spacing:.02em;pointer-events:none}.gallery-slide .credito-foto{bottom:44px}.etiqueta-premium{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--gold);color:var(--green);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.form-grid label.casilla{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid #ccd5d0;border-radius:10px;background:var(--cream);cursor:pointer}.form-grid label.casilla input[type=checkbox]{width:19px;height:19px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--green);cursor:pointer}.form-grid label.casilla>span{display:block;font-size:13px;font-weight:800;line-height:1.45}.form-grid label.casilla .field-help{margin-top:3px;font-weight:400}.admin-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.admin-card-top h2{margin:0 0 4px;color:var(--green);font-size:24px}.admin-card-top p{margin:0;color:var(--muted);font-size:14px}.admin-card-top .button{flex:0 0 auto;min-height:46px;padding:0 22px}.apagado{color:var(--muted)}.ventana{width:min(660px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 30px 80px #0e281d40;overflow:visible}.ventana::backdrop{background:#0e281dbf;backdrop-filter:blur(3px)}.ventana-caja{display:flex;max-height:calc(100dvh - 40px);flex-direction:column;padding:26px;overflow-y:auto}.ventana-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.ventana-top h2{margin:0;color:var(--green);font-family:Georgia,serif;font-size:26px;font-weight:400}.ventana-cerrar{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;border:1px solid #ccd5d0;border-radius:50%;background:#fff;color:var(--muted);font-size:15px;cursor:pointer}.ventana-cerrar:hover{border-color:var(--green);color:var(--green)}.ventana-pie{display:flex;justify-content:flex-end;gap:11px;margin-top:24px;padding-top:20px;border-top:1px solid #e5e9e7}.ventana-pie .button{min-height:46px;padding:0 26px}.admin-actions{align-items:center}.admin-actions form{display:contents}.small-button{min-height:34px;align-items:center;justify-content:center;text-align:center}.small-button:disabled{opacity:.35;cursor:not-allowed}.campo-icono{display:grid;align-content:start;gap:7px;font-size:13px;font-weight:800}.selector-iconos{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}.icono-opcion{display:grid;height:46px;place-items:center;padding:0;border:1px solid #ccd5d0;border-radius:10px;background:#fff;font-size:21px;line-height:1;cursor:pointer;transition:.12s}.icono-opcion:hover{border-color:var(--green);background:var(--cream)}.icono-opcion.elegido{border-color:var(--green);background:var(--green);box-shadow:0 0 0 3px #17332726}.form-grid label.icono-otro{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:2px;font-size:12px;font-weight:700;color:var(--muted)}.form-grid label.icono-otro input{width:70px!important;padding:8px!important;text-align:center;font-size:18px}.pagina-ficha{background:var(--cream)}.ficha-header{background:var(--green);color:#fff}.ficha-header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}.volver{font-size:14px;font-weight:700;color:#ffffffd9}.volver:hover{color:var(--gold)}.miga{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:22px 0 0;color:var(--muted);font-size:13px}.miga a{text-decoration:underline}.miga .actual{color:var(--green);font-weight:700}.ficha{padding:0 0 80px}.ficha-grid{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start;margin-top:22px}.ficha-gallery{height:440px;border-radius:var(--radius);background:#fff}.ficha-bloque{margin-top:34px;padding:28px;border-radius:var(--radius);background:#fff;box-shadow:0 14px 40px #19302510}.ficha-bloque h2{margin:0 0 14px;color:var(--green);font-family:Georgia,serif;font-size:26px;font-weight:400}.ficha-bloque p{margin:0 0 12px;max-width:68ch;color:var(--ink);line-height:1.75}.ficha-bloque p:last-child{margin-bottom:0}.servicios{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}.servicios li{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--cream);font-size:14px;font-weight:700}.ficha-lateral{position:sticky;top:22px}.ficha-caja{padding:28px;border-radius:var(--radius);background:#fff;box-shadow:0 18px 50px #19302518}.ficha-etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.etiqueta-operacion{padding:6px 13px;border-radius:999px;background:var(--green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.etiqueta-costa{padding:6px 13px;border-radius:999px;background:var(--gold);color:var(--green);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.etiqueta-estado{padding:6px 13px;border-radius:999px;background:#8a3d3d;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.etiqueta-estado.reservada{background:#9a6a1f}.etiqueta-estado.sobre-foto{position:absolute;top:18px;right:18px}.ficha-precio{margin:0;color:var(--green);font-family:Georgia,serif;font-size:38px;font-weight:700;line-height:1}.ficha-caja h1{margin:10px 0 6px;font-size:22px;line-height:1.3}.ficha-lugar{margin:0;color:var(--muted);font-size:14px}.ficha-datos{display:grid;gap:0;margin:22px 0 0;padding:6px 0 0;border-top:1px solid #1733271a}.ficha-datos>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #1733271a}.ficha-datos dt{color:var(--muted);font-size:14px}.ficha-datos dd{margin:0;font-size:14px;font-weight:700;text-align:right}.ficha-acciones{display:grid;gap:9px;margin-top:22px}.ficha-acciones .button{width:100%;min-height:50px}.compartir{width:100%;margin-top:11px;padding:11px;border:1px solid #ccd5d0;border-radius:999px;background:#fff;color:var(--green);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.compartir:hover{border-color:var(--green);background:var(--cream)}.otras{margin-top:44px}.property-card.enlace{display:block;transition:.2s}.property-card.enlace:hover{transform:translateY(-4px);box-shadow:0 22px 60px #1930251f}.property-card h3 a{text-decoration:none}.property-card h3 a:hover{color:var(--green);text-decoration:underline}.ficha-vacia{padding:100px 0;text-align:center}.ficha-vacia h1{font-family:Georgia,serif;font-size:38px;font-weight:400;color:var(--green)}.ficha-pie{background:#fff}.pie-datos{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:13px}.pie-datos .matricula{width:100%;font-size:12px}.servicios-elegir{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.form-grid label.servicio-opcion{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid #ccd5d0;border-radius:10px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}.form-grid label.servicio-opcion input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--green);cursor:pointer}.form-grid label.servicio-opcion:hover{border-color:var(--green);background:var(--cream)}.icono-wa{flex:0 0 auto;display:block}.button.con-icono{display:inline-flex;align-items:center;gap:9px}.round-link.whatsapp{background:#1f9d55;color:#fff;transition:.15s}.round-link.whatsapp:hover{background:#178a4a}.floating-whatsapp{gap:9px}.form-propiedad{display:grid;gap:18px}.bloque{margin:0;padding:18px 20px 16px;border:1px solid #dfe5e2;border-radius:14px;background:#fff}.bloque legend{padding:0 9px;margin-left:-4px;color:var(--green);font-family:Georgia,serif;font-size:17px;font-weight:400}.bloque-nota{margin:11px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.bloque-nota code{padding:2px 6px;border-radius:5px;background:var(--cream);font-size:11px;word-break:break-all}.form-grid.compacta{gap:12px}.form-grid.compacta label{gap:5px;font-size:12px}.form-grid.compacta input:not([type=checkbox]),.form-grid.compacta select,.form-grid.compacta textarea{padding:9px 11px;border-radius:9px;font-size:14px}.form-grid.compacta textarea{min-height:150px;line-height:1.6}.form-grid.compacta .field-help{margin-top:2px;font-size:11px}.form-grid.compacta label.sin-titulo{gap:0}.form-grid.compacta.cuatro{grid-template-columns:repeat(4,1fr)}.casillas-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}.casillas-fila .casilla{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid #ccd5d0;border-radius:10px;background:var(--cream);font-size:13px;font-weight:800;cursor:pointer}.casillas-fila .casilla input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--green);cursor:pointer}.casillas-fila .casilla span{display:block;line-height:1.45}.casillas-fila .field-help{margin-top:3px;font-weight:400}.form-acciones{display:flex;justify-content:flex-end;gap:11px;padding-top:4px}.form-acciones .button{min-height:48px;padding:0 30px}.form-propiedad .image-admin-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.form-propiedad .image-admin-card img{height:96px}.form-propiedad .media-video-thumb{height:96px}.filtros{display:grid;gap:11px;margin:0 0 30px}.filtro-linea{display:flex;align-items:center;gap:13px}.filtro-titulo{flex:0 0 auto;width:74px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.filtro-linea .filtro-categorias{margin:0;flex:1}.admin-marca{display:flex;align-items:center;gap:14px}.admin-logo{width:44px;height:44px;flex:0 0 auto;padding:5px;border-radius:50%;background:#fff;box-shadow:0 3px 12px #17332714;object-fit:contain}.login-card{text-align:center}.login-logo{width:auto;height:62px;margin:0 auto 18px}.login-card .form-grid,.login-card p:not(.eyebrow){text-align:left}.casilla.interruptor{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid #ccd5d0;border-radius:10px;background:var(--cream);font-size:13px;font-weight:800;cursor:pointer}.casilla.interruptor input{width:19px;height:19px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--green);cursor:pointer}.casilla.interruptor>span{display:block;line-height:1.45}.casilla.interruptor .field-help{margin-top:3px;font-weight:400}.comodidades-cuerpo{margin-top:16px}.comodidades-cuerpo[hidden]{display:none}.comodidades-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}.comodidad-grupo{display:grid;align-content:start;gap:5px}.comodidad-titulo{margin-bottom:3px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.form-grid label.comodidad-opcion,.comodidad-opcion{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;cursor:pointer}.comodidad-opcion input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--green);cursor:pointer}.comodidad-opcion:hover{color:var(--green)}.camas{margin:0 0 18px;padding:11px 16px;border-radius:12px;background:var(--cream);font-weight:700}.comodidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}.comodidad-columna h3{margin:0 0 9px;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.comodidad-columna ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}.comodidad-columna li{position:relative;padding-left:20px;color:var(--ink);font-size:14px}.comodidad-columna li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}.compartir-listas{margin-bottom:20px;padding:16px 18px;border:1px solid #dfe5e2;border-radius:14px;background:var(--cream)}.compartir-titulo{display:block;margin-bottom:10px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.compartir-botones{display:flex;flex-wrap:wrap;gap:7px}.compartir-ayuda{margin:10px 0 0;color:var(--muted);font-size:12px}.compartir-que{margin:0 0 12px;font-family:Georgia,serif;font-size:19px;color:var(--green)}.compartir-enlace{padding:11px 14px;border:1px solid #ccd5d0;border-radius:10px;background:var(--cream);overflow-x:auto}.compartir-enlace code{font-size:12px;white-space:nowrap;color:var(--ink)}.compartir-acciones{border-top:0;padding-top:18px}.buscador-envoltorio{position:relative;z-index:2;margin-top:143px;padding-bottom:0}.buscador{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:13px;border-radius:20px;background:#ffffffed;backdrop-filter:blur(8px);box-shadow:0 18px 50px #0e281d40}.buscador-operacion{display:flex;gap:7px}.buscador-op{min-height:46px;padding:0 21px;border:0;border-radius:12px;background:#e8ecea;color:var(--green);font:inherit;font-size:13px;font-weight:800;letter-spacing:.06em;cursor:pointer;transition:.15s}.buscador-op:hover{background:#d8e0dc}.buscador-op.activo{background:var(--green);color:#fff}.buscador-campo{position:relative;display:flex;flex:1 1 150px;min-width:0}.buscador-campo.angosto{flex:0 1 118px}.buscador select,.buscador input{width:100%;min-height:46px;padding:0 14px;border:1px solid #dfe5e2;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:14px}.buscador select:focus,.buscador input:focus{border-color:var(--green);outline:2px solid #1733271f;outline-offset:1px}.buscador-boton{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 26px;border:0;border-radius:12px;background:var(--green);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:.15s}.buscador-boton:hover{background:var(--green2)}.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.resultado-linea{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 24px;padding:13px 18px;border-radius:12px;background:#fff;font-weight:700}.resultado-linea[hidden]{display:none}.resultado-limpiar{color:var(--green);font-size:13px;font-weight:800;text-decoration:underline}.nav-contacto{padding:9px 17px;border-radius:999px;background:var(--gold);color:var(--green)!important}.nav-contacto:hover{background:#e0bb80}.pagina-listado{background:var(--cream)}.listado{padding:0 0 80px}.listado-nav{display:flex;gap:22px;font-size:14px;font-weight:700;color:#ffffffd9}.listado-nav a:hover,.listado-nav a.actual{color:var(--gold)}.listado-nav a.actual{text-decoration:underline;text-underline-offset:5px}.listado-encabezado{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin:24px 0 22px}.listado-encabezado h1{margin:0 0 6px;color:var(--green);font-family:Georgia,serif;font-size:clamp(32px,4vw,46px);font-weight:400;line-height:1.05}.listado-encabezado p{margin:0;max-width:58ch;color:var(--muted)}.listado-cuenta{padding:8px 16px;border-radius:999px;background:#fff;color:var(--green);font-size:13px;font-weight:800}.listado-secciones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}.seccion-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid #17332726;border-radius:999px;background:#fff;color:var(--green);font-size:14px;font-weight:700;transition:.15s}.seccion-chip:hover{border-color:var(--green);background:#1733270d}.seccion-chip.actual{border-color:var(--green);background:var(--green);color:#fff}.listado-mas{margin:34px 0 0;text-align:center}.listado .empty{display:grid;gap:18px;justify-items:center}a.buscador-op{display:inline-flex;align-items:center;text-decoration:none}@media(max-width:900px){.buscador-envoltorio{margin-top:128px}.buscador-campo{flex:1 1 130px}.form-grid.compacta.cuatro{grid-template-columns:repeat(3,1fr)}.ficha-grid{grid-template-columns:1fr;gap:24px}.ficha-lateral{position:static}.ficha-gallery{height:360px}.site-header nav{display:none}.header-phone{display:none}.property-grid{grid-template-columns:1fr 1fr}.category-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.contact-inner{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.draft{font-size:9px}.hero{min-height:720px}.hero-content{padding:34px 0 54px}.hero h1{font-size:52px}.actions{align-items:stretch;flex-direction:column}.button{width:100%}.section{padding:72px 0}.section-heading{align-items:flex-start;flex-direction:column}.property-grid,.category-grid{grid-template-columns:1fr}.gallery{height:280px}.coast-inner{grid-template-columns:1fr}.coast-icon{font-size:50px}.about-image{min-height:430px}.about-grid{gap:38px}.benefits{grid-template-columns:1fr}.contact h2,.section h2,.coast h2{font-size:42px}.footer-inner{align-items:flex-start;flex-direction:column;padding:25px 0}.footer-logo{height:44px}.floating-whatsapp span{display:none}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.installer-body,.admin-body{padding:14px}.installer-card,.admin-card{padding:22px}.admin-table{display:block;overflow-x:auto}.image-admin-grid{grid-template-columns:1fr 1fr}.viewer{grid-template-columns:1fr;grid-template-rows:1fr auto auto;padding:12px}.viewer-stage{grid-column:1;grid-row:1}.viewer-nav{grid-row:2;width:46px;height:46px;font-size:26px}.viewer-nav.previous{grid-column:1;justify-self:start}.viewer-nav.next{grid-column:1;justify-self:end}.viewer-caption{grid-column:1;grid-row:3;font-size:13px}.viewer-close{top:10px;right:10px;width:44px;height:44px}.play-badge{width:52px;height:52px;font-size:20px}.media-preview{grid-template-columns:1fr 1fr}.coast-grid{grid-template-columns:1fr;gap:18px}.coast-inner{margin-bottom:32px}.coast-card-photo{height:190px}.coast-actions{align-items:stretch;flex-direction:column}.coast-actions .button{width:100%}.filtro-categorias{flex-wrap:nowrap;overflow-x:auto;margin-bottom:24px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.filtro-categorias::-webkit-scrollbar{display:none}.filtro-chip{flex:0 0 auto}.admin-card-top{flex-direction:column}.admin-card-top .button{width:100%}.ventana{width:calc(100% - 20px);max-height:calc(100dvh - 24px)}.ventana-caja{padding:20px}.ventana-top h2{font-size:22px}.ventana-pie{flex-direction:column-reverse}.ventana-pie .button{width:100%}.selector-iconos{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ficha-gallery{height:270px}.ficha-bloque,.ficha-caja{padding:20px}.ficha-precio{font-size:31px}.ficha-header-inner{gap:12px}.volver{font-size:12px}.servicios-elegir{grid-template-columns:1fr}.form-grid.compacta.cuatro{grid-template-columns:1fr 1fr}.casillas-fila{grid-template-columns:1fr}.bloque{padding:15px 15px 13px}.bloque legend{font-size:16px}.form-acciones{flex-direction:column-reverse}.form-acciones .button{width:100%}.filtro-linea{align-items:flex-start;flex-direction:column;gap:7px}.filtro-titulo{width:auto}.filtros{gap:14px;margin-bottom:24px}.admin-logo{width:38px;height:38px}.admin-marca{gap:10px}.login-logo{height:52px}.comodidades-grupos{grid-template-columns:1fr 1fr;gap:14px}.comodidades{grid-template-columns:1fr}.compartir-botones .small-button{flex:1 1 auto;justify-content:center}.compartir-listas{padding:14px}.buscador{gap:8px;padding:11px;border-radius:16px}.buscador-operacion{width:100%}.buscador-op{flex:1;padding:0 12px}.buscador-campo,.buscador-campo.angosto{flex:1 1 calc(50% - 4px)}.buscador-boton{width:100%}.buscador-envoltorio{margin-top:112px;padding-bottom:0}.listado-nav{gap:14px;font-size:12px}.listado-encabezado{flex-direction:column;align-items:flex-start;gap:12px}.listado-secciones{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.listado-secciones::-webkit-scrollbar{display:none}.seccion-chip{flex:0 0 auto}}

/* ===== El logo completo es la marca ===== */
/* Va entero, no partido en un dibujito con el nombre escrito al lado. Como el texto
   del logo es verde oscuro, en la web se apoya sobre una tarjeta clara para que se lea
   sobre la foto del encabezado. */
.brand{gap:0;padding:7px 15px;border-radius:14px;background:#f4f0e7f2;box-shadow:0 4px 18px #0f271d2e}
.brand-logo{width:auto;height:42px}
.admin-logo{width:auto;height:40px;padding:0;border-radius:0;background:none;box-shadow:none}
.admin-marca h1{margin:0}
.login-logo{width:auto;height:56px;margin:0 auto 6px}

/* ===== Volver ===== */
.volver-atras{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:9px 17px;border:1px solid #dfe5e2;border-radius:999px;background:#fff;color:var(--green);font-size:13px;font-weight:700}
.volver-atras:hover{border-color:var(--green);background:var(--cream)}
.volver-atras+.miga{padding-top:14px}

/* ===== El mapa se ve dentro de la ficha ===== */
/* Arranca en satélite: en el campo se ve la vegetación, el río y los caminos, que es
   lo que el comprador mira. Con un toque pasa al mapa común. */
.mapa{margin:16px 0 18px}
.mapa-vistas{display:inline-flex;gap:4px;margin-bottom:10px;padding:4px;border-radius:999px;background:var(--cream)}
.mapa-vista{padding:7px 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mapa-vista.activa{background:var(--green);color:#fff}
.mapa-marco{display:block;width:100%;height:340px;border:0;border-radius:18px;background:var(--cream);box-shadow:0 8px 26px #17332714}

/* ===== Panel: estado y barra de listas ===== */
.estado-punto{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.estado-punto::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#c0392b}
.estado-punto.si::before{background:#2e7d4f}
.compartir-titulo{width:100%;padding:0;border:0;background:none;font-family:inherit;text-align:left}
.compartir-titulo.plegable{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding:4px 0;cursor:pointer}
.compartir-titulo.plegable[aria-expanded=true]{margin-bottom:10px}
.compartir-titulo:not(.plegable) span{display:none}

@media(max-width:640px){
  .brand{padding:5px 11px;border-radius:11px}
  .brand-logo{height:29px}
  .admin-logo{width:auto;height:31px}
  .login-logo{height:44px}
  .mapa-marco{height:250px}
  .mapa-vista{padding:7px 14px;font-size:12px}

  /* Las tablas del panel se leen como fichas: en el celular no se corre nada para el
     costado, cada fila muestra lo justo y cada dato dice de qué se trata. */
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table{overflow:visible}
  .admin-table thead{display:none}
  .admin-table tr{margin-bottom:12px;border:1px solid #e5e9e7;border-radius:16px;background:#fff;box-shadow:0 3px 14px #1733270f;overflow:hidden}
  .admin-table td{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:1px solid #f0f3f1;text-align:right}
  .admin-table td:last-child{border-bottom:0}
  .admin-table td::before{content:attr(data-titulo);flex:0 0 auto;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left}
  .admin-table td.celda-principal,.admin-table td.celda-acciones{display:block;text-align:left}
  .admin-table td.celda-principal{padding:13px 14px;background:var(--cream)}
  .admin-table td.celda-principal::before{display:none}
  .admin-table td.celda-acciones::before{display:block;margin-bottom:9px}
  .admin-table td.celda-precio{color:var(--green);font-weight:800}
  .admin-table .admin-actions{flex-wrap:wrap;gap:7px}
}

/* ===== Lo que más se busca, arriba de todo ===== */
/* En la tarjeta van solo las cuatro comodidades que deciden la consulta; el resto
   está en la ficha. */
.comodidades-gancho{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0;list-style:none}
.comodidades-gancho li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #e2e7e4;border-radius:999px;background:var(--cream);color:var(--green);font-size:12px;font-weight:700}
.comodidades-gancho span{font-size:13px;line-height:1}

/* ===== La marca va suelta y grande, no metida en una cápsula ===== */
/* Sobre la foto del encabezado se usa la versión clara del logo: el mismo dibujo con
   el texto en crema, que es la única forma de que se lea sobre el verde. */
.brand{gap:0;padding:0;border-radius:0;background:none;box-shadow:none}
.brand-logo{width:auto;height:58px}
.admin-logo{width:auto;height:52px}
.login-logo{width:auto;height:66px}

@media(max-width:900px){
  .brand-logo{height:48px}
  .admin-logo{height:44px}
}

@media(max-width:640px){
  .brand-logo{height:38px}
  .admin-logo{height:34px}
  .login-logo{height:48px}
  .site-header nav{gap:15px}
  .listado-nav{gap:15px}
}

/* ===== La marca manda: el encabezado le hace lugar al logo entero ===== */
.header-inner{height:92px}
.brand-logo{height:70px}

/* ===== Panel: una fila ordenada, no una pila de botones ===== */
/* Cada acción es un botón del mismo tamaño con su dibujo, así la columna queda
   pareja y entra en una línea. El nombre sigue estando para quien use lector de
   pantalla y aparece al apoyar el mouse. */
.acciones-fila{display:flex;align-items:center;gap:5px}
.acciones-fila form{display:contents}
.accion{display:inline-flex;width:34px;height:34px;flex:0 0 auto;align-items:center;justify-content:center;padding:0;border:1px solid #dfe5e2;border-radius:9px;background:#fff;color:var(--green);cursor:pointer}
.accion:hover{border-color:var(--green);background:var(--green);color:#fff}
.accion.peligro{color:#9b2d2d}
.accion.peligro:hover{border-color:#9b2d2d;background:#9b2d2d;color:#fff}

.chip-lista{display:inline-flex;min-height:34px;align-items:center;padding:7px 14px;border:1px solid #d8e0dc;border-radius:999px;background:#fff;color:var(--green);font-size:12.5px;font-weight:700;cursor:pointer}
.chip-lista:hover{border-color:var(--green);background:var(--green);color:#fff}

.admin-table th{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.admin-table tbody tr:hover{background:#fbfcfb}
.admin-table td.celda-precio{white-space:nowrap;font-weight:700}
.admin-table td.celda-acciones{width:1%;white-space:nowrap}

@media(max-width:900px){
  .header-inner{height:80px}
  .brand-logo{height:56px}
}

@media(max-width:640px){
  .header-inner{height:66px}
  .brand-logo{height:40px}
  .accion{width:42px;height:42px}
  .acciones-fila{gap:7px}
  .admin-table td.celda-acciones{width:auto}
}

/* ===== Encabezado claro: el logo va tal cual, con sus colores ===== */
/* El logo de la inmobiliaria es verde oscuro y naranja. Sobre la foto del hero no se
   leía, y meterlo en una cajita lo achicaba. La barra de arriba pasa a ser clara: así
   la marca entra entera, en su tamaño y con sus colores originales. */
.site-header{background:#f7f5f0;color:var(--green);box-shadow:0 1px 0 #0000000f,0 6px 24px #0f271d1a}
.site-header nav a{color:var(--green)}
.site-header nav a:hover,.site-header nav a.actual{color:#b4762f}
.header-phone{border-color:#dcdfd8;background:#fff;color:var(--green)}
.header-phone:hover{border-color:var(--green)}
.volver{color:var(--green)}
.header-inner{height:96px}
.brand-logo{width:auto;height:74px}
.buscador-envoltorio{padding-top:26px}

@media(max-width:900px){
  .header-inner{height:82px}
  .brand-logo{height:58px}
}

@media(max-width:640px){
  .header-inner{height:68px}
  .brand-logo{height:46px}
  .buscador-envoltorio{padding-top:14px}
}

/* El listado y la ficha llevan la misma barra clara que la portada, para que la marca
   se vea igual en todo el sitio. */
.ficha-header{background:#f7f5f0;color:var(--green);box-shadow:0 1px 0 #0000000f,0 6px 24px #0f271d1a}
.ficha-header-inner{min-height:96px}
.listado-nav{color:var(--green)}
.listado-nav a:hover,.listado-nav a.actual{color:#b4762f}

@media(max-width:900px){
  .ficha-header-inner{min-height:82px}
}

@media(max-width:640px){
  .ficha-header-inner{min-height:68px;padding:10px 0}
}

/* ===== Detalles del encabezado ===== */
/* El menú no centraba sus elementos, así que el botón de Contacto quedaba corrido
   respecto del resto. Y el teléfono, blanco sobre crema, casi no se leía: ahora va
   en verde, que es el color de la marca y el que más contrasta contra la barra. */
.site-header nav{align-items:center}
.nav-contacto{display:inline-flex;height:38px;align-items:center;padding:0 18px}
.header-phone{height:42px;border-color:var(--green);background:var(--green);color:#fff}
.header-phone:hover{border-color:var(--green2);background:var(--green2)}
.header-phone svg{flex:0 0 auto}

/* El teléfono dibujado se alinea con el texto que lo acompaña, en el pie y en la ficha. */
.pie-datos span{display:inline-flex;align-items:center;gap:6px}
.pie-datos svg,.button svg{flex:0 0 auto}

/* Las comodidades de la tarjeta son un atajo a la lista completa de la ficha. El
   último globo dice cuántas quedan sin mostrar, para que se note que hay más. */
.comodidades-gancho{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0}
.gancho{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #e2e7e4;border-radius:999px;background:var(--cream);color:var(--green);font-size:12px;font-weight:700}
.gancho span{font-size:13px;line-height:1}
.gancho.mas{border-style:dashed;background:none;color:var(--muted)}
.comodidades-gancho:hover .gancho{border-color:var(--green)}
.comodidades-gancho:hover .gancho.mas{color:var(--green)}

/* ===== Formulario de consulta ===== */
.consulta{display:grid;gap:14px;margin-top:26px;padding:22px;border:1px solid #e2e7e4;border-radius:18px;background:#fff;text-align:left}
.consulta h3{margin:0;color:var(--green);font-family:Georgia,serif;font-size:22px}
.consulta-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.consulta label{display:grid;gap:6px;align-content:start;color:var(--ink);font-size:13px;font-weight:700}
.consulta label small{color:var(--muted);font-weight:400}
.consulta input,.consulta textarea{width:100%;padding:11px 13px;border:1px solid #d8ddd8;border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:400}
.consulta input:focus,.consulta textarea:focus{border-color:var(--green);outline:2px solid #17332726;outline-offset:1px}
.consulta textarea{resize:vertical;min-height:96px}
.consulta button{justify-self:start}
.consulta-nota{margin:0;color:var(--muted);font-size:12px}
/* El campo trampa no lo ve nadie, pero los programas que mandan basura lo completan. */
.consulta-trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.consulta-aviso{margin:0;padding:11px 14px;border-radius:11px;font-size:14px;font-weight:700}
.consulta-aviso.bien{background:#e8f3ec;color:#1d6b3f}
.consulta-aviso.mal{background:#fbeaea;color:#9b2d2d}
.contact .consulta{margin-top:30px}

/* ===== Consultas recibidas, en el panel ===== */
.consultas-resumen{margin:0 0 16px;color:var(--muted);font-size:14px}
.consulta-recibida{margin-bottom:12px;padding:16px 18px;border:1px solid #e5e9e7;border-radius:16px;background:#fff}
.consulta-recibida.sin-leer{border-color:var(--green);background:#fbfdfb}
.consulta-recibida header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.consulta-fecha{margin-left:9px;color:var(--muted);font-size:12px}
.consulta-nueva{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--green);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.consulta-nueva.aviso{background:#9b2d2d}
.consulta-datos,.consulta-propiedad{margin:0 0 6px;font-size:13.5px}
.consulta-propiedad a{color:var(--green);font-weight:700;text-decoration:underline}
.consulta-texto{margin:9px 0 0;padding-top:11px;border-top:1px solid #f0f3f1;font-size:14.5px;line-height:1.65}
.small-button .cuenta,.cuenta{display:inline-block;min-width:18px;margin-left:5px;padding:1px 5px;border-radius:999px;background:#fff;color:var(--green);font-size:10.5px;font-weight:800;text-align:center}

/* ===== Encabezado del panel en el celular ===== */
/* Estaba en una sola fila: el título quedaba pisado por los botones del menú. Ahora la
   marca va arriba y los botones abajo, cada cosa en su renglón. */
@media(max-width:900px){
  .admin-top{flex-wrap:wrap;gap:12px}
}

@media(max-width:640px){
  .admin-top{flex-direction:column;align-items:stretch;gap:12px}
  .admin-marca{align-items:center}
  .admin-marca h1{font-size:19px;line-height:1.2}
  .admin-top .admin-actions{flex-wrap:wrap;gap:6px}
  .admin-top .small-button{flex:0 1 auto;padding:8px 11px;font-size:11.5px}

  /* Las listas armadas entran en un solo renglón que se corre con el dedo. */
  .compartir-botones{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
  .chip-lista{flex:0 0 auto}

  .consulta{padding:18px}
  .consulta-campos{grid-template-columns:1fr}
  .consulta button{justify-self:stretch}
  .consulta-recibida header{flex-direction:column;align-items:flex-start}
}

/* Dentro de la ficha, el formulario ya está sobre una tarjeta blanca: sin este ajuste
   quedaba una caja adentro de otra. */
.ficha-bloque .consulta{margin:0;padding:0;border:0;background:none}

/* ===== Buscador y paginado del panel ===== */
.buscador-panel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.buscador-panel input[type=search]{flex:1 1 260px;min-width:0;padding:9px 14px;border:1px solid #d8ddd8;border-radius:999px;background:#fff;font:inherit;font-size:14px}
.buscador-panel input[type=search]:focus{border-color:var(--green);outline:2px solid #17332726;outline-offset:1px}
.small-button.liviano{border:1px solid #d8ddd8;background:#fff;color:var(--green)}
.paginado{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #eef2f0}
.paginado-cuenta{color:var(--muted);font-size:13px;text-align:center}

@media(max-width:640px){
  /* En el celular la fila muestra lo justo para reconocer la propiedad: nombre,
     dirección, precio y si está publicada. La categoría, las fotos y el orden se ven
     y se cambian al entrar a editarla, y así una propiedad ocupa un tercio de lo que
     ocupaba: con muchas cargadas, la diferencia es la lista entera. */
  .admin-table td[data-titulo="Orden"],
  .admin-table td[data-titulo="Categoría"],
  .admin-table td[data-titulo="Fotos"]{display:none}

  /* Precio y estado comparten renglón. */
  .admin-table td.celda-precio,
  .admin-table td[data-titulo="Estado"]{display:inline-flex;width:50%;vertical-align:top;border-bottom:1px solid #f0f3f1}
  .admin-table td.celda-precio{justify-content:flex-start;gap:0;border-right:1px solid #f0f3f1}
  .admin-table td.celda-precio::before,
  .admin-table td[data-titulo="Estado"]::before{display:none}
  .admin-table td[data-titulo="Estado"]{justify-content:flex-end}

  .admin-table td.celda-principal{padding:12px 14px}
  .admin-table td.celda-principal strong{font-size:15px;line-height:1.35}
  .admin-table td.celda-principal small{color:var(--muted);font-size:12.5px}
  .admin-table td.celda-acciones{padding:10px 14px}
  .admin-table td.celda-acciones::before{display:none}

  .paginado{flex-wrap:wrap;justify-content:center}
  .paginado-cuenta{order:-1;width:100%}
}

/* ===== Consultas: lista cerrada, se abre la que interesa ===== */
/* Con cien consultas, mostrarlas abiertas hace una página infinita. Cada una es una
   línea que dice lo justo para decidir si abrirla: quién, por qué propiedad, en qué
   anda y cuándo hay que retomarla. */
.consulta-recibida{margin-bottom:8px;padding:0;border:1px solid #e5e9e7;border-radius:13px;background:#fff;overflow:hidden}
.consulta-recibida.nueva{border-left:3px solid var(--green)}
.consulta-recibida.vencida{border-left:3px solid #b4762f}
.consulta-recibida.cerrada{opacity:.72}
.consulta-recibida[open]{border-color:var(--green);box-shadow:0 4px 18px #1733270f}

.consulta-recibida summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;cursor:pointer;list-style:none}
.consulta-recibida summary::-webkit-details-marker{display:none}
.consulta-recibida summary:hover{background:#fbfcfb}
.consulta-recibida[open] summary{border-bottom:1px solid #eef2f0}

.consulta-quien{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.consulta-quien strong{color:var(--green);font-size:14.5px}
.consulta-quien small{overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.consulta-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.consulta-fecha{color:var(--muted);font-size:12px}

.etiqueta-estado-consulta{padding:3px 10px;border-radius:999px;background:#eef2f0;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.03em}
.etiqueta-estado-consulta.nueva{background:var(--green);color:#fff}
.etiqueta-estado-consulta.proceso{background:#f0e6d5;color:#8a5a1e}
.etiqueta-estado-consulta.cerrada{background:#eef2f0;color:var(--muted)}
.consulta-cuando{padding:3px 10px;border:1px dashed #d8ddd8;border-radius:999px;color:var(--muted);font-size:11px;font-weight:700}
.consulta-cuando.vencida{border-style:solid;border-color:#b4762f;background:#fdf4e8;color:#8a5a1e}

.consulta-cuerpo{padding:14px 15px 15px}
.consulta-texto{margin:10px 0 0;padding:12px 14px;border-radius:11px;background:var(--cream);font-size:14px;line-height:1.6}
.consulta-contactar{margin-top:12px}
.consulta-contactar .small-button{flex:0 0 auto}

.seguimiento{margin-top:14px;padding-top:14px;border-top:1px solid #eef2f0}
.seguimiento-campos{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.seguimiento label{display:grid;gap:5px;align-content:start;color:var(--ink);font-size:12px;font-weight:700}
.seguimiento select,.seguimiento input,.seguimiento textarea{width:100%;padding:9px 12px;border:1px solid #d8ddd8;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;font-weight:400}
.seguimiento select:focus,.seguimiento input:focus,.seguimiento textarea:focus{border-color:var(--green);outline:2px solid #17332726;outline-offset:1px}
.seguimiento-notas{margin-top:11px}
.seguimiento textarea{resize:vertical}
.seguimiento-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}

.filtro-chip.urgente{border-color:#b4762f;color:#8a5a1e}
.filtro-chip.urgente.activo{border-color:#8a5a1e;background:#8a5a1e;color:#fff}
.filtro-chip .cuenta{background:#eef2f0;color:var(--green)}
.filtro-chip.activo .cuenta{background:#ffffff2e;color:#fff}

@media(max-width:640px){
  .consulta-recibida summary{padding:11px 13px}
  .consulta-quien{flex:1 1 100%}
  .consulta-marcas{width:100%}
  .consulta-fecha{margin-left:auto}
  .seguimiento-campos{grid-template-columns:1fr}
  .seguimiento-pie{flex-direction:row}
  .seguimiento-pie .small-button{flex:1 1 auto}
}

/* ===== Puntitos del carrusel ===== */
/* En el celular las flechas se ven poco y nada avisa que hay más fotos. Los puntos
   dicen cuántas son y en cuál está parado. */
.gallery-puntos{position:absolute;bottom:12px;left:50%;display:flex;gap:6px;padding:6px 10px;border-radius:999px;background:#0f271d5c;transform:translateX(-50%);backdrop-filter:blur(6px);pointer-events:none}
.gallery-puntos span{width:6px;height:6px;border-radius:50%;background:#ffffff8a;transition:background .18s,width .18s}
.gallery-puntos span.activo{width:18px;border-radius:999px;background:#fff}

/* ===== Nuevo ingreso ===== */
/* La fecha de carga decide sola: nadie se olvida de sacar el cartel y no termina
   diciendo "nuevo" algo publicado hace medio año. */
.badge-nuevo{position:absolute;top:18px;right:18px;z-index:3;padding:6px 13px;border-radius:999px;background:var(--gold);color:var(--green);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 14px #0f271d2e}

/* ===== El menú vuelve al subir ===== */
/* En el listado y en la ficha la barra queda pegada arriba. En la portada tapaba la
   foto de entrada, así que aparece solo cuando el visitante sube con el dedo. */
.ficha-header{position:sticky;top:0;z-index:40}

.site-header.fijo{position:fixed;top:0;animation:bajar-cabecera .22s ease-out}
@keyframes bajar-cabecera{from{transform:translateY(-100%)}to{transform:none}}

@media(prefers-reduced-motion:reduce){
  .site-header.fijo{animation:none}
  .gallery-puntos span{transition:none}
}

@media(max-width:640px){
  .gallery-puntos{bottom:10px}
  .badge-nuevo{top:14px;right:14px;padding:5px 11px;font-size:9.5px}
}

/* ===== Marca y colores ===== */
.bloque-titulo{margin:0 0 6px;color:var(--green);font-family:Georgia,serif;font-size:21px}
.marca-logo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:16px}
.marca-muestra{display:grid;gap:8px;justify-items:center;padding:20px;border:1px dashed #d8ddd8;border-radius:14px;background:var(--cream)}
.marca-muestra img{max-width:100%;max-height:90px;object-fit:contain}
.marca-muestra small{color:var(--muted);font-size:12px}
.marca-subir{display:grid;gap:12px;align-content:start}
.marca-subir label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:700}
.marca-subir input[type=file]{padding:9px;border:1px solid #d8ddd8;border-radius:10px;background:#fff;font:inherit;font-size:13px}
.marca-restaurar{margin-top:12px}

.color-elegir{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:16px}
.color-cuadro{display:grid;gap:7px;color:var(--ink);font-size:13px;font-weight:700}
.color-cuadro input[type=color]{width:76px;height:52px;padding:3px;border:1px solid #d8ddd8;border-radius:12px;background:#fff;cursor:pointer}
.color-sugeridos{display:grid;gap:7px}
.color-fichas{display:flex;flex-wrap:wrap;gap:8px}
.color-ficha{width:38px;height:38px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #d8ddd8;cursor:pointer}
.color-ficha:hover{box-shadow:0 0 0 2px var(--green)}
.color-ficha.activo{box-shadow:0 0 0 3px var(--green)}

.paleta-previa{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.paleta-muestra{display:grid;gap:6px;justify-items:center}
.paleta-color{display:block;width:64px;height:44px;border:1px solid #0000001a;border-radius:11px}
.paleta-muestra small{color:var(--muted);font-size:11px}

/* Un vistazo de cómo queda la web, para no tener que ir a mirarla y volver. */
.marca-vistazo{max-width:340px;margin-top:20px;border:1px solid #e5e9e7;border-radius:16px;overflow:hidden}
.vistazo-barra{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;font-size:13px}
.vistazo-barra strong{font-family:Georgia,serif;font-size:15px}
.vistazo-barra span{font-size:12px;font-weight:700}
.vistazo-cuerpo{padding:16px 15px 18px}
.vistazo-precio{margin:0;font-family:Georgia,serif;font-size:24px;font-weight:700}
.vistazo-titulo{margin:5px 0 3px;font-size:14px;font-weight:700}
.vistazo-lugar{margin:0 0 13px;font-size:12.5px}
.vistazo-boton{display:inline-block;padding:9px 18px;border-radius:999px;font-size:12.5px;font-weight:700}

.marca-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:22px}

@media(max-width:640px){
  .marca-logo{grid-template-columns:1fr}
  .color-elegir{gap:16px}
  .paleta-color{width:52px;height:38px}
  .marca-vistazo{max-width:none}
  .marca-acciones .button{flex:1 1 100%}
}

/* ===== Correr las fotos de lugar ===== */
.image-admin-card{position:relative}
.medio-puesto{position:absolute;top:7px;left:7px;z-index:2;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#0f271dcc;color:#fff;font-size:12px;font-weight:800}
.medio-mover{display:flex;gap:6px;margin-top:7px}
.medio-mover .accion{width:34px;height:32px;font-size:15px;font-weight:700;line-height:1}
.medio-mover .accion:disabled{opacity:.35;cursor:default}
.medio-mover .accion:disabled:hover{border-color:#dfe5e2;background:#fff;color:var(--green)}

/* ===== Pestañas del panel ===== */
.pestanas{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px;padding:5px;border-radius:14px;background:#e8ebe8}
.pestana{padding:9px 18px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:700}
.pestana:hover{color:var(--green)}
.pestana.activa{background:#fff;color:var(--green);box-shadow:0 2px 8px #1733271a}

/* ===== La ficha es una sola tarjeta ===== */
/* Estaba partida en cinco tarjetas sueltas: descripción, servicios, comodidades,
   ubicación y consulta. Cada una flotando parecía una propiedad distinta y el aire
   entre ellas comía media pantalla del celular. Ahora es una sola, y adentro las
   secciones se separan con una línea fina. Las otras propiedades sí van aparte,
   porque son otras propiedades. */
.ficha-principal{padding:28px 30px;border-radius:var(--radius);background:#fff;box-shadow:0 14px 40px #19302510}
.ficha-bloque{margin-top:0;padding:0;border-radius:0;background:none;box-shadow:none}
.ficha-bloque + .ficha-bloque{margin-top:24px;padding-top:24px;border-top:1px solid #eef2f0}

/* El espacio ya no es el mismo para todo: el título pega con lo suyo, y el aire
   grande queda entre secciones, que es donde de verdad hace falta. */
.ficha-bloque h2{margin:0 0 10px;font-size:21px}
.ficha-bloque p{margin:0 0 10px}
.ficha-bloque p:last-child{margin-bottom:0}
.ficha-descripcion p{margin:0 0 12px;line-height:1.7}

/* Las otras propiedades sí son otra cosa: van en su propia tarjeta, más abajo. */
.ficha-bloque.otras{margin-top:26px;padding:28px 30px;border-radius:var(--radius);background:#fff;box-shadow:0 14px 40px #19302510;border-top:0}

@media(max-width:900px){
  .ficha-principal{padding:22px}
  .ficha-bloque.otras{padding:22px}
}

@media(max-width:640px){
  .ficha-principal{padding:18px 17px;border-radius:20px}
  .ficha-bloque + .ficha-bloque{margin-top:20px;padding-top:20px}
  .ficha-bloque h2{font-size:19px}
  .ficha-bloque.otras{margin-top:18px;padding:18px 17px;border-radius:20px}
  .mapa{margin:12px 0 14px}
}

/* ===== Contraste ===== */
/* El dorado de la marca se lee bien sobre el verde oscuro, pero sobre fondo claro
   queda en 2,1 a 1 cuando lo mínimo para texto es 4,5 a 1. Donde va sobre claro se
   usa una versión más profunda del mismo dorado, que mantiene el color de la marca
   y se lee. Lo detectó la auditoría de Google. */
.coast-icon{color:#9a6a3e}

/* ============================================================
   REDISEÑO — Ficha de propiedad
   ============================================================
   Sistema del rediseño: papel cálido, verde muy profundo y un acento cobre.
   Instrument Serif para los precios y los títulos, Public Sans para leer.
   El precio manda: es lo primero que mira el que entra a una ficha. */

.pagina-ficha{
  --papel:var(--cream);
  --tinta:var(--ink);
  --linea:#12281f1f;
  --linea-suave:#12281f14;
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.pagina-ficha a{color:inherit;text-decoration:none}
.pagina-ficha a:hover{color:var(--gold)}
.pagina-ficha ::selection{background:var(--gold);color:#fff}
.pagina-ficha img{display:block;max-width:100%}
.pagina-ficha h1,.pagina-ficha h2,.pagina-ficha h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400}

.marco{width:min(1320px,100%);margin-inline:auto;padding-inline:22px}

/* ---------- Barra de arriba ---------- */
/* Se queda pegada al desplazar, con el papel apenas translúcido: así se ve que
   hay contenido pasando por debajo sin que estorbe la lectura. */
.barra{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linea);background:color-mix(in srgb,var(--papel) 94%,transparent);backdrop-filter:blur(14px)}
.barra-inner{width:min(1320px,100%);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:14px 22px}
.pagina-ficha .brand{flex:0 0 auto;padding:0;border-radius:0;background:none;box-shadow:none}
.pagina-ficha .brand-logo{width:auto;height:46px}
.barra-nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-left:auto;font-size:15px}
.barra-contacto{display:flex;align-items:center;gap:14px}
.barra-telefono{font-size:15px;font-weight:600}
.barra-boton{padding:11px 20px;border-radius:999px;background:var(--green);color:var(--papel);font-size:14px;font-weight:600}
.barra-boton:hover{background:var(--gold);color:#fff}

/* ---------- Miga de pan ---------- */
.pagina-ficha .miga{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:22px;color:var(--muted);font-size:13px}
.pagina-ficha .miga .actual{color:var(--tinta)}

/* ---------- Cabeza de la ficha: fotos y datos ---------- */
.ficha-cabeza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:clamp(28px,3.5vw,54px);align-items:start;padding-top:26px}

.visor{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#e6e1d7}
.visor .gallery-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.visor .gallery-track::-webkit-scrollbar{display:none}
.visor .gallery-slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;cursor:zoom-in}
.visor .gallery-slide img{width:100%;height:100%;object-fit:cover}
.visor.sin-fotos img{width:100%;height:100%;object-fit:cover}

.visor-etiquetas{position:absolute;top:16px;left:16px;display:flex;flex-wrap:wrap;gap:8px}
.visor-etiquetas span{padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.marca-operacion{background:var(--papel);color:var(--tinta)}
.marca-novedad{background:color-mix(in srgb,var(--gold) 94%,transparent);color:#fff}
.marca-estado{background:#8a2b22;color:#fff}
.marca-costa{background:var(--green);color:var(--papel)}

.visor-flecha{position:absolute;top:50%;width:44px;height:44px;transform:translateY(-50%);border:0;border-radius:50%;background:#0c1d169e;color:var(--papel);font-size:18px;cursor:pointer}
.visor-flecha:hover{background:var(--green)}
.visor-flecha.previous{left:14px}
.visor-flecha.next{right:14px}
.visor-cuenta{position:absolute;right:14px;bottom:14px;padding:6px 11px;border-radius:6px;background:#0c1d16b8;color:var(--papel);font-size:12px}

/* La tira de miniaturas: se ve de un vistazo cuántas fotos hay y dónde está el video. */
.tiras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(88px,100%),1fr));gap:10px;margin-top:12px}
.tira{position:relative;aspect-ratio:4/3;padding:0;overflow:hidden;border:2px solid transparent;border-radius:10px;background:none;opacity:.62;cursor:pointer;transition:opacity .2s,border-color .2s}
.tira img{width:100%;height:100%;object-fit:cover}
.tira:hover{opacity:.85}
.tira.activa{border-color:var(--gold);opacity:1}
.tira-video{position:absolute;inset:0;display:grid;place-items:center;background:#0c1d1659;color:#fff;font-size:15px}

.rotulo{margin:0;color:var(--gold2,var(--gold));font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.rotulo.suave{color:var(--muted);letter-spacing:.16em}
.precio-grande{margin:14px 0 10px;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(40px,5vw,60px);line-height:1}
.ficha-columna h1{margin:0 0 10px;font-size:clamp(28px,3.2vw,40px);line-height:1.12;text-wrap:balance}
.ficha-lugar{margin:0 0 26px;color:var(--muted);font-size:16px}

/* Ficha técnica: casillas blancas separadas por una línea de un píxel. Se lee en
   diagonal, que es como se leen los números. */
.cuadro-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;margin:0 0 22px;overflow:hidden;border-radius:14px;background:var(--linea)}
.cuadro-datos.apilado{grid-template-columns:1fr}
.cuadro-datos > div{padding:18px 20px;background:#fff}
.cuadro-datos dt{margin-bottom:6px;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cuadro-datos dd{margin:0;font-size:17px;font-weight:600}

.ficha-botones{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.boton-principal{display:inline-flex;flex:1 1 200px;align-items:center;justify-content:center;gap:9px;padding:16px 24px;border:0;border-radius:12px;background:var(--green);color:var(--papel);font:inherit;font-weight:600;text-align:center;cursor:pointer}
.boton-principal:hover{background:var(--gold);color:#fff}
.boton-borde{display:inline-flex;flex:1 1 160px;align-items:center;justify-content:center;padding:16px 24px;border:1px solid #12281f33;border-radius:12px;font-weight:600;text-align:center}
.boton-borde:hover{border-color:var(--gold)}
.boton-punteado{width:100%;padding:14px;border:1px dashed #12281f3d;border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.boton-punteado:hover{border-color:var(--gold);color:var(--gold2,var(--gold))}

.caja-blanca{margin-top:26px;padding:22px;border:1px solid var(--linea);border-radius:14px;background:#fff}
.caja-blanca .cuerpo{margin:10px 0 0;color:var(--cuerpo,#3d4a43);font-size:16px;line-height:1.65;text-wrap:pretty}
.caja-blanca .cuerpo:first-of-type{margin-top:10px}

/* ---------- Secciones ---------- */
.seccion{padding-top:clamp(46px,6vw,80px)}
.seccion-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.seccion-cabeza h2{margin:12px 0 0;font-size:clamp(28px,3vw,42px);line-height:1.15;text-wrap:balance}
.seccion-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.titulo-grande{margin:14px 0 24px;font-size:clamp(28px,3.2vw,44px);line-height:1.1;text-wrap:balance}
.enlace-subrayado{padding-bottom:4px;border-bottom:1px solid #12281f40;font-weight:600}
.enlace-subrayado.claro{border-bottom-color:#f6f3ed4d;color:var(--papel)}
.enlace-subrayado.claro:hover{color:#c99a6b}

.fichas-servicio{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.fichas-servicio li{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--linea);border-radius:999px;background:#fff;font-size:14px;font-weight:600}

.camas{margin:0 0 18px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--linea);font-size:15px;font-weight:600}
.grilla-comodidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1px;overflow:hidden;border-radius:14px;background:var(--linea)}
.grilla-comodidades > div{padding:20px;background:#fff}
.grilla-comodidades h3{margin:0 0 12px;color:var(--muted);font-family:"Public Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.grilla-comodidades ul{margin:0;padding:0;list-style:none}
.grilla-comodidades li{position:relative;padding:0 0 8px 22px;font-size:15px}
.grilla-comodidades li::before{position:absolute;left:0;color:var(--gold);content:"✓"}

.mapa{overflow:hidden;border:1px solid var(--linea);border-radius:16px;background:#e6e1d7}
.mapa-marco{display:block;width:100%;height:min(56vh,440px);border:0}
.mapa-vistas{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--linea)}
.mapa-vista{padding:7px 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.mapa-vista.activa{background:var(--green);color:var(--papel)}

.consulta-doble{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(28px,4vw,54px);align-items:start}

/* ---------- Otras propiedades, sobre el verde profundo ---------- */
/* El corte de color separa "esta propiedad" de "seguí mirando" sin necesidad de
   explicarlo con palabras. */
.franja-oscura{margin-top:clamp(46px,6vw,80px);padding:clamp(50px,7vw,90px) 0;background:var(--green);color:var(--papel)}
.franja-oscura .seccion-cabeza{margin-bottom:30px}
.franja-oscura h2{margin:0;font-size:clamp(28px,3.2vw,44px)}
.grilla-otras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.tarjeta-otra{display:block;overflow:hidden;border:1px solid #f6f3ed1f;border-radius:16px;background:var(--green2);transition:border-color .25s,transform .25s}
.tarjeta-otra:hover{border-color:#c99a6b8c;color:var(--papel);transform:translateY(-4px)}
.tarjeta-otra-foto{aspect-ratio:16/11;overflow:hidden}
.tarjeta-otra-foto img{width:100%;height:100%;object-fit:cover}
.tarjeta-otra-cuerpo{padding:22px}
.tarjeta-otra .precio{margin:0 0 8px;font-family:"Instrument Serif",Georgia,serif;font-size:26px}
.tarjeta-otra .titulo{margin:0 0 6px;font-size:17px;font-weight:600;line-height:1.3}
.tarjeta-otra .lugar{margin:0;color:#f6f3ed99;font-size:14px}

/* ---------- Pie ---------- */
.pie{padding:46px 0 28px;background:var(--green2);color:#f6f3edb3}
.pie-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.pie-logo{width:auto;height:52px}
.pie .pie-datos{display:grid;gap:6px;font-size:14px}
.pie .pie-datos a{color:#f6f3edcc}
.pie .pie-datos a:hover{color:#c99a6b}
.pie .matricula{color:#f6f3ed80;font-size:12.5px}
.pie-admin{color:#f6f3ed8c;font-size:13px}
.pie-admin:hover{color:#c99a6b}

/* ---------- Botón flotante ---------- */
.flotante-whatsapp{position:fixed;right:26px;bottom:26px;z-index:60;display:inline-flex;align-items:center;gap:9px;padding:15px 24px;border-radius:999px;background:var(--gold);color:#fff;font-size:15px;font-weight:600;box-shadow:0 14px 34px #0c1d164d}
.flotante-whatsapp:hover{background:var(--green);color:#fff}

.ficha-vacia{padding-top:80px;padding-bottom:80px;text-align:center}
.ficha-vacia h1{margin:0 0 12px;font-size:clamp(28px,4vw,42px)}
.ficha-vacia p{margin:0 0 22px;color:var(--muted)}
.ficha-vacia .boton-principal{flex:0 0 auto}

/* ---------- El formulario, con el lenguaje del rediseño ---------- */
.pagina-ficha .consulta{gap:16px;margin:0;padding:clamp(22px,3vw,34px);border:1px solid var(--linea);border-radius:18px;background:#fff}
.pagina-ficha .consulta h3{margin:0;font-size:clamp(22px,2.4vw,28px)}
.pagina-ficha .consulta label{gap:7px;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pagina-ficha .consulta label small{letter-spacing:0;text-transform:none}
.pagina-ficha .consulta input,.pagina-ficha .consulta textarea{padding:14px 15px;border:1px solid #12281f29;border-radius:11px;background:var(--papel);font-size:15px;letter-spacing:0;text-transform:none;color:var(--tinta)}
.pagina-ficha .consulta input:focus,.pagina-ficha .consulta textarea:focus{border-color:var(--green);background:#fff;outline:none}
.pagina-ficha .consulta button{padding:16px;border:0;border-radius:11px;background:var(--green);color:var(--papel);font-size:15px;font-weight:600;justify-self:stretch;cursor:pointer}
.pagina-ficha .consulta button:hover{background:var(--gold);color:#fff}
.pagina-ficha .consulta-nota{text-align:center}

@media(max-width:900px){
  .barra-nav{order:3;width:100%;margin-left:0;gap:18px}
  .barra-contacto{margin-left:auto}
}

@media(max-width:640px){
  .marco{padding-inline:16px}
  .barra-inner{gap:12px;padding:11px 16px}
  .pagina-ficha .brand-logo{height:34px}
  .barra-nav{gap:14px;font-size:14px}
  .barra-telefono{display:none}
  .barra-boton{padding:9px 16px;font-size:13px}
  .visor{border-radius:14px}
  .visor-flecha{width:38px;height:38px}
  .tiras{grid-template-columns:repeat(auto-fit,minmax(min(64px,100%),1fr));gap:8px}
  .cuadro-datos{grid-template-columns:1fr 1fr}
  .caja-blanca{padding:18px}
  .franja-oscura{padding:clamp(40px,9vw,60px) 0}
  .pie-inner{flex-direction:column;align-items:flex-start;gap:18px}
  /* En el celular el botón flotante ocupa el ancho: el pulgar llega sin estirarse. */
  .flotante-whatsapp{right:16px;bottom:16px;left:16px;justify-content:center;padding:14px 20px}
}

/* La regla `.pagina-ficha a{color:inherit}` tiene más peso que `.barra-boton{color:…}`,
   así que los botones que son enlaces salían con el texto del mismo color que su fondo.
   Se repiten acá con el prefijo para que ganen ellos. */
.pagina-ficha .barra-boton{color:var(--papel)}
.pagina-ficha .barra-boton:hover{color:#fff}
.pagina-ficha a.boton-principal{color:var(--papel)}
.pagina-ficha a.boton-principal:hover{color:#fff}
.pagina-ficha .boton-borde{color:var(--tinta)}
.pagina-ficha .boton-borde:hover{color:var(--gold)}
.pagina-ficha .flotante-whatsapp{color:#fff}
.pagina-ficha .enlace-subrayado.claro{color:var(--papel)}
.pagina-ficha .enlace-subrayado.claro:hover{color:#c99a6b}
.pagina-ficha .tarjeta-otra{color:var(--papel)}
.pagina-ficha .tarjeta-otra .lugar{color:#f6f3ed99}
.pagina-ficha .pie-admin{color:#f6f3ed8c}
.pagina-ficha .pie-admin:hover{color:#c99a6b}
.pagina-ficha .cuadro-datos dd a{color:var(--tinta)}
.pagina-ficha .cuadro-datos dd a:hover{color:var(--gold)}

/* Las casillas de datos dibujan su propia línea en lugar de dejarla ver por el hueco
   entre ellas: cuando los datos no llenan la última fila, el sobrante queda blanco y
   no como un recuadro gris suelto. */
.cuadro-datos{background:#fff}
.cuadro-datos > div{outline:1px solid var(--linea)}

@media(max-width:640px){
  /* En el celular las miniaturas van en un solo renglón que se corre con el dedo: con
     una grilla, cinco fotos dejaban una sola colgando en la segunda fila, y con doce
     la ficha se llenaba de miniaturas antes de llegar al precio. */
  .tiras{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none}
  .tiras::-webkit-scrollbar{display:none}
  .tira{flex:0 0 74px;scroll-snap-align:start}
}

@media(max-width:640px){
  /* El botón flotante ocupa el ancho abajo: sin este respiro tapa la última línea
     del pie y parece que la página está cortada. */
  .pagina-ficha{padding-bottom:76px}
}

/* ============================================================
   REDISEÑO — Portada
   ============================================================ */

.cinta{margin:0;padding:9px 22px;background:var(--green2);color:#f6f3edb8;font-size:12px;letter-spacing:.14em;text-align:center;text-transform:uppercase}

/* ---------- Portada: foto, texto y el buscador apoyado abajo ---------- */
/* El buscador se apoya sobre el borde de la foto, como una repisa: separa la promesa
   de arriba del catálogo de abajo, y es lo primero que la mano busca. */
.portada{position:relative;display:flex;align-items:flex-end;min-height:640px;padding:110px 0 0;overflow:hidden}
.portada-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada-velo{position:absolute;inset:0;background:linear-gradient(180deg,#0c1d169e 0%,#0c1d1659 40%,#0c1d16e0 100%)}
.portada-contenido{position:relative;width:min(1320px,100%)}
.portada-texto{max-width:720px;animation:asomar .7s ease both}
@keyframes asomar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.chip{display:inline-block;padding:7px 16px;border:1px solid #f6f3ed4d;border-radius:999px;color:#f6f3edc7;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.portada-texto h1{margin:22px 0 18px;color:var(--papel);font-size:clamp(44px,5.6vw,82px);letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.portada-texto > p{max-width:560px;margin:0 0 30px;color:#f6f3edd1;font-size:19px;line-height:1.6;text-wrap:pretty}

.numeros{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:44px}
.numeros > div{display:grid;gap:2px}
.numeros-linea{width:1px;background:#f6f3ed38}
.numero{font-family:"Instrument Serif",Georgia,serif;font-size:34px;color:var(--papel);line-height:1.1}
.numero-que{color:#f6f3ed99;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

.buscador{padding:22px;border-radius:20px 20px 0 0;background:var(--papel);box-shadow:0 -20px 60px #0c1d1640}
.buscador-operaciones{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.buscador-op{padding:10px 20px;border:1px solid #12281f29;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.buscador-op:hover{border-color:var(--green);background:var(--green);color:var(--papel)}
.buscador-campos{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
.buscador-campos label{display:grid;flex:1 1 200px;gap:7px;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.buscador-campos select{appearance:none;padding:14px 16px;border:1px solid #12281f29;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e6e64' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 15px center;color:var(--tinta);font-size:15px;letter-spacing:0;text-transform:none}
.buscador-campos select:focus{border-color:var(--green);outline:2px solid #12281f26;outline-offset:1px}
.buscador-campos .boton-principal{flex:1 1 140px;padding:15px 34px;border-radius:12px}

/* ---------- Secciones claras y oscuras ---------- */
.seccion-clara{padding:clamp(56px,7vw,96px) 0;background:var(--papel)}
.seccion-clara.sin-arriba{padding-top:0}
.seccion-oscura{padding:clamp(56px,7vw,96px) 0;background:var(--green);color:var(--papel)}
.seccion-oscura h2,.seccion-oscura h3{color:var(--papel)}
.seccion-intro{max-width:620px}
.seccion-intro.ancha{max-width:640px;margin-bottom:44px}
.seccion-intro h2{margin:14px 0 12px;font-size:clamp(32px,3.4vw,50px);letter-spacing:-.01em;line-height:1.08;text-wrap:balance}
.seccion-intro > p{margin:0;color:var(--muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.seccion-oscura .seccion-intro > p{color:#f6f3ed99}
.rotulo.claro{color:#c99a6b}
.grilla-tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.aviso-vacio{margin:0;color:#f6f3ed99;font-size:16px}

/* ---------- Tarjetas claras (premium) ---------- */
.tarjeta-clara{display:block;overflow:hidden;border:1px solid var(--linea);border-radius:16px;background:#fff;transition:transform .25s,box-shadow .25s}
.tarjeta-clara:hover{transform:translateY(-4px);box-shadow:0 24px 50px #0c1d1624;color:var(--tinta)}
.tarjeta-clara-foto{position:relative;aspect-ratio:4/3;overflow:hidden}
.tarjeta-clara-foto img{width:100%;height:100%;object-fit:cover}
.marca-redonda{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:#0c1d16d1;color:var(--papel);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tarjeta-clara-cuerpo{padding:22px 22px 24px}
.tarjeta-clara .precio{margin:0 0 6px;font-family:"Instrument Serif",Georgia,serif;font-size:26px}
.tarjeta-clara h3{margin:0 0 8px;font-family:"Public Sans",sans-serif;font-size:18px;font-weight:600;line-height:1.3}
.tarjeta-clara .lugar{margin:0 0 18px;color:var(--muted);font-size:14px}
.tarjeta-accion{font-size:14px;font-weight:600;color:var(--gold2,var(--gold))}

/* ---------- Tarjetas oscuras (destacadas) ---------- */
.chips-oscuros{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 36px}
.chips-oscuros a{padding:9px 18px;border:1px solid #f6f3ed2e;border-radius:999px;font-size:13px;font-weight:600;color:var(--papel);white-space:nowrap}
.chips-oscuros a:hover{border-color:#c99a6b;background:#c99a6b;color:var(--green)}

.tarjeta-oscura{display:flex;flex-direction:column;overflow:hidden;border:1px solid #f6f3ed1f;border-radius:16px;background:var(--green2);transition:border-color .25s}
.tarjeta-oscura:hover{border-color:#c99a6b8c}
.tarjeta-oscura-foto{position:relative;aspect-ratio:16/11;overflow:hidden}
.tarjeta-oscura-foto img{width:100%;height:100%;object-fit:cover}
.tarjeta-marcas{position:absolute;top:14px;left:14px;display:flex;flex-wrap:wrap;gap:6px}
.tarjeta-marcas span{padding:5px 11px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tarjeta-fotos{position:absolute;right:14px;bottom:14px;padding:5px 10px;border-radius:6px;background:#0c1d16b8;color:#f6f3ede6;font-size:12px}
.tarjeta-oscura-cuerpo{display:flex;flex:1;flex-direction:column;padding:24px}
.tarjeta-oscura .precio{margin:0 0 10px;font-family:"Instrument Serif",Georgia,serif;font-size:28px;line-height:1;color:var(--papel)}
.tarjeta-oscura h3{margin:0 0 8px;font-family:"Public Sans",sans-serif;font-size:19px;font-weight:600;line-height:1.3}
.tarjeta-oscura .lugar{margin:0 0 18px;color:#f6f3ed99;font-size:14px}
.datos-tarjeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:12px;margin:0 0 18px;padding:16px 0;border-top:1px solid #f6f3ed1f;border-bottom:1px solid #f6f3ed1f}
.datos-tarjeta dt{margin-bottom:4px;color:#f6f3ed80;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.datos-tarjeta dd{margin:0;font-size:14px;font-weight:600}
.ganchos-oscuros{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.ganchos-oscuros li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #f6f3ed24;border-radius:999px;color:#f6f3edcc;font-size:12px;font-weight:600}
.tarjeta-botones{display:flex;gap:10px;margin-top:auto}
.boton-claro{flex:1;padding:12px;border-radius:10px;background:var(--papel);color:var(--green);font-size:14px;font-weight:600;text-align:center}
.boton-claro:hover{background:#c99a6b;color:#fff}
.boton-wa{display:grid;width:52px;place-items:center;border:1px solid #f6f3ed47;border-radius:10px;color:var(--papel)}
.boton-wa:hover{border-color:#c99a6b;color:#c99a6b}

/* ---------- Categorías ---------- */
/* Al apoyar el dedo o el mouse la tarjeta se da vuelta al verde: el catálogo entero
   se lee de un pasada y se ve cuál está por elegir. */
.tarjeta-categoria{display:grid;gap:14px;align-content:start;min-height:230px;padding:30px;border:1px solid var(--linea);border-radius:16px;background:#fff;transition:background .25s,border-color .25s,color .25s}
.tarjeta-categoria:hover{border-color:var(--green);background:var(--green);color:var(--papel)}
.tarjeta-categoria:hover .rotulo{color:#c99a6b}
.tarjeta-categoria:hover .tarjeta-categoria-texto{color:#f6f3edb3}
.tarjeta-categoria-titulo{font-family:"Instrument Serif",Georgia,serif;font-size:28px;line-height:1.12}
.tarjeta-categoria-texto{color:var(--muted);font-size:15px;line-height:1.55}
.tarjeta-categoria-ir{margin-top:auto;font-weight:600}

/* ---------- Nosotros ---------- */
.nosotros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));overflow:hidden;border-radius:20px;background:var(--green2);color:var(--papel)}
.nosotros-foto{position:relative;min-height:520px}
.nosotros-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nosotros-cita{position:absolute;right:34px;bottom:34px;left:34px;margin:0;color:#fff;font-family:"Instrument Serif",Georgia,serif;font-size:26px;font-style:italic;line-height:1.3;text-shadow:0 2px 24px #0c1d1699}
.nosotros-texto{padding:56px clamp(24px,4vw,56px)}
.nosotros-texto h2{margin:14px 0 20px;font-size:clamp(30px,3vw,44px);line-height:1.1}
.nosotros-texto p{margin:0 0 14px;color:#f6f3edc7;font-size:17px;line-height:1.65;text-wrap:pretty}
.nosotros-valores{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:34px;background:#f6f3ed24}
.nosotros-valores > div{display:grid;gap:4px;padding:20px 18px;background:var(--green2)}
.nosotros-valores strong{font-size:15px;font-weight:600}
.nosotros-valores span{color:#f6f3ed99;font-size:13px;line-height:1.5}

.boton-pildora{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:15px 30px;border-radius:999px;background:var(--green);color:var(--papel);font-weight:600}
.boton-pildora:hover{background:var(--gold);color:#fff}

/* ---------- Pie ---------- */
.pie-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:40px;padding-bottom:36px;border-bottom:1px solid #f6f3ed24}
.pie-lema{margin:16px 0 0;max-width:340px;font-size:15px;line-height:1.6}
.pie-columna{display:grid;gap:10px;align-content:start;font-size:15px}
.pie-titulo{color:#f6f3ed73;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.pie-columna a{color:#f6f3edc7}
.pie-columna a:hover{color:#c99a6b}
.pie-abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-top:22px;font-size:13px}

@media(max-width:900px){
  .nosotros-foto{min-height:340px}
  .nosotros-texto{padding:36px 24px}
}

@media(max-width:640px){
  .portada{min-height:auto;padding-top:64px}
  .portada-texto h1{margin:16px 0 14px}
  .portada-texto > p{font-size:17px;margin-bottom:24px}
  .numeros{gap:18px;margin-bottom:28px}
  .numero{font-size:28px}
  .numero-que{font-size:11px}
  .buscador{padding:16px;border-radius:16px 16px 0 0}
  .buscador-campos{gap:11px}
  .buscador-campos label{flex:1 1 100%}
  .buscador-campos .boton-principal{flex:1 1 100%}
  .buscador-op{padding:9px 15px;font-size:13px}
  .nosotros-cita{right:20px;bottom:20px;left:20px;font-size:21px}
  .nosotros-valores{grid-template-columns:1fr}
  .pie-columnas{gap:26px}
  .seccion-clara.sin-arriba .nosotros{border-radius:16px}
}

@media(max-width:640px){
  /* Los tres números van en tres columnas parejas: en fila se partían y dejaban una
     línea separadora colgando sola al final. */
  .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .numeros-linea{display:none}
  .numero{font-size:26px}
  .numero-que{font-size:10px;letter-spacing:.1em}
  .cinta{padding:8px 16px;font-size:10.5px;letter-spacing:.1em}
}

/* ===== El buscador va arriba, colgado del encabezado ===== */
/* Antes quedaba apoyado abajo del hero. Arriba se encuentra sin buscarlo, que es lo
   primero que hace quien entra a una inmobiliaria: filtrar. Va sin esquinas arriba,
   para que se lea como una continuación de la barra y no como una tarjeta suelta.
   El display propio hace falta porque `.buscador` ya existía como flex, y sin esto
   los botones de operación y los campos quedaban uno al lado del otro. */
.pagina-inicio .portada{align-items:stretch;padding-top:0}
.pagina-inicio .portada-contenido{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:clamp(34px,5vw,64px)}
.pagina-inicio .buscador{display:grid;gap:16px;align-items:stretch;margin-bottom:clamp(40px,6vw,72px);padding:22px;border-radius:0 0 20px 20px;background:color-mix(in srgb,var(--papel) 96%,transparent);backdrop-filter:blur(10px);box-shadow:0 20px 50px #0c1d1633}
.pagina-inicio .buscador-operaciones{margin-bottom:0}
.pagina-inicio .portada-texto{margin-top:auto}

@media(max-width:640px){
  .pagina-inicio .buscador{gap:12px;margin-bottom:30px;padding:16px;border-radius:0 0 16px 16px}
}

/* ===== Colores que la regla de enlaces se estaba comiendo ===== */
/* `.pagina-ficha a{color:inherit}` pesa más que `.boton-claro{color:…}`, así que el
   botón salía con el texto del mismo color que su fondo: invisible. */
.pagina-ficha a.boton-claro{color:var(--green)}
.pagina-ficha a.boton-claro:hover{color:#fff}
.pagina-ficha a.boton-wa{color:var(--papel)}
.pagina-ficha a.boton-wa:hover{color:#c99a6b}
.pagina-ficha a.boton-pildora{color:var(--papel)}
.pagina-ficha a.boton-pildora:hover{color:#fff}
.pagina-ficha a.tarjeta-clara{color:var(--tinta)}
.pagina-ficha a.tarjeta-categoria{color:var(--tinta)}
.pagina-ficha a.tarjeta-categoria:hover{color:var(--papel)}

/* El logo es verde oscuro y naranja: sobre el pie, que también es verde oscuro, no se
   lee. En el pie va en blanco, que es como lo resuelve cualquier marca con logo oscuro. */
.pie-logo{height:46px;filter:brightness(0) invert(1);opacity:.92}

/* ===== El buscador, a la medida de lo que contiene ===== */
/* Los campos estaban con "flex:1 1 200px": el 1 del medio los hace CRECER hasta llenar
   el ancho, así que con dos campos en un contenedor de 1220 píxeles un desplegable de
   cuatro opciones terminaba midiendo 400, y el botón Buscar 340. Ahora no crecen: se
   quedan en su ancho y sobra aire a la derecha, que es como se ve un buscador serio. */
.pagina-inicio .buscador{padding:18px}
.pagina-inicio .buscador-campos{gap:12px}
.pagina-inicio .buscador-campos label{flex:0 1 250px;gap:6px}
.pagina-inicio .buscador-campos select{padding:12px 15px;font-size:14.5px}
.pagina-inicio .buscador-campos .boton-principal{flex:0 0 auto;padding:13px 38px;font-size:15px}
.pagina-inicio .buscador-op{padding:9px 17px;font-size:13.5px}

@media(max-width:640px){
  .pagina-inicio .buscador{padding:14px}
  .pagina-inicio .buscador-campos label{flex:1 1 100%}
  .pagina-inicio .buscador-campos .boton-principal{flex:1 1 100%;padding:14px}
}

/* ===== Vidriado del buscador ===== */
/* Estaba al 96% de opacidad: técnicamente translúcido, en la práctica un panel sólido.
   Bajándolo al 78% y subiendo el desenfoque, la foto se adivina detrás y el buscador
   se apoya sobre el paisaje en vez de taparlo. El texto se sigue leyendo porque el
   papel es muy claro y el desenfoque aplana lo que haya atrás. */
.pagina-inicio .buscador{
  background:color-mix(in srgb,var(--papel) 78%,transparent);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid #ffffff5c;
  border-top:0;
  box-shadow:0 24px 60px #0c1d1640,inset 0 1px 0 #ffffff8a;
}
/* Los campos van casi blancos: sobre el vidrio se despegan y siguen leyéndose. */
.pagina-inicio .buscador-campos select{background-color:#ffffffed;border-color:#12281f24}
.pagina-inicio .buscador-campos label{color:#4a5a51}
.pagina-inicio .buscador-op{border-color:#12281f2e;background:#ffffffb3}
.pagina-inicio .buscador-op:hover{background:var(--green);border-color:var(--green)}

/* Si el navegador no sabe desenfocar, el panel vuelve a ser opaco: sin el desenfoque,
   un fondo al 78% dejaría la foto cruda detrás del texto. */
@supports not (backdrop-filter:blur(2px)){
  .pagina-inicio .buscador{background:color-mix(in srgb,var(--papel) 97%,transparent)}
}

/* ===== El buscador en un solo renglón ===== */
/* Antes eran dos filas dentro de un panel de ancho completo: los controles ocupaban la
   mitad izquierda y sobraba medio panel vacío. Ahora los botones de operación y los
   campos comparten renglón, con una línea fina que los separa, y el panel mide lo que
   necesita en lugar de un bloque de doscientos píxeles de alto casi vacío.
   Las etiquetas de arriba se fueron: el propio desplegable ya dice qué es, y siguen
   ahí para el lector de pantalla. */
.pagina-inicio .buscador{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 18px}
.pagina-inicio .buscador-operaciones{position:relative;gap:7px;padding-right:16px}
.pagina-inicio .buscador-operaciones::after{position:absolute;top:6px;right:0;bottom:6px;width:1px;background:#12281f26;content:""}
.pagina-inicio .buscador-campos{flex:1 1 auto;flex-wrap:wrap;gap:10px}
.pagina-inicio .buscador-campos label{flex:0 1 220px;gap:0}
.pagina-inicio .buscador-campos select{padding:11px 14px}
.pagina-inicio .buscador-campos .boton-principal{margin-left:auto;padding:12px 34px}

@media(max-width:900px){
  .pagina-inicio .buscador-operaciones{padding-right:0}
  .pagina-inicio .buscador-operaciones::after{display:none}
  .pagina-inicio .buscador-campos .boton-principal{margin-left:0}
}

@media(max-width:640px){
  .pagina-inicio .buscador{gap:11px;padding:13px}
  .pagina-inicio .buscador-campos label{flex:1 1 100%}
}

/* ===== Más vidrio, y en el celular que no tape el paisaje ===== */
/* Al 78% seguía leyéndose como panel sólido. Al 62% la foto se adivina de verdad y el
   buscador se integra al fondo; el desenfoque fuerte aplana lo que haya detrás, así que
   el texto oscuro se sigue leyendo sobre cualquier parte de la imagen. */
.pagina-inicio .buscador{
  background:color-mix(in srgb,var(--papel) 62%,transparent);
  backdrop-filter:blur(26px) saturate(1.25);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
  border-color:#ffffff73;
}
.pagina-inicio .buscador-campos select{background-color:#fffffff0}
.pagina-inicio .buscador-op{background:#ffffffcc}

@media(max-width:640px){
  /* Cinco controles apilados tapaban el hero entero. Los de operación pasan a un
     renglón que se corre con el dedo y los desplegables van de a dos. */
  .pagina-inicio .buscador{gap:9px;padding:11px}
  .pagina-inicio .buscador-operaciones{flex-wrap:nowrap;width:100%;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
  .pagina-inicio .buscador-operaciones::-webkit-scrollbar{display:none}
  .pagina-inicio .buscador-op{flex:0 0 auto;padding:8px 15px;font-size:13px}
  .pagina-inicio .buscador-campos{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .pagina-inicio .buscador-campos label{flex:none}
  .pagina-inicio .buscador-campos select{padding:10px 12px;font-size:13.5px}
  .pagina-inicio .buscador-campos .boton-principal{grid-column:1/-1;margin-left:0;padding:12px}
}

/* El chip de la colección premium lleva el color de acento: es el único que no es una
   operación, así que conviene que se note que es otra cosa. */
.pagina-inicio .buscador-op.premium{border-color:#b5763a4d;background:#b5763a1f;color:var(--gold2,var(--gold))}
.pagina-inicio .buscador-op.premium:hover{border-color:var(--gold);background:var(--gold);color:#fff}

/* ===== Mini editor de encuadre ===== */
/* La vista previa tiene la misma proporción que el bloque de la portada, así lo que
   el cliente ve acá es exactamente lo que se publica. */
.encuadre-form{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start;margin-top:16px}
.encuadre-marco{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid #dfe5e2;border-radius:14px;background:var(--cream);cursor:grab;touch-action:none}
.encuadre-marco:active{cursor:grabbing}
.encuadre-marco img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.encuadre-punto{position:absolute;width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:#12281f66;box-shadow:0 2px 10px #0c1d1666;transform:translate(-50%,-50%);pointer-events:none}
.encuadre-leyenda{margin:8px 0 0;color:var(--muted);font-size:12px;text-align:center}
.encuadre-controles{display:grid;gap:12px;align-content:start}
.encuadre-controles label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:700}
.encuadre-controles input[type=file]{padding:9px;border:1px solid #d8ddd8;border-radius:10px;background:#fff;font:inherit;font-size:13px}

@media(max-width:640px){
  .encuadre-form{grid-template-columns:1fr}
  .encuadre-marco{aspect-ratio:3/4}
}

/* Premium usa el mismo globo que los demás: el color aparte lo sacaba de la fila.
   Lo distingue una estrella dorada, que alcanza para decir que es otra cosa. */
.pagina-inicio .buscador-op.premium{border-color:#12281f2e;background:#ffffffcc;color:var(--tinta)}
.pagina-inicio .buscador-op.premium span{margin-right:2px;color:var(--gold);font-size:12px}
.pagina-inicio .buscador-op.premium:hover{border-color:var(--green);background:var(--green);color:var(--papel)}
.pagina-inicio .buscador-op.premium:hover span{color:#c99a6b}

/* ===== Barra y buscador, a escala ===== */
/* Sin el botón de consultar arriba, el menú va al lado del logo en la misma línea,
   también en el celular. El de WhatsApp de abajo es el que la gente usa. */
.pagina-inicio .barra-nav{margin-left:auto}

/* Los controles estaban en 46 a 50 píxeles de alto: para una barra de filtros es
   demasiado volumen, y en el celular se comía la foto. Bajan a 36. */
.pagina-inicio .buscador{gap:12px;padding:11px 14px}
.pagina-inicio .buscador-op{padding:7px 14px;font-size:13px}
.pagina-inicio .buscador-operaciones{gap:6px;padding-right:12px}
.pagina-inicio .buscador-campos{gap:8px}
.pagina-inicio .buscador-campos label{flex:0 1 190px}
.pagina-inicio .buscador-campos select{padding:8px 12px;border-radius:9px;font-size:13.5px;background-position:right 11px center}
.pagina-inicio .buscador-campos .boton-principal{padding:9px 26px;border-radius:9px;font-size:13.5px}

@media(max-width:640px){
  .pagina-ficha.pagina-inicio .barra-inner{gap:10px}
  .pagina-inicio .barra-nav{gap:14px;font-size:14px}
  .pagina-inicio .buscador{gap:8px;padding:10px}
  .pagina-inicio .buscador-op{padding:7px 13px;font-size:12.5px}
  .pagina-inicio .buscador-campos{gap:7px}
  .pagina-inicio .buscador-campos select{padding:8px 11px;font-size:13px}
  .pagina-inicio .buscador-campos .boton-principal{padding:10px;font-size:13.5px}
}

/* ===== Filtros del listado, separados por lo que preguntan ===== */
.listado-filtros{display:grid;gap:14px;margin:22px 0 26px}
.grupo-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rotulo-filtro{flex:0 0 118px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.filtro-chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px}

@media(max-width:640px){
  .listado-filtros{gap:12px}
  .grupo-filtro{gap:7px}
  .rotulo-filtro{flex:1 1 100%}
  /* Con varias categorías, los globos van en un renglón que se corre con el dedo. */
  .filtro-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
  .filtro-chips::-webkit-scrollbar{display:none}
  .filtro-chips .seccion-chip{flex:0 0 auto}
}

/* ===== Panel: filtros separados y botones a escala ===== */
/* Las listas armadas tenían siete globos en fila mezclando operaciones y tipos, igual
   que en la web. Separadas, cada fila contesta una cosa sola. */
.compartir-botones{display:grid;gap:10px}
.compartir-listas .grupo-filtro{gap:10px}
.compartir-listas .rotulo-filtro{flex:0 0 62px}
.filtro-categorias .rotulo-filtro{flex:0 0 auto;margin-right:4px;align-self:center}

/* El botón de nueva propiedad medía 270 por 60: es el botón más usado del panel, pero
   no por eso tiene que ocupar como un cartel. */
.admin-nueva{margin:0 0 16px}
.boton-nueva{display:inline-flex;align-items:center;padding:10px 20px;border-radius:10px;background:var(--green);color:var(--cream);font-size:14px;font-weight:600}
.boton-nueva:hover{background:var(--gold);color:#fff}

@media(max-width:640px){
  .compartir-listas .rotulo-filtro{flex:1 1 100%}
  .boton-nueva{width:100%;justify-content:center;padding:12px}
}

/* En la portada el menú tiene dos entradas y ya no lo acompaña ningún botón, así que
   va al lado del logo en la misma línea. La regla general lo bajaba a un renglón
   propio, que era lo correcto cuando además había teléfono y botón de consultar. */
@media(max-width:900px){
  .pagina-inicio .barra-nav{order:0;width:auto;margin-left:auto}
}

/* ===== Todos los globos de filtro, a una sola escala ===== */
/* Estaban en 42 píxeles de alto con la letra en negrita, mientras los del buscador ya
   habían bajado a 34: dos tamaños distintos para lo mismo, en páginas contiguas. */
.seccion-chip,.filtro-chip{min-height:34px;padding:0 14px;font-size:13px;font-weight:600}
.seccion-chip.actual,.filtro-chip.activo{font-weight:700}
.rotulo-filtro{flex:0 0 74px;font-size:10.5px;letter-spacing:.12em}
.listado-filtros{gap:10px;margin:18px 0 24px}
.grupo-filtro{gap:10px}
.filtro-chips{gap:7px}

@media(max-width:640px){
  .seccion-chip,.filtro-chip{min-height:32px;padding:0 13px;font-size:12.5px}
  .rotulo-filtro{flex:1 1 100%}
}

/* ===== Desplegables con la cara del sitio ===== */
/* El original queda escondido pero presente: si el JavaScript no corre, el formulario
   sigue andando con el desplegable de siempre. */
.eleccion{position:relative;display:block}
.eleccion-original{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.eleccion-boton{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid #12281f29;border-radius:9px;background:#fffffff0;color:var(--tinta);font:inherit;font-size:13.5px;letter-spacing:0;text-align:left;text-transform:none;cursor:pointer}
.eleccion-boton::after{flex:0 0 auto;color:var(--muted);font-size:10px;content:"▾"}
.eleccion-boton:hover{border-color:var(--green)}
.eleccion-boton[aria-expanded=true]{border-color:var(--green);outline:2px solid #12281f26;outline-offset:1px}

.eleccion-lista{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:70;max-height:280px;margin:0;padding:6px;overflow-y:auto;border:1px solid var(--linea);border-radius:12px;background:#fff;box-shadow:0 18px 40px #0c1d1633;list-style:none}
.eleccion-lista li{margin:0}
.eleccion-lista button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--tinta);font:inherit;font-size:14px;letter-spacing:0;text-align:left;text-transform:none;cursor:pointer}
.eleccion-lista button:hover{background:var(--cream)}
.eleccion-lista button.elegida{background:var(--green);color:var(--papel);font-weight:600}
.eleccion-lista button.elegida::after{content:"✓"}

@media(max-width:640px){
  .eleccion-lista{max-height:50vh}
  .eleccion-lista button{padding:12px}
}

/* El nombre elegido va en un solo renglón: partido en dos desarma la fila de campos.
   Si no entra se corta con puntos, y al abrir la lista se lee completo. */
.eleccion-boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eleccion-lista{max-height:min(60vh,340px)}
.eleccion-lista button{line-height:1.35}

/* ============================================================
   REDISEÑO — Listado de propiedades
   ============================================================
   Era la única de las tres páginas públicas que quedaba con el diseño anterior. Toma
   la estructura que ya tenía y le pone el lenguaje de la portada y la ficha. */

.pagina-listado{background:var(--papel)}
.pagina-listado .listado{padding-bottom:clamp(46px,6vw,80px)}

/* ---------- Encabezado de la sección ---------- */
.pagina-listado .volver-atras{margin-top:22px;border-color:#12281f24;background:#fff;color:var(--tinta);font-size:13px}
.pagina-listado .volver-atras:hover{border-color:var(--gold);color:var(--gold)}
.pagina-listado .listado-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin:14px 0 0}
.pagina-listado .listado h1{margin:0 0 8px;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(32px,3.6vw,52px);font-weight:400;letter-spacing:-.01em;line-height:1.06;text-wrap:balance}
.pagina-listado .listado-bajada{margin:0;max-width:620px;color:var(--muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.pagina-listado .listado-cuenta{padding:8px 16px;border:1px solid var(--linea);border-radius:999px;background:#fff;font-size:13px;font-weight:600;white-space:nowrap}

/* ---------- Tarjetas ---------- */
.pagina-listado .property-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;margin-top:4px}
.pagina-listado .property-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--linea);border-radius:16px;background:#fff;box-shadow:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.pagina-listado .property-card:hover{border-color:#12281f29;box-shadow:0 24px 50px #0c1d1618;transform:translateY(-4px)}

.pagina-listado .gallery{height:auto;aspect-ratio:16/11;border-radius:0}
.pagina-listado .sale-badge{top:14px;left:14px;padding:5px 11px;border-radius:6px;background:var(--papel);color:var(--tinta);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pagina-listado .badge-nuevo{top:14px;right:14px;padding:5px 11px;border-radius:6px;font-size:11px}
.pagina-listado .gallery-button{width:38px;height:38px;background:#0c1d169e;color:var(--papel)}
.pagina-listado .gallery-button:hover{background:var(--green)}
.pagina-listado .gallery-slide figcaption{bottom:14px;left:14px;padding:5px 10px;border-radius:6px;background:#0c1d16b8;color:var(--papel);font-size:12px}

.pagina-listado .property-body{display:flex;flex:1;flex-direction:column;padding:22px}
.pagina-listado .property-body .price{margin:0 0 8px;font-family:"Instrument Serif",Georgia,serif;font-size:28px;font-weight:400;line-height:1;color:var(--tinta)}
.pagina-listado .property-body h3{min-height:0;margin:0 0 6px;font-family:"Public Sans",sans-serif;font-size:18px;font-weight:600;line-height:1.3}
.pagina-listado .property-body .location{margin:0 0 16px;color:var(--muted);font-size:14px}

/* La ficha técnica, con el mismo pulso que en la ficha de la propiedad. */
.pagina-listado .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px 12px;margin:0 0 16px;padding:15px 0;border-top:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave);font-size:13.5px}
.pagina-listado .facts span{display:flex;align-items:center;gap:6px;color:var(--cuerpo,#3d4a43);font-weight:600}

.pagina-listado .comodidades-gancho{margin:0 0 16px}
.pagina-listado .gancho{padding:4px 10px;border-color:var(--linea);background:var(--papel);font-size:11.5px}

.pagina-listado .card-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding:0;border:0}
.pagina-listado .card-actions > a:first-child{flex:1;padding:12px;border-radius:10px;background:var(--green);color:var(--papel);font-size:14px;font-weight:600;letter-spacing:0;text-align:center;text-transform:none;text-decoration:none}
.pagina-listado .card-actions > a:first-child:hover{background:var(--gold);color:#fff}
.pagina-listado .round-link.whatsapp{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--linea);border-radius:10px;background:none;color:var(--green)}
.pagina-listado .round-link.whatsapp:hover{border-color:var(--gold);background:var(--gold);color:#fff}

.pagina-listado .empty{padding:60px 24px;border:1px dashed #12281f29;border-radius:18px;background:#fff;text-align:center}
.pagina-listado .empty p{margin:0 0 18px;color:var(--muted);font-size:16px}

@media(max-width:640px){
  .pagina-listado .listado h1{font-size:30px}
  .pagina-listado .listado-bajada{font-size:15.5px}
  .pagina-listado .property-grid{gap:16px}
  .pagina-listado .property-body{padding:18px}
  .pagina-listado .property-body .price{font-size:25px}
  .pagina-listado .facts{padding:13px 0;font-size:13px}
}

/* ===== El hueco debajo de la foto ===== */
/* La columna de datos es más alta que la de la foto, así que abajo quedaba un vacío
   que no cumplía ninguna función. Ahora la foto acompaña el alto de la columna de al
   lado: se ve más grande y el hueco desaparece. Con tope, para que una propiedad con
   muchos datos no la estire de más. */
@media(min-width:901px){
  .ficha-cabeza{align-items:stretch}
  .ficha-fotos{display:flex;flex-direction:column;gap:12px}
  .ficha-fotos .visor{flex:1 1 auto;aspect-ratio:auto;min-height:400px;max-height:620px}
}

/* ===== Menos seco: bordes, aire y transparencia ===== */
/* La barra tenía un filo duro contra el contenido. Un poco más de vidrio y una sombra
   que se desvanece hacia abajo la separan sin cortar. */
.barra{
  background:color-mix(in srgb,var(--papel) 86%,transparent);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  border-bottom:1px solid #12281f14;
  box-shadow:0 10px 30px -14px #0c1d1633;
}
@supports not (backdrop-filter:blur(2px)){
  .barra{background:color-mix(in srgb,var(--papel) 97%,transparent)}
}
.barra-nav a{position:relative;padding:4px 0}
/* La línea del menú crece desde el centro en lugar de aparecer de golpe. */
.barra-nav a::after{position:absolute;right:50%;bottom:0;left:50%;height:1px;background:var(--gold);content:"";transition:left .2s,right .2s}
.barra-nav a:hover::after,.barra-nav a.actual::after{right:0;left:0}

/* Los globos y los campos responden al pasar por encima en vez de saltar de golpe. */
.buscador-op,.seccion-chip,.filtro-chip,.eleccion-boton,.chip-lista{transition:background .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s}
.buscador-op:hover,.seccion-chip:hover,.filtro-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0c1d1614}
.pagina-inicio .buscador-op:hover{background:var(--green);border-color:var(--green);color:var(--papel)}
.seccion-chip:hover,.filtro-chip:hover{border-color:var(--green)}
.eleccion-boton:hover{box-shadow:0 6px 16px #0c1d1614}

/* El elegido se apoya en la sombra en lugar de solo cambiar de color. */
.seccion-chip.actual,.filtro-chip.activo{box-shadow:0 6px 18px #12281f2e}

/* ===== El encabezado del listado, agrupado ===== */
/* Lo que se veía vacío tenía tres causas: la cuenta flotaba sola contra el borde
   derecho a un metro de lo que contaba, los filtros no estaban contenidos en nada, y
   Volver y la miga ocupaban dos renglones para decir lo mismo. */
.listado-navegar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:22px}
.pagina-listado .volver-atras{margin-top:0}
.pagina-listado .miga{padding-top:0}
.pagina-listado .volver-atras+.miga{padding-top:0}

.listado-encabezado{display:grid;gap:0;max-width:720px;margin:26px 0 22px}
.listado-encabezado .rotulo{margin-bottom:12px}
.pagina-listado .listado-encabezado h1{margin:0 0 10px}
.listado-cuenta{justify-self:start;margin-top:16px;padding:7px 15px;border:1px solid var(--linea);border-radius:999px;background:#fff;color:var(--muted);font-size:13px}
.listado-cuenta strong{color:var(--tinta);font-weight:700}

/* Los filtros van dentro de un panel, igual que el buscador de la portada: contenidos
   se leen como un control, sueltos parecen restos flotando sobre el fondo. */
.panel-filtros{margin:0 0 26px;padding:16px 18px;border:1px solid var(--linea);border-radius:16px;background:#fff}
.panel-filtros .grupo-filtro+.grupo-filtro{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea-suave)}

@media(max-width:640px){
  .listado-navegar{gap:10px;padding-top:16px}
  .listado-encabezado{margin:18px 0 16px}
  .panel-filtros{padding:13px}
  .panel-filtros .grupo-filtro+.grupo-filtro{margin-top:10px;padding-top:10px}
}

/* ===== El logo, más grande en el celular ===== */
/* Quedaba en 34 píxeles de alto al lado de un menú de dos entradas: sobraba ancho y la
   marca era lo más chico de la barra. Sube a 46 sin deformarse, que es lo que entra
   dejando el menú en la misma línea. */
@media(max-width:640px){
  .pagina-ficha .brand-logo{height:46px}
  .pagina-ficha .barra-inner{gap:12px;padding:10px 16px}
  .pagina-inicio .barra-nav{gap:16px;font-size:14.5px}
}

@media(max-width:380px){
  /* En pantallas muy angostas el menú baja antes que achicar la marca. */
  .pagina-ficha .brand-logo{height:42px}
  .pagina-inicio .barra-nav{gap:13px;font-size:13.5px}
}

/* ===== El listado deja de dejar media pantalla vacía ===== */
/* El contenido se apoyaba todo a la izquierda mientras el contenedor ocupaba el ancho
   entero. Ahora la cuenta va a la derecha, a la altura de la bajada, y el orden ocupa
   el costado del panel de filtros: espacio lleno con algo que sirve, no con relleno. */
.listado-encabezado{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 28px;max-width:none}
.listado-encabezado .rotulo,.pagina-listado .listado-encabezado h1{grid-column:1}
.listado-bajada{grid-column:1;max-width:640px}
.listado-cuenta{grid-column:2;grid-row:3;justify-self:end;margin-top:0}

.panel-filtros{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 28px;align-items:center}
.panel-filtros .grupo-filtro{grid-column:1}
.grupo-orden{grid-column:2;grid-row:1/span 2;display:grid;gap:6px;align-self:center;min-width:190px;padding-left:24px;border-left:1px solid var(--linea-suave)}
.grupo-orden label{display:grid;gap:6px}
.grupo-orden .rotulo-filtro{flex:none}
.grupo-orden .eleccion-boton{padding:9px 12px}

@media(max-width:900px){
  .listado-encabezado{grid-template-columns:1fr}
  .listado-cuenta{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}
  .panel-filtros{grid-template-columns:1fr}
  .grupo-orden{grid-column:1;grid-row:auto;min-width:0;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--linea-suave);border-left:0}
}

.orden-aviso{display:block;margin-top:7px;color:var(--muted);font-size:11.5px;line-height:1.45}

/* ============================================================
   Cabecera de la portada: una sola pieza
   ============================================================
   Antes eran dos pisos apilados —la barra y, debajo, el buscador— y eso es lo que se
   leía como una escalera de franjas. Ahora la marca, el aviso, el menú y el buscador
   viven en el mismo bloque: el logo ocupa el alto entero a la izquierda y a la derecha
   van el aviso con el menú arriba y los filtros abajo. */
.cabecera-unica{border-bottom:1px solid #12281f1a}
.cabecera-inner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 26px;width:min(1320px,100%);margin-inline:auto;padding:12px 22px}
.cabecera-derecha{display:grid;gap:10px;min-width:0}
.cabecera-arriba{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0}

/* El aviso lo escribe la inmobiliaria desde el panel. Si no entra, se desplaza solo;
   se frena al apoyarle el dedo o el mouse, y no se mueve para quien pidió menos
   movimiento en su sistema. */
.aviso-barra{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;color:var(--muted);font-size:13px;white-space:nowrap}
.aviso-barra span{display:inline-block;padding-right:40px}
.aviso-barra.corre span{animation:correr-aviso 26s linear infinite}
.aviso-barra.corre:hover span,.aviso-barra.corre:focus-within span{animation-play-state:paused}
@keyframes correr-aviso{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .aviso-barra.corre span{animation:none}
  .aviso-barra{text-overflow:ellipsis}
}

.cabecera-unica .brand-logo{height:62px}
.cabecera-unica .barra-nav{flex:0 0 auto;margin-left:0;gap:20px;font-size:14.5px}

/* El buscador deja de ser una tarjeta aparte: es la fila de abajo de la cabecera. */
.pagina-inicio .cabecera-unica .buscador{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pagina-inicio .cabecera-unica .buscador-campos .boton-principal{padding:9px 28px}

/* Sin la tarjeta del buscador colgando, la portada arranca pegada a la cabecera. */
.pagina-inicio .portada{padding-top:0;min-height:600px}
.pagina-inicio .portada-contenido{justify-content:flex-end;padding-top:clamp(40px,7vw,90px)}
.pagina-inicio .portada-texto{margin-top:0}

@media(max-width:900px){
  .cabecera-inner{grid-template-columns:1fr;gap:10px;padding:10px 18px}
  .cabecera-unica .brand-logo{height:44px}
  .cabecera-arriba{gap:12px}
}

@media(max-width:640px){
  .cabecera-inner{padding:9px 16px}
  .cabecera-unica .brand-logo{height:42px}
  .aviso-barra{font-size:12px}
  .cabecera-unica .barra-nav{gap:14px;font-size:14px}
  .pagina-inicio .portada{min-height:auto}
}

/* ===== El listado, sin el bloque de título suelto ===== */
/* Decía tres veces lo mismo: la miga ya trae "Alquiler", el globo de filtro está
   marcado, y encima el título lo repetía en cuerpo 52. Se conserva el h1 y la bajada
   —son lo que lee Google— pero adentro del panel y en tamaño de dato, no de cartel. */
.panel-titulo{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linea-suave)}
.pagina-listado .panel-titulo h1{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:24px;font-weight:400;line-height:1.15}
.panel-titulo p{margin:0;flex:1 1 auto;color:var(--muted);font-size:14px}
.panel-titulo .listado-cuenta{margin:0;padding:5px 12px;font-size:12.5px;white-space:nowrap}

@media(max-width:640px){
  .pagina-listado .panel-titulo h1{font-size:21px}
  .panel-titulo p{flex:1 1 100%;font-size:13px}
}

/* ============================================================
   Cabecera en capas
   ============================================================
   El buscador no vive dentro de una franja: arranca al lado de la marca y baja sobre
   la foto, apoyado encima. Eso saca el escalón de dos pisos y de paso el hero empieza
   más arriba. */
.pagina-inicio .cabecera{position:relative;z-index:40;background:var(--papel)}

/* El aviso corre a lo ancho por arriba de todo. */
.pagina-inicio .aviso-barra{width:min(1320px,100%);margin:0 auto;padding:9px 22px 4px;color:var(--muted);font-size:13px;text-align:center}

.cabecera-fila{display:flex;align-items:center;gap:26px;width:min(1320px,100%);margin:0 auto;padding:10px 22px 0}
.pagina-inicio .cabecera .brand{flex:0 0 auto}
.pagina-inicio .cabecera .brand-logo{height:58px}

/* El buscador sobresale: el margen negativo lo baja sobre la foto y la sombra lo
   despega del fondo. */
.pagina-inicio .cabecera .buscador{
  flex:1 1 auto;
  min-width:0;
  margin:0 0 -28px;
  padding:12px 16px;
  border:1px solid #ffffff5c;
  border-radius:18px;
  background:color-mix(in srgb,var(--papel) 72%,transparent);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 22px 50px #0c1d1638,inset 0 1px 0 #ffffff96;
}
@supports not (backdrop-filter:blur(2px)){
  .pagina-inicio .cabecera .buscador{background:color-mix(in srgb,var(--papel) 96%,transparent)}
}

/* La foto arranca detrás del buscador, así queda apoyado sobre ella. */
.pagina-inicio .portada{padding-top:0;min-height:620px}
.pagina-inicio .portada-contenido{justify-content:flex-end;padding-top:clamp(56px,8vw,104px)}

@media(max-width:900px){
  .cabecera-fila{flex-wrap:wrap;gap:12px;padding:8px 18px 0}
  .pagina-inicio .cabecera .brand-logo{height:46px}
  .pagina-inicio .cabecera .buscador{flex:1 1 100%;margin-bottom:-22px;border-radius:16px}
}

@media(max-width:640px){
  .pagina-inicio .aviso-barra{padding:8px 16px 2px;font-size:12px}
  .cabecera-fila{padding:8px 16px 0}
  .pagina-inicio .cabecera .brand-logo{height:44px}
  .pagina-inicio .cabecera .buscador{margin-bottom:-18px;padding:11px 12px}
  .pagina-inicio .portada{min-height:auto}
  .pagina-inicio .portada-contenido{padding-top:56px}
}

/* ===== Más vidrio y menos "pegado encima" ===== */
/* El buscador se leía como una tarjeta apoyada sobre la foto. Con más transparencia,
   el borde apenas insinuado y una sombra ancha y suave en vez de marcada, se integra
   con lo que tiene detrás sin dejar de distinguirse. */
.pagina-inicio .cabecera{background:color-mix(in srgb,var(--papel) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pagina-inicio .cabecera .buscador{
  background:color-mix(in srgb,var(--papel) 54%,transparent);
  backdrop-filter:blur(30px) saturate(1.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);
  border-color:#ffffff42;
  box-shadow:0 30px 70px -30px #0c1d1666,inset 0 1px 0 #ffffff73;
}
.pagina-inicio .cabecera .buscador-op{background:#ffffffa8;border-color:#12281f1f}
.pagina-inicio .cabecera .buscador-campos select,
.pagina-inicio .cabecera .eleccion-boton{background:#ffffffc7;border-color:#12281f1f}
@supports not (backdrop-filter:blur(2px)){
  .pagina-inicio .cabecera{background:var(--papel)}
  .pagina-inicio .cabecera .buscador{background:color-mix(in srgb,var(--papel) 94%,transparent)}
}

/* ===== Distinto en el celular ===== */
.solo-celular{display:none}
@media(max-width:760px){
  /* Siete controles apilados sobrecargan la barra. Los globos de operación se guardan
     y la operación pasa a ser un desplegable más: tres controles del mismo tipo. */
  .solo-pantalla{display:none}
  .solo-celular{display:grid}
  .pagina-inicio .cabecera .buscador{gap:8px}
  .pagina-inicio .buscador-campos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .pagina-inicio .buscador-campos label{flex:none}
  .pagina-inicio .buscador-campos label.solo-celular{grid-column:1/-1}
  .pagina-inicio .buscador-campos .boton-principal{grid-column:1/-1;margin-left:0}
}

/* `.buscador-campos label{display:grid}` pesa más que `.solo-celular{display:none}`,
   así que el desplegable de operación se colaba también en pantalla grande, al lado de
   los globos que hacen lo mismo. Con el label en el selector, gana el que corresponde. */
.buscador-campos label.solo-celular{display:none}
@media(max-width:760px){
  .buscador-campos label.solo-celular{display:grid}
}

/* ============================================================
   Cabecera: una sola pieza
   ============================================================
   El buscador tenía fondo, borde y sombra propios, así que se leía como una tarjeta
   apoyada sobre la franja. Ahora el fondo es uno solo para todo el bloque y el
   buscador no dibuja nada: lo único que baja sobre la foto es la pieza entera, con
   las esquinas redondeadas abajo. */
.pagina-inicio .cabecera{
  position:relative;
  z-index:40;
  width:min(1320px,100%);
  margin:0 auto;
  border-radius:0 0 22px 22px;
  background:color-mix(in srgb,var(--papel) 82%,transparent);
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 26px 60px -34px #0c1d1666;
}
@supports not (backdrop-filter:blur(2px)){
  .pagina-inicio .cabecera{background:color-mix(in srgb,var(--papel) 96%,transparent)}
}

.cabecera-fila{display:flex;align-items:center;gap:26px;width:auto;margin:0;padding:12px 22px}
.cabecera-derecha{display:grid;gap:8px;flex:1 1 auto;min-width:0}

/* El aviso corre por arriba del buscador, a la derecha de la marca. */
.pagina-inicio .aviso-barra{width:auto;margin:0;padding:0 4px;overflow:hidden;color:var(--muted);font-size:13px;text-align:left;white-space:nowrap}
.pagina-inicio .aviso-barra span{display:inline-block;padding-right:44px}
.pagina-inicio .aviso-barra.corre span{animation:correr-aviso 26s linear infinite}
.pagina-inicio .aviso-barra.corre:hover span{animation-play-state:paused}

/* El buscador deja de dibujar su propia caja. */
.pagina-inicio .cabecera .buscador{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* La foto arranca detrás de la pieza, que baja sobre ella. */
.pagina-inicio .portada{margin-top:-22px;padding-top:0;min-height:620px}
.pagina-inicio .portada-contenido{justify-content:flex-end;padding-top:clamp(60px,9vw,120px)}

@media(max-width:900px){
  .pagina-inicio .cabecera{border-radius:0 0 18px 18px}
  .cabecera-fila{flex-wrap:wrap;gap:12px;padding:10px 18px}
  .cabecera-derecha{flex:1 1 100%}
}

@media(max-width:640px){
  .cabecera-fila{padding:9px 16px}
  .pagina-inicio .aviso-barra{font-size:12px}
  .pagina-inicio .portada{margin-top:-18px;min-height:auto}
  .pagina-inicio .portada-contenido{padding-top:48px}
}

/* ============================================================
   El encabezado vuelve a ser la marca, y el buscador vive sobre la foto
   ============================================================ */
.pagina-inicio .cabecera{
  position:relative;z-index:40;width:100%;margin:0;border-radius:0;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid #12281f12;box-shadow:none;
}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:26px;width:min(1320px,100%);margin:0 auto;padding:12px 22px}
.pagina-inicio .cabecera .brand-logo{height:54px}
.pagina-inicio .aviso-barra{flex:1 1 auto;min-width:0;margin:0;padding:0;overflow:hidden;color:var(--muted);font-size:13px;text-align:right;white-space:nowrap}

/* El buscador, abajo del texto y sobre la foto: con aire propio deja de parecer una
   barra de herramientas y pasa a ser lo que es, la puerta de entrada al catálogo. */
.pagina-inicio .portada{margin-top:0;padding-top:0;min-height:660px}
.pagina-inicio .portada-contenido{justify-content:center;padding-block:clamp(46px,7vw,90px)}
.pagina-inicio .portada-texto{max-width:760px}
.pagina-inicio .numeros{margin-bottom:34px}

.buscador-en-foto{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  max-width:940px;margin:0;padding:14px 16px;
  border:1px solid #ffffff3d;border-radius:16px;
  background:#f6f4ee1f;
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 24px 60px -26px #0c1d1699;
}
@supports not (backdrop-filter:blur(2px)){
  .buscador-en-foto{background:#f6f4eef0}
}
/* Sobre la foto los controles van claros y sólidos: es lo que los hace legibles sin
   depender de qué parte de la imagen les toque detrás. */
.buscador-en-foto .buscador-op{background:#fffffff2;border-color:#ffffff59;color:var(--tinta)}
.buscador-en-foto .buscador-op:hover{background:var(--green);border-color:var(--green);color:var(--papel)}
.buscador-en-foto .eleccion-boton{background:#fffffff2;border-color:#ffffff59}
.buscador-en-foto .buscador-operaciones::after{background:#ffffff4d}

@media(max-width:900px){
  .cabecera-fila{padding:10px 18px}
  .pagina-inicio .cabecera .brand-logo{height:46px}
  .pagina-inicio .aviso-barra{font-size:12.5px}
}

@media(max-width:760px){
  .buscador-en-foto{max-width:none;gap:9px;padding:12px}
}

@media(max-width:640px){
  .cabecera-fila{gap:12px;padding:9px 16px}
  .pagina-inicio .cabecera .brand-logo{height:44px}
  .pagina-inicio .aviso-barra{display:none}
  .pagina-inicio .portada{min-height:auto}
  .pagina-inicio .portada-contenido{padding-block:36px}
  .pagina-inicio .numeros{margin-bottom:26px}
}

/* Con 940 de ancho el botón Buscar caía solo a una segunda fila. Con este ancho entra
   todo en un renglón, que es como se lee un buscador. */
.buscador-en-foto{max-width:1080px;gap:12px}
.buscador-en-foto .buscador-campos{flex:1 1 auto;gap:10px}
.buscador-en-foto .buscador-campos label{flex:0 1 180px}
.buscador-en-foto .buscador-campos .boton-principal{margin-left:auto;padding:10px 30px}

/* ============================================================
   Cabecera según el boceto: marca | avisos arriba, filtros abajo
   ============================================================ */
.pagina-inicio .cabecera{
  position:relative;z-index:40;width:100%;margin:0;border-radius:0;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid #12281f12;box-shadow:0 14px 34px -26px #0c1d1659;
}
.cabecera-fila{display:flex;align-items:stretch;gap:0;width:min(1320px,100%);margin:0 auto;padding:0 22px}
.pagina-inicio .cabecera .brand{display:flex;flex:0 0 auto;align-items:center;padding-right:26px}
.pagina-inicio .cabecera .brand-logo{height:56px}
.cabecera-derecha{display:grid;flex:1 1 auto;min-width:0;align-content:center;gap:0}

/* Los avisos se turnan en el mismo lugar: uno encima del otro, con un fundido corto. */
.avisos-rotativos{position:relative;min-height:26px;padding:6px 0 0}
.avisos-rotativos span{position:absolute;top:6px;left:0;right:0;color:var(--muted);font-size:13px;opacity:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .5s}
.avisos-rotativos span.visible{opacity:1}

/* Los filtros ocupan el renglón de abajo, alineados con los avisos. */
.pagina-inicio .cabecera .buscador{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0;padding:8px 0 12px;border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.pagina-inicio .cabecera .buscador-campos{flex:1 1 auto;gap:10px}
.pagina-inicio .cabecera .buscador-campos label{flex:0 1 180px}
.pagina-inicio .cabecera .buscador-campos .boton-principal{margin-left:auto;padding:10px 30px}
.pagina-inicio .cabecera .buscador-op{background:#ffffffc4;border-color:#12281f1f}
.pagina-inicio .cabecera .eleccion-boton{background:#ffffffdb;border-color:#12281f1f}

.pagina-inicio .portada{margin-top:0;padding-top:0;min-height:620px}
.pagina-inicio .portada-contenido{justify-content:center;padding-block:clamp(48px,7vw,96px)}

@media(max-width:900px){
  .cabecera-fila{flex-wrap:wrap;padding:0 18px}
  .pagina-inicio .cabecera .brand{flex:1 1 100%;padding:8px 0 0}
  .pagina-inicio .cabecera .brand-logo{height:46px}
  .cabecera-derecha{flex:1 1 100%}
  .avisos-rotativos{min-height:24px}
}

@media(max-width:640px){
  .cabecera-fila{padding:0 16px}
  .pagina-inicio .cabecera .brand-logo{height:44px}
  .avisos-rotativos span{font-size:12px}
  .pagina-inicio .cabecera .buscador{padding:6px 0 11px}
  .pagina-inicio .portada{min-height:auto}
  .pagina-inicio .portada-contenido{padding-block:40px}
}

/* ===== Una sola pieza, sin costuras internas ===== */
/* El bloque de la marca y la fila de filtros compartían el fondo pero se leían como dos
   cosas por la línea de separación y el cambio de tono. Ahora es un fondo continuo, sin
   bordes internos, y lo único que lo separa de la foto es el borde de abajo. */
.pagina-inicio .cabecera{background:var(--papel);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:0 10px 30px -22px #0c1d1640}
.cabecera-fila{align-items:stretch;padding:0 22px}
.pagina-inicio .cabecera .brand{align-items:center;padding:10px 26px 10px 0}
.cabecera-derecha{align-content:center;gap:0}

/* La franja de arriba: los avisos que se turnan a la izquierda y las redes a la derecha. */
.cabecera-avisos{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:26px;padding-top:8px}
.avisos-rotativos{flex:1 1 auto;min-height:19px;padding:0}
.avisos-rotativos span{top:0}
.cabecera-redes{display:flex;flex:0 0 auto;align-items:center;gap:4px}
.cabecera-redes a{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;color:var(--muted)}
.cabecera-redes a:hover{background:var(--green);color:var(--papel)}

/* Los filtros son el renglón de abajo del mismo bloque, sin caja propia. */
.pagina-inicio .cabecera .buscador{padding:8px 0 12px}

@media(max-width:640px){
  .cabecera-avisos{gap:10px;padding-top:6px}
  .cabecera-redes a{width:28px;height:28px}
}

/* ============================================================
   Cabecera en escalón
   ============================================================
   Arriba, la marca y los avisos a todo lo ancho. Abajo, el buscador: arranca corrido a
   la derecha —donde termina la marca— y llega hasta el borde de la pantalla. En el
   hueco que queda debajo de la marca se ve la foto, y el buscador la deja pasar por
   detrás con el vidriado. La unión entre los dos pisos va curvada, para que se lea
   como un solo recorte y no como dos rectángulos apilados. */
.pagina-inicio .escalon{position:relative;z-index:40;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

.escalon-arriba{
  display:flex;align-items:center;gap:26px;
  padding:10px max(22px,calc((100% - 1320px) / 2 + 22px));
  background:var(--papel);
  border-radius:0 0 26px 0;
}
.pagina-inicio .escalon .brand{flex:0 0 auto;padding:0}
.pagina-inicio .escalon .brand-logo{height:54px}
.cabecera-avisos{flex:1 1 auto;min-width:0;padding:0}

/* El piso de abajo arranca donde termina la marca y se va hasta el borde. */
.escalon-abajo{
  margin-left:clamp(180px,17vw,300px);
  padding:11px 22px 12px max(22px,calc((100% - 1320px) / 2 + 22px));
  border-radius:0 0 0 26px;
  background:#f6f4ee38;
  backdrop-filter:blur(26px) saturate(1.25);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 20px 46px -26px #0c1d1673,inset 0 1px 0 #ffffff5c;
}
@supports not (backdrop-filter:blur(2px)){
  .escalon-abajo{background:#f6f4eef2}
}

.pagina-inicio .escalon .buscador{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pagina-inicio .escalon .buscador-campos{flex:1 1 auto;gap:10px}
.pagina-inicio .escalon .buscador-campos label{flex:0 1 180px}
.pagina-inicio .escalon .buscador-campos .boton-principal{margin-left:auto;padding:10px 30px}
/* Sobre el vidrio los controles van claros, para que se lean con cualquier foto detrás. */
.pagina-inicio .escalon .buscador-op{background:#fffffff0;border-color:#ffffff5c;color:var(--tinta)}
.pagina-inicio .escalon .buscador-op:hover{background:var(--green);border-color:var(--green);color:var(--papel)}
.pagina-inicio .escalon .eleccion-boton{background:#fffffff0;border-color:#ffffff5c}
.pagina-inicio .escalon .buscador-operaciones::after{background:#ffffff59}

/* El hero ya no empieza debajo de la cabecera: la tiene adentro. */
.pagina-inicio .portada{margin-top:0;padding-top:0;min-height:660px;justify-content:flex-start}
.pagina-inicio .portada-contenido{justify-content:center;padding-block:clamp(56px,8vw,104px)}

@media(max-width:900px){
  .escalon-arriba{gap:14px;padding:8px 18px;border-radius:0 0 20px 0}
  .pagina-inicio .escalon .brand-logo{height:46px}
  .escalon-abajo{margin-left:0;padding:10px 18px 11px;border-radius:0 0 20px 20px}
}

@media(max-width:640px){
  .escalon-arriba{padding:8px 16px}
  .pagina-inicio .escalon .brand-logo{height:44px}
  .escalon-abajo{padding:9px 16px 10px;border-radius:0 0 16px 16px}
  .pagina-inicio .portada{min-height:auto}
  .pagina-inicio .portada-contenido{padding-block:40px}
}

/* El hero era flex con la cabecera adentro, así que la cabecera y el contenido se
   acomodaron como dos columnas. Con la cabecera adentro tiene que apilar: arriba el
   escalón, debajo el texto. */
.pagina-inicio .portada{display:block;position:relative;min-height:0;padding:0}
.pagina-inicio .portada-contenido{display:flex;flex-direction:column;justify-content:center;min-height:clamp(420px,52vh,560px);padding-block:clamp(48px,7vw,92px)}
.escalon-arriba,.escalon-abajo{position:relative;z-index:2}

/* ===== Ajustes del escalón ===== */
/* 1. La marca va pegada al borde: el centrado en 1320 le dejaba un margen grande en
      pantallas anchas, y el logo terminaba flotando lejos del filo.
   2. Los dos pisos comparten el color y se pasan uno al otro con un degradado de
      arriba (más fuerte) hacia abajo (más claro), en vez de cortar de un tono a otro.
   3. Fuera la curva de la esquina derecha de arriba: la franja llega recta hasta el
      borde, y la única curva es la del escalón. */
.escalon-arriba{
  padding:10px 26px;
  border-radius:0;
  background:var(--papel);
}
.pagina-inicio .escalon .brand{padding-left:0}

.escalon-abajo{
  margin-left:clamp(180px,17vw,300px);
  padding:11px 26px 13px 26px;
  border-radius:0 0 0 28px;
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--papel) 90%,transparent) 0%,
    color-mix(in srgb,var(--papel) 68%,transparent) 100%
  );
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 20px 44px -28px #0c1d1666;
}
@supports not (backdrop-filter:blur(2px)){
  .escalon-abajo{background:linear-gradient(180deg,var(--papel),color-mix(in srgb,var(--papel) 94%,transparent))}
}

@media(max-width:900px){
  .escalon-arriba{padding:8px 18px}
  .escalon-abajo{margin-left:0;padding:10px 18px 12px;border-radius:0 0 20px 20px}
}

@media(max-width:640px){
  .escalon-arriba{padding:8px 14px}
  .escalon-abajo{padding:9px 14px 11px;border-radius:0 0 16px 16px}
}

/* ===== Los bordes se desvanecen contra la foto ===== */
/* Donde el fondo terminaba y empezaba la imagen quedaba un filo recto. Cada piso
   estira su color unos píxeles hacia abajo y lo va apagando, así el encuentro con la
   foto es un desvanecido y no un corte. Va en una capa aparte para que el contenido
   no se atenúe con él. */
.escalon-arriba,.escalon-abajo{position:relative}

.escalon-arriba::after{
  position:absolute;top:100%;left:0;
  width:clamp(180px,17vw,300px);height:34px;
  background:linear-gradient(180deg,var(--papel) 0%,color-mix(in srgb,var(--papel) 55%,transparent) 45%,transparent 100%);
  content:"";pointer-events:none;
}

.escalon-abajo::after{
  position:absolute;top:100%;right:0;left:0;
  height:38px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--papel) 60%,transparent) 0%,color-mix(in srgb,var(--papel) 26%,transparent) 45%,transparent 100%);
  content:"";pointer-events:none;
}

/* El escalón deja de cortar contra la foto también por dentro: el degradado del piso
   de abajo termina más transparente, así lo último antes de la imagen ya es casi ella. */
.escalon-abajo{
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--papel) 92%,transparent) 0%,
    color-mix(in srgb,var(--papel) 60%,transparent) 100%
  );
}

@media(max-width:900px){
  .escalon-arriba::after{display:none}
  .escalon-abajo::after{height:30px}
}

/* Los degradados que bajan hacia la foto se apagaban hacia abajo pero terminaban en
   seco a los costados, y ese filo vertical se veía como un rectángulo claro apoyado
   sobre la imagen. Con la máscara horizontal también se apagan hacia los lados, así
   no queda ningún borde recto contra la foto. */
.escalon-arriba::after{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 90px),transparent 100%);
}
.escalon-abajo::after{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 90px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 90px,#000 100%);
}

@media(max-width:900px){
  .escalon-abajo::after{-webkit-mask-image:none;mask-image:none}
}

/* ===== El escalón se pasa el color sin dejar raya ===== */
/* El piso de abajo arrancaba en crema al 92% justo debajo del piso de arriba, que es
   crema pleno. Ese 8% de diferencia se leía como un renglón horizontal más oscuro,
   porque encima tenía la foto asomando por la transparencia. Ahora arranca en el mismo
   crema pleno y recién después empieza a abrirse hacia la imagen: el degradado pasa a
   ser una transición y no un escalón de tono. */
.escalon-abajo{
  background:linear-gradient(
    180deg,
    var(--papel) 0%,
    color-mix(in srgb,var(--papel) 86%,transparent) 46%,
    color-mix(in srgb,var(--papel) 58%,transparent) 100%
  );
}
@supports not (backdrop-filter:blur(2px)){
  .escalon-abajo{background:linear-gradient(180deg,var(--papel),color-mix(in srgb,var(--papel) 92%,transparent))}
}

/* Y el aire muerto entre los dos pisos se achica: eran 21px de color plano sin nada
   adentro, que es justo lo que hacía visible la costura. */
.escalon-arriba{padding-bottom:7px}
.escalon-abajo{padding-top:7px}

/* ===== El buscador del celular en un solo renglón ===== */
/* Antes ocupaba cuatro filas: operación a lo ancho, tipo y moneda al medio, y el botón
   abajo de todo. Los tres filtros entran juntos usando el rótulo corto (Operación /
   Tipo / Moneda, que pone el JavaScript), y el botón se va porque el filtro se aplica
   solo al elegirlo. */
@media(max-width:900px){
  .pagina-inicio .escalon .buscador-campos{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  }
  .pagina-inicio .escalon .buscador-campos label,
  .pagina-inicio .escalon .buscador-campos label.solo-celular{grid-column:auto;flex:none}
  .pagina-inicio .escalon .buscador-enviar{display:none}
  .pagina-inicio .escalon .eleccion-boton{padding:9px 10px;font-size:13px}
  .pagina-inicio .escalon .eleccion-boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .escalon-abajo{padding-top:8px;padding-bottom:9px}
}

/* ===== El texto de la portada no compite con la foto ===== */
/* En el tramo del medio el velo dejaba pasar casi toda la imagen, y sobre el pasto
   claro las letras blancas se perdían. Se suma un velo lateral: oscuro del lado del
   texto y transparente del otro, así la foto sigue viéndose entera a la derecha. La
   sombra hace el resto sin apagar nada. */
.pagina-inicio .portada-velo{
  background:
    linear-gradient(90deg,#0a1a13d6 0%,#0a1a1391 40%,#0a1a1300 74%),
    linear-gradient(180deg,#0c1d169e 0%,#0c1d1666 42%,#0c1d16e0 100%);
}
.pagina-inicio .portada-texto{text-shadow:0 1px 24px #08130ec9,0 1px 3px #08130e73}

@media(max-width:900px){
  /* En el celular el texto ocupa todo el ancho: el velo lateral no sirve y va parejo. */
  .pagina-inicio .portada-velo{
    background:linear-gradient(180deg,#0c1d16ab 0%,#0c1d168c 42%,#0c1d16e6 100%);
  }
}

/* El velo del celular había quedado tan cargado que se comía la foto. Se afloja: el
   texto sigue leyéndose por la sombra, y el paisaje vuelve a verse. */
@media(max-width:900px){
  .pagina-inicio .portada-velo{
    background:linear-gradient(180deg,#0c1d1696 0%,#0c1d1673 45%,#0c1d16cf 100%);
  }
}

/* Aunque los dos pisos arrancan en el mismo crema, la unión seguía marcándose: arriba
   el color es plano y abajo empezaba a caer justo en el borde, y ese cambio de
   pendiente el ojo lo lee como una línea. Con un tramo de crema pleno antes de abrir,
   no queda punto donde anclar la costura. */
.escalon-abajo{
  background:linear-gradient(
    180deg,
    var(--papel) 0%,
    var(--papel) 24%,
    color-mix(in srgb,var(--papel) 84%,transparent) 62%,
    color-mix(in srgb,var(--papel) 56%,transparent) 100%
  );
}
@supports not (backdrop-filter:blur(2px)){
  .escalon-abajo{background:linear-gradient(180deg,var(--papel) 0%,var(--papel) 40%,color-mix(in srgb,var(--papel) 90%,transparent) 100%)}
}

/* ===== Fuera el halo bajo el escalón ===== */
/* Las capas que estiraban el crema hacia abajo funcionaban contra una foto clara, pero
   con el velo lateral la zona de abajo quedó oscura y el crema desvanecido se leía como
   un resplandor colgando del logo. Se quitan: cada piso ya termina translúcido por su
   propio degradado, que hace la transición sin agregar nada encima de la imagen. */
.escalon-arriba::after,
.escalon-abajo::after{display:none}

/* ===== El buscador del celular: operación, moneda y buscar ===== */
/* El tipo de propiedad sale de acá: son muchas opciones para un tercio de pantalla, y
   el listado las ofrece con aire. Quedan las dos preguntas que sí se responden de
   entrada, y el botón en la tercera casilla para mandar la búsqueda cuando se quiera,
   en vez de saltar a los resultados al tocar el primer filtro. */
@media(max-width:900px){
  .pagina-inicio .escalon .buscador-campos label.solo-pantalla{display:none}
  .pagina-inicio .escalon .buscador-enviar{
    display:flex;align-items:center;justify-content:center;
    grid-column:auto;margin-left:0;padding:9px 12px;
    border-radius:9px;font-size:13.5px;letter-spacing:0;
  }
}

/* ===== La cabecera se queda arriba y esconde el piso de la marca ===== */
/* La cabecera salió del hero: adentro, un sticky sólo se pega mientras dura su
   contenedor. Ahora va antes y el hero sube por detrás con un margen negativo, así la
   foto se sigue viendo por el hueco del escalón y además la cabecera acompaña toda la
   página. El `top` negativo vale justo lo que mide el piso de arriba: al bajar, la
   marca y los avisos se van de pantalla y queda el buscador.
   Las medidas son de arranque; app.js las reemplaza por las reales. */
.pagina-inicio{--escalon-arriba:71px;--escalon-alto:127px}
@media(max-width:900px){.pagina-inicio{--escalon-arriba:61px;--escalon-alto:114px}}
@media(max-width:640px){.pagina-inicio{--escalon-arriba:59px;--escalon-alto:110px}}

.escalon-centinela{height:1px;margin-bottom:-1px}

.pagina-inicio .escalon{
  position:sticky;
  top:calc(-1 * var(--escalon-arriba));
  z-index:55;
}
.pagina-inicio .portada{margin-top:calc(-1 * var(--escalon-alto))}
.pagina-inicio .portada-contenido{padding-top:calc(var(--escalon-alto) + clamp(48px,7vw,92px))}

/* Ya pegada arriba, el buscador deja de ser un escalón sobre la foto y pasa a ser una
   barra: ancho completo y fondo pleno, porque debajo ya no hay una imagen sino el
   contenido de la página, y un fondo translúcido dejaría leer el texto por atrás. */
.pagina-inicio .escalon .escalon-abajo{
  transition:margin-left .28s ease,border-radius .28s ease,background-color .28s ease;
}
.pagina-inicio .escalon.pegado .escalon-abajo{
  margin-left:0;
  border-radius:0;
  background:var(--papel);
  box-shadow:0 12px 30px -22px #0c1d1685;
}

/* Las anclas no quedan tapadas por la barra pegada. */
.pagina-inicio [id]{scroll-margin-top:calc(var(--escalon-alto) - var(--escalon-arriba) + 14px)}

@media(prefers-reduced-motion:reduce){
  .pagina-inicio .escalon .escalon-abajo{transition:none}
}

/* ===== Ajustes del buscador en el celular ===== */
/* Todo lo de acá abajo es sólo para pantalla chica: en la computadora la cabecera queda
   como está. Los controles eran gruesos para el espacio que hay, y el reparto en tres
   partes iguales le sobraba ancho a "Moneda" —que es una palabra corta— mientras
   "Operación" quedaba justa. Ahora el ancho sigue al texto que tiene que entrar. */
@media(max-width:900px){
  .pagina-inicio .escalon .buscador-campos{grid-template-columns:1.18fr .92fr auto;gap:6px}

  .pagina-inicio .escalon .eleccion-boton{
    gap:6px;padding:7px 9px;border-radius:8px;font-size:12.5px;
    background:#ffffffd6;
  }
  .pagina-inicio .escalon .buscador-enviar{padding:7px 15px;font-size:12.5px}
}

/* ===== Al bajar, la cabecera se queda entera pero más chica ===== */
/* En el celular no se esconde el piso de la marca: se comprime. El logo baja de tamaño
   y el aviso rotativo se guarda —es lo que menos falta hace mientras se navega—, así
   quedan la marca y el buscador en una barra fina. Y conserva el vidriado y el borde
   redondeado, que al fijarse se perdían y la dejaban seca. */
@media(max-width:900px){
  .pagina-inicio .escalon{top:0}

  .pagina-inicio .escalon .brand-logo{transition:height .28s ease}
  .pagina-inicio .escalon.pegado .escalon-arriba{padding-top:5px;padding-bottom:5px}
  .pagina-inicio .escalon.pegado .brand-logo{height:32px}
  .pagina-inicio .escalon.pegado .avisos-rotativos{display:none}

  .pagina-inicio .escalon.pegado .escalon-abajo{
    border-radius:0 0 16px 16px;
    background:linear-gradient(
      180deg,
      var(--papel) 0%,
      var(--papel) 30%,
      color-mix(in srgb,var(--papel) 80%,transparent) 100%
    );
    box-shadow:0 10px 26px -20px #0c1d1685;
  }
  @supports not (backdrop-filter:blur(2px)){
    .pagina-inicio .escalon.pegado .escalon-abajo{background:var(--papel)}
  }
}

/* El botón quedaba cuatro píxeles más alto que los desplegables y esa diferencia se ve.
   Sin padding vertical propio, la grilla lo estira hasta la altura del renglón. */
@media(max-width:900px){
  .pagina-inicio .escalon .buscador-enviar{padding:0 15px}
}

/* ===== Que el texto de la portada se lea con cualquier foto ===== */
/* El problema de fondo: la foto la cambia el cliente, así que no alcanza con elegir un
   color de letra que funcione contra ESTA imagen. Lo que se hace es darle al texto su
   propia sombra difusa detrás —una mancha oscura sin forma, que sigue al bloque y no se
   lee como caja—, así el contraste no depende de qué haya en la foto.
   Va en una capa detrás del texto para que el degradado no atenúe las letras. */
.pagina-inicio .portada-texto{position:relative;isolation:isolate}
.pagina-inicio .portada-texto::before{
  position:absolute;z-index:-1;
  inset:-46px -70px -34px -70px;
  background:radial-gradient(118% 96% at 24% 52%,#04100ad1 0%,#04100a96 44%,#04100a00 76%);
  content:"";pointer-events:none;
}
/* La sombra sobre la letra misma cierra el trabajo: separa el trazo del fondo aunque
   justo detrás caiga una zona clara. */
.pagina-inicio .portada-texto{text-shadow:0 1px 3px #04100acc,0 2px 26px #04100ab3}

@media(max-width:900px){
  .pagina-inicio .portada-texto::before{
    inset:-32px -28px -26px -28px;
    background:radial-gradient(130% 92% at 40% 50%,#04100ad6 0%,#04100a9e 48%,#04100a00 80%);
  }
}

/* El centinela avisa cuándo la cabecera quedó fija: mide lo que ésta sube antes de
   tocar su tope. Ese alto lo pone el CSS y no el JavaScript, porque acá cambia solo con
   el breakpoint; calculado una vez al cargar quedaba con el valor de la pantalla que
   hubiera en ese momento y no se enteraba de girar el teléfono. */
.pagina-inicio{--escalon-disparo:71px}
@media(max-width:900px){.pagina-inicio{--escalon-disparo:1px}}
.escalon-centinela{
  height:var(--escalon-disparo,1px);
  margin-bottom:calc(-1 * var(--escalon-disparo,1px));
}

/* En el celular el mismo círculo oscurecía parejo de lado a lado y se veían las bandas
   del degradado. Pasa a ser direccional: fuerte donde arrancan los renglones y se abre
   hacia la derecha, que es donde el texto no llega y conviene que la foto respire. Los
   pasos son muchos y cortos a propósito: un degradado de dos paradas sobre un tono tan
   oscuro se corta en franjas visibles. */
@media(max-width:900px){
  .pagina-inicio .portada-texto::before{
    inset:-30px -22px -26px -30px;
    background:linear-gradient(
      101deg,
      #04100adb 0%,
      #04100ac9 18%,
      #04100aad 34%,
      #04100a8a 50%,
      #04100a63 65%,
      #04100a3d 78%,
      #04100a1c 89%,
      #04100a00 100%
    );
  }
}

/* ===== El aviso del encabezado ===== */
/* Empezó gris y no se notaba; después en serif itálica, que quedó recargada al lado del
   logo. Queda en la letra del cuerpo, con más peso y en el verde de la marca: no compite
   con nada y se lee de un vistazo. La itálica sobraba porque el aviso ya se distingue
   por color y posición.
   Va centrado en el espacio que le queda entre la marca y los íconos. */
.avisos-rotativos{text-align:center}
.avisos-rotativos span{
  color:var(--green);
  font-family:inherit;
  font-size:14px;font-style:normal;font-weight:500;letter-spacing:.005em;
}

/* Cuando el texto no entra se corre hasta el final y vuelve, en vez de cortarse con
   puntos suspensivos. La ventana es el span; adentro se mueve sólo la capa del texto.
   Las pausas de los extremos están en los keyframes: sin ellas el texto llega al final
   y arranca la vuelta sin dar tiempo a leer la última palabra. */
.avisos-rotativos span.desplaza{text-align:left;text-overflow:clip}
.avisos-rotativos .aviso-texto{display:inline-block;white-space:nowrap}
.avisos-rotativos span.desplaza .aviso-texto{
  animation:aviso-vaiven var(--vaiven,12s) ease-in-out infinite;
}
@keyframes aviso-vaiven{
  0%,15%{transform:translateX(0)}
  50%,65%{transform:translateX(var(--corrida,0))}
  100%{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .avisos-rotativos span.desplaza .aviso-texto{animation:none}
}

/* En el celular baja apenas: tiene el renglón entero para él, así que no hace falta
   achicarlo tanto como cuando compartía línea con los íconos. */
@media(max-width:900px){
  .avisos-rotativos span{font-size:13.5px}
}
@media(max-width:640px){
  .avisos-rotativos span{font-size:13px}
}

/* La capa que envuelve el texto del aviso también es un span, así que las reglas de
   `.avisos-rotativos span` —pensadas para los avisos que se turnan— le caían encima: se
   llevaba el `opacity: 0` con el que se esconden los que no están en turno, y como esa
   capa nunca lleva la clase `visible`, el aviso no se veía nunca. Acá se le devuelve lo
   que le corresponde: es contenido, no uno de los avisos. */
.avisos-rotativos .aviso-texto{
  position:static;
  opacity:1;
  overflow:visible;
  transition:none;
}

/* ===== En el celular el aviso va en su propio renglón ===== */
/* Compartiendo la línea con la marca y los íconos le quedaban 114 px de 375: cualquier
   mensaje se cortaba, y correrlo dentro de esa ranura es incómodo de leer. Abajo tiene
   el ancho entero y la mayoría de los avisos entran quietos.
   `display: contents` deja que los hijos de la caja de avisos entren en esta grilla sin
   tocar el HTML: la caja deja de dibujarse pero sus hijos siguen ahí. */
@media(max-width:900px){
  .escalon-arriba{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"marca redes" "aviso aviso";
    align-items:center;
    row-gap:0;
  }
  .pagina-inicio .escalon .brand{grid-area:marca}
  .cabecera-avisos{display:contents}
  .avisos-rotativos{grid-area:aviso;min-height:0;padding-top:1px}
  .cabecera-redes{grid-area:redes;justify-self:end}

  /* Comprimida ya no está el aviso, así que la segunda fila desaparece sola. */
  .pagina-inicio .escalon.pegado .avisos-rotativos{display:none}
}

/* Los avisos se apilan uno encima de otro con posición absoluta —así se cruzan sin
   saltos al turnarse—, y por eso no le dan altura a su caja. En una sola línea con los
   íconos daba igual, porque la altura la ponían ellos; en su propio renglón hay que
   reservarla a mano o el renglón colapsa y el texto queda cortado por lo de abajo. */
@media(max-width:900px){
  .avisos-rotativos{min-height:22px}
}
@media(max-width:640px){
  .avisos-rotativos{min-height:21px}
}

/* ===== La misma cabecera en las páginas de adentro ===== */
/* Es el mismo componente que en la portada, pero arranca en su estado comprimido: acá
   no hay foto detrás y el hueco del escalón se leería como un recorte raro, no como un
   escalón. Queda fija arriba, como en la portada al bajar. */
.pagina-ficha .escalon-interior{
  position:sticky;top:0;z-index:55;
  background:var(--papel);
  border-bottom:1px solid color-mix(in srgb,var(--tinta) 9%,transparent);
}
.pagina-ficha .escalon-interior .escalon-arriba{
  padding:8px 26px;
  background:none;
}
.pagina-ficha .escalon-interior .escalon-abajo{
  margin-left:0;
  padding:0 26px 10px;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.pagina-ficha .escalon-interior .brand-logo{height:44px}
.pagina-ficha .escalon-centinela{display:none}

/* Los globos y campos del buscador van sobre papel, no sobre una foto: el blanco casi
   opaco que usan en la portada acá se ve como una mancha. */
.pagina-ficha .escalon-interior .buscador-op,
.pagina-ficha .escalon-interior .eleccion-boton{
  background:#fff;
  border-color:color-mix(in srgb,var(--tinta) 13%,transparent);
}
.pagina-ficha .escalon-interior .buscador-operaciones::after{
  background:color-mix(in srgb,var(--tinta) 12%,transparent);
}

@media(max-width:900px){
  .pagina-ficha .escalon-interior .escalon-arriba{padding:6px 18px}
  .pagina-ficha .escalon-interior .escalon-abajo{padding:0 18px 9px}
  .pagina-ficha .escalon-interior .brand-logo{height:36px}
  /* En pantalla chica el aviso se guarda: la cabecera está fija y cada píxel de alto
     que ocupa es un píxel menos de propiedades. */
  .pagina-ficha .escalon-interior .avisos-rotativos{display:none}
}
@media(max-width:640px){
  .pagina-ficha .escalon-interior .escalon-arriba{padding:6px 14px}
  .pagina-ficha .escalon-interior .escalon-abajo{padding:0 14px 8px}
}

/* La disposición del escalón estaba escrita con el prefijo de la portada, así que al
   reusar el componente adentro no le llegaba nada: el logo sin alinear y el buscador
   desarmado en dos filas con el botón enorme. Acá va lo mismo para el estado interior.
   (Es la colisión de siempre: reglas atadas a la página en la que nacieron.) */
.pagina-ficha .escalon-interior .escalon-arriba{
  display:flex;align-items:center;gap:16px;
}
.pagina-ficha .escalon-interior .brand{flex:0 0 auto;padding:0}
.pagina-ficha .escalon-interior .cabecera-avisos{
  display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;
  gap:18px;min-width:0;padding:0;
}

.pagina-ficha .escalon-interior .buscador{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
.pagina-ficha .escalon-interior .buscador-campos{
  display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:10px;
}
.pagina-ficha .escalon-interior .buscador-campos label{flex:0 1 180px;display:grid}
.pagina-ficha .escalon-interior .buscador-campos label.solo-celular{display:none}
.pagina-ficha .escalon-interior a.boton-principal,
.pagina-ficha .escalon-interior .buscador-enviar{
  flex:0 0 auto;margin-left:auto;padding:9px 26px;
  font-size:13.5px;letter-spacing:0;
}

@media(max-width:900px){
  .pagina-ficha .escalon-interior .buscador-campos{
    display:grid;grid-template-columns:1.18fr .92fr auto;gap:6px;
  }
  .pagina-ficha .escalon-interior .buscador-campos label{flex:none}
  .pagina-ficha .escalon-interior .buscador-campos label.solo-celular{display:grid}
  .pagina-ficha .escalon-interior .buscador-campos label.solo-pantalla{display:none}
  .pagina-ficha .escalon-interior .buscador-enviar{margin-left:0;padding:0 15px}
  .pagina-ficha .escalon-interior .buscador-operaciones{display:none}
}

/* En el listado los globos de operación de la cabecera dirían lo mismo que la fila
   "Operación" del panel, uno debajo del otro. Se quedan los del panel, que son los que
   marcan dónde está parado el visitante y se suman con el tipo; arriba queda la
   búsqueda libre, que es lo que el panel no hace. En la ficha de una propiedad no hay
   panel, así que ahí la cabecera los conserva. */
.pagina-listado .escalon-interior .buscador-operaciones{display:none}
.pagina-listado .escalon-interior .buscador-campos{flex:1 1 auto}

/* Terminación de la cabecera de adentro: al logo le faltaba aire arriba, y en el
   listado —donde los globos no van— el botón quedaba empujado al borde derecho con
   medio renglón vacío en el medio. Los campos y el botón viajan juntos a la izquierda. */
.pagina-ficha .escalon-interior .escalon-arriba{padding-top:11px;padding-bottom:9px}
.pagina-listado .escalon-interior .buscador-campos{flex:0 1 auto}
.pagina-listado .escalon-interior .buscador-enviar{margin-left:0}

/* ===== La cabecera de adentro se comporta igual que la de la portada ===== */
/* Todo lo que hace la cabecera al bajar —esconder el piso de la marca en pantalla
   grande, comprimirse en el celular, guardar el aviso— estaba escrito con el prefijo de
   la portada. Adentro quedaba fija entera, sin moverse: dos comportamientos distintos
   para lo que tiene que ser una sola cabecera. Acá va lo mismo para el estado interior;
   la única diferencia que queda es el fondo, que ahí es papel y no foto. */
.pagina-ficha{--escalon-arriba:71px;--escalon-alto:127px}
@media(max-width:900px){.pagina-ficha{--escalon-arriba:61px;--escalon-alto:114px}}
@media(max-width:640px){.pagina-ficha{--escalon-arriba:59px;--escalon-alto:110px}}

/* Mismas medidas que la portada, así el logo y los espacios no cambian al pasar de una
   página a otra. */
.pagina-ficha .escalon-interior{top:calc(-1 * var(--escalon-arriba))}
.pagina-ficha .escalon-interior .escalon-arriba{padding:10px 26px 7px}
.pagina-ficha .escalon-interior .escalon-abajo{padding:7px 26px 13px}
.pagina-ficha .escalon-interior .brand-logo{height:54px;transition:height .28s ease}
.pagina-ficha .escalon-interior.pegado{box-shadow:0 12px 30px -22px #0c1d1685}
.pagina-ficha [id]{scroll-margin-top:calc(var(--escalon-alto) - var(--escalon-arriba) + 14px)}

@media(max-width:900px){
  .pagina-ficha .escalon-interior{top:0}
  .pagina-ficha .escalon-interior .escalon-arriba{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"marca redes" "aviso aviso";
    align-items:center;row-gap:0;
    padding:8px 18px 7px;
  }
  .pagina-ficha .escalon-interior .brand{grid-area:marca}
  .pagina-ficha .escalon-interior .cabecera-avisos{display:contents}
  .pagina-ficha .escalon-interior .avisos-rotativos{display:block;grid-area:aviso;min-height:22px;padding-top:1px}
  .pagina-ficha .escalon-interior .cabecera-redes{grid-area:redes;justify-self:end}
  .pagina-ficha .escalon-interior .escalon-abajo{padding:8px 18px 9px}
  .pagina-ficha .escalon-interior .brand-logo{height:46px}

  /* Comprimida al bajar, como la portada: logo chico, sin aviso, esquinas redondeadas
     abajo para que se lea como una pieza apoyada sobre el contenido. */
  .pagina-ficha .escalon-interior.pegado{border-bottom:0;border-radius:0 0 16px 16px}
  .pagina-ficha .escalon-interior.pegado .escalon-arriba{padding-top:5px;padding-bottom:5px}
  .pagina-ficha .escalon-interior.pegado .brand-logo{height:32px}
  .pagina-ficha .escalon-interior.pegado .avisos-rotativos{display:none}
}
@media(max-width:640px){
  .pagina-ficha .escalon-interior .escalon-arriba{padding:8px 14px 7px}
  .pagina-ficha .escalon-interior .escalon-abajo{padding:8px 14px 9px}
  .pagina-ficha .escalon-interior .brand-logo{height:44px}
  .pagina-ficha .escalon-interior .avisos-rotativos{min-height:21px}
  .pagina-ficha .escalon-interior.pegado .brand-logo{height:32px}
}
@media(prefers-reduced-motion:reduce){
  .pagina-ficha .escalon-interior .brand-logo{transition:none}
}

/* El botón Buscar del listado se caía a un segundo renglón. Para acercarlo a los campos
   había puesto el contenedor a encogerse al contenido (`flex: 0 1 auto`), y al medirse
   a sí mismo no le entraba el botón. El contenedor vuelve a ocupar la fila entera —así
   nunca falta lugar— y lo que acerca el botón es sólo sacarle el empuje a la derecha,
   que ya estaba. */
.pagina-listado .escalon-interior .buscador-campos{flex:1 1 auto;justify-content:flex-start}
.pagina-listado .escalon-interior .buscador-enviar{margin-left:0}

/* ===== Adentro va sólo el head ===== */
/* En las páginas de adentro la cabecera es únicamente el piso de la marca: logo, aviso
   e íconos. El buscador queda en la portada. Acá el listado ya tiene sus filtros en el
   panel, y un segundo buscador arriba —desarmado en dos filas en la computadora, con un
   botón suelto en el celular— era ofrecer lo mismo dos veces y peor.
   Como no hay piso de abajo que dejar a la vista, la barra no se esconde al bajar: se
   queda fija y se afina, igual que la portada en el celular. */
.pagina-ficha .escalon-solo-marca{top:0}
.pagina-ficha .escalon-solo-marca .escalon-arriba{padding:10px 26px}
.pagina-ficha .escalon-solo-marca.pegado .escalon-arriba{padding:7px 26px}
.pagina-ficha .escalon-solo-marca.pegado .brand-logo{height:44px}
.pagina-ficha .escalon-solo-marca.pegado{border-radius:0}
/* Con la barra entera fija, un ancla tiene que quedar debajo de toda ella. */
.pagina-ficha [id]{scroll-margin-top:calc(var(--escalon-alto) + 14px)}

@media(max-width:900px){
  .pagina-ficha .escalon-solo-marca .escalon-arriba{padding:8px 18px 7px}
  .pagina-ficha .escalon-solo-marca.pegado{border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--tinta) 9%,transparent)}
  .pagina-ficha .escalon-solo-marca.pegado .escalon-arriba{padding:5px 18px}
  .pagina-ficha .escalon-solo-marca.pegado .brand-logo{height:32px}
}
@media(max-width:640px){
  .pagina-ficha .escalon-solo-marca .escalon-arriba{padding:8px 14px 7px}
  .pagina-ficha .escalon-solo-marca.pegado .escalon-arriba{padding:5px 14px}
}

/* ===== El panel del listado, en orden ===== */
/* El título ocupaba las dos columnas de la grilla y "Ordenar" la segunda columna en
   esas mismas filas: se pisaban, y el hueco raro arriba del título era eso. Ahora la
   primera fila es título a la izquierda y orden a la derecha, y las filas de filtros
   van debajo a todo lo ancho. */
.pagina-listado .panel-filtros{align-items:start}
.pagina-listado .panel-titulo{
  grid-column:1;grid-row:1;
  margin-bottom:0;padding-bottom:0;border-bottom:0;
  align-items:baseline;align-self:center;
}
.pagina-listado .grupo-orden{grid-column:2;grid-row:1;align-self:center}
.pagina-listado .panel-filtros .grupo-filtro{grid-column:1/-1}
.pagina-listado .panel-filtros .grupo-filtro:first-of-type{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-suave);
}

@media(max-width:900px){
  .pagina-listado .panel-filtros{grid-template-columns:1fr}
  .pagina-listado .panel-titulo{grid-column:1;grid-row:auto}
  .pagina-listado .grupo-orden{grid-column:1;grid-row:auto}
  /* Los globos se acomodaban en una tira que se corre con el dedo, sin nada que lo
     diga: se veían cortados al borde. Que bajen de renglón, que se entiende solo. */
  .pagina-listado .filtro-chips{flex-wrap:wrap;overflow:visible;padding-bottom:0}
  .pagina-listado .filtro-chips .seccion-chip{flex:0 0 auto}
}

/* En el celular el título se apila y la cuenta quedaba tocando el rótulo del filtro de
   abajo, sin nada que los separe. El respiro va acá y no en el grupo de filtros, que en
   pantalla grande está bien como está. */
@media(max-width:900px){
  .pagina-listado .panel-titulo{margin-bottom:4px}
  .pagina-listado .panel-filtros .grupo-filtro:first-of-type{margin-top:12px}
}

/* ===== El encabezado del listado, más limpio ===== */
/* Tres cosas lo hacían ver a formulario viejo: los rótulos en versalitas gritando arriba
   de cada control, la cuenta flotando sola contra el borde derecho a un metro de lo que
   contaba, y la palabra de la sección repetida en la miga, el título y la bajada.
   Ahora la cuenta va con el título, los rótulos sólo aparecen cuando hay dos filas de
   globos y hay que distinguirlas, y los textos no se repiten. */
.pagina-listado .panel-titulo{display:block}
.pagina-listado .panel-titulo h1{
  display:flex;align-items:baseline;gap:10px;
  margin:0;font-size:26px;
}
.titulo-cuenta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--green) 9%,transparent);
  color:var(--green);
  font-family:inherit;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pagina-listado .panel-titulo p{margin:5px 0 0;flex:none;font-size:14px;line-height:1.5}

/* Los globos ya no cuelgan de un rótulo: van pegados al borde izquierdo del panel. */
.pagina-listado .grupo-filtro .visualmente-oculto+.filtro-chips{flex:1 1 100%}
.pagina-listado .panel-filtros .grupo-filtro:first-of-type{margin-top:16px;padding-top:14px}
.pagina-listado .rotulo-filtro{
  flex:0 0 auto;margin-right:2px;
  font-size:11px;font-weight:600;letter-spacing:.09em;
  color:color-mix(in srgb,var(--muted) 85%,transparent);
}

/* El desplegable de orden se sostiene solo: dice "Destacadas primero", que ya explica
   qué hace. El rótulo encima era un renglón para no agregar nada. */
.pagina-listado .grupo-orden{gap:0;min-width:0;padding-left:22px}
.pagina-listado .grupo-orden .eleccion-boton{
  padding:8px 13px;border-radius:999px;font-size:13px;
  background:color-mix(in srgb,var(--green) 5%,transparent);
  border-color:transparent;
}
.pagina-listado .grupo-orden .eleccion-boton:hover{border-color:var(--linea)}
.pagina-listado .orden-aviso{grid-column:1/-1;margin-top:12px}

@media(max-width:900px){
  .pagina-listado .panel-titulo h1{font-size:22px}
  .pagina-listado .grupo-orden{padding-left:0;margin-top:14px}
  .pagina-listado .panel-filtros .grupo-filtro:first-of-type{margin-top:14px}
}

/* ===== La barra de filtros ===== */
/* Reemplaza a los globos. Los globos cambiaban de forma según la página —una fila, dos,
   ninguna— y el sitio se leía como si fueran páginas de webs distintas; además con
   muchas categorías se desbordaban. Estos son los mismos cuatro controles siempre, en
   el mismo orden, y son los mismos que usa el buscador de la portada: eso es lo que
   hace que se sienta un solo sitio. */
.barra-filtros{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--linea-suave);
}
.barra-filtros label{display:grid;flex:0 1 210px;min-width:0}
.barra-filtros .filtro-orden{margin-left:auto;flex:0 1 200px}
.barra-filtros .eleccion-boton{
  padding:9px 13px;border-radius:10px;font-size:13.5px;
  background:#fff;border-color:color-mix(in srgb,var(--tinta) 12%,transparent);
}
.barra-filtros .eleccion-boton:hover{border-color:color-mix(in srgb,var(--tinta) 26%,transparent)}

/* Un desplegable con un solo valor posible —la sección donde uno ya está— se apaga en
   vez de esconderse: si desapareciera, la barra cambiaría de forma de página en página,
   que es justo lo que se venía a arreglar. Apagado se ve, dice dónde está parado el
   visitante, y explica por qué no se puede tocar. */
.eleccion-apagada .eleccion-boton{
  background:color-mix(in srgb,var(--tinta) 4%,transparent);
  border-color:transparent;color:var(--muted);cursor:default;
}
.eleccion-apagada .eleccion-boton::after{opacity:.35}

/* Una opción sin propiedades detrás no lleva a una página vacía: se muestra con su cero
   y no se puede elegir. Enterarse antes de tocar, no después. */
.eleccion-lista .opcion-vacia{color:var(--muted);opacity:.5;cursor:default}
.eleccion-lista .opcion-vacia:hover{background:none}

.filtros-limpiar{
  flex:0 0 auto;padding:8px 14px;
  border-radius:999px;
  color:var(--muted);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;
}
.filtros-limpiar:hover{color:var(--green);background:color-mix(in srgb,var(--green) 7%,transparent);text-decoration:none}

@media(max-width:900px){
  /* Dos por renglón: cuatro controles apilados serían cuatro renglones de cabecera antes
     de la primera propiedad. */
  .barra-filtros{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
  .barra-filtros label,
  .barra-filtros .filtro-orden{flex:none;margin-left:0}
  .barra-filtros .eleccion-boton{padding:8px 11px;font-size:13px}
  .filtros-limpiar{grid-column:1/-1;justify-self:start;padding:6px 0}
}

/* Los enlaces a las secciones, al pie del listado: discretos, para que Google recorra
   las páginas de cada tipo y operación —un buscador no sigue desplegables— sin
   pelearle el lugar a las propiedades. */
.secciones-pie{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:34px 0 8px;padding-top:18px;
  border-top:1px solid var(--linea-suave);
}
.secciones-pie a{color:var(--muted);font-size:13px}
.secciones-pie a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* En pantalla angosta un valor largo empujaba la flechita fuera del control y el
   desplegable parecía un cuadro de texto. El texto se recorta y la flecha se queda. */
.barra-filtros .eleccion-boton{min-width:0}
.barra-filtros .eleccion-boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.barra-filtros .eleccion-boton::after{flex:0 0 auto}

/* Los cuatro controles miden lo mismo, pase lo que pase con el texto.
   Con ancho al contenido, "Propiedades y terrenos premium" desbordaba su caja y se
   montaba sobre el control de al lado: esa página se veía distinta de las demás, que es
   justo lo que la barra vino a evitar. Repartidos en partes iguales, la barra es la
   misma en todas.
   El `min-width: 0` va en toda la cadena: sin él, un elemento flex no baja de su
   contenido y el recorte del texto no llega a aplicarse nunca. */
.barra-filtros label{flex:1 1 0;min-width:0}
.barra-filtros .filtro-orden{flex:1 1 0;max-width:230px}
.barra-filtros .eleccion{min-width:0}
.barra-filtros .eleccion-boton{width:100%;min-width:0}

@media(max-width:900px){
  .barra-filtros label,
  .barra-filtros .filtro-orden{flex:none;max-width:none}
}

/* ===== La cabecera del panel ===== */
/* Una sola para las seis pantallas. Antes estaba copiada en cada archivo y en cada una
   ofrecía cosas distintas: el menú completo existía sólo en la portada, así que desde
   Categorías había que volver atrás para llegar a Consultas.
   Dos filas: arriba la marca y el menú, abajo el nombre de la pantalla con sus botones
   propios. La de arriba es siempre igual; la de abajo es lo que cambia. */
.panel-cabecera{
  margin:0 0 22px;
  border-bottom:1px solid var(--linea);
  background:#fff;
}
.panel-barra{
  display:flex;align-items:center;gap:18px;
  padding:9px 0;
  border-bottom:1px solid var(--linea-suave);
}
.panel-marca{flex:0 0 auto;display:block}
.panel-marca img{width:auto;height:38px}

.panel-menu{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:2px;min-width:0}
.panel-menu a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:9px;
  color:var(--muted);font-size:13.5px;font-weight:600;
}
.panel-menu a:hover{background:color-mix(in srgb,var(--green) 7%,transparent);color:var(--green)}
/* La sección donde está parado se marca con el color de la marca y una base sólida:
   sin esto el cliente no tiene forma de saber en qué pantalla está. */
.panel-menu a.actual{
  background:color-mix(in srgb,var(--green) 10%,transparent);
  color:var(--green);
}
/* Las consultas sin leer se avisan acá: es lo único del panel que no puede esperar. */
.panel-aviso{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:var(--gold2);color:#fff;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}

.panel-extremo{display:flex;flex:0 0 auto;align-items:center;gap:4px}
.panel-salida{
  padding:7px 12px;border-radius:9px;
  color:var(--muted);font-size:13px;
}
.panel-salida:hover{background:color-mix(in srgb,var(--tinta) 6%,transparent);color:var(--tinta)}

.panel-titulo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 0 18px;
}
.panel-titulo h1{
  margin:0;
  font-family:"Instrument Serif",Georgia,serif;
  font-size:27px;font-weight:400;line-height:1.15;
}
.panel-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

@media(max-width:900px){
  /* En el celular la marca y las salidas comparten renglón, y el menú va abajo a lo
     ancho: apilado en tres filas se comía media pantalla antes de la primera propiedad. */
  .panel-barra{flex-wrap:wrap;gap:10px;padding:8px 0}
  .panel-marca{order:1}
  .panel-extremo{order:2;margin-left:auto}
  .panel-menu{
    order:3;flex:1 1 100%;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;
  }
  .panel-menu::-webkit-scrollbar{display:none}
  .panel-menu a{flex:0 0 auto;padding:7px 11px;font-size:13px}
  .panel-marca img{height:32px}
  .panel-titulo{padding:13px 0 15px}
  .panel-titulo h1{font-size:22px}
}

/* ===== Compartir listas, plegado ===== */
/* Abierto competía con el filtro de la tabla: las mismas categorías dos veces en la
   misma pantalla, unas para compartir y otras para filtrar. Cerrado ocupa un renglón y
   dice para qué es. */
.compartir-listas{
  margin:0 0 16px;padding:0;
  border:1px solid var(--linea);border-radius:12px;
  background:color-mix(in srgb,var(--tinta) 2.5%,transparent);
}
.compartir-listas > summary{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;
  color:var(--muted);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;list-style:none;
}
.compartir-listas > summary::-webkit-details-marker{display:none}
/* La flechita la dibujamos: la del sistema se ve distinta en cada navegador. */
.compartir-listas > summary::before{
  content:"";flex:0 0 auto;
  width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
.compartir-listas[open] > summary::before{transform:rotate(45deg)}
.compartir-listas > summary:hover{color:var(--green)}
.compartir-listas .compartir-botones{padding:0 15px}
.compartir-listas .compartir-ayuda{margin:10px 0 0;padding:0 15px 14px}

@media(prefers-reduced-motion:reduce){
  .compartir-listas > summary::before{transition:none}
}

/* El renglón que encabeza el listado: a la izquierda cuántas hay, a la derecha el botón
   de cargar una nueva. Pegado a la lista, que es lo que va a crecer. */
.listado-encabezado{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:18px 0 12px;
}
.listado-total{color:var(--muted);font-size:13.5px}
.listado-total strong{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:640px){
  /* En el celular el botón toma el ancho: es la acción principal de la pantalla. */
  .listado-encabezado{gap:10px}
  .listado-encabezado .boton-nueva{flex:1 1 100%;text-align:center}
}

/* ===== La foto de portada en el listado del panel ===== */
/* Chica a propósito: es para reconocer la propiedad de un vistazo, no para mirarla.
   Con tres terrenos en Cholila de títulos parecidos, la foto distingue lo que el texto
   no, y a 46 px no le roba lugar a nada. */
.fila-propiedad{display:flex;align-items:flex-start;gap:11px}
.fila-foto{
  flex:0 0 auto;
  width:46px;height:46px;
  border-radius:8px;
  object-fit:cover;
  background:color-mix(in srgb,var(--tinta) 6%,transparent);
}
/* Sin fotos también dice algo: que a esa propiedad le falta lo más importante. */
.fila-foto.vacia{
  display:grid;place-items:center;
  border:1px dashed color-mix(in srgb,var(--tinta) 18%,transparent);
  color:var(--muted);font-size:15px;
}
.fila-texto{min-width:0}

@media(max-width:900px){
  /* En la tarjeta del celular la foto se agranda un poco: hay lugar y ahí sí ayuda a
     mirar, no sólo a reconocer. */
  .fila-foto{width:58px;height:58px}
}

/* El renglón para mandar una lista: qué lista, y las dos formas de pasarla. */
.compartir-fila{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:0 15px;
}
.compartir-cual{flex:1 1 260px;min-width:0;display:grid}
.compartir-cual select{
  width:100%;padding:9px 12px;
  border:1px solid var(--linea);border-radius:9px;
  background:#fff;color:var(--tinta);
  font:inherit;font-size:13.5px;
}
.compartir-cual select:focus{border-color:var(--green);outline:2px solid color-mix(in srgb,var(--green) 15%,transparent);outline-offset:1px}
.compartir-fila .small-button{flex:0 0 auto}

@media(max-width:640px){
  /* Apilados: en pantalla chica los dos botones al lado del desplegable quedan de un
     centímetro y se tocan de casualidad. */
  .compartir-fila{gap:7px}
  .compartir-cual{flex:1 1 100%}
  .compartir-fila .small-button{flex:1 1 calc(50% - 4px);text-align:center}
}

/* ===== El filtro del panel, que además comparte ===== */
/* Un solo lugar con las categorías: filtra la tabla y, con lo que quede filtrado, los
   dos botones de la derecha le pasan esa misma lista al cliente. Antes eran dos bloques
   con las mismas categorías, uno para filtrar y otro para compartir. */
.filtro-panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 4px;
}
.filtro-lineas{display:grid;flex:1 1 420px;gap:7px;min-width:0}
.filtro-linea{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.filtro-linea .rotulo-filtro{flex:0 0 74px}

.filtro-mandar{
  display:flex;flex:0 0 auto;align-items:center;gap:6px;
  padding:6px 6px 6px 12px;
  border:1px solid var(--linea);border-radius:999px;
  background:#fff;
}
.filtro-mandar-rotulo{color:var(--muted);font-size:12px;white-space:nowrap}
/* El botón es un ícono, así que el aviso de "copiado" se pone en el rótulo de al lado:
   adentro del botón no entra sin deformarlo. */
.filtro-mandar.copiado .filtro-mandar-rotulo::after{content:" · copiado";color:var(--green);font-weight:700}
.filtro-mandar.fallo .filtro-mandar-rotulo::after{content:" · no se pudo";color:#8c2f2f;font-weight:700}

@media(max-width:900px){
  .filtro-panel{gap:10px}
  .filtro-lineas{flex:1 1 100%}
  .filtro-linea .rotulo-filtro{flex:1 1 100%}
  .filtro-mandar{flex:1 1 100%;justify-content:space-between}
}

/* ===== Buscador y filtros del panel, en un renglón ===== */
/* Antes eran dos filas de globos —cuatro operaciones y cuatro tipos— más el buscador
   arriba: tres renglones que decían los mismos nombres una y otra vez. En menús entran
   los dos filtros en el lugar de uno, y es lo mismo que usa la web. */
.barra-panel{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 4px;
}
.barra-panel-buscar{
  flex:1 1 260px;min-width:0;
  padding:9px 14px;
  border:1px solid var(--linea);border-radius:999px;
  background:#fff;color:var(--tinta);font:inherit;font-size:14px;
}
.barra-panel-buscar:focus{border-color:var(--green);outline:2px solid color-mix(in srgb,var(--green) 15%,transparent);outline-offset:1px}
.barra-panel-campo{flex:0 1 190px;min-width:0;display:grid}
.barra-panel-campo select{
  width:100%;min-width:0;padding:9px 12px;
  border:1px solid var(--linea);border-radius:9px;
  background:#fff;color:var(--tinta);font:inherit;font-size:13.5px;
}
.barra-panel-campo select:focus{border-color:var(--green);outline:2px solid color-mix(in srgb,var(--green) 15%,transparent);outline-offset:1px}
/* Los de compartir se van al extremo: son otra cosa que filtrar. */
.barra-panel .filtro-mandar{margin-left:auto}

@media(max-width:900px){
  /* El buscador arriba a lo ancho y los dos menús abajo repartidos: apretados en un
     renglón con el botón no entra ni el nombre de la categoría. */
  .barra-panel{gap:7px}
  .barra-panel-buscar{flex:1 1 100%}
  .barra-panel-campo{flex:1 1 calc(50% - 4px)}
  .barra-panel .filtro-mandar{flex:1 1 100%;margin-left:0;justify-content:space-between}
}

/* El marco de los campos del panel, visible sin tocarlos.
   `--linea` es el verde de la marca al 12 %: sirve para separar bloques grandes, pero
   como borde de un campo sobre blanco no se ve, y un campo que no se ve no invita a
   escribir. Estos llevan un gris propio, el mismo que usaban antes de pasar a la barra.
   El buscador además va un punto más marcado: es el control principal de la pantalla. */
.barra-panel-buscar{border-color:#849085;background:#fff}
.barra-panel-buscar::placeholder{color:#68716a}
.barra-panel-campo select{border-color:#849085}
.barra-panel-buscar:hover,
.barra-panel-campo select:hover{border-color:#a9b3aa}

/* ===== Las variables de superficie, para todo el sitio ===== */
/* Estaban declaradas sólo en `.pagina-ficha`, así que en el panel —que es `.admin-body`—
   no existían. Y una variable que no resuelve no deja la propiedad a medias: CSS
   **descarta la declaración entera**. Por eso `border: 1px solid var(--linea)` no daba un
   borde de otro color: daba `border-style: none`, o sea ningún borde. Todos los marcos
   del panel estaban así, invisibles, y no por el color sino porque no existían.
   Declaradas acá valen en cualquier página, incluidas las que se hagan mañana.
   Van como referencia y no como valor fijo, para que sigan al color que elija el
   cliente: `estilo_marca()` reescribe --cream y --ink, y estas se acomodan solas. */
:root{
  --papel:var(--cream);
  --tinta:var(--ink);
  --linea:#12281f1f;
  --linea-suave:#12281f14;
}

/* Un botón de acción apagado —subir en la primera fila, bajar en la última— se ve
   apagado y no responde al pasar por encima. Antes quedaba igual de oscuro que los
   demás y sólo se notaba al intentar tocarlo. */
.accion:disabled{opacity:.32;cursor:default}
.accion:disabled:hover{background:none;border-color:var(--linea);color:inherit}

/* ===== La consulta, con lo importante al frente ===== */
/* De qué propiedad pregunta, con la foto: antes había un "Ver la propiedad" suelto y
   para saber de qué le hablan había que abrirlo en otra pestaña. */
.consulta-propiedad{
  display:flex;align-items:center;gap:11px;
  margin:0 0 12px;padding:9px 12px;
  border:1px solid var(--linea);border-radius:11px;
  background:color-mix(in srgb,var(--tinta) 2.5%,transparent);
  color:inherit;
}
a.consulta-propiedad:hover{border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.consulta-propiedad img{flex:0 0 auto;width:52px;height:52px;border-radius:8px;object-fit:cover}
.consulta-propiedad span{min-width:0}
.consulta-propiedad small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.consulta-propiedad strong{display:block;font-size:14.5px;line-height:1.35}
.consulta-propiedad-ir{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:17px}

/* Lo que escribió la persona es el motivo de todo lo demás. */
blockquote.consulta-texto{
  margin:0 0 14px;padding:12px 16px;
  border:0;border-left:3px solid color-mix(in srgb,var(--green) 45%,transparent);
  border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--tinta) 3%,transparent);
  color:var(--tinta);font-size:15px;line-height:1.6;
}

/* Una consulta nueva que lleva días sin contestar: quien pregunta y no recibe respuesta
   en un par de días ya está hablando con otra inmobiliaria. */
.consulta-enfriando{
  padding:3px 9px;border-radius:999px;
  background:#8c2f2f;color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}

/* Marcada como contactada sin recargar: se ve que quedó hecho. */
.consulta-recibida.recien-contactada > summary .etiqueta-estado-consulta::after{
  content:" · contactada";
  color:var(--green);font-weight:700;
}

/* ===== Consultas: la lista al costado y el detalle al lado ===== */
/* Como una bandeja de correo. Antes cada consulta era un acordeón: para comparar dos
   había que abrir una, leerla, cerrarla y abrir la otra, y con varias abiertas la
   pantalla se volvía un rollo largo. Así se recorre lo que llegó sin perder de vista
   dónde está uno. */
.admin-card-ancha{width:100%}
.consultas-tablero{
  display:grid;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:18px;align-items:start;
  margin-top:14px;
}

.consultas-lista{
  display:grid;gap:6px;align-content:start;
  max-height:min(70vh,720px);overflow-y:auto;
  padding-right:4px;
}
.consulta-item{
  display:grid;gap:3px;
  padding:10px 12px;
  border:1px solid var(--linea);border-left:3px solid transparent;border-radius:10px;
  background:#fff;color:inherit;
}
.consulta-item:hover{border-color:color-mix(in srgb,var(--green) 30%,transparent)}
/* La que se está mirando: sin esto uno se pierde al bajar por una lista larga. */
.consulta-item.abierta{
  border-color:color-mix(in srgb,var(--green) 45%,transparent);
  border-left-color:var(--green);
  background:color-mix(in srgb,var(--green) 6%,transparent);
}
/* Sin contestar o con la fecha vencida: se ve desde la lista, no hay que abrirla. */
.consulta-item.nueva{border-left-color:var(--gold2)}
.consulta-item.vencida{border-left-color:#8c2f2f}
.consulta-item-arriba{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.consulta-item-arriba strong{font-size:14px;line-height:1.3}
.consulta-item-cuando{flex:0 0 auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
.consulta-item-sobre{
  color:var(--muted);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.consulta-item-abajo{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:2px}

.consulta-detalle{
  padding:18px 20px;
  border:1px solid var(--linea);border-radius:14px;
  background:#fff;
}
.consulta-vacia{margin:0;padding:40px 0;color:var(--muted);text-align:center}
.consulta-encabezado{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:14px;
}
.consulta-encabezado h2{margin:0 0 3px;font-size:20px;line-height:1.2}
.consulta-encabezado .consulta-datos{margin:0}
.consulta-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:7px}

.consulta-alerta{
  margin:0 0 12px;padding:9px 13px;
  border-radius:10px;
  background:#8c2f2f;color:#fff;
  font-size:13px;font-weight:600;
}
/* El correo que no salió no es una urgencia: la consulta está guardada igual. Se avisa
   sin el rojo de alarma, y diciendo qué hacer si vuelve a pasar. */
.consulta-alerta.suave{
  background:color-mix(in srgb,var(--gold2) 13%,transparent);
  color:var(--tinta);font-weight:400;
}

.consulta-volver{display:none}

@media(max-width:900px){
  /* Las dos columnas no entran: se ve la lista, y al tocar una se ve sólo esa con su
     camino de vuelta. Es lo mismo que hace el correo en el teléfono. */
  .consultas-tablero{grid-template-columns:1fr;gap:0}
  .consultas-lista{max-height:none;overflow:visible;padding-right:0}
  .consulta-detalle{margin-top:14px}
  .consultas-tablero.con-abierta .consultas-lista{display:none}
  .consulta-volver{
    display:inline-block;margin:0 0 12px;
    color:var(--muted);font-size:13.5px;font-weight:600;
  }
  .consulta-volver:hover{color:var(--green)}
}

/* ===== El seguimiento, entrada por entrada ===== */
/* Antes había una sola caja de notas que se pisaba: anotar la llamada de hoy borraba la
   visita de la semana pasada. Una operación inmobiliaria tarda meses y se sigue por esa
   cadena, así que cada anotación queda con su fecha y la de arriba es la última. */
.historial{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea-suave)}
.historial h3{
  margin:0 0 12px;
  color:var(--muted);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
.historial-lista{
  display:grid;gap:2px;
  margin:0;padding:0 0 0 15px;
  list-style:none;
  /* La línea que une las anotaciones: se lee como una cronología y no como una lista
     suelta de comentarios. */
  border-left:2px solid var(--linea);
}
.historial-lista li{position:relative;padding:0 0 14px 16px}
.historial-lista li::before{
  position:absolute;left:-22px;top:4px;
  width:9px;height:9px;
  border:2px solid #fff;border-radius:50%;
  background:var(--linea);
  content:"";
}
/* La última es la que importa al abrir: se marca con el color de la marca. */
.historial-lista li:first-child::before{background:var(--green)}
.historial-cuando{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:3px}
.historial-cuando time{
  color:var(--muted);font-size:12px;
  font-variant-numeric:tabular-nums;
}
.historial-lista p{margin:0;font-size:14px;line-height:1.55}

/* ===== El aviso que pide permiso para medir ===== */
/* Abajo y sin tapar el contenido: un cartel que ocupa la pantalla entera hace que la
   gente acepte lo que sea con tal de sacárselo de encima, y eso no es un permiso.
   Los dos botones pesan lo mismo a propósito, sin un "aceptar" grande y verde con un
   "rechazar" en letra chica al costado. */
.aviso-cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;
  max-width:640px;margin:0 auto;padding:15px 18px;
  border:1px solid var(--linea);border-radius:14px;
  background:#fff;
  box-shadow:0 18px 46px -22px #0c1d1666;
}
.aviso-cookies-texto{flex:1 1 280px;min-width:0}
.aviso-cookies-texto strong{display:block;margin-bottom:3px;font-size:14.5px}
.aviso-cookies-texto p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.aviso-cookies-texto a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.aviso-cookies-botones{display:flex;flex:0 0 auto;gap:8px}
.aviso-cookies-botones .small-button{flex:0 0 auto}

@media(max-width:640px){
  .aviso-cookies{left:10px;right:10px;bottom:10px;padding:13px 15px}
  /* El botón flotante de WhatsApp queda justo acá: se lo corre mientras el aviso está. */
  .aviso-cookies ~ .flotante-whatsapp{bottom:150px}
  .aviso-cookies-botones{flex:1 1 100%}
  .aviso-cookies-botones .small-button{flex:1 1 0;text-align:center}
}

/* ===== Las páginas de texto legal ===== */
.legal{max-width:720px;padding:36px 0 64px}
.legal h1{margin:0 0 6px;font-size:clamp(28px,4vw,38px);line-height:1.15}
.legal-fecha{margin:0 0 26px;color:var(--muted);font-size:13px}
.legal h2{margin:32px 0 10px;font-size:19px;line-height:1.25}
.legal p,.legal li{color:var(--cuerpo);font-size:15.5px;line-height:1.7}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal-contacto{padding:14px 16px;border-radius:11px;background:color-mix(in srgb,var(--tinta) 3%,transparent)}
.legal-nota{color:var(--muted);font-size:13.5px}

/* ===== Cuánta gente está mirando el sitio, en la cabecera del panel ===== */
/* Va acá y no escondido en otra pantalla porque es lo que uno quiere saber sin ir a
   buscarlo: si hay alguien dando vueltas, o si el anuncio de hace una hora trajo gente. */
.panel-visitas{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--linea);
  color:var(--muted);font-size:12.5px;
}
.panel-visitas:hover{border-color:color-mix(in srgb,var(--green) 35%,transparent);color:var(--green)}
.panel-visitas strong{color:var(--tinta);font-size:13.5px;font-variant-numeric:tabular-nums}
.panel-visitas-punto{
  width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--tinta) 25%,transparent);
}
/* Con alguien adentro el punto late. Sin nadie queda gris y quieto: un indicador que
   parpadea siempre deja de querer decir algo. */
.panel-visitas.hay .panel-visitas-punto{background:#2f8c4f;animation:latir 2s ease-in-out infinite}
.panel-visitas.hay strong{color:#2f8c4f}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .panel-visitas.hay .panel-visitas-punto{animation:none}
}
@media(max-width:640px){
  .panel-visitas-texto{display:none}
}

/* ===== La pantalla de visitas ===== */
.visitas-numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:26px;
}
.visita-dato{
  display:grid;gap:2px;
  padding:14px 16px;
  border:1px solid var(--linea);border-radius:12px;
  background:#fff;
}
.visita-dato.vivo{border-color:color-mix(in srgb,#2f8c4f 45%,transparent);background:color-mix(in srgb,#2f8c4f 5%,transparent)}
.visita-cuanto{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.visita-dato.vivo .visita-cuanto{color:#2f8c4f}
.visita-que{color:var(--muted);font-size:13px}
.visita-compara{margin-top:3px;font-size:11.5px;color:var(--muted)}
.visita-compara.sube{color:#2f8c4f;font-weight:600}
.visita-compara.baja{color:#8c2f2f;font-weight:600}

/* El gráfico son treinta barras: no hace falta bajar una librería para dibujarlas. */
.visitas-grafico{
  display:flex;align-items:flex-end;gap:3px;
  height:120px;padding:0 2px;
  border-bottom:1px solid var(--linea);
}
.visitas-barra{flex:1 1 0;display:flex;align-items:flex-end;height:100%;min-width:0}
.visitas-barra span{
  width:100%;border-radius:3px 3px 0 0;
  background:color-mix(in srgb,var(--green) 55%,transparent);
}
.visitas-barra:hover span{background:var(--green)}
.visitas-eje{
  display:flex;justify-content:space-between;
  margin-top:7px;color:var(--muted);font-size:11.5px;
}

.ranking{margin:0;padding:0;list-style:none;display:grid;gap:7px;counter-reset:puesto}
.ranking a{
  display:grid;grid-template-columns:minmax(0,1fr) 90px auto;
  align-items:center;gap:12px;
  padding:9px 12px;border-radius:10px;color:inherit;
}
.ranking a:hover{background:color-mix(in srgb,var(--green) 6%,transparent)}
.ranking-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.ranking-barra{height:7px;border-radius:999px;background:color-mix(in srgb,var(--tinta) 7%,transparent);overflow:hidden}
.ranking-barra span{display:block;height:100%;border-radius:999px;background:var(--gold2)}
.ranking-cuantos{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}

@media(max-width:640px){
  .ranking a{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .ranking-barra{display:none}
}