/* ============================================================
   EL TEMA OSCURO SOBRE base.css
   ------------------------------------------------------------
   El plano ya estaba bien construido: todo su color sale de
   variables declaradas en base.css. Asi que para pasarlo al
   negro no hace falta reescribir sus 300 lineas de CSS ni
   tocar masterplan.js — basta redefinir esas variables. Este
   archivo se carga DESPUES de plano.css y no hace nada mas.

   POR QUE IMPORTA QUE SEA ASI: este plano se embebe dentro de
   las paginas de proyecto. Mientras fuera claro, aparecia como
   una tarjeta blanca pegada en mitad de una pagina negra, que
   es exactamente lo que se veia mal. Cambiando el tema, el
   plano deja de ser un recuadro y pasa a ser parte de la
   pagina.

   LOS TRES COLORES DE ESTADO SE QUEDAN. Verde libre, ambar
   separado, rojo vendido. Eso no es decoracion: es el dato.
   Solo se aclaran para que tengan contraste sobre negro.
   ============================================================ */

:root{
  /* Fondos */
  --bg:        var(--fondo-2);
  --bg-2:      var(--fondo);
  --bg-3:      var(--fondo-3);

  /* Texto */
  --ink:       #ffffff;
  --ink-2:     rgba(255,255,255,.72);
  --ink-3:     rgba(255,255,255,.52);

  /* Lineas */
  --line:      rgba(255,255,255,.12);
  --line-2:    rgba(255,255,255,.2);
  --line-navy: rgba(255,255,255,.16);

  /* Lo que antes era "azul marino sobre claro" ahora es
     "blanco sobre negro": mismo papel, colores invertidos. */
  --navy:      #ffffff;
  /* --navy-2 tiene el mismo doble uso que --on-navy-2: es el
     hover de una pastilla blanca y, a la vez, el fondo de tres
     superficies (.tour del plano, .band .card, el recuadro de
     cifras de la portada). Se queda oscuro, que es lo que son
     esas tres, y el hover de la pastilla se escribe aparte, mas
     abajo. Voltearlo dejo el visor del recorrido 360 blanco con
     texto blanco dentro. */
  --navy-2:    var(--fondo-3);
  --bone:      var(--fondo);
  --on-navy:   var(--fondo);
  /* OJO: --on-navy y --on-navy-2 no van juntos, aunque el nombre
     diga lo contrario. --on-navy es la letra de una PASTILLA de
     marca, cuyo fondo arriba se volteo a blanco, asi que baja a
     oscuro. --on-navy-2 es la letra floja de una BANDA, y las
     bandas siguen siendo oscuras, asi que sube a blanco.
     Voltearlos juntos dejo en tinta negra el subtitulo de las
     cuatro unidades, el del fundador, el del area de miembros y
     los dos textos de cita y oferta: nueve parrafos invisibles
     sobre azul. */
  --on-navy-2: rgba(255,255,255,.68);

  /* El dorado queda como acento de interfaz, aclarado para que
     se lea sobre negro. */
  --gold:      #e7aa3a;
  --gold-d:    #f0c576;
  --gold-l:    #f7e6a8;

  /* Los estados, aclarados: sobre negro, el verde y el rojo
     originales quedaban apagados. */
  --st-disponible: #45c98b;
  --st-separado:   #f0bd5c;
  --st-vendido:    #e0665a;

  /* Las sombras de color no tienen sentido sobre negro. */
  --shadow-hard:     0 22px 48px -14px rgba(0,0,0,.8);
  --shadow-hard-sm:  0 14px 30px -10px rgba(0,0,0,.7);
  --shadow-hard-gold:0 26px 56px -14px rgba(0,0,0,.8);

  /* Esquinas: el lenguaje nuevo no tiene cantos vivos. */
  --r:      22px;
  --r-md:   14px;
  --r-pill: 999px;
}

