/* =====================================================
   CAMINO INCA CORTO 2D/1N - CUSCO AGENCY
===================================================== */


:root{

--orange:#f97316;
--orange-dark:#ea580c;
--dark:#111827;
--gray:#64748b;
--light:#f8fafc;
--green:#25d366;

}


/* RESET */

.ci-hero *,
.ci-container *,
.ci-services *,
.ci-booking *{

box-sizing:border-box;

}



body{

font-family:'Segoe UI',Arial,sans-serif;

}




/* =====================================
   HERO CAMINO INCA PREMIUM
===================================== */


.ci-hero{

height:680px;

background:
linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(0,0,0,.35)
),
url("../images/camino\ inca.png");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

position:relative;

}




.ci-hero-content{

position:relative;

z-index:2;

width:100%;

max-width:1200px;

margin:auto;

padding:0 40px;

color:white;

text-align:left;

}



.ci-badge{

display:inline-block;

background:#ff7a00;

padding:10px 25px;

border-radius:30px;

font-size:14px;

font-weight:800;

letter-spacing:1px;

margin-bottom:25px;

}




.ci-hero-content h1{

font-size:75px;

font-weight:900;

line-height:1;

max-width:800px;

margin:0 0 20px;

text-transform:none;

letter-spacing:-2px;

}




.ci-hero-content h2{

font-size:35px;

font-weight:800;

margin-bottom:25px;

}



.ci-hero-content p{

max-width:650px;

font-size:20px;

line-height:1.6;

margin-bottom:35px;

}




/* OCULTAMOS PRECIO DEL HERO */

.ci-price-box{

display:none;

}




/* BOTONES */


.ci-actions{

display:flex;

gap:20px;

justify-content:flex-start;

}



.btn-whatsapp{

background:#f97316;

color:white;

padding:18px 35px;

border-radius:12px;

font-weight:800;

}



.btn-consultar{

background:transparent;

border:1px solid white;

color:white;

padding:18px 35px;

border-radius:12px;

font-weight:800;

}



.btn-whatsapp:hover,
.btn-consultar:hover{

transform:translateY(-3px);

}


/* =====================================
   INFORMACIÓN DEL TOUR PREMIUM
===================================== */

.ci-highlights{

max-width:1250px;

margin:-45px auto 0;

background:white;

border-radius:22px;

display:grid;

grid-template-columns:repeat(4,1fr);

position:relative;

z-index:10;

box-shadow:0 15px 40px rgba(0,0,0,.12);

overflow:hidden;

}



.ci-highlight{

display:flex;

align-items:center;

gap:18px;

padding:28px 35px;

border-right:1px solid #e5e7eb;

background:white;

}



.ci-highlight:last-child{

border-right:none;

}





