/*---------------------------------------------*/
/* Bloque Inicial */
/*---------------------------------------------*/
.bloque-1 {
    position: relative;
    display: flex;
    flex-direction: column;
}

.bloque-1 .top-section {
    background: #06535A; /* Fondo verde */
    height: 300px; /* Altura fija para el bloque amarillo */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.bloque-1 .side-image-left,
.bloque-1 .side-image-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Duplicamos el tamaño */
    height: auto;
    object-fit: contain;
}

.bloque-1 .side-image-left {
    left: 0; /* Pegado al borde izquierdo */
}

.bloque-1 .side-image-right {
    right: 0; /* Pegado al borde derecho */
}

.bloque-1 .content-center {
    text-align: center;
    z-index: 1;
    max-width: 500px; /* Limita el ancho del texto */
    margin: 0 auto; /* Centra el texto horizontalmente */
    word-wrap: break-word; /* Permite dividir texto largo en varias líneas */
} 

.bloque-1 .content-center h1 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Area Black';
}

.bloque-1 .content-center h2 {
    font-size: 20px;
    color: #fff;
    font-family: 'Area';
}

.bloque-1 .bottom-section {
    width: 100%;
}

.bloque-1 .bottom-section img {
    width: 100%;
    height: 300px; /* Altura igual al bloque amarillo */
    object-fit: cover;
    display: block;
}

/*----------------------------------------------*/
/* Bloque Proceso*/
/*----------------------------------------------*/
.bloque-3 {
    background-color: #EDF0F4;
    padding: 50px 5%;
    text-align: center;
    /*padding-bottom: 5%;*/
}

.texto-bloque-3 h2 {
    margin-bottom: 30px;
    text-align: left;
    padding-left: 5%;
    font-size: 40px;
}

.texto-bloque-3 p {
    margin-bottom: 30px;
    text-align: left;
    padding-left: 5%;
    font-size: 15px;
    font-family: 'Area'
    color: #fff;
    width: 600px;
}

/* Línea de tiempo horizontal */
.linea-tiempo-horizontal {
    position: relative;
    display: flex;
    justify-content: space-between; /* Distribuye los hitos uniformemente */
    align-items: center; /* Asegura la alineación vertical */
    width: 80%; /* Reduce el ancho total del contenedor */
    max-width: 800px; /* Máximo ancho para la línea */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 0; /* Elimina cualquier padding adicional */
    /*padding-bottom: 20px;*/
}

.linea-tiempo-horizontal::before {
    content: "";
    position: absolute;
    top: 50%; /* Posiciona la línea en el centro del contenedor */
    left: 0;
    right: 0;
    height: 2px; /* Grosor de la línea */
    background-color: #06535A;
    z-index: 1; /* Coloca la línea detrás de los círculos */
    transform: translateY(35px); /* Ajuste fino para centrar exactamente */
}

.hito-tiempo {
    position: relative;
    text-align: center; /* Centra texto y círculos */
    z-index: 2; /* Asegura que los círculos estén por encima de la línea */
    width: 100px; /* Ancho fijo para cada hito */
    display: flex;
    flex-direction: column;
    align-items: center; /* Asegura la alineación central de todos los elementos */
}

