.TitAct2{
	color:#6f5745;
	font-size: 40px;
	
}

/* Ajustes visuales de la sección */
.card5 {
  background-color: #efece9;
  border: 1px solid #d9d2cc; /* todo en una sola línea */
  border-radius: 25px;
  color: #6f5745;
  
}

/* Estilo base de los enlaces */
.link-pdf {
	font-size: 13px;
  position: relative;
  display: inline-block;
  color: #6f5745;           /* texto en marrón */
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 3px;      /* espacio para la línea */
  transition: color 0.3s ease;
}

/* Línea animada */
.link-pdf::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #6f5745; /* verde igual al círculo */
  transition: width 0.3s ease;
}

.link-pdf:hover::after {
  width: 100%;
}

.link-pdf:hover {
  color: #6f5745;
}

.icon-circle { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;       /* tamaño en desktop */
  height: 26px;
  border-radius: 50%;
  background-color: #8cc83f;  
}

.icon-circle i {
  color: #fff !important;
  font-size: 13px;   /* tamaño ícono en desktop */
  line-height: 1;
}

/* En móviles: agrandamos para mejor accesibilidad */
@media (max-width: 576px) {
  .icon-circle {
    width: 34px;   /* círculo más grande */
    height: 34px;
  }
  .icon-circle i {
    font-size: 15px;  /* ícono más grande */
  }
}


