/* ============================================================
   Landing — Grupo Xioon
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  padding-block:clamp(64px,10vw,124px) clamp(48px,7vw,88px);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -55% 45%;
  height:70vh;
  background:radial-gradient(ellipse at center, rgba(231,170,58,.26), rgba(231,170,58,0) 62%);
  pointer-events:none;
}
.hero > .wrap{position:relative;z-index:1}

/* ---------- Hero de video de fondo (páginas internas: Nosotros) ---------- */
.nosotros-hero{position:relative;height:min(72vh,640px);min-height:340px;overflow:hidden;background:var(--navy)}
.nosotros-hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nosotros-hero__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,37,61,.76) 0%, rgba(21,37,61,.72) 42%, rgba(21,37,61,.80) 100%);
}
.nosotros-hero__txt{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;color:var(--bone)}
.nosotros-hero__txt .idx{color:var(--gold-l)}
/* El .lead heredaba el gris azulado de fondo claro (169,182,201): sobre
   video daba 1,23 de contraste. Sobre oscuro va el hueso, como en el
   resto del sitio. */
.nosotros-hero__txt .lead,
.nosotros-hero__txt .p{color:var(--bone)}
.nosotros-hero__txt h1{color:var(--bone);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero__eyebrow{
  margin:0 0 clamp(18px,2.4vw,26px);
  font-size:var(--ui-base);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--gold-d);
}
.hero__h{max-width:15ch}
.ink-gold{
  /* Degradado propio, más claro que --gold-grad (el de botones): ese
     termina en un dorado oscuro (#a05516) que sobre el video queda casi
     ilegible cuando el recorte de texto cae en esa punta del degradado.
     Reportado de nuevo como "muy oscuro" en los títulos del hero — se
     quitó el tono más oscuro (#d99a2b) del degradado, se subió el punto
     medio y se acortó el recorrido para que la mayor parte del texto
     caiga en la mitad clara. */
  background:linear-gradient(135deg,#fff1c2,#ffd873 65%,#f0b429);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Nunca heredar el text-shadow del padre: con relleno transparente +
     background-clip:text, una sombra oscura fuerte se ve completa por
     detrás del degradado y lo tapa (se ve casi negro en vez de dorado). */
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.hero__lead{margin-top:clamp(22px,3vw,32px);max-width:56ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px)}

.hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,36px);
  margin-top:clamp(38px,5vw,64px);padding-top:clamp(26px,3vw,36px);
  border-top:var(--bw) solid var(--navy);
}
@media (max-width:760px){.hero__stats{grid-template-columns:1fr 1fr;row-gap:28px}}

/* ---------- Hero de video corporativo: reproducción automática en loop,
   sin scroll-scrubbing — un video real de la empresa (canal de YouTube),
   no un motion graphic sintético. ---------- */
.hero-video{
  position:relative;height:min(88vh,900px);min-height:480px;
  margin-top:-70px;padding-top:110px;
  background:var(--navy);overflow:hidden;
  display:flex;align-items:center;
}
.hero-video__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Capa oscura para que el texto se lea sobre cualquier fotograma — más
   fuerte a la izquierda (donde vive el texto) y pareja verticalmente,
   porque el video real (cielo, campos, render blanco) es mucho más claro
   que el motion graphic oscuro que tenía antes. */
.hero-video::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(21,37,61,.66) 0%, rgba(21,37,61,.48) 38%, rgba(21,37,61,.18) 66%, rgba(21,37,61,.08) 100%),
    linear-gradient(180deg, rgba(21,37,61,.3) 0%, rgba(21,37,61,.12) 30%, rgba(21,37,61,.12) 62%, rgba(21,37,61,.5) 100%);
}
/* Grado de color de marca sobre el video, mezclado con "overlay" para
   enriquecerlo en vez de taparlo. */
.hero-video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.85;
  background:
    radial-gradient(46% 60% at 4% 0%, rgba(243,238,153,.85), transparent 68%),
    radial-gradient(50% 65% at 100% 100%, rgba(21,37,61,.9), transparent 70%);
  animation:visorglow 9s ease-in-out infinite;
}
@keyframes visorglow{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-video::after{animation:none}}

