/* ═══════════════════════════════════════════════════════════════════════ CAPA DE VENTA — el vestido del contacto Implementa SPEC-CAPA-VENTA-Y-AVANCE.md (vault) §0 bis.1, §0 bis.3, §2.5 bis, §2.6, §3.2 y §3.4 bis, con los colores del MANUAL-DE-DISENO §2.1, §5.2 y §5.3. Tres reglas de la spec que se cumplen al pie y por las que este archivo se ve como se ve: 1. Ningún token de :root del sitio se redefine aquí. Los propios llevan prefijo --v- (§0 bis.1 regla 1) y se declaran en :root, NO en una clase: la barra fija cuelga de y no es descendiente de la ficha, así que un token declarado en .venta-… se quedaría sin valor y el color simplemente no se pintaría, sin un solo error en consola. 2. --esp-* y --titular no se usan (§0 bis.1 regla 4). La escala base 8 del manual entra como --v-esp-*. 3. El CSS de la barra fija vive DENTRO del @media (max-width:760px) (§3.4 bis): fuera de él, un body.venta-barra pegado levantaría el crédito de Esri en compu, sin barra que lo justifique. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Los once del MANUAL §2.1, con prefijo para no chocar con el sitio. */ --v-cal: #F3EEE4; --v-tinta: #2A241D; --v-arena: #C9995C; --v-madera: #6E5138; --v-piedra: #A29A8E; --v-potrero: #3F6B37; --v-ambar: #8A5E24; --v-vendido: #6F675C; /* Escala base 8 del MANUAL §3.3 (--esp-* NO existe en este sitio). */ --v-esp-1: 8px; --v-esp-2: 16px; --v-esp-3: 24px; --v-esp-4: 40px; /* Alto TOTAL de la barra fija, franja segura incluida (§0 bis.3). Vive en :root porque .credito-mundo y .placa lo leen y NO son descendientes de la barra. El --safe NO se suma dos veces: lo que va encima de la barra se mide desde su alto total. */ --v-barra-alto: calc(64px + var(--safe)); } /* ═══ 1. La ficha se vuelve la parte que se desliza ═══════════════════ Se invierte a propósito css/sitio.css:793 (.sel-cab,.sel-ficha{flex:0 0 auto}), escrito cuando la ficha medía ~130 px y nunca podía competir con la lista. Con el bloque de venta dentro, una ficha rígida empuja a la lista hasta hacerla desaparecer —y como .selector no tiene overflow, lo que no cabe se pinta FUERA del panel, sin barra y sin aviso. Se apunta a #fichaLote (id) para ganarle a la clase sin !important. */ #fichaLote{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } /* Y la lista deja de poder desaparecer: piso de dos renglones. */ #listaLotes{ min-height:112px; } /* ⛔ al id, no a .sel-lista: la clase la comparte #listaCabanas y solo la de lotes pidió piso */ /* ═══ 2. El bloque de venta dentro de la ficha ════════════════════════ Vive sobre el panel OSCURO del recorrido (§2.6): manda el vestido del recorrido —texto en --hueso—, del manual se toma la estructura. */ .venta-ficha{ margin-top:var(--v-esp-2); } .venta-ficha .v-sep{ width:48px; height:1px; background:var(--v-arena); margin:0 0 var(--v-esp-2); } .venta-ficha p{ margin:0 0 var(--v-esp-1); } .v-escala{ font-size:var(--t-cuerpo); line-height:1.5; color:color-mix(in srgb, var(--hueso) calc(78% + var(--alza)), transparent); } .v-restr{ font-size:var(--t-cuerpo); line-height:1.5; color:color-mix(in srgb, var(--hueso) calc(78% + var(--alza)), transparent); } .v-restr li{ margin-left:1em; } /* Pastilla de estado — MANUAL §5.3 sobre fondo oscuro: matiz como borde y texto, fondo del mismo matiz al 15%. Jamás rojo. */ .v-pastilla{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid currentColor; font-family:var(--sans); font-weight:500; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-left:var(--v-esp-1); vertical-align:middle; } .v-pastilla[data-estado="disponible"]{ color:#7FA86F; background:color-mix(in srgb, var(--v-potrero) 15%, transparent); } .v-pastilla[data-estado="apartado"] { color:#D8A85B; background:color-mix(in srgb, var(--v-ambar) 15%, transparent); } .v-pastilla[data-estado="vendido"] { color:#B5AEA3; background:color-mix(in srgb, var(--v-vendido) 15%, transparent); } /* Pie de dato NAGEO — nunca desaparece; en teléfono se pliega. */ .v-fuente{ margin-top:var(--v-esp-2); font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; line-height:1.5; color:color-mix(in srgb, var(--hueso) calc(60% + var(--alza)), transparent); } .v-fuente summary{ cursor:pointer; list-style:none; } .v-fuente summary::-webkit-details-marker{ display:none; } .v-fuente summary::after{ content:' · ver fuente'; opacity:.7; } .v-fuente[open] summary::after{ content:' · ocultar'; } .v-fuente p{ margin:var(--v-esp-1) 0 0; letter-spacing:0; font-size:.6875rem; } /* ═══ 3. Botones — MANUAL §5.2 ════════════════════════════════════════ */ .v-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 var(--v-esp-3); width:100%; border:0; border-radius:8px; cursor:pointer; background:var(--v-arena); color:#221D18; font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:0; text-decoration:none; text-align:center; transition:background .18s ease; /* ⚠️ EL FILO OSCURO. La letra contrastaba bien (6.52) pero la SILUETA de la pastilla caía a 2.22 contra el mundo —la norma pide 3—: en el capítulo 4 hay una superficie clara justo detrás y el botón se quedaba sin borde, flotando como letras sueltas. Se midió en 14 puntos del recorrido, y el fallo no se caza mirando un capítulo oscuro. Se resuelve con el mismo filo que ya usa el crédito de Esri —un borde propio— y NUNCA oscureciendo el mundo detrás. */ box-shadow:0 0 0 1px rgba(34,29,24,.92), 0 2px 12px rgba(34,29,24,.55); } .v-btn:hover, .v-btn:active{ background:color-mix(in srgb, var(--v-arena) 92%, #221D18); } .v-btn[aria-disabled="true"]{ background:color-mix(in srgb, var(--v-piedra) 25%, transparent); color:var(--v-vendido); cursor:default; pointer-events:none; } .v-btn .wa{ width:20px; height:20px; flex:0 0 auto; } .v-btn-2{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--v-esp-2); background:transparent; border:1px solid color-mix(in srgb, var(--hueso) calc(34% + var(--alza)), transparent); border-radius:8px; color:var(--hueso); font-family:var(--sans); font-weight:500; font-size:.9375rem; letter-spacing:0; text-decoration:none; cursor:pointer; } .v-enlace{ display:inline-block; min-height:44px; line-height:44px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--sans); font-size:var(--t-cuerpo); letter-spacing:0; color:var(--v-arena); text-decoration:underline; text-underline-offset:3px; } :where(.v-btn,.v-btn-2,.v-enlace):focus-visible{ outline:2px solid var(--v-arena); outline-offset:2px; } /* El CTA, pegado abajo dentro de la ficha (§2.5). No es position:fixed: esto no es un sheet. Funciona porque #fichaLote sí hace scroll. */ .v-cta{ position:sticky; bottom:0; z-index:1; margin-top:var(--v-esp-2); padding-top:var(--v-esp-1); background:linear-gradient(to top, rgba(34,29,24,.92) 62%, transparent); } /* ═══ 4. El paso de contacto — mismo #fichaLote, otro contenido ═══════ */ .venta-paso{ margin-top:var(--v-esp-1); } .venta-paso h5{ margin:0 0 var(--v-esp-1); font-family:var(--sans); font-weight:500; font-size:var(--t-ficha); line-height:1.15; letter-spacing:0; } .venta-paso .v-resumen{ font-size:var(--t-cuerpo); line-height:1.5; color:color-mix(in srgb, var(--hueso) calc(78% + var(--alza)), transparent); margin:0 0 var(--v-esp-2); } .venta-paso label{ display:block; margin-bottom:6px; font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--hueso) calc(62% + var(--alza)), transparent); } .venta-paso input[type="text"], .venta-paso select{ width:100%; min-height:48px; padding:0 12px; margin-bottom:var(--v-esp-2); background:color-mix(in srgb, var(--hueso) calc(8% + var(--alza)), transparent); border:1px solid color-mix(in srgb, var(--hueso) calc(26% + var(--alza)), transparent); border-radius:8px; color:var(--hueso); font-family:var(--sans); font-size:1rem; letter-spacing:0; /* 16px: menos hace que iOS haga zoom al enfocar */ } .venta-paso input::placeholder{ color:color-mix(in srgb, var(--hueso) calc(42% + var(--alza)), transparent); } .venta-paso input:focus-visible, .venta-paso select:focus-visible{ outline:2px solid var(--v-arena); outline-offset:2px; } .venta-paso .v-volver{ background:none; border:0; padding:0; margin:0 0 var(--v-esp-1); min-height:44px; cursor:pointer; font-family:var(--sans); font-size:var(--t-cuerpo); letter-spacing:0; color:color-mix(in srgb, var(--hueso) calc(70% + var(--alza)), transparent); } .venta-paso .v-confianza{ margin:var(--v-esp-1) 0 0; font-size:.75rem; line-height:1.5; letter-spacing:0; color:color-mix(in srgb, var(--hueso) calc(58% + var(--alza)), transparent); } .venta-paso .v-aviso{ margin:var(--v-esp-1) 0 0; font-size:.75rem; line-height:1.5; color:#D8A85B; } /* Confirmación de que el clic SÍ registró: la ficha parpadea una vez con el filete de arena. Sin movimiento si el visitante lo pidió apagado. */ .venta-eco{ animation:v-eco 900ms ease-out 1; } @keyframes v-eco{ 0% { box-shadow:inset 2px 0 0 var(--v-arena); } 70% { box-shadow:inset 2px 0 0 var(--v-arena); } 100% { box-shadow:inset 2px 0 0 transparent; } } .v-estado{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ═══ 5. La barra fija — SOLO teléfono (§3.4 bis, condición 1) ════════ */ .venta-barra-fija{ display:none; } @media (max-width:760px){ /* Hija directa de : position:fixed deja de ser fija bajo cualquier ancestro con transform / filter / backdrop-filter, y este sitio tiene las tres cosas en .mundo y en los paneles. */ body.venta-barra .venta-barra-fija{ display:flex; align-items:flex-start; justify-content:center; position:fixed; left:0; right:0; bottom:0; z-index:72; height:var(--v-barra-alto); padding:0 16px max(16px, var(--safe)); background:linear-gradient(to top, rgba(34,29,24,.96) 58%, transparent); pointer-events:none; } body.venta-barra .venta-barra-fija .v-btn{ pointer-events:auto; max-width:420px; } /* Obligación de licencia: mientras la barra esté visible, el crédito de Esri y la placa SUBEN. Taparlos con nuestro botón de ventas es el error que esta regla existe para evitar. */ body.venta-barra .credito-mundo{ bottom:calc(3px + var(--v-barra-alto)); } body.venta-barra .placa { bottom:calc(18px + var(--v-barra-alto)); } /* Y si suben, hay que hacerles sitio: la regla de arriba levanta el cromo 72 px y la tarjeta del riel se quedaba donde estaba, así que los dos chips terminaban sentados sobre las medidas del bungalow. Medido a 375 con la barra encendida: cromo hasta 110 px del borde, piso de la tarjeta a 34. Se le devuelve a la tarjeta el mismo empujón que recibió el cromo —+72 px sobre el alto de la barra— y el piso queda en 116, seis de aire por encima del rótulo más alto. Nada de números sueltos: el piso se escribe EN FUNCIÓN de la barra, para que si la barra cambia de alto no haya que redescubrir este choque. */ body.venta-barra .fichas{ padding-bottom:calc(var(--v-barra-alto) + 72px); } } /* ═══ 6. El acceso de compu — el equivalente de la barra ══════════════ La spec prohíbe barra fija en compu (§3.4) porque ahí no hay pulgar que estorbar. Pero sin ella, los capítulos 1, 4, 5 y 6 quedan sin ninguna salida a conversación en pantalla grande. Se resuelve donde la spec deja sitio: el chrome fijo del recorrido, junto a Capítulos, que ya está ahí los seis capítulos y no tapa el mundo. */ /* ⚠️ El tamaño de letra vive AQUÍ, en la regla base, no dentro del @media. Cuando estaba solo adentro, este botón se quedaba con el 13.3333 px del navegador en todo lo que fuera menor a 761 px y sin la clase del canal: un texto fuera del sistema escalable. Lo de abajo es apariencia (color, fondo, sombra) y sí depende de la pantalla; el tamaño de la letra, no. */ .venta-chrome{ display:none; font-family:var(--sans); font-weight:500; font-size:.9375rem; letter-spacing:0; } @media (min-width:761px){ body.venta-chrome-on .venta-chrome{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:8px; background:var(--v-arena); color:#221D18; border:0; cursor:pointer; /* El mismo filo oscuro de la pastilla de teléfono: este botón también flota sobre el lienzo vivo, y el fotograma claro se lo come igual. */ box-shadow:0 0 0 1px rgba(34,29,24,.92), 0 2px 12px rgba(34,29,24,.55); } body.venta-chrome-on .venta-chrome:hover{ background:color-mix(in srgb, var(--v-arena) 92%, #221D18); } body.venta-chrome-on .venta-chrome:focus-visible{ outline:2px solid var(--v-arena); outline-offset:2px; } } /* ═══ 7. El paso de contacto suelto (sin lote) ════════════════════════ Lo abren la barra fija y el botón del chrome, que pueden existir sin ficha a la vista. Panel propio, centrado, nunca sobre el cierre. */ .venta-suelto{ position:fixed; z-index:96; inset:auto 16px calc(16px + var(--safe)) 16px; max-width:420px; margin:0 auto; padding:var(--v-esp-3); background:color-mix(in srgb, #221D18 92%, transparent); backdrop-filter:blur(14px); border:1px solid color-mix(in srgb, var(--hueso) calc(16% + var(--alza)), transparent); border-radius:12px; max-height:min(80svh, 620px); overflow-y:auto; overscroll-behavior:contain; } @media (min-width:761px){ .venta-suelto{ inset:auto 24px 24px auto; width:min(420px,calc(100vw - 48px)); } } /* ───────────────────────────────────────────────────────────── CAPA DE TELÉFONO · 18-ago-2026 ───────────────────────────────────────────────────────────── Dos cosas del paso de contacto. Ninguna es rediseño: ni una palabra, ni una foto, ni un color distinto. 1) LETRA. Los rótulos del formulario («Su nombre», «¿Qué parte le interesó?») medían .6875rem = 11 px, debajo del piso de 12 px de la casa. Suben a .75rem = 12 px exactos. Mono, versalitas y el .08em de espaciado quedan igual; medido a 375 y a 360 siguen cabiendo en un renglón y el panel no se ensancha. 2) CÓMO SE ESCRIBE EL COLOR. Los cuatro colores de este bloque estaban en color-mix(). En pantalla están bien —sobre el panel #221D18 dan de 5.9:1 a 7:1, arriba del 4.5:1 de norma—, pero Chrome los devuelve como «color(srgb 0.95 0.93 0.89 / .62)», en fracciones de 0 a 1, y cualquier auditor de contraste los lee como negro sobre negro. Se reescriben con rgba() usando el MISMO #F3EEE4 (var(--cal)) y la MISMA opacidad, así que el color en pantalla es idéntico y ahora sí se puede medir. El modo de alto contraste sigue vivo: --alza entra igual, ahora como porcentaje de opacidad. */ .venta-paso label{ font-size:.75rem; color:rgba(243,238,228, calc(62% + var(--alza))); } .venta-paso .v-resumen{ color:rgba(243,238,228, calc(78% + var(--alza))); } .venta-paso .v-volver{ color:rgba(243,238,228, calc(70% + var(--alza))); } .venta-paso .v-confianza{ color:rgba(243,238,228, calc(58% + var(--alza))); }