.card-text {
  color: #6f5745 !important;
  font-size: 13px !important;
  text-align: left !important;
	line-height: 135%  !important;
}


  .page-section {
      padding: 40px 0;
    }

    .page-container {
      max-width: var(--container-max);
    }

    .surface-card {
      background: var(--surface);
      border-radius: var(--radius-xl);
      padding: 28px;
      box-shadow: var(--shadow-soft);
    }

    .section-kicker {
      display: inline-block;
      margin-bottom: 14px;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--green);
    }

    .section-title {
      margin: 0 0 16px;
      font-size: clamp(2rem, 2.9vw, 3.3rem);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .section-text {
      margin: 0;
      font-size: 0.97rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }

    .hero-media {
      width: 100%;
      height: 100%;
      min-height: 420px;
      object-fit: cover;
      border-radius: 22px;
    }

   .feature-list,
.benefits-list{
list-style:none;
padding-left:0;
margin:0;
}

.feature-list li,
.benefits-list li{

position:relative;
padding-left:22px;
margin-bottom:12px;

font-size:0.94rem;
line-height:1.7;

}

/* VIÑETA FLECHA */

.feature-list li::before,
.benefits-list li::before{

content:"➤";

position:absolute;

left:0;
top:3px;

font-size:12px;

color:#FDB71A;

}
    .link-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      font-size: 0.92rem;
      font-weight: 700;
      text-decoration: none;
    }

    .link-more:hover {
      opacity: 0.8;
    }

    .organic-wrapper {
      position: relative;
      padding: 26px 0 10px;
    }

    .organic-card {
      position: relative;
      overflow: visible;
      background: #7f6c5f;
      border-radius: 56px 220px 56px 160px / 56px 180px 56px 150px;
      padding: 72px 62px;
      min-height: 520px;
      box-shadow: var(--shadow-soft);
    }

    .organic-card .section-title,
    .organic-card .section-text,
    .organic-card .feature-list li {
      color: #ffffff;
    }

    .organic-image {
      position: absolute;
      right: 34px;
      top: 40%;
      transform: translateY(-30%);
      width: 380px;
      height: 380px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
      background: #ddd;
    }

    .organic-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .info-title {
      margin: 0 0 18px;
      font-size: clamp(1.8rem, 2.4vw, 2.7rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .contact-link {
      color: #7c9a2b;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .steps-panel {
      background: transparent;
    }

    .step-item {
      border-bottom: 1px solid var(--border-soft);
      padding: 18px 0;
    }

    .step-item:last-child {
      border-bottom: 0;
    }

    .step-header {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .step-toggle {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid var(--yellow);
      color: var(--yellow);
      font-size: 1.08rem;
      font-weight: 700;
      line-height: 1;
    }

    .step-toggle.is-active {
      background: #e0bc2f;
      border-color: #e0bc2f;
      color: #fff;
    }

    .step-badge {
      display: inline-block;
      margin-bottom: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #b7d86a;
      color: #53641b;
      font-size: 0.76rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .step-title {
      margin: 0 0 8px;
      font-size: 1.28rem;
      line-height: 1.2;
      color: #7f6c5f;
		font-weight: bold;
    }

    .step-text {
      color:  #7f6c5f; !important;
  font-size: 16px !important;
  text-align: left !important;
	line-height: 135%  !important;
    }

    .benefits-card {
     background: linear-gradient(135deg, #9d4fa2, #9d4fa2);
      color: #fff;
      border-radius: 28px;
      padding: 42px 34px;
      box-shadow: var(--shadow-soft);
    }

    .benefits-card .section-kicker,
    .benefits-card .section-title,
    .benefits-card .section-text,
    .benefits-card .step-title,
    .benefits-card .step-text,
    .benefits-card .benefits-list li {
      color: #fff;
    }

    .benefits-card .section-kicker {
      color: rgba(255, 255, 255, 0.82);
    }

    .benefit-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.26);
      padding: 18px 0;
    }

    .benefit-item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .benefit-icon {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.55);
      color: #fff;
      font-size: 1.08rem;
      font-weight: 700;
      line-height: 1;
    }

    .benefit-icon.is-active {
      background: #f0c329;
      border-color: #f0c329;
      color: #6c3e00;
    }

    .u-gap-24 {
      gap: 24px;
    }

    @media (max-width: 1199.98px) {
      .organic-card {
        padding: 58px 44px;
      }

      .organic-image {
        right: 12px;
        width: 280px;
        height: 280px;
      }
    }

    @media (max-width: 991.98px) {
      .page-section {
        padding: 28px 0;
      }

      .surface-card,
      .benefits-card {
        padding: 24px;
      }

      .hero-media {
        min-height: 280px;
      }

      .organic-card {
        padding: 42px 24px 132px;
        min-height: auto;
        border-radius: 42px 120px 42px 90px / 42px 110px 42px 90px;
      }

      .organic-image {
        left: 50%;
        right: auto;
        bottom: -58px;
        top: auto;
        transform: translateX(-50%);
        width: 210px;
        height: 210px;
      }
    }

    @media (max-width: 767.98px) {
      .section-title {
        font-size: 2rem;
      }

      .info-title {
        font-size: 1.7rem;
      }

      .step-title {
        font-size: 1.08rem;
      }

      .feature-list li,
      .benefits-list li,
      .section-text,
      .step-text {
        font-size: 0.92rem;
      }
    }


.card-text4 {
  color: #6f5745  !important;
  font-size: 32px !important;
  text-align: left !important;
	line-height: 135%  !important;
}

.card-text2 {
  color: #6f5745 !important;
  font-size: 16px !important;
  text-align: left !important;
	line-height: 135%  !important;
}
.blanco {
  color: #fff !important;
}

.titulo { font-size: 38px; font-weight: 700; line-height: 1.2; color: #dac0dc; }



/* SECCIÓN BENEFICIOS */

.beneficios-section{

padding:20px 0;

}

/* tarjeta */

.beneficio-card{

position:relative;

background:#7a6a5c;

color:white;

padding:28px;

border-radius:14px;

min-height:95px;

overflow:hidden;

cursor:pointer;

transition:.35s;

display:flex;

align-items:center;

}

/* efecto levantar */

.beneficio-card:hover{

transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.15);

}

/* circulo animado */

.beneficio-card::before{

content:"";

position:absolute;

width:38px;
height:38px;

background:#8BC34A;

border-radius:50%;

bottom:14px;
right:14px;

transform:scale(1);

transition:transform .5s ease;

z-index:0;

}

/* expansión */

.beneficio-card:hover::before{

transform:scale(18);

}

/* texto */

.beneficio-card p{

position:relative;

z-index:2;

margin:0;

font-size:15px;

line-height:1.4;

}

/* icono */

.icono{
    position: absolute;
    bottom: 13px;
    right: 11px;
    width: 36px;
    height: 36px;
    background: #8BC34A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    z-index: 3;
    transition: .3s;

}

/* icono hover */

.beneficio-card:hover .icono{

background:white;
color:#8BC34A;

}


/* textos */

.texto-normal,
.texto-hover{
	font-size: 13px;

position:relative;
z-index:2;

transition:opacity .3s;

}

/* texto hover oculto */

.texto-hover{

opacity:0;
position:absolute;
left:28px;
right:50px;

}

/* cuando pasa el mouse */

.beneficio-card:hover .texto-normal{

opacity:0;

}

.beneficio-card:hover .texto-hover{

opacity:1;

}
.Text02{
	color:#8cc83f;
	font-weight: 700;

}


.comoTrabajamos {

  background: url("../img/circulo2.png")no-repeat center top;
  background-size: cover; /* o cover según necesites */
  background-color: #f9f8f8; /* para que el resto quede blanco */

}

.text-white{
  color:#fff !important;
}

.text-brown{
  color:#bdb1a8 !important;
}

.botones-accion{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:25px;
}

/* botón borde verde */

.btn-outline-green{
  padding:12px 28px;
  border:2px solid #8BC34A;
  border-radius:30px;
  color:#5f5a55;
  font-weight:600;
  text-decoration:none;
  background:white;
  transition:all .3s ease;
}

.btn-outline-green:hover{
  background:#8BC34A;
  color:white;
}

/* botón verde */

.btn-green{
  padding:12px 28px;
  border-radius:30px;
  background:#8BC34A;
  color:white;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
}

.btn-green:hover{
  background:#7ab437;
}

.vision-wrapper{
position:relative;
}

.vision-card{

background:#7a6a5c;

color:white;

padding:70px;

border-radius:120px 0 120px 120px;

}

.vision-img{
    width: 510px;
    height: 510px;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-image: url(img/balsa.png);

}

.vision-tabs{

display:flex;

gap:25px;

margin-bottom:25px;

padding:0;

list-style:none;

}

.vision-tabs button{

background:none;

border:none;

color:#e7d9c6;

font-weight:600;

cursor:pointer;

padding-bottom:6px;

}

.vision-tabs button.active{

border-bottom:3px solid #f2b705;

color:#fff;

}

.tab-panel{

display:none;

}

.tab-panel.active{

display:block;

}



.hitos-section{
background:#f6f6f6;
}

.titulo-hitos{
font-weight:700;
color:#6b5a4c;
}

/* TIMELINE */

.timeline{
position:relative;
max-width:1000px;
margin:auto;
}

/* linea vertical */

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
height:100%;
width:2px;
background:#ddd;
}

/* item */

.timeline-item{
display:grid;
grid-template-columns:1fr 60px 1fr;
align-items:center;
margin-bottom:60px;
}

/* lado izquierdo */

.timeline-left{
text-align:right;
padding-right:25px;
}

/* lado derecho */

.timeline-right{
padding-left:25px;
}

/* titulo */

.timeline-title{
font-weight:600;
color:#5c5146;
	font-size: 15px;
}

/* año */

.timeline-year{
display:inline-block;
background:#8e4fa5;
color:#fff;
padding:6px 14px;
border-radius:20px;
font-size:12px;
margin-bottom:10px;
}

/* punto */

.timeline-middle{
position:relative;
}

.timeline-dot{
width:22px;
height:22px;
background:#8e4fa5;
border-radius:50%;
position:absolute;
left:50%;
top:10px;
transform:translateX(-50%);
border:5px solid #dac0dc;
}

/* caja */

.timeline-card{
background:#fff;
border:1px solid #ead9f2;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
line-height:1.4;
}


/* lista */

.lista-hitos{
list-style:none;
padding:0;
margin:0;
line-height:1.35 !important;

}


.lista-hitos li{
position:relative;
padding-left:18px;
margin-bottom:8px;
line-height:1.35;
}

.lista-hitos li::before{
content:"➤";
position:absolute;
left:0;
top:3px;
font-size:12px;
color:#FDB71A !important;
}

/* boton */

.btn-vermas{
border:none;
background:none;
font-weight:600;
cursor:pointer;
}


@media(max-width:768px){

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

.timeline-item{
grid-template-columns:40px 1fr;
}

.timeline-left{
grid-column:2;
text-align:left;
padding-right:0;
margin-bottom:10px;
}

.timeline-middle{
grid-column:1;
}

.timeline-right{
grid-column:2;
padding-left:0;
}

.timeline-dot{
left:20px;
}

}


.BtnActRegistro {
  color: #7f6c5f;
  font-weight: bold;
  background-color: #ffffff;
  padding: 10px 25px;
  border: none;
  border-radius: 50px; /* estilo pill */
  transition: all 0.3s ease; /* animación suave */
}

.BtnActRegistro:hover {
  background-color: #fdb71a; /* un verde más oscuro */
  color: #fff; /* texto blanco al pasar */
  transform: scale(1.05); /* efecto zoom ligero */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* sombra elegante */
}

.BtnActRegistro:focus,
.BtnActRegistro:active {
  outline: none !important;
  box-shadow: none !important;
}