/* ═══════════════════════════════════════════════
   HORIZON-VISION  ·  Hoja de estilos global
   Corrige: navbar, imágenes, fuentes, estructura
   ═══════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────── */
:root {
  --hv-info:    #0dcaf0;   /* color principal del tema */
  --hv-dark:    #212529;
  --hv-radius:  6px;
  --hv-shadow:  0 2px 12px rgba(0,0,0,.12);
  --hv-nav-h:   64px;
}

/* ── Tipografía base ─────────────────────────── */
body { font-size: 1rem; line-height: 1.7; }

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: clamp(1rem,   2vw,  1.25rem); }
h5, h6 { font-size: 1rem; }

/* ── Navbar ─────────────────────────────────── */
.clean-navbar {
  height: var(--hv-nav-h);
  padding: 0 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

/* Logo en navbar */
.clean-navbar .navbar-brand.logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hv-info) !important;
  white-space: nowrap;
  margin-right: 1.5rem;
  /* Elimina ancho/alto fijos que bloqueaban el responsive */
  width: auto !important;
  height: auto !important;
}

/* Elimina la imagen-logo innecesaria dentro del nav */
.clean-navbar .nav-logo-img { display: none; }

/* Espaciado correcto de los links */
.clean-navbar .nav-link {
  font-size: .9rem;
  padding: .4rem .75rem;
  text-transform: capitalize;
}
.clean-navbar .nav-link.active { color: var(--hv-info) !important; }

/* Offset del contenido para que no quede bajo la navbar fija */
main.page { padding-top: var(--hv-nav-h); }

/* ── Hero ─────────────────────────────────────── */
.clean-hero {
  min-height: 420px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 4rem 2rem;
}
.clean-hero .text h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.clean-hero .text p  { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 680px; }

/* ── Secciones ───────────────────────────────── */
.clean-block { padding: 3rem 0; }

.block-heading h2 { margin-bottom: .5rem; }
.block-heading p  { font-size: 1rem; margin-bottom: 1.5rem; }

/* ── Tarjetas de servicios ───────────────────── */
.card {
  border-radius: var(--hv-radius);
  box-shadow: var(--hv-shadow);
  height: 100%;           /* igual altura en la misma fila */
}

/* Imagen de tarjeta: proporción fija, nunca se deforma */
.card-img-top {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  border-radius: var(--hv-radius) var(--hv-radius) 0 0;
  /* Elimina width/height inline en px que rompían el layout */
}

/* Elimina columnas con width fijo en px */
.col-md-6[style*="width: 460px"],
.col-md-6[style*="width: 475px"],
.col-xl-6[style*="width: 460px"],
.col-xl-5[style*="width: 475px"] {
  width: auto !important;
}

/* ── Imágenes en posts / ventas ──────────────── */
/* Imágenes sueltas dentro de post-body */
.post-body img,
.post-body .figure-img {
  width: 100% !important;
  height: auto !important;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--hv-radius);
  display: block;
}

/* Imágenes en fichas de representaciones */
.figure-img {
  width: 100% !important;
  height: auto !important;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--hv-radius);
}

/* ── Cursos (related-items) ──────────────────── */
.clean-related-item {
  border: 1px solid rgba(13,202,240,.2);
  border-radius: var(--hv-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  transition: box-shadow .2s;
}
.clean-related-item:hover { box-shadow: var(--hv-shadow); }

.related-name a,
.related-name strong { font-size: 1rem !important; } /* sobreescribe 21px inline */

/* ── FAQ / Filosofía ─────────────────────────── */
.faq-item { padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.faq-item:last-child { border-bottom: none; }
.faq-item .question { color: var(--hv-info); margin-bottom: .4rem; }

/* ── Formulario de contacto ──────────────────── */
.clean-form .form-control { border-radius: var(--hv-radius); margin-bottom: .25rem; }
.clean-form textarea.form-control { min-height: 120px; resize: vertical; }
.clean-form .btn { min-width: 140px; }

/* ── Footer ──────────────────────────────────── */
footer.text-center { padding: 1.5rem 1rem; font-size: .875rem; }

/* ── Responsive: móvil (< 768 px) ───────────── */
@media (max-width: 767.98px) {
  .clean-hero { min-height: 260px; padding: 3rem 1rem; }
  .clean-hero .text h2 { font-size: 1.8rem; }

  /* Las dos tarjetas de servicios se apilan */
  .clean-services .row > div { width: 100% !important; margin-bottom: 1.5rem; }

  /* Columnas imagen+texto en posts se apilan */
  .post-body .row > div { margin-bottom: 1rem; }

  .clean-related-item { padding: .75rem 1rem; }

  /* Navbar brand cabe en móvil */
  .clean-navbar .navbar-brand.logo { font-size: 1.1rem; }
}

/* ── Responsive: tablet (768 – 991 px) ──────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .clean-services .row > div { width: 50% !important; }
}