/* Portada 2026 de tusgestiones.cl · se genera con armar_wp.py desde rediseno/a-cine.html: no editar a mano. */
@font-face{font-family:'General Sans';src:url('fuentes/gs-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('fuentes/gs-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('fuentes/gs-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* Dirección A · «Cine», versión 3.
   La portada abre dentro de un hogar real; después los hogares quedan a la vista con su precio y quién los muestra,
   Cleo se ve atendiendo (conversación de ejemplo), el equipo, los dueños y el cierre. Papel crema y tinta casi negra (sin borgoña, decisión de Elías del 22-oct);
   el rojo de la llave solo en lo que lleva a Cleo. Una letra: General Sans. */
:root{
  --papel:#FFFEF3; --papel-2:#F2EDE5; --papel-3:#E6DFD4; --tinta:#161514; --tinta-2:#2B2926; --suave:#5E5A55; --claro:#BDB6AC;
  --rojo:#C8212A; --rojo-2:#A61B23;
  --letra:'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --m:clamp(16px, 2.6vw, 40px);
  --t-small:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-body:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead:clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
  --t-head:clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:cubic-bezier(0.33, 1, 0.68, 1);
  --t-press:140ms; --t-hover:180ms; --t-ui:260ms; --t-reveal:850ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.quieto{scroll-behavior:auto}
body{margin:0;background:var(--tinta);color:var(--tinta);font:400 var(--t-body)/1.5 var(--letra);-webkit-font-smoothing:antialiased}
main{position:relative;z-index:2;background:var(--papel)}
a{color:inherit}
img{display:block;max-width:100%}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.boton{display:inline-flex;align-items:center;gap:10px;background:var(--rojo);color:#fff;text-decoration:none;font:500 var(--t-small)/1 var(--letra);padding:15px 22px;border:0;border-radius:999px;cursor:pointer;transition:background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out)}
.boton:hover{background:var(--rojo-2)}
.boton:active{transform:scale(.97)}
.boton svg{width:18px;height:18px;flex:0 0 auto;transition:transform var(--t-ui) var(--ease-out)}
.boton:hover svg{transform:rotate(-12deg) scale(1.08)}
.boton.grande{font-size:var(--t-body);padding:18px 30px}
.boton.tinta{background:var(--tinta);color:var(--papel)}
.boton.tinta:hover{background:var(--tinta-2)}
.boton.papel{background:var(--papel);color:var(--tinta)}
.boton.papel:hover{background:#fff}
.subraya{text-decoration:none;position:relative;padding-bottom:3px}
.subraya::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-ui) var(--ease-out)}
.subraya:hover::after,.subraya:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* ── entrada: el lema se escribe solo y el telón sube ── */
.puerta{position:fixed;inset:0;z-index:50;background:var(--tinta);color:var(--papel);display:grid;place-items:center;cursor:pointer;transition:transform 1050ms var(--ease-in-out)}
.puerta .frase{margin:0;padding:0 24px;max-width:22ch;text-align:center;font-size:clamp(2.1rem,1.2rem + 3vw,3.75rem);font-weight:500;line-height:1.08;letter-spacing:-.03em;transition:transform 1050ms var(--ease-in-out),opacity 600ms ease}
.puerta.abre{transform:translateY(-100%)}
.puerta.abre .frase{transform:translateY(55vh);opacity:0}
.cursor{display:inline-block;width:.07em;height:.95em;margin-left:.06em;background:var(--rojo);vertical-align:-.1em;animation:parpadeo 1s steps(1) infinite}
.escribiendo .cursor{animation:none}
/* títulos que se escriben solos: el texto real queda puesto (y se lee) pero transparente; encima, la copia que se va escribiendo */
.se-escribe{position:relative}
.js:not(.quieto) .se-escribe .fantasma{color:transparent}
.se-escribe .vivo{position:absolute;inset:0;pointer-events:none}
.se-escribe .vivo .cursor{opacity:1}
.se-escribe.escrito .vivo .cursor{animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.portada .zoom{position:absolute;inset:0;transform-origin:50% 45%}
.js:not(.quieto) .portada .zoom{transform:scale(1.14)}
.listo .portada .zoom{transform:none;transition:transform 1900ms var(--ease-soft)}

/* ── barra ── */
.barra{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;gap:28px;padding:22px var(--m);color:var(--papel)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:var(--t-body);letter-spacing:-.01em}
.marca img{width:14px;height:auto;filter:brightness(0) invert(1);transform-origin:50% 22%;transition:transform var(--t-ui) var(--ease-out)}
.marca:hover img{transform:rotate(-90deg)}
.barra nav{margin-left:auto;display:flex;gap:26px;font-size:var(--t-small);font-weight:500}
.js:not(.quieto) .barra > *{opacity:0;transform:translateY(-10px)}
.listo .barra > *{opacity:1!important;transform:none!important;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.listo .barra nav{transition-delay:80ms!important}.listo .barra .boton{transition-delay:160ms!important}

/* ── portada ── */
.portada{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#141312;color:var(--papel)}
.capa{position:absolute;inset:-8% 0 0;will-change:transform}
.portada .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 55%;clip-path:inset(0 0 0 100%);transform:scale(1.08);transition:clip-path 1200ms var(--ease-in-out),transform 6500ms var(--ease-soft)}
.portada .foto.activa{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
.portada .foto.sale{clip-path:inset(0 0 0 0);z-index:0}
.quieto .portada .foto{transition:none}
.portada::after{content:"";position:absolute;inset:auto 0 0;height:66%; /* taste-skill-ignore: velo neutro bajo el texto sobre la foto */ background:linear-gradient(to bottom,rgba(14,13,12,0),rgba(14,13,12,.45) 40%,rgba(14,13,12,.8));pointer-events:none;z-index:2}
.portada::before{content:"";position:absolute;inset:0 0 auto;height:42%; /* taste-skill-ignore: velo arriba para que el menú y el hogar destacado se lean sobre fotos claras */ background:linear-gradient(to bottom,rgba(14,13,12,.62),rgba(14,13,12,.28) 55%,rgba(14,13,12,0));pointer-events:none;z-index:2}
.pie-portada{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--m) 24px}
.sobre{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:14px}
.dicho{margin:0;max-width:30ch;font-size:var(--t-lead);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.enfoco{position:absolute;right:var(--m);top:96px;z-index:3;display:grid;gap:4px;text-align:right;text-decoration:none;font-size:var(--t-body);line-height:1.35;max-width:30ch;color:var(--papel)}
.enfoco b{font-weight:500;font-size:var(--t-body)}
.enfoco .ir{display:inline-block;margin-top:2px}
.enfoco .ir::after{content:" →";display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
.enfoco:hover .ir::after{transform:translateX(4px)}
.enfoco .linea{display:block;overflow:hidden}
.enfoco .linea > span{display:block;transition:transform 520ms var(--ease-out),opacity 520ms var(--ease-out)}
.enfoco.cambia .linea > span{transform:translateY(110%);opacity:0;transition:none}
.js:not(.quieto) .sobre > *,.js:not(.quieto) .enfoco{opacity:0;transform:translateY(16px)}
.listo .enfoco{opacity:1!important;transform:none!important;transition:opacity 800ms var(--ease-out) 650ms,transform 800ms var(--ease-out) 650ms}
.listo .sobre > *{opacity:1!important;transform:none!important;transition:opacity 800ms var(--ease-out) 450ms,transform 800ms var(--ease-out) 450ms}
.nombre{margin:0;font-weight:700;letter-spacing:-.045em;line-height:.8;white-space:nowrap;font-size:13.4vw;transform-origin:0 100%;will-change:transform}
.palabra{display:inline-block;white-space:nowrap}
.letra{display:inline-block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em;vertical-align:bottom}
.letra i{display:inline-block;font-style:normal}
.js:not(.quieto) .nombre .letra i{transform:translateY(108%)}
.listo .nombre .letra i{transform:none!important;transition:transform 1000ms var(--ease-out);transition-delay:calc(var(--k) * 32ms + 120ms)}

/* ── disponibles hoy ── */
.hogares{padding:120px var(--m) 140px}
.cab-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:44px}
.cab-h h2{font-size:var(--t-head);font-weight:700;letter-spacing:-.035em;line-height:.95;margin:0}
.cab-h p{margin:0;font-size:var(--t-lead);line-height:1.3;max-width:34ch;justify-self:end}
.cab-h.solo{grid-template-columns:1fr}
.filtros{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;padding:18px 0 26px;margin-bottom:26px;position:sticky;top:0;z-index:4;background:var(--papel)}
.ops{display:flex;gap:6px;flex-wrap:wrap}
.ops button{border:0;border-radius:999px;background:var(--papel-2);padding:12px 20px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out)}
.ops button:hover{background:var(--papel-3)}
.ops button:active{transform:scale(.97)}
.ops button[aria-pressed=true]{background:var(--tinta);color:var(--papel)}
.elige{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--suave)}
.elige select{appearance:none;-webkit-appearance:none;background:var(--papel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161514' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;border:0;padding:12px 38px 12px 18px;font-size:16px;font-weight:500;color:var(--tinta);cursor:pointer;border-radius:999px}
.elige .et{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cuenta{margin-left:auto;font-size:16px;color:var(--suave);font-variant-numeric:tabular-nums}
.grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px}
.hogar{display:grid;grid-template-rows:auto auto;gap:14px;text-decoration:none;align-content:start}
.hogar .marco{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--papel-2)}
.hogar .marco img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-soft)}
.hogar:hover .marco img{transform:scale(1.04)}
.hogar .marca-estado{position:absolute;left:0;bottom:0;background:var(--papel);color:var(--tinta);font-size:var(--t-small);font-weight:500;padding:8px 12px}
.hogar .texto{display:grid;gap:4px}
.hogar .fila1{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hogar h3{margin:0;font-size:var(--t-body);font-weight:500;line-height:1.3;letter-spacing:-.005em}
.hogar .precio{font-size:var(--t-body);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.hogar .det{font-size:16px;color:#45423E}
.hogar .quien{display:flex;justify-content:flex-end;gap:12px;font-size:16px;margin-top:4px}
.hogar .quien .pide{font-weight:500;color:var(--rojo)}
.hogar .quien .pide::after{content:" →";display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
.hogar:hover .quien .pide::after{transform:translateX(4px)}
.js:not(.quieto) .grilla .hogar{opacity:0;transform:translateY(28px)}
.js:not(.quieto) .grilla .hogar.visto{opacity:1;transform:none;transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:calc(var(--k,0) * 70ms)}
.grilla.cambiando{opacity:.25;transition:opacity 160ms ease}
.vacio{grid-column:1/-1;background:var(--papel-2);border-radius:20px;padding:40px;display:grid;gap:18px;justify-items:start}
.vacio p{margin:0;font-size:var(--t-lead);line-height:1.3;max-width:36ch}
.mas{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:56px}
.mas .boton.tinta{font-size:var(--t-body);padding:18px 26px}

/* ── así te atiende Cleo ── */
.cleo{background:var(--tinta);color:var(--papel);padding:120px var(--m);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center}
.cleo h2{font-size:var(--t-head);font-weight:700;letter-spacing:-.035em;line-height:.95;margin:0 0 26px}
.cleo .lead{margin:0 0 30px;font-size:var(--t-lead);line-height:1.35;color:var(--papel);max-width:30ch}
.cleo ul{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:16px;max-width:44ch}
.cleo li{font-size:var(--t-body);color:var(--papel);padding-left:22px;position:relative}
.cleo li b{color:var(--papel);font-weight:500}
.cleo li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--rojo)}
/* el chat tiene alto fijo, como una pantalla de teléfono: los mensajes entran por abajo y empujan a los anteriores */
.chat{background:#F2EDE5;color:var(--tinta);padding:20px 20px 24px;display:flex;flex-direction:column;height:680px;border-radius:26px;max-width:520px;justify-self:end;width:100%;overflow:hidden}
.chat .hilo{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:0;overflow:hidden;padding-top:8px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40px);mask-image:linear-gradient(to bottom,transparent,#000 40px)} /* taste-skill-ignore: borde que se desvanece arriba, como un chat con más mensajes */
.chat .cab-chat{display:flex;align-items:center;gap:12px;padding-bottom:10px;flex:0 0 auto}
.chat .avatar{width:40px;height:40px;border-radius:50%;background:var(--tinta);display:grid;place-items:center}
.chat .avatar img{width:12px;filter:brightness(0) invert(1)}
.chat .cab-chat b{display:block;font-weight:500}
.chat .cab-chat span{font-size:var(--t-small);color:var(--suave)}
.burbuja{max-width:86%;margin:0;padding:11px 15px;font-size:16px;line-height:1.45;flex:0 0 auto}
.burbuja.cliente{align-self:flex-end;background:#E2DBD0;border-radius:18px 18px 5px 18px}
.burbuja.cleo-b{align-self:flex-start;background:#fff;border-radius:18px 18px 18px 5px}
.burbuja small{display:block;font-size:13px;color:var(--suave);margin-top:4px;text-align:right}
.escribe{align-self:flex-start;background:#fff;border-radius:18px 18px 18px 5px;padding:14px 16px;display:flex;gap:5px;flex:0 0 auto}
.escribe i{width:7px;height:7px;background:var(--suave);border-radius:50%;animation:punto 1s infinite ease-in-out}
.escribe i:nth-child(2){animation-delay:.15s}.escribe i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.js:not(.quieto) .chat .burbuja{display:none}
.js:not(.quieto) .chat .burbuja.ya{display:block}
.js .chat .burbuja.ya,.chat .burbuja.ya{display:block;animation:burbuja 420ms var(--ease-out) both}
@keyframes burbuja{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.nota-chat{font-size:var(--t-small);color:var(--claro);margin:14px 0 0;justify-self:end;max-width:520px;width:100%}

/* ── equipo ── */
.equipo-s{padding:140px var(--m) 120px}
.equipo-s .cab-h{margin-bottom:48px}
.equipo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.equipo figure{margin:0;display:grid;gap:12px;align-content:start}
.equipo .foto-e{overflow:hidden;aspect-ratio:4/5}
.equipo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 900ms var(--ease-soft)}
.equipo figure:hover img{transform:scale(1.04)}
.equipo figcaption{font-size:var(--t-body);font-weight:500}
.js:not(.quieto) .equipo .foto-e{clip-path:inset(100% 0 0 0)}
.js:not(.quieto) .equipo img{transform:scale(1.18)}
.js:not(.quieto) .equipo figcaption{opacity:0;transform:translateY(12px)}
.js:not(.quieto) .equipo.visto .foto-e{clip-path:inset(0 0 0 0);transition:clip-path 1100ms var(--ease-in-out);transition-delay:calc(var(--k) * 110ms)}
.js:not(.quieto) .equipo.visto img{transform:scale(1);transition:transform 1600ms var(--ease-soft);transition-delay:calc(var(--k) * 110ms)}
.js:not(.quieto) .equipo.visto figure:hover img{transform:scale(1.04);transition:transform 900ms var(--ease-soft)}
.js:not(.quieto) .equipo.visto figcaption{opacity:1;transform:none;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--k) * 110ms + 500ms)}

/* ── dueños ── */
.duenos{background:var(--papel-2);padding:110px var(--m);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end}
.duenos h2{font-size:var(--t-head);font-weight:700;letter-spacing:-.035em;line-height:.95;margin:0}
.duenos .der{display:grid;gap:24px;justify-items:start}
.duenos p{margin:0;font-size:var(--t-lead);line-height:1.3}

/* ── cierre: la llave vuelve a girar con el scroll ── */
.cierre{background:var(--rojo);color:#fff;padding:130px var(--m);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:center;overflow:hidden}
.cierre .texto{display:grid;gap:26px;justify-items:start}
.cierre h2{font-size:clamp(2.6rem,1.4rem + 5vw,6.5rem);font-weight:700;letter-spacing:-.04em;line-height:.92;margin:0;max-width:14ch}
.cierre h2 .l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.cierre h2 .l span{display:block}
.js:not(.quieto) .cierre h2 .l span{transform:translateY(105%)}
.js:not(.quieto) .cierre.visto h2 .l span{transform:none;transition:transform 950ms var(--ease-out);transition-delay:calc(var(--k) * 110ms)}
.cierre p{margin:0;max-width:44ch;font-size:var(--t-lead);line-height:1.35}
/* la caja de WhatsApp que se escribe sola: al tocarla, lo escrito va a Cleo */
.redacta{display:flex;align-items:center;gap:10px;width:min(100%,560px);background:#fff;color:var(--tinta);text-decoration:none;border-radius:999px;padding:8px 8px 8px 26px;transition:transform var(--t-press) var(--ease-out)}
.redacta:active{transform:scale(.98)}
.redacta .campo{flex:1;min-width:0;font-size:var(--t-body);line-height:1.3;min-height:1.3em}
.redacta .enviar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--tinta);color:var(--papel);display:grid;place-items:center;transition:transform var(--t-ui) var(--ease-out),background-color var(--t-hover) ease}
.redacta .enviar svg{width:20px;height:20px}
.redacta:hover .enviar{transform:translateX(3px) rotate(-8deg);background:var(--tinta-2)}.llave-grande{width:clamp(90px,12vw,190px);height:auto;transform-origin:50% 22%;filter:brightness(0) invert(1);will-change:transform}

/* ── pie que se destapa ── */
footer{position:sticky;bottom:0;z-index:1;background:var(--tinta);color:var(--papel);min-height:86svh;display:grid;grid-template-rows:auto 1fr auto;padding:44px var(--m) 20px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:var(--t-body)}
.cols p{margin:0;line-height:1.55}
.cols .tenue{color:var(--claro)}
.cols a{color:var(--claro)}
.cols a:hover{color:var(--papel)}
.firma{font-weight:700;letter-spacing:-.05em;line-height:.8;font-size:13.4vw;white-space:nowrap;margin:0}
.js:not(.quieto) .firma .letra i{transform:translateY(108%)}
.js:not(.quieto) footer.visto .firma .letra i{transform:none;transition:transform 900ms var(--ease-out);transition-delay:calc(var(--k) * 28ms)}
.legal{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-small);color:var(--claro);margin-top:18px;flex-wrap:wrap}

/* entradas de títulos y párrafos */
.js:not(.quieto) [data-entra] > *{opacity:0;transform:translateY(24px)}
.js:not(.quieto) [data-entra].visto > *{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.js:not(.quieto) [data-entra].visto > *:nth-child(2){transition-delay:90ms}
.js:not(.quieto) [data-entra].visto > *:nth-child(3){transition-delay:180ms}
.js:not(.quieto) [data-entra].visto > *:nth-child(4){transition-delay:270ms}

.quieto *{animation:none!important;transition:none!important}

@media (max-width:980px){
  .grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleo{grid-template-columns:1fr}
  .chat,.nota-chat{justify-self:start}
}
@media (max-width:760px){
  .barra nav{display:none}
  .barra .boton{margin-left:auto;padding:13px 14px}
  .portada .foto{object-position:35% 50%}
  .sobre{flex-direction:column;align-items:flex-start;gap:18px}
  .enfoco{top:auto;bottom:calc(19vw * 1.6 + 150px);left:16px;right:auto;text-align:left;font-size:var(--t-small)}
  .nombre{font-size:19vw;white-space:normal}
  .hogares{padding:88px 16px 100px}
  .cab-h{grid-template-columns:1fr}
  .cab-h p{justify-self:start}
  .filtros{position:static;gap:8px;padding:0 0 18px}
  .ops{width:100%;gap:4px}
  .ops button{flex:1 1 0;padding:12px 6px;font-size:15px}
  .elige{flex:1 1 calc(50% - 4px);min-width:0}
  .elige .et{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .elige select{width:100%}
  .cuenta{margin-left:0;width:100%;margin-top:6px}
  .grilla{grid-template-columns:1fr;gap:40px}
  .cleo{padding:96px 16px}
  .chat{height:560px;padding:16px 14px 18px}
  .redacta{padding-left:20px;border-radius:30px}
  .redacta .campo{font-size:16px}
  .redacta .enviar{width:46px;height:46px}
  .equipo-s{padding:96px 16px 88px}
  .equipo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duenos{grid-template-columns:1fr;padding:88px 16px}
  .cierre{grid-template-columns:1fr;padding:96px 16px}
  .llave-grande{justify-self:end;margin-top:-10px}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .firma{font-size:19vw;white-space:normal}
}

/* ── solo en la web real ── */
.hogar{position:relative}
.hogar h3 a.ver{text-decoration:none;color:inherit}
.hogar h3 a.ver::after{content:"";position:absolute;inset:0;z-index:1}
.hogar .quien .pide{position:relative;z-index:2;text-decoration:none}
.hogar:focus-within{outline:3px solid var(--rojo);outline-offset:6px}
.hogar h3 a.ver:focus-visible{outline:none}
.equipo figure a{display:grid;gap:12px;text-decoration:none;color:inherit}
.enlaces-pie{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:var(--t-small);margin-top:28px}
.enlaces-pie a{color:var(--claro);text-decoration:none}
.enlaces-pie a:hover{color:var(--papel)}
.boton-menu{display:none;margin-left:auto;background:var(--papel);color:var(--tinta);border:0;border-radius:999px;padding:13px 18px;font:500 var(--t-small)/1 var(--letra);cursor:pointer}
.menu-cel{position:fixed;inset:0;z-index:40;background:var(--tinta);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:96px 24px 40px;opacity:0;visibility:hidden;transition:opacity var(--t-ui) ease,visibility 0s linear var(--t-ui)}
.menu-cel.abierto{opacity:1;visibility:visible;transition:opacity var(--t-ui) ease}
.menu-cel a{color:var(--papel);text-decoration:none;font-size:clamp(1.75rem,1.2rem + 3vw,2.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.barra{z-index:45}
@media (max-width:760px){
  .boton-menu{display:inline-flex}
  .barra .boton{margin-left:0}
  .barra{gap:10px}
}
/* las fotos de la portada se alejan sin parar (Elías, 22-oct: «que esa animación de zoom out nunca pare»):
   cada foto entra y se aleja durante todo su turno, y sigue alejándose mientras la cortina trae la siguiente */
/* sin !important en transform: una regla importante le gana a la animación y la foto queda quieta */
.portada .foto{transform:none;transition:clip-path 1200ms var(--ease-in-out)!important}
.portada .foto.activa{transform:none}
@keyframes tg-alejar{from{transform:scale(1.16)}to{transform:scale(1)}}
.portada .foto.activa,.portada .foto.sale{animation:tg-alejar 8200ms linear both}
.quieto .portada .foto{animation:none!important}
/* cada foto trae su propio encuadre (qué parte se ve cuando la pantalla la recorta) y el punto hacia donde se aleja el zoom,
   uno para computador y otro para celular (Elías, 23-oct: «el zoom a veces está enfocado en una parte que no sirve») */
.portada .foto{object-position:var(--enc,45% 55%);transform-origin:var(--zoom,50% 50%)}
@media (max-width:760px){ .portada .foto{object-position:var(--enc-cel,35% 50%);transform-origin:var(--zoom-cel,50% 50%)} }

/* filtros nuevos: buscador por palabra y enlace al catálogo con más filtros */
.busca{display:flex;align-items:center;flex:1 1 240px;min-width:200px}
.busca input{width:100%;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--papel-2);padding:12px 18px;font:500 16px/1.2 var(--letra);color:var(--tinta)}
.busca input::placeholder{color:var(--suave);font-weight:400}
.busca .et{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cuenta:empty{display:none}
.mas-izq{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.mas-izq .catalogo{font-size:16px;font-weight:500;color:var(--tinta)}
@media (max-width:760px){ .busca{flex:1 1 100%} }

/* menú flotante que acompaña al bajar: entra desde arriba y la píldora se desliza a la sección actual */
.nav-flota{position:fixed;top:14px;left:50%;z-index:44;display:flex;align-items:center;gap:6px;padding:6px;background:rgba(22,21,20,.92);color:var(--papel);border-radius:999px;transform:translate(-50%,-140%);opacity:0;pointer-events:none;transition:transform 520ms var(--ease-out),opacity 320ms ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* taste-skill-ignore: fondo translúcido del menú flotante */
.nav-flota.visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.nav-flota a{color:var(--papel);text-decoration:none}
.nav-flota .arriba{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--papel);transition:transform var(--t-ui) var(--ease-out)}
.nav-flota .arriba img{width:11px;height:auto}
.nav-flota .arriba:hover{transform:rotate(-12deg) scale(1.06)}
.nav-flota .enlaces{position:relative;display:flex;gap:2px}
.nav-flota .enlaces a{position:relative;z-index:1;padding:11px 16px;font:500 15px/1 var(--letra);border-radius:999px;transition:color var(--t-ui) ease}
.nav-flota .enlaces a.activo{color:var(--tinta)}
.nav-flota .indicador{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--papel);opacity:0;transition:transform 480ms var(--ease-out),width 480ms var(--ease-out),opacity 240ms ease}
.nav-flota .wsp{padding:11px 18px;border-radius:999px;background:var(--rojo);font:500 15px/1 var(--letra);transition:background-color var(--t-hover) ease}
.nav-flota .wsp:hover{background:var(--rojo-2)}
@media (max-width:760px){
  .nav-flota{top:auto;bottom:16px;transform:translate(-50%,160%);max-width:calc(100% - 24px)}
  .nav-flota.visible{transform:translate(-50%,0)}
  .nav-flota .enlaces a{padding:10px 10px;font-size:14px}
  .nav-flota .enlaces a[data-sec=duenos]{display:none}
  .nav-flota .wsp{padding:10px 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){ .nav-flota,.nav-flota .indicador{transition:none} }

/* el botón flotante de Cleo que imprime la web (tg_cleo_flotante): sigue en la página (el vigía de puertas lo exige),
   pero se muestra solo entre la portada y el cierre, donde no tapa el nombre ni la caja de WhatsApp */
.tg-cleo-flot{z-index:30!important;transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out)!important}
.js .tg-cleo-flot{opacity:0!important;transform:translateY(12px)!important;pointer-events:none!important}
.js.flot-visible .tg-cleo-flot{opacity:1!important;transform:none!important;pointer-events:auto!important}
@media (max-width:760px){ .js.flot-visible .tg-cleo-flot{opacity:0!important;pointer-events:none!important} }

/* la entrada (23-oct): una barra de búsqueda que escribe el lema y después el nombre grande, centrado, que sale de detrás
   de la llave (Elías: «transformaría el texto de escritura en un search… y luego que salga el logo de Tus Gestiones») */
.puerta>.busca-entrada,.puerta>.logo-entrada{grid-area:1/1}
.busca-entrada{display:flex;align-items:center;gap:16px;width:min(660px,calc(100vw - 32px));padding:12px 12px 12px 24px;border-radius:999px;
  background:var(--papel);color:var(--tinta);opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity 500ms ease,transform 700ms var(--ease-out),filter 520ms ease}
.ve-barra .busca-entrada{opacity:1;transform:none}
.busca-entrada .llave-chica{width:12px;height:auto;flex:0 0 auto}
.busca-entrada .texto{flex:1;min-width:0;font:500 clamp(1rem,.85rem + .7vw,1.375rem)/1.2 var(--letra);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.busca-entrada .cursor{display:inline-block;width:2px;height:1.1em;margin-left:2px;background:var(--rojo);vertical-align:-.18em;animation:tg-parpadeo-e 1s steps(1) infinite}
@keyframes tg-parpadeo-e{50%{opacity:0}}
.enviar-entrada{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--papel-3);color:var(--tinta-2);transition:background-color 220ms ease,color 220ms ease}
.enviado .enviar-entrada{background:var(--rojo);color:#fff;animation:tg-apretar 380ms var(--ease-out)}
@keyframes tg-apretar{40%{transform:scale(.84)}100%{transform:none}}
.ve-llave .busca-entrada{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(6px)}

.logo-entrada{display:flex;align-items:center;column-gap:clamp(14px,2vw,30px);transform:translateX(var(--corre,0px));pointer-events:none}
/* la llave sube y se descubre de abajo hacia arriba, como saliendo de una ranura, y le pasa un brillo suave
   (el giro de antes «se ve muy barato», Elías 23-oct) */
.llave-caja{position:relative;display:block;clip-path:inset(100% -20% -20% -20%);transform:translateY(28px)}
.llave-grande-entrada{display:block;height:clamp(64px,8.5vw,116px);width:auto}
.llave-caja::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,254,243,.8) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:100% 0;
  -webkit-mask:var(--llave-mascara) center/100% 100% no-repeat;mask:var(--llave-mascara) center/100% 100% no-repeat}
.ve-llave .llave-caja{clip-path:inset(-20% -20% -20% -20%);transform:none;transition:clip-path 900ms var(--ease-in-out),transform 1100ms var(--ease-out)}
.ve-llave .llave-caja::after{animation:tg-brillo 950ms ease 650ms forwards}
/* el destello corre por dentro de la llave: la máscara (la misma imagen) queda quieta y se mueve solo el degradé */
@keyframes tg-brillo{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
.nombre-entrada{display:block;clip-path:inset(-15% 100% -15% 0);opacity:0} /* opacidad 0: sin ella quedaba una rayita del nombre junto a la llave */
.nombre-entrada span{display:block;font:700 clamp(2.6rem,1.1rem + 6.4vw,7.25rem)/1 var(--letra);letter-spacing:-.045em;color:var(--papel);white-space:nowrap;transform:translateX(-40%)}
.ve-nombre .logo-entrada{transform:none;transition:transform 1050ms var(--ease-in-out)}
.ve-nombre .nombre-entrada{clip-path:inset(-15% -2% -15% 0);opacity:1;transition:clip-path 1050ms var(--ease-in-out),opacity 120ms ease}
.ve-nombre .nombre-entrada span{transform:none;transition:transform 1150ms var(--ease-out)}
.puerta.abre .logo-entrada,.puerta.abre .busca-entrada{transform:translateY(55vh);opacity:0;transition:transform 1050ms var(--ease-in-out),opacity 600ms ease}