/* Esquinas tipo visor técnico, con un pulso sutil de brillo dorado */
.visor__c{
  position:absolute;z-index:2;width:26px;height:26px;
  border:2px solid rgba(243,238,153,.9);pointer-events:none;
  animation:cornerpulse 3.2s ease-in-out infinite;
}
.visor__c--tl{top:28px;left:28px;border-right:0;border-bottom:0;animation-delay:0s}
.visor__c--tr{top:28px;right:28px;border-left:0;border-bottom:0;animation-delay:.4s}
.visor__c--bl{bottom:28px;left:28px;border-right:0;border-top:0;animation-delay:.8s}
.visor__c--br{bottom:28px;right:28px;border-left:0;border-top:0;animation-delay:1.2s}
@keyframes cornerpulse{
  0%,100%{border-color:rgba(243,238,153,.75);filter:drop-shadow(0 0 0 rgba(243,238,153,0))}
  50%{border-color:rgba(243,238,153,1);filter:drop-shadow(0 0 7px rgba(243,238,153,.85))}
}
@media (prefers-reduced-motion:reduce){.visor__c{animation:none}}

.hero-video__txt{position:relative;z-index:2;max-width:60ch}

@media (max-width:760px){
  .hero-video{height:min(76vh,720px)}
}

/* ---------- Hero reducido: CTA + cifras, justo debajo de la presentación ---------- */
.hero--after{
  padding-block:clamp(48px,7vw,80px) clamp(40px,6vw,64px);
  position:relative;
  background:linear-gradient(180deg, var(--navy) 0%, var(--bg) 90px);
}
.hero--after .hero__cta{margin-top:0;justify-content:center}
.hero--after .hero__stats{justify-items:center;text-align:center}
@media (max-width:760px){.hero--after .hero__cta{justify-content:flex-start}.hero--after .hero__stats{justify-items:start;text-align:left}}

/* ---------- Tarjetas de proyecto ---------- */
/* ---------- Tarjetas de proyecto: foto real primero, denso, sin
   espacios muertos — etiqueta de color + badge de estado sobre la
   imagen, specs comprimidas en una sola línea. ---------- */
.proyectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2.4vw,26px)}
.proy{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:var(--bw) solid var(--navy);box-shadow:var(--shadow-hard);
  transition:box-shadow .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1);
}
.proy:hover{box-shadow:var(--shadow-hard-gold);transform:translateY(-6px)}
.proy:hover .proy__ph{transform:scale(1.04)}
.proy__ph{
  position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.proy__ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(21,37,61,0) 28%, rgba(21,37,61,.6) 64%, rgba(21,37,61,.94) 100%);
}
.proy__label{
  position:absolute;top:16px;left:16px;z-index:1;
  background:var(--navy);color:var(--bone);font-weight:900;font-size:var(--ui-xl);letter-spacing:-.01em;
  padding:8px 16px;border-radius:var(--r-pill);border:2px solid var(--gold);
  box-shadow:var(--shadow-hard-sm);
}
.proy__estado{position:absolute;top:16px;right:16px;z-index:1;background:var(--bg)}
.proy__ov{position:relative;z-index:1;padding:clamp(16px,2.4vw,22px)}
.proy__loc{font-size:var(--ui-sm);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-l)}
.proy__stats{margin-top:6px;font-size:var(--ui-lg);font-weight:600;color:var(--bone)}
.proy__stats b{font-weight:900;color:var(--gold-l)}
.proy__cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media (prefers-reduced-motion:reduce){.proy__ph{transition:none}}

/* ---------- Cabecera de sección ---------- */
.sec__head{max-width:44ch}
.idx{text-transform:uppercase;letter-spacing:.06em}
.idx--gold{color:var(--gold-l)}

