/* Grupo Xioon. Azul y dorado del brandboard; formas con una esquina recta y cintas curvas. */
:root {
  --navy: #15253D; --azul: #20386A; --oro: #E7AA3A; --oro-2: #D59A2E; --oro-o: #A05516;
  --papel: #fff; --gris: #EEEFF2; --linea: #DDE1E8; --tinta: #15253D; --tinta-2: #47556E; --claro: #C7D2E4;
  --s: "Source Sans 3", "Myriad Pro", "Myriad Variable Concept", system-ui, sans-serif;
  --g: clamp(16px, 5vw, 86px); --sec: clamp(64px, 8vw, 110px); --r-l: clamp(38px, 4.6vw, 64px);
  --hoja: 26px 0 26px 26px; --mola: cubic-bezier(.22, 1, .36, 1);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; font: 400 17px/1.5 var(--s); color: var(--tinta); background: var(--papel); overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: var(--oro); color: var(--navy); }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } img, video, svg, canvas { display: block; max-width: 100%; } input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
h1, h2 { font-weight: 400; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.06; } h1 b, h2 b { font-weight: 900; }
h2 { font-size: clamp(29px, 3.3vw, 46px); }
h3, h4 { font-weight: 800; line-height: 1.15; }
.eti { display: inline-block; font-size: 16px; font-weight: 700; border: 1.5px solid var(--navy); border-radius: 999px; padding: 3px 16px; margin-bottom: 20px; }
.nota { font-size: 14.5px; color: var(--tinta-2); margin-top: 18px; }
.enlace { display: inline-flex; gap: 8px; font-weight: 700; border-bottom: 2px solid var(--oro); padding-bottom: 2px; transition: gap .3s var(--mola); } .enlace:hover { gap: 14px; }
.pendiente { display: inline-block; margin-top: 28px; background: var(--oro); border-radius: 18px 18px 0 18px; padding: 10px 18px; font-weight: 700; }

