/*
 * Espacio Bogotá — web pública.
 *
 * Los valores de aquí no se eligen sueltos: salen del design system de la
 * marca, que es donde están el logotipo, la paleta y la escala tipográfica.
 * Si falta un color o un tamaño, se agrega allí y después se usa.
 *
 *   https://claude.ai/artifact/DHaqQ78YuDBMRwMWhVzYjy
 *
 * Tres reglas ordenan todo el archivo: se separa con filetes y no con sombras,
 * hay un solo color de acento, que es el dorado, y el dorado sólo se apoya
 * sobre el azul.
 */

/* -------------------------------------------------------- tipografías */
/*
 * Servidas desde este mismo dominio y no desde Google.
 *
 * Pedírselas a Google son dos conexiones nuevas —fonts.googleapis.com y, desde
 * dentro de esa hoja, fonts.gstatic.com— antes de poder pintar una línea de
 * texto, y eso es exactamente lo que Google mide como pantalla en blanco.
 *
 * Las dos son libres, con licencia OFL. Están sólo los trozos latinos: Google
 * parte cada tipografía en una docena de trozos, y esta página no escribe en
 * griego ni en cirílico. El navegador se baja el que necesita y nada más.
 *
 * `font-display: swap` en todas: antes que esperar a la letra buena, el texto
 * se lee con la del sistema.
 */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  /* El rango y no un peso suelto: son tipografías variables, y el mismo
     archivo dibuja todos los pesos. Declarada una cara por peso, cada una
     apuntaba a un archivo que no existía. */
  font-weight: 400 500;
  font-display: swap;
  src: url('/tipografias/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  /* El rango y no un peso suelto: son tipografías variables, y el mismo
     archivo dibuja todos los pesos. Declarada una cara por peso, cada una
     apuntaba a un archivo que no existía. */
  font-weight: 400 500;
  font-display: swap;
  src: url('/tipografias/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  /* El rango y no un peso suelto: son tipografías variables, y el mismo
     archivo dibuja todos los pesos. Declarada una cara por peso, cada una
     apuntaba a un archivo que no existía. */
  font-weight: 300 500;
  font-display: swap;
  src: url('/tipografias/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  /* El rango y no un peso suelto: son tipografías variables, y el mismo
     archivo dibuja todos los pesos. Declarada una cara por peso, cada una
     apuntaba a un archivo que no existía. */
  font-weight: 300 500;
  font-display: swap;
  src: url('/tipografias/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* La web alterna sectores blancos y sectores azules. El azul y el dorado son
     del logotipo de Laura; el blanco está porque una página entera en oscuro
     cansa en los textos largos de servicios y de normativa.

     El acento NO es un color fijo: es el dorado sobre el azul y el azul sobre
     el blanco. No es una preferencia. Medido sobre el logotipo, el dorado da
     9,06 de contraste sobre el azul y 1,92 sobre el blanco, y para texto hacen
     falta 4,5. Un dorado sobre fondo claro sería un texto que no se lee.

     Por eso las reglas de este archivo usan `--acento` y nunca `--oro`
     directamente: cada sector trae el suyo y lo mismo sirve en los dos. */
  --papel: #faf8f4;
  --papel-suave: #f2efe8;
  --tinta: #12181f;
  --tinta-media: #4f4e4a;
  --tinta-suave: #6d6b66;
  --linea: #e4e0d7;
  --linea-fuerte: #12181f;

  /* El dorado del sector claro es el mismo tono, oscurecido hasta que se lee:
     el de la marca da 1,92 sobre este crema y éste da 4,72, por encima del
     4,5 que hace falta. Sigue siendo dorado y no un marrón. */
  --acento: #95661c;
  --acento-fuerte: #7f5714;
  --acento-tenue: rgba(149, 102, 28, .08);
  /* Encima del acento va el crema: sobre este dorado da 4,72. */
  --sobre-acento: #faf8f4;

  /* Los dos colores de la marca, para cuando hace falta nombrarlos sin
     depender del sector: el logotipo, el borde de una tarjeta. */
  --oro: #f0af4e;
  --noche: #0a1a33;

  --error: #9b2c2c;
  --confirmado: #2f6b4f;

  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;
  --espacio-24: 96px;
  --espacio-32: 128px;

  --radio-1: 2px;

  /* Las dos salen de la marca y de la web que Laura pasó como referencia el
     18/09/2026, el estudio jurídico MLS. Ninguna de las de esa web se puede
     usar: sus títulos van en Saudagar, de Sensatype Studio, y parte del cuerpo
     en Futura LT, de Linotype, y las dos son de pago.

     Para el cuerpo no hizo falta buscar nada, porque Jost, que la web ya
     usaba, es precisamente la Futura libre.

     Para los títulos se probó Italiana, que es la libre más parecida a
     Saudagar. Duró unas horas: Juani pidió que la letra saliera del logotipo
     del estudio y no de la web de referencia, y puesta al lado del trazado del
     propio logotipo, la que coincide es Bodoni Moda en peso 500. Italiana es
     mucho más fina y estrecha que la del logotipo. El peso importa: en 400 la
     letra queda más delgada que la de la marca. */
  --display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --sans: Jost, Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --ancho: 1180px;
  /* La web no sigue el tema del sistema: el reparto de sectores claros y
     azules es del diseño, y un tema oscuro automático los pisaría los dos. */
  color-scheme: light;
}

/* Un sector azul. Redefine los mismos nombres, así que todo lo que hay debajo
   en este archivo funciona igual dentro y fuera sin una sola regla repetida. */
.bloque-oscuro {
  --papel: #0a1a33;
  --papel-suave: #0d2141;
  --tinta: #f4f3f0;
  --tinta-media: #bcc5d4;
  --tinta-suave: #909cb0;
  --linea: rgba(244, 243, 240, .16);
  --linea-fuerte: #f4f3f0;

  --acento: #f0af4e;
  --acento-fuerte: #ffc673;
  --acento-tenue: rgba(240, 175, 78, .12);
  --sobre-acento: #071324;

  --error: #ffb4b4;
  --confirmado: #8fd3b0;

  background: var(--papel);
  color: var(--tinta);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16.5px/28px var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--espacio-8); }

/* Sólo se ve al llegar con el tabulador: quien navega con teclado no tiene
   por qué recorrer la barra entera en cada visita. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--tinta); color: var(--noche); padding: 12px 18px;
}
.saltar:focus { left: 0; }

.antetitulo {
  font: 500 12px/16px var(--sans); letter-spacing: .22em;
  color: var(--tinta-suave); margin: 0 0 var(--espacio-4);
}
.nota { font-size: 14px; line-height: 22px; color: var(--tinta-suave); }

/* -------------------------------------------------------------- botones */
.boton, .boton-2 {
  display: inline-block; font: 500 14px/16px var(--sans); letter-spacing: .08em;
  padding: 15px 26px; border-radius: var(--radio-1); cursor: pointer;
  text-decoration: none; border: 1px solid transparent; text-align: center;
}
.boton { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton-2 { background: transparent; color: inherit; border-color: currentColor; }
.boton-2:hover { background: rgba(244, 243, 240, .08); }
.boton-chico { padding: 12px 20px; font-size: 13px; white-space: nowrap; }
.angosto { display: none; }
.enlace-accion {
  font: 500 14px/16px var(--sans); letter-spacing: .08em;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------ hero */
/* La cabecera y la portada son un solo bloque azul, como la referencia: la
   marca entra centrada y grande, y recién debajo aparece el titular. */
.hero { background: var(--papel); color: var(--tinta); }
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espacio-8); padding: 20px 0;
  border-bottom: 1px solid var(--linea);
}
.barra nav { display: flex; gap: var(--espacio-8); font-size: 14.5px; }
.barra nav a { color: var(--tinta-suave); text-decoration: none; }
.barra nav a:hover { color: var(--tinta); }
.marca-chica { display: block; text-decoration: none; flex: none; }
.marca-chica img { display: block; height: 36px; width: auto; }

.hero-cuerpo { padding: var(--espacio-16) 0 var(--espacio-16); text-align: center; }
/* El logotipo ya trae el nombre, así que el titular va debajo y más chico
   que él: si compiten, la página arranca con dos voces. */
.hero-marca { width: 100%; max-width: 480px; margin: 0 auto var(--espacio-8); display: block; }
/* El titular está para nombrar el negocio entero y para que lo lea un
   buscador, no para ser el protagonista: lo que tiene que verse sin bajar son
   las cuatro categorías. Por eso va en cuerpo chico y no en el display. */
.hero h1 {
  font: 400 17px/26px var(--sans); margin: 0 auto; max-width: 46ch;
  letter-spacing: .04em; color: var(--tinta-suave);
}

/* La cabecera de una landing que no es la portada: el titular en el sitio del
   logotipo grande, que ahí sobra porque la marca ya está en la barra. */
.hero-corto .hero-cuerpo { padding: var(--espacio-16) 0; text-align: left; }
.hero-corto h1 {
  font: 500 52px/56px var(--display); color: var(--tinta);
  margin: 0; max-width: 18ch; letter-spacing: -.01em;
}
.hero-corto .bajada {
  font-size: 18px; line-height: 30px; color: var(--tinta-media);
  margin: var(--espacio-4) 0 0; max-width: 56ch;
}
@media (max-width: 620px) { .hero-corto h1 { font-size: 34px; line-height: 40px; } }

/* En una landing la barra lleva primero sus propias anclas, después una raya
   y detrás el resto del sitio. La raya y el peso son lo que dice que el
   segundo grupo son otras páginas y no más secciones de ésta. */
.separador {
  width: 1px; height: 18px; background: var(--linea);
  display: inline-block; align-self: center;
}
.barra nav .otra-pagina { color: var(--tinta); font-weight: 500; }

/* Un servicio que ocupa su propia página no lleva número: no es el primero de
   una lista, es el único. */
.servicio-solo { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------- categorías */
/* Las cuatro, en fila, en el sector que sigue al del logotipo. Son enlaces a
   su propia sección: el visitante elige por dónde entrar en vez de recorrer la
   página entera. */
.seccion-indice { padding: var(--espacio-16) 0; }
.categorias {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-4); text-align: left;
}
.categorias a {
  display: grid; gap: 10px; align-content: start;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--espacio-6) var(--espacio-4) var(--espacio-6);
  border: 1px solid var(--linea); border-radius: var(--radio-1);
  text-decoration: none; color: inherit;
  transition: border-color .15s, background-color .15s;
}
.categorias a:hover, .categorias a:focus-visible {
  border-color: var(--acento); background: var(--acento-tenue);
}
.categorias .icono-grande { color: var(--acento); }
.categorias .numero {
  font: 400 12px/14px var(--sans); letter-spacing: .2em; color: var(--acento);
}
.categorias .nombre { font: 500 21px/26px var(--display); align-self: start; }
.categorias .para { font-size: 13.5px; line-height: 20px; color: var(--tinta-suave); }

.icono { width: 28px; height: 28px; display: block; }
.icono-grande { width: 44px; height: 44px; }

/* -------------------------------------------------------------- secciones */
.seccion { padding: var(--espacio-24) 0; }
.seccion-suave { background: var(--papel-suave); }

.seccion h2.titulo { font: 500 46px/50px var(--display); margin: 0; }
.seccion .entrada { color: var(--tinta-media); margin: var(--espacio-4) 0 0; max-width: 54ch; }

/* ------------------------------------------------------------- servicios */
/* Un servicio numerado con el icono a la izquierda, como la referencia. */
.servicios { margin-top: var(--espacio-16); }
.servicio {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--espacio-8);
  padding: var(--espacio-12) 0; border-top: 1px solid var(--linea);
}
.servicio .icono-grande { color: var(--acento); }
.servicio .numero {
  font: 400 13px/16px var(--sans); letter-spacing: .2em;
  color: var(--acento); display: block; margin-bottom: 10px;
}
.servicio h3 { font: 500 32px/38px var(--display); margin: 0 0 10px; }
.servicio p { margin: 0; color: var(--tinta-media); max-width: 62ch; }