/* ---------- Pilares, tarjetas con marco grueso y leve giro de recorte ---------- */
.pilar{
  border:var(--bw) solid var(--navy);border-radius:var(--r);
  padding:22px clamp(18px,2.2vw,26px);background:var(--bg);
  box-shadow:var(--shadow-hard-sm);
  transition:box-shadow .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
}
.pilar:nth-child(2){transform:rotate(-1.2deg)}
.pilar:nth-child(3){transform:rotate(1.2deg)}
.pilar:hover{box-shadow:var(--shadow-hard-gold);transform:translateY(-6px) rotate(0)}
.pilar__n{
  display:inline-block;font-size:1.5rem;font-weight:900;color:var(--gold-d);
  margin-bottom:10px;letter-spacing:-.02em;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.pilar:hover .pilar__n{transform:translateX(4px)}
.pilar p{font-size:var(--ui-lg)}

/* ---------- Anuncios ---------- */
.anuncio{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:24px}
@media (max-width:760px){.anuncio{flex-direction:column;align-items:flex-start}}
.anuncio--foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(28px,4vw,52px)}
@media (max-width:760px){.anuncio--foto{grid-template-columns:1fr}}
.anuncio__foto{position:relative}
.anuncio__foto img{
  width:100%;display:block;border-radius:var(--r);
  border:var(--bw) solid var(--navy);box-shadow:0 20px 44px -14px rgba(21,37,61,.5);
  aspect-ratio:16/10;object-fit:cover;
}
.anuncio__stamp{position:absolute;left:-14px;bottom:-16px;transform:rotate(-6deg)}
.anuncio__pills{display:flex;flex-wrap:wrap;gap:10px}
.pill--anuncio{
  border-color:#231603;color:#231603;background:rgba(21,37,61,.06);
  font-size:var(--ui-md);padding:7px 15px;
}

/* ---------- Banda editorial ---------- */
.band--edit{padding-block:clamp(56px,8vw,104px)}
.edit{max-width:24ch}
.edit__q{
  margin:18px 0 0;font-size:var(--t-2);font-weight:800;
  letter-spacing:-.032em;line-height:1.08;color:var(--on-navy);max-width:20ch;
}
.edit__q em{font-style:normal;color:var(--gold-l)}
.edit__a{
  margin:22px 0 0;color:var(--on-navy-2);font-size:var(--ui-lg);max-width:52ch;
}
@media (min-width:900px){
  .edit{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;max-width:none;align-items:end}
  .edit .idx{grid-column:1 / -1}
  .edit__q{margin-top:0}
  .edit__a{margin-top:0}
}

/* ---------- Unidades de negocio ---------- */
.unidades{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bw);background:var(--navy);border:var(--bw) solid var(--navy)}
@media (max-width:900px){.unidades{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.unidades{grid-template-columns:1fr}}
.unidad{
  display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;
  background:var(--bg);padding:clamp(22px,2.6vw,32px);
  transition:background .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.unidad:hover{background:var(--gold-l);transform:translateY(-4px);box-shadow:0 -6px 0 var(--navy) inset;z-index:2}
.unidad:hover .unidad__go{color:var(--gold-d)}
.unidad:hover .unidad__go::after{transform:translateX(4px)}
.unidad__n{font-size:var(--ui-md);font-weight:800;color:var(--gold-d);letter-spacing:.06em}
.unidad p{font-size:var(--ui-lg);flex:1}
.unidad__go{
  font-size:var(--ui-base);font-weight:700;color:var(--ink-3);margin-top:6px;transition:color .2s;
}
.unidad__go::after{content:"→";margin-left:6px;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}

@keyframes pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}
.faq{border-top:2px solid var(--navy)}
.faq__i{border-bottom:2px solid var(--navy)}
.faq__i summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-size:var(--ui-xl);font-weight:800;letter-spacing:-.015em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:3px solid var(--gold-d);border-bottom:3px solid var(--gold-d);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
.faq__i[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__i p{margin:0 0 22px;color:var(--ink-2);max-width:62ch;font-size:var(--ui-lg)}

/* ---------- Contacto ---------- */
.cta{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:900px){.cta{grid-template-columns:1fr}}
.contacto__lista{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-navy);max-width:38ch}
.contacto__lista li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-navy)}
.contacto__lista span{color:var(--on-navy-2);font-size:var(--ui-base);font-weight:600;text-transform:uppercase}
.contacto__lista b{font-weight:600}

.cta__form{
  display:grid;gap:13px;align-content:start;
  background:#fff;border-radius:var(--r);padding:clamp(22px,3vw,32px);
}
.cta__form .field > label{color:var(--ink-3)}
.cta__form textarea{resize:vertical}

/* ---------- Footer ---------- */
.footer__logo{height:38px;width:auto}