.ci-icon{

width:58px;

height:58px;

background:#fff1eb;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}



.ci-icon i{

font-size:27px;

color:#ff7a00;

}





.ci-info{

display:flex;

flex-direction:column;

gap:5px;

}



.ci-info span{

font-size:13px;

font-weight:800;

color:#64748b;

text-transform:uppercase;

}



.ci-info strong{

font-size:17px;

font-weight:900;

color:#111827;

}




.ci-highlight:hover .ci-icon{

background:#ff7a00;

transition:.3s;

}



.ci-highlight:hover .ci-icon i{

color:white;

}




@media(max-width:900px){

.ci-highlights{

grid-template-columns:1fr 1fr;

}


}



@media(max-width:600px){

.ci-highlights{

grid-template-columns:1fr;

}


.ci-highlight{

border-right:none;

border-bottom:1px solid #eee;

}

}


/* =====================================================
   DATOS DEL TOUR
===================================================== */


.ci-highlights{

max-width:1200px;

margin:-80px auto 0;

position:relative;

z-index:5;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

padding:0 20px;

}





.ci-highlight{

background:white;

padding:35px 20px;

border-radius:25px;

text-align:center;

box-shadow:
0 20px 50px rgba(0,0,0,.15);

transition:.3s;

}



.ci-highlight:hover{

transform:translateY(-10px);

}



.ci-highlight i{

font-size:40px;

color:var(--orange);

}



.ci-highlight h3{

font-size:18px;

font-weight:900;

margin:15px 0 8px;

}



.ci-highlight p{

color:var(--gray);

margin:0;

}





/* =====================================================
   TITULOS
===================================================== */


.ci-container{

max-width:1200px;

margin:auto;

padding:90px 20px;

}



.ci-title{

text-align:center;

margin-bottom:50px;

}



.ci-title span{

color:var(--orange);

font-weight:900;

text-transform:uppercase;

}



.ci-title h2{

font-size:45px;

font-weight:900;

color:var(--dark);

}





/* =====================================================
   ITINERARIO
===================================================== */


.ci-day-card{

display:flex;

gap:30px;

background:white;

padding:35px;

border-radius:30px;

margin-bottom:35px;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

border:1px solid #eee;

}



.ci-day-number{

background:var(--orange);

color:white;

height:75px;

min-width:100px;

display:flex;

justify-content:center;

align-items:center;

border-radius:20px;

font-size:22px;

font-weight:900;

}



.ci-day-content h3{

font-size:26px;

font-weight:900;

color:var(--dark);

}



.ci-day-content p{

font-size:17px;

line-height:1.8;

color:#475569;

}



.ci-day-content ul{

padding-left:20px;

}



.ci-day-content li{

margin-bottom:10px;

color:#475569;

}





/* =====================================================
   SERVICIOS
===================================================== */


.ci-services{

max-width:1200px;

margin:auto;

padding:40px 20px 90px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.ci-service-box{

background:white;

padding:35px;

border-radius:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.12);

}



.ci-service-box h2{

font-size:28px;

font-weight:900;

border-left:6px solid var(--orange);

padding-left:15px;

margin-bottom:25px;

}



.ci-service-box ul{

padding-left:20px;

}



.ci-service-box li{

margin-bottom:12px;

color:#475569;

}





/* =====================================================
   RESERVA FINAL
===================================================== */


.ci-booking{

background:

linear-gradient(
135deg,
#111827,
#000
);

color:white;

text-align:center;

padding:90px 20px;

}



.ci-booking h2{

font-size:45px;

font-weight:900;

}



.ci-booking p{

font-size:20px;

margin-bottom:35px;

}



.ci-booking a{

background:var(--green);

color:white;

padding:18px 45px;

border-radius:50px;

display:inline-flex;

align-items:center;

gap:12px;

text-decoration:none;

font-size:18px;

font-weight:900;

}




/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1100px){


.ci-hero-content h1{

font-size:65px;

line-height:1.05;

}


.ci-highlights{

grid-template-columns:repeat(2,1fr);

}


.ci-services{

grid-template-columns:1fr;

}


}




@media(max-width:700px){


.ci-hero{

min-height:700px;

background-position:center;

}



.ci-hero-content{

margin:30px;

}



.ci-hero-content h1{

font-size:38px;

}



.ci-hero-content h2{

font-size:28px;

}



.ci-actions{

flex-direction:column;

}



.ci-highlights{

grid-template-columns:1fr;

margin-top:30px;

}



.ci-day-card{

flex-direction:column;

}



.ci-day-content h3{

font-size:21px;

}



.ci-title h2{

font-size:32px;

}



.ci-booking h2{

font-size:30px;

}



}

/* =====================================
   ITINERARIO PREMIUM
===================================== */


.ci-itinerary-section{

max-width:1200px;

margin:auto;

padding:90px 20px;

}




.ci-title{

text-align:center;

margin-bottom:60px;

}



.ci-title span{

color:#f97316;

font-size:14px;

font-weight:900;

letter-spacing:2px;

}



.ci-title h2{

font-size:45px;

font-weight:900;

margin:10px 0;

color:#111827;

}



.ci-title p{

color:#64748b;

font-size:18px;

}





/* LINEA */

.ci-timeline{

position:relative;

}