/* botones */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 34px; border-radius: 16px 16px 0 16px; font-weight: 800; white-space: nowrap; transition: background .25s, color .25s, border-radius .35s var(--mola), translate .35s var(--mola); } .bt:hover { border-radius: 16px; translate: 0 -2px; } .bt:active { translate: 0 0; }
.bt-oro { background: var(--oro); color: var(--navy); } .bt-oro:hover { background: var(--oro-2); }
.bt-navy { background: var(--navy); color: #fff; } .bt-navy:hover { background: var(--azul); }
.bt-glass { color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px rgba(14, 25, 44, .25); } .bt-glass:hover { background: rgba(255, 255, 255, .28); }
.bt-glass-n { color: #fff; background: rgba(21, 37, 61, .74); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px rgba(21, 37, 61, .22); } .bt-glass-n:hover { background: rgba(21, 37, 61, .88); }
.bt-linea { box-shadow: inset 0 0 0 1.5px var(--navy); border-radius: 999px; padding: 9px 26px; } .bt-linea:hover { background: var(--navy); color: #fff; border-radius: 999px; }
.ancho { width: 100%; }

/* barra */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 22px; height: 66px; padding: 0 clamp(14px, 2vw, 28px); background: var(--navy); color: var(--oro); border-radius: 0 0 22px 22px; box-shadow: 0 6px 22px rgba(21, 37, 61, .22); }
.nav-logo { width: 132px; flex: none; } .nav-logo img { width: 100%; height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 22px); margin-left: auto; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; } .nav-links > a, .nav-bt { font-weight: 800; text-transform: uppercase; padding: 8px 0; display: inline-flex; align-items: center; gap: 7px; position: relative; } .nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--mola); } .nav-links > a:hover::after, .nav-links > a[aria-current]::after { transform: scaleX(1); } .nav-links > a:hover, .nav-bt:hover { color: #fff; }
.nav-bt i { width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--mola); } .nav-prov.abierto .nav-bt i { transform: rotate(225deg) translate(-3px, -1px); }
.nav-prov { position: relative; } .mega { position: absolute; top: calc(100% + 18px); left: 50%; width: min(860px, 88vw); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .3s var(--mola), visibility .2s; text-transform: none; } .nav-prov.abierto .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 1240px) { .nav-prov { position: static; } .mega { top: calc(100% + 10px); } }
.mega-in { background: #fff; color: var(--navy); border-radius: 30px 0 30px 30px; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; box-shadow: 0 22px 54px rgba(21, 37, 61, .3); } .mega-it { padding: 8px 8px 14px; border-radius: 24px; display: flex; flex-direction: column; font-weight: 400; letter-spacing: 0; transition: background .2s; } .mega-it:hover { background: var(--gris); } .mega-f { position: relative; display: block; aspect-ratio: 16/10; border-radius: 18px 0 18px 18px; overflow: hidden; margin-bottom: 12px; background: var(--gris); } .mega-f img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--mola); } .mega-it:hover .mega-f img { scale: 1.06; } .mega-z { position: absolute; left: 8px; bottom: 8px; font-size: 12.5px; color: #fff; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: rgba(14, 25, 44, .34); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); } .mega-it b { font-weight: 900; font-size: 19px; line-height: 1.15; padding: 0 8px; } .mega-it small { color: var(--tinta-2); font-size: 14px; line-height: 1.3; padding: 3px 8px 0; } .mega-d { margin-top: auto; padding: 10px 8px 0; font-weight: 800; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; } .mega-d i { font-style: normal; color: var(--oro-o); font-size: 18px; line-height: 1; transition: translate .3s var(--mola); } .mega-it:hover .mega-d i { translate: 4px 0; }
.nav-menu { display: none; width: 42px; height: 42px; position: relative; margin-left: auto; } .nav-menu i { position: absolute; left: 9px; right: 9px; height: 3px; border-radius: 3px; background: currentColor; transition: transform .25s, top .25s; } .nav-menu i:first-child { top: 15px; } .nav-menu i:last-child { top: 25px; } .nav-menu[aria-expanded="true"] i:first-child { top: 20px; transform: rotate(45deg); } .nav-menu[aria-expanded="true"] i:last-child { top: 20px; transform: rotate(-45deg); }
.movil { position: fixed; inset: 0; z-index: 55; background: var(--navy); color: #fff; padding: 96px var(--g) 30px; display: flex; flex-direction: column; overflow-y: auto; } .movil a { font-size: 25px; font-weight: 800; text-transform: uppercase; padding: 12px 0; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255, 255, 255, .14); } .movil small { font-size: 14px; font-weight: 400; color: var(--claro); text-transform: none; }

/* visor */
.visor { position: fixed; inset: 0; z-index: 150; background: rgba(10, 18, 32, .94); display: grid; place-items: center; padding: 20px; } .visor video { width: min(1180px, 100%); max-height: 86vh; border-radius: 26px; background: #000; } .visor-x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; background: var(--oro); border-radius: 50%; } .visor-x i { position: absolute; left: 13px; right: 13px; top: 22px; height: 2.5px; background: var(--navy); transform: rotate(45deg); } .visor-x i:last-child { transform: rotate(-45deg); }

/* cintas y formas de línea */
.cinta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; max-width: none; } .cinta path { fill: none; stroke: var(--oro); stroke-width: 92; stroke-dasharray: 1; }
/* EL PATRON DEL BRANDBOOK (5/11/2026). Giorgio: "las lineas amarillas
   reemplazalas por patrones nuestros".

   Aqui habia `.formas`: tres siluetas inventadas en oro a 2px. Por la
   manana les corregi el radio —Barbara aviso de que el patron de marca
   es cuadrado, no redondo— y la correccion estaba bien pero la pieza
   seguia mal: era un dibujo PARECIDO al patron, no el patron.

   El de verdad es /img/patron-gx-malla.svg, sacado de la pagina 2 del
   brandboard. Llevaba semanas escrito en assets/img/ sin que lo cargara
   nadie, porque assets/ es la version anterior del sitio.

   VA DE MASCARA Y NO DE IMAGEN, que es para lo que esta hecho: el trazo
   negro de dentro solo marca el alfa, asi que el color sale de aqui.
   Un solo fichero para el oro de lo oscuro y el gris del bloque gris.

   La baldosa a 150px deja el trazo en 1,25px (el SVG es de 240 con
   trazo de 2). Es mas fino que las lineas de antes, y asi debe ser: un
   patron que repite a la densidad de un dibujo suelto se come la
   seccion. */
.patron { position: absolute; width: clamp(280px, 40vw, 560px); height: clamp(110px, 13vw, 170px); pointer-events: none; background: var(--oro); opacity: .85; -webkit-mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat; mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat; }
.patron.p1 { left: -20px; top: 0; }
.patron.p2 { right: -20px; bottom: 0; }

/* EL PATRON COMO SUPERFICIE, NO COMO ETIQUETA (6/11/2026).

   Mismo mosaico y mismo tamano que `.patron` de arriba: si se cambia
   el tile, se cambia en los dos sitios o la portada y las interiores
   dejan de ser la misma marca. */
.ph::before, .bi::before, .contacto::before, .ia-main::before {
  content: ""; position: absolute; pointer-events: none;
  -webkit-mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat;
  mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat;
}
/* Navy con foto o video debajo: la version blanca del brandboard. */
.ph::before { z-index: -1; left: -24px; bottom: -10px; width: clamp(260px, 38vw, 520px); height: clamp(110px, 14vw, 180px); background: #fff; opacity: .26; }
/* XIOON IA. Su `.contacto` no cuenta: esa pagina va con body.app y el
   bloque esta en display:none, asi que sin esto seria la unica de las
   diez sin patron. Se apaga al empezar a hablar, igual que la cinta
   que ya vive detras del chat: el fondo es de la pantalla vacia.

   VA EN DORADO, NO EN BLANCO. Lo puse blanco por venir de `.ph`, que
   es navy, y aqui no se veia NADA: el navy de esta pagina es solo la
   barra lateral; `.ia` es blanco. Blanco sobre blanco no da ningun
   error, simplemente no esta. Mirar el fondo DESPUES de poner el
   color, no antes. */
.ia-main::before { z-index: -1; left: -24px; bottom: -10px; width: clamp(240px, 32vw, 460px); height: clamp(100px, 12vw, 160px); background: var(--oro); opacity: .3; transition: opacity .5s; }
.ia.charlando .ia-main::before { opacity: 0; }
/* Cabecera clara de nosotros/ y bloque de contacto: dorado. */
.bi { position: relative; overflow: hidden; }
.bi > div { position: relative; z-index: 1; }
.bi::before { z-index: 0; left: -20px; bottom: -8px; width: clamp(240px, 34vw, 480px); height: clamp(90px, 11vw, 140px); background: var(--oro); opacity: .3; }
.contacto { position: relative; overflow: hidden; }
.contacto-in { position: relative; z-index: 1; }
.contacto::before { z-index: 0; right: -26px; top: 0; width: clamp(220px, 30vw, 430px); height: clamp(95px, 12vw, 150px); background: var(--oro); opacity: .34; }

/* ---- LAS BANDAS DORADAS, AHORA PATRON (6/11/2026) ----
   Ver el encabezado de scratchpad/cinta-a-patron.py. Los `svg.cinta`
   siguen en el marcado de las diez paginas, ocultos aqui; las reglas
   `.cinta ...` que quedan repartidas por esta hoja ya no casan con
   nada y se iran con el marcado. */
/* `svg.cinta` Y NO `.cinta`, QUE ES LO QUE HABIA Y NO BASTABA.

   Las cintas vienen en dos variantes, `.cinta-pc` y `.cinta-cel`, y
   mas abajo —linea ~187, dentro de @media (max-width: 760px)— hay un
   `.cinta-pc { display: none } .cinta-cel { display: block }` que las
   reparte. Misma especificidad que `.cinta` (0,1,0) y declarado
   DESPUES, asi que en movil ganaba y las cintas volvian a salir en la
   portada, en asesores/ y en xioon-ia/, que son las tres paginas con
   variante. En escritorio no se veia: ahi `.cinta-cel` ya estaba
   oculta de antes.

   Con `svg.cinta` (0,1,1) el orden deja de decidir. Y comprobarlo
   pide mirar las TRES paginas con variante a ancho de movil: medirlo
   en noticias/, que no tiene `cinta-cel`, da un cero que no significa
   nada. */
svg.cinta { display: none; }
.hero::after, .confia::after, .david::after, .val-i::after {
  content: ""; position: absolute; pointer-events: none;
  -webkit-mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat;
  mask: url(/img/patron-gx-malla.svg) 0 0 / 150px 150px repeat;
}
/* Hero: video oscuro debajo, asi que blanco. `.hero` no aisla y sus
   hijos van sin z-index, de modo que un ::after sin mas se pintaria
   ENCIMA del titular por ser el ultimo del DOM. */
.hero::after { z-index: 0; left: -30px; bottom: -20px; width: clamp(240px, 50vw, 680px); height: clamp(110px, 26vw, 290px); background: #fff; opacity: .24; }
.hero-t { z-index: 1; }
/* Confia: fondo blanco con una foto en gris al 20 %. Dorado. */
.confia::after { z-index: -2; left: -30px; bottom: -30px; width: clamp(260px, 58vw, 780px); height: clamp(130px, 34vw, 380px); background: var(--oro); opacity: .6; }
/* David: el fondo entero por detras de la foto, no una esquina. */
.david::after { z-index: -2; left: auto; right: -30px; top: 0; bottom: 0; width: clamp(260px, 56vw, 740px); background: var(--oro); opacity: .42; }
/* Nosotros, panel de valores: foto a sangre, asi que blanco. VA
   ARRIBA, no abajo: las tres tarjetas de `.val-g` suben -96px y se
   comen la esquina inferior, y ademas ahi la foto es arena clara, o
   sea blanco sobre casi blanco. Arriba hay cielo y mar. */
.val-i::after { z-index: -1; left: -24px; top: -16px; width: clamp(230px, 46vw, 560px); height: clamp(105px, 24vw, 250px); background: #fff; opacity: .3; }
@media (max-width: 760px) {
  /* `.david` se apila en movil (la foto baja), y el patron a toda
     altura por la derecha caeria encima del texto. Banda baja. */
  .david::after { left: -24px; right: auto; top: auto; bottom: -16px; width: clamp(230px, 70vw, 420px); height: clamp(100px, 26vw, 160px); }
}

/* hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; color: #fff; background: var(--navy) url(/media/hero-poster.webp) center/cover; }
.anima .hero [data-paso]:not([data-paso="0"]) { visibility: hidden; }
#hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; } .hero-velo { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 56% at 50% 54%, rgba(21, 37, 61, .58), rgba(21, 37, 61, .08) 100%); }
.hero-t { position: absolute; inset: 66px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--g); }
.hero h1 { font-size: clamp(38px, 6vw, 92px); line-height: 1.02; } .hl { display: block; } .hl b { font-weight: 900; }
.hero-sub { font-size: clamp(17px, 1.6vw, 22px); margin-top: 18px; } .hero-sub b { font-weight: 900; color: var(--oro); }

/* acerca */
.ac { position: relative; display: grid; grid-template-columns: 1fr 1fr; } .ac-i { padding: var(--sec) clamp(150px, 15vw, 230px) var(--sec) var(--g); display: flex; flex-direction: column; align-items: flex-start; } .ac-i h2 { font-size: clamp(32px, 3.4vw, 50px); } .ac-i h2 b { display: block; margin-top: 8px; } .ac-i > p { margin-top: 26px; max-width: 42ch; font-size: 18px; } .ac-i > p b { font-weight: 800; }
.sellos { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; padding-top: 26px; border-top: 2px solid var(--navy); } .sellos li { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; line-height: 1.15; max-width: 130px; } .sellos svg { flex: none; width: 34px; height: 34px; }
.ac-d { position: relative; background: var(--navy); color: #fff; padding: var(--sec) var(--g) var(--sec) clamp(170px, 17vw, 260px); display: grid; gap: 20px; align-content: center; justify-items: end; }
.cifra { width: min(100%, 370px); display: flex; align-items: center; gap: 20px; border: 3px solid #fff; border-radius: var(--hoja); padding: 20px 26px; transition: background .3s, color .3s; } .cifra:hover { background: #fff; color: var(--navy); } .cifra svg { flex: none; width: 62px; height: 62px; color: var(--oro); } .cifra b { display: block; font-size: clamp(38px, 3.6vw, 52px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .cifra span { font-size: 18px; line-height: 1.15; display: block; margin-top: 4px; }
.ac-c { position: absolute; left: 50%; bottom: 7%; width: clamp(240px, 23vw, 340px); aspect-ratio: 5/8; translate: -50% 0; z-index: 2; } .ac-f { position: absolute; inset: 0; background: var(--oro); border-radius: 44% 44% 44% 44% / 28% 28% 28% 28%; } .ac-p { position: absolute; inset: -11% -14% 0; clip-path: inset(-20% -20% 0 -20% round 0 0 150px 150px); } .ac-p img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ac-tag { position: absolute; right: -16%; bottom: 25%; background: #fff; color: var(--navy); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(14px, 1.25vw, 18px); padding: 4px 12px; rotate: -6deg; box-shadow: 0 6px 18px rgba(21, 37, 61, .25); white-space: nowrap; }

/* confía */
.confia { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) var(--g); min-height: clamp(380px, 34vw, 500px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; isolation: isolate; } .confia-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .2; z-index: -3; -webkit-mask-image: radial-gradient(ellipse 58% 80% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 58% 80% at 50% 50%, #000 35%, transparent 100%); max-width: none; } .confia .cinta, .david .cinta { z-index: -2; } .confia .cinta path, .david .cinta path { stroke-width: 88; opacity: .92; } .cinta-cel { display: none; } .confia p { max-width: 50ch; margin: 12px 0 22px; font-size: 18px; } .confia p b { font-weight: 800; } .confia h2 { font-size: clamp(32px, 3.6vw, 50px); }
/* cotizador */
.co { padding: var(--sec) var(--g); } .co-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; } .co-izq { position: sticky; top: 84px; display: grid; gap: 14px; }
.co-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .co-tabs button { flex: 1 1 130px; padding: 10px 16px; border-radius: 20px 20px 0 20px; background: var(--gris); font-weight: 900; font-size: 17px; line-height: 1.15; text-align: left; transition: background .25s, color .25s; } .co-tabs small { display: block; font-weight: 600; font-size: 13.5px; opacity: .75; } .co-tabs button.on { background: var(--navy); color: #fff; } .co-tabs button:not(.on):hover { background: var(--linea); }
.co-sel { display: grid; gap: 4px; font-weight: 800; font-size: 14.5px; } .co-sel select { width: 100%; padding: 11px 14px; border: 2px solid var(--linea); border-radius: 14px; background: #fff; font: inherit; font-weight: 600; font-size: 16px; color: var(--navy); }
.co-plano { background: var(--gris); border-radius: var(--r-l) 0 var(--r-l) var(--r-l); overflow: hidden; width: 100%; max-height: 72vh; } #co-svg { display: block; width: 100%; height: 100%; max-height: 72vh; } #co-svg polygon { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .2s; } #co-svg .disponible { fill: rgba(31, 168, 92, .78); cursor: pointer; } #co-svg .disponible:hover { fill: rgba(21, 37, 61, .7); } #co-svg .separado { fill: rgba(150, 100, 190, .55); } #co-svg .vendido { fill: rgba(226, 35, 80, .42); } #co-svg .sel { fill: var(--navy); stroke: var(--oro); stroke-width: 2.5; } #co-svg polygon:focus-visible { outline: none; stroke: var(--navy); stroke-width: 3; } .co-plano { position: relative; touch-action: pan-y; } .co-plano.cerca { touch-action: none; } .co-plano.mano { cursor: grabbing; } .co-lienzo { width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; } .co-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; gap: 6px; } .co-zoom button { width: 38px; height: 38px; display: grid; place-items: center; font-weight: 800; font-size: 17px; line-height: 1; color: #fff; background: rgba(21, 37, 61, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 12px 12px 0 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s, border-radius .35s var(--mola); } .co-zoom button:hover { background: var(--navy); border-radius: 12px; } .co-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .co-3d { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 11px 18px; font-weight: 800; font-size: 14px; color: #fff; background: var(--navy); border-radius: 14px 14px 0 14px; transition: background .2s, border-radius .35s var(--mola); } .co-3d:hover { background: var(--azul); border-radius: 14px; } .co-3d[hidden] { display: none; } .co-solo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; } .co-solo input { width: 16px; height: 16px; accent-color: var(--navy); } #co-svg .separado, #co-svg .vendido { cursor: pointer; } #co-svg .separado:hover, #co-svg .vendido:hover { fill: rgba(21, 37, 61, .55); } #co-svg .apagado { opacity: .12; pointer-events: none; } .co-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .co-chip { padding: 8px 14px; font-weight: 800; font-size: 14px; color: var(--navy); background: var(--oro); border-radius: 12px 12px 0 12px; transition: background .2s, border-radius .35s var(--mola); } .co-chip:hover { background: var(--oro-2); border-radius: 12px; }
.co-ley { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; font-size: 14px; font-weight: 700; } .co-ley li::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; } .co-ley .disponible::before { background: #1FA85C; } .co-ley .separado::before { background: #9664BE; } .co-ley .vendido::before { background: #E22350; }
.co-ficha > span { font-weight: 800; color: var(--oro-o); } .co-ficha h2 { font-size: clamp(34px, 3.8vw, 54px); font-weight: 900; line-height: 1.02; } .co-ficha p { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 18px; } .co-ficha p b { font-weight: 700; } .co-ficha i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro); }
.co-cond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0; } .co-cond label { display: grid; gap: 8px; font-weight: 700; font-size: 15px; } .co-cond span { display: flex; justify-content: space-between; gap: 8px; } .co-cond span b { font-weight: 900; } .co-cond input { width: 100%; accent-color: var(--oro-o); }
.co-res { display: grid; gap: 14px; } .co-res article { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-l) 0 var(--r-l) var(--r-l); } .co-f { background: var(--oro); } .co-k { background: var(--navy); color: #fff; } .co-res h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .co-res i { font-style: normal; } .co-grande { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 12px; } .co-grande b { font-size: clamp(34px, 3.8vw, 52px); font-weight: 900; line-height: 1.05; } .co-grande small { font-size: 15px; font-weight: 700; }
.co-res article > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15.5px; border-top: 1px solid rgba(21, 37, 61, .2); } .co-k > div { border-top-color: rgba(255, 255, 255, .2) !important; } .co-res article > div b { font-weight: 800; white-space: nowrap; } .co-res .co-t { font-weight: 800; font-size: 17px; }
.co-nop { margin-top: 20px; padding: clamp(22px, 2.6vw, 32px); background: var(--oro); border-radius: var(--r-l) 0 var(--r-l) var(--r-l); } .co-nop h3 { font-size: 24px; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 6px; } .co-nop b { font-weight: 900; }
.co-acc { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; } .co-acc .bt-linea { padding: 12px 28px; } .co-legal { display: block; color: var(--tinta-2); font-size: 13.5px; line-height: 1.4; } .co-int { margin-top: 30px; text-align: center; font-size: 16px; } .co-int a { font-weight: 800; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; } .co-print { display: none; } .fi-cot { display: block; margin-top: 8px; font-weight: 800; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px; }
@media (max-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr); } .co-izq { position: static; } .co-zoom button { width: 44px; height: 44px; } }
@media (max-width: 560px) { .co-cond { grid-template-columns: minmax(0, 1fr); } .co-acc .bt { flex: 1 1 100%; } }
@media print { .nav, .movil, .ph, .co-izq, .co-cond, .co-acc, .co-int, .contacto, .pie, .wa, .xiooni, .redes-flot, .visor { display: none !important; } .co { padding: 0; } .co-grid { display: block; } .co-print { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .co-print img { width: 170px; } .co-print div { display: grid; text-align: right; } .co-res article { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; } }
/* XIOON IA */
body.app { overflow: hidden; } body.app .contacto, body.app .pie, body.app .wa, body.app .xiooni, body.app .redes-flot { display: none; }
.nav-links > a.nav-ia { padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(231, 170, 58, .6); white-space: nowrap; transition: background .25s, color .25s; } .nav-links > a.nav-ia::after { display: none; } .nav-links > a.nav-ia:hover { background: rgba(255, 255, 255, .2); } .nav-links > a.nav-ia[aria-current] { background: var(--oro); color: var(--navy); }
.ia { display: flex; height: 100vh; height: 100dvh; padding-top: 66px; background: #fff; } .ia-lado { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; padding: 22px 16px 18px; background: var(--navy); color: #fff; border-radius: 0 var(--r-l) 0 0; margin-top: 10px; min-height: 0; } .ia-marca { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 400; letter-spacing: .02em; padding: 0 6px; } .ia-marca b { font-weight: 900; color: var(--oro); margin-left: -5px; } .ia-marca img { border-radius: 10px; background: #fff; padding: 3px; }
.ia-nueva { padding: 11px 16px; border-radius: 16px 16px 0 16px; background: var(--oro); color: var(--navy); font-weight: 800; text-align: left; transition: background .25s, border-radius .35s var(--mola); } .ia-nueva::before { content: "+"; font-weight: 900; font-size: 19px; margin-right: 8px; } .ia-nueva:hover { background: var(--oro-2); border-radius: 16px; } .ia-et { font-size: 13px; font-weight: 700; opacity: .65; padding: 8px 6px 0; } #ia-hist { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; } #ia-hist button { width: 100%; padding: 9px 10px; border-radius: 12px; text-align: left; color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s; } #ia-hist button:hover, #ia-hist button[aria-current] { background: rgba(255, 255, 255, .13); } .ia-sin { padding: 4px 8px; font-size: 14px; opacity: .65; } .ia-hablar { padding: 10px 14px; border-radius: 16px; text-align: center; font-weight: 800; font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background .25s; } .ia-hablar:hover { background: rgba(255, 255, 255, .13); }
.ia-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } .ia .cinta { z-index: -1; transition: opacity .5s; } .ia .cinta path { stroke-width: 70; opacity: .92; } .ia.charlando .cinta { opacity: 0; } .ia-cab { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px 6px; } .ia-abre { display: none; width: 42px; height: 42px; flex: none; border-radius: 14px; background: var(--gris); place-content: center; gap: 5px; } .ia-abre i { display: block; width: 20px; height: 2.5px; background: var(--navy); border-radius: 2px; } .ia-perfil { display: flex; padding: 4px; background: rgba(238, 239, 242, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 999px; } .ia-perfil button { padding: 7px 18px; border-radius: 999px; font-weight: 800; font-size: 14.5px; transition: background .25s, color .25s; white-space: nowrap; } .ia-perfil .on { background: var(--navy); color: #fff; } .ia-modo { align-self: center; margin: 4px 16px 0; padding: 4px 14px; border-radius: 999px; background: rgba(231, 170, 58, .22); font-size: 13.5px; font-weight: 700; text-align: center; }
.ia-zona { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 10px clamp(16px, 4vw, 40px); } .ia-vacio { margin: auto; max-width: 720px; width: 100%; text-align: center; padding: 16px 0; } .ia-vacio[hidden] { display: none; } .ia-vacio > img { margin: 0 auto 12px; border-radius: 18px; } .ia-vacio h1 { font-size: clamp(36px, 5vw, 66px); font-weight: 400; text-transform: uppercase; line-height: 1.02; } .ia-vacio h1 b { font-weight: 900; } .ia-vacio > p { margin: 10px auto 22px; max-width: 48ch; font-size: 18px; } .ia-sug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ia-sug button { padding: 15px 18px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(21, 37, 61, .14), 0 10px 26px rgba(21, 37, 61, .08); border-radius: 22px 22px 0 22px; text-align: left; font-weight: 700; font-size: 15.5px; line-height: 1.25; transition: background .25s, translate .35s var(--mola), border-radius .35s var(--mola); } .ia-sug button:hover { background: #fff; translate: 0 -2px; border-radius: 22px; }
.ia-hilo { width: 100%; max-width: 780px; margin: 0 auto; display: grid; gap: 20px; padding-bottom: 8px; } .ia-m { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .ia-av { width: 34px; height: 34px; flex: none; border-radius: 10px; } .ia-b { min-width: 0; line-height: 1.5; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 4px; } .ia-b b { font-weight: 800; } .ia-m.yo { justify-content: flex-end; } .ia-m.yo .ia-b { max-width: 78%; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: 20px 20px 0 20px; } .ia-acc { display: block; width: fit-content; margin-top: 10px; padding: 7px 16px; border-radius: 14px 14px 0 14px; background: var(--oro); font-weight: 800; font-size: 15px; white-space: normal; } .ia-acc:hover { background: var(--oro-2); } .ia-pensando .ia-b { display: flex; gap: 5px; padding-top: 14px; } .ia-pensando i { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); animation: ia-p 1.1s infinite ease-in-out; } .ia-pensando i:nth-child(2) { animation-delay: .15s; } .ia-pensando i:nth-child(3) { animation-delay: .3s; } @keyframes ia-p { 0%, 70%, 100% { translate: 0 0; opacity: .45; } 35% { translate: 0 -6px; opacity: 1; } }
.ia-pie { padding: 6px clamp(16px, 4vw, 40px) 12px; text-align: center; } .ia-pie small { display: block; margin-top: 7px; font-size: 12.5px; color: var(--tinta-2); line-height: 1.3; } .ia-caja { max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 20px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(21, 37, 61, .16), 0 14px 34px rgba(21, 37, 61, .13); border-radius: 28px; transition: box-shadow .25s; } .ia-caja:focus-within { box-shadow: inset 0 0 0 1.5px var(--oro-o), 0 14px 34px rgba(21, 37, 61, .15); } .ia-caja textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 17px; line-height: 1.4; color: var(--navy); padding: 7px 0; max-height: 150px; } .ia-caja button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; transition: background .25s, opacity .25s; } .ia-caja button svg { width: 22px; height: 22px; } .ia-caja button:disabled { opacity: .3; cursor: default; } .ia-caja button:not(:disabled):hover { background: var(--azul); } .ia-velo { display: none; }
@media (max-width: 980px) { .nav-links { display: none; } .nav-menu { display: block; } }
@media (max-width: 860px) { .ia-lado { position: fixed; left: 0; top: 66px; bottom: 0; width: min(290px, 82vw); z-index: 30; margin-top: 0; transform: translateX(-104%); transition: transform .35s var(--mola); } .ia.lado .ia-lado { transform: none; } .ia.lado .ia-velo { display: block; position: fixed; inset: 66px 0 0; background: rgba(14, 25, 44, .42); z-index: 29; } .ia-abre { display: grid; } .ia-cab { justify-content: space-between; } }
@media (max-width: 760px) { .ia { padding-top: 60px; } .ia-lado { top: 60px; } .ia.lado .ia-velo { inset: 60px 0 0; } .ia .cinta-cel path { stroke-width: 34; } .ia-sug { grid-template-columns: minmax(0, 1fr); } .ia-sug button { padding: 11px 16px; font-size: 15px; } .ia-vacio > img { width: 52px; height: 52px; } .ia-vacio > p { font-size: 16px; margin-bottom: 14px; } .ia-perfil button { padding: 7px 13px; font-size: 13.5px; } .ia-m.yo .ia-b { max-width: 88%; } .ia-b { font-size: 16px; } .ia-caja textarea { font-size: 16px; } }
/* acceso asesores */
.as-h .ph-velo { background: rgba(14, 25, 44, .62); } .as-h .bt { margin-top: 22px; } .as-n { display: block; max-width: 52ch; margin: 16px auto 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .86); } .as-g { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: clamp(14px, 2.4vw, 30px); width: 100%; margin-top: 28px; } .as-c { background: #fff; border-radius: var(--r-l) 0 var(--r-l) var(--r-l); padding: clamp(26px, 3vw, 40px); box-shadow: 0 18px 44px rgba(21, 37, 61, .13); display: flex; flex-direction: column; align-items: center; } .as-c .eti { margin-bottom: 12px; } .as-c h3 { font-size: 26px; font-weight: 900; text-transform: uppercase; line-height: 1.1; } .confia .as-c p { margin: 10px 0 20px; font-size: 17px; } .as-c .bt { margin-top: auto; }
@media (max-width: 760px) { .as-g { grid-template-columns: minmax(0, 1fr); } }
/* David */
.david { position: relative; overflow: hidden; min-height: clamp(520px, 46vw, 680px); padding: clamp(60px, 7vw, 100px) var(--g); display: flex; align-items: center; background: #fff; isolation: isolate; } .david-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .2; z-index: -3; -webkit-mask-image: radial-gradient(ellipse 60% 85% at 28% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 85% at 28% 50%, #000 30%, transparent 100%); max-width: none; }
.da-f { position: absolute; right: clamp(60px, 13vw, 240px); bottom: 0; height: 94%; width: auto; max-width: none; z-index: -1; } .da-t { max-width: min(46%, 560px); } .da-t .eti { margin-bottom: 14px; } .david h2 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; } .da-r { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: var(--oro-o); margin: 6px 0 14px; } .da-t > p:not(.da-r) { font-size: 18px; max-width: 46ch; } .da-t > p b { font-weight: 800; }
.da-u { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; list-style: none; padding: 0; } .da-u li { background: var(--navy); color: #fff; font-weight: 700; font-size: 14.5px; padding: 5px 16px; border-radius: 999px 999px 0 999px; } .da-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .da-fb { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--oro); } .da-fb:hover { color: var(--oro-o); }
@media (max-width: 760px) { .cinta-pc { display: none; } .cinta-cel { display: block; } .confia .cinta-cel path, .david .cinta-cel path { stroke-width: 42; } .david { display: block; padding-bottom: 420px; } .da-t { max-width: none; } .da-f { left: 0; right: 0; margin: 0 auto; height: 390px; } .david-img { -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 28%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 45% at 50% 28%, #000 30%, transparent 100%); } }

/* proyectos */
.proyectos { position: relative; padding: 0 var(--g) var(--sec); isolation: isolate; } .pr-panel { position: absolute; left: 0; top: 0; width: 48%; height: clamp(280px, 26vw, 390px); background: var(--oro); border-radius: 0 var(--r-l) var(--r-l) 0; z-index: -1; }
.pr-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 3vw, 44px) 0 clamp(26px, 3vw, 40px); } .pr-bloque p { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; margin-top: 2px; }
.tabs-c { max-width: 50%; padding-top: 6px; border-bottom: 4px solid var(--navy); padding-bottom: 12px; } .tabs { position: relative; display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; } .tabs button { position: relative; z-index: 1; padding: 6px 16px; border-radius: 12px; font-weight: 800; font-size: 15.5px; text-transform: uppercase; white-space: nowrap; transition: color .25s; flex: none; } .tabs button[aria-selected="true"] { color: var(--oro); } .tabs-i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--navy); border-radius: 12px; transition: transform .45s var(--mola), width .45s var(--mola); }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.pc { position: relative; display: block; aspect-ratio: 3/4; min-height: 440px; width: 100%; border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; color: #fff; background: var(--navy); isolation: isolate; box-shadow: 0 18px 40px rgba(21, 37, 61, .16); transition: translate .5s var(--mola), box-shadow .5s; } .pc:hover { translate: 0 -8px; box-shadow: 0 30px 56px rgba(21, 37, 61, .28); }
.pc-media { position: absolute; inset: 0; z-index: -1; } .pc-media img, .pc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--mola), opacity .5s; } .pc-media video { opacity: 0; } .pc:hover .pc-media img { scale: 1.07; } .pc.con-video .pc-media video { opacity: 1; } .pc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 25, 44, .86) 0, rgba(14, 25, 44, .2) 26%, transparent 42%); }
.pc-sup { padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 34px) 0; } .pc h3 { font-size: clamp(25px, 2.3vw, 33px); font-weight: 900; text-transform: uppercase; line-height: 1.02; } .pc-sup p { font-weight: 600; margin-top: 2px; }
.pc-inf { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 47% 1fr; gap: 6px; align-items: end; transition: translate .5s var(--mola); } .pc-a { background: var(--oro); color: var(--navy); border-radius: 0 34px 0 0; padding: 16px 14px 14px 18px; display: grid; gap: 6px; font-weight: 800; font-size: 14.5px; line-height: 1.12; } .pc-a span { display: flex; gap: 7px; align-items: center; } .pc-a svg { width: 17px; height: 17px; flex: none; } .pc-a small { display: block; font-weight: 600; font-size: 12.5px; }
.pc-b { background: var(--navy); border-radius: 26px 0 0 0; padding: 12px 16px 12px 14px; display: grid; gap: 8px; justify-items: center; } .pc-e { font-style: normal; font-weight: 800; font-size: 13px; color: var(--oro); border: 1.5px solid var(--oro); border-radius: 999px; padding: 1px 12px; white-space: nowrap; transition: background .3s, color .3s; } .pc:hover .pc-e { background: var(--oro); color: var(--navy); } .pc-p { display: flex; align-items: center; gap: 8px; } .pc-p small { font-size: 11.5px; font-style: italic; font-weight: 600; line-height: 1.05; max-width: 44px; } .pc-p b { font-size: clamp(24px, 2.1vw, 31px); font-weight: 900; font-style: italic; line-height: 1; white-space: nowrap; }
.proyectos .nota { text-align: right; font-weight: 700; color: var(--tinta); }

