/*
Theme Name: Salka Travel Peru
Author: Darwin Lopez Ll.
Author URI: https://wordpress.org
Description: Salka Travel Peru emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

:root {
  --color-primary: #f2731c;
}

.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  color: #ffffff;
  background: #25d366;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

.whatsapp-float svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 1rem;
    bottom: 1rem;
  }
}

@media (max-width: 700px) {
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* MENU PRINCIPAL */

/* ========================================================
   Menú Principal - Diseño Minimalista y Profesional
======================================================== */

#menu-principal {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  background: #f8fafc; /* Ajusta según el fondo de tu cabecera */
}

#menu-principal > li {
  position: relative;
}

#menu-principal a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  font-size: 0.84375rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

#menu-principal a:hover {
  color: #f2731c;
}

/* --- Flechas Dinámicas (Nivel 1) --- */
#menu-principal .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  border-top: 4px solid #666;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

#menu-principal > .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  border-top-color: #f2731c;
}

/* --- Submenús (Nivel 2) --- */
#menu-principal .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease;
  border-top: 2px solid #f2731c;
  z-index: 999;
}

#menu-principal li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#menu-principal .sub-menu a {
  padding: 12px 20px;
  font-size: 0.84375rem;
  font-weight: 400;
  color: #555555;
  border-bottom: 1px solid #e9e9e9;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    padding-left 0.3s ease;
  text-transform: capitalize;
}

#menu-principal .sub-menu a:hover {
  background: #fafafa;
  color: #f2731c;
  padding-left: 25px; /* Efecto sutil de indentación */
}

/* --- Submenús (Nivel 3) --- */
#menu-principal .sub-menu .sub-menu {
  top: 0;
  left: 100%; /* Despliega hacia la derecha */
  border-top: none;
  border-left: 2px solid #f2731c;
  transform: translateX(15px);
}

#menu-principal .sub-menu li:hover > .sub-menu {
  transform: translateX(0);
}

/* --- Flechas Dinámicas (Niveles 2 y 3) --- */
#menu-principal .sub-menu .menu-item-has-children > a::after {
  border-left: 4px solid #666;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: none;
  float: right;
  margin-top: 6px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

#menu-principal .sub-menu .menu-item-has-children:hover > a::after {
  transform: translateX(4px); /* Desplaza la flecha en lugar de rotarla */
  border-left-color: #f2731c;
}

/* Eliminar borde del último elemento del submenú */
#menu-principal .sub-menu li:last-child > a {
  border-bottom: none;
}

/* FINAL DEL MENU PRINCIPAL */

/* Menú móvil: mostrar los submenús directamente, sin animaciones ni desplazamientos */
@media (max-width: 1023px) {
  #menu-principal a,
  #menu-principal .sub-menu a,
  #menu-principal .menu-item-has-children > a::after {
    transition: none;
  }

  #menu-principal .sub-menu {
    position: static;
    display: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }

  #menu-principal li:hover > .sub-menu {
    display: block;
  }

  #menu-principal .sub-menu a:hover {
    padding-left: 20px;
  }

  #menu-principal .sub-menu li:hover > .sub-menu {
    transform: none;
  }

  #menu-principal .menu-item-has-children:hover > a::after {
    transform: none;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1400px !important;
  }
}

#breadcrumbs a {
  font-weight: 500;
}

/* TABBY */

.responsive-tabs .responsive-tabs__panel {
  border: none !important;
}

.responsive-tabs .responsive-tabs__list__item {
  border: none !important;
  background: #f1f5f9 !important;
  font-size: 15px !important;
  color: #475569 !important;
  border-radius: 8px !important;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

.responsive-tabs .responsive-tabs__list__item--active,
.responsive-tabs .responsive-tabs__list__item--active:hover {
  background: var(--color-primary) !important;
  color: white !important;
  font-size: 15px !important;
}

.responsive-tabs ul.responsive-tabs__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .responsive-tabs ul.responsive-tabs__list {
    display: none;
  }
  .responsive-tabs .responsive-tabs__heading--active,
  .responsive-tabs .responsive-tabs__heading--active:hover {
    background: var(--color-primary) !important;
    color: #fff;
  }

  .content-itinerary::after {
    display: none;
  }
  .content-itinerary::before {
    display: none;
  }

  .day-marker {
    display: none;
  }

  .content-itinerary {
    padding: 0px !important;
  }

  .day-label{
    margin-top: 1rem !important;
  }
}

