/* Deal Inmobiliaria, landing (segunda versión, 3 sep 2026). Negro puro, rosa #ecb8cc y blanco. Manrope 800 / 500. Gestos trasplantados de las referencias de Diego: nombre gigante sobre foto y bloque de color que lo repite (Andermatt); duotono del color de marca, cifra enorme con miniaturas flotando y nombre gigante en el pie (Blue Yonder); fila de números y pasos numerados (250 Broadway); enunciados grandes a la izquierda, pares asimétricos y revelados por recorte (111 West 57). Sin JS la página nace completa: todo lo que oculta cuelga de html.anima. */ :root{ --negro:#000000; --humo:#141214; /* el rosa oficial de la marca «Casas Deal» (13-oct-2026) */ --rosa:#ecb8cc; --rosa-tinta:#131013; --blanco:#F8F8F8; --font:"Manrope","Helvetica Neue",Arial,sans-serif; --gutter:clamp(18px,3vw,56px); /* LA PERILLA DEL TEXTO GIGANTE (17-sep-2026). Diego: «el más grande lo siento muy grande, ocupa mucho espacio… dejar el efecto de texto grande, ese es el estilo, pero no tan grande». Eligió 82 % viendo la página real a 100, 82 y 68 lado a lado. Los veinte titulares de display multiplican su tamaño por esto, así la proporción ENTRE ellos no cambia y el ajuste es un solo número. No toca cuerpo, botones ni el formulario, que tienen su propia escala. */ --display:.82; --ease:cubic-bezier(.76,0,.24,1); --ease-out:cubic-bezier(.16,1,.35,1); --barra-h:76px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;background:var(--negro)} body{margin:0;font-family:var(--font);font-weight:500;font-size:18px;line-height:1.45;color:var(--blanco);background:var(--negro);-webkit-font-smoothing:antialiased;overflow-x:clip} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input{font:inherit;color:inherit} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.98;text-wrap:balance} p,figure{margin:0} kbd,code,samp{font-family:inherit} :focus{outline:none} :focus-visible{outline:2px solid var(--rosa);outline-offset:3px} button:not(:disabled),label.chip-op,a[href]{cursor:pointer} .rosa{color:var(--rosa)} .h-linea{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .h-linea>span{display:block} .h-linea.rosa>span{color:var(--rosa)} .chip{display:inline-block;background:var(--rosa);color:var(--rosa-tinta);font-weight:800;font-size:clamp(13px,1vw,16px);letter-spacing:.04em;padding:.5em 1em;border-radius:999px;text-transform:uppercase;line-height:1} /* ---------- barra: tres piezas ---------- */ .barra{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--barra-h);display:flex;align-items:stretch;gap:24px;padding:0 var(--gutter);background:var(--negro);color:var(--blanco);transition:transform .5s var(--ease)} .barra.oculta{transform:translateY(-100%)} .barra-marca{display:flex;align-items:center} .menu-btn{display:none;margin-left:auto;align-items:center;gap:12px;background:transparent;border:0;padding:10px 0;font-weight:800;font-size:16px} .menu-btn-lineas{position:relative;width:26px;height:14px;display:block} .menu-btn-lineas i{position:absolute;left:0;right:0;height:2px;background:var(--blanco);transition:transform .35s var(--ease),top .35s var(--ease)} .menu-btn-lineas i:first-child{top:0}.menu-btn-lineas i:last-child{top:12px} .menu-btn[aria-expanded="true"] .menu-btn-lineas i:first-child{top:6px;transform:rotate(45deg)} .menu-btn[aria-expanded="true"] .menu-btn-lineas i:last-child{top:6px;transform:rotate(-45deg)} /* logotipo «Casas Deal» (13-oct-2026): mide 6.3 de ancho por 1 de alto contra 3.1 del de antes; se iguala por la ALTURA de la DD (unos 26 px), no por el ancho, o quedaba de la mitad */ .barra-marca img{width:160px;height:auto;transition:opacity .4s} .hero-visible .barra-marca img{opacity:0} .barra-links{flex:0 0 auto;display:flex;align-items:stretch;align-self:stretch;margin:0 auto;font-weight:500;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.01em} .barra::after{content:"";flex:0 0 112px} /* cada sección es un bloque de la barra negra; al pasar el cursor o estar activa, se despliega en blanco desde arriba */ .barra-links a{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 clamp(18px,1.9vw,34px);overflow:hidden;transition:color .3s var(--ease-out)} .barra-links a::before{content:"";position:absolute;inset:0;background:var(--blanco);transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease)} .barra-links a>span{position:relative} .barra-links a:hover::before,.barra-links a[aria-current="page"]::before{transform:scaleY(1)} .barra-links a:hover,.barra-links a[aria-current="page"]{color:var(--negro)} .barra-links a::after{content:none} .barra .logo-claro{display:none} .barra-cta{justify-self:end;font-weight:800;font-size:16px;background:var(--rosa);color:var(--rosa-tinta);padding:12px 20px;border-radius:8px;transition:transform .16s var(--ease-out),background-color .2s} .barra-cta:hover{background:#f1cbda}.barra-cta:active{transform:scale(.97)} .menu[hidden]{display:none} .menu{position:fixed;top:var(--barra-h);left:0;right:0;z-index:35;background:var(--rosa);color:var(--rosa-tinta);padding:clamp(20px,3vh,36px) var(--gutter) clamp(22px,3vh,40px);clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease)} .menu.abierto{clip-path:inset(0 0 0 0)} .menu-paginas{display:flex;flex-wrap:wrap;gap:6px clamp(20px,3vw,48px);align-items:baseline} .menu-paginas a{position:relative;font-size:clamp(24px,3.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.1;padding:.1em 0;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)} .menu-paginas a::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px;background:var(--rosa-tinta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)} .menu-paginas a:hover::after,.menu-paginas a[aria-current="page"]::after{transform:scaleX(1)} .menu-paginas a.menu-rosa{color:var(--blanco)} .menu-paginas a.menu-rosa::after{background:var(--blanco)} .menu.abierto .menu-paginas a{opacity:1;transform:none} .menu.abierto .menu-paginas a:nth-child(1){transition-delay:.12s}.menu.abierto .menu-paginas a:nth-child(2){transition-delay:.17s}.menu.abierto .menu-paginas a:nth-child(3){transition-delay:.22s}.menu.abierto .menu-paginas a:nth-child(4){transition-delay:.27s}.menu.abierto .menu-paginas a:nth-child(5){transition-delay:.32s} .menu-datos{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(14px,2.5vh,28px);font-weight:800;font-size:clamp(14px,1.05vw,17px);opacity:0;transition:opacity .5s .35s} .menu.abierto .menu-datos{opacity:1} .menu-datos a:hover{opacity:.7} .barra.menu-abierto{background:var(--negro)} .barra.menu-abierto .barra-marca img{opacity:1} /* ---------- hero ---------- */ .hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--barra-h) + 2vh) var(--gutter) 5vh} .hero-media{position:absolute;inset:-12% 0 -12% 0;z-index:0} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 6%} .hero-velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.72) 100%)} .hero-marca{position:relative;z-index:2;display:flex;justify-content:center;align-self:start} .hero-marca img{width:min(58vw,800px);height:auto} .hero-linea{position:relative;z-index:2;align-self:end;font-size:clamp(24px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;grid-row:3;grid-column:1} .hero-accion{position:absolute;right:var(--gutter);bottom:5vh;z-index:2;font-weight:800;font-size:clamp(15px,1.1vw,18px);padding:8px 0} /* ---------- enunciado y par asimétrico ---------- */ .frase{padding:clamp(80px,14vh,180px) var(--gutter) clamp(60px,10vh,140px)} .frase-big{font-size:calc(clamp(34px,5.4vw,96px) * var(--display));font-weight:800;letter-spacing:-.04em;line-height:1.02;max-width:20ch;text-wrap:balance} .frase-big .palabra{display:inline-block;transition:opacity .2s} .par-asim{position:relative;margin-top:clamp(60px,12vh,160px);display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(12px,2vw,32px);align-items:start} .par-grande{grid-column:1/8;overflow:hidden;aspect-ratio:4/5} .par-chica{grid-column:9/13;margin-top:clamp(80px,22vh,300px);overflow:hidden;aspect-ratio:4/5} .par-asim img{width:100%;height:100%;object-fit:cover} .par-chica figcaption{margin-top:12px;font-weight:800;font-size:15px;color:var(--rosa)} /* ---------- bloque rosa ---------- */ .rosa-bloque{position:relative;background:var(--rosa);color:var(--rosa-tinta);min-height:100svh;overflow:hidden;padding:clamp(48px,7vh,90px) 0 clamp(64px,10vh,120px)} .desliza{white-space:nowrap;font-weight:800;font-size:calc(clamp(64px,13vw,240px) * var(--display));letter-spacing:-.045em;line-height:.95;opacity:.32;pointer-events:none} .desliza span{display:inline-block} .flotas{position:absolute;inset:0;pointer-events:none} .flota{position:absolute;left:var(--x);top:var(--y);width:var(--w);min-width:70px;aspect-ratio:4/5;object-fit:cover} .rosa-in{position:relative;padding:clamp(24px,5vh,64px) var(--gutter) 0} .cifra{font-weight:800;font-size:calc(clamp(120px,22vw,380px) * var(--display));line-height:.85;letter-spacing:-.06em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.1em;flex-wrap:wrap} .cifra-de{font-size:.28em;letter-spacing:-.03em} .rosa-titulo{margin-top:clamp(28px,5vh,56px);font-size:calc(clamp(28px,3.8vw,64px) * var(--display));max-width:16ch;color:var(--rosa-tinta)} .rosa-texto{margin-top:20px;font-size:clamp(18px,1.6vw,26px);max-width:34ch} /* ---------- antes y después ---------- */ .cambio{padding:clamp(80px,14vh,180px) 0 0} .cambio-titulo{padding:0 var(--gutter);font-size:calc(clamp(56px,10vw,176px) * var(--display));margin-bottom:clamp(32px,6vh,72px)} .cambio-par{position:relative;display:grid;grid-template-columns:1fr 1fr;height:100svh;min-height:520px;margin-bottom:0} .cambio-par figure{position:relative;overflow:hidden;height:100%} .cambio-par img{width:100%;height:100%;object-fit:cover} .cambio-par figcaption{position:absolute;left:var(--gutter);top:24px;font-weight:800;font-size:clamp(13px,1vw,16px);letter-spacing:.06em;text-transform:uppercase;background:var(--negro);color:var(--blanco);padding:8px 12px} .cambio-despues figcaption{background:var(--rosa);color:var(--rosa-tinta)} .cambio-rotulo{position:absolute;left:var(--gutter);bottom:5vh;z-index:2;display:flex;align-items:center;gap:20px;font-weight:800;font-size:calc(clamp(40px,7vw,120px) * var(--display));letter-spacing:-.045em;line-height:1;text-shadow:0 2px 24px rgba(0,0,0,.35)} .cambio-par-h{grid-template-columns:1fr;height:auto;min-height:0} .cambio-par-h figure{aspect-ratio:906/465;height:auto} .cambio-par-h .cambio-despues{position:absolute;inset:0} .cambio-par-h .cambio-despues figcaption{left:auto;right:var(--gutter)} /* ---------- lista tipográfica ---------- */ .lista{padding:clamp(80px,14vh,180px) var(--gutter)} .lista-titulo{font-size:clamp(20px,1.6vw,26px);color:var(--rosa);letter-spacing:-.02em;margin-bottom:clamp(24px,4vh,48px)} .renglones{list-style:none;margin:0;padding:0} .renglones li{border:0} .renglones button{width:100%;background:transparent;border:0;padding:clamp(14px,2.2vh,28px) 0;display:flex;align-items:baseline;justify-content:space-between;gap:24px;text-align:left;color:var(--blanco);transition:color .25s} .renglones button:hover,.renglones button[aria-expanded="true"]{color:var(--rosa)} .r-txt{font-size:calc(clamp(36px,7.2vw,124px) * var(--display));font-weight:800;letter-spacing:-.045em;line-height:.98} .r-si{font-weight:800;font-size:clamp(14px,1.1vw,18px);white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s var(--ease-out)} .renglones button:hover .r-si,.renglones button[aria-expanded="true"] .r-si{opacity:1;transform:none} .r-det{height:0;overflow:hidden} .r-det>p{font-size:clamp(18px,1.6vw,26px);max-width:44ch;line-height:1.4;padding-bottom:clamp(14px,2.2vh,28px)} .anima .oferta-titulo .h-linea>span{transform:translateY(112%);transition:transform 1.1s var(--ease)} .anima .hero-listo .oferta-titulo .h-linea>span,.anima .hero-listo.oferta .oferta-titulo .h-linea>span{transform:none} /* ---------- números ---------- */ .numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,48px);padding:0 var(--gutter) clamp(80px,14vh,180px)} .numero-big{font-weight:800;font-size:calc(clamp(64px,9vw,160px) * var(--display));letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--rosa)} .numero-big span{font-size:.5em;letter-spacing:-.02em;margin-left:.06em} .numero-txt{margin-top:14px;font-weight:800;font-size:clamp(15px,1.2vw,20px);max-width:14ch} /* ---------- proceso ---------- */ .proceso{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:end;padding:clamp(80px,14vh,180px) var(--gutter) clamp(60px,10vh,120px)} .proceso-fondo{position:absolute;inset:-10% 0;z-index:0;opacity:.55} .proceso-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .proceso::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.88) 70%)} .proceso-in{position:relative;z-index:2;width:100%} .proceso-titulo{font-size:calc(clamp(48px,8vw,140px) * var(--display));margin-bottom:clamp(32px,6vh,72px)} .pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)} .paso-n{display:block;font-weight:800;font-size:calc(clamp(64px,8vw,140px) * var(--display));line-height:.85;letter-spacing:-.06em;color:var(--rosa);margin-bottom:18px} .pasos h3{font-size:clamp(22px,2vw,32px);line-height:1.1;max-width:16ch} .pasos p{margin-top:12px;font-size:clamp(16px,1.2vw,19px);max-width:30ch} /* ---------- voces ---------- */ .voces{padding:clamp(80px,14vh,180px) var(--gutter)} .voces-titulo{font-size:calc(clamp(40px,6.4vw,112px) * var(--display));max-width:14ch} .citas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);margin-top:clamp(40px,7vh,88px)} .citas blockquote{margin:0;padding-top:22px;border-top:3px solid var(--rosa)} .citas p{font-size:calc(clamp(26px,2.6vw,46px) * var(--display));font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance} .citas footer{margin-top:18px;font-size:16px;font-weight:800;color:var(--rosa)} .equipo{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,90px);align-items:center;margin-top:clamp(64px,12vh,160px)} .equipo figure{aspect-ratio:877/719;overflow:hidden} .equipo img{width:100%;height:100%;object-fit:cover} .equipo h3{font-size:calc(clamp(32px,4.2vw,72px) * var(--display));max-width:14ch} .equipo p{margin-top:22px;font-size:clamp(18px,1.4vw,23px);max-width:44ch} /* ---------- oferta ---------- */ .oferta{min-height:100svh;background:var(--humo)} .oferta-texto{width:min(100%,calc(760px + 2 * var(--gutter)));margin-inline:auto;padding:clamp(64px,10vh,120px) var(--gutter)} .oferta-titulo{font-size:calc(clamp(40px,5.6vw,96px) * var(--display));max-width:12ch} .oferta-lead{margin-top:22px;font-size:clamp(18px,1.5vw,24px);max-width:36ch} .forma{margin-top:clamp(32px,5vh,56px);display:flex;flex-direction:column;gap:26px;max-width:720px} .campo{border:0;margin:0;padding:0;min-width:0} .campo label,.campo legend{display:block;font-weight:800;font-size:16px;margin-bottom:12px;padding:0} .campo input[type="text"],.campo input[type="tel"]{width:100%;background:#231f23;border:0;border-radius:10px;padding:20px 22px;font-size:clamp(20px,1.6vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--blanco);transition:background-color .2s,box-shadow .2s} .campo input[type="text"]:focus,.campo input[type="tel"]:focus{background:#2c272c;box-shadow:0 0 0 1px rgba(236,184,204,.6)} .campo input:focus-visible{outline:2px solid var(--rosa);outline-offset:2px} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip-op{position:relative} .chip-op input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .chip-op span{display:inline-block;padding:14px 20px;border-radius:999px;background:#231f23;font-weight:800;font-size:clamp(15px,1.1vw,18px);transition:background-color .2s,color .2s,transform .16s var(--ease-out)} .chip-op:hover span{background:#322c32} .chip-op input:checked+span{background:var(--rosa);color:var(--rosa-tinta)} .chip-op input:focus-visible+span{outline:2px solid var(--rosa);outline-offset:2px} .chip-op:active span{transform:scale(.96)} .error{margin-top:8px;font-size:15px;font-weight:800;color:#ff9db4} .campo.invalido input[type="text"],.campo.invalido input[type="tel"]{box-shadow:0 0 0 1px #ff9db4} .miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .btn-grande{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:22px 28px;border-radius:10px;border:0;background:var(--rosa);color:var(--rosa-tinta);font-weight:800;font-size:clamp(19px,1.5vw,24px);transition:transform .16s var(--ease-out),background-color .2s} .btn-grande:hover{background:#f1cbda}.btn-grande:active{transform:scale(.98)} .forma-nota{font-size:15px;max-width:46ch} .forma-nota a{color:var(--rosa);font-weight:800} .forma-nota a:hover,.legal a:hover,.oferta-otros a:hover,.pie-fila a:hover,.pie-base a:hover{color:var(--blanco)} .forma-ok{margin-top:clamp(32px,5vh,56px);max-width:600px} .forma-ok h3{font-size:clamp(28px,3vw,48px)} .forma-ok p{margin:18px 0 26px;font-size:20px} /* ---------- pie ---------- */ .pie{padding:clamp(56px,8vh,96px) var(--gutter) 40px;overflow:hidden} .pie-marca img{width:100%;height:auto;max-width:none} .pie-marca-chica img{width:160px} .anima .pie-marca-chica img{clip-path:none;transition:none} .pie-fila{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:clamp(24px,4vh,40px);font-weight:800;font-size:clamp(16px,1.3vw,22px)} .pie-fila a:hover{color:var(--rosa)} .pie-base{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(28px,4vh,48px);font-size:14px;font-weight:800} .pie-base a:hover{color:var(--rosa)} .pie-base a:last-child{margin-left:auto} /* ---------- animaciones (solo con html.anima) ---------- */ .anima .h-linea>span{transform:translateY(112%);transition:transform 1.1s var(--ease)} .anima .hero-listo .hero-linea .h-linea>span,.anima .cambio-titulo.in .h-linea>span{transform:none} .anima .hero-linea .h-linea:nth-child(2)>span,.anima .cambio-titulo .h-linea:nth-child(2)>span{transition-delay:.1s} .anima .hero-media .settle{transform:scale(1.12);transition:transform 2s var(--ease-out)} .anima .hero-listo .hero-media .settle{transform:scale(1)} .anima .hero-marca{opacity:0;transform:translateY(-16px);transition:opacity 1.2s var(--ease-out) .2s,transform 1.2s var(--ease-out) .2s} .anima .hero-listo .hero-marca{opacity:1;transform:none} .anima .hero-accion{opacity:0;transition:opacity .8s .9s} .anima .hero-listo .hero-accion{opacity:1} .anima [data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)} .anima [data-rv].in{opacity:1;transform:none} .anima .citas blockquote:nth-child(2),.anima .numero:nth-child(2),.anima .pasos li:nth-child(2){transition-delay:.12s} .anima .citas blockquote:nth-child(3),.anima .numero:nth-child(3),.anima .pasos li:nth-child(3){transition-delay:.24s} .anima .numero:nth-child(4){transition-delay:.36s} .anima .renglones li:nth-child(2){transition-delay:.08s}.anima .renglones li:nth-child(3){transition-delay:.16s}.anima .renglones li:nth-child(4){transition-delay:.24s} .anima .par-asim figure img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)} .anima .par-asim.in figure img{transform:scale(1)} .anima .frase-big .palabra{opacity:.3} .anima .frase-big .palabra.on,.anima.sin-scrub .frase-big .palabra{opacity:1} .anima .cambio-despues img{clip-path:inset(0 100% 0 0)} .anima .sin-scrub .cambio-despues img,.anima.sin-scrub .cambio-despues img{clip-path:inset(0);transition:clip-path 1.6s var(--ease)} .anima .cambio-par.in.sin-scrub .cambio-despues img{clip-path:inset(0)} .anima .pie-marca img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)} .anima .pie-marca.in img{clip-path:inset(0)} @media (prefers-reduced-motion:reduce){ .anima .h-linea>span,.anima .hero-media .settle,.anima .hero-marca,.anima .hero-accion,.anima [data-rv],.anima .par-asim figure img,.anima .frase-big .palabra,.anima .cambio-despues img,.anima .pie-marca img,.anima .hero-inicio .h-letra,.anima .hero-inicio .hero-e-foto,.menu,.menu-paginas a,.menu-datos,.anima .portada-titulo .h-linea>span{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important} .anima .hero-inicio::after{display:none} .desliza span,.flota,[data-plx]{transform:none!important} } /* ---------- pantallas ---------- */ @media (max-width:980px){ .par-grande{grid-column:1/10} .par-chica{grid-column:8/13;margin-top:clamp(200px,40vh,420px)} .citas{grid-template-columns:1fr} .equipo{grid-template-columns:1fr} .oferta-texto{padding:clamp(48px,8vh,80px) var(--gutter)} .pasos{grid-template-columns:1fr;gap:36px} .proceso{align-items:start} .numeros{grid-template-columns:1fr 1fr} .cambio-par{grid-template-columns:1fr 1fr;height:70svh} .cambio-par-h{height:auto;min-height:0} .cambio-rotulo{font-size:calc(clamp(34px,9vw,80px) * var(--display))} } @media (max-width:640px){ .barra{grid-template-columns:auto 1fr auto} .menu-btn-txt{display:none} .barra-marca{justify-self:center} .barra-marca img{width:124px} .barra-cta{padding:10px 14px;font-size:14px} .hero{min-height:0;height:100svh;padding-bottom:6vh} .hero-media img{object-position:50% 10%} .hero-marca img{width:78vw} .hero-linea{font-size:clamp(22px,6.4vw,30px);max-width:16ch} .hero-accion{position:static;margin-top:16px;justify-self:start;grid-row:4} .frase-big{font-size:calc(clamp(30px,8.6vw,48px) * var(--display))} .par-asim{grid-template-columns:1fr;gap:16px} .par-grande,.par-chica{grid-column:1;margin-top:0} .par-chica{width:72%;margin-left:auto} .cifra{font-size:calc(clamp(100px,34vw,180px) * var(--display))} .flota{min-width:56px;width:clamp(56px,22vw,110px)} /* (las fotos flotantes del bloque rosa se acomodan en su propia franja: ver «TELÉFONO: REPASO DE ADAPTABILIDAD» al final de esta hoja) */ /* EL PAR SE MIDE POR PROPORCIÓN, NO POR ALTO (23-sep-2026). Con 64svh cada columna era 195×540 y de cada foto 3:4 se veía el 48 % del ancho; con alto fijo, además, el recorte cambiaba con cada teléfono. Con 9/10 se ve el 60 %, el umbral del cerebro (interfaces, «Imagen y recorte»), y el par pesa 433 px en vez de 540. */ .cambio-par{height:auto;min-height:0;aspect-ratio:9/10} .cambio-par-h{height:auto;min-height:0;aspect-ratio:auto} /* el rótulo de la fachada va debajo de la foto: sin gutter pegaba al borde (x=0) */ /* y con AIRE abajo (24-sep-2026, Diego: «"Vendida" sale amontonada con las fotos»): sin espacio debajo, el par siguiente arrancaba pegado y el rótulo quedaba embarrado entre dos fotos. Más cerca de la foto que nombra (arriba) que de la siguiente (abajo). */ .cambio-par-h .cambio-rotulo{position:static;padding:16px var(--gutter) 32px;text-shadow:none} .cambio-rotulo{gap:12px;font-size:calc(clamp(30px,9vw,44px) * var(--display))} /* «Antes» y «Después» a la talla de la ficha «Vendida» (13 px); a 11 eran lo más chico de la página */ .cambio-par figcaption{top:12px;font-size:13px} .r-txt{font-size:calc(clamp(30px,9.6vw,44px) * var(--display))} /* «Sí la compramos» en escritorio sale al pasar el cursor; al tacto no hay cursor, así que en teléfono va siempre, debajo de cada situación, en rosa */ .lista .renglones button{flex-direction:column;align-items:flex-start;gap:6px} .lista .r-si{display:block;opacity:1;transform:none;font-size:15px;color:var(--rosa)} .numeros{grid-template-columns:1fr 1fr;gap:28px 16px} .pie-base a:last-child{margin-left:0} } /* ---------- portada de página interior (sin hero de foto: titular gigante y una línea, 111 West 57) ---------- */ .portada{padding:calc(var(--barra-h) + clamp(48px,9vh,110px)) var(--gutter) clamp(40px,7vh,80px)} .portada-titulo{font-size:calc(clamp(56px,11vw,190px) * var(--display));line-height:.92} .portada-lead{margin-top:clamp(24px,4vh,44px);font-size:clamp(19px,1.7vw,28px);max-width:44ch;line-height:1.35} .anima .portada-titulo .h-linea>span{transform:translateY(112%);transition:transform 1.1s var(--ease)} .anima .hero-listo .portada-titulo .h-linea>span{transform:none} .anima .portada-titulo .h-linea:nth-child(2)>span{transition-delay:.1s} /* ---------- puertas: tres columnas con una palabra grande (250 Broadway) ---------- */ .puertas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);padding:clamp(80px,14vh,180px) var(--gutter) clamp(40px,7vh,80px)} .puerta{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:3px solid var(--rosa);transition:color .25s} .puerta:hover{color:var(--rosa)} .puerta-t{font-size:calc(clamp(30px,3.6vw,60px) * var(--display));font-weight:800;letter-spacing:-.04em;line-height:1} .puerta-d{font-size:clamp(16px,1.2vw,19px);max-width:26ch} .rosa-link{display:inline-block;position:relative;z-index:0;margin-top:clamp(20px,3vh,32px);font-weight:800;font-size:clamp(17px,1.3vw,22px);padding:.35em .6em;margin-left:-.6em;transition:color .3s var(--ease-out)} .rosa-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--negro);transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease)} .rosa-link:hover::before{transform:scaleY(1)} .rosa-link:hover{color:var(--rosa)} /* ---------- cierre de página ---------- */ .cierre{padding:clamp(80px,14vh,180px) var(--gutter) clamp(72px,12vh,150px);background:var(--humo)} .cierre-titulo{font-size:calc(clamp(44px,7.4vw,130px) * var(--display));max-width:11ch} .cierre-lead{margin-top:clamp(20px,3vh,32px);font-size:clamp(18px,1.5vw,24px);max-width:36ch} .cierre-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,5vh,48px)} .cierre .btn-grande{width:auto;padding:22px 34px} .btn-linea{display:inline-flex;align-items:center;justify-content:center;padding:22px 34px;border-radius:10px;font-weight:800;font-size:clamp(19px,1.5vw,24px);color:var(--blanco);box-shadow:inset 0 0 0 2px var(--blanco);transition:background-color .2s,color .2s,transform .16s var(--ease-out)} .btn-linea:hover{background:var(--blanco);color:var(--negro)}.btn-linea:active{transform:scale(.98)} /* ---------- entregas: tres verticales en fila (111 West 57) ---------- */ .entregas{padding:clamp(40px,7vh,80px) var(--gutter) clamp(60px,10vh,120px)} .entregas-titulo{font-size:calc(clamp(36px,5vw,84px) * var(--display));margin-bottom:clamp(28px,5vh,56px)} .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,32px)} .tres figure{overflow:hidden;aspect-ratio:4/5} .tres img{width:100%;height:100%;object-fit:cover} .tres figcaption{margin-top:12px;font-weight:800;font-size:16px;color:var(--rosa)} /* ---------- recorridos: casas terminadas en video vertical ---------- 9:16 como vienen grabados; en teléfono la fila se desliza de lado para no apilar tres pantallas de video una tras otra. */ .tres.recorridos-fila figure{aspect-ratio:auto;overflow:visible} .recorridos-fila video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--rosa-tinta)} .oferta-otros{margin-top:clamp(28px,5vh,48px);font-size:16px;max-width:46ch} .oferta-otros a{color:var(--rosa);font-weight:800} /* ---------- aviso de privacidad ---------- */ .legal{padding:calc(var(--barra-h) + 48px) var(--gutter) 80px;max-width:860px} .legal-titulo{font-size:calc(clamp(40px,6vw,96px) * var(--display))} .legal h2{font-size:clamp(22px,2.2vw,32px);margin-top:44px;color:var(--rosa)} .legal p,.legal li{margin-top:14px;line-height:1.55;font-size:18px} .legal ul{padding-left:22px} .legal a{color:var(--rosa);font-weight:800} .pendiente{background:var(--humo);padding:16px 18px;border-radius:10px;margin-top:22px} @media (max-width:980px){.puertas{grid-template-columns:1fr 1fr;gap:28px}.tres{grid-template-columns:1fr 1fr 1fr;gap:8px}} /* LAS DOS FILAS DE TRES SE DESLIZAN EN TELÉFONO (23-sep-2026). «El día de la firma» apilaba sus tres fotos 4:5 a todo el ancho: 1,566 px, casi dos pantallas sin una decisión dentro (cerebro-interfaces: en el móvil lo que sobra es alto; una rejilla de fotos se vuelve tira deslizable). Ahora usa la misma tira que los recorridos de arriba. El revelado va en cada foto, así que cuando entra la primera entran todas: una tarjeta a la derecha, fuera de la vista, no se queda en blanco esperando su turno. */ @media (max-width:640px){ .tres{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none} .tres::-webkit-scrollbar{display:none} .tres figure{scroll-snap-align:start} .anima .tres:has(> figure.in) > figure[data-rv]{opacity:1;transform:none} } @media (max-width:640px){.menu-paginas{flex-direction:column;gap:2px}.menu-paginas a{font-size:clamp(28px,8vw,40px)}.cierre-acciones{flex-direction:column}.cierre .btn-grande,.btn-linea{width:100%}} /* ---------- acciones: texto en reposo; al pasar el cursor se despliega un bloque de color detrás (el mismo gesto de la barra) ---------- */ .enlace-grande{display:inline-block;position:relative;background:transparent;border:0;padding:.28em .55em;margin-left:-.55em;color:var(--rosa);font-weight:800;font-size:clamp(22px,2.2vw,36px);letter-spacing:-.03em;line-height:1.05;cursor:pointer;transition:color .3s var(--ease-out);z-index:0} .enlace-grande::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rosa);transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease)} .enlace-grande:hover::before,.enlace-grande:focus-visible::before{transform:scaleY(1)} .enlace-grande:hover,.enlace-grande:focus-visible{color:var(--rosa-tinta);outline:none} .enlace-blanco{color:var(--blanco)} .enlace-blanco::before{background:var(--blanco)} .enlace-blanco:hover{color:var(--negro)} .rosa-bloque .enlace-grande,.hero-inicio .enlace-grande,.enlace-tinta{color:var(--rosa-tinta)} .rosa-bloque .enlace-grande::before,.hero-inicio .enlace-grande::before,.enlace-tinta::before{background:var(--negro)} .rosa-bloque .enlace-grande:hover,.hero-inicio .enlace-grande:hover,.enlace-tinta:hover{color:var(--rosa)} .cierre-acciones{gap:18px clamp(28px,4vw,64px);align-items:baseline} .rosa-bloque .enlace-grande{color:var(--rosa-tinta)} /* opciones del formulario: texto en reposo; la elegida despliega el bloque rosa detrás */ .chips{gap:6px clamp(10px,1.4vw,20px)} .chip-op span{position:relative;z-index:0;background:transparent;padding:8px 14px;margin-left:-14px;border-radius:0;font-size:clamp(17px,1.35vw,22px);color:var(--blanco);opacity:.8;transition:opacity .2s,color .25s} .chip-op span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rosa);transform:scaleY(0);transform-origin:bottom;transition:transform .36s var(--ease)} .chip-op:hover span{background:transparent;opacity:1} .chip-op input:checked+span{background:transparent;color:var(--rosa-tinta);opacity:1} .chip-op input:checked+span::before{transform:scaleY(1)} .chip-op input:focus-visible+span{outline:2px solid var(--rosa);outline-offset:2px} .chip-op:active span{transform:none} .chip{border-radius:0;padding:.55em .9em} .forma-ok .enlace-grande{margin-top:6px} .forma .enlace-grande{align-self:flex-start;margin-top:8px} .cambio-inicio{padding:0} .cambio-inicio .cambio-par{margin-bottom:0} /* ---------- página de variantes de hero ---------- */ .variantes-cabecera{padding:calc(var(--barra-h) + 24px) var(--gutter) 24px;font-weight:800;color:var(--rosa);max-width:70ch} .variante{position:relative;min-height:100svh;overflow:hidden;border-top:12px solid var(--rosa)} .var-num{position:absolute;left:var(--gutter);top:calc(var(--barra-h) + 10px);z-index:5;font-weight:800;font-size:clamp(28px,3vw,48px);color:var(--rosa);background:var(--negro);padding:4px 14px} .var-nota{position:absolute;right:var(--gutter);bottom:18px;z-index:5;font-size:14px;font-weight:800;max-width:38ch;text-align:right;color:var(--blanco);background:rgba(0,0,0,.72);padding:10px 12px} .hero.variante{padding-top:calc(var(--barra-h) + 2vh)} .hero.variante .hero-marca img,.hero.variante .hero-media .settle{opacity:1;transform:none} .hero-b{display:flex;align-items:center;padding:calc(var(--barra-h) + 4vh) var(--gutter) 6vh;background:var(--negro)} .hero-b-titulo{font-size:clamp(56px,9.5vw,170px);font-weight:800;letter-spacing:-.045em;line-height:.92;max-width:11ch} .hero-b-linea{margin:clamp(20px,3vh,32px) 0 clamp(24px,4vh,40px);font-size:clamp(18px,1.6vw,26px);max-width:34ch} .hero-c{display:grid;grid-template-columns:1.1fr .9fr;background:var(--negro)} .hero-c-texto{padding:calc(var(--barra-h) + 6vh) var(--gutter) 8vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,40px)} .hero-c-titulo{font-size:clamp(40px,5.6vw,104px);font-weight:800;letter-spacing:-.04em;line-height:.98;max-width:13ch} .hero-c-foto{overflow:hidden;min-height:100svh} .hero-c-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .hero-d{display:flex;align-items:flex-end;padding:0 var(--gutter) 7vh;background:var(--negro)} .hero-d-media{position:absolute;inset:0} .hero-d-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%} .hero-d-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.2) 40%,rgba(0,0,0,.85))} .hero-d-titulo{position:relative;font-size:clamp(40px,6.4vw,118px);font-weight:800;letter-spacing:-.04em;line-height:.96;max-width:14ch} .hero-e{display:grid;grid-template-columns:1.15fr .85fr;background:var(--rosa);color:var(--rosa-tinta);min-height:100svh} .hero-inicio{padding-top:var(--barra-h);grid-template-columns:1fr 1fr} .hero-inicio .hero-e-texto{padding-top:6vh} .hero-inicio .hero-e-foto{position:relative;overflow:hidden;min-height:calc(100svh - var(--barra-h))} .hero-inicio .hero-e-foto img{position:absolute;inset:-8% 0;height:116%} .enlace-tinta{color:var(--rosa-tinta);margin-top:clamp(24px,4vh,40px)} /* Entrada del hero de inicio, propia de Deal: el negro de la barra se retira hacia la derecha como un telón, las letras se estampan una por una (suben, giran apenas y asientan), la foto se descubre siguiendo al telón y el resto del texto llega al final. Solo transform, opacity y clip-path. Sin JS no hay .anima y todo nace puesto. */ .hero-inicio{position:relative} .hero-inicio .h-linea{overflow:visible;padding-bottom:0;margin-bottom:0} .anima .hero-inicio .h-linea>span{transform:none;transition:none} .h-letra{display:inline-block;transform-origin:0 100%} .h-palabra{display:inline-block;white-space:nowrap} .anima .hero-inicio::after{content:"";position:absolute;inset:0;z-index:3;background:var(--negro);clip-path:inset(0);transition:clip-path 1s var(--ease);pointer-events:none} .anima .hero-inicio.hero-listo::after{clip-path:inset(0 0 0 100%)} .anima .hero-inicio .h-letra{opacity:0;transform:translateY(.45em) rotate(5deg) scale(.9);transition:transform .8s var(--ease-out),opacity .5s ease-out;transition-delay:calc(.28s + var(--i) * 34ms)} .anima .hero-inicio.hero-listo .h-letra{opacity:1;transform:none} .anima .hero-inicio .hero-e-foto{clip-path:inset(0 0 0 100%);transition:clip-path 1.15s var(--ease) .32s} .anima .hero-inicio.hero-listo .hero-e-foto{clip-path:inset(0)} .anima .hero-inicio .settle{transform:scale(1.18) translateX(4%);transition:transform 2.2s var(--ease-out) .32s} .anima .hero-inicio.hero-listo .settle{transform:none} .anima .hero-inicio:not(.hero-listo) [data-rv]{opacity:0;transform:translateY(28px)} .anima .hero-inicio .hero-e-linea{transition-delay:1.05s} .anima .hero-inicio .enlace-grande{transition-delay:1.2s} .hero-e-texto{padding:calc(var(--barra-h) + 6vh) var(--gutter) 8vh;display:flex;flex-direction:column;justify-content:center} .hero-e-titulo{font-size:calc(clamp(56px,8.2vw,150px) * var(--display));font-weight:800;letter-spacing:-.045em;line-height:.9;max-width:9ch;margin:0} .hero-e-blanco{color:var(--blanco)} .hero-e-linea{margin-top:clamp(20px,3vh,32px);font-size:clamp(18px,1.6vw,26px);max-width:32ch} .hero-e-foto{overflow:hidden;min-height:100svh} .hero-e-foto img{width:100%;height:100%;object-fit:cover} @media (max-width:760px){.hero-c,.hero-e{grid-template-columns:1fr}.hero-c-foto,.hero-e-foto{min-height:60svh}.var-nota{position:static;text-align:left;max-width:none}} /* ---------- EL HERO EN TELÉFONO (17/18-sep-2026) ---------- Antes eran DOS pantallas completas: una rosa con el texto centrado en el vacío y otra con la foto sola. Diego: «no me gusta cómo sale esa primera parte y segunda al abrir la página en celular». Se le enseñaron dos estructuras lado a lado y eligió ésta (18-sep, «pues C»): la foto ocupa la primera pantalla y el titular, la línea y el botón van encima, sobre una franja rosa que sube en degradado desde abajo — degradado solo en la franja donde cae el texto, nunca velo parejo sobre toda la imagen (§5.1-bis). Una sola pantalla con todo. */ @media (max-width:760px){ .hero-inicio{position:relative;display:block;min-height:100svh;background:var(--negro)} .hero-inicio .hero-e-foto{position:absolute;inset:0;min-height:0;height:auto} .hero-inicio .hero-e-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%} .hero-inicio .hero-e-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;justify-content:flex-end;padding:clamp(120px,22vh,180px) var(--gutter) calc(28px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--rosa) 0,var(--rosa) 52%,rgba(236,184,204,.55) 78%,rgba(236,184,204,0) 100%)} .hero-inicio .hero-e-titulo{font-size:calc(clamp(56px,16vw,80px) * var(--display));max-width:none} .hero-inicio .hero-e-blanco{color:var(--blanco)} .hero-inicio .hero-e-linea{margin-top:18px;font-size:17px;max-width:34ch} .anima .hero-inicio .settle{transform:scale(1.12)} .anima .hero-inicio.hero-listo .settle{transform:none} } @media (max-width:640px){ /* EN TELÉFONO LA BARRA ES LOGO + HAMBURGUESA (Diego, 17-sep-2026: «este menú debe salir en el menú de hamburguesa, no ahí distribuido»). Los seis enlaces repartidos en una segunda fila de 13 px eran una barra de dos pisos que se comía 104 px de la primera pantalla. */ :root{--barra-h:60px} .barra{gap:0} .barra-marca img{width:124px} .barra::after{display:none} .barra-links{display:none} .menu-btn{display:flex;align-items:center;padding:10px 0 10px 16px} .hero-inicio{padding-top:var(--barra-h)} /* El menú ocupa toda la pantalla bajo la barra: enlaces apilados, grandes, y abajo la oferta y el WhatsApp. Entra con el mismo telón (clip-path) de siempre. */ .menu{bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,5vh,40px) var(--gutter) calc(24px + env(safe-area-inset-bottom));overflow-y:auto} .menu-paginas{flex-direction:column;align-items:flex-start;gap:4px} .menu-paginas a{font-size:clamp(30px,9vw,44px)} .menu-datos{flex-direction:column;gap:12px;font-size:17px} } /* ═══════════════════════════════════════════════════════════════════════ CORTINA DE ACCESO — temporal, mientras el sitio no se abre al público. Al revés que una cortina de bienvenida: ésta NACE PUESTA y el JS sólo la RETIRA. Por eso el bloqueo de scroll va aquí y no en el script: si el JS falla, una puerta tiene que quedarse CERRADA, no abierta. Se quita borrando este bloque y los tres de generar.mjs. ═══════════════════════════════════════════════════════════════════════ */ html:not([data-abierto]) body{overflow:hidden} html[data-abierto] .cortina{display:none} .cortina{ position:fixed; inset:0; z-index:2147483000; /* flex + margin auto en la caja, NO place-items:center: con el centrado de grid, un contenido más alto que la ventana se corta arriba y abajo sin poder alcanzarse (medido: a 380px de alto el botón Entrar quedaba fuera). Con margin auto se centra igual y, cuando desborda, se puede llegar a los dos extremos. */ display:flex; align-items:center; justify-content:center; padding:var(--gutter); background:var(--negro); color:var(--blanco); overflow-y:auto; } .cortina-caja{width:min(560px,100%); margin:auto; text-align:left} .cortina-marca{ margin:0 0 clamp(20px,4vh,38px); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--rosa); } .cortina-titulo{ margin:0 0 18px; font-size:clamp(34px,7vw,62px); font-weight:800; line-height:1.02; letter-spacing:-.02em; } .cortina-lead{ margin:0 0 clamp(26px,5vh,40px); max-width:44ch; font-size:clamp(15px,1.7vw,17px); font-weight:500; line-height:1.55; color:rgba(248,248,248,.62); } .cortina-forma{display:flex; flex-wrap:wrap; gap:10px} .cortina-campo{ flex:1 1 220px; min-width:0; height:54px; padding:0 18px; font:500 16px/1 var(--font); /* 16px o iOS hace zoom al enfocar */ color:var(--blanco); background:transparent; border:1px solid rgba(248,248,248,.22); border-radius:0; outline:none; transition:border-color .22s var(--ease-out); -webkit-appearance:none; appearance:none; } .cortina-campo::placeholder{color:rgba(248,248,248,.38)} .cortina-campo:focus{border-color:var(--rosa)} .cortina-boton{ height:54px; padding:0 30px; font:800 14px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--rosa-tinta); background:var(--rosa); border:0; border-radius:0; cursor:pointer; transition:transform .22s var(--ease-out), opacity .22s var(--ease-out); } .cortina-boton:hover{opacity:.86} .cortina-boton:active{transform:scale(.97)} .cortina-error{ margin:16px 0 0; min-height:1.2em; font-size:14px; font-weight:500; color:var(--rosa); } /* Salida: sólo opacity y transform, que no recalculan la página (§7-bis) */ .cortina-sale{ opacity:0; transform:translateY(-14px); transition:opacity .42s var(--ease), transform .42s var(--ease); pointer-events:none; } @media (prefers-reduced-motion:reduce){ .cortina-sale{transition-duration:.01ms} .cortina-boton,.cortina-campo{transition:none} } /* ---------- LA AGENDA DE LA LLAMADA: SE ELIGE EL DÍA (23-sep-2026) ---------- El mes a la izquierda y, donde antes iban las horas, el día elegido dicho en grande con lo que va a pasar. Diego pidió elegir por DÍA, de lunes a viernes, con un calendario «como el de la página de FG, adaptado a Deal». De FG se toma la FORMA: casillas rellenas para lo que se puede elegir, lo demás apagado y la elegida con el color invertido. De Deal, la PIEL: casillas cuadradas como el tablero de la portada, la elegida en rosa lleno con tinta, hoy con un anillo rosa, y sábados y domingos apagados, NO escondidos (cerebro-interfaces, catálogo 9). Sin caja alrededor, como el resto del formulario de la variante 1. */ .cita-dicho{margin:0 0 18px;font-size:16px;color:#9a929a;max-width:52ch} /* EL MES A LO ANCHO (Diego, 23-sep-2026: «lo veo muy a la izquierda, muy esquinado»). Con 440 px el calendario ocupaba un tercio y dejaba un hueco a la derecha del día elegido. Ahora el mes toma más de la mitad y sus casillas son rectángulos (no cuadrados): se estira a los lados sin volverse una torre. */ /* la columna del día se estira al alto del mes: el día arriba, a la altura del nombre del mes, y los botones abajo, al ras de la última semana */ .agenda{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:stretch} .agenda-mes{display:flex;align-items:center;gap:4px;margin-bottom:14px} .agenda-mes p{margin:0 auto 0 0;font-weight:800;font-size:clamp(18px,1.6vw,26px);letter-spacing:-.02em} .agenda-mes p::first-letter{text-transform:uppercase} .agenda-flecha{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:0;background:transparent;color:var(--blanco);cursor:pointer;transition:background-color .2s var(--ease-out),opacity .2s var(--ease-out),transform .16s var(--ease-out)} .agenda-flecha:hover{background:#2c272c} .agenda-flecha:active{transform:scale(.94)} .agenda-flecha:disabled{opacity:.25;cursor:default;background:transparent;transform:none} .agenda-flecha:focus{outline:none} .agenda-flecha:focus-visible,.agenda-d:focus-visible{outline:2px solid var(--rosa);outline-offset:2px} .agenda-semana,.agenda-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .agenda-semana span{text-align:center;font-size:13px;font-weight:800;letter-spacing:.04em;color:#8a828a;padding:6px 0} .agenda-d{aspect-ratio:auto;height:clamp(42px,5.8vh,60px);min-height:40px;display:grid;place-items:center;border:0;border-radius:0;background:#231f23;color:var(--blanco);font:inherit;font-weight:800;font-size:clamp(16px,1.3vw,20px);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)} .agenda-d:focus{outline:none} .agenda-d:hover{background:#322c32} .agenda-d:active{transform:scale(.94)} .agenda-d.hoy{box-shadow:inset 0 0 0 2px rgba(236,184,204,.6)} .agenda-d[aria-pressed="true"]{background:var(--rosa);color:var(--rosa-tinta);box-shadow:none} .agenda-d:disabled{background:transparent;color:#4d464d;font-weight:500;cursor:default;transform:none} .agenda-resumen{display:flex;flex-direction:column;padding-top:4px} .agenda-resumen p{margin:0} .agenda-resumen-rot{font-weight:500;font-size:clamp(18px,1.6vw,26px);line-height:1.3;color:var(--blanco)} .agenda-resumen .agenda-resumen-dia{margin-top:6px;font-weight:800;font-size:calc(clamp(26px,2.6vw,46px) * var(--display));letter-spacing:-.04em;line-height:1.1;color:var(--rosa)} .agenda-resumen .agenda-resumen-nota{margin-top:18px;font-size:clamp(16px,1.3vw,22px);line-height:1.4;color:#cfc8cf;max-width:34ch} @media (max-width:900px){.agenda{grid-template-columns:1fr}} @media (max-width:640px){.agenda-semana,.agenda-dias{gap:4px}.agenda .agenda-d{height:auto;aspect-ratio:1;min-height:42px}} /* ---------- EL FORMULARIO EN CUATRO PASOS (16-sep-2026) ---------- La forma viene del panel; la piel es la de esta página. Los campos, los chips y el rosa son los que ya estaban: lo único nuevo es el andamio del paso —la barra, el rótulo y el titular de cada pregunta— y una lista desplegable con la misma cara que los campos de texto. TODO SE MUEVE CON `transform` Y `opacity`, y cuelga de la misma curva que ya usa el sitio (`--ease-out`). Una animación bien hecha que no comparte reloj con sus vecinas es justo lo que hace que una página se sienta a saltos. */ .paso-progreso{height:4px;background:#1a161a;border-radius:2px;overflow:hidden;margin-bottom:22px;max-width:760px} .paso-progreso i{display:block;height:100%;background:var(--rosa);transform-origin:left center;transform:scaleX(.25);transition:transform .52s var(--ease-out)} .paso-rotulo{margin:0 0 10px;color:var(--rosa);font-weight:800;font-size:14px;letter-spacing:.02em} .paso-titulo{margin:0 0 10px;font-size:clamp(27px,2.8vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.03em} .paso-dicho{margin:0;color:#9a929a;font-size:clamp(16px,1.15vw,17px);max-width:52ch} /* `position` + `z-index` a propósito: el botón «Continuar» (`.enlace-grande`) trae z-index:0 y viene DESPUÉS en el marcado, así que sin esto se pintaba ENCIMA de la capa del desplegable, que vive dentro del paso (medido en captura: «Continuar» atravesaba la lista de municipios). */ .paso{display:flex;flex-direction:column;gap:22px;position:relative;z-index:2} /* UN `display` EXPLÍCITO GANA AL `[hidden]` DEL NAVEGADOR, así que sin esta línea los cuatro pasos se pintan a la vez aunque el JS los marque ocultos. El `[hidden]` del user-agent es `display:none` con la especificidad más baja que existe: cualquier regla propia con display lo pisa. Vale para todo elemento al que se le dé display y se oculte por atributo. */ .paso[hidden],.forma[hidden],.forma-ok[hidden],#cita legend[hidden],#cita .cita-dicho[hidden]{display:none} /* LA LISTA, PROPIA DE PUNTA A PUNTA (17-sep-2026). Hasta el 16-sep el campo tenía nuestra piel pero al abrirse el navegador pintaba SU menú —azul de sistema, otra letra—, y Diego lo cazó en la primera captura. Ahora el botón, la capa y las opciones son de esta página (cerebro-interfaces §6, «Select»). El `