/* ---------- Fundador ---------- */
.fundador{align-items:center}
/* ---------- Retrato del fundador, encuadrado como un plano ----------
   Antes era un circulo en un aro dorado con resplandor: el patron de
   "conoce al fundador" que trae cualquier plantilla. Ahora es un
   retrato 4:5 con dos escuadras en diagonal, como la marca de corte
   de un plano, sobre la misma reticula del resto del sitio.

   El ancho tiene que ser PROPIO. Antes solo habia aspect-ratio y
   max-width, asi que el ancho salia del <img> interno... que es
   width:100% del padre. Dependencia circular: la foto es loading=lazy,
   no cargaba, el contenedor quedaba en 12px (solo el padding) y,
   colapsado, nunca entraba en pantalla para que el lazy se disparara.
   En produccion la seccion salia vacia con un punto dorado. */
.fundador__foto{
  position:relative;
  width:min(300px,100%);
  aspect-ratio:4/5;
  margin-inline:auto;
  background:var(--bg);
  padding:0;
  border:1px solid var(--tinta);
  box-shadow:0 18px 40px -22px rgba(21,37,61,.45);
}
.fundador__foto img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 12%;
  border-radius:0;
  /* El encuadre se nota mas si la foto respira dentro del marco. */
  padding:9px;box-sizing:border-box;
}

/* Las escuadras. En diagonal y no en las cuatro esquinas: la pareja
   ya lee como encuadre y deja la composicion mas calmada. */
.fundador__foto::before,
.fundador__foto::after{
  content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--gold-d);pointer-events:none;
}
.fundador__foto::before{top:-9px;left:-9px;border-right:0;border-bottom:0}
.fundador__foto::after{bottom:-9px;right:-9px;border-left:0;border-top:0}

/* La cota, en la voz de las etiquetas de seccion. */
/* Va DENTRO del marco pero colgada por debajo: si se saca del div,
   se convierte en una columna mas de la rejilla de dos columnas y
   parte la seccion en dos filas. */
.fundador__pie{
  position:absolute;top:100%;left:0;right:0;
  display:block;margin-top:18px;text-align:center;
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.fundador__pie b{color:var(--gold-d);font-weight:800}
.fundador__cargo{color:var(--gold-d);font-weight:700}
@media (max-width:900px){.fundador{grid-template-columns:1fr}.fundador__foto{width:min(220px,100%)}}

/* ---------- Únete a la fuerza comercial ---------- */
.band--equipo{padding-block:clamp(48px,7vw,80px)}
.equipo-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.equipo-cta__btn{flex:none}
@media (max-width:700px){.equipo-cta{flex-direction:column;align-items:flex-start}.equipo-cta__btn{width:100%;text-align:center}}

/* ---------- Hero: video-slider con leyenda + puntos ---------- */
/* padding-bottom reserva una franja fija para los puntos: el texto
   (que varía de alto entre diapositivas) se centra solo en el espacio
   que queda arriba, así nunca puede empujar el CTA hasta pisarlos. */
.mq-hero{padding-bottom:74px}
.mq-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.mq-hero__slide.is-active{opacity:1}
.mq-hero__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* El título de este hero cambia de largo entre diapositivas (algunas
   se parten en 3 líneas) — una fuente más chica que el h-display base
   deja aire arriba (nav) y abajo (botones + puntos) en cualquier
   combinación de texto y alto de pantalla. */
.mq-hero .h-display{font-size:var(--t-display)}
.mq-hero .hero__eyebrow{margin-bottom:2px}
.mq-hero .hero-video__txt .lead{margin-top:16px}
.mq-hero .hero__cta{margin-top:24px}

.mq-hero__dots{
  position:absolute;left:var(--pad);bottom:22px;z-index:2;
  display:flex;gap:10px;
}
.mq-hero__dot{
  width:34px;height:5px;border-radius:var(--r-pill);border:none;padding:0;cursor:pointer;
  background:rgba(245,241,232,.35);transition:background .25s ease,width .25s ease;
}
.mq-hero__dot.is-active{background:var(--gold);width:52px}

/* ---------- Quiénes somos: corte navy/blanco a lo Ontario ---------- */
.mq-about2{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,112px)}
.mq-about2__split{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, var(--bg) 0%, var(--bg) 61%, var(--navy) 61%, var(--navy) 100%);
}
.mq-about2__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px) 280px;gap:clamp(28px,3.4vw,52px);align-items:center;
}
.mq-about2__gold{color:var(--gold-d)}
.mq-about2__badges{display:flex;flex-wrap:wrap;gap:8px}
.mq-about2__badge{
  font-size:var(--ui-sm);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-2);border:2px solid var(--line-2);border-radius:var(--r-pill);padding:6px 13px;
}

