/* RELCOM - estilos base
   Paleta tomada del sitio original: topbar #3d3d3d, header #303030, acento verde institucional */
:root {
  --color-topbar: #3d3d3d;
  --color-header: #303030;
  --color-accent: #185d1d;
  --color-accent-light: #42b0ce;
  --color-text: #333;
  --color-bg: #fff;
  --color-muted: #666;
  --max-width: 1140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.topbar {
  background: var(--color-topbar);
  color: #d4d4d4;
  font-size: 13px;
}
.topbar-inner { padding: 6px 20px; }

.mainbar {
  background: var(--color-header);
  color: #f0f0f0;
}
.mainbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}
.logo img { height: 60px; width: auto; }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: #ededed;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.main-nav a:hover { color: #fff; text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #666;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .main-nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0; right: 0;
    background: var(--color-header);
    padding: 10px 20px;
    z-index: 10;
  }
  .main-nav ul.open { display: flex; }
}

/* Hero / slider */
.hero {
  background: var(--color-accent-light);
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
.hero h1 { font-size: 2.2rem; margin: 0 0 10px; }

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding: 40px 0;
}
@media (max-width: 800px) {
  .content-grid { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h3 { margin-top: 0; color: var(--color-accent); }

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Sidebar widgets */
.widget { margin-bottom: 30px; }
.widget h3 {
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  color: var(--color-accent);
}
.search-box { display: flex; gap: 6px; }
.search-box input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-box button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}

/* AICOMs/SICOMs filter directory */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.filters select, .filters input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.aicom-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.aicom-card img { height: 160px; object-fit: cover; border-radius: 4px; }

/* Footer */
.site-footer {
  background: var(--color-header);
  color: #ccc;
  margin-top: 40px;
}
.footer-inner {
  padding: 20px;
  text-align: center;
  font-size: 14px;
}
.footer-inner a { color: #fff; }

/* Contador de visitas (reemplazo simple del módulo de Joomla) */
/* Contador de visitas (data-visit-counter): usa las mismas clases cwt-* del
   módulo original CoalaWeb Traffic (ver home-inline.css / vendor CSS), solo
   se agrega aquí el placeholder de carga mientras responde /api/counter.php. */
[data-visit-counter] [data-stat] {
  opacity: 0.7;
}

/* Menú de escritorio: evita que textos de 2 palabras (p.ej. "¿Quiénes
   somos?") se corten en 2 líneas por diferencias de subpíxel/kerning
   entre entornos - el ancho disponible es muy justo en el diseño
   original y una pequeña variación de fuente puede volcar el cálculo de
   flex-shrink. Forzamos una sola línea (el resto del layout tolera un
   desborde de unos pocos píxeles sin verse afectado). */
.sp-megamenu-parent > li > a {
  white-space: nowrap;
}

/* Logo del header: en algunos navegadores el cálculo de "width:100%" +
   "max-height:100%" del CSS original (con contenedor de ancho implícito)
   es ambiguo y termina reduciendo el logo más de lo esperado. Fijamos la
   altura real (90px, la misma que #sp-header) y dejamos que el ancho se
   calcule por proporción, igual que en el sitio original. */
#sp-logo .sp-default-logo {
  height: 90px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #sp-logo .sp-default-logo {
    height: 60px;
  }
}

/* ---------------------------------------------------------------------------
   Slider del home: reservar su altura antes de que arranque el JavaScript.

   El motor del slider (js_slider.js) calcula y aplica la altura recién cuando
   se inicializa. Hasta ese momento el contenedor mide 0px, así que la sección
   "Bienvenidos" se pinta pegada al header y después salta 570px hacia abajo
   cuando el slider toma su espacio. Medido: CLS de 0.356 (Google considera
   malo cualquier valor por encima de 0.25).

   Reservando la altura por CSS, el hueco existe desde el primer pintado y no
   hay salto. Los valores replican los que aplica el propio JS, verificados
   ancho por ancho en el navegador:
       >= 620px -> 570px   (data-height / data-height-sm)
       <= 600px -> 480px
       <= 480px -> 400px   (data-height-xs)
   Si algún día se cambia la altura del slider en el markup, hay que
   actualizar estos tres valores o el salto vuelve.
--------------------------------------------------------------------------- */
.sp-slider,
.sp-slider .sp-item {
  min-height: 570px;
}

@media (max-width: 600px) {
  .sp-slider,
  .sp-slider .sp-item {
    min-height: 480px;
  }
}

@media (max-width: 480px) {
  .sp-slider,
  .sp-slider .sp-item {
    min-height: 400px;
  }
}

/* Las imágenes del collage de "Bienvenidos" ahora declaran width/height en el
   markup para que el navegador reserve el espacio antes de descargarlas (si no,
   valen 0px y empujan el contenido al cargar). `height:auto` mantiene el
   comportamiento responsive: el alto lo sigue calculando la proporción. */
.image-layout-preset-style-collage img {
  height: auto;
}