/* Las piezas sueltas de cada servicio, en fila. No son botones: no se pulsan.
   Llevaron un filete alrededor hasta el 18/09/2026 y Juani lo hizo quitar por
   eso mismo, porque un recuadro con un icono dentro se lee como algo que se
   puede pulsar. Lo que las separa ahora es el aire entre una y otra. */
.pastillas {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 10px var(--espacio-6);
  margin: var(--espacio-6) 0 0; padding: 0;
}
.pastillas li {
  font-size: 13.5px; line-height: 18px; color: var(--tinta-media);
  display: flex; align-items: center; gap: 9px;
}
.pastillas .icono { width: 17px; height: 17px; color: var(--acento); flex: none; }

/* Una pieza que vive DENTRO de un servicio y no al lado: el relevamiento con
   dron se vende dentro de la gestión contable, y si se presenta como un
   servicio más deja de verse de quién depende. Va sangrado y con un filete a
   la izquierda, que es lo que dice «esto es parte de lo de arriba». */
.dentro {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--espacio-4);
  margin-top: var(--espacio-8); padding-left: var(--espacio-4);
  border-left: 2px solid var(--acento);
}
.dentro .icono { color: var(--acento); margin-top: 3px; }
.dentro h4 { font: 500 21px/26px var(--display); margin: 0 0 6px; }
.dentro p { margin: 0; color: var(--tinta-media); font-size: 15px; line-height: 25px; max-width: 62ch; }