/* Xiooni, la mascota, protagonista del bloque central — recorte sin
   fondo, centrado sobre la línea donde se parte el corte navy/blanco. */
.mq-about2__xiooni{justify-self:center;align-self:center}
.mq-about2__xiooni img{
  width:100%;max-width:280px;height:auto;display:block;
  filter:drop-shadow(0 22px 32px rgba(21,37,61,.4));
}

.mq-about2__stats{display:grid;gap:16px;justify-self:end;width:100%;max-width:280px}
.mq-about2__stat{
  display:flex;align-items:center;gap:14px;
  background:var(--navy-2);border:2px solid rgba(245,241,232,.3);border-radius:var(--r);
  padding:15px 18px;box-shadow:0 16px 32px -12px rgba(0,0,0,.4);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.mq-about2__stat:hover{transform:translateY(-4px);box-shadow:0 20px 40px -10px rgba(231,170,58,.4)}
.mq-about2__stat .stat__v{font-size:1.5rem;color:var(--on-navy);line-height:1}
.mq-about2__stat .stat__l{color:var(--on-navy-2);margin-top:3px;font-size:var(--ui-sm)}
.mq-about2__ic{
  flex:none;width:38px;height:38px;border-radius:50%;background:rgba(231,170,58,.16);
  color:var(--gold-l);display:flex;align-items:center;justify-content:center;
}
.mq-about2__ic svg{width:19px;height:19px}

@media (max-width:980px){
  .mq-about2__split{background:var(--bg)}
  .mq-about2__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .mq-about2__text{text-align:left}
  .mq-about2__badges{justify-content:flex-start}
  .mq-about2__stats{justify-self:stretch;max-width:460px;margin-top:6px}
}

/* ---------- Proyectos: selector de opciones sobre foto, a lo Ontario ---------- */
.mq-picker{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,120px)}
.mq-picker__bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.mq-picker__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,37,61,.72) 0%, rgba(21,37,61,.88) 100%);
}
.mq-picker__in{position:relative;z-index:1}
.mq-picker__row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}

.proy--pick{width:300px;flex:none;display:flex;flex-direction:column}
.proy--pick .proy__ph{aspect-ratio:4/3}
.proy--pick .proy__label{top:14px;left:14px;font-size:var(--ui-base);padding:6px 13px}
.proy--pick .proy__estado{top:14px;right:14px}
.proy__loc--tag{
  position:absolute;left:16px;top:54px;z-index:1;
  font-size:var(--ui-sm);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(245,241,232,.92);text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.proy--pick__foot{background:var(--bg);padding:15px 16px 17px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.proy--pick .proy__stats{color:var(--ink);font-size:var(--ui-base);margin:0}
.proy--pick .proy__stats b{color:var(--gold-d)}
.proy--pick .proy__cta{display:flex;gap:8px;flex-wrap:wrap;margin:0}
@media (max-width:400px){.proy--pick{width:100%;max-width:320px}}

/* ---------- Tours 360° ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(18px,2.4vw,26px)}
.tour-card{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:var(--bw) solid var(--navy);box-shadow:var(--shadow-hard);
  aspect-ratio:16/10;display:flex;align-items:flex-end;
}
.tour-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.tour-card:hover .tour-card__img{transform:scale(1.06)}
.tour-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(21,37,61,0) 30%, rgba(21,37,61,.88) 100%);
}
.tour-card__badge{
  position:absolute;top:16px;left:16px;z-index:2;display:flex;align-items:center;gap:7px;
  background:var(--gold);color:#231603;font-weight:900;font-size:var(--ui-base);
  padding:8px 16px;border-radius:var(--r-pill);border:2px solid var(--navy);box-shadow:var(--shadow-hard-sm);
}
.tour-card__badge svg{width:16px;height:16px}
.tour-card__in{position:relative;z-index:1;padding:clamp(18px,2.4vw,26px);color:var(--bone);width:100%}
.tour-card__in h3{color:var(--bone)}
.tour-card__in p{color:var(--on-navy-2);margin-top:4px;font-size:var(--ui-lg)}
.tour-card__cta{margin-top:14px}

/* ---------- Recorrido 360 en las landings ---------- */
/* El tour es de un tercero y pesa. Se muestra el póster y el iframe
   entra solo al pulsar: así la landing no carga un visor entero que
   la mayoría no va a abrir. */
.tour360-caja{
  position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.3);background:var(--navy);
  aspect-ratio:16/9;
}
.tour360-caja iframe{width:100%;height:100%;border:0;display:block}
.tour360-cover{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;background:none;display:block;
}
.tour360-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tour360-cover:hover img{transform:scale(1.04)}
.tour360-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,37,61,.15),rgba(21,37,61,.6));
}
.tour360-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:74px;height:74px;border-radius:50%;
  background:var(--gold);color:#231603;
  display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.tour360-play svg{width:30px;height:30px;margin-left:3px}
