/**
Theme Name: Explora Natura Premium
Author: Jesús Castro Peña
Author URI: https://marketingdigitalconsulting.com/
Description: This theme has been designed by Jesus Castro from MKD Consulting Agency for Explora Natura. Is a premium theme, fast, fully customizable and beautiful suitable for the company. It is very light and offers unmatched speed. Built with SEO in mind, it offers plenty of sidebar options and widget areas giving you full control for customizations. It has included special features and templates to create pages flexibly. Some of the other features: WooCommerce Compatibility, Responsive, Compatible with all major plugins, translation ready.
Version: 1.0.21
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: explora-natura-premium
Template: astra
*/

/* ==========================================================================
   1. NEUTRALIZAR MÁRGENES NATIVOS DE ASTRA
   ========================================================================== */
.ast-single-post.ast-page-builder-template .site-main > article, 
.woocommerce.ast-page-builder-template .site-main, 
.ast-page-builder-template .post-navigation {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.site-content .ast-container { padding: 0 !important; }


/* ==========================================================================
   2. CONTENEDOR GLOBAL
   ========================================================================= */
.contenedor-viaje-personalizado {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: calc(-50vw + 50%);
    background-color: #f4f1ea !important; 
    box-sizing: border-box;
    overflow-x: hidden;
}

.contenedor-viaje-personalizado * { box-sizing: border-box; }


/* ==========================================================================
   3. CABECERA HERO Y ADORNOS
   ========================================================================== */
.viaje-cabecera-hero { display: flex; flex-wrap: wrap; width: 100%; padding-top: 70px; }
.viaje-cabecera-texto { width: 60%; padding: 5% 5% 15px 10%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.viaje-cabecera-imagen { width: 40%; display: flex; justify-content: center; align-items: flex-end; }
.viaje-cabecera-imagen img { width: auto; max-width: 600px; height: auto; max-height: 80vh; display: block; }

.viaje-pre-titulo { font-size: clamp(18px, 2.2vw, 28px); color: #1a3319; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; line-height: 1.2; }
.viaje-titulo-pequeno { font-size: clamp(22px, 4vw, 45px); color: #1a3319; font-weight: 700; margin: 0 0 5px 0; letter-spacing: 1px; text-transform: uppercase; }
.viaje-palabra-gigante { font-size: clamp(60px, 12vw, 190px); color: #1a3319; font-weight: 900; margin: 0; line-height: 0.85; letter-spacing: -2px; text-transform: uppercase; }

.viaje-adorno-separador { display: flex; align-items: center; margin: 25px 0 20px 0; width: 100%; max-width: 500px; }
.linea-adorno { flex-grow: 1; height: 1.5px; background-color: #1a3319; border: none; margin: 0; }
.icono-montana { display: flex; align-items: center; justify-content: center; padding: 0 15px; }
.icono-montana svg path { fill: #1a3319 !important; }

.viaje-lema-fijo { font-size: clamp(13px, 1.2vw, 18px); color: #333; font-weight: 600; letter-spacing: 1.5px; margin: 0; line-height: 1.4; }

/* Responsive Hero */
@media (max-width: 1024px) {
    .viaje-cabecera-texto { padding: 8% 5% 0 4% !important; width: 60%; }
    .viaje-titulo-pequeno { font-size: clamp(20px, 3.8vw, 25px) !important; }
    .viaje-cabecera-imagen { width: 40%; }
}
@media (max-width: 768px) {
    .viaje-cabecera-texto { width: 100% !important; padding: 10% 8% 15px 8% !important; align-items: center !important; text-align: center !important; }
    .viaje-cabecera-imagen { width: 100% !important; padding: 0 !important; }
    .viaje-cabecera-imagen img { width: auto !important; max-width: 100% !important; max-height: none !important; margin: 0 auto !important; }
}


/* ==========================================================================
   4. SECCIÓN 2: DATOS RÁPIDOS Y COMPRA (DOS COLUMNAS)
   ========================================================================== */
.viaje-seccion-dos-columnas {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; 
    padding: 0 10% 50px 10%;
    margin-top: 25px;
    width: 100%;
}

.viaje-datos-rapidos-bloque {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 65% !important;
    padding: 0 !important; 
    margin: 0 !important;
    background-color: transparent !important;
}

.dato-columna {
    flex: none !important; 
    width: 150px !important; 
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    text-align: center !important;
    border-right: 1.5px solid rgba(26, 51, 25, 0.4) !important; 
    padding: 0 10px !important;
}
.dato-columna.dato-columna-fechas { width: auto !important; min-width: 150px !important; border-right: none !important; }

.dato-icono { margin-bottom: 12px !important; display: flex; justify-content: center; }
.dato-columna .dato-icono svg { stroke: #1a3319 !important; }
.dato-numero { font-size: 28px !important; font-weight: 800 !important; color: #1a3319 !important; line-height: 1 !important; margin-bottom: 5px !important; display: block !important; }
.dato-etiqueta { font-size: 14px !important; font-weight: 500 !important; color: #1a3319 !important; letter-spacing: 1px !important; text-transform: uppercase !important; display: block !important; }
.dato-fecha-titulo { font-size: 16px !important; font-weight: 800 !important; color: #1a3319 !important; margin-bottom: 4px !important; text-transform: uppercase !important; display: block !important; }
.dato-meses-contenedor { display: flex !important; flex-direction: column !important; align-items: center !important; }
.dato-mes { font-size: 13px !important; font-weight: 600 !important; color: #1a3319 !important; text-transform: uppercase !important; line-height: 1.3 !important; display: block !important; }

/* Responsive Datos Rápidos y WooCommerce Layout */
@media (max-width: 1024px) {
    .viaje-seccion-dos-columnas { padding: 0 5% 40px 0% !important; margin-top: 0 !important; }
}

@media (max-width: 1024px) and (min-width: 500px) {
    .viaje-datos-rapidos-bloque { width: 60% !important; }
    .viaje-woocommerce-summary-bloque { width: 40% !important; padding-left: 10px !important; }
    .dato-columna, .dato-columna.dato-columna-fechas { width: auto !important; min-width: 0 !important; flex: 1 !important; padding: 0 5px !important; }
    .dato-icono svg { width: 24px !important; height: 24px !important; }
    .dato-numero { font-size: 18px !important; }
    .dato-etiqueta, .dato-fecha-titulo { font-size: 10px !important; letter-spacing: 0 !important; }
    .dato-mes { font-size: 9px !important; }
}

@media (max-width: 768px) {
    .viaje-seccion-dos-columnas { flex-direction: column; padding: 0 5% 30px 5% !important; margin-top: 15px !important; }
    .viaje-datos-rapidos-bloque { width: 100% !important; flex-wrap: nowrap !important; justify-content: space-between !important; margin-bottom: 30px !important; overflow-x: auto; }
    .dato-columna, .dato-columna.dato-columna-fechas { width: 25% !important; min-width: 0 !important; padding: 0 5px !important; border-right: 1.5px solid rgba(26, 51, 25, 0.2) !important; margin-bottom: 0 !important; }
    .dato-columna:last-child { border-right: none !important; }
    .dato-icono svg { width: 28px !important; height: 28px !important; }
    .dato-numero { font-size: 18px !important; }
    .dato-etiqueta, .dato-fecha-titulo { font-size: 11px !important; }
    .dato-mes { font-size: 10px !important; }
    .viaje-woocommerce-summary-bloque { width: 100% !important; padding: 15px !important; }
}


/* ==========================================================================
   5. BLOQUE SUMMARY WOOCOMMERCE (Reserva y Carrito)
   ========================================================================== */
.viaje-woocommerce-summary-bloque {
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    padding: 0 !important; 
    background: transparent !important; 
    border-radius: 0 !important;
    box-shadow: none !important; 
}

/* Ocultar elementos sobrantes */
.viaje-woocommerce-summary-bloque .woocommerce-breadcrumb,
.viaje-woocommerce-summary-bloque .ast-breadcrumbs-wrapper,
.viaje-woocommerce-summary-bloque .product_title,
.viaje-woocommerce-summary-bloque .product_meta,
.viaje-woocommerce-summary-bloque span.single-product-category {
    display: none !important;
}

/* Estilos del Precio */
.viaje-woocommerce-summary-bloque .price {
    font-size: 38px !important;
    color: #1a3319 !important; 
    font-weight: 800 !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    line-height: 1 !important;
    text-align: center !important;
    width: 100% !important;
}
.viaje-woocommerce-summary-bloque .price del { font-size: 20px !important; color: #999 !important; margin-right: 10px; }

/* Formulario de Cantidad y Botón */
.viaje-woocommerce-summary-bloque form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 15px !important; margin-top: 15px !important; }
.viaje-woocommerce-summary-bloque .quantity { display: flex !important; align-items: center !important; background: transparent !important; border: none !important; }

/* Botones + y - */
.viaje-woocommerce-summary-bloque .quantity .minus,
.viaje-woocommerce-summary-bloque .quantity .plus,
.viaje-woocommerce-summary-bloque .quantity button {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #1a3319 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Input numérico */
.viaje-woocommerce-summary-bloque .quantity input[type="number"],
.viaje-woocommerce-summary-bloque .quantity input.qty {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #1a3319 !important;
    width: 50px !important;
    text-align: center !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}
.viaje-woocommerce-summary-bloque .quantity input::-webkit-outer-spin-button,
.viaje-woocommerce-summary-bloque .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Botón Añadir al Carrito */
.viaje-woocommerce-summary-bloque form.cart button.single_add_to_cart_button {
    background-color: #689A1A !important; 
    color: #ffffff !important;
    border: none !important;
    font-size: 14px !important; 
    padding: 12px 24px !important; 
    font-weight: 700 !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}
.viaje-woocommerce-summary-bloque form.cart button.single_add_to_cart_button:hover {
    background-color: #1a3319 !important; 
    color: #ffffff !important;
}

/* Responsive Carrito */
@media (max-width: 1024px) and (min-width: 500px) {
    .viaje-woocommerce-summary-bloque .price { font-size: 28px !important; }
    .viaje-woocommerce-summary-bloque form.cart button.single_add_to_cart_button { padding: 10px 15px !important; font-size: 12px !important; }
}


/* ==========================================================================
   6. CAJAS VERDE Y ESPECIES
   ========================================================================== */
.viaje-cajas-informacion { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; margin-bottom: 50px; gap: 4%; }
.caja-verde-info { width: 60%; background-color: #1a3319; border-radius: 0 30px 30px 0; padding: 50px 5% 50px 10%; color: #f4f1ea; display: flex; flex-direction: column; justify-content: center; }
.caja-verde-icono svg path { fill: #f4f1ea !important; }
.caja-verde-titulo { font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; color: #f4f1ea; text-transform: uppercase; margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 2px solid rgba(244, 241, 234, 0.3); line-height: 1.2; }
.caja-verde-texto p { font-size: 16px; line-height: 1.6; margin-bottom: 15px; color: rgba(244, 241, 234, 0.9); }
.caja-verde-texto strong { color: #f4f1ea; font-weight: 700; }

.caja-especies-info { width: 32%; background-color: #e8e4d9; border-radius: 30px; padding: 40px; display: flex; flex-direction: column; }
.caja-especies-cabecera { display: flex; align-items: center; margin-bottom: 25px; }
.caja-especies-icono { margin-right: 15px; display: flex; align-items: center; }
.caja-especies-titulo { font-size: 26px; font-weight: 900; color: #1a3319 !important; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
.caja-especies-lista { list-style: none; padding: 0; margin: 0; }
.caja-especies-lista li { font-size: 16px; color: #1a3319 !important; margin-bottom: 15px; padding-left: 25px; position: relative; line-height: 1.4; }
.caja-especies-lista li::before { content: "+"; position: absolute; left: 0; top: 0; font-weight: 800; font-size: 18px; color: #1a3319 !important; }

/* Responsive Cajas */
@media (max-width: 1024px) {
    .caja-verde-info { width: 58%; padding: 40px 4% 40px 8%; }
    .caja-especies-info { width: 38%; padding: 30px; }
}
@media (max-width: 768px) {
    .viaje-cajas-informacion { flex-direction: column; padding: 0 5%; gap: 30px; }
    .caja-verde-info { width: 100%; border-radius: 20px; padding: 40px 8%; }
    .caja-especies-info { width: 100%; }
}


/* ==========================================================================
   7. SERVICIOS INCLUIDOS
   ========================================================================== */
.viaje-servicios-bloque-contenedor { width: 100%; padding: 0 5%; margin-bottom: 50px; }
.viaje-servicios-bloque { display: flex; flex-wrap: nowrap; justify-content: space-evenly; width: 100%; padding: 25px 0; background-color: #eeebe1; border: 1px solid rgba(26, 51, 25, 0.15); border-radius: 25px; }
.servicio-columna { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; border-right: 1.5px solid rgba(26, 51, 25, 0.2); padding: 0 15px; }
.servicio-columna:last-child { border-right: none; }
.servicio-icono { margin-bottom: 12px; display: flex; justify-content: center; align-items: center; height: 50px; }
.servicio-texto { font-size: 13px; font-weight: 700; color: #1a3319; text-transform: uppercase; line-height: 1.3; letter-spacing: 0.5px; max-width: 150px; }

/* Responsive Servicios */
@media (min-width: 501px) and (max-width: 1024px) {
    .viaje-servicios-bloque { flex-wrap: nowrap !important; padding: 20px 5px !important; }
    .servicio-columna { flex: 1 1 0 !important; width: auto !important; margin-bottom: 0 !important; padding: 0 5px !important; border-right: 1.5px solid rgba(26, 51, 25, 0.2) !important; }
    .servicio-columna:last-child { border-right: none !important; }
    .servicio-icono { height: 35px !important; margin-bottom: 8px !important; }
    .servicio-icono svg { width: 32px !important; height: 32px !important; }
    .servicio-texto { font-size: 10px !important; letter-spacing: 0px !important; line-height: 1.2 !important; max-width: 100% !important; }
}
@media (max-width: 500px) {
    .viaje-servicios-bloque { flex-wrap: wrap !important; padding: 15px 5px !important; }
    .servicio-columna { flex: 0 0 33.33% !important; max-width: 33.33% !important; padding: 0 2px !important; margin-bottom: 20px !important; border-right: none !important; }
    .servicio-icono { height: 30px !important; margin-bottom: 6px !important; }
    .servicio-icono svg { width: 25px !important; height: 25px !important; }
    .servicio-texto { font-size: 9px !important; letter-spacing: 0 !important; line-height: 1.1 !important; word-wrap: break-word !important; }
}


/* ==========================================================================
   8. GALERÍA CARRUSEL
   ========================================================================== */
.viaje-seccion-galeria { width: 100%; padding: 0 5%; margin-bottom: 50px; box-sizing: border-box; }
.viaje-galeria-imagen-hero { width: 100%; aspect-ratio: 21 / 9; border-radius: 20px; overflow: hidden; margin-bottom: 20px; position: relative; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.viaje-galeria-imagen-hero img, .viaje-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.viaje-galeria-imagen-hero:hover img, .viaje-galeria-item:hover img { transform: scale(1.03); }
.viaje-carrusel-wrapper { position: relative; display: flex; align-items: center; }
.viaje-galeria-carrusel { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 15px; padding: 10px 0; -ms-overflow-style: none; scrollbar-width: none; }
.viaje-galeria-carrusel::-webkit-scrollbar { display: none; }
.viaje-galeria-item { flex: 0 0 30%; aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.08); cursor: pointer; }
.carrusel-btn, .modal-btn { background: rgba(26, 51, 25, 0.8) !important; color: #fff !important; border: none !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; font-size: 20px !important; cursor: pointer !important; position: absolute !important; z-index: 20 !important; transition: background 0.3s !important; display: flex !important; justify-content: center !important; align-items: center !important; }
.carrusel-btn:hover { background: rgba(26, 51, 25, 1) !important; }
.carrusel-prev { left: -25px !important; } 
.carrusel-next { right: -25px !important; }
.capa-cristal-protectora { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: transparent; }

/* Responsive Galería */
@media (max-width: 900px) {
    .viaje-galeria-item { flex: 0 0 45%; }
    .viaje-galeria-imagen-hero { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
    .viaje-galeria-item { flex: 0 0 85%; }
    .viaje-galeria-imagen-hero { aspect-ratio: 4 / 3; border-radius: 15px; }
    .carrusel-prev, .carrusel-next { display: none !important; } 
}


/* ==========================================================================
   9. MODAL LIGHTBOX NATIVO
   ========================================================================== */
.viaje-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); justify-content: center; align-items: center; }
.viaje-modal-cerrar { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 100000; transition: color 0.3s; line-height: 1; }
.viaje-modal-cerrar:hover { color: #ccc; }
.viaje-modal-contenido { display: flex; align-items: center; justify-content: center; width: 90%; max-width: 1200px; height: 80%; position: relative; }
.modal-imagen-contenedor { position: relative; max-width: 85%; max-height: 100%; display: flex; justify-content: center; align-items: center; }
#modal-imagen-activa { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,0.5); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.capa-cristal-protectora-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.modal-btn { background: transparent !important; font-size: 50px !important; width: auto !important; height: auto !important; opacity: 0.7 !important; }
.modal-btn:hover { opacity: 1 !important; background: transparent !important;}
.modal-prev { left: 0 !important; }
.modal-next { right: 0 !important; }
@media (max-width: 600px) { .modal-btn { font-size: 35px !important; } }


/* ==========================================================================
   10. CIERRE PÁGINA (Texto y Montaña Final)
   ========================================================================== */
.viaje-cierre-pagina-contenedor { width: 100%; padding: 0 5% 80px 5%; display: flex; flex-direction: column; align-items: center; }
.viaje-descripcion-final-bloque { width: 100%; max-width: 900px; text-align: center; margin: 0 auto 40px auto; }
.viaje-descripcion-texto { font-size: 18px; line-height: 1.8; color: #333; font-weight: 500; text-align: center; }
.viaje-descripcion-texto p { text-align: center; }
.viaje-descripcion-texto strong, .viaje-descripcion-texto b { color: #1a3319; font-weight: 800; }
.final-separador { margin: 0 auto; max-width: 400px; justify-content: center; }


/* ==========================================================================
   11. BOTON DE CONSULTA PAGINA INDIVIDUAL PRODUCTO.
   ========================================================================== */
   .boton-consulta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #689A1A;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 20px;
}