/**
 * Marca ZafraClic sobre la plantilla Company.
 *
 * Este archivo NO toca main.css: se carga despues y solo redefine las
 * variables de color de la plantilla mas los bloques propios que agregamos
 * (selector de idioma, capas, herramientas, confianza). Asi, cuando el autor
 * publique una version nueva de la plantilla, se reemplaza main.css y este
 * archivo sigue sirviendo.
 *
 * Paleta: la misma del portal zafraclic.com, verde esmeralda con oro elite
 * y fondo crema.
 */

/* --------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------
   Source Serif 4 para los titulos: una serif con peso da autoridad de
   empresa establecida, que es lo que la plantilla no traia (venia con tres
   sans genericas). IBM Plex Sans para el cuerpo: legible, con caracter
   tecnico y sin ser la fuente que usa todo el mundo.

   Si algun dia se quiere probar otra combinacion, se cambian estas dos
   lineas y el <link> de fuentes del index. Dos alternativas que funcionan:
     Titulos "Fraunces" + cuerpo "Work Sans"   (mas calido, artesanal)
     Titulos "Sora"     + cuerpo "Public Sans" (mas moderno, tecnologico)
   -------------------------------------------------------------- */
:root {
  --default-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --nav-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root {
  --accent-color: #16A34A;
  --heading-color: #0E2A1B;
  --default-color: #3F4A43;
  --nav-color: #24352B;
  --nav-hover-color: #16A34A;
  --nav-dropdown-hover-color: #16A34A;

  --zc-oro: #C9A227;
  --zc-bosque: #0E2A1B;
  --zc-crema: #FDFBF7;
  --zc-verde-hondo: #0F7A37;
  --zc-linea: #E3E8E2;
}

.light-background {
  --background-color: var(--zc-crema);
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: var(--zc-bosque);
  --surface-color: #16382A;
}

/* --------------------------------------------------------------
   Cabecera y selector de idioma
   -------------------------------------------------------------- */
.header .logo .sitename {
  font-family: var(--nav-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 25px;
}
/* El ", Inc." va en oro y más chico: es razón social, no parte del nombre
   de marca, y así se lee la jerarquía correcta. */
.header .logo span {
  color: var(--zc-oro);
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  padding-left: 3px;
}
@media (max-width: 575px) {
  .header .logo .sitename { font-size: 21px; }
  .header .logo span { font-size: 13px; }
}

/* Titulos de seccion: el rótulo chico en sans y el título grande en serif. */
.section-title h2 {
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--zc-verde-hondo);
}
.section-title p {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Selector de idioma: desplegable de verdad, no tres botones sueltos.
   En el celular abre el selector nativo del sistema, que es lo que la
   gente ya sabe usar. */
.selector-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding: 5px 10px;
  border: 1px solid var(--zc-linea);
  border-radius: 6px;
  flex-shrink: 0;
  background: #ffffff;
}
.selector-idioma i {
  font-size: 15px;
  color: var(--zc-verde-hondo);
  line-height: 1;
}
.selector-idioma select {
  border: 0;
  background: transparent;
  color: var(--zc-bosque);
  font-family: var(--nav-font);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Flecha propia: la nativa cambia de forma en cada navegador. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F7A37'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
  padding-right: 18px;
}
.selector-idioma select:focus-visible {
  outline: 2px solid var(--zc-oro);
  outline-offset: 3px;
}

/* Redes en la cabecera */
.redes-cabecera {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  flex-shrink: 0;
}
.redes-cabecera a {
  color: var(--nav-color);
  font-size: 16px;
  line-height: 1;
  padding: 7px;
  border-radius: 5px;
  transition: color 0.2s, background-color 0.2s;
}
.redes-cabecera a:hover {
  color: var(--accent-color);
  background: #F1F7F3;
}
.redes-cabecera a:focus-visible { outline: 2px solid var(--zc-oro); outline-offset: 2px; }

/* Entre 1200 y 1400 la barra lleva siete enlaces, las redes y el idioma, y
   deja de caber: el selector se salía de la pantalla. Las redes son lo
   prescindible ahí, porque están repetidas en el pie. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .redes-cabecera { display: none; }
  .navmenu a, .navmenu a:focus { font-size: 14.5px; padding: 18px 11px; }
}

/* En pantallas chicas el logo manda: las redes se esconden (están en el pie)
   y queda idioma + hamburguesa, en ese orden. */
@media (max-width: 1199px) {
  .redes-cabecera { display: none; }
  /* Orden explícito: el nombre de la empresa va primero. Sin esto el
     desplegable de idioma quedaba a la izquierda del logo. */
  .header > .container { display: flex; align-items: center; }
  .header .logo { order: 1; margin-right: auto !important; }
  .selector-idioma { order: 2; margin-left: 10px; margin-right: 6px; padding: 4px 8px; }
  #navmenu { order: 3; }
  .selector-idioma select { font-size: 12.5px; }
}
@media (max-width: 400px) {
  .selector-idioma i { display: none; }
}

/* --------------------------------------------------------------
   Menu del celular
   --------------------------------------------------------------
   La plantilla abría una caja blanca flotante, con los enlaces arriba y
   media pantalla vacía debajo, y la X encimada sobre la barra. Acá es un
   panel que entra desde la derecha, con la marca arriba y el contacto
   abajo, que es lo que la gente busca cuando abre el menu de una empresa.
   -------------------------------------------------------------- */
/* La marca y el contacto del panel son piezas EXCLUSIVAS del menu del
   celular. Se ocultan siempre y solo aparecen con el menu abierto.
   Ojo: esta regla va FUERA del @media a proposito. Cuando estaba adentro,
   en la computadora no se aplicaba y los <li> se colaban en la barra de
   navegacion, con el lema y el telefono desparramados sobre el menu. */
.panel-marca,
.panel-pie { display: none; }

@media (max-width: 1199px) {

  .navmenu ul {
    /* Se deja montado y se mueve con transform: asi la entrada se anima,
       cosa que con display:none no se puede. En columna, para poder mandar
       el contacto al fondo del panel y que no quede un hueco vacio abajo. */
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 350px);
    max-width: 100%;
    padding: 0 0 22px;
    margin: 0;
    border-radius: 0;
    background: var(--zc-bosque);
    box-shadow: -20px 0 44px rgba(0, 0, 0, 0.4);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Va con la misma especificidad que la regla de la plantilla
     (`.mobile-nav-active .navmenu>ul { display: block }`), que si no gana la
     cascada y el `flex` de arriba nunca se aplica. */
  .mobile-nav-active .navmenu > ul {
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-nav-active .navmenu {
    background: rgba(6, 24, 15, 0.72);
  }

  /* Marca arriba del panel */
  .mobile-nav-active .panel-marca {
    display: block;
    padding: 26px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .panel-nombre {
    display: block;
    font-family: var(--nav-font);
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
  }
  .panel-inc { color: var(--zc-oro); font-size: 13px; font-weight: 600; }
  .panel-lema {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
  }

  /* Enlaces */
  .navmenu a,
  .navmenu a:focus {
    color: rgba(255, 255, 255, 0.88);
    padding: 15px 24px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
  }
  /* El activo se marca con una barra de oro al costado, no solo con color. */
  .navmenu .active,
  .navmenu .active:focus {
    box-shadow: inset 3px 0 0 var(--zc-oro);
  }

  /* Contacto al pie del panel */
  .mobile-nav-active .panel-pie {
    display: block;
    padding: 22px 24px 4px;
    /* Al fondo del panel: el hueco vacío quedaba justo debajo del contacto. */
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .panel-redes { display: flex; gap: 10px; margin-bottom: 16px; }
  .panel-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    font-size: 16px;
    transition: background-color 0.2s;
  }
  .panel-redes a:hover { background: var(--accent-color); }
  .panel-dato {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 7px 0 !important;
    border: 0 !important;
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    justify-content: flex-start !important;
  }
  .panel-dato i { color: var(--zc-oro); font-size: 15px; }
  .panel-dato:hover { color: #ffffff !important; background: none !important; }

  /* La X: dentro del panel, alineada con la marca, no encimada en la barra. */
  .mobile-nav-active .mobile-nav-toggle {
    top: 24px;
    right: 20px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.85);
  }
  .mobile-nav-active .mobile-nav-toggle:hover { color: #ffffff; }
}

@media (prefers-reduced-motion: reduce) {
  .navmenu ul { transition: none; }
}

/* --------------------------------------------------------------
   Portada
   -------------------------------------------------------------- */
/* La plantilla trae la portada a pantalla completa (100vh) y se comía toda
   la primera pantalla, sobre todo en el celular: había que bajar para ver
   que la página seguía. Acá queda alta pero con techo, y siempre asoma el
   comienzo de la sección siguiente. */
.hero .carousel {
  min-height: min(62vh, 560px);
}
@media (max-width: 1200px) {
  .hero .carousel { min-height: min(58vh, 460px); }
}
@media (max-width: 575px) {
  .hero .carousel { min-height: 400px; }
}

.hero .carousel-item::before {
  background: linear-gradient(180deg, rgba(14, 42, 27, 0.45) 0%, rgba(14, 42, 27, 0.30) 40%, rgba(14, 42, 27, 0.88) 100%);
}

/* Encuadre de las fotos del celular (verticales) dentro de una portada ancha.
   Sin esto el recorte se comía justo lo que hay que ver: en la del camión
   quedaba puro pasto y la carga arriba, cortada. */
.hero .foco-camion { object-position: center 34%; }
.hero .foco-tractor { object-position: center 62%; }
/* En pantallas altas y angostas el recorte es menos agresivo y conviene
   correr el foco para que entre también la gente trabajando. */
@media (max-width: 767px) {
  .hero .foco-camion { object-position: center 42%; }
  .hero .foco-tractor { object-position: center 58%; }
}
.hero h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 34px;
  margin-bottom: 14px;
}
.hero .container {
  margin-bottom: 30px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.hero p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

/* En el celular el texto tiene que caber sin empujar la foto. */
@media (max-width: 767px) {
  .hero h2 { font-size: 25px; margin-bottom: 10px; }
  .hero p { font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
  .hero .container { margin-bottom: 18px; margin-left: 16px; margin-right: 16px; padding: 18px 16px; }
  .hero .btn-get-started { padding: 7px 22px; font-size: 14px; }
}
.hero .btn-get-started {
  background: var(--accent-color);
  border: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero .btn-get-started:hover {
  background: var(--zc-verde-hondo);
}

/* --------------------------------------------------------------
   Piezas propias
   -------------------------------------------------------------- */
.intro-seccion {
  max-width: 62ch;
  font-size: 17px;
  color: var(--default-color);
}

/* La foto de "quiénes somos" acompaña al texto, no compite con él. */
#empresa img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 991px) {
  #empresa img { max-height: 240px; }
}

.bloque-venezuela,
.bloque-datos {
  border-left: 4px solid var(--zc-oro);
  background: var(--zc-crema);
  padding: 22px 26px;
  border-radius: 0 8px 8px 0;
}
.bloque-venezuela h3,
.bloque-datos h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.bloque-venezuela p,
.bloque-datos p {
  margin: 0;
  max-width: 78ch;
}
/* Dentro de una seccion crema, el bloque se distingue por el borde y el blanco. */
.light-background .bloque-datos { background: #ffffff; }

/* Las cinco capas: fila numerada, no tarjetas sueltas, porque el orden
   entre ellas es parte de lo que se esta explicando. */
.capas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.capa {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface-color);
  border: 1px solid var(--zc-linea);
  border-radius: 10px;
  padding: 22px 26px;
}
.capa-num {
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 800;
  color: var(--zc-oro);
  letter-spacing: 0.06em;
  padding-top: 2px;
  flex-shrink: 0;
  min-width: 34px;
}
.capa h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 6px;
}
.capa p { margin: 0; }

/* Las dos herramientas */
.herramienta {
  background: var(--zc-bosque);
  color: #ffffff;
  border-radius: 10px;
  padding: 30px 32px;
  height: 100%;
}
.herramienta i {
  font-size: 30px;
  color: #6FE3A2;
  display: block;
  margin-bottom: 14px;
}
.herramienta h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.herramienta p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.titulo-lista {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--zc-verde-hondo);
  margin-bottom: 18px;
}
.lista-capacidades > div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.5px;
}
.lista-capacidades i {
  color: var(--accent-color);
  font-size: 18px;
  line-height: 1.5;
  flex-shrink: 0;
}

/* --------------------------------------------------------------
   Lo que resolvemos (sin conexión + IA)
   --------------------------------------------------------------
   El hilo de la sección es problema → solución, no lista de funciones.
   Por eso cada bloque abre con la línea "atacamos", en oro, antes del
   título: lo primero que se lee es el problema del visitante.
   -------------------------------------------------------------- */
.ataca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--nav-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zc-oro);
}
.ataca i { font-size: 14px; }