.tour360-cover:hover .tour360-play{transform:translate(-50%,-50%) scale(1.09)}
/* Anillo que late: dice "esto se puede abrir" sin texto. */
.tour360-play::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--gold);opacity:.55;
  animation:tourPulso 2.4s ease-out infinite;
}
@keyframes tourPulso{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
.tour360-rot{
  position:absolute;left:16px;bottom:14px;z-index:1;
  font-family:var(--mono);font-weight:700;font-size:var(--ui-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone);
}
@media (prefers-reduced-motion:reduce){
  .tour360-play::before{animation:none}
  .tour360-cover img{transition:none}
}

/* ---------- Disponibilidad en vivo ----------
   La barra no es decoracion: cada tramo es la proporcion real de
   lotes en ese estado. Se lee de un vistazo cuanto queda. */
.dispo__grid{
  display:grid;gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.dispo__p{
  /* Sin caja: lo que separa una ficha de la siguiente es una linea, no
     un marco. Ver la nota de arriba sobre por que se retiro el borde. */
  border:0;border-top:3px solid var(--navy);border-radius:0;
  padding:20px 0 0;background:transparent;box-shadow:none;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .22s ease;
}
.dispo__p:hover{border-top-color:var(--gold-d);box-shadow:none;transform:none}
.dispo__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dispo__nom{font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:-.02em;margin:0}
.dispo__desde{
  font-family:var(--mono);font-weight:700;font-size:var(--ui-sm);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.dispo__desde b{color:var(--gold-d);font-weight:800;font-size:var(--ui-base);letter-spacing:0}

/* La barra: tramos proporcionales, sin huecos entre ellos. */
.dispo__barra{
  /* 999px de radio convertia una medida en una pildora de interfaz. Una
     barra de existencias se lee como regla graduada: recta y mas alta. */
  display:flex;height:16px;border-radius:0;overflow:hidden;
  background:var(--line);box-shadow:none;
}
.dispo__barra i{display:block;height:100%;width:var(--w)}
.dispo__barra i[data-e="disponible"]{background:var(--st-disponible)}
.dispo__barra i[data-e="separado"]{background:var(--st-separado)}
.dispo__barra i[data-e="vendido"]{background:var(--st-vendido)}

.dispo__leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.dispo__leyenda li{display:flex;align-items:center;gap:6px;font-size:var(--ui-md);color:var(--ink-2)}
.dispo__leyenda b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dispo__leyenda i{width:9px;height:9px;border-radius:50%;flex:none}
.dispo__leyenda i[data-e="disponible"]{background:var(--st-disponible)}
.dispo__leyenda i[data-e="separado"]{background:var(--st-separado)}
.dispo__leyenda i[data-e="vendido"]{background:var(--st-vendido)}

.dispo__pie{display:flex;gap:10px;margin-top:auto;padding-top:4px}

/* El numero grande del titular: la cifra es el titular. */
.dispo__cifra{color:var(--gold-d);font-variant-numeric:tabular-nums}