/* Los horarios del coworking. Son dato duro y no argumento: van en filete, con
   el rotulo a la izquierda, para que se lean de un vistazo y no como prosa. */
.horarios { list-style: none; margin: var(--espacio-6) 0 0; padding: 0; max-width: 62ch; }
.horarios li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--espacio-4);
  border-top: 1px solid var(--linea); padding: 10px 0;
  font-size: 14.5px; line-height: 22px; color: var(--tinta-media);
}
.horarios li span { color: var(--tinta); }
@media (max-width: 620px) {
  .horarios li { grid-template-columns: 1fr; gap: 0; }
}

/* Los pasos llevan número porque el orden importa: es lo que pasa con un
   papel desde que entra hasta que el propietario lo ve. */
.pasos { margin-top: var(--espacio-16); display: grid; gap: var(--espacio-8); }
.paso {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--espacio-6);
  border-top: 1px solid var(--linea); padding-top: var(--espacio-6);
}
.paso .n { font: 300 40px/44px var(--sans); color: var(--acento); }
.paso h3 { font: 500 24px/30px var(--display); margin: 0 0 6px; }
.paso p { margin: 0; color: var(--tinta-media); font-size: 15px; line-height: 25px; }

/* El botón que cierra una categoría. Va con el nombre del contenedor delante
   por una razón concreta: `.servicio p` le pone `margin: 0` a todo párrafo de
   dentro, y gana por especificidad a un `.remate` suelto. Escrito sin el
   `.servicio`, la regla se aplica y el margen igual queda en cero. */
