/* =========================================================
   MAQUETA · versión nueva de la web
   Todo lo nuevo vive acá, encima de styles.css, para que se vea
   de un vistazo qué cambió respecto de lo publicado:
   · el hero muestra el Home REAL de la V4 (congelado en HTML)
   · los mockups de las secciones son capturas reales de la V4
   · los tres forms pasan a ser botones que abren un solo panel
   ========================================================= */

/* ---------- hero: el celu con el Home de la V4 ---------- */
/* La V4 está diseñada a 390px. La pantalla del celu mide 282 (300 - 2x9 de marco):
   se la achica a 282/390 = 0,7231. Con transform y NO con zoom: con zoom la letra
   se redondea a otro tamaño, el texto no achica parejo y los renglones justos
   ("Búsquedas activas", "Cargar paso a paso") se partían en dos.
   Como transform no achica la caja, el alto de la pantalla va fijo:
   18px de franja arriba + 844 x 0,7231. */
.hero__shot--v4 .phone__screen--v4{height:628px;display:block;padding-top:18px;background:#dce8ff}
.hero__shot--v4 .v4-congelada{transform:scale(.7231);transform-origin:0 0}
/* Aislamiento: el congelado trae en línea TODO lo que no es un valor por defecto.
   Sin este reset, las reglas de la landing (h1, p, img, button…) completaban lo que
   falta y desarmaban la pantalla. Los íconos quedan afuera: sus atributos fill y
   stroke pierden contra cualquier regla de CSS, incluido un all:unset. */
.v4-congelada *:not(svg):not(svg *){all:unset;box-sizing:border-box}
.hero__shot--v4 .phone__screen--v4 .v4-congelada button{cursor:default}

/* la píldora con la suma: a la derecha, a la altura de las búsquedas activas */
.hero__shot--v4 .sat--aviso{top:auto;bottom:43%;right:-15%}
/* el mazo: a la izquierda, montado sobre el borde del celu, a la altura de las
   búsquedas activas. Son cuatro cards reales apiladas; maqueta.js las va pasando
   como en la app (la de arriba sale volando y queda la siguiente). */
.hero__shot--v4 .sat--mazo{top:34%;left:-48%;width:56%}
.hero__shot--v4 .sat--mazo img.sat__mazo{position:absolute;left:0;top:0;display:block;width:100%;height:auto;
  border-radius:16px;box-shadow:0 26px 50px -18px rgba(10,18,38,.7);
  opacity:0;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease}
/* la primera es la que le da el alto al satélite */
.hero__shot--v4 .sat--mazo img.sat__mazo:first-of-type{position:relative}
.hero__shot--v4 .sat--mazo img.sat__mazo.es-top{opacity:1;z-index:3}
.hero__shot--v4 .sat--mazo img.sat__mazo.es-sig{opacity:1;z-index:2}
.hero__shot--v4 .sat--mazo img.sat__mazo.se-va{opacity:0;z-index:4;transform:translate(-38%,4%) rotate(-11deg)}
.hero__shot--v4 .sat--mazo img.sat__mazo.se-va.a-la-der{transform:translate(38%,4%) rotate(11deg)}
/* sin JS o con movimiento reducido: la primera card, quieta */
.hero__shot--v4 .sat--mazo:not(.mazo-vivo) img.sat__mazo:first-of-type{opacity:1}

/* el globo de la campanita y los "por revisar" que suben */
[data-coreo] [data-dot]{transition:opacity .3s ease,scale .4s cubic-bezier(.3,1.6,.5,1)}
[data-coreo] [data-dot].apagado{opacity:0;scale:.3}
.hero__shot--v4 [data-rev]{display:inline-block;transition:color .2s ease,scale .2s ease;transform-origin:center}
.hero__shot--v4 [data-rev].sube{color:#9fe3bf;scale:1.4;font-weight:800}

/* el CTA y "ver cómo funciona" en una fila; la nota debajo */
.hero-ctas--pre{flex-direction:row;align-items:center;gap:22px}
.hero__nota{flex-basis:100%;margin-top:-2px}

/* ---------- los celus con capturas reales ---------- */
.capfon{position:relative;width:224px;padding:7px;background:#0b1020;border-radius:36px;
  box-shadow:0 34px 64px -30px rgba(10,18,38,.62),0 6px 18px rgba(0,0,0,.12)}
.capfon img{display:block;width:100%;height:auto;border-radius:29px}
/* las capturas no tienen barra de estado: un notch taparía el encabezado de la app */
.capfon__notch{display:none}

/* en los pasos el celu se corta contra el borde de abajo del recuadro: se ve la
   parte de arriba de la pantalla, que es donde está lo que cuenta cada paso */
.slide__viz--cap{padding:0;min-height:0;height:360px;position:relative}
.capwin{position:absolute;inset:0}
.slide__viz--cap .capfon{position:absolute;left:50%;top:26px;translate:-50% 0;width:252px;height:334px;
  overflow:hidden;border-radius:36px 36px 0 0;padding-bottom:0}
.slide__viz--cap .capfon img{border-radius:29px 29px 0 0}

/* lo que se sale del recuadro */
.capfloat{position:absolute;z-index:3}
.capfloat--img{display:block;height:auto;filter:drop-shadow(0 20px 26px rgba(10,18,38,.28))}
.capfloat--abajo{width:260px;right:-26px;bottom:60px}
.capfloat--card{width:168px;right:-30px;bottom:22px}
.capchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:100px;
  padding:10px 15px;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;
  right:-24px;bottom:74px;box-shadow:0 22px 46px -18px rgba(10,18,38,.55)}
.capchip .i{width:15px;height:15px;color:var(--azul)}
.capchip--si{color:var(--success)}
.capchip--si .i{color:var(--success)}

/* del otro lado: las dos pantallas del cliente, encimadas */
.cliente__shot--cap{position:relative;height:500px;max-width:440px;width:100%}
.cliente__shot--cap .capfon{position:absolute;width:212px}
.capfon--atras{left:4%;top:34px;rotate:-5deg}
.capfon--frente{right:4%;top:0;rotate:3deg}

/* sumá tus propiedades: la pantalla "Conectá tus propiedades" */
.red__viz--cap .capfon{width:230px;margin:0 auto}

/* el cierre ya no tiene form: el botón va solo */
.close__cta{margin:6px 0 30px}

/* ---------- el panel del form ---------- */
/* en escritorio es un modal centrado; en el celu sube desde abajo como Dudas frecuentes */
.form-panel{place-items:center;padding:20px}
.form-panel__in{max-width:500px;background:#fff;border-radius:var(--r-block);padding:26px 28px 28px}
.form-panel__lead{color:var(--cuerpo);font-size:15px;margin:0 0 20px}

/* los campos calcan "Dejanos tus datos" de la V4: etiqueta chica en mayúsculas,
   campo en píldora con el ícono a la izquierda */
.dform{display:flex;flex-direction:column;gap:14px}
.dform[hidden]{display:none}
.dform__f{display:flex;flex-direction:column;gap:6px}
.dform__lab{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.dform__in{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;
  border:1.5px solid #c8d3f0;border-radius:100px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease}
.dform__in:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(35,86,201,.12)}
.dform__in .i{width:18px;height:18px;color:#8a93a8;flex:none}
.dform__in input,.dform__in select{border:0;outline:0;background:transparent;font:inherit;
  font-size:15px;color:var(--tinta);width:100%;min-width:0}
.dform__in input::placeholder{color:#9aa1b2}
/* el prefijo del país va aparte del número */
.dform__tel{display:grid;grid-template-columns:auto 1fr;gap:8px}
.dform__pre{padding:0 8px 0 14px}
.dform__pre select{width:auto;cursor:pointer;font-weight:500}
.dform__hint{font-size:12.5px;color:var(--sec);padding-left:4px}
.dform__f.mal .dform__in{border-color:var(--danger);box-shadow:0 0 0 4px rgba(224,85,69,.12)}
.dform__send{margin-top:6px;width:100%;justify-content:center}
.dform__send[disabled]{opacity:.6;cursor:progress}
.dform__legal{text-align:center;color:var(--sec)}
.dform__legal a{color:var(--azul)}
.dform__ok{text-align:center;padding:18px 0 8px}
.dform__ok[hidden]{display:none}
.dform__okic{width:58px;height:58px;border-radius:50%;background:var(--success-soft);color:var(--success);
  display:grid;place-items:center;margin:0 auto 14px}
.dform__okic .i{width:26px;height:26px}
.dform__ok b{display:block;font-size:22px;font-weight:600;color:var(--navy)}
.dform__ok p{color:var(--cuerpo);margin-top:6px}

/* ---------- celu / tablet ---------- */
@media (max-width:859px){
  .hero-ctas--pre{flex-direction:column;align-items:stretch;gap:12px}
  .hero-ctas--pre .btn{justify-content:center}
  .hero__nota{text-align:center;margin-top:0}
  /* como hoy: en el celu queda sólo la píldora; la card taparía la pantalla */
  .hero__shot--v4 .sat--aviso{right:-4%;bottom:30%;top:auto}
  .slide__viz--cap{height:300px}
  .slide__viz--cap .capfon{width:204px;height:274px}
  .capfloat--abajo{width:230px;right:-8px;bottom:46px}
  .capfloat--card{width:124px;right:-8px;bottom:14px}
  .capchip{right:-8px;bottom:56px}
  .cliente__shot--cap{height:430px;margin-left:auto;margin-right:auto}
  .cliente__shot--cap .capfon{width:184px}
  .red__viz--cap .capfon{width:210px}
  .form-panel{place-items:end center;padding:0}
  .form-panel__in{border-radius:var(--r-block) var(--r-block) 0 0;padding:22px 20px 26px;max-height:92vh}
}
@media (max-width:381px){
  .cliente__shot--cap .capfon{width:166px}
}

/* =========================================================
   Ronda 3 · "Del otro lado" = portada + abanico (board 2, opción B)
   ========================================================= */
.cliente__shot--abanico{display:grid;place-items:center}
.abanico{position:relative;width:440px;height:550px;flex:none}
/* la portada calca la de la V4: navy con resplandores, el nombre del asesor en el medio */
.portada{position:absolute;left:10px;top:30px;width:230px;height:430px;border-radius:30px;padding:26px 18px;
  color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(80% 50% at 20% 40%,#2c4fb8 0%,rgba(44,79,184,0) 70%),
             radial-gradient(60% 40% at 90% 10%,#3d5fc4 0%,rgba(61,95,196,0) 70%),#0f1d4a;
  box-shadow:0 40px 70px -30px rgba(10,18,38,.7)}
.portada__k{font-size:7.5px;letter-spacing:.14em;opacity:.75;font-weight:600;white-space:nowrap}
.portada__n{margin-top:120px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);
  border-radius:10px;padding:8px 14px;font-size:12px;font-weight:600}
.portada b{display:block;font-size:17px;font-weight:500;margin-top:18px;line-height:1.3}
.portada small{font-size:11px;opacity:.7;margin-top:6px}
.portada__sw{margin-top:auto;font-size:8px;letter-spacing:.2em;opacity:.7;font-weight:600}
.fan{position:absolute;width:176px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 50px -22px rgba(10,18,38,.6);animation:flota 7s ease-in-out infinite}
.fan img{width:100%;height:112px;object-fit:cover;display:block}
.fan__b{padding:10px 12px 0}
.fan__b b{display:block;font-size:14px;color:var(--tinta)}
.fan__b small{display:block;font-size:10.5px;color:var(--sec)}
.fan__v{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linea);margin-top:10px;font-size:10.5px;font-weight:600}
.fan__v span{padding:8px 0;text-align:center;color:var(--sec)}
.fan__v .fan__si{border-left:1px solid var(--linea);color:var(--azul)}
.fan__v .fan__si.is-on{background:var(--success-soft);color:var(--success)}
/* rotate suelto: no pisa el transform de flota */
.fan--1{left:200px;top:62px;rotate:6deg}
.fan--2{left:236px;top:206px;rotate:-3deg;z-index:2;animation-delay:-2.4s}
.fan--3{left:190px;top:352px;rotate:4deg;animation-delay:-4.6s}

/* =========================================================
   Ronda 3 · "Sumá tus propiedades" = de tu web a la red (board 2, opción C)
   ========================================================= */
.red__viz--web{display:flex;justify-content:center}
.web2red{position:relative;width:470px;height:470px;flex:none}
.navw{position:absolute;left:0;top:30px;width:300px;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(10,18,38,.55)}
.navw__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f1f3f9;border-bottom:1px solid var(--linea)}
.navw__bar i{width:8px;height:8px;border-radius:50%;background:#d5dae6}
.navw__url{margin-left:8px;flex:1;background:#fff;border-radius:100px;padding:4px 10px;font-size:10px;color:var(--sec)}
.navw__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;position:relative}
.navw__grid div{border-radius:8px;overflow:hidden;background:#eef0f6}
.navw__grid img{width:100%;height:58px;object-fit:cover;display:block}
.navw__grid span{display:block;height:5px;margin:6px 6px 3px;border-radius:3px;background:#dfe3ee}
.navw__grid span+span{width:55%;margin-top:0;margin-bottom:7px}
/* la IA recorre la web: una línea de luz que baja y sube */
.scan{position:absolute;left:0;right:0;top:8%;height:2px;
  background:linear-gradient(90deg,rgba(35,86,201,0),#2356c9,rgba(35,86,201,0));
  box-shadow:0 0 16px 4px rgba(35,86,201,.35);animation:escanea 3.6s ease-in-out infinite alternate}
@keyframes escanea{to{top:90%}}
.ia{position:absolute;left:190px;top:4px;display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;
  border-radius:100px;padding:8px 14px;font-size:12px;font-weight:600;z-index:3;white-space:nowrap}
.ia .i{width:14px;height:14px;color:#ffd166}
.mazo2{position:absolute;right:0;bottom:10px;width:190px;z-index:2;animation:flota 7s ease-in-out infinite;animation-delay:-3s}
.mazo2 img{width:100%;display:block;border-radius:16px;box-shadow:0 30px 60px -24px rgba(10,18,38,.7)}
.flechita{position:absolute;left:250px;top:250px;width:90px;height:90px}
.fchip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:100px;
  padding:9px 14px;font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;
  box-shadow:0 20px 40px -18px rgba(10,18,38,.55)}
.fchip .i{width:14px;height:14px;color:var(--azul)}
.fchip--si,.fchip--si .i{color:var(--success)}
.web2red .fchip{left:30px;bottom:30px}

@media (prefers-reduced-motion:reduce){
  .fan,.mazo2,.scan{animation:none}
}
/* celu: las dos composiciones están dibujadas a ~450px; se achican enteras */
@media (max-width:520px){
  .abanico{zoom:.76}
  .web2red{zoom:.72}
}
@media (max-width:381px){
  .abanico{zoom:.7}
  .web2red{zoom:.66}
}

/* Banner de cifras: sin el "+1.200" cada mitad repite las 2 frases 3 veces y mide el doble;
   68s en vez de 34s para que corra a la misma velocidad que antes */
.marquee__track{animation-duration:68s}

/* Form: selector "Trabajás…" (board 3, opción B) */
.dform__trabaja{border:0;margin:0;padding:0;min-width:0}
.dform__trabaja legend{padding:0;margin-bottom:6px}
.dform__f[hidden]{display:none}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#f1f3f9;border-radius:12px;padding:4px;gap:4px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--sec);transition:background .15s,color .15s,box-shadow .15s}
.seg .i{width:16px;height:16px;flex:none}
.seg input:checked+span{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(10,18,38,.1)}
.seg input:focus-visible+span{box-shadow:0 0 0 3px rgba(35,86,201,.35)}
@media (max-width:380px){.seg span{font-size:13px;gap:6px}}