/* noticias */
.noticias { position: relative; background: var(--navy); color: #fff; padding: clamp(80px, 9vw, 130px) var(--g) clamp(90px, 10vw, 150px); text-align: center; overflow: hidden; border-radius: 0 0 var(--r-l) var(--r-l); } .noticias /* .f1 y .f2 eran las posiciones de `.formas`; ahora las lleva
   .patron.p1 / .patron.p2, arriba. `.f2` estaba ademas cogida por el
   pie (`display: grid`), asi que la forma heredaba un display que no
   le tocaba: por eso el nombre nuevo lleva `.patron` delante. */ .noticias  .no-cab { position: relative; margin-bottom: clamp(30px, 4vw, 50px); } .no-cab b { color: var(--oro); } .no-cab p { font-size: 18px; margin: 8px auto 0; max-width: 46ch; }
.no-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: clamp(16px, 2vw, 26px); margin-bottom: 34px; text-align: left; } .no { background: #fff; color: var(--navy); border-radius: 32px 32px 32px 0; overflow: hidden; display: flex; flex-direction: column; transition: translate .45s var(--mola); } .no:hover { translate: 0 -6px; } .no-img { aspect-ratio: 4/3; overflow: hidden; } .no-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--mola); } .no:hover img { scale: 1.06; } .no h3 { font-size: 20px; padding: 16px 20px 4px; } .no p { padding: 0 20px; color: var(--tinta-2); font-size: 15.5px; line-height: 1.35; } .no-m { align-self: flex-end; margin: auto 16px 16px; background: var(--oro); border-radius: 999px; padding: 3px 16px; font-weight: 800; font-size: 14px; transition: padding .3s var(--mola); } .no p + .no-m { margin-top: 12px; } .no:hover .no-m { padding-right: 24px; } .noticias-p { border-radius: 0; padding-top: var(--sec); } .noticias-p .no-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); }

/* familia */
.familia { position: relative; padding: clamp(40px, 5vw, 70px) 0 var(--sec); } .fa-bloque { position: relative; z-index: 1; width: min(46%, 660px); margin-left: var(--g); min-height: 300px; background: var(--oro); border-radius: 0 var(--r-l) 0 var(--r-l); padding: clamp(30px, 4vw, 60px) clamp(26px, 5vw, 70px); } .fa-bloque p { font-size: 18px; margin-top: 8px; max-width: 34ch; }
.fa-gris { position: relative; margin: -140px 0 0 clamp(16px, 13vw, 190px); padding: 90px var(--g) clamp(90px, 9vw, 130px) clamp(16px, 8vw, 120px); background: var(--gris); border-radius: 0 0 0 var(--r-l); overflow: hidden; } .fa-gris .patron { left: 4%; bottom: 0; background: #C9CDD5; opacity: 1; } .fa-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.fa-c { position: relative; display: flex; flex-direction: column; text-align: left; background: #fff; border-radius: 56px 0 0 0; padding: 86px 0 0; margin-top: 76px; color: var(--navy); transition: translate .45s var(--mola); } .fa-c:hover { translate: 0 -6px; } .fa-f { position: absolute; left: 50%; top: -76px; width: 148px; height: 148px; translate: -50% 0; border-radius: 50% 50% 0 50%; overflow: hidden; background: var(--navy); } .fa-f img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--mola); } .fa-c:hover .fa-f img { scale: 1.1; } .fa-t { display: block; padding: 0 22px 18px; font-size: 16.5px; line-height: 1.38; flex: 1; }
.fa-pie { display: flex; align-items: flex-end; } .fa-n { flex: 1; background: var(--oro); border-radius: 0 34px 34px 0; padding: 14px 26px 16px 22px; margin-right: -18px; font-size: 15px; line-height: 1.2; } .fa-n b { display: block; font-weight: 900; font-size: 19px; } .fa-b { position: relative; z-index: 1; width: 88px; height: 88px; flex: none; background: var(--navy); border-radius: 44px 44px 0 44px; display: grid; place-items: center; transition: background .3s; } .fa-b::after { content: ""; margin-left: 6px; border-left: 24px solid var(--oro); border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .fa-c:hover .fa-b { background: var(--azul); }

/* contacto */
.contacto { padding: var(--sec) var(--g); } .contacto-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(30px, 6vw, 90px); align-items: center; max-width: 1140px; margin: 0 auto; } .contacto-txt { display: flex; flex-direction: column; align-items: flex-start; } .contacto-txt h2 { font-size: clamp(34px, 3.8vw, 54px); } .contacto-txt h2 b { display: block; } .oferta { margin-top: 16px; background: var(--oro); border-radius: 18px 18px 0 18px; padding: 9px 22px; font-weight: 800; font-size: 18px; } .contacto-datos { margin-top: 26px; display: grid; gap: 6px; } .contacto-datos span { display: inline-block; width: 86px; color: var(--tinta-2); font-size: 14.5px; } .contacto-datos a { font-weight: 700; }
.forma { background: var(--oro); border-radius: var(--r-l) var(--r-l) 0 var(--r-l); padding: clamp(24px, 3.2vw, 42px); display: grid; gap: 12px; } .forma h3 { font-weight: 400; font-size: 24px; text-align: center; margin-bottom: 6px; } .forma h3 b { font-weight: 900; } .forma label { display: grid; gap: 3px; font-weight: 700; font-size: 14.5px; } .forma input:not([type="checkbox"]), .forma select { background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 11px 14px; width: 100%; font-weight: 400; font-size: 16px; color: var(--navy); transition: border-color .2s; } .forma input:focus, .forma select:focus { outline: 0; border-color: var(--navy); } .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .check { grid-template-columns: 20px 1fr !important; align-items: start; font-weight: 600 !important; gap: 8px !important; } .check input { width: 18px; height: 18px; accent-color: var(--navy); margin: 2px 0 0; } .check a { text-decoration: underline; font-weight: 800; } .forma small { font-size: 13.5px; line-height: 1.3; text-align: center; } .f-error { font-weight: 800; font-size: 14.5px; color: #7A0F0F; } .f-error:empty { display: none; } .forma .bt { border-radius: 999px; }

/* pie */
.pie { background: var(--navy); color: #fff; padding: clamp(50px, 6vw, 84px) var(--g) 22px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; border-radius: var(--r-l) var(--r-l) 0 0; } .pie-marca img { width: 170px; height: auto; } .pie-marca p { color: var(--claro); margin: 14px 0 18px; max-width: 32ch; } .pie h4 { font-size: 17px; font-weight: 900; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; } .pie-col li { padding: 3px 0; color: var(--claro); } .pie-col a { transition: color .2s; } .pie-col a:hover, .redes a:hover { color: var(--oro); } .pie-col small { margin-left: 7px; opacity: .7; } .redes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 15px; font-weight: 700; } .pie-legal { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px 22px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; font-size: 14px; color: var(--claro); }
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 58px; height: 58px; background: var(--navy); border: 3px solid var(--oro); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 7px rgba(255, 255, 255, .55); transition: box-shadow .3s; } .wa:hover { box-shadow: 0 0 0 12px rgba(255, 255, 255, .5); } .wa svg { width: 30px; height: 30px; fill: var(--oro); }
/* La columna de redes, encima del bot. Misma ropa que .wa —navy, aro
   dorado, glifo dorado— y no los colores de cada red: cuatro circulos
   de marca ajena sobre la portada es justo la incoherencia que marketing
   acaba de senalar. El aro blanco es mas fino que el de .wa (4px contra
   7px) para que el boton de WhatsApp siga siendo el principal. */
.redes-flot { position: fixed; right: 27px; bottom: 160px; z-index: 50; display: flex; flex-direction: column-reverse; gap: 11px; }
.redes-flot .rf { width: 44px; height: 44px; background: var(--navy); border: 2px solid var(--oro); border-radius: 50%; display: grid; place-items: center; color: var(--oro); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); transition: box-shadow .3s, transform .3s; }
.redes-flot .rf:hover { box-shadow: 0 0 0 8px rgba(255, 255, 255, .45); transform: translateY(-2px); }
.redes-flot .rf svg { width: 21px; height: 21px; }
.xiooni { position: fixed; right: 23px; bottom: 96px; z-index: 50; } .xi-bt { width: 52px; height: 52px; background: #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 16px rgba(21, 37, 61, .25); } .xi-bt img { height: 68px; width: auto; margin: 3px auto 0; max-width: none; }
.xi-caja { position: absolute; right: 0; bottom: 62px; width: min(350px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 190px)); max-height: min(560px, calc(100dvh - 190px)); background: #fff; border-radius: 28px 28px 0 28px; box-shadow: 0 18px 44px rgba(21, 37, 61, .28); padding: 12px; display: flex; flex-direction: column; gap: 8px; color: var(--navy); } .xi-cab { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--navy); color: #fff; border-radius: 20px 20px 0 20px; } .xi-cab img { width: 40px; height: 40px; flex: none; object-fit: cover; object-position: top; background: #fff; border-radius: 50%; } .xi-cab div { flex: 1; min-width: 0; line-height: 1.15; } .xi-cab b { display: block; font-weight: 900; font-size: 17px; } .xi-cab small { font-size: 12.5px; opacity: .8; } .xi-x { width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font-size: 23px; line-height: 1; transition: background .2s; } .xi-x:hover { background: rgba(255, 255, 255, .16); }
.xi-hilo { flex: 1; min-height: 110px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; } .xi-m { max-width: 92%; width: fit-content; padding: 8px 12px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .xi-m b { font-weight: 800; } .xi-m.ella { background: var(--gris); border-radius: 16px 16px 16px 0; } .xi-m.yo { align-self: flex-end; background: var(--navy); color: #fff; border-radius: 16px 16px 0 16px; } .xi-acc { display: block; width: fit-content; margin-top: 7px; padding: 4px 12px; border-radius: 11px 11px 0 11px; background: var(--oro); font-weight: 800; font-size: 13.5px; } .xi-acc:hover { background: var(--oro-2); } .xi-pensando { display: flex; gap: 4px; padding: 11px 12px; } .xi-pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--oro-o); animation: ia-p 1.1s infinite ease-in-out; } .xi-pensando i:nth-child(2) { animation-delay: .15s; } .xi-pensando i:nth-child(3) { animation-delay: .3s; } .xi-modo { padding: 3px 10px; border-radius: 999px; background: rgba(231, 170, 58, .22); font-size: 12.5px; font-weight: 700; text-align: center; } .xi-ops { display: flex; flex-wrap: wrap; gap: 5px; } .xi-ops[hidden], .xi-modo[hidden] { display: none; } .xi-ops button { border: 1.5px solid var(--navy); border-radius: 999px; padding: 3px 11px; font-size: 14px; font-weight: 700; transition: background .2s; } .xi-ops button:hover { background: var(--oro); }
.xi-form { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--linea); transition: box-shadow .2s; } .xi-form:focus-within { box-shadow: inset 0 0 0 1.5px var(--oro-o); } .xi-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--navy); } .xi-form button { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; } .xi-form svg { width: 18px; height: 18px; } .xi-mas { text-align: center; font-size: 13.5px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* página de proyecto */
.ph { position: relative; min-height: 86vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: var(--navy); padding: 110px var(--g) 110px; isolation: isolate; border-radius: 0 0 var(--r-l) var(--r-l); } .ph-s { min-height: 56vh; padding-bottom: 70px; } .ph-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; max-width: none; } .ph-velo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 62% 60% at 50% 52%, rgba(14, 25, 44, .68), rgba(14, 25, 44, .18)); } .ph .cinta { z-index: -1; } .ph .cinta path { stroke-width: 74; }
.ph h1 { font-size: clamp(34px, 4.8vw, 72px); max-width: 18ch; font-weight: 900; } .ph-t { display: flex; flex-direction: column; align-items: center; } .ph-t p { font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; margin-top: 10px; } .ph-t .ph-marca { font-weight: 900; font-size: 24px; color: var(--oro); margin: 0 0 8px; text-transform: uppercase; } .ph-logo { height: clamp(60px, 6.4vw, 92px); width: auto; margin-bottom: 18px; background: #fff; padding: 9px 18px; border-radius: 24px 24px 0 24px; }
.migas { display: flex; gap: 8px; font-size: 14.5px; margin-bottom: 14px; font-weight: 600; } .migas a:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .6; }
.ph-datos { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin: -62px auto 0; width: min(1040px, calc(100% - 2 * var(--g))); background: #fff; border-radius: 34px 0 34px 34px; box-shadow: 0 20px 44px rgba(21, 37, 61, .18); overflow: hidden; } .ph-datos > div { padding: 18px 24px; } .ph-datos > div + div { border-left: 1px solid var(--linea); } .ph-datos > div:first-child { background: var(--oro); } .ph-datos span, .ph-datos small { display: block; font-size: 14px; line-height: 1.2; } .ph-datos b { display: block; font-weight: 900; font-size: clamp(21px, 2.2vw, 32px); line-height: 1.15; }
.pc1 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 80px); padding: var(--sec) var(--g) var(--sec) 0; align-items: center; } .pc1-p { background: var(--oro); border-radius: 0 var(--r-l) var(--r-l) 0; padding: clamp(34px, 4.6vw, 66px) clamp(26px, 4vw, 60px) clamp(34px, 4.6vw, 66px) var(--g); } .pc1-p span { display: block; font-weight: 700; margin-bottom: 8px; } .pc1-p h2 { font-weight: 900; } .pc1-t { font-size: clamp(17px, 1.4vw, 19px); }
.pv { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; padding: 0 var(--g); } .fa-v { position: relative; display: block; width: 100%; border-radius: var(--r-l) var(--r-l) 0 var(--r-l); overflow: hidden; color: #fff; text-align: left; background: var(--navy); isolation: isolate; aspect-ratio: 16/9; } .fa-g { min-height: clamp(280px, 40vw, 560px); } .pv .fa-g:only-child { grid-column: 1/-1; } .pv .fa-v:not(.fa-g) { aspect-ratio: auto; height: 100%; } .fa-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: scale 1.2s var(--mola); }
/* Un reel es 9:16. Metido en la caja de 16/9 de .fa-v, el recorte
   se come dos tercios del alto: desaparecen la cabeza y el
   subtitulo quemado en el video, que es justo lo que dice. La caja
   toma la forma del video y se centra; el ancho se limita para que
   en pantalla grande no ocupe la pagina entera. */
.fa-v.fa-vert { aspect-ratio: 9/16; width: min(380px, 100%); min-height: 0; margin-inline: auto; } .pv-reel { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; } .pv-reel .fa-v.fa-vert { margin-inline: 0; } .pv-t > span { display: block; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-o); margin-bottom: 10px; } .pv-t h2 { font-weight: 900; } .pv-t p { max-width: 46ch; margin: 14px 0 24px; font-size: clamp(17px, 1.4vw, 19px); color: var(--tinta-2); } .fa-v:hover video { scale: 1.04; } .fa-v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 25, 44, .8)); z-index: -1; } .fa-v b { position: absolute; left: 24px; bottom: 20px; right: 100px; font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; }
.play { position: absolute; right: 18px; bottom: 16px; width: 64px; height: 64px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px rgba(14, 25, 44, .28); border-radius: 32px 32px 0 32px; transition: border-radius .35s var(--mola), background .25s; } .play svg { width: 28px; height: 28px; } .fa-v:hover .play { border-radius: 32px; background: rgba(255, 255, 255, .28); }
/* render 3D */
.re { padding: var(--sec) var(--g) 0; } .re-marco { position: relative; overflow: hidden; min-height: clamp(460px, 44vw, 660px); display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 60px); background: var(--navy); color: #fff; border-radius: var(--r-l) 0 var(--r-l) var(--r-l); isolation: isolate; } .re-marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 25, 44, .5), rgba(14, 25, 44, .68)); z-index: -1; } .re-p { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; } .re-t { max-width: 660px; } .re-t h2 { font-size: clamp(32px, 4vw, 58px); line-height: 1.04; } .re-t h2 b { white-space: nowrap; } .re-t p { margin: 14px auto 24px; max-width: 54ch; font-size: 18px; color: rgba(255, 255, 255, .92); } .re-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.re-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #0c0c0c; } .re-cont { display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; gap: 8px; white-space: nowrap; } .re-cont .bt { padding: 8px 18px; font-size: 14.5px; } .re-marco.abierto .re-cont { display: flex; } .re-marco.abierto .re-t { visibility: hidden; } .re-marco:fullscreen { border-radius: 0; }
.pa { padding: var(--sec) var(--g); } .am { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 34px; } .am li { background: var(--gris); border-radius: 999px; padding: 6px 18px; font-weight: 700; transition: background .25s; } .am li:hover { background: var(--oro); } .ga { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } .ga figure { grid-column: span 4; border-radius: 40px 40px 0 40px; overflow: hidden; aspect-ratio: 4/3; } .ga figure:first-child { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; } .ga img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--mola); } .ga figure:hover img { scale: 1.04; } .ga-duo figure { grid-column: span 4; grid-row: auto; aspect-ratio: auto; } .ga-duo figure:first-child { grid-column: span 8; grid-row: auto; aspect-ratio: 16/10; } .ga-duo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl { margin: 0 clamp(10px, 2vw, 30px); padding: var(--sec) clamp(16px, 4vw, 60px); background: var(--navy); color: #fff; border-radius: var(--r-l); } .pl-cab p { color: #DCE3EF; margin: 8px 0 16px; font-size: 18px; } .pl-cab h2 b { color: var(--oro); } .pl-filtros { display: flex; flex-wrap: wrap; gap: 6px; } .pl-filtros button { border-radius: 999px; padding: 5px 16px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); transition: background .2s, color .2s; } .pl-filtros .on { background: var(--oro); color: var(--navy); box-shadow: none; } .pl-filtros [data-e]:not([data-e=""])::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; box-shadow: 0 0 0 1.5px #fff; } .pl-filtros [data-e="disponible"]::before { background: #E7AA3A; } .pl-filtros [data-e="separado"]::before { background: #9664BE; } .pl-filtros [data-e="vendido"]::before { background: #E22350; }
.pl-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; margin-top: 18px; align-items: stretch; } .pl-marco { position: relative; background: #fff; border-radius: 34px; overflow: hidden; height: min(78vh, 760px); touch-action: pan-y; cursor: grab; } .pl-marco.mano { cursor: grabbing; } .pl-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; } .pl-lienzo img { width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; } #pl-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#pl-svg polygon { stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: opacity .2s, fill .15s; vector-effect: non-scaling-stroke; } #pl-svg .disponible { fill: rgba(31, 168, 92, .92); } #pl-svg .separado { fill: rgba(150, 100, 190, .86); } #pl-svg .vendido { fill: rgba(226, 35, 80, .66); } #pl-svg .apagado { opacity: .1; } #pl-svg.espera polygon { opacity: 0; } #pl-svg.entra polygon { animation: lote-entra .5s ease-out var(--d, 0s) backwards; } @keyframes lote-entra { from { opacity: 0; } } #pl-svg polygon:hover { fill: var(--navy); } #pl-svg .sel { fill: var(--navy); stroke-width: 2.5; }
.pl-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 4px; } .pl-zoom button { width: 40px; height: 40px; background: var(--navy); color: #fff; border-radius: 50%; font-size: 19px; font-weight: 700; }
.pl-ficha { background: #fff; color: var(--navy); border-radius: 34px; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .pl-ficha h3 { font-weight: 900; font-size: 32px; line-height: 1; } .fi-e { width: fit-content; font-size: 14.5px; font-weight: 800; } .fi-e::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; } .fi-e.disponible::before { background: #1FA85C; } .fi-e.separado::before { background: #9664BE; } .fi-e.vendido::before { background: #E22350; } .fi-d { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fi-d span { display: block; font-size: 13.5px; color: var(--tinta-2); } .fi-d b { font-weight: 900; font-size: 19px; } .fi-c { background: var(--gris); border-radius: 22px; padding: 14px 16px; display: grid; gap: 4px; } .fi-c label { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; } .fi-c input { width: 100%; accent-color: var(--navy); } .fi-c b { font-weight: 900; font-size: 25px; line-height: 1.15; } .fi-c small { color: var(--tinta-2); line-height: 1.25; } .pl-ficha .bt { margin-top: auto; } .pl .nota { color: var(--claro); }
.pm { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; padding: var(--sec) var(--g); align-items: stretch; } .pm ul { margin: 18px 0; } .pm li { padding: 10px 0; border-bottom: 1px solid var(--linea); font-weight: 700; } .pm-mapa { width: 100%; min-height: 400px; height: 100%; border: 0; border-radius: var(--r-l) var(--r-l) 0 var(--r-l); }
.ots { padding: 0 var(--g) var(--sec); } .ots h2 { margin-bottom: 22px; } .ots-g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ot { position: relative; border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; aspect-ratio: 16/8; color: #fff; display: flex; align-items: flex-start; isolation: isolate; } .ot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: scale 1.2s var(--mola); } .ot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 25, 44, .82), transparent 50%); z-index: -1; } .ot:hover img { scale: 1.05; } .ot span { padding: 22px 26px; } .ot b { display: block; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; }

/* nosotros */
.bi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: 130px var(--g) clamp(60px, 7vw, 100px); min-height: 92vh; } .bi-t { display: flex; flex-direction: column; align-items: flex-start; } .bi h1 { font-size: clamp(36px, 4.4vw, 64px); } .bi h1 b { display: inline-block; background: var(--oro); padding: 0 14px; border-radius: 10px; margin-top: 6px; } .bi-t > img { width: 160px; height: auto; margin-bottom: 26px; } .bi-t p { margin: 20px 0; font-size: 18px; max-width: 44ch; } .bi-t p b { font-weight: 800; } .bi-v { position: relative; aspect-ratio: 1; border-radius: 50% 50% 0 50%; overflow: hidden; background: var(--oro); } .bi-v video { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.mvv { background: var(--gris); margin: 0 clamp(10px, 8vw, 120px); padding: clamp(50px, 6vw, 90px) clamp(16px, 5vw, 70px); border-radius: var(--r-l); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); } .mvv article { position: relative; background: var(--navy); color: #fff; border-radius: 0 var(--r-l) var(--r-l) var(--r-l); padding: clamp(70px, 6vw, 90px) clamp(24px, 3vw, 42px) clamp(30px, 3vw, 44px); margin-top: 40px; } .mvv-i { position: absolute; right: 44%; top: -40px; width: 92px; height: 92px; display: grid; place-items: center; background: #fff; border-radius: 50%; color: var(--oro-o); box-shadow: 0 0 0 8px var(--gris); } .mvv-i svg { width: 52px; height: 52px; } .mvv span { font-size: 18px; } .mvv h2 { color: var(--oro); font-weight: 900; text-transform: none; margin-bottom: 12px; }
.lin { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 5vw, 70px); align-items: end; padding: var(--sec) var(--g) 0; } .lin-f { position: relative; height: clamp(360px, 36vw, 520px); overflow: hidden; } .lin-f::before { content: ""; position: absolute; left: 50%; bottom: -28%; translate: -50% 0; width: min(90%, 480px); aspect-ratio: 1; border-radius: 50%; border: clamp(44px, 5vw, 70px) solid var(--oro); } .lin-f img { position: absolute; left: 50%; bottom: -32%; translate: -50% 0; height: 120%; width: auto; max-width: none; } .lin-t { padding-bottom: clamp(30px, 5vw, 70px); } .lin-t h2 { margin-bottom: 18px; } .lin ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lin li a { display: block; background: var(--gris); border-radius: 22px 22px 0 22px; padding: 14px 18px; transition: background .25s; height: 100%; } .lin li a:hover { background: var(--oro); } .lin li b { display: block; font-weight: 900; font-size: 19px; } .lin li span { font-size: 15px; line-height: 1.25; display: block; }
.tira-p { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 clamp(10px, 2vw, 30px); border-radius: var(--r-l); overflow: hidden; } .tira-p a { position: relative; aspect-ratio: 3/3.4; display: grid; place-items: center; overflow: hidden; color: #fff; isolation: isolate; } .tira-p img.f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1.2s var(--mola); } .tira-p a::after { content: ""; position: absolute; inset: 0; background: rgba(14, 25, 44, .58); z-index: -1; transition: background .4s; } .tira-p a:hover::after { background: rgba(14, 25, 44, .25); } .tira-p a:hover img.f { scale: 1.06; } .tira-p img.l { width: clamp(120px, 15vw, 210px); height: auto; background: #fff; padding: 8px 12px; border-radius: 18px 18px 0 18px; } .tira-p b { font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); text-transform: uppercase; text-align: center; padding: 0 12px; }
.val { padding: var(--sec) var(--g); } .val-i { position: relative; border-radius: var(--r-l); overflow: hidden; height: clamp(360px, 38vw, 540px); color: #fff; text-align: center; padding-top: 34px; isolation: isolate; } .val-i > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .val-i .cinta { z-index: -1; } .val-i span { font-size: 18px; } .val-i h2 { font-weight: 900; font-size: clamp(26px, 2.8vw, 38px); text-shadow: 0 2px 16px rgba(14, 25, 44, .6); } .val-g { display: grid; grid-template-columns: repeat(3, minmax(0, 290px)); justify-content: center; gap: clamp(12px, 3vw, 40px); margin-top: -96px; position: relative; z-index: 1; } .val-g article { background: var(--oro); border-radius: 145px 145px 0 80px; padding: 46px 26px 40px; text-align: center; } .val-g article:nth-child(even) { background: var(--navy); color: #fff; } .val-g article:nth-child(even) b { color: var(--oro); } .val-g b { display: block; font-size: 56px; font-weight: 900; line-height: 1; } .val-g h3 { font-size: 22px; text-transform: uppercase; margin: 8px 0 6px; font-weight: 900; } .val-g p { font-size: 15.5px; line-height: 1.32; }
.equipo { position: relative; color: #fff; overflow: hidden; text-align: center; padding: clamp(70px, 10vw, 140px) var(--g); isolation: isolate; } .equipo::after { content: ""; position: absolute; inset: 0; background: rgba(14, 25, 44, .55); z-index: -1; } .equipo h2 { font-size: clamp(34px, 5vw, 76px); } .equipo h2 b { background: var(--oro); color: var(--navy); padding: 0 16px; border-radius: 14px; } .equipo .bt { margin-top: 24px; }
.pil { padding: var(--sec) var(--g); text-align: center; } .pil-g { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: clamp(14px, 2.4vw, 30px); margin-top: 34px; } .pil-g article { background: var(--oro); border-radius: 110px 110px 0 60px; padding: 46px 26px 36px; } .pil-g article:nth-child(even) { background: var(--navy); color: #fff; } .pil-g h3 { font-size: 24px; font-weight: 900; text-transform: uppercase; margin-bottom: 6px; }

@media (max-width: 1100px) {
  .nav-links { font-size: 13.5px; gap: 12px; } .no-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } .pie { grid-template-columns: 1fr 1fr; } .pl-cuerpo { grid-template-columns: minmax(0, 1fr); } .pl-marco { height: 66vh; } .ac-i { padding-right: 110px; } .ac-d { padding-left: 130px; } .pc-a { font-size: 13.5px; } .tabs-c { max-width: 100%; }
}
@media (max-width: 860px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fa-grid { grid-template-columns: minmax(0, 1fr); } .fa-bloque { width: auto; margin-right: var(--g); } .fa-gris { margin-left: 0; padding-left: var(--g); }
}
@media (max-width: 760px) {
  body { font-size: 16px; } .nav { height: 60px; } .nav-logo { width: 112px; } .nav-links { display: none; } .nav-menu { display: block; }
  .hero-t { inset: 60px 0 0; } .hero h1 { font-size: 11.6vw; } .cinta path { stroke-width: 120; }
  .ac { grid-template-columns: minmax(0, 1fr); } .ac-i { padding: 60px var(--g) 40px; } .ac-c { position: relative; left: auto; bottom: auto; translate: none; margin: 60px auto -2px; width: 62vw; max-width: 280px; } .ac-d { padding: 60px var(--g); justify-items: stretch; } .cifra { width: 100%; } .ac-tag { right: -12%; }
  .pr-panel { width: 92%; height: 300px; } .pr-cab { display: block; } .tabs-c { margin-top: 20px; } .pr-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 6px var(--g) 22px; scrollbar-width: none; gap: 14px; } .pr-grid::-webkit-scrollbar { display: none; } .pc { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; aspect-ratio: auto; height: 460px; } .proyectos .nota { text-align: left; }
  .no-grid, .pil-g, .val-g { grid-template-columns: minmax(0, 1fr); } .val-g { margin-top: 20px; } .val-i { height: 300px; }
  .contacto-in, .pm, .lin, .ots-g, .pc1, .bi, .mvv { grid-template-columns: minmax(0, 1fr); } .pc1 { padding-right: 0; } .pc1-p { margin-right: 16px; } .pc1-t { padding: 0 var(--g); } .bi { min-height: 0; padding-top: 100px; } .bi-v { max-width: 340px; margin: 0 auto; width: 100%; } .mvv { margin: 0 10px; }
  .pv { grid-template-columns: minmax(0, 1fr); } .fa-g { min-height: 0; aspect-ratio: 16/10; } .pv .fa-v:not(.fa-g) { aspect-ratio: 16/10; height: auto; } .re-marco { min-height: 72vh; } .re-acc .bt { width: 100%; } .re-t p { font-size: 16px; }
  .ph { padding-top: 96px; } .ph-datos { grid-template-columns: 1fr 1fr; } .ph-datos > div:nth-child(3) { border-left: 0; } .ph-datos > div:nth-child(n+3) { border-top: 1px solid var(--linea); } .ph-datos > div { padding: 14px 18px; } .ga figure, .ga figure:first-child { grid-column: span 12; grid-row: auto; aspect-ratio: 16/10; } .fa-v.fa-vert { width: min(340px, 100%); } .pv-reel .fa-v.fa-vert { margin-inline: auto; } .pv-t { padding: 0 var(--g); } .ga-duo figure, .ga-duo figure:first-child { grid-column: span 12; aspect-ratio: 16/10; } .pie { grid-template-columns: minmax(0, 1fr); } .f2 { grid-template-columns: minmax(0, 1fr); } .pl-marco { height: 58vh; } .ot { aspect-ratio: 16/9; } .tira-p { grid-template-columns: minmax(0, 1fr); } .tira-p a { aspect-ratio: 16/9; } .lin ul { grid-template-columns: minmax(0, 1fr); }
  .xiooni { right: 90px; bottom: 23px; }
  /* Aqui el bot se pone al lado de .wa, o sea que la esquina ya esta
     llena en horizontal. Una columna de cuatro circulos mas cruzaria
     media pantalla; las cuatro redes estan a un toque en el pie. */
  .redes-flot { display: none; } .xi-caja { right: -70px; } .wa { right: 18px; bottom: 18px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }

/* Campo trampa del formulario (honeypot). Fuera de la pantalla, no
   display:none: algunos bots saltan lo que esta en display:none, y
   un lector de pantalla no lo anuncia porque lleva aria-hidden. */
.f-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   EL PATRON SE DISUELVE, Y SE MUEVE (9/11/2026)

   Ver el encabezado de scratchpad/patron-suave.py.

   ESTE BLOQUE VA AL FINAL DE LA HOJA Y TIENE QUE SEGUIR AHI. Las
   tres reglas `mask:` ABREVIADAS de mas arriba (.patron, luego
   .hero::after y compania, luego .ph::before y compania) reinician
   mask-size, mask-repeat, mask-position Y mask-composite. Cualquiera
   de ellas colocada despues de esto lo deja en una sola capa y en
   `composite: add`: ni difuminado ni nada, y sin un error en
   consola. Esas tres se quedan donde estan a proposito: son lo que ve
   un navegador que no entre en este @supports.

   TODAS las superficies de patron del sitio entran aqui: las tres
   `.patron` sueltas de la portada y las ocho de pseudoelemento. Si
   manana nace otra, se anade a esta lista o nacera con el borde
   recto y quieta.
   ============================================================ */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .patron,
  .ph::before, .bi::before, .contacto::before, .ia-main::before,
  .hero::after, .confia::after, .david::after, .val-i::after {
    /* Esquina por la que el bloque toca la seccion: ahi el patron va
       entero y desde ahi se apaga. */
    --pat-foco: 0% 100%;
    /* 150% deja el alfa en cero justo en la esquina contraria (que
       esta a ~141% en diagonal). Menos, y el bloque se queda en nada;
       mas, y vuelve el borde. */
    --pat-radio: 150%;
    -webkit-mask-image: url(/img/patron-gx-malla.svg),
      radial-gradient(var(--pat-radio) var(--pat-radio) at var(--pat-foco),
        #000 0 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .16) 78%, transparent 94%);
    mask-image: url(/img/patron-gx-malla.svg),
      radial-gradient(var(--pat-radio) var(--pat-radio) at var(--pat-foco),
        #000 0 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .16) 78%, transparent 94%);
    -webkit-mask-size: 150px 150px, 100% 100%;
    mask-size: 150px 150px, 100% 100%;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: pat-deriva 26s linear infinite;
  }
  /* David va a toda altura por la derecha: ancla al centro-derecha, y
     con el radio de 150% no se apagaria ni por arriba ni por abajo. */
  .david::after { --pat-foco: 100% 50%; --pat-radio: 105%; }
  /* Estos entran por arriba, no por abajo. */
  .val-i::after, .patron.p1 { --pat-foco: 0% 0%; }
  .contacto::before { --pat-foco: 100% 0%; }
  .patron.p2 { --pat-foco: 100% 100%; }

  /* UNA BALDOSA EXACTA, o el bucle da un salto visible cada vuelta.
     Solo se mueve la capa del mosaico; el degradado se queda clavado
     en 0 0 porque es el que dibuja el borde difuminado. */
  @keyframes pat-deriva {
    from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
    to { -webkit-mask-position: -150px 150px, 0 0; mask-position: -150px 150px, 0 0; }
  }

  @media (max-width: 760px) {
    /* `.david` se apila y el patron pasa a ser una banda baja por la
       izquierda: el foco de escritorio lo dejaria apagado justo del
       lado que se ve. */
    .david::after { --pat-foco: 0% 100%; --pat-radio: 150%; }
  }
}

/* ============================================================
   EL PATRON, CUADRADO POR CUADRADO (9/11/2026)

   Ver el encabezado de la seccion EL PATRON de js/sitio.js. Aqui solo
   estan las reglas; la forma la calcula el JS.

   `js-pat` LA PONE EL JS cuando ya ha construido el campo. Mientras no
   este —sin JS, o si la lectura de geometria de un seudoelemento
   falla— se queda el bloque enmascarado del @supports de arriba, con
   su degradado. Ese es el plan B, no un resto.

   Estas reglas van con `html.js-pat` delante a proposito: eso les da
   especificidad (0,2,1) y ganan al @supports de arriba (0,1,0) este
   donde este. Confiar en el orden ya salio mal una vez con las cintas.
   ============================================================ */
html.js-pat .patron { background: none; animation: none; -webkit-mask: none; mask: none; }
html.js-pat .hero::after, html.js-pat .confia::after, html.js-pat .david::after,
html.js-pat .val-i::after, html.js-pat .ph::before, html.js-pat .bi::before,
html.js-pat .contacto::before, html.js-pat .ia-main::before { display: none; }

/* El contenedor NO recorta: los cuadrados se salen de la caja a
   proposito y lo que sobra lo recorta la seccion, que es la que lleva
   overflow:hidden. El color lo pone el JS, copiado del bloque viejo. */
.pat-c { position: absolute; pointer-events: none; }
/* La capa intermedia: es lo que se desplaza con el scroll (paralaje),
   de un tiron, en vez de mover los cuadrados uno a uno. El campo se
   construye mas alto que la caja para que al moverse no asome el
   vacio. */
.pat-capa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* OJO CON EL SELECTOR: tiene que colgar de `.pat-capa`, no de
   `.pat-c`. La capa es ella misma un <i> hijo de `.pat-c`, asi que un
   `.pat-c > i` le caeria encima y se pondria a latir, a girar y a
   escalarse ENTERA, arrastrando los cientos de cuadrados con ella. */
.pat-capa > i {
  position: absolute; display: block; box-sizing: border-box;
  border-style: solid; border-color: currentColor;
  opacity: var(--a, 1);
  transform-origin: 50% 50%;
  /* EL FOCO DEL CURSOR. `--cerca` va de 0 a 1 y lo escribe el JS.
     Esta en box-shadow y en el color del trazo a proposito: son las
     unicas dos cosas que no toca ninguna de las cuatro animaciones
     —que llevan opacity, transform y scale—, asi que encenderse no se
     pelea con moverse. Si el navegador no sabe color-mix, se cae esa
     linea sola y queda el resplandor, que ya se ve. */
  box-shadow: 0 0 calc(var(--cerca, 0) * 20px) rgba(255, 255, 255, .45);
  border-color: color-mix(in srgb, currentColor, #fff calc(var(--cerca, 0) * 70%));
  transition: box-shadow .3s ease, border-color .3s ease;
  /* TRES a la vez. Las duraciones de aqui son solo el respaldo: el JS
     le pone a cada cuadrado las suyas, distintas, con
     `animation-duration` de tres valores. */
  animation:
    pat-latido 5s ease-in-out infinite,
    pat-vaiven 11s ease-in-out infinite,
    pat-pulso 6s ease-in-out infinite,
    pat-entra .8s cubic-bezier(.2, .9, .25, 1) backwards;
  animation-play-state: paused;
}

/* Las secciones azules enteras: pocos cuadrados, grandes y muy
   transparentes, cruzando despacio. El contenedor se recorta EL SOLO
   —de ahi el overflow— para no obligar a la seccion a llevar
   overflow:hidden; hay secciones que se desbordan a proposito. */
.pat-anfitrion { isolation: isolate; }
.pat-fondo { inset: 0; z-index: -1; overflow: hidden; color: var(--oro); }
/* ============================================================
   EL CAMPO DE PATRON SOBRE FONDO CLARO

   Ver el bloque 4 de montarPatron() en js/sitio.js: quien lo pide y
   por que va por clase y no por color.

   Las dos reglas de aqui NO son un retoque de gusto: las dos de
   arriba se dan la vuelta cuando la seccion es blanca.

   - El trazo sale de `currentColor`, que para las secciones azules es
     oro. Oro sobre blanco a 7-20 % de opacidad es crema y no se ve.
     Navy sobre blanco a esa opacidad cae en #D0D3D8 - #ECEDEF, la
     misma familia de gris frio que `.fa-gris .patron` (#C9CDD5): en
     claro el patron no es dorado, y eso ya estaba decidido ahi.

   - El foco del cursor de la regla base aclara el trazo hacia #fff y
     pone un resplandor blanco. Sobre azul enciende; sobre blanco
     APAGA. Aqui el trazo tira hacia el oro y el resplandor es dorado.

   Especificidad (0,3,0) contra la (0,2,0) de `.pat-capa > i`, asi que
   gana este donde este y no depende del orden. Confiar en el orden ya
   salio mal una vez.
   ============================================================ */
.pat-fondo.pat-fondo-claro { color: var(--navy); }
.pat-fondo-claro > .pat-capa > i {
  box-shadow: 0 0 calc(var(--cerca, 0) * 22px) rgba(231, 170, 58, .55);
  border-color: color-mix(in srgb, currentColor, var(--oro) calc(var(--cerca, 0) * 85%));
}
/* Arrancan paradas y solo corren con la seccion a la vista: son
   cientos de cuadrados por tres animaciones cada uno. */
.pat-c.pat-viva > .pat-capa > i { animation-play-state: running; }

/* LAS TRES VAN EN PROPIEDADES DISTINTAS Y NO ES CASUALIDAD: `opacity`,
   `transform` y `scale` son tres propiedades separadas, asi que las
   tres animaciones conviven. Si dos cayeran sobre la misma, no se
   suman: gana la ultima declarada y la otra no se ve. Por eso el
   bamboleo va dentro del `transform` del vaiven y no en un `rotate`
   suelto, que chocaria con el dia que alguien quiera animar `rotate`.

   Cada cuadrado entra con su propia fase (el JS le pone retardos
   negativos), asi que esto se lee como una onda cruzando en diagonal
   y no como un parpadeo a la vez.

   Si un navegador no sabe multiplicar la variable dentro del
   fotograma, la declaracion se cae y manda el `opacity: var(--a)` de
   arriba: el cuadrado se queda quieto con su alfa, que es justo el
   plan B que queremos. */
@keyframes pat-latido {
  0%, 100% { opacity: calc(var(--a) * .22); }
  50% { opacity: var(--a); }
}
@keyframes pat-vaiven {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(calc(var(--vx, 0) * 1px), calc(var(--vy, 0) * -1px)) rotate(calc(var(--gr, 0) * 1deg)); }
  50% { transform: translate(calc(var(--vx, 0) * 1.4px), calc(var(--vy, 0) * .6px)) rotate(0deg); }
  75% { transform: translate(calc(var(--vx, 0) * .3px), calc(var(--vy, 0) * 1px)) rotate(calc(var(--gr, 0) * -1deg)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes pat-pulso {
  0%, 100% { scale: var(--s0, 1); }
  50% { scale: var(--s1, 1); }
}

/* LA ENTRADA. Va la ULTIMA de las cuatro y con relleno `backwards`:
   mientras no le llega su turno ensena el fotograma 0% —invisible— y
   en cuanto termina deja de rellenar y mandan otra vez las tres de
   siempre. Es la unica forma de encadenar dos animaciones sobre las
   MISMAS propiedades sin que la primera se coma a la segunda para
   siempre: con `forwards` o `both` se quedaria clavada en el 100% y
   el campo no se moveria nunca mas.

   Por eso tiene que tocar las tres propiedades de las otras tres: la
   que no nombre aqui se la sigue llevando su animacion de siempre y
   el cuadrado se veria moverse antes de haber entrado.

   El retardo lo pone el JS, POSITIVO y creciente con la distancia al
   ancla: eso es lo que hace que broten en ola en vez de aparecer
   todos de golpe. */
@keyframes pat-entra {
  /* Entra volando desde donde le toque derivar, al doble de lejos, y
     girado: `--vx`/`--vy` ya traen el rumbo de cada cuadrado, asi que
     no hay dos que lleguen del mismo sitio. */
  0% { opacity: 0; scale: .1; transform: translate(calc(var(--vx, 0) * 2px), calc(var(--vy, 0) * 2px)) rotate(-70deg); }
  45% { opacity: var(--a); }
  70% { scale: 1.18; }
  100% { opacity: var(--a); scale: 1; transform: translate(0, 0) rotate(0deg); }
}

/* ============================================================
   EL CUADRO DE PROMOCIONES (9/11/2026)

   Ver el encabezado de la seccion EL CUADRO DE PROMOCIONES de
   js/sitio.js: quien lo abre, cuando y por que solo una vez.

   El velo va aparte de la tarjeta y no de padre, para que cerrar
   pulsando fuera sea un clic en el velo y no haya que andar mirando
   si el clic venia de dentro.

   La animacion de entrada se la come sola el bloque de
   prefers-reduced-motion de mas arriba (`animation: none !important`),
   y el cuadro aparece puesto. Que es lo correcto: lo que no puede
   pasar es que no aparezca.
   ============================================================ */
.promo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.promo-velo { position: absolute; inset: 0; background: rgba(14, 25, 44, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: promo-velo .3s ease both; }
.promo-caja {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--navy); color: #fff; border-radius: 32px 32px 32px 0;
  padding: clamp(24px, 4vw, 34px); box-shadow: 0 24px 60px rgba(14, 25, 44, .45);
  animation: promo-entra .45s var(--mola) both;
}
.promo-caja h3 { font-size: clamp(23px, 2.6vw, 29px); line-height: 1.1; padding-right: 28px; }
.promo-caja > p { color: #DCE3EF; font-size: 15.5px; line-height: 1.4; margin: 10px 0 18px; }
.promo-x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; font-size: 23px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .1); transition: background .2s; }
.promo-x:hover { background: rgba(255, 255, 255, .22); }
.promo-f { display: grid; gap: 11px; }
.promo-f > label { display: grid; gap: 5px; font-size: 14px; font-weight: 700; }
.promo-f input[type="text"], .promo-f input[type="email"], .promo-f input[type="tel"] {
  width: 100%; padding: 11px 14px; border-radius: 14px; font: inherit; font-weight: 600;
  color: var(--navy); background: #fff; border: 2px solid transparent; transition: border-color .2s;
}
.promo-f input:focus-visible { outline: none; border-color: var(--oro); }
.promo-f .check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.promo-f .check input { accent-color: var(--oro); margin-top: 2px; flex: none; }
.promo-f .check a { color: var(--oro); text-decoration: underline; }
/* La trampa de spam: fuera de la vista pero NO con display:none, que
   algunos bots sí miran. */
.promo-f .f-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.promo-error { color: #FFB4C0; font-size: 13.5px; font-weight: 700; margin: 0; }
.promo-error:empty { display: none; }
.promo-f .bt { margin-top: 3px; }
.promo-nota { color: var(--claro, #DCE3EF); opacity: .75; font-size: 12.5px; line-height: 1.3; }
.promo-ok { color: #DCE3EF; font-size: 15.5px; line-height: 1.4; margin: 10px 0 0; }
@keyframes promo-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes promo-entra { from { opacity: 0; translate: 0 26px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 420px) { .promo-caja { border-radius: 26px 26px 26px 0; } }