/* ==================================================================
   VIDRIO — superficie de cristal y esquinas redondeadas
   ------------------------------------------------------------------
   Pedido de David (2026-10-20): "todo el inicio más chingón, así como
   iPhone pero con nuestros colores, con efectos glass, siempre bordes
   redondeados".

   Es un cambio de dirección respecto a la capa anterior, que era
   deliberadamente angulosa —radios de 3px, sin sombra, separadores de
   línea— con criterio editorial/arquitectónico. Esta hoja carga DESPUÉS
   de identidad.css precisamente para poder revertir aquello sin tocarlo:
   si mañana se quita este archivo del HTML, el sitio vuelve a lo
   anterior intacto.

   QUÉ TOMA DE APPLE, Y QUÉ NO
   Lo que hace que una interfaz de Apple se vea como se ve no es el
   desenfoque: es que el cristal deja ver ALGO detrás. Un backdrop-filter
   sobre fondo plano no es vidrio, es gris. Por eso aquí cada superficie
   de cristal va sobre foto, video o el trazo del plano — donde no hay
   nada detrás, se usa superficie sólida con sombra suave y no se finge.

   Lo que NO se copia: el gris de iOS. Los colores son los de la marca —
   navy #15253D, dorado #E7AA3A, hueso #F5F1E8 — y el cristal se tiñe de
   navy, no de gris neutro, para que siga leyéndose como Grupo Xioon.
   ================================================================== */

:root{
  /* La escala de radios pasa de arquitectónica (3px) a la de iOS, que
     es grande y proporcional al tamaño de la caja: un botón pequeño con
     el mismo radio que una tarjeta grande se ve desproporcionado. */
  --r:      14px;   /* controles, insignias, celdas */
  --r-md:   20px;   /* tarjetas */
  --r-lg:   28px;   /* bloques grandes y paneles */
  --r-xl:   36px;   /* bandas y contenedores de pantalla */
  --r-pill: 999px;  /* píldoras y conmutadores */

  /* El cristal, teñido de la marca. Dos niveles: el que va sobre
     imagen (más transparente) y el que va sobre fondo claro (más
     cuerpo, porque hay menos contraste debajo). */
  --vidrio-sobre-foto:  rgba(21,37,61,.42);
  --vidrio-sobre-claro: rgba(255,255,255,.62);
  --vidrio-borde:       rgba(245,241,232,.22);
  --vidrio-borde-claro: rgba(21,37,61,.10);

  /* Sombras en capas. Una sola sombra dura se ve pegada; dos suaves a
     distinta distancia dan la sensación de que la pieza flota. */
  --sombra-s: 0 1px 2px rgba(21,37,61,.06), 0 4px 12px -4px rgba(21,37,61,.10);
  --sombra-m: 0 2px 6px rgba(21,37,61,.07), 0 14px 32px -12px rgba(21,37,61,.18);
  --sombra-l: 0 4px 12px rgba(21,37,61,.08), 0 28px 60px -22px rgba(21,37,61,.26);

  --curva: cubic-bezier(.32,.72,0,1);   /* la curva de iOS: sale rápido y frena largo */
}

/* SIN variante oscura, a proposito. El sitio no tiene modo oscuro: cero
   reglas prefers-color-scheme en base.css, home.css e identidad.css, y
   todos los colores de texto estan pensados para fondo claro. Si aqui
   se tinta el cristal de navy cuando el visitante lleva el sistema en
   oscuro, la tarjeta se oscurece pero su texto sigue siendo tinta
   oscura: ilegible. Lo probe y por eso no esta.
   Si algun dia el sitio adopta modo oscuro de verdad, este es el sitio
   donde anadirlo, junto con los tokens de texto. */

/* ------------------------------------------------------------------
   1. LA PIEZA DE CRISTAL
   ------------------------------------------------------------------ */
.vidrio{
  background:var(--vidrio-sobre-foto);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
          backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-m);
}
/* El brillo del borde superior. Es el detalle que más delata a una
   interfaz de Apple y el que casi nadie copia: el cristal recoge luz
   por arriba y la pierde por abajo. Sin esto el panel se ve plano. */
