/*
  Hoja de estilos de PUBLICOLA (nombre provisional).
  Paleta de marca: azul marino, blanco y gris/plata.
  Estetica sobria, de despacho legal. Sin librerias externas.
  Diseño "mobile-first" ESTRICTO: el celular (375-390px) es el criterio
  principal de diseño, no una revisión final -- botones grandes y comodos
  de tocar con el pulgar, texto legible sin necesidad de hacer zoom. Las
  reglas base son para celular; las @media de arriba amplian para
  tablet/escritorio.
*/

:root {
  --azul-marino: #0b1f3a;
  --azul-marino-claro: #14294f;
  --blanco: #ffffff;
  --gris-plata: #b7bec9;
  --gris-plata-claro: #e4e7ec;
  --gris-fondo: #f4f5f7;
  --gris-texto: #333333;
  --gris-texto-suave: #5b6472;
  --radio-borde: 6px;
  --altura-nav: 56px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--altura-nav);
  background-color: var(--gris-fondo);
  color: var(--gris-texto);
  font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Todos los elementos con ancla (secciones, y tambien bloques internos a
   los que el chatbot hace scroll, como "empresas-disponibles") dejan
   aire debajo de la barra fija para que no queden tapados. */
[id] {
  scroll-margin-top: var(--altura-nav);
}

/* ---------- Barra de navegacion fija ---------- */

.nav-cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--altura-nav);
  background-color: var(--azul-marino);
}

.nav-contenedor {
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  /* Sin logo, el unico item de flujo normal en movil es el boton de
     menu (nav-enlaces es un desplegable position:absolute, no cuenta en
     el flujo); flex-end lo deja pegado a la derecha, donde estaba antes. */
  justify-content: flex-end;
  position: relative;
}

.nav-boton-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* Objetivo tactil comodo (min. 44x44) aunque las 3 rayitas sean chicas */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: -6px;
}

.nav-boton-menu span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background-color: var(--blanco);
}

.nav-enlaces {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--azul-marino);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-height: calc(100vh - var(--altura-nav));
  overflow-y: auto;
}

.nav-enlaces.nav-enlaces-abierto {
  display: flex;
}

.nav-enlaces a {
  color: var(--blanco);
  text-decoration: none;
  font-size: 15px;
  /* Filas altas: comodas de tocar con el pulgar en una sola mano */
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-enlaces a:first-child {
  border-top: none;
}

.nav-enlaces a:hover,
.nav-enlaces a:focus {
  background-color: var(--azul-marino-claro);
}

/* ---------- Portada ---------- */

.seccion-portada {
  background-color: var(--blanco);
  padding: 40px 0;
}

.portada-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

/* Columna de texto (logo + eslogan). En movil es simplemente la unica
   columna visible, apilada; en escritorio (900px+) se convierte en la
   columna izquierda del hero de dos columnas (ver mas abajo). */
.portada-columna-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Columna de la foto de la obra en construccion: oculta en movil a
   proposito (para no alargar la pagina) y solo se muestra a partir del
   punto de quiebre de escritorio grande. */
.portada-columna-foto {
  display: none;
}

.portada-logo {
  margin: 0;
}

.portada-logo img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radio-borde);
}

.descripcion {
  margin: 0 auto;
  max-width: 440px;
  font-size: 16px;
  color: var(--gris-texto-suave);
}

/* ---------- Quienes somos ---------- */

.quienes-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 32px;
}

.quienes-imagen img {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radio-borde);
}

.quienes-texto {
  text-align: left;
}

.quienes-texto h2 {
  text-align: center;
}

.quienes-texto p {
  color: var(--gris-texto);
  font-size: 15px;
  margin: 0 0 14px 0;
}

.quienes-texto p:last-child {
  margin-bottom: 0;
}

/* ---------- Nuestro presidente ---------- */

.titulo-presidente {
  margin: 0 0 14px 0;
  font-size: 18px;
  color: var(--azul-marino);
  text-align: center;
}