.ci-timeline::before{

content:"";

position:absolute;

left:45px;

top:0;

bottom:0;

width:3px;

background:#fed7aa;

}





/* CARD */


.ci-itinerary-card{

position:relative;

display:flex;

gap:30px;

background:white;

padding:35px;

margin-bottom:40px;

border-radius:30px;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

transition:.3s;

}



.ci-itinerary-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 50px rgba(0,0,0,.15);

}




/* DIA */


.ci-day-badge{

min-width:90px;

height:90px;

background:#f97316;

color:white;

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:900;

position:relative;

z-index:2;

box-shadow:

0 10px 25px rgba(249,115,22,.35);

}




/* CONTENIDO */


.ci-itinerary-header{

display:flex;

gap:15px;

align-items:center;

}



.ci-itinerary-header i{

font-size:35px;

color:#f97316;

}



.ci-itinerary-header h3{

font-size:25px;

font-weight:900;

color:#111827;

margin:0;

}



.ci-itinerary-body p{

font-size:17px;

line-height:1.8;

color:#475569;

margin:20px 0;

}




/* DATOS */


.ci-details{

display:flex;

gap:15px;

flex-wrap:wrap;

}



.ci-details span{

background:#fff7ed;

padding:10px 18px;

border-radius:30px;

font-weight:700;

color:#f97316;

font-size:14px;

}



.ci-details i{

margin-right:8px;

}




@media(max-width:768px){


.ci-timeline::before{

display:none;

}


.ci-itinerary-card{

flex-direction:column;

}


.ci-itinerary-header{

flex-direction:column;

align-items:flex-start;

}


}/* ===================================
LAYOUT PRINCIPAL
=================================== */


.ci-layout{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:1fr 350px;

gap:30px;

padding:40px 30px;

}



.ci-sidebar{

position:sticky;

top:100px;

height:max-content;

}



/* PRECIO */

.ct-price-sidebar{

background:white;

border:1px solid #e5e7eb;

border-radius:22px;

padding:25px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}



.ct-price-title span{

font-size:12px;

font-weight:900;

color:#64748b;

display:block;

text-align:center;

margin-bottom:15px;

}



.ct-price-card{

background:#ff8500;

color:white;

padding:30px;

border-radius:18px;

text-align:center;

}



.ct-price-card small{

font-weight:700;

}



.ct-price-card h2{

font-size:45px;

font-weight:900;

margin:5px 0;

}



.ct-price-card strong{

font-size:14px;

}




.ct-benefits{

padding:20px 0;

margin:0;

list-style:none;

}



.ct-benefits li{

font-size:14px;

color:#64748b;

margin-bottom:15px;

}



.ct-benefits i{

color:#ff8500;

margin-right:8px;

}



.ct-btn-consult,
.ct-btn-reserve{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

height:48px;

border-radius:12px;

text-decoration:none;

font-weight:800;

margin-top:12px;

}



.ct-btn-consult{

background:#fff1f2;

color:#ef233c;

}



.ct-btn-reserve{

background:#ef233c;

color:white;

}