.vidrio--luz{position:relative;isolation:isolate}
.vidrio--luz::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  border-radius:inherit;padding:1px;
  background:linear-gradient(180deg,
    rgba(245,241,232,.38) 0%,
    rgba(245,241,232,.06) 38%,
    rgba(21,37,61,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* Donde NO hay nada detrás, el desenfoque no aporta: se usa superficie
   sólida. Fingir cristal sobre fondo plano solo ensucia el color. */
.solido{
  background:var(--tarjeta,#fff);
  border:1px solid var(--vidrio-borde-claro);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-s);
}

/* ------------------------------------------------------------------
   2. PORTADA — la tira de inventario pasa a cristal
   ------------------------------------------------------------------
   Es el sitio donde el cristal tiene sentido de verdad: va encima del
   video del dron, así que el desenfoque deja ver el terreno moviéndose
   detrás de los números.
   ------------------------------------------------------------------ */
.portada__inv{
  background:transparent;border-top:0;
  display:grid;gap:12px;
}
.portada__p{
  background:var(--vidrio-sobre-foto);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
          backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-m);
  padding:15px 17px 17px;
  transition:transform .4s var(--curva), box-shadow .4s var(--curva),
             background .3s var(--curva);
}
.portada__p:hover{
  background:rgba(21,37,61,.56);
  transform:translateY(-3px);
  box-shadow:var(--sombra-l);
}
.portada__barra{border-radius:var(--r-pill);height:9px}
.portada__barra i:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.portada__barra i:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}

/* Los botones de la portada, con el redondeo de iOS */
.portada__cta .btn{border-radius:var(--r-pill)}

/* ------------------------------------------------------------------
   3. DISPONIBILIDAD — vuelven a ser tarjetas, ahora de cristal
   ------------------------------------------------------------------
   La semana pasada se les quitó el marco a propósito, para que se
   leyeran como una lámina de inventario. Con esta dirección vuelven a
   ser piezas, pero ya no son el panel blanco genérico de antes: llevan
   el trazo del plano detrás, así que el cristal tiene qué filtrar.
   ------------------------------------------------------------------ */
.dispo__p{
  background:var(--vidrio-sobre-claro);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
          backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--vidrio-borde-claro);
  border-top:0;
  border-radius:var(--r-md);
  box-shadow:var(--sombra-s);
  padding:20px 20px 18px;
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
}
.dispo__p:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-m);
  border-color:var(--vidrio-borde-claro);
}
.dispo__barra{
  border-radius:var(--r-pill);
  box-shadow:inset 0 1px 2px rgba(21,37,61,.10);
}
.dispo__barra i:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.dispo__barra i:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}

/* ------------------------------------------------------------------
   4. CONTROLES
   ------------------------------------------------------------------ */
.btn{
  border-radius:var(--r-pill);
  transition:transform .35s var(--curva), box-shadow .35s var(--curva),
             background .25s var(--curva);
}
.btn:hover{transform:translateY(-1px)}
/* En iOS el elemento se hunde al tocarlo. Es lo que hace que un botón
   se sienta físico en vez de parpadear. */
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn--gold{box-shadow:0 2px 8px rgba(231,170,58,.28), 0 10px 24px -10px rgba(231,170,58,.42)}
.btn--gold:hover{box-shadow:0 3px 12px rgba(231,170,58,.34), 0 16px 34px -12px rgba(231,170,58,.5)}

.pill,.pill--disponible{border-radius:var(--r-pill)}
.idx::before{border-radius:var(--r-pill)}

/* ------------------------------------------------------------------
   5. TARJETAS DE PROYECTO Y TOURS
   ------------------------------------------------------------------ */
.proy,.tour-card{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sombra-m);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
.proy:hover,.tour-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sombra-l);
}
.proy__ph{border-radius:0}
.proy__label,.tour-card__badge{
  border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
          backdrop-filter:blur(14px) saturate(1.6);
  background:rgba(21,37,61,.52);
  border:1px solid var(--vidrio-borde);
}
.proy--pick__foot{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ------------------------------------------------------------------
   6. FOTO DEL FUNDADOR, PILARES, FORMULARIO
   ------------------------------------------------------------------ */
.fundador__foto{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-l)}
.fundador__foto img{border-radius:calc(var(--r-lg) - 9px)}

.pilar{border-radius:var(--r-md)}

input,select,textarea,.campo{border-radius:var(--r) !important}
.form-card,.contacto__form{border-radius:var(--r-lg)}

/* El widget flotante y el chat, redondeados como en iOS */
.xioon-fab{border-radius:var(--r-pill)}
.xioon-fab-stack{border-radius:var(--r-lg);overflow:hidden}
.xioon-chat-panel{border-radius:var(--r-lg)}
.xioon-chat-btn{border-radius:var(--r-pill);box-shadow:var(--sombra-m)}

/* El menú de teléfono, como una hoja de iOS */
.menu-tel__panel,.nav__drop-menu{
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
          backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:var(--sombra-l);
}

/* ------------------------------------------------------------------
   7. DOS CAUTELAS
   ------------------------------------------------------------------ */