.tarjeta-ceo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background-color: var(--blanco);
  border: 1px solid var(--gris-plata-claro);
  border-radius: var(--radio-borde);
  padding: 24px 18px;
}

.ceo-foto {
  /* Circulo: object-position vertical afinado para esta foto en
     concreto (3:4) para que el recorte muestre todo el cabello arriba
     sin cortarlo, la cara centrada, y llegue hasta la mitad del pecho
     (se ve la corbata) en la parte de abajo. */
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid var(--azul-marino);
  flex-shrink: 0;
}

.ceo-datos {
  text-align: left;
}

.ceo-nombre {
  margin: 0 0 10px 0;
  font-weight: 700;
  color: var(--azul-marino);
  font-size: 17px;
  text-align: center;
}

.ceo-datos p {
  font-size: 14px;
  color: var(--gris-texto);
  margin: 0 0 12px 0;
}

.ceo-contacto {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.boton-chico {
  padding: 10px 14px;
  font-size: 13px;
}

/* ---------- Secciones generales ---------- */

.seccion {
  padding: 40px 0;
}

.seccion-alterna {
  background-color: var(--blanco);
}

.seccion h2 {
  margin: 0 0 6px 0;
  font-size: 21px;
  color: var(--azul-marino);
}

.seccion .subtitulo {
  margin: 0 0 20px 0;
  color: var(--gris-texto-suave);
  font-size: 14px;
}

.mensaje-estado {
  color: var(--gris-texto-suave);
  font-style: italic;
}

/* ---------- Licitaciones de la semana ---------- */

.licitaciones-encabezado {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.licitaciones-icono {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radio-borde);
  flex-shrink: 0;
}

.licitaciones-encabezado h2 {
  margin: 0;
}

.licitaciones-encabezado .subtitulo {
  margin: 4px 0 0 0;
}

.lista-licitaciones {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.tarjeta-licitacion {
  background-color: var(--blanco);
  border: 1px solid var(--gris-plata-claro);
  border-left: 4px solid var(--azul-marino);
  border-radius: var(--radio-borde);
  padding: 16px 18px;
}

.tarjeta-licitacion .rubro-etiqueta {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--azul-marino);
  background-color: var(--gris-plata-claro);
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

.tarjeta-licitacion .institucion {
  font-weight: 700;
  margin: 0 0 4px 0;
}

.tarjeta-licitacion .objeto {
  margin: 0 0 8px 0;
  color: var(--gris-texto);
  font-size: 14px;
}

.tarjeta-licitacion .monto-referencia {
  margin: 0 0 8px 0;
  color: var(--azul-marino);
  font-weight: 700;
  font-size: 1.15em;
  /* Permite partir palabras largas (montos con muchos digitos en
     pantallas angostas) para que nunca desborde la tarjeta. */
  overflow-wrap: break-word;
}

.tarjeta-licitacion .detalle {
  font-size: 13px;
  color: var(--gris-texto-suave);
}

.tarjeta-licitacion .enlace-portal {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-marino);
  text-decoration: none;
}

.tarjeta-licitacion .enlace-portal:hover,
.tarjeta-licitacion .enlace-portal:focus {
  text-decoration: underline;
}

/* ---------- Chatbot Licita ---------- */

.chat-contenedor {
  background-color: var(--blanco);
  border: 1px solid var(--gris-plata-claro);
  border-radius: var(--radio-borde);
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.chat-transcurso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 360px;
  overflow-y: auto;
}

.burbuja {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  max-width: 85%;
  line-height: 1.45;
}

.burbuja-bot {
  background-color: var(--gris-fondo);
  color: var(--gris-texto);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.burbuja-usuario {
  background-color: var(--azul-marino);
  color: var(--blanco);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

/* Listas dentro de una burbuja del bot (precio + que incluye, como
   funciona): mismo tamaño de letra que el resto de la burbuja. */
.burbuja ul,
.burbuja ol {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.burbuja li {
  margin-bottom: 4px;
}

.burbuja li:last-child {
  margin-bottom: 0;
}

.chat-controles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Campo de texto libre (pregunta "¿A qué se dedica tu empresa?" antes de
   cada cierre por WhatsApp). Generico, no es un buscador. */
.campo-texto-libre {
  width: 100%;
  /* font-size 16px a proposito: por debajo de eso Safari en iPhone hace
     zoom automatico al enfocar el campo, algo incomodo en movil. */
  font-size: 16px;
  font-family: inherit;
  padding: 13px 14px;
  border: 1px solid var(--gris-plata);
  border-radius: var(--radio-borde);
  background-color: var(--blanco);
  color: var(--gris-texto);
}

.campo-texto-libre:focus {
  outline: 2px solid var(--azul-marino);
  outline-offset: 1px;
  border-color: var(--azul-marino);
}

.boton {
  display: inline-block;
  background-color: var(--azul-marino);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio-borde);
  /* Padding generoso: objetivo tactil comodo con el pulgar (~44px de alto) */
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.boton:hover,
.boton:focus {
  background-color: var(--azul-marino-claro);
}

.boton-secundario {
  background-color: var(--blanco);
  color: var(--azul-marino);
  border: 1px solid var(--azul-marino);
}

.boton-secundario:hover,
.boton-secundario:focus {
  background-color: var(--gris-fondo);
}

.boton-whatsapp {
  background-color: #1f7a4d;
}

.boton-whatsapp:hover,
.boton-whatsapp:focus {
  background-color: #185f3c;
}

/* ---------- Bloque promocional Radar Publicola (debajo del hero) ---------- */

.radar-promo {
  background-color: var(--blanco);
  padding: 36px 0;
}

.radar-promo-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.radar-promo-foto {
  /* aspect-ratio fijo (mas alto que la proporcion original de radar.png)
     para que el overlay de texto tenga aire de sobra en 375px, en vez de
     depender de las proporciones exactas del archivo de imagen. */
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-borde);
  overflow: hidden;
  background-color: var(--azul-marino);
}

.radar-promo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.radar-promo-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 31, 58, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px;
}

.radar-promo-titulo {
  margin: 0;
  color: var(--blanco);
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.radar-promo-subtitulo {
  margin: 0;
  color: var(--blanco);
  font-size: 13px;
  max-width: 300px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Boton "Inscribete" de la franja del radar: fondo blanco + texto y
   borde azul marino a proposito (NO el navy de .boton por defecto, que
   se perdia de vista tanto sobre la foto oscura del radar como sobre el
   fondo claro de esta seccion en pantallas chicas). Selector scoped a
   .radar-promo-grid para no tocar el boton "Quiero el radar" de la
   seccion de servicios de mas abajo, que sigue con el navy normal. */
.radar-promo-grid > .boton-primario {
  background-color: var(--blanco);
  color: var(--azul-marino);
  border: 2px solid var(--azul-marino);
  font-size: 16px;
  padding: 15px 26px;
}

.radar-promo-grid > .boton-primario:hover,
.radar-promo-grid > .boton-primario:focus {
  background-color: var(--gris-plata-claro);
}

/* ---------- Licita flotante ---------- */

.licita-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
}

.licita-burbuja {
  display: flex;
  align-items: center;
  gap: 10px;
}

.licita-etiqueta {
  background-color: var(--azul-marino);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.3);
}

.licita-circulo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--azul-marino);
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 31, 58, 0.35);
  flex-shrink: 0;
}

