/* Ajustes propios de la variante verde (index-verde.html). */

/*
 * Tipografia: dos familias en vez de Inter para todo.
 *
 * - Titulos (h1-h6, incluye el h2 inyectado del formulario de contacto):
 *   Sora. Geometrica, con mas caracter que Inter para titulares grandes,
 *   pero igual de legible; misma familia visual "tech/corporativa" que ya
 *   tiene el sitio. Cargada junto a Inter en el mismo @import de Google
 *   Fonts (index-CTP3Apdp.css) para no sumar una conexion aparte.
 * - Texto (parrafos, listados, botones, formularios): se mantiene Inter,
 *   que ya es la fuente base del bundle compilado (body{font-family:Inter...})
 *   y de contact-form.css / mapa-cobertura.css.
 *
 * h1-h6 gana sobre el font-family heredado de sus contenedores (Inter en
 * body, o en .tc-contact/.tcx-*) porque una regla declarada directamente
 * sobre el elemento siempre le gana a un valor heredado, sin importar la
 * especificidad de esta regla.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Sora, Inter, system-ui, -apple-system, sans-serif;
}

/*
 * Seccion "Conectando a la gente" (#company).
 *
 * El CTA vivia centrado verticalmente en una columna del 40% vacia, flotando
 * sin relacion visual con el texto. Ahora cierra el bloque de texto y esa
 * columna la ocupa la foto.
 *
 * El fondo plano #E8EFEC hacia que la banda se leyera como un hueco entre dos
 * secciones blancas. Un gradiente muy corto le da profundidad sin introducir
 * un color nuevo: es el mismo verde apenas dos pasos arriba y abajo.
 */
#company {
  background: linear-gradient(180deg, #f2f0e1 0%, #dfeea8 100%);
}

.connecting-layout {
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .connecting-layout {
    gap: 4.5rem;
    /*
     * Con la imagen dentro, alinear arriba dejaba un hueco muerto bajo la
     * columna de texto, que es mas corta. Centradas, los dos bloques comparten
     * eje y la banda gris deja de verse a medio llenar.
     */
    align-items: center;
  }
}

/* El CTA cierra el bloque de texto en lugar de flotar en la columna vacia. */
.connecting-cta {
  margin-top: 2rem;
}

/*
 * La columna derecha era un hueco: ahora lleva la foto aerea de una torre
 * sobre una zona habitada, que es literalmente lo que dice el titulo.
 */
/*
 * Anchos reales de las dos columnas.
 *
 * Ojo: las utilidades md:w-[52%], md:w-[45%] y compania NO existen en el CSS
 * compilado. Tailwind genera solo las clases presentes al momento del build, y
 * este bundle unicamente trae md:w-[60%] y md:w-[40%]. Cualquier otro
 * porcentaje es una clase muerta: la columna cae a ancho automatico y el
 * titulo termina partiendose en dos lineas. Por eso el ancho se define aca.
 */
.connecting-copy {
  width: 100%;
}

