/* Billeke.cl — identidad propia sobre la base de style4.css */

:root {
  --ink: #14201A;
  --ink-soft: #1C2E23;
  --paper: #F6F5EF;
  --accent: #2F7D4F;
  --accent-dim: #235C3A;
  --line: #D8D9CE;
  --slate: #565F58;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 400;
  color: var(--slate);
  background: var(--paper);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}

a,
#fh5co-work .fh5co-text-link,
#fh5co-work .fh5co-text-link:hover,
#fh5co-work .fh5co-text-link:focus {
  color: var(--accent-dim);
}

a:hover, a:active, a:focus {
  color: var(--accent);
}

/* Header — fijo al viewport siempre, no depende del JS de scroll para posicionarse */
#fh5co-header,
#fh5co-header.navbar-fixed-top {
  position: fixed;
  top: 0;
  background: var(--ink);
  margin-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body {
  padding-top: 76px;
}

section[data-section] {
  scroll-margin-top: 76px;
}

#fh5co-header .navbar-header {
  display: flex;
  align-items: center;
  min-height: 76px;
}

#fh5co-header .navbar-brand {
  float: none;
  display: flex;
  align-items: center;
  padding: 0;
  height: auto;
}

@media screen and (min-width: 769px) {
  #fh5co-header .navbar {
    display: flex;
    align-items: center;
    min-height: 76px;
  }

  #fh5co-header #navbar {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  #fh5co-header #navbar .navbar-nav {
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
  }
}

/* Menú desplegable en mobile: fondo sólido propio, apilado, con separación */
@media screen and (max-width: 768px) {
  #fh5co-header #navbar.navbar-collapse {
    background: var(--ink-soft);
    margin: 0 -15px;
    padding: 10px 15px 20px;
  }

  #fh5co-header #navbar .navbar-nav {
    float: none;
    margin: 0;
  }

  #fh5co-header #navbar .navbar-nav > li {
    float: none;
  }

  #fh5co-header #navbar .navbar-nav > li > a {
    padding: 12px 0;
  }
}

#fh5co-header .navbar-brand,
#fh5co-header #navbar li a,
#fh5co-header.navbar-fixed-top .navbar-brand,
#fh5co-header.navbar-fixed-top #navbar li a {
  color: #fff !important;
}

#fh5co-header #navbar li a:hover,
#fh5co-header #navbar li.active a,
#fh5co-header.navbar-fixed-top #navbar li a:hover,
#fh5co-header.navbar-fixed-top #navbar li.active a {
  color: var(--accent);
}

#fh5co-header #navbar li a span:before,
#fh5co-header #navbar li.active a span:before,
#fh5co-header.navbar-fixed-top #navbar li.active a span:before {
  background-color: var(--accent);
}

/* Hero — reemplaza la foto de stock por color sólido del sistema */
#fh5co-home {
  background-color: var(--ink);
  background-image: none !important;
}

#fh5co-home .gradient {
  background-color: var(--ink);
  background-image: linear-gradient(to bottom right, var(--ink) 0%, var(--ink-soft) 100%) !important;
  opacity: 1;
}

#fh5co-home .fh5co-saas-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

#fh5co-home .fh5co-hero-screenshot {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  #fh5co-home .fh5co-hero-screenshot {
    max-height: none;
    object-fit: contain;
    margin-top: 20px;
  }
}

/* El corte diagonal del template (altura fija de 70px, independiente del alto real
   del contenido) queda flotando sobre texto/iconos en cuanto el contenido no coincide
   con la altura que asumía el diseño original — pasa en tablet y en mobile por igual.
   Se reemplaza por un borde recto, igual que ya usan Contacto/Descargas sin problema. */
.slant { display: none; }

#fh5co-about:before, #fh5co-about:after,
#fh5co-services:before, #fh5co-services:after,
#fh5co-work:before, #fh5co-work:after,
#fh5co-counters:before, #fh5co-counters:after {
  display: none;
}

/* Secciones con fondo de acento (Servicios/Descargas/Productos) */
#fh5co-about,
#fh5co-services,
#fh5co-work,
#fh5co-counters {
  background-color: var(--ink);
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#fh5co-services .icon:before,
#fh5co-about .icon:before,
#fh5co-counters .fh5co-counter .fh5co-counter-icon {
  color: var(--accent);
}

.fh5co-nav-toggle i,
.fh5co-nav-toggle i::before,
.fh5co-nav-toggle i::after,
.fh5co-nav-toggle.active i::before,
.fh5co-nav-toggle.active i::after {
  color: var(--accent);
  background: var(--accent);
}

#fh5co-work .fh5co-saas-tag {
  color: var(--accent-dim);
  background: rgba(47, 125, 79, 0.12);
}

.section-heading h2.left-border:after,
.section-heading h2:after {
  background: var(--accent);
}

/* Planilla (fondo claro) */
#fh5co-payroll .fh5co-service .icon:before {
  color: var(--accent-dim);
}

#fh5co-payroll .fh5co-payroll-carousel .carousel-indicators li {
  border-color: var(--accent-dim);
}

