@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');


/* basics */
body {font-family: "Space Grotesk", sans-serif;color: #111111; padding-top:92px;}
a {display:inline-block; text-decoration:none}
strong {font-weight:700}
.absoluta-vertical {-webkit-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);transform:translate(0%,-50%);}
.absoluta-horizontal {-webkit-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);transform:translate(-50%,0%);}
.absoluta-total {-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}

.text-primary {color: #76b75a !important }
.text-secondary {color: #71aa59 !important }
.bg-primary {background:#76b75a !important}
.bg-header {background-color:#dddddd}
.bg-secondary {background:#71aa59 !important}
.bg-hero {background-color:#8ba5b1}
.bg-cielo {background:#ebf4fc;}
.bg-gris-secundario {background:#8ba5b1;}
.bg-bk{background:#dddddd;}

.fs-hero {font-size:3rem;}

.cover {background-size:cover !important; }
.bg-center {background-position:center center !important; }
.bg-top-center {background-position:top center !important; }
.bg-no-repeat {background-repeat:no-repeat}
.auto-full-w {  width: auto;}
.cabecera-background {    height: calc(100vh - 55px);
    position: relative;
    display: flex;
    align-items: center;

}
.vertical-absolute {top:50%;transform: translateY(-50%) }
.horizontal-absolute {left:50%;transform: translateX(-50%) }
.negro-opacity{background-color:rgba(0,0,0,0.4)}
.actionbutton:hover {background-color:#000000 !important}

.row-menu ul li ul{display:none; bottom:auto; position:absolute;  }
.row-menu ul li ul {    -webkit-box-shadow: 0px 14px 5px -10px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 14px 5px -10px rgba(0,0,0,0.21);
box-shadow: 0px 14px 5px -10px rgba(0,0,0,0.21);}
.row-menu ul li:hover ul {display:block}

.row-menu ul li ul li a{padding:10px 20px; display:block}
.row-menu ul li ul ul {position:relative; box-shadow:none}

.nav-link:hover {color:#76b75a;}

.offcanvas{background:#eeeeee !important;}

.back-to-top {
    position: fixed;
    bottom: 70px;
    right: 13px;
    display: none;
    z-index: 10;
    padding: 6px 12px;
	}

.orange {color:#d93025}
.blanc {color:#000000}

.cabecera-background-delimitado {    height: calc(100vh - 55px);
    position: relative;
    display: flex;
    align-items: center;

}

.background-delimitado70 {    height: calc(75vh - 55px);
    position: relative;
    display: flex;
    align-items: center;

}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
}
.background-overlay-oscuro { opacity: 0.1;}

.cabecera-background .container {
    position: relative;
    z-index: 1;
}

.cabecera-background-delimitado .container {
    position: relative;
    z-index: 1;
}

p.cabecera {line-height: 1.6em;font-weight:300; padding-bottom: .5rem !important;font-size: 1.25rem !important; }
.scroll-flecha { display: inline-block; animation: bounce 1.5s infinite; text-decoration: none; transition: transform 0.2s ease-in-out;}
.scroll-flecha:hover {transform: scale(1.2); }
/* cards reversades */

  .icon-card {
            perspective: 1000px;
            height: 200px;
            margin-bottom: 30px;
        }
        
        .icon-flip {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            cursor: pointer;
        }
        
        .icon-card:hover .icon-flip {
            transform: rotateY(180deg);
        }
        
        .icon-front, .icon-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .icon-front {
            background-color: #eeeeee;
            color: #71aa59;
            border: 1px solid #eaeaea;
        }
        
        .icon-back {
            background-color: #71aa59;
            color: white;
            transform: rotateY(180deg);
        }
        
        .icon-front i {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        .icon-back i {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        .icon-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            color: #333;
        }
        
        .container-icons {
            padding: 60px 0;
        }
        
        /* Efecto adicional de elevación */
        .icon-card:hover .icon-front,
        .icon-card:hover .icon-back {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .icon-card:hover .icon-back {
            transform: rotateY(180deg) translateY(-5px);
        }


/*--------------------------------------------------------------
# Timeline
--------------------------------------------------------------*/
.cam-timeline {
  background:#f8f9fa;
}

.timeline {
  position:relative;
  padding:80px 0;
}

/* Línea central */
.timeline::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:4px;
  height:100%;
  background:#0d2b5c;
  transform:translateX(-50%);
}

/* Fila base */
.timeline-row {
  position:relative;
  width:50%;
  padding:10px 40px;
  display:flex;
  align-items:center;
}

/* Alternancia */
.timeline-row.left {
  margin-right:auto;
  justify-content:flex-end;
  text-align:right;
}

.timeline-row.right {
  margin-left:auto;
  justify-content:flex-start;
  text-align:left;
}

/* Punto pequeño sobre la línea */
.timeline-row::before {
  content:'';
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  background:#fff;
  border:4px solid #0d2b5c;
  border-radius:50%;
  transform:translateY(-50%);
  z-index:2;
}

.timeline-row.left::before {
  right:-7px;
}

.timeline-row.right::before {
  left:-7px;
}

/* Línea punteada hacia el icono */
.timeline-row::after {
  content:'';
  position:absolute;
  top:50%;
  width:60px;
  border-top:2px dashed #bbb;
  transform:translateY(-50%);
}

.timeline-row.left::after {
  right:-60px;
}

.timeline-row.right::after {
  left:-60px;
}

/* Bola grande */
.timeline-dot {
  width:60px;
  height:60px;
  background:#76b75a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  z-index:2;
}

.timeline-dot i {
  color:#fff;
  font-size:22px;
}

.timeline-dot img {
  width:30px;
  height:30px;
}

/* Separación texto */
.timeline-content {
  max-width:380px;
  padding:0 25px;
}

.timeline-content h5 {
  font-weight:700;
  margin-bottom:10px;
  font-size:36px;
}

.timeline-content p {
  margin:0;
  color:#555;
}

/*--------------------------------------------------------------
# SDG CARD
--------------------------------------------------------------*/
.sdg-card {
  padding: 25px 15px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
    background: #fff; 
	transition: transform .35s ease, box-shadow .35s ease;
  cursor: pointer;
}
.sdg-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
}

/* Alternancia automática */
.sdg-card:nth-child(odd) {
  background: #2e5d66;
}

.sdg-card:nth-child(even) {
  background: #3f7d89;
}

.sdg-title {
  font-weight: 600;
  margin-bottom: 20px;
}

.sdg-icon {
  display: flex;
  justify-content: center;
}

.sdg-icon img {
  max-width: 50px;
  height: auto;
}



.row > div:nth-child(even) .sdg-card {
  background: #8fa79b;
}

@media (min-width: 992px) {
  .col-lg-5ths {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  overflow-x: hidden;
  padding: 20px 0;
  /* Responsive adjustments */
}

.clients .clients-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.clients .clients-slider:not(:last-child) {
  margin-bottom: 20px;
}

.clients .clients-track {
  display: flex;
  width: fit-content;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.clients .clients-track.track-1 {
  animation-name: scroll-left;
}

.clients .clients-track.track-2 {
  animation-name: scroll-right;
}

.clients .clients-track:hover {
  animation-play-state: paused;
}

.clients .clients-slide {
  flex: 0 0 auto;
  width:200px;
  height: 100px;
  margin: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-color);
  border-radius: 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.clients .clients-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--default-color), transparent 96%), transparent);
  transition: 0.5s;
}

.clients .clients-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.clients .clients-slide:hover::before {
  left: 100%;
}

.clients .clients-slide:hover img {
  filter: none;
  opacity: 1;
}

.clients .clients-slide img {
  max-width: 90%;
  max-height: 70%;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}


.circle-box {
  background: #71aa59;
  color: #fff;
  border-radius: 50%;
  width: 80%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-weight: 500;
  line-height: 1.4;
  font-size:16px;
  text-align: center;
  margin: 0 auto; /* CENTRAR */
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Desktop 60% */
@media (min-width: 992px) {
  .circle-box {
    width: 60%;
	 font-size:18px;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-2080px);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-2080px);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 991px) {
  .clients .clients-slide {
    width: 180px;
    height: 90px;
    margin: 0 20px;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-1760px);
    }
  }

  @keyframes scroll-right {
    0% {
      transform: translateX(-1760px);
    }

    100% {
      transform: translateX(0);
    }
  }
}

@media (max-width: 767px) {
  .clients .clients-slide {
    width: 150px;
    height: 75px;
    margin: 0 15px;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-1440px);
    }
  }

  @keyframes scroll-right {
    0% {
      transform: translateX(-1440px);
    }

    100% {
      transform: translateX(0);
    }
  }
}


/* buttons */
.btn-primary {background-color:#76b75a; border-color:#76b75a}
.btn-secondary {background-color:#76b75a ; border-color:#76b75a }

.btn-primary:hover {background-color:#000000;  }
.btn-secondary {background-color:#transparent; border-color:#000; color:#000}

.border-primary {  border-color:#76b75a; }
.border-top-extra {border-top:8px solid #76b75a; }
.border-top-extra:hover {border-top:8px solid #76b75a; }
/*
ul li::marker {
  color: #1f6400;
}
*/

.feature-item {
    height: 100%;
    padding: 30px 20px;
    border: 1px solid #76b75a;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.feature-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.feature-item:hover ul li {background-color:#76b75a !important; color:#fff;}

.feature-icon img {
    width: 56px;
    height: auto;
}

.feature-text ul {
    padding-left: 18px;
    margin: 0;
}

.feature-text li {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 10px;
	 transition: 
        background-color 0.25s ease,
        color 0.25s ease;
}

.feature-text li:last-child {
    margin-bottom: 0;
}

.feature-text li {
    position: relative;
    z-index: 1;
}

.feature-text li::before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: 50%;
    width: 1px;
    /*background-color: #f8f9fa; mismo tono que bg-light */
    transform: translateX(-50%);
    z-index: -1; /* CLAVE: va detrás */
}

/* Ajuste para que no sobresalga arriba y abajo */
.feature-text li:first-child::before {
    top: 50%;
}

.feature-text li:last-child::before {
    bottom: 50%;
}

/* CAM Model home */
.cam-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 60px auto;
}

/* anillo */
.cam-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        #7ed141 0deg 51.43deg,
        #205b6a 51.43deg 102.86deg,
        #79d44d 102.86deg 154.29deg,
        #205b6a 154.29deg 205.72deg,
        #9bde7a 205.72deg 257.15deg,
        #00b147 257.15deg 308.58deg,
        #bae8a1 308.58deg 360deg
    );
}

/* centro */
.cam-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    /*overflow: hidden;*/
	 display: flex;
    align-items: center;      /* centra vertical */
    justify-content: center;
}
.cam-center img {height:80%; width:auto;}
.cam-center::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: url("/www/img/lettuce.jpg") center / cover no-repeat;*/
}

.cam-center::after {
    content: "";
    position: absolute;
    inset: 0;

}
/* highlights */
.cam-highlight {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* cada quesito */
.qh1 {
    background: conic-gradient(
        rgba(126,209,65,1) 0deg 54.43deg,
        transparent 51.43deg 360deg
    );
}
.qh1 {
    transform: scale(1);
    transition:

        transform 0.25s ease;
}

/* estado activo: quesito más grande */
.icon-1:hover ~ .qh1,
.qh1.is-active {
    opacity: 1;
    transform: scale(1.08);
}

.qh2 {
    background: conic-gradient(
        transparent 0deg 51.43deg,
        rgba(32,91,106,1) 51.43deg 102.86deg,
        transparent 102.86deg 360deg
    );
}

.qh3 {
    background: conic-gradient(
        transparent 0deg 102.86deg,
        rgba(121,212,77,1) 102.86deg 154.29deg,
        transparent 154.29deg 360deg
    );
}

.qh4 {
    background: conic-gradient(
        transparent 0deg 154.29deg,
        rgba(32,91,106,1) 154.29deg 205.72deg,
        transparent 205.72deg 360deg
    );
}

.qh5 {
    background: conic-gradient(
        transparent 0deg 205.72deg,
        rgba(155,222,122,1) 205.72deg 257.15deg,
        transparent 257.15deg 360deg
    );
}

.qh6 {
    background: conic-gradient(
        transparent 0deg 257.15deg,
        rgba(0,177,71,1) 257.15deg 308.58deg,
        transparent 308.58deg 360deg
    );
}

.qh7 {
    background: conic-gradient(
        transparent 0deg 308.58deg,
        rgba(186,232,161,1) 308.58deg 360deg
    );
}

.qh2,
.qh3,
.qh4,
.qh5,
.qh6,
.qh7 {
    transform: scale(1);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* estado activo: quesito más grande */
.qh2.is-active,
.qh3.is-active,
.qh4.is-active,
.qh5.is-active,
.qh6.is-active,
.qh7.is-active,

/* activación directa desde icono */
.icon-2:hover ~ .qh2,
.icon-3:hover ~ .qh3,
.icon-4:hover ~ .qh4,
.icon-5:hover ~ .qh5,
.icon-6:hover ~ .qh6,
.icon-7:hover ~ .qh7 {
    opacity: 1;
    transform: scale(1.08);
}
.circular-model {
  background: #f5f7f8;
}

.circular-model__grid {
  position: relative;
}


/* iconos */
.cam-icon {
    position: absolute;
    font-size: 32px;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.2s ease;
    padding: 30px;
}

.cam-icon:hover,
.cam-icon.is-active {
    transform: scale(1.2);
}

/* posiciones */
.icon-1 { top: 15px; left: 210px; }
.icon-2 { top: 110px; right: 0px; }
.icon-3 { top: 230px; right: 30px; }
.icon-4 { bottom: 0px; left: 142px; }
.icon-5 { bottom: 55px; left: 35px; }
.icon-6 { bottom: 170px; left: 5px; }
.icon-7 { top: 15px; left: 80px; }

/* ACTIVACIÓN QUESITO */
.icon-1:hover ~ .qh1,
.icon-2:hover ~ .qh2,
.icon-3:hover ~ .qh3,
.icon-4:hover ~ .qh4,
.icon-5:hover ~ .qh5,
.icon-6:hover ~ .qh6,
.icon-7:hover ~ .qh7 {
    opacity: 1;
}

/* OL de quesito */
.ol-cam {
    counter-reset: cam;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* LI BASE */
.ol-cam li {
    counter-increment: cam;
    position: relative;
    padding: 10px 10px 10px 50px;
    overflow: hidden;
    cursor: default;
    z-index: 1;
    border-radius: 4px;
}

/* NÚMERO */
.ol-cam li::before {
    content: counter(cam, decimal-leading-zero);
    position: absolute;
    left: 10px;
    top: 12px;
    font-weight: 700;
    color: #1f6400;
    z-index: 1;
}

/* FONDO ANIMADO */
.ol-cam li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #1f6400;

    opacity: 0;
    transform: translateX(-8px) scaleX(1.5);
    filter: blur(2px);

    transform-origin: left;
    transition:
        opacity 0.18s ease,
        transform 0.22s ease,
        filter 0.22s ease;

    z-index: -1;
}

.ol-cam li:nth-child(1)::after{
    background: #7ed141;
}
.ol-cam li:nth-child(2)::after{
    background: #205b6a;
}
.ol-cam li:nth-child(3)::after{
    background: #79d44d;
}
.ol-cam li:nth-child(4)::after{
    background: #205b6a;
}
.ol-cam li:nth-child(5)::after{
    background: #9bde7a;
}
.ol-cam li:nth-child(6)::after{
    background: #00b147;
}
.ol-cam li:nth-child(7)::after{
    background: #bae8a1;

}


/* SECCION QUOTE */



.custom-quote {
    font-size: 1.75rem;          /* más grande */
    font-weight: 500;            /* más presencia */
    line-height: 1.6;
    color: #1f2d2b;              /* más contraste */
    max-width: 900px;
    margin: 0 auto;
}

.quote-author {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6c757d;
}


/*ABOUT*/

.about-section {
    background-color: #ffffff;
}

.about-card {
    background: #ffffff;
    border-radius: 8px;
    transition: all 0.3s ease;

}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.about-card p {
    color: #495057;
    line-height: 1.7;
}


/* TEXTO POR DELANTE */
.ol-cam li * {
    position: relative;
    z-index: 2;
}

/* HOVER Y ACTIVACIÓN DESDE QUESITO */
.ol-cam li:hover::after,
.ol-cam li.is-active::after {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    filter: blur(0);
}

.ol-cam li:hover,
.ol-cam li.is-active,
.ol-cam li:hover *,
.ol-cam li.is-active * {
    color: #ffffff;
}


.ol-cam li:hover::before,
.ol-cam li.is-active::before {
    color: #ffffff;
}


.custom-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.arrow-icon {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
}

.custom-card:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

.cam-highlight.is-active {
    opacity: 1;
}


.hr-custom {
    width: 80px;
    height: 4px;
    background-color: #76b75a;
    border: none;
    margin-left: 0;
    opacity: 1;
	}

	.hr-width {
    width: 100%;
    height: 4px;
    background-color: #76b75a;
    border: none;
    margin-left: 0;
    opacity: 1;
	}

	.col-5ths {
  flex: 0 0 20%;
  max-width: 20%;
}
/* FONTS */

.fs-menu {font-size:0.9rem;}
.fw-500  {font-weight:500}


.border-primary {border-color:#2a3475 !important}
select {cursor:pointer; }

.btn-ollearis {
  background-color: #2a3475; /* Color base */
  transition: all 0.3s ease;
}

.btn-ollearis i {
  transition: margin-left 0.3s ease;
}

.btn-ollearis:hover {
  background-color: #4895e4; /* Un tono más oscuro opcional, o puedes mantener #0d6efd si ya lo usas de base */
  text-decoration: none;
}

.btn-ollearis:hover i {
  margin-left: 8px;
}
.link-card {

  transition: all 0.3s ease;
}
.rounded-color{  transition: all 0.3s ease;
}
.rounded-color:hover .rounded-circle {background-color:#ffffff !important; transform: translateY(-5px);}

.object-fit-cover {
  object-fit: cover;
}

.link-card:hover {
  background-color: #4895e4;
  color: #fff;
  text-decoration: none;
}

.link-card:hover h5,
.link-card:hover p,
.link-card:hover i {
  color: #fff;
}

.logo img{width:240px}
.w-70 {width:70%}

.container-mid {width:600px; }
.min-custom-height {
  min-height: calc(100dvh - 72.3px);
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: 130% 0;
  background-repeat: no-repeat;
  background-size: auto;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}

/* header video */

.hero-section {
  height: calc(100vh - 92px);
  position: relative;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* oscuridad del vídeo */
  z-index: 1;
}

.hero-overlay {
  z-index: 1;
}

.scroll-arrow {
  bottom: 30px; /* distancia desde la parte inferior */
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.scroll-arrow:hover {
  transform: translate(-50%, -5px);
}


/* bloque bk foto texto home */
.item-zonas {
  height: 380px;
  position: relative;
}

.nombre-zona {
  top: 50%;
  width: 100%;
  padding: 0 20px;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

.cam-model-bk {}

.zona {
  position: relative;
  color: #ffffff !important;
  overflow: hidden;
}

/* Capa de fondo transparente */
.zona-bg {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Contenido que aparece encima */
.zona-encima {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;

background: linear-gradient(0deg, rgba(17,17,17,0.6671043417366946) 1%, rgba(17,17,17,0) 85%);

  z-index: 1;
  position: relative;
}

.zonas:hover .zona-encima {
  transform: translateY(0);
  opacity: 1;
}

.icon-circle-pq{width:70px !important; height:70px !important; margin:initial !important; border-radius:50%;background: #76b75a;}
.icon-circle-pq img { width: 30px !important;}

.zonas:hover p a {
  color: #ffffff !important;
}

/* por si el overlay tapa el hover */
.zona-bg { pointer-events: none; }

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* animación del zoom únicamente donde pongas zoom-card + zoom-bg */
.zoom-bg {
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
  will-change: transform;
}

/* disparamos el efecto desde el contenedor, así funciona aunque el enlace lo cubra */
.zoom-card:hover .zoom-bg,
.zoom-card:focus-within .zoom-bg { /* accesible con teclado */
  transform: scale(1.06);
}

/* opcional: ligera sombra al hacer hover */

/* opcional: oscurecer un pelín la capa */
.zona-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.0);
  transition: background 0.1s ease-in-out;
  border-radius: inherit;
}
.zoom-card:hover .zona-bg,
.zoom-card:focus-within .zona-bg {
  background: rgba(0,0,0,0.1);
}

@media (min-width: 992px) {
  .circular-model__grid::before {
    content: "";
    position: absolute;
    top: 55px;
    left: 4%;
    width: 92%;
    height: 2px;
    background: #d3d8dc;
    z-index: 0;
  }
}

@media (max-width:991px){

.timeline::before {
    left:25px;
  }

  .timeline-row {
    width:100%;
    margin:0;
    padding-left:90px;
    justify-content:flex-start;
    text-align:left;
  }

  .timeline-row.left,
  .timeline-row.right {
    flex-direction:row;
  }

  .timeline-dot {
    position:absolute;
    left:0;
  }

}

.circular-model__item {
  position: relative;
  z-index: 2;
}

.circular-model__icon {
  width: 110px;
  height: 110px;
  background: #8bc34a;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* evita activar en dispositivos sin hover real */
@media (hover: hover) and (pointer: fine) {
  .zoom-card:hover .zoom-bg { transform: scale(1.06); }
}

/* respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .zoom-bg, .zona-bg { transition: none; }
}

.about-section {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.about-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.about-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #111;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-list li {
  margin-bottom: 15px;
  padding-left: 44px;
  position: relative;
}


.about-list li::before {
  content: "\F633"; /* código unicode del icono */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 1.8rem;
  color: #2a3475 ; /* color corporativo */
  line-height: 1;
}

.about-image {
  flex: 1;
  text-align: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}



.absolute-a-relative {position:absolute}















/* RESPONSIVE */


@media (max-width: 990px) {
.timeline-row::before{display:none !important}
.timeline-row::after{display:none !important}
.timeline-row.left{justify-content: flex-start; text-align:left}
.timeline-row.right{justify-content: flex-start; text-align:left}
.timeline{padding:20px 0px}
.col-5ths {
  flex: 0 0 100%;
  max-width:100%

}
.container-mid {
        width: 100%;
    }
.absolute-a-relative {position:relative}
.item-zonas{height:250px}
}