:root {

            --azul: #00135b;

            --rosa: #dc2d79;

            --blanco: #ffffff;

            --gris: #f4f7f6;

            --dark: #0a0a0a;

            --verde-eco: #2d6a4f;

            --oro-boda: #c5a059;
			--gris2: #888888;

        }
		 a{ 
			    text-decoration: none;

			
		}
		
		a:hover { 
		 	color: var(--rosa); 
			
			
		}
		
		.fecha{ 
		 	font-size: 1.3rem; 
			font-weight: 900; 
			color: var(--azul);

			
		}
		.tour{
			
			color: var(--azul);

			
		
		}
.link_s{
			
			color: var(--rosa);

			
		
		}

.link_g{
			
			color: var(--gris2);

			
		
		}
	.info{
			text-decoration: none;	
			color:#333;
		}	
		 .grid-1 {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 25px;

            padding: 50px 8%;

        }
		.card-1 {

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 10px 20px rgba(0,0,0,0.08);

            transition: 0.3s ease;

            border: 1px solid #f0f0f0;

        }

        .card-1:hover { transform: translateY(-8px); border-color: var(--rosa); }

        .card-1 img { width: 100%; height: 260px; object-fit: cover; }

        .card-1-info { padding: 20px; text-align: center; }

        .card-1-info h3 { color: var(--azul); }
	
	
	
	
	.grid-interior {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

        }



        .card {

            background: var(--blanco);

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 10px 20px rgba(0,0,0,0.05);

            transition: transform 0.3s ease;

            border-bottom: 5px solid var(--azul);

        }



        .card:hover {

            transform: translateY(-10px);

            border-bottom: 5px solid var(--rosa);

        }



        .card-img {

            height: 200px;

            background-size: cover;

            background-position: center;

        }



        .card-body {

            padding: 25px;

        }



        .card-body h3 {

            color: var(--azul);

            margin-bottom: 10px;

        }
		.interior {

				padding: 20px 20px 100px 20px;

				max-width: 1500px;

				margin: 0 auto;

			}



        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; scroll-behavior: smooth; }

        body { background-color: var(--blanco); color: #333; overflow-x: hidden; }



        /* --- NAVEGACIÓN --- */

        header {

            background: var(--blanco);

            padding: 10px 5%;

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

            position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        }

        .logo img { height: 80px; }

        .nav-menu { display: flex; list-style: none; gap: 15px; }

        .nav-menu a { text-decoration: none; color: var(--azul); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }

        .menu-toggle { display: none; font-size: 1.5rem; color: var(--azul); cursor: pointer; }



		

        /* --- HERO --- */

        .hero {

            background: linear-gradient(rgba(0,19,91,0.3), rgba(0,19,91,0.3)), 

                        url('https://viajesam.com/gemini/img/principoal-turismo.png');

            height: 500px; background-size: cover; background-position: center;

            display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center;

        }

        .hero h1 { font-size: 3.5rem; text-shadow: 2px 2px 15px rgba(0,0,0,0.6); }

		.onlyBooker_section onlyBooker_fixed{

			

			high:100px;

		}

        .btn-rosa { 

			

			background: var(--rosa); 

			color: white; 

			border: none; 

			padding: 12px 30px; 

			border-radius: 5px; 

			cursor: pointer; 

			font-weight: 700; 

			transition: 0.3s; 

			text-decoration: none; 

			display: inline-block; 

			

			

		}

        .btn-rosa:hover { background: var(--azul); transform: translateY(-3px); }

		 .link{ 
		 	color: var(--azul); 
			
		}
		
		.link:hover { 
		 	color: var(--roza); 
			
		}

		

		

		 

		

        section { padding: 80px 8%; }



        /* --- SECCIÓN BODAS (DISEÑO ELEGANTE) --- */

        .bodas-section { background-color: #fffaf5; border-radius: 50px; margin: 30px 0; }

        .bodas-grid { display: grid; grid-template-columns:  1fr 1fr; gap: 50px; align-items: center; }

        .bodas-img { 

            height: 500px; 

            background: url('https://viajesam.com/gemini/img/boda-playa.png') center/cover; 

            border-radius: 30px;

            box-shadow: 20px 20px 0px var(--oro-boda);

        }

        .bodas-info h2 { font-size: 3rem; color: var(--azul); font-family: 'Times New Roman', serif; font-style: italic; margin-bottom: 20px; }

        .bodas-info p { line-height: 1.8; color: #666; font-size: 1.1rem; margin-bottom: 30px; }

        .separator { width: 80px; height: 2px; background: var(--oro-boda); margin-bottom: 20px; }



        



        /* --- SECCIÓN CRUCEROS --- */

        .crucero-parallax {

            height: 450px; background: url('https://viajesam.com/gemini/img/crucero.png') center/cover no-repeat fixed;

            display: flex; align-items: center; justify-content: center; border-radius: 30px; margin: 40px 8%;

        }



        /* --- SECCIÓN PARQUES (IMPACTANTE) --- */

        .parques-impact { background: var(--dark); padding: 80px 8%; border-radius: 50px; display: flex; align-items: center; gap: 50px; }

        .parques-visual img { width: 100%; border-radius: 25px; box-shadow: 0 0 25px var(--rosa); }

        .parques-info-box { color: white; flex: 1; }

        .parques-info-box h2 { font-size: 3rem; background: linear-gradient(45deg, #fff, var(--rosa)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }



        /* --- FOOTER & CALENDARIO --- */

        .cal-box { background: var(--gris); padding: 50px; border-radius: 35px; }

        table { width: 100%; border-collapse: collapse; }

        th { text-align: left; padding: 15px; border-bottom: 3px solid var(--rosa); color: var(--azul); }

        td { padding: 15px; border-bottom: 1px solid #ddd; }



        footer { background: var(--azul); color: white; padding: 50px 8% 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }

        

        .wa-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 35px; z-index: 2000; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-decoration: none; }

		.crucero-hero {

            position: relative;

            height: 600px;

            background: url('https://viajesam.com/gemini/img/crucero.png') center/cover fixed;

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

            border-radius: 25px; margin: 20px 5%; overflow: hidden;

        }

		.crucero-overlay {

            background: rgba(0, 19, 91, 0.8); color: white; padding: 40px;

            width: 100%; text-align: center; backdrop-filter: blur(5px);

        }

		.social a { color: white; font-size: 1.8rem; margin-right: 20px; transition: 0.3s; }

        .social a:hover { color: var(--rosa); }

		

		 /* Destinos */

        .destinos {

            padding: 80px 5%;

            text-align: center;

        }



        .destinos h2 {

            color: var(--azul-primario);

            margin-bottom: 40px;

            font-size: 2.5rem;

        }



        .grid-destinos {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

        }



        .card {

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

            transition: 0.3s;

        }



        .card:hover {

            transform: translateY(-10px);

        }



        .card img {

            width: 100%;

            height: 200px;

            object-fit: cover;

        }



        .card-info {

            padding: 20px;
			color:#333;
			
			

        }



        .card-info h3 {

            color: var(--azul);

            margin-bottom: 10px;

        }



        .precio {

            color: var(--rosa-acento);

            font-weight: bold;

            font-size: 1.2rem;

        }

		 .ecoturismo { background: url('/img/ecoturismo.png') center/cover; color: white; text-align: center; }

        .ecoturismo-box { background: rgba(0,19,91,0.8); padding: 90px; border-radius: 20px; max-width: 700px; margin: 0 auto; }



       /* NUEVA SECCIÓN: EXPERIENCIAS DE USUARIOS */

        .testimonials-container {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

            max-width: 1200px;

            margin: 0 auto;

        }



        .testimonial-card {

            background: var(--blanco);

            padding: 40px 30px;

            border-radius: 25px;

            box-shadow: 0 15px 35px rgba(0,19,91,0.05);

            position: relative;

            transition: 0.3s;

            border: 1px solid rgba(0,19,91,0.05);

        }



        .testimonial-card:hover {

            transform: translateY(-10px);

            border-color: var(--rosa);

        }

        .quote-icon {

            position: absolute;

            top: 20px;

            right: 30px;

            font-size: 2rem;

            color: var(--gris-fondo);

            z-index: 1;

        }



        .user-info {

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 20px;

        }

		 .user-img {

            width: 60px;

            height: 60px;

            border-radius: 50%;

            object-fit: cover;

            border: 3px solid var(--rosa);

        }



        .user-details h4 { font-weight: 700; font-size: 1rem; }

        .user-details p { font-size: 0.8rem; color: #777; }



        .stars { color: var(--rosa); margin-bottom: 15px; font-size: 2rem; }



        .testimonial-text {

            font-style: italic;

            line-height: 1.6;

            color: #444;

            font-size: 0.95rem;

            position: relative;

            z-index: 2;

        }

		

		.section-padding { padding: 30px 5%; }

        .sub-title { text-align: center; margin-bottom: 50px; color:var(--rosa);  font-weight: 700; }
        .underline { width: 60px; height: 4px; background: var(--rosa); margin: 15px auto; }

		

		.community-banner {

            background: var(--azul);

            color: white;

            text-align: center;

            padding: 40px;

            border-radius: 20px;

            margin-top: 60px;

        }

		.btn-social {

            display: inline-block;

            margin-top: 20px;

            padding: 12px 30px;

            background: var(--rosa);

            color: white;

            text-decoration: none;

            border-radius: 50px;

            font-weight: 700;

            transition: 0.3s;

        }



        .btn-social:hover { background: #b02461; transform: scale(1.05); }

		

		

		.calendar-section { padding: 30px 5%; background: var(--gris); color: black;  }

		

		 .title-group { text-align: center; margin-bottom: 40px; color: var(--azul); }

        .title-group h2 { font-size: 2.5rem; font-weight: 900; color: var(--azul); text-transform: uppercase; }

        .title-group .underline { width: 80px; height: 5px; background: var(--rosa); margin: 10px auto; border-radius: 10px; }

		

		

		.tour-info { flex: 1; padding-left: 20px; }

		.tour-row {

            display: flex; background: rgba(255,255,255,0.05); margin-bottom: 15px;

            padding: 20px; border-radius: 15px; align-items: center; border-left: 5px solid var(--rosa);

        }

        .map-container { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); height: 400px; width: 100%; }

 /* --- SECCIONES GENERALES --- */

        section { padding: 30px 5%; }

        .section-title { text-align: center; margin-bottom: 50px; }

        .section-title h2 { font-size: 2.2rem; font-weight: 900; color: var(--azul); text-transform: uppercase; }

        .section-title .bar { width: 70px; height: 5px; background: var(--rosa); margin: 15px auto; border-radius: 10px; }

		

		/* --- MEGA MÓDULO: PARQUES TEMÁTICOS (CENTRAL) --- */

        .parks-highlight { background: #E9E9E9; position: relative; }

        .parks-display { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 250px); gap: 15px; }

        .park-item { position: relative; border-radius: 20px; overflow: hidden; color: white; cursor: pointer; }

        .park-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }

        .park-item:hover img { transform: scale(1.1); }

        .park-item.big { grid-column: span 2; grid-row: span 2; }

        .park-overlay { position: absolute; inset: 0;  display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; color:var(--blanco)}

        .park-overlay h3 { font-size: 1.8rem; font-weight: 900; }

		

		.title { text-align: center; margin-bottom: 50px; }

        .title h2 { font-size: 2.2rem; font-weight: 900; text-transform: uppercase; }

        .title .line { width: 60px; height: 5px; background: var(--rosa); margin: 15px auto; border-radius: 10px; }

	
     
     /*IMPORTANTE: El contenedor DEBE tener altura o no se verá nada */
        #contenedor-mapa { 
            height: 500px; 
            width: 100%; 
            border: 2px solid #ccc;
            background-color: #f0f0f0; /* Color de fondo mientras carga */
			/*border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); height: 400px; width: 100%;*/
        }
		

		

		@media (max-width: 850px) {

			.section-padding { padding: 30px 5%; }

			.bodas-grid, .eco-wrapper, .parques-impact {grid-template-columns: 1fr ; display: grid; flex-direction: column-reverse; text-align: center; }

            .bodas-img { order: 3; height: 300px; box-shadow: 5px 5px 5px var(--oro-boda); }

            .separator { margin: 0 auto 20px; }

            .nav-menu { display: none; position: absolute; top: 80px; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px; text-align: center; border-top: 1px solid #eee; }

            .nav-menu.active { display: flex; }

            .menu-toggle { display: block; }

            .search-bar { flex-direction: column; border-radius: 20px; }

            .eco-split, .parques-card { flex-direction: column; }

            .eco-img, .parques-img { width: 100%; height: 300px; }

            .crucero-hero { margin: 20px 0; border-radius: 0; height: 400px; background-attachment: scroll; }

            .boda-section { padding: 30px 20px; text-align: center; }

			.parks-display { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

            .park-item.big { grid-column: span 2; height: 350px; }

            .dual-grid { grid-template-columns: 1fr; }

		}

		
		@media (max-width: 550px) {
			.tour-row {

				display: grid; 
	
			}
		}