#fh5co-payroll .fh5co-payroll-carousel .carousel-indicators .active {
  background-color: var(--accent-dim);
}

/* Botones */
.btn.btn-primary {
  background: var(--accent);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  background: var(--accent-dim);
}

.btn:hover, .btn:active, .btn:focus {
  background: var(--ink) !important;
}

.form-control:active, .form-control:focus {
  border-color: var(--accent);
}

.social li a.social-box,
.social li a.social-circle,
.social.social-box a,
.social.social-circle a {
  background: var(--accent);
}

.social li a:hover {
  background: var(--ink) !important;
}

/* Tarjetas de producto — quitar sombra genérica uniforme, usar borde fino */
#fh5co-work .fh5co-project-item {
  box-shadow: none;
  border: 1px solid var(--line);
}

#fh5co-work .fh5co-project-item:hover,
#fh5co-work .fh5co-project-item:focus {
  box-shadow: 0 12px 30px rgba(20, 32, 26, 0.15);
}

/* Footer — texto legal secundario, no hereda el font-size:20px del body */
#footer p {
  font-size: 14px;
}

#footer .gotop {
  width: 44px;
  height: 44px;
  top: -22px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  color: var(--accent-dim);
}

#footer .gotop:hover,
#footer .gotop:focus {
  top: -26px;
  color: var(--accent);
}

#footer .gotop i {
  font-size: 16px;
  line-height: 1;
}

/* ============ Responsive: móvil y tablet ============ */

/* Hero: alto fijo de 900px + centrado con display:table del template no cabe en pantallas de celular */
@media screen and (max-width: 991px) {
  #fh5co-home,
  #fh5co-home .text-wrap {
    height: auto !important;
  }

  #fh5co-home {
    padding: 20px 0 60px;
  }

  #fh5co-home .text-wrap,
  #fh5co-home .text-inner {
    display: block;
  }

  #fh5co-home .text-inner h1 {
    font-size: 32px;
  }

  #fh5co-home .text-inner h2 {
    font-size: 17px;
  }
}

/* Iconos de servicio: 70px es desproporcionado en columnas angostas */
@media screen and (max-width: 768px) {
  #fh5co-services .icon,
  #fh5co-about .icon {
    font-size: 44px;
    margin-bottom: 15px;
  }

  #fh5co-services .fh5co-service,
  #fh5co-about .fh5co-about {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .section-heading {
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  /* El template reduce el padding vertical de cada sección a solo 1em/4em en mobile
     (pensado para cuando el slant diagonal absorbía parte del espacio). Sin el slant,
     y con contenido real (títulos, iconos, párrafos) más alto que eso, las secciones
     quedan demasiado apretadas y se sienten superpuestas con la siguiente. */
  #fh5co-services,
  #fh5co-testimonials,
  #fh5co-counters,
  #fh5co-work,
  #fh5co-payroll,
  #fh5co-contact,
  #fh5co-about {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
  }
}

/* Tablet: columnas de producto/servicio con más aire que en celular, menos que desktop */
@media screen and (min-width: 769px) and (max-width: 991px) {
  /* Bootstrap fija .container a 750px en este rango — deja franjas vacías grandes
     en un iPad (~810-834px de ancho real). Usar el ancho disponible del viewport. */
  .container {
    width: 100%;
    max-width: none;
    padding-left: 30px;
    padding-right: 30px;
  }

  #fh5co-home {
    padding: 50px 0 80px;
  }

  #fh5co-home .text-inner h1 {
    font-size: 40px;
  }

  /* El template pasa de padding:9em/7em (desktop) a 1em/4em de golpe a los 780px,
     un salto demasiado brusco para el contenido real en tablet: el corte diagonal
     (:before/:after) queda flotando sobre el texto en vez de pegado al borde. */
  #fh5co-services,
  #fh5co-testimonials,
  #fh5co-counters,
  #fh5co-work,
  #fh5co-payroll,
  #fh5co-contact,
  #fh5co-about {
    padding: 5em 0;
  }

  #fh5co-services,
  #fh5co-work,
  #fh5co-payroll,
  #fh5co-counters {
    padding: 4em 0;
  }

}

/* El carrusel colapsa a una sola columna con el texto de abajo por debajo de 992px
   (col-md-6 se apila), pero los indicadores del carrusel son position:absolute y
   se solapan con el texto si no se deja espacio real debajo del carrusel completo,
   no solo de la imagen. Pasa igual en mobile y en tablet. */
@media screen and (max-width: 991px) {
  #fh5co-payroll .fh5co-payroll-carousel {
    margin-bottom: 50px;
  }

  /* Descargas termina justo con un link centrado y poco padding-bottom real;
     queda demasiado pegada al título "Contáctenos" de la sección siguiente. */
  #fh5co-about {
    padding-bottom: 6em;
  }
}

/* Carrusel de planilla: controles más chicos y accesibles al tacto en pantallas angostas */
@media screen and (max-width: 768px) {
  #fh5co-payroll .fh5co-payroll-carousel .carousel-control {
    width: 32px;
  }

  #fh5co-payroll .fh5co-payroll-carousel .carousel-control span {
    font-size: 20px;
  }
}