@media(max-width:1000px){


.ci-layout{

grid-template-columns:1fr;

}


.ci-sidebar{

position:relative;

}


}.ci-services{

max-width:1400px;

margin:70px auto;

padding:0 40px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.ci-service-box{

background:white;

border-radius:25px;

padding:35px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

border-top:5px solid #ff7a00;

}



.service-icon{

width:60px;

height:60px;

border-radius:18px;

background:#fff1e6;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#ff7a00;

margin-bottom:20px;

}



.ci-service-box h2{

font-size:28px;

font-weight:900;

color:#14213d;

margin-bottom:25px;

}



.ci-service-box ul{

padding:0;

list-style:none;

}



.ci-service-box li{

margin-bottom:14px;

font-size:16px;

color:#64748b;

display:flex;

align-items:center;

gap:10px;

}



.ci-service-box li::before{

content:"✓";

font-weight:900;

color:#ff7a00;

}



.exclude-box{

border-top-color:#ef4444;

}



.exclude-box .service-icon{

color:#ef4444;

background:#fee2e2;

}



.exclude-box li::before{

content:"×";

color:#ef4444;

}



.lunch-box{

border-top-color:#f59e0b;

}.ci-itinerary-card{

display:grid;

grid-template-columns:260px 1fr;

gap:30px;

background:white;

padding:25px;

border-radius:28px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

margin-bottom:30px;

}



.ci-image img{

width:100%;

height:230px;

object-fit:cover;

border-radius:20px;

}



.ci-day-badge{

display:inline-flex;

background:#ff7a00;

color:white;

padding:8px 18px;

border-radius:30px;

font-weight:900;

margin-bottom:15px;

}



.ci-itinerary-body h3{

font-size:24px;

font-weight:900;

color:#14213d;

}



.ci-itinerary-body p{

color:#64748b;

line-height:1.7;

}



.ci-details span{

background:#fff4e8;

color:#ff7a00;

padding:8px 15px;

border-radius:20px;

margin-right:10px;

font-weight:700;

font-size:14px;

}.ci-modal{

border-radius:25px;

overflow:hidden;

border:none;

}



.ci-modal .modal-header{

background:#ff7a00;

color:white;

padding:25px;

}



.ci-modal .modal-header h2{

font-weight:900;

margin:0;

}



.ci-modal-image{

width:100%;

height:350px;

object-fit:cover;

border-radius:20px;

margin-bottom:25px;

}



.ci-modal h3{

font-size:28px;

font-weight:900;

color:#14213d;

}



.ci-modal p{

font-size:17px;

line-height:1.8;

color:#64748b;

}



.ci-modal-details{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;

margin-top:30px;

}



.ci-modal-details div{

background:#fff4e8;

padding:20px;

border-radius:18px;

text-align:center;

color:#ff7a00;

font-weight:700;

}



.ci-modal-details i{

font-size:25px;

display:block;

margin-bottom:10px;

}/* =====================================================
   BOTÓN FLOTANTE DE WHATSAPP
===================================================== */

.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 28px;

  width: 68px;
  height: 68px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #00a884;
  color: #ffffff;

  border: 4px solid #ffffff;
  border-radius: 50%;

  font-size: 38px;
  text-decoration: none;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);

  z-index: 9999;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

/* Círculo animado exterior */
.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;

  width: 100%;
  height: 100%;

  border-radius: 50%;
  background-color: rgba(0, 168, 132, 0.25);

  z-index: -1;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float::after {
  animation-delay: 1s;
}

/* Efecto al pasar el mouse */
.whatsapp-float:hover {
  background-color: #25d366;
  color: #ffffff;
  transform: scale(1.1);
}

/* Animación */
@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Ajuste para celulares */
@media (max-width: 576px) {
  .whatsapp-float {
    width: 58px;
    height: 58px;

    right: 18px;
    bottom: 18px;

    font-size: 32px;
  }
}.social-icons {
  width: 100%;
  min-height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.social-icons a {
  color: white;
  font-size: 25px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-icons a:hover {
  color: #ffc107;
  transform: translateY(-2px);
}.social-icons {
  width: fit-content;
  height: 68px;
  padding: 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  background-color: #303044;
  border-radius: 999px;
}

.social-icons a {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff !important;
  font-size: 29px;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;

  transition: transform 0.25s ease;
}

.social-icons a:hover {
  transform: translateY(-2px) scale(1.08);
}

.social-icons img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}.social-icons img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;

  filter: brightness(0) invert(1);
}

.whatsapp-float {
  position: fixed;
  width: 58px;
  height: 58px;
  right: 20px;
  bottom: 20px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  text-decoration: none;

  font-size: 32px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

  z-index: 99999;
  visibility: visible !important;
  opacity: 1 !important;
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
  color: #ffffff;
  transform: scale(1.08);
}

/* Configuración para celulares */
@media screen and (max-width: 768px) {
  .whatsapp-float {
    display: flex !important;
    width: 55px;
    height: 55px;
    right: 15px;
    bottom: 15px;
    font-size: 30px;
    z-index: 99999;
  }
}