/* END TABBY */

/* CONTACT FORM */

.cf7-custom-form {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

/* Field Spacing */
.cf7-custom-form .cf7-field-group {
  margin-bottom: 1rem;
}

/* Label Styling */
.cf7-custom-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}

/* CF7 Wrappers Reset */
.cf7-custom-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Inputs & Textarea Styling */
.cf7-custom-form input[type="text"],
.cf7-custom-form input[type="email"],
.cf7-custom-form input[type="tel"],
.cf7-custom-form textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.625rem;
  font-size: 0.875rem;
  outline: none;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #1f2937;
  /* Sombra sutil en estado normal para dar profundidad */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.cf7-custom-form textarea {
  resize: none;
}

/* Focus States - Nuevo color naranja con sombra de enfoque profesional */
.cf7-custom-form input[type="text"]:focus,
.cf7-custom-form input[type="email"]:focus,
.cf7-custom-form input[type="tel"]:focus,
.cf7-custom-form textarea:focus {
  border-color: #f2731c;
  /* Anillo de enfoque suave usando el RGBA del naranja (#f2731c) */
  box-shadow: 0 0 0 3px rgba(242, 115, 28, 0.15);
}

/* Submit Button */
.cf7-custom-form input[type="submit"] {
  width: 100%;
  background-color: #f2731c;
  color: #ffffff;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
  /* Sombra del botón adaptada al nuevo color para mayor coherencia visual */
  box-shadow:
    0 4px 6px -1px rgba(242, 115, 28, 0.25),
    0 2px 4px -2px rgba(242, 115, 28, 0.25);
  transition: all 0.2s ease-in-out;
}

/* Hover State - Botón */
.cf7-custom-form input[type="submit"]:hover {
  background-color: #d86214; /* Un tono naranja ligeramente más oscuro */
  /* Sombra más pronunciada y ligero movimiento hacia arriba */
  box-shadow:
    0 6px 8px -1px rgba(242, 115, 28, 0.3),
    0 4px 6px -2px rgba(242, 115, 28, 0.3);
  transform: translateY(-1px);
}

/* CF7 Validation Messages Adjustment */
.cf7-custom-form .wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.cf7-custom-form .wpcf7-response-output {
  border-radius: 0.375rem;
  font-size: 0.875rem;
  padding: 0.75rem;
  margin: 1rem 0 0 0;
}

/* END CONTACT FORM */

.wp-block-gallery {
  margin-bottom: 1em;
}

.wp-block-gallery img {
  border-radius: 12px;
}

/* TIME LINE EN ITINERARIO */

/* Contenedor principal y línea de tiempo */
/* Contenedor del bloque Grupo de WordPress */
.content-itinerary {
  position: relative;
  padding-left: 40px; /* Espacio para la línea vertical */
}

/* La línea de tiempo vertical */
.content-itinerary::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 10px; /* Alineación con el punto naranja */
  border-left: 1px dashed #cbd5e1; /* Color grisáceo de la línea */
  z-index: 1;
}

/* Etiqueta inyectada por JS (Día X:) */
.day-label {
  position: relative;
  color: #f27521;
  font-weight: 700;
  font-size: 12px;
  margin-top: 3rem; /* Separación automática entre el día anterior y el nuevo */
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

/* Quita el margen superior extra solo al primer día */
.day-label:first-of-type {
  margin-top: 0;
}

/* El punto naranja con el halo transparente */
.day-marker {
  position: absolute;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: #f27521;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(242, 117, 33, 0.15);
  z-index: 2;
}

/* Ajuste opcional para los H3 dentro del grupo para mantener consistencia */
.content-itinerary h3 {
  margin-top: 0 !important;
}

/* FINAL DEL TIME LINE EN ITINERARIO */