.texto-hito {
    margin-bottom: 10px; /* Espaciado entre texto y círculo */
    width: 200px; /* Incrementa el ancho del texto */
    word-wrap: break-word; /* Permite que las palabras largas se dividan */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.texto-hito h3 {
    font-size: 36px;
    color: #06535A;
    margin: 0;
}

.texto-hito p {
    font-size: 14px;
    color: #333;
    margin: 0 0 10px;
}

.circulo {
    width: 30px;
    height: 30px;
    background-color: #06535A;
    border-radius: 50%;
    border: 1px solid #fff;
    position: relative;
    z-index: 2; /* Asegura que el círculo esté encima de la línea */
    transform: translateY(-50%); /* Asegura que la línea atraviese el círculo */
    transition: background-color 0.2s ease;
    /*padding-bottom: 25px;*/
}

.circulo:hover {
    background-color: #F7DC6F;
}

/*---------------------------------------------*/
/* Galería Herramientas */
/*---------------------------------------------*/

.herramientas {
    background: #1F2937;
    color: #fff;
    margin:0;                 /* sin márgenes externos */
    display: flow-root;       /* evita colapso de márgenes de los hijos */
}

.herramientas .herramientas__title h1 {
    padding-top: 5%;
    text-align: center;
    font-size: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #fff;
    /*margin: 0;*/
}

/* Reset mínimo */
.herramientas, .modal { font-family: "Area", sans-serif; box-sizing: border-box; color: #fff;}
*,*::before,*::after { box-sizing: inherit; }

/* Grilla */
.herramientas__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); padding: 0; }
.card { border: 1px solid #eee; border-radius: 8px; padding: 1rem; text-align: center; cursor: pointer; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.card img { width: 100%; height: 160px; object-fit: contain; }

.card__nombre { font-size: 1rem; margin: .5rem 0; }
.card__tipo   { font-size: .85rem; color: #777; }
.card__precio { font-weight: 700; color: #06535A; }

/* Modal básico - Tarjetas pop up*/
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal__content { background: #fff; padding: 2rem; max-width: 700px; width: 90%; border-radius: 10px; display: flex; gap: 1.5rem; z-index: 9999;}
.modal__img { width: 50%; height: auto; object-fit: contain; }
.modal__info { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
/*.modal__close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; }*/

/* El modal debe estar oculto cuando el atributo hidden está presente */
.modal[hidden] {
  display: none !important;
}

/* Posiciona la “X” dentro de la tarjeta/modal */
.modal__content {
  position: relative;          /* referencia para absolute */
}

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #fff;
  border: 2px solid #EC9706;   /* mismo naranja que los botones */
  color: #EC9706;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.modal__close:hover,
.modal__close:focus {
  background: #EC9706;
  color: #fff;
}

/* Botones */
.btn { padding: .75rem 1.5rem; border-radius: 6px; border:none; cursor:pointer; font-weight:600; }
.btn--primary { background:#EC9706; color:#fff; }
.btn--outline { background:#fff; color:#EC9706; border:2px solid #EC9706; }

/* título por familia */
.familia { margin-bottom: 3rem; }
.familia__titulo { font-size: 1.4rem; margin: .5rem 1rem; color: #fff;}

.swiper { padding: 1rem 2rem; }
.swiper-slide { width: auto; }            /* ancho según contenido */

.swiper-button-prev,
.swiper-button-next {
  width:32px;height:32px;border-radius:50%;
  background:#transparent url("data:image/svg+xml,%3Csvg ...") center/12px no-repeat;
  opacity:.7;transition:opacity .2s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover { opacity:1; }

/* card básica (reaprovechamos) */
.card img{
    width:100%;
    height:120px;
    object-fit:contain;}

.card{border:1px solid #ddd;border-radius:6px;padding:.5rem 1rem;text-align:center}

.card__nombre{
    font-size:.9rem;
    margin:.3rem 0;
    color: #fff;
}
.card__precio{color:#fff;font-weight:600;font-size:.9rem}

/* -------- Swiper continuo en una sola línea -------- */
:root .swiper-wrapper{
  transition-timing-function: linear !important;  /* scroll suave */
}

/* -------- Cada categoría (= .familia) en su propio renglón -------- */
.familia{
  max-width:1280px;        /* o 100% si tu layout es ancho completo */
  width:100%;
  margin:0 auto 3rem;      /* aire entre categorías */
  overflow:hidden;         /* las slides no empujan la siguiente fila */
}

/* reserva alto para todas las filas: card + padding */
.familia .swiper{
  width:100%;
  padding:0 2rem;
  min-height: 220px;   /* 120 img + margenes/border + texto ≈ 200-220 */
  z-index: 10;
}



/*Módulo importación*/
.modulo-importacion {
  padding: 60px 20px;
  text-align: center;
  background: #EDF0F4;
}

.mi-titulo {
  font-size: 1.8rem;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.3;
}

.mi-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;   /* obliga todos en una fila */
  gap: 30px;
  margin-bottom: 40px;
  max-width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;
}

.mi-item {
  --size: 60px;
  display: flex;
  flex-direction: column;  /* icono arriba, texto abajo */
  align-items: center;
  cursor: pointer;
  transition: color .3s;
}

.mi-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mi-icono {
  width: var(--size);
  height: var(--size);
  background: var(--color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.mi-flecha {
  font-size: 1rem;
  transition: transform .3s ease, opacity .3s ease;
  opacity: .7;
}

/* Flecha se “desliza” al hacer hover */
.mi-item:hover .mi-flecha {
  transform: translateX(6px);
  opacity: 1;
}

.mi-texto {
  margin-top: 8px;
  text-align: center;
  line-height: 1.2;
}

/* Botón WhatsApp */
.btn-expertos {
  background: #25D366;     /* verde WhatsApp */
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: background .3s;
}

.btn-expertos:hover {
  background: #1ebe5d;
}