/* backdrop-filter no existe en todos los navegadores. Donde falta, el
   fondo translúcido deja el texto ilegible sobre foto, así que se
   sustituye por un color con cuerpo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidrio,.portada__p,.proy__label,.tour-card__badge{background:rgba(21,37,61,.86)}
  .dispo__p,.menu-tel__panel,.nav__drop-menu{background:rgba(255,255,255,.96)}
}

/* El desenfoque es caro: en una pieza que se mueve obliga a repintar
   cada fotograma. Quien pidió menos movimiento tampoco quiere eso. */
@media (prefers-reduced-motion:reduce){
  .portada__p,.dispo__p,.proy,.tour-card,.btn{transition:none}
  .portada__p:hover,.dispo__p:hover,.proy:hover,.tour-card:hover,.btn:hover{transform:none}
}

/* ------------------------------------------------------------------
   8. TELÉFONO
   ------------------------------------------------------------------
   Las esquinas redondeadas y el hueco entre fichas cuestan alto: medido
   a 375x812, la portada pasó de 739 a 793px y la tercera ficha quedó
   26px por debajo del pliegue. El sentido de esta portada es que el
   estado de los tres proyectos se vea sin scroll, así que en teléfono
   se aprieta: menos hueco, menos relleno y un radio algo menor, que a
   esta escala se sigue leyendo igual de redondo.
   ------------------------------------------------------------------ */
@media (max-width:600px){
  .portada__inv{gap:8px;margin-top:20px}
  .portada__p{padding:11px 14px 12px;gap:7px;border-radius:var(--r)}
  .portada__barra{height:8px}
  .portada__cta{margin-top:16px}
  /* El desenfoque sobre vídeo es lo más caro que hay en una página, y
     en teléfono se nota al hacer scroll. Se baja el radio del blur: el
     efecto se mantiene y el repintado cuesta bastante menos. */
  .portada__p,.dispo__p{
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
            backdrop-filter:blur(14px) saturate(1.5);
  }
  .dispo__p{border-radius:var(--r-md);padding:16px 16px 15px}
}


/* ==================================================================
   TELÓN DE ENTRADA
   ------------------------------------------------------------------
   Pedido de David (2026-10-21): "alguna animación de entrada para la
   página principal, el logo grandote".

   POR QUÉ SE VA SOLO CON CSS Y NO CON JAVASCRIPT
   El telón se retira con una animación que termina en visibility:hidden
   y pointer-events:none, con animation-fill-mode:forwards. Si el JS no
   corre —bloqueado, error en otro script, red a medias— la página sigue
   siendo usable igual. Un telón que espera a un listener para irse deja
   el sitio inservible cuando ese listener no llega, y eso es un precio
   absurdo por un adorno.

   DURACIÓN: 1,5 s en total. Por encima de dos segundos una intro deja
   de ser una entrada y pasa a ser una espera.
   ================================================================== */
.intro{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, #1d3252 0%, #15253D 58%, #101b2c 100%);
  animation:intro-telon .62s cubic-bezier(.65,0,.35,1) 1.02s forwards;
}
@keyframes intro-telon{
  to{opacity:0;visibility:hidden;pointer-events:none}
}
/* Segunda visita de la sesión: ni un parpadeo. Lo marca el script en
   línea del <head>, antes de pintar. */
.sin-intro .intro{display:none}

.intro__caja{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding-inline:max(24px,env(safe-area-inset-left,0px));
}
.intro__logo{
  width:min(520px,62vw);height:auto;display:block;
  /* Entra del hueso al blanco y de 0,94 a 1: un salto corto se lee como
     "aparece", uno largo como "se infla". */
  opacity:0;transform:scale(.94);
  animation:intro-logo .72s cubic-bezier(.2,.8,.2,1) .08s forwards;
}
@keyframes intro-logo{
  to{opacity:1;transform:scale(1)}
}
/* La barra es el código de estado de la marca —verde libre, dorado
   separado, rojo vendido—, no una barra de carga genérica. Se dibuja
   de izquierda a derecha bajo el logo. */
.intro__barra{
  display:block;width:min(260px,42vw);height:3px;
  background:linear-gradient(90deg,
    var(--st-disponible,#2f9e6b) 0 33.33%,
    var(--st-separado,#e7aa3a) 33.33% 66.66%,
    var(--st-vendido,#c0483c) 66.66% 100%);
  transform:scaleX(0);transform-origin:left center;
  animation:intro-barra .82s cubic-bezier(.65,0,.35,1) .22s forwards;
}
@keyframes intro-barra{
  to{transform:scaleX(1)}
}

/* Quien pide menos movimiento no ve telón. No una versión más corta:
   ninguna. */
@media (prefers-reduced-motion: reduce){
  .intro{display:none}
}