.servicio .remate { margin: var(--espacio-16) 0 var(--espacio-4); max-width: none; }

/* -------------------------------------------------------------- contacto */
/* El formulario cierra la sección de «cambiar de administración» en vez de
   tener sección propia: se escribe donde se termina de leer por qué escribir. */
.cierre {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--espacio-16);
  margin-top: var(--espacio-16); padding-top: var(--espacio-16);
  border-top: 1px solid var(--linea);
}
/* Cuando el formulario va solo, sin la columna de texto al lado, no puede
   ocupar el ancho entero: una caja de texto de 1180 px se lee mal y parece un
   formulario de administracion. */
.cierre-solo { grid-template-columns: 1fr; max-width: 720px; }

.cierre .datos h3 { font: 500 34px/40px var(--display); margin: 0 0 var(--espacio-4); }
.cierre .datos p { color: var(--tinta-media); }
@media (max-width: 940px) { .cierre { grid-template-columns: 1fr; gap: var(--espacio-8); } }
.formulario { display: grid; gap: var(--espacio-4); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-4); }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 13px; color: var(--tinta-suave); letter-spacing: .04em; }
.campo input, .campo textarea, .campo select {
  font: 400 16px/24px var(--sans); color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio-1); padding: 12px;
  width: 100%;
}
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--tinta-suave); }
/* El desplegable con las cuatro categorías. Sin quitarle la apariencia del
   sistema sale con los grises de Windows sobre el azul, y la flecha se dibuja
   aquí para que sea del color de la marca. La lista desplegada la pinta el
   sistema operativo y no la web, así que se le dice de qué color es el fondo
   con `color-scheme` para que no la abra en blanco. */