.connecting-media {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  /* La foto manda su ancho fijo y el texto se queda con el resto. */
  .connecting-media {
    flex: 0 0 470px;
  }

  .connecting-copy {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.connecting-img {
  display: block;
  width: 100%;
  /* Tope duro: sin el, en pantallas anchas la foto competia con el titulo. */
  max-width: 470px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem; /* mismo radio que las tarjetas de servicios */
  border: 3px solid #dfeea8;
  /*
   * Sombra en dos capas: una corta que asienta la foto sobre el fondo y una
   * larga y difusa que da la elevacion. Una sola capa se ve plana o sucia.
   */
  box-shadow:
    0 2px 6px rgba(22, 40, 19, 0.1),
    0 18px 48px rgba(22, 40, 19, 0.16);
}

/* Medida de linea: sin tope, el parrafo llegaba a ~110 caracteres. */
.connecting-lead {
  max-width: 62ch;
}

/* Aplica a los dos parrafos: el CTA ya no deja al de ingles como :last-child. */
.connecting-copy p {
  max-width: 62ch;
}

/*
 * Tarjetas de servicios: son 5 en 3 columnas, asi que la ultima fila queda
 * incompleta. Con CSS grid las 2 huerfanas se pegan a la izquierda; con flex
 * wrap + justify-center quedan centradas conservando el ancho de columna.
 */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem; /* = gap-6, el que tenia el grid */
}

.services-grid > * {
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  /* 2 columnas */
  .services-grid > * {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

@media (min-width: 768px) {
  /* 3 columnas */
  .services-grid > * {
    flex-basis: calc((100% - 3rem) / 3);
  }
}

/*
 * Paleta oficial 2026: 0b0b0b, 162813, d3f369, dfeea8, f2f0e1.
 *
 * El bundle de abajo (index-CTP3Apdp.css) esta compilado y sus clases
 * Tailwind son literales (.text-[#1E3A2B], .bg-[#10B981]...): el HTML que
 * genera el JS pide exactamente esas clases, asi que no se pueden renombrar
 * aca, solo redefinir su declaracion con el mismo selector y mayor orden de
 * cascada (este archivo carga al final).
 *
 * d3f369 es una lima muy clara (luminancia ~0.79): como texto o borde fino
 * sobre fondos claros (blanco/crema) el contraste es casi nulo. Por eso solo
 * se usa como relleno de superficies propias (botones, franjas de acento,
 * estado activo del mapa) o sobre fondos oscuros ya existentes (el footer).
 * Para texto/iconos/bordes finos sobre fondo claro se usa el verde oscuro.
 */

:root {
  --navy: #162813;
  --medium-blue: #d3f369;
  --accent-blue: #d3f369;
  --light-gray: #f2f0e1;
  --dark-gray: #0b0b0b;
  --slate-card: #162813;
  --darker-navy: #0b0b0b;
}

.border-\[\#1E3A2B\],
.group:hover .group-hover\:border-\[\#1E3A2B\],
.hover\:border-\[\#1E3A2B\]:hover {
  border-color: #162813;
}

.bg-\[\#1E3A2B\],
.group:hover .group-hover\:bg-\[\#1E3A2B\] {
  background-color: #162813;
}

.from-\[\#1E3A2B\]\/5 {
  --tw-gradient-from: rgba(22, 40, 19, 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(22, 40, 19, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.text-\[\#1E3A2B\],
.hover\:text-\[\#1E3A2B\]:hover {
  color: #162813;
}

.bg-\[\#0D2018\] {
  background-color: #0b0b0b;
}

.bg-\[\#3C5548\] {
  background-color: #162813;
}

.bg-\[\#E8EFEC\],
.bg-\[\#f8fbf9\] {
  background-color: #f2f0e1;
}

.border-\[\#E8EFEB\] {
  border-color: #dfeea8;
}

/* Acento verde brillante en texto/borde fino sobre fondo claro -> verde oscuro (legibilidad). */
.border-\[\#10B981\] {
  border-color: #162813;
}

.text-\[\#10B981\] {
  color: #162813;
}

.bg-\[\#10B981\] {
  background-color: #d3f369;
}

/*
 * Excepcion: iconos del footer (flechas "▶", pin, telefono), que viven sobre
 * el verde oscuro del footer (#1E3A2B -> #162813), no sobre fondo claro.
 * Con la regla general de arriba quedaban del mismo color que su propio
 * fondo (#162813 sobre #162813 = invisibles).
 *
 * OJO: el <footer> NO tiene id="contact". contact-form.js le quita ese id
 * en runtime y se lo pone a la seccion del formulario (para que el ancla
 * "Contacto" del navbar apunte ahi); al footer le deja id="contact-info".
 * Ver assets/contact-form.js linea ~141.
 */
#contact-info .text-\[\#10B981\] {
  color: #d3f369;
}

/*
 * Rediseño "liquid glass" de las cards de servicios (ServicesSection).
 *
 * El grid (#services) tiene margin-top:-60px y z-20: las cards flotan
 * fisicamente sobre el Hero animado. Un fondo semitransparente + blur ahi
 * es vidrio esmerilado real sobre el patron topografico, no solo un efecto
 * decorativo. `.service-card > div` es el div visual real (bg-white
 * original); `.service-card` es solo el wrapper que usa GSAP para animar
 * la entrada, asi que no se toca.
 */
.service-card > div {
  background: rgba(242, 240, 225, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 1rem;
  border-left-width: 3px;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -18px rgba(11, 11, 11, 0.35),
    0 2px 8px rgba(11, 11, 11, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.service-card > div:hover {
  transform: translateY(-6px);
  background: rgba(242, 240, 225, 0.9);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.75) inset,
    0 28px 54px -20px rgba(11, 11, 11, 0.42),
    0 4px 14px rgba(22, 40, 19, 0.16);
}

/* Boton circular de flecha: un poco mas grande y con "pop" al hover. */
.service-card .w-10.h-10.rounded-full {
  width: 2.75rem;
  height: 2.75rem;
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card .group:hover .group-hover\:bg-\[\#1E3A2B\] {
  transform: scale(1.08);
  box-shadow: 0 8px 18px -6px rgba(22, 40, 19, 0.55);
}

/*
 * Borde de marca en las fotos de contenido del sitio (no en logos ni iconos).
 * Mismo lima palido que el resto de bordes suaves, para que todas las fotos
 * compartan un hilo visual comun.
 *
 * Las dos fotos circulares (CustomerFocusedSection, GroundLeaseSection) no
 * traen "rounded-full" en el <img> -lo tiene el contenedor que las recorta
 * con overflow:hidden-, asi que hay que redondear tambien la imagen: si no,
 * el borde se dibuja en las esquinas del cuadrado y el contenedor circular
 * lo corta de forma dispareja en vez de verse como un aro.
 */

/* "Encuentra tu representante": foto/mapa grande. */
.rep-map img {
  border: 4px solid #dfeea8;
}

/* "Por que elegirnos": foto de torre en paisaje. */
.wc-image img {
  border: 3px solid #dfeea8;
}

/* "A quien servimos" (#who-we-serve): foto circular con anillos decorativos. */
#who-we-serve img {
  border: 4px solid #dfeea8;
  border-radius: 9999px;
}

/* Stat destacado ("2000+"): foto circular de torre con anillos decorativos. */
.w-\[280px\].h-\[280px\].rounded-full.overflow-hidden img {
  border: 4px solid #dfeea8;
  border-radius: 9999px;
}

/* Avatar circular en las tarjetas de representante (RepCard). */
.w-\[60px\].h-\[60px\].rounded-full {
  border: 2px solid #dfeea8;
}

/*
 * Rediseño del footer. Solo pulido visual vía CSS: la estructura, el
 * contenido y los enlaces son los del bundle compilado, no se tocan.
 *
 * OJO: el <footer> vive en #contact-info, no en #contact (ver nota mas
 * arriba) — el ancla "Contacto" del navbar ahora apunta al formulario.
 */

/* Costura superior: linea de acento en degrade justo donde el footer
   se separa del resto de la pagina. */
#contact-info {
  position: relative;
}

#contact-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #162813 0%, #d3f369 50%, #dfeea8 100%);
}

/* Subrayado corto bajo cada titulo de columna ("Servicios", "Acerca de",
   "Contacto"), para reforzar la jerarquia sin agregar mas texto. */
#contact-info h4 {
  position: relative;
  padding-bottom: 10px;
}

#contact-info h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: #d3f369;
}

/* La flecha "▶" se desliza un poco al hover, sin mover el texto ni el
   layout (solo transform, es barato). */
#contact-info ul a span {
  display: inline-block;
  transition: transform 0.2s ease;
}

#contact-info ul a:hover span {
  transform: translateX(3px);
}

/* Boton circular de LinkedIn: al hover se llena de lima y el icono pasa a
   oscuro, igual que el resto de los "fill lima sobre fondo oscuro" del sitio. */
#contact-info .hover\:bg-white\/20 {
  transition: background-color 0.25s ease, transform 0.25s ease;
}

#contact-info .hover\:bg-white\/20:hover {
  background-color: #d3f369;
  transform: scale(1.06);
}

#contact-info .hover\:bg-white\/20:hover svg {
  color: #0b0b0b;
}

/* Barra inferior de copyright: un hairline sutil la separa del bloque
   principal en vez de solo el cambio de color de fondo. */
#contact-info .bg-\[\#0D2018\] {
  border-top: 1px solid rgba(211, 243, 105, 0.15);
}

/*
 * Logo nuevo (icono + "CORDILLERA EDGE" apilado, formato ~cuadrado) en vez
 * del anterior (horizontal, icono y texto lado a lado). A la misma altura
 * que el logo viejo el texto se veia diminuto, asi que se sube el alto.
 *
 * Navbar: la barra mide 80px fijos (Navbar.tsx style height:80) y centra su
 * contenido con flex; 76px es casi el limite antes de desbordar la barra.
 * Footer: no tiene alto fijo, hay margen de sobra para crecer mas.
 */
.h-12.w-auto.transition-opacity.duration-300 {
  height: 76px;
}

.h-16.w-auto.mb-4 {
  height: 132px;
}