.licita-circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.licita-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  max-height: min(70svh, 560px);
  background-color: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2001;
}

.licita-panel[hidden] {
  display: none;
}

.licita-panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background-color: var(--azul-marino);
  color: var(--blanco);
  font-weight: 700;
  flex-shrink: 0;
}

.licita-panel-cerrar {
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.licita-panel-cuerpo {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Dentro del panel flotante, el propio panel ya pone el fondo blanco, el
   borde redondeado y la sombra -- se le quita al chat-contenedor su
   propio marco para no duplicar la caja. */
.licita-panel .chat-contenedor {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* ---------- Servicios: 5 secciones a pantalla completa ---------- */

/* svh (small viewport height) en vez de vh: en movil, vh cuenta la
   pantalla completa incluyendo el area que tapa la barra de direcciones
   del navegador, y la seccion queda mas alta que la pantalla visible
   real. svh se ajusta a lo que el usuario ve de verdad. */
.seccion-servicio-completa {
  min-height: 100svh;
}

.servicio-completa-grid {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.servicio-completa-foto {
  /* Fondo azul marino solido: si la imagen falta o no carga, el
     onerror="this.style.display='none'" del <img> la oculta y este
     fondo queda visible en su lugar -- la seccion nunca se ve rota. */
  background-color: var(--azul-marino);
  height: 55svh;
  overflow: hidden;
}

.servicio-completa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.servicio-completa-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 20px;
}

.servicio-completa-texto h2 {
  margin: 0 0 14px 0;
  font-size: 24px;
  color: var(--azul-marino);
}

.servicio-completa-texto p {
  margin: 0;
  font-size: 15px;
  color: var(--gris-texto);
}

.servicio-completa-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.servicio-completa-texto .nota-privacidad-formulario {
  margin-top: 16px;
}

.lista-empresas-disponibles {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-empresas-disponibles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--gris-fondo);
  border: 1px solid var(--gris-plata-claro);
  border-radius: var(--radio-borde);
  padding: 12px 14px;
}

.empresa-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texto);
}