html,body{background:var(--fondo);color:#fff}

/* Las cajas del plano: sin borde duro, con una linea interior
   finisima, igual que las tarjetas del resto del sitio. */
.side__box,.panel,.plano__canvas,.tagbox{
  background:rgba(255,255,255,.045);
  border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

/* El lienzo del plano lleva la foto aerea detras: ahi el fondo
   no se ve, pero el marco si. */
.plano__canvas{overflow:hidden}

/* Los campos de texto y los chips. */
input,select,textarea{
  background:rgba(255,255,255,.06);color:#fff;
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  border-radius:999px;
}
input::placeholder{color:rgba(255,255,255,.4)}
.chip,.tab{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);border-color:transparent}
.chip:hover,.tab:hover{background:rgba(255,255,255,.1)}

/* La fila de un lote en el listado. */
.li{border-color:rgba(255,255,255,.08)}
.li:hover{background:rgba(255,255,255,.06)}

/* El tema claro dibujaba el logo en color sobre blanco. */
.brand img,.plano-head img{filter:brightness(0) invert(1)}

/* ---------- Los logotipos de proyecto, sobre azul ----------
   El de Mareva esta dibujado en tinta oscura (#00484f) con una
   ola en degradado de aguamarina a petroleo. Sobre el azul de la
   pagina desaparece, y las dos salidas faciles son malas: pasarlo
   a blanco con un filtro le parte el degradado de la ola, y
   aclararlo le cambia los colores de marca.

   La salida buena es la que ya usaba el boleto de Mareva: ponerle
   detras el papel blanco para el que fue dibujado. Un logotipo
   sobre su propio fondo no es un parche, es como se imprime en
   todo lo demas.

   El filete de color sobra cuando hay chip: ya hay un borde. */
.cot-marca{border-left:0;padding-left:0;align-items:flex-start}
.cot-marca img{height:34px}
.cot-marca img,
.marca-chip img{
  background:#fff;border-radius:14px;padding:10px 20px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.65);
}
@media (max-width:640px){.cot-marca img{padding:8px 14px}}

/* ============================================================
   EL LOGOTIPO, UNA SOLA VEZ

   cita.html y oferta.html eran callejones sin salida: se entraba
   desde un anuncio y no habia forma de volver al sitio, asi que
   cada una puso su propio logotipo arriba, centrado, como unico
   enlace de vuelta. Ahora llevan la barra compartida, que ya
   tiene el logotipo y ademas lleva a todas partes. Dos
   logotipos, uno encima del otro, solo dicen que se pegaron dos
   cabeceras.

   Se oculta el de la pagina, no el de la barra: el de la barra
   es el que ademas navega. */
.vsl-top, .of-top{ display:none }

/* ============================================================
   LAS BANDAS OSCURAS, QUE SE HABIAN VUELTO BLANCAS

   EL ERROR Y COMO SALIO. Arriba, en :root, --navy pasa a blanco.
   Eso es lo correcto para el 90 % de sus usos, que son pastillas
   y botones de marca: un boton navy sobre pagina navy no se ve.
   Pero --navy tambien era el fondo de las BANDAS —el pie, el
   hero de cada unidad, la portada— es decir, "la franja oscura
   de una pagina clara". Al voltear el token, esas franjas se
   volvieron blancas con letra oscura, y quedaron como parches de
   pagina vieja en mitad del sitio nuevo. Lo vi en
   xioon-networking: el hero y el pie, blancos, entre dos
   secciones azules.

   LA REGLA PARA DISTINGUIRLOS, porque va a hacer falta otra vez:
   si --navy era el fondo de algo que ocupa el ancho de la
   pantalla, es una banda y aqui se queda oscura. Si era el fondo
   de algo que cabe en la mano —boton, chip, pastilla, burbuja—
   es marca y el volteo a blanco esta bien.

   POR QUE --fondo-2 Y NO --fondo. Una banda tiene que seguir
   leyendose como banda. Con el mismo azul que la pagina
   desaparece el limite y el pie se confunde con el contenido.
   Un escalon de claridad basta.
   ============================================================ */
.band, .footer, .portada, .unidad-hero, .nosotros-hero,
.hero-video, .tour360-caja, .unidades, .menu-tel__panel{
  background: var(--fondo-2);
  color: #fff;
}
.band h1, .band h2, .band h3,
.footer h1, .footer h2, .footer h3,
.unidad-hero h1, .unidad-hero h2, .unidad-hero p,
.portada h1, .portada h2{ color: #fff }

/* El degradado que remata el hero bajaba del navy al fondo de
   pagina; los dos extremos cambiaron. */
.hero--after{ background: linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo) 90px) }
.mq-about2__split{ background: linear-gradient(90deg, var(--fondo) 0%, var(--fondo) 61%, var(--fondo-2) 61%, var(--fondo-2) 100%) }

/* Los botones dentro de una banda dibujaban su borde en --bone,
   que ahora es oscuro: sobre banda oscura desaparecian. */
.band .btn{ border-color: rgba(255,255,255,.5); color: #fff }
.band .btn:hover{ background: #fff; color: var(--fondo) }

/* El pie heredaba su tinta de --on-navy, que tambien se volteo. */
.footer a, .footer p, .footer li, .footer span{ color: rgba(255,255,255,.72) }
.footer a:hover{ color: #fff }


/* ============================================================
   LETRA CLARA SOBRE BANDA OSCURA

   La otra cara del volteo de --bone. Donde --bone aparecia junto
   a background:var(--navy) en la misma regla, es una pastilla y
   el volteo acierta. Donde aparecia SOLO, es letra clara sobre
   una banda oscura, y el volteo la dejo negra. Estas son todas
   las del segundo grupo, sacadas comparando las dos condiciones
   regla por regla en las ocho hojas.
   ============================================================ */
.nosotros-hero__txt, .nosotros-hero__txt h1,
.nosotros-hero__txt .lead, .nosotros-hero__txt .p, .nosotros-hero .lead,
.proy__stats, .proy__loc,
.tour-card__in, .tour-card__in h3, .tour360-rot,
.proyecto-hero, .proyecto-hero .lead, .proyecto-hero .p,
.proyecto-hero .btn--lg:not(.btn--gold),
.portada__tit, .portada__bajada, .portada__p-nom, .portada__p-pie b,
.portada__link:hover,
.tour__btn, .amgal__cap,
.hero__n, .hero__paso, .hero__ver:hover{ color:#fff }

/* El boton dorado lleva letra oscura: el dorado es claro y es el
   unico color de marca que no cambia entre el tema claro y el
   oscuro. Heredaba el blanco de la banda y se perdia dentro. */
.btn--gold, .btn--gold:hover, .band .btn--gold{ color:#231603 }

/* El hover de la pastilla blanca, que antes salia de --navy-2. */
.btn--solid:hover, #fSoloMios.is-on:hover{
  background:rgba(255,255,255,.86); border-color:rgba(255,255,255,.86);
}

/* La regla divisoria era una linea navy sobre papel claro; sobre
   azul tiene que ser clara, pero no un trazo blanco de 2px, que
   corta la pagina en dos. */
.rule{ background:rgba(255,255,255,.18) }

/* La pastilla del proyecto activo, en el plano. El fondo sale de
   --navy, que aqui es blanco, y el subtitulo de --on-navy-2, que
   arriba subio a blanco porque casi siempre va sobre banda
   oscura. En esta pastilla, no: hay que bajarlo. */
.tab.is-on span{ color:rgba(13,26,45,.72) }