@font-face {
  font-family: 'Titulos';
  src: url('../fonts/titulos.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Texto';
  src: url('../fonts/texto.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}
body{
    font-family: Texto,  sans-serif;
    font-size: 16px !important;
}
.text-verde{
    color:#43602d !important;
}
.text-negro{
    color:#000 !important;
}
.text-cafe{
    color:#54301f !important;
}
.text-naranja{
    color:#f88009 !important;
}
.titulo1{
    font-family: Titulos, sans-serif;
    font-size: 48px;
    font-weight: bold;
}
.titulo2{
    font-family: Titulos, sans-serif;
    font-size: 36px;
    font-weight: bold;
}
.titulo3{
    font-family: Titulos, sans-serif;
    font-size: 24px;
    font-weight: bold;
}
.titulo4{
    font-family: Titulos, sans-serif;
    font-size: 20px;
    font-weight: bold;
}
.activo{
    color:#f88009
}
.inactivo{
    color:#fff;
}
/*TOOTITP para red*/
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #f88009;
    opacity: 1!important;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 150px;
    background-color:#f88009;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0,1);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}
.tooltip.arriba .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.arriba .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #f88009 transparent transparent transparent;
}
/* ====== Carousel base ====== */
.carousel {
--radius: 0rem;
--shadow: 0 0px 0px rgba(0,0,0,.15);
--dot-size: 10px;
--dot-gap: .5rem;
--accent: #fff;
max-width: 100%px; /* cambia el ancho máximo si lo necesitas */
margin: 0rem auto;
padding: 0 1rem;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}


.viewport {
display: flex;
overflow-x: auto; /* swipe en móvil */
scroll-snap-type: x mandatory; /* snap a cada slide */
scroll-behavior: smooth; /* desplazamiento suave */
border-radius: var(--radius);
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* oculta scrollbar en Firefox */
position: relative;
}
.viewport::-webkit-scrollbar { display: none; } /* oculta scrollbar en Chromium/WebKit */


.slide {
position: relative;
min-width: 100%; 
scroll-snap-align: center; 
display: grid; 
place-items: center;
background: #f88009;
color: #fff;
overflow: hidden;
}
.icono-nosotros{
    font-size: 14px;
    padding-left: 10px;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover; /* recorta para llenar sin distorsión */
display: block;
}


/* ====== Controles (puntos) ====== */
.controls {
display: flex;
justify-content: center;
gap: var(--dot-gap);
margin: 0 0 0;
}
.controls a {
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: #cfcfcf;
display: inline-block;
text-indent: -9999px; /* accesible pero sin texto visible */
outline: none;
transition: transform .2s ease;
}
.controls a:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 4px; }
.controls a:hover { transform: scale(1.1); }


/* Punto activo usando :target (cuando sigues el enlace al id del slide) */
#slide1:target ~ .controls a[href="#slide1"],
#slide2:target ~ .controls a[href="#slide2"] {
background: var(--accent);
}


/* Estado inicial: marca el primer punto como activo si no hay :target */
.carousel:not(:has(:target)) .controls a[href="#slide1"] { background: var(--accent); }


/* ====== Flechas ====== */
.arrows { margin-top: .2rem; display: flex; justify-content: space-between; }
.arrow {
user-select: none;
}
/*============ GANA DINERO =============*/
.gana-dinero{
    padding-top: 50px;
    padding-bottom: 50px;
}
.gana-dinero ul li{
    text-align: center;
     list-style: none;
     font-size: 32px;
     font-family: 'Titulos', sans-serif;
     font-weight: bold;
}
/*============ FOOTER =============*/
.footer-web{
    background-color: #43602d;
    padding-top: 20px;
    padding-bottom: 50px;
}
.footer-web ul>li{
    font-size: 16px;
    color:#fff;
    list-style: none;

}
.footer-web ul>li>a{
    color:#fff;

}