@font-face {
  font-family: 'Beautique Display';
  src: url('../assets/fonts/BeautiqueDisplay-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Beautique Display Bold';
  src: url('../assets/fonts/BeautiqueDisplay-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
}
body{
    overflow-x: hidden !important;
}
section.portada {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/images/fondo-portada.svg');
    background-size: cover;
    background-position: center;
    position: relative;
}
/* ESTILOS DE TEXTO Y ELEMENTOS DE LA PORTADA */
.hero{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 900px;
    z-index: 20;
}
.hero-brand{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    align-items: center;
}
.hero-lead{
    font-size: 20px;
    color: #441A23;
    font-weight: bold;
    font-family:'Beautique Display Bold', sans-serif;
}
.hero-lead span{
    font-size: 20px;
    font-weight: bold;
    color: #D19834;
}
.hero-brand img{
    width: 150px;
    border-right: 1px solid #db9500;
}
.hero-title h1{
    font-size: 100px;
    color: #004D43;
    font-family: 'Beautique Display', sans-serif;
}
.hero-sub{
    font-size: 20px;
    color: white;
    font-weight: bold;
}
.hero-sub strong, span{
    color: #441A23;
}
.hero-sub span{
    font-size: 40px;
    font-family: 'Beautique Display', sans-serif;
}
.hero-sub::before{
    content: "";
    width: 40px;
    height: 40px;
    display: flex;
    margin: auto;
    background-image: url('../assets/images/flechas-portada.svg');
    background-size: contain;
    animation: bounceDown 1.2s ease-in-out infinite;
}
.hero-brand p{
    margin-left: 10px;
    color: gray;
}
.elementos-graficos{
    position: relative;
    z-index: 10;
}
.imagen-montañas{
    position: relative;
    bottom: 100px;
}
.finca-cafetera{
    position: absolute;
    width: 35%;
    right: 0;
    top: 50%;
}
.imagen-cafe{
    position: absolute;
    width: 42%;
    left: 0;
}
/* ESTILOS DE TEXTO Y ELEMENTOS DE LA PORTADA */
/* ESTILOS SECTION 1 */
section.punto1 .texto-mano1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    text-align: center;
}
section.punto1 .texto-mano1 h2::before{
        content: "";
    width: 40px;
    height: 40px;
    display: flex;
    margin: auto;
    background-image: url('../assets/images/flechas-portada.svg');
    background-size: contain;
    animation: bounceDown 1.2s ease-in-out infinite;
}
section.punto1 .texto-mano1 p{
    font-size: 20px;
    color: #D19834;
    font-weight: 600;
}
section.punto1 .texto-mano1 strong{
    color: #441A23;
}
section.punto1 .texto-mano1 h2{
    font-size: 20px;
    color: #D19834;
    margin-top: 40px;
}
section.punto1 .texto-mano1 span{
    font-size: 40px;
    color: #441A23;
    font-family: 'Beautique Display Bold', sans-serif;
}
section.punto1{
    width: 100%;
    height: 67vh;
    background-image: url('../assets/images/fondo_punto1.png');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
.mano-cafe{
position: absolute;
    width: 45%;
    top: 35%;
    left: -50px;
}section.punto5
/* ESTILOS SECTION 1 */
/* ESTILOS INTERLINEADO 1 */
.interlineado, .interlineado2, .interlineado3{
    position: relative;
    z-index: 1;
}
.interlineado svg{
    position: absolute;
    width: 40%;
    margin: 0 auto;
    display: block;
    top: auto;
    transform: translate(-48%, -50%);
    left: 50%;
    z-index: 1;
}
.interlineado2 svg{
    position: absolute;
    width: 35%;
    margin: 0 auto;
    display: block;
    top: 50%;
    transform: translate(45%, -70%);
}
.interlineado3 svg{
    position: absolute;
    width: 35%;
    margin: 0 auto;
    display: block;
    top: 50%;
    transform: translate(-35%, -15%);
    left: 50%;
}
/* ESTILOS INTERLINEADO 1 */
/* ESTILOS SECTION 2 EMPAQUE 1 */
.info-empaque1{
    display: flex;
    width: 100%;
    position: relative;
    padding: 50px;
}
.info-empaque1 .col{
    flex: 1;
}
.info-empaque1 .titulo-empaque1{
    line-height: 35px;
}
.info-empaque1 .bloque-boton a{
text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    background-color: #752581;
    width: max-content;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
    position: relative;
}
.info-empaque1 .bloque-boton a::after{
content: "";
    width: 30px;
    height: 30px;
    display: flex;
    background-image: url(../assets/images/flecha-botones.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 50%;
    right: 20px;
    transform: translate(50%, 10%);
    margin-left: 10px;
}
.info-empaque1 .titulo-empaque1 h3{
    color: #441A23;
    font-size: 20px
}
.info-empaque1 .titulo-empaque1 strong{
    color: #D19834;
    font-size: 40px;
    font-family: 'Beautique Display Bold', sans-serif;
}
.info-empaque1 .col:first-of-type{
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-empaque1 .col img{
    width: 140%;
}
.info-empaque1 .col ul li.items-caracteristicas{
    list-style: none;
    align-items: center;
    justify-content: end;
    display: flex;
    gap: 5px;
}
.info-empaque1 .col ul li.items-caracteristicas img{
    width: 55px;
    margin-left: 10px;
    order: 2;
}
.info-empaque1 .col ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* ESTILOS SECTION 2 EMPAQUE 1 */
/* ESTILOS SECTION 3 MANO 2 */
section.punto2{
    width: 100%;
    height: 100vh;
    background-image: url('../assets/images/fondo-section2.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.mano-grano{
position: absolute;
    width: 60%;
    top: 10%;
    right: -100px;
}
section.punto3 .titulo-empaquedos{
    position: relative;
    top: 10%;
    left: 10%;
    line-height: 30px;
}
section.punto3 .titulo-empaque2 h3{
    font-size: 20px;
    color:  #441A23;
}
section.punto3 .titulo-empaque2 strong{
    font-size: 40px;
    color: #D19834;
    font-family: 'Beautique Display Bold', sans-serif;
}
section.punto3 .bloque-boton a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    background-color: #000F9F;
    width: max-content;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
}
section.punto3 .bloque-boton a::after{
    content: "";
    width: 30px;
    height: 30px;
    display: flex;
    margin-left: 10px;
    background-image: url('../assets/images/flecha-botones.svg');
    background-size: contain;
        background-repeat: no-repeat;
}
section.punto3{
    width: 100%;
    height: 137vh;
    background-image: url('../assets/images/fondo-section3.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
/* ESTILOS SECTION 3 MANO 2 */
/* ESTILOS SECTION 4 EMPAQUE 2 */
.info-empaque2 .col ul li.items-caracteristicas{
    list-style: none;
    align-items: center;
    justify-content: start;
    display: flex;
    gap: 5px;
}
.info-empaque2 .col ul li.items-caracteristicas img{
    width: 55px;
    margin-right: 10px;
}
.info-empaque2 .col ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
}  
.info-empaque2{
    display: flex;
    align-items: center;
    width: 80%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    padding: 50px;
    z-index: 2;
}
.texto-detras-empaque{
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    top: 25%;
    left: 50%;
    gap: 10px;
}
.texto-detras-empaque img{
    width: 60px;
}
.info-empaque2 .col{
    flex: 1;
}
.info-empaque2 img{
    width: 80%;
}
section.punto4{
    width: 100%;
    height: 120vh;
    background-image: url('../assets/images/fondo-section4.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
/* ESTILOS SECTION 4 EMPAQUE 2 */
/* ESTILOS SECTION 5 EMPAQUE 3 */
.info-empaque3{
    display: flex;
    width: 100%;
    position: relative;
    gap: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
}
.info-empaque3 .col{
    flex: 1;
}
.info-empaque3 .col:first-of-type{
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-empaque3 .col img{
    width: 80%;
}
.info-empaque3 .col ul li.items-caracteristicas{
    list-style: none;
    align-items: center;
    justify-content: end;
    display: flex;
    gap: 5px;
}
.info-empaque3 .col ul li.items-caracteristicas img{
    width: 55px;
    margin-right: 10px;
}
.info-empaque3 .col ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
}  
.info-empaque3 .titulo-empaque3{
    line-height: 30px;
}
.info-empaque3 .titulo-empaque3 h3{
    font-size: 20px;
    font-weight: bold;
    color: #441A23;
}
.info-empaque3 .titulo-empaque3 strong{
    color: #D19834;
    font-size: 40px;
    text-align: right;
    font-family: 'Beautique Display Bold', sans-serif;
}
.info-empaque3 .titulo-empaque3 a{
text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    background-color: #004D43;
    width: max-content;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
    align-items: center;
    position: relative;
}
.info-empaque3 .titulo-empaque3 a::after{
    content: "";
    width: 30px;
    height: 30px;
    display: flex;
    background-image: url(../assets/images/flecha-botones.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 50%;
    right: 25px;
    transform: translate(100%, 0%);
}
/* ESTILOS SECTION 5 EMPAQUE 3 */
/* ESTILOS SECTION FOOTER */
section.punto5{
    width: 100%;
    height: 114vh;
    background-image: url('../assets/images/fondo-section5.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
section.punto5 h3{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 25px;
    color: #441A23;
    width: 100%;
    max-width: 900px;
    font-family: 'Beautique Display Bold', sans-serif;
}
section.punto5 .text-favicon p{
    font-size: 20px;
}
section.punto5 span{
    color: #752581;
    font-weight: 500;
    font-family: 'Beautique Display', sans-serif;

}
section.punto5 strong{
    font-size: 40px;
    color: #752581;
    font-family: 'Beautique Display Bold', sans-serif;

}
section.punto5 .text-favicon{
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
}
section.punto5 div:first-of-type{
    position: absolute;
    width: 100%;
}
section.punto5 .text-favicon img{
    width: 70px;
}
/* ESTILOS SECTION FOOTER */
/* ANIMACIONES */
svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawLine 20s ease forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fromLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes fromRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes fromUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animado {
  opacity: 0;
  visibility: hidden;
}

.animado.visible {
  visibility: visible;
}

.animado.visible[data-anim="left"]  { animation: fromLeft 0.8s ease forwards; }
.animado.visible[data-anim="right"] { animation: fromRight 0.8s ease forwards; }
.animado.visible[data-anim="up"]    { animation: fromUp 1.0s ease forwards; }
.animado.visible[data-anim="fade"]  { animation: fadeIn 0.8s ease forwards; }
@keyframes bounceDown {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(5px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

a{
    transition: transform 0.3s;
}
a:hover{
    transform: scale(1.1);
}
/* Elementos decorativos que no requieren interacción */
.interlineado svg,
.interlineado2 svg,
.interlineado3 svg,
section.punto5 div:first-of-type {
  pointer-events: none; /* no interceptan el puntero */
}
/* Asegura que los contenedores con enlaces estén por encima */
.info-empaque1,
.info-empaque2,
.info-empaque3,
section.punto3 .titulo-empaque2 {
  position: relative;
  z-index: 10;
}

/* Reduce el riesgo de capas “enterradas” */
section.punto2,
section.punto3,
section.punto4,
section.punto5 {
  z-index: auto; /* o 0, según tu stacking */
}
.hero-title { 
    opacity: 0; 
    transform: translateY(30px); 
    animation: fadeUp 5s ease forwards; } 
    @keyframes fadeUp { 
        to { 
            opacity: 1; 
            transform: translateY(0); 
        } 
    }
.imagen-montañas, .mano-cafe, .mano-grano { animation: float 5s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 60% { transform: translateY(-10px); } }

/* ANIMACIONES */
/* ESTILOS RESPONSIVE */
@media screen and (max-width: 768px){
    .hero-content{
        padding: 20px;
    }
    .imagen-montañas{
        bottom: -20px;
    }
    .interlineado, .interlineado2, .interlineado3{
        display: none; 
    }
    section.portada {
        height: auto;
        position: relative;
    }
    .hero{
        position: relative;
        top: 50%;
        transform: translate(-50%, 60%);
    }
    .hero-lead, .hero-sub{
        font-size: 20px;
    }
    .hero-sub span{
        font-size: 20px;
    }
    .hero-sub{
        text-shadow: 0px 0px 10px #555555;
    }
    .hero-title .titulo-mundo{
        font-size: 40px;
    }
    .punto2 .info-empaque1{
        flex-wrap: wrap;
        padding: 30px;
    }
    .punto2 .info-empaque1 .titulo-empaque1{order: 1;}
    .punto2 .info-empaque1 .bloque-boton{order: 4;}
    .punto2 .info-empaque1 .imagen-empaque{order: 2;}
    .punto2 .info-empaque1 .caracteristicas-empaque{order: 3;}
    .info-empaque1 .titulo-empaque1 strong{
        font-size: 25px;
    }
    .info-empaque1 .bloque-boton a{
        width: max-content;
        padding: 10px;
        font-size: 17px;
        align-items: center;
    }
    .info-empaque1 .bloque-boton a::after{
        right: 10px;
    }
    .info-empaque1 .col{
        flex: auto;
    }
    .info-empaque1 .col img.empaque1{
        max-width: 100%;
        width: 80%;
        margin: 10px auto;
        display:flex;
    }
    .info-empaque2 img.empaque2{
        max-width: 100%;
        width: 60%;
        margin: 10px auto;
        display:flex;
    }
    .info-empaque3 .col img.empaque3{
        max-width: 100%;
        width: 50%;
        margin: 10px auto;
        display:flex;
    }
    .info-empaque1 .col ul li.items-caracteristicas{
        flex-direction: row-reverse;
        text-align: left;
        justify-content: left;
    }
    .info-empaque1 .col ul li.items-caracteristicas img{
        order: 1;
    }
    section.punto3 .bloque-boton a{
        max-width: 90%;
        width: max-content;
        padding: 10px;
        font-size: 17px;
    }
    .texto-detras-empaque{
        display: flex;
        width: fit-content;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 10%) !important;
        margin: 10px 0;
    }
    .texto-detras-empaque img{
        display: none;
    }
    section.punto3 .titulo-empaque2 strong{
        font-size: 25px !important;
    }
    section.punto3 .titulo-empaque2{
        max-width: 100%;
        width: 90%;
        margin-bottom: 20px;
    }
    .punto1{
        height: 40vh !important;
    }
    .mano-cafe{
        top: 10%;
        left: 0;
    }
    section.punto1 .texto-mano1 h2{
        margin-top: 20px;
    }
    .texto-mano1{
        width: 100%;
    }
    .mano-grano{
        top: 3%;
        right: -10px;
    }
    section.punto3{
        height: auto !important;
        overflow: hidden;
        padding-top: 80px;
    }
    .info-empaque2{
            top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0;
    flex-direction: column;
    }
    .info-empaque3{
        flex-direction: column-reverse;
        padding: 20px;
        transform: translate(-50%, 0);
    }
    .info-empaque3 .titulo-empaque3 strong{
        font-size: 25px !important;
    }
    .info-empaque3 .titulo-empaque3 a{
        width: max-content;
        padding: 10px;
        font-size: 17px;
    }
    .info-empaque3 .col ul li.items-caracteristicas{
        flex-direction: row-reverse;
        justify-content: left;
        gap: 0;
        text-align: left;
    }
    section.punto5{
        height: 60vh !important;
    }
    section.punto5 .comparte-cafe{
        position: absolute;
        bottom: 0;
    }
    section.punto2{
        height: auto !important;
    }
    section.punto4{
        height: auto !important;
    }
    section.punto5 div:first-of-type{
        position: relative;
        top: 8%;
    }
    .texto-mano1 span{
        font-size: 25px !important
    }
    section.punto5 strong{
        font-size: 20px;
    }
    section.punto5 .text-favicon img{
        width: 50px;
    }
}
/* ESTILOS RESPONSIVE */