.campo select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--acento) 50%),
                    linear-gradient(135deg, var(--acento) 50%, transparent 50%);
  background-color: var(--papel);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.campo select option { background: var(--papel); color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 130px; }
.obligatorio { color: var(--acento); }

/* El señuelo: un campo que una persona no ve y un robot rellena. Lo que llega
   con esto lleno se descarta sin avisar. */
.senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { font-size: 14px; line-height: 22px; padding: 12px 14px; border-radius: var(--radio-1); }
.aviso-error { color: var(--error); border: 1px solid currentColor; }
.aviso-bien { color: var(--confirmado); border: 1px solid currentColor; }
[hidden] { display: none !important; }

.datos h2 { font: 500 46px/50px var(--display); margin: 0; }
.datos p { color: var(--tinta-media); }

/* ------------------------------------------------------------------- pie */
.pie { background: var(--papel); color: var(--tinta); padding: var(--espacio-16) 0; }
.pie .envoltorio { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-8); flex-wrap: wrap; }
.pie .legal { font-size: 13px; line-height: 19px; color: var(--tinta-suave); margin: 0; text-align: center; }
.pie a { color: var(--tinta-suave); font-size: 13px; }
.pie a:hover { color: var(--tinta); }

/* -------------------------------------------------------------- angostas */
@media (max-width: 940px) {
  .categorias { grid-template-columns: 1fr 1fr; }
  .barra nav { display: none; }
  .hero-corto h1 { font-size: 40px; line-height: 46px; }
}

@media (max-width: 620px) {
  .envoltorio { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
  .hero-cuerpo { padding: var(--espacio-16) 0 var(--espacio-24); }
  .hero-marca { max-width: 100%; margin-bottom: var(--espacio-6); }
  .hero h1 { font-size: 15.5px; line-height: 24px; }
  .categorias { grid-template-columns: 1fr; gap: 12px; }
  .categorias a { padding: var(--espacio-4); }
  .dentro { grid-template-columns: 1fr; gap: 10px; }
  .seccion { padding: var(--espacio-16) 0; }
  .seccion h2.titulo, .datos h2 { font-size: 34px; line-height: 38px; }
  .par { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 1fr; gap: var(--espacio-4); }
  .servicio h3 { font-size: 26px; line-height: 32px; }
  .paso { grid-template-columns: 48px 1fr; }
  .paso .n { font-size: 28px; line-height: 32px; }
    .boton-chico { padding: 11px 14px; font-size: 12px; }
  .ancho { display: none; }
  .angosto { display: inline; }
}