.nota-privacidad-formulario {
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--gris-texto-suave);
  font-style: italic;
}

.botones-legales {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Contacto ---------- */

.direccion {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--gris-texto-suave);
}

.correo-contacto {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.correo-contacto a {
  color: var(--azul-marino);
  font-weight: 600;
  text-decoration: none;
}

.correo-contacto a:hover,
.correo-contacto a:focus {
  text-decoration: underline;
}

.instagram-contacto {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--gris-texto-suave);
}

.aviso-privacidad {
  margin-top: 32px;
}

.aviso-privacidad h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--azul-marino);
}

.aviso-privacidad p {
  font-size: 13px;
  color: var(--gris-texto-suave);
}

/* ---------- Pie de pagina ---------- */

.pie {
  background-color: var(--azul-marino);
  color: var(--gris-plata);
  padding: 18px 0;
  text-align: center;
  font-size: 12px;
}

/* ---------- Ajustes para pantallas mas grandes (tablet / escritorio) ---------- */

@media (min-width: 768px) {
  .contenedor,
  .nav-contenedor {
    max-width: 900px;
    padding: 0 32px;
  }

  .nav-boton-menu {
    display: none;
  }

  .nav-enlaces {
    display: flex !important;
    flex-direction: row;
    position: static;
    background: none;
    border-top: none;
    gap: 28px;
    max-height: none;
    overflow: visible;
    /* Sin logo que le haga contrapeso, los enlaces son el unico
       contenido de la barra: ocupan todo el ancho disponible y se
       reparten con espacio entre ellos en vez de quedar agrupados. */
    flex: 1;
    justify-content: space-between;
  }

  .nav-enlaces a {
    padding: 0;
    border-top: none;
    font-weight: 600;
    font-size: 14px;
  }

  .nav-enlaces a:hover,
  .nav-enlaces a:focus {
    background: none;
    text-decoration: underline;
  }

  .seccion-portada {
    padding: 64px 0;
  }

  .portada-logo img {
    max-width: 460px;
  }

  .descripcion {
    font-size: 17px;
  }

  .quienes-grid {
    flex-direction: row;
    text-align: left;
    gap: 40px;
  }

  .quienes-imagen {
    flex: 0 0 260px;
  }

  .quienes-texto {
    flex: 1;
  }

  .quienes-texto h2 {
    text-align: left;
  }

  .titulo-presidente {
    text-align: left;
  }

  .tarjeta-ceo {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .ceo-nombre {
    text-align: left;
  }

  .ceo-foto {
    width: 180px;
    height: 180px;
  }

  .ceo-contacto {
    justify-content: flex-start;
  }

  .seccion {
    padding: 52px 0;
  }

  .licitaciones-icono {
    width: 72px;
    height: 72px;
  }

  .lista-licitaciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tarjeta-licitacion {
    flex: 1 1 260px;
  }

  .lista-empresas-disponibles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---------- Servicios: 5 secciones a pantalla completa (escritorio) ---------- */

  .seccion-servicio-completa {
    min-height: 100vh;
  }

  .servicio-completa-grid {
    flex-direction: row;
    min-height: 100vh;
  }

  /* Alternancia: por defecto la foto (primera en el HTML) queda a la
     izquierda. Esta clase, puesta en las secciones 1, 3 y 5, invierte el
     orden visual para que la foto quede a la derecha -- sin cambiar el
     orden en el HTML, asi en movil la foto siempre apila arriba en las
     cinco secciones por igual. */
  .servicio-orden-invertido .servicio-completa-grid {
    flex-direction: row-reverse;
  }

  .servicio-completa-foto {
    height: auto;
    flex: 1 1 50%;
  }

  .servicio-completa-texto {
    flex: 1 1 50%;
    /* La regla base (movil) centra el texto verticalmente
       (justify-content:center), pensada para el apilado en columna. En
       fila (tablet/escritorio) eso dejaba un hueco vacio arriba: el
       texto quedaba a media altura de los 100vh mientras la foto los
       llena de punta a punta. Aqui arranca desde arriba, a la misma
       altura que el borde superior de la foto. */
    justify-content: flex-start;
    padding: 72px 64px 40px;
  }

  .servicio-completa-texto h2 {
    font-size: 32px;
  }

  .servicio-completa-texto p {
    font-size: 17px;
  }

  .servicio-completa-botones {
    flex-direction: row;
  }

  /* ---------- Bloque promocional Radar (escritorio) ---------- */

  .radar-promo-foto {
    max-width: 560px;
  }

  .radar-promo-titulo {
    font-size: 26px;
  }

  .radar-promo-subtitulo {
    font-size: 16px;
    max-width: 420px;
  }

  /* ---------- Licita flotante (escritorio) ---------- */

  .licita-flotante {
    right: 28px;
    bottom: 28px;
  }

  .licita-panel {
    left: auto;
    right: 28px;
    bottom: 28px;
    width: 400px;
    max-height: min(620px, calc(100vh - 56px));
  }
}

/* ============================================================
   Ajustes SOLO para escritorio grande, a partir de 900px.
   Todo lo de arriba (celular Y tablet/escritorio angosto hasta
   899px) queda exactamente igual que antes. Este bloque nuevo se
   agrega al final a proposito: en CSS, entre dos reglas con el
   mismo "peso", gana la que esta mas abajo en el archivo, asi que
   estas reglas amplian/reemplazan las de arriba solo a partir de
   900px, sin tocar nada por debajo de ese ancho.

   Decision de diseño (confirmada con Jose): el bloque azul
   "Inscribete en Radar Publicola" YA NO comparte columna con el
   logo del hero. Pasa a ser su propia franja de ancho completo,
   justo debajo del hero (ver seccion "Franja del radar" mas abajo).
   Por eso el hero de aqui en adelante es de una sola columna, mas
   grande y centrada.
   ============================================================ */

@media (min-width: 900px) {

  /* Contenido general: hasta 1280px de ancho en pantallas grandes,
     en vez de los 900px del punto de quiebre de tablet. */
  .contenedor,
  .nav-contenedor {
    max-width: 1280px;
  }

  /* ---------- Hero: una sola columna, protagonista ---------- */

  /* Poco padding arriba a proposito: la barra de navegacion (56px,
     fija) ya separa el hero del borde de la pantalla, asi que aqui
     solo hace falta un margen comodo, no otro salto grande encima. */
  .seccion-portada {
    padding: 40px 0;
  }

  /* ---------- Hero de dos columnas ---------- */

  .portada-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
    gap: 64px;
  }

  .portada-columna-texto {
    align-items: flex-start;
  }

  /* logo-recortado.png mide 1494px de ancho real; al pasar a columna,
     se deja que llene el ancho de su columna (sin el limite fijo de
     1100px que usaba cuando el hero era de una sola columna). */
  .portada-logo img {
    max-width: 100%;
    margin: 0;
  }

  .descripcion {
    max-width: none;
    margin: 0;
    font-size: 23px;
  }

  .portada-columna-foto {
    display: block;
  }

  .portada-foto-construccion {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radio-borde);
    display: block;
  }

  /* ---------- Titulos y aire de las secciones en general ---------- */

  .seccion {
    padding: 80px 0;
  }

  .seccion h2 {
    font-size: 38px;
  }

  .seccion .subtitulo {
    font-size: 19px;
  }

  /* Encabezado general "Servicios" (aparece una sola vez, arriba de las
     5 secciones de servicio): mas grande y centrado, a diferencia de
     los titulos de cada servicio individual (esos usan
     .servicio-completa-texto h2, selector distinto, y no se tocan). */
  .encabezado-servicios h2 {
    text-align: center;
    font-size: 54px;
  }

  /* ---------- Licitaciones de la semana: tarjetas a lo ancho ---------- */

  /* auto-fit + minmax reparte las tarjetas que haya (hoy 3, mañana
     las que sean) a lo ancho del contenido, sin dejarlas angostas. */
  .lista-licitaciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }

  .tarjeta-licitacion {
    padding: 28px 26px;
  }

  .tarjeta-licitacion .institucion {
    font-size: 18px;
  }

  .tarjeta-licitacion .objeto {
    font-size: 16px;
  }

  .tarjeta-licitacion .detalle {
    font-size: 15px;
  }

  /* ---------- Servicios: texto mas grande (la imagen ya llena su
     mitad completa desde el punto de quiebre de tablet) ---------- */

  .servicio-completa-texto {
    padding: 96px 90px 48px;
  }

  .servicio-completa-texto h2 {
    font-size: 44px;
  }

  .servicio-completa-texto p {
    font-size: 19px;
  }

  /* ---------- Quienes somos: imagen generosa, mismo tratamiento
     visual que las secciones de servicios (object-fit cover) ---------- */

  .quienes-grid {
    gap: 64px;
  }

  .quienes-imagen {
    flex: 0 0 50%;
  }

  .quienes-imagen img {
    max-width: none;
    width: 100%;
    height: 520px;
    object-fit: cover;
  }

  .quienes-texto p {
    font-size: 17px;
  }

  /* ---------- Franja del radar: banda azul de ancho completo ---------- */

  .seccion.radar-promo {
    padding: 0;
    background-color: var(--azul-marino);
  }

  /* En vez de una columna, la franja se vuelve una sola celda de
     grid donde la foto (con su overlay) y el boton "Inscribete" se
     superponen en el mismo espacio -- asi el boton queda integrado
     dentro de la franja en vez de flotar suelto debajo. */
  .radar-promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
    width: 100%;
    padding: 0;
  }

  .radar-promo-foto {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    aspect-ratio: unset;
    height: 600px;
  }

  .radar-promo-overlay {
    padding: 56px;
    gap: 18px;
  }

  /* El titular de la franja es, a proposito, el texto mas grande de
     toda la pagina: es el llamado a suscribirse, el punto que mas
     debe destacar en escritorio. */
  .radar-promo-titulo {
    font-size: 52px;
  }

  .radar-promo-subtitulo {
    font-size: 24px;
    max-width: 680px;
    margin: 0 auto;
  }

  /* Selector especifico al boton DENTRO de esta franja (el "Quiero
     el radar" de la seccion de servicios, mas abajo en la pagina,
     no se toca porque no es hijo directo de .radar-promo-grid). */
  .radar-promo-grid > .boton-primario {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    margin-bottom: 64px;
    z-index: 2;
    font-size: 20px;
    padding: 20px 52px;
  }
}