.bloque-off {
  display: flex;
  gap: 34px;
  align-items: center;
  background: var(--zc-bosque);
  color: #ffffff;
  border-radius: 12px;
  padding: 34px 38px;
}
.bloque-off h3 {
  color: #ffffff;
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 10px;
}
.bloque-off p { color: rgba(255, 255, 255, 0.84); max-width: 74ch; }
.off-texto { flex: 1; }
.off-casos { list-style: none; padding: 0; margin: 16px 0; }
.off-casos li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.off-casos i { color: #6FE3A2; font-size: 17px; flex-shrink: 0; line-height: 1.5; }
.off-cierre {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14.5px;
}
.off-marca {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.off-marca i { font-size: 42px; color: #6FE3A2; }
@media (max-width: 991px) {
  .bloque-off { flex-direction: column-reverse; align-items: flex-start; gap: 22px; padding: 28px 24px; }
  .off-marca { width: 66px; height: 66px; }
  .off-marca i { font-size: 28px; }
}

.ia-titulo {
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.tarjeta-ia {
  background: var(--surface-color);
  border: 1px solid var(--zc-linea);
  border-radius: 10px;
  padding: 26px;
  height: 100%;
}
.tarjeta-ia h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.tarjeta-ia p:last-child { margin: 0; font-size: 14.5px; }

/* La regla de la IA: se destaca porque es lo que más pesa cuando alguien
   evalúa si le entrega su operación a un sistema automatizado. */
.bloque-regla {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--accent-color);
  border-left: 4px solid var(--accent-color);
  border-radius: 10px;
  padding: 26px 30px;
}
.bloque-regla > i { font-size: 30px; color: var(--accent-color); flex-shrink: 0; line-height: 1.1; }
.bloque-regla h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.bloque-regla p { margin: 0; max-width: 82ch; }
@media (max-width: 575px) {
  .bloque-regla { flex-direction: column; gap: 12px; padding: 24px; }
}

/* Confianza */
.tarjeta-confianza {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface-color);
  border: 1px solid var(--zc-linea);
  border-radius: 10px;
  padding: 26px;
  height: 100%;
}
.tarjeta-confianza > i {
  font-size: 26px;
  color: var(--accent-color);
  flex-shrink: 0;
  line-height: 1.2;
}
.tarjeta-confianza h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.tarjeta-confianza p { margin: 0; }

/* Contacto */
.contact .info-item {
  background: var(--surface-color);
  border: 1px solid var(--zc-linea);
  border-radius: 10px;
  padding: 26px 22px;
  text-align: center;
  height: 100%;
}
.contact .info-item i {
  font-size: 26px;
  color: var(--accent-color);
  display: block;
  margin-bottom: 12px;
}
.contact .info-item h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--heading-color);
  margin-bottom: 6px;
}
.contact .info-item p { margin: 0; }
.contact .info-item a { color: var(--zc-verde-hondo); text-decoration: none; font-weight: 600; }
.contact .info-item a:hover { text-decoration: underline; }

.botones-contacto { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-contacto {
  display: inline-block;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.btn-contacto:hover { background: var(--zc-verde-hondo); color: #ffffff; }
.btn-contacto.secundario {
  background: transparent;
  color: var(--zc-verde-hondo);
  border: 1px solid var(--zc-verde-hondo);
}
.btn-contacto.secundario:hover { background: var(--zc-verde-hondo); color: #ffffff; }
.btn-contacto:focus-visible { outline: 2px solid var(--zc-oro); outline-offset: 3px; }

/* Pie */
.footer .lema {
  color: var(--zc-oro);
  font-style: italic;
  font-size: 15px;
}
.footer .sitename { font-weight: 800; }

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; }
  .carousel-fade .